Como estruturar melhor a rea de contato com o usurio?

A utilizao da
Tcnica de Card Sorting para desenvolver a estrutura do website do Ncleo de
Inovao em design da Cadeia Txtil.
How to better organize the contact area with the
user? The Technique of Card Sorting to develop the
website structure of the Ncleo de Inovao em Design da Cadeia Txtil

Bianka Cappucci Frisoni
Mestre em Design pela PUC-Rio
NP-Design / Universidade do Vale do Itaja UNIVALI bianka@bc.univali.br
Viviane Steil
Bacharel em Desing Industrial
NP-Design / Universidade do Vale do Itaja - UNIVALI - steil20@brturbo.com



Palavras-chave em portugus - arquitetura da informao, card sorting, usabilidade
Resumo: O presente trabalho tem por objetivo ressaltar a importncia da utilizao de tcnicas que avaliem a
percepo e os costumes dos usurios, tendo em vista a aplicao dos resultados no design das estruturas de sites para
a web, tornando a rea de contato do site com os usurios mais prxima da realidade desses usurios. Para tanto,
utilizou-se como exemplo os resultados obtidos com a tcnica de Card Sorting, aplicada no desenvolvimento do site do
Ncleo de Inovao em Design da Cadeia Txtil.

Key-words information architecture, card sorting, usability
Abstract: The present work has the aim to stand out the importance of the use of techniques that can evaluate the users
perception and customs, regarding the application of its results in the design of site structures for web and to become
the site contact area with the users next to their reality. As to do so, it was used the results obtained with the Card
Sorting technique applied to the development of the site created for the Ncleo de Inovao em Design da Cadeia
Txtil.


1. Introduo

Vrias sensaes podem ser despertadas nos
usurios durante a navegao que variam, de
acordo com a experincia dos mesmos. Elas
podem ser prazerosas, aguar o interesse, causar
frustrao, etc., dependendo da configurao
dos possveis caminhos e meios que o ambiente
da navegao permitir.

Deve-se a isto a importncia do projeto da
interface que a ponte de contato entre o ser
humano e a mquina. Esta interface deve ser
construda de forma simples, direta, agradvel e,
por vezes, divertida, com o propsito de levar o
usurio a concentrar-se na tarefa e, assim,
atingir seus objetivos.

Uma boa interface aquela apresentada para
que o usurio tenha certeza de que est no
endereo correto, que o convide a passear pela
vizinhana e, caso ele se perca, tenha sempre
um sinal que indique o caminho de volta para
casa ou a forma de seguir dali para adiante.

No entanto, se os anseios dos usurios no so
conhecidos, podem ser feitas conexes nos
caminhos que no ajudam a orient-los,
ensejando-lhes o desejo de retornar entrada e
comear tudo de novo; isso, quando no
acontece de desistirem e partirem para outro
endereo que lhes parea mais amigvel.

Em suma, o usurio tem a expectativa de um
processo simples, com feedback imediato e uma
linguagem adequada a sua capacidade de
entendimento. O que visto por ele - a interface
- a parte de contato, de comunicao, que o
atrai, seduz, informa, indica e promove o site,
como a esttica do display de um
eletrodomstico. Na verdade, o que o conduz e,
realmente, ajuda a gui-lo so os caminhos


invisveis, que o orientam para o prximo passo
e que correspondem forma como ele prprio
constri o seu pensamento. Isto, o
desenvolvedor do site tem de descobrir e
reproduzir na arquitetura do seu projeto para
que o usurio sinta-se confortvel numa
navegao em velocidade adequada e que
corresponda a sua maneira de caminhar.

Pensando assim e acreditando ser o usurio o
centro do projeto, uma parte do processo do
desenvolvimento do website do NID-CT
(Ncleo de Inovao em Design da Cadeia
Txtil), sediado na UNIVALI em convnio com
o SEBRAE, foi dedicada investigao da
arquitetura da informao de usurios
pertencentes ao grupo de interesse dos assuntos
do website.

2. A Pesquisa
2.1 Metodologia

A metodologia para o desenvolvimento desta
pesquisa envolveu um mtodo prprio,
formalizado a partir de alguns passos, traados
pela equipe, e algumas tcnicas especficas que
auxiliaram em cada etapa do processo. Dentre
elas, uma em especial, que ser abordada aqui
o Card Sorting.

Tendo em vista o objetivo do Ncleo de
constituir-se num espao de referncia na rea
de informao sobre a cadeia txtil (calado,
aviamentos, jias, vesturio e acessrios) para o
mercado, traou-se para o site um perfil
mesclado: website educativo, profissional e de
servios. Isto, porque se pretende transmitir
muitas informaes para educar o pblico,
atingir o mercado relativamente cultura do
design e divulgar servios especializados na
rea, como consultorias, alm de manter o
usurio informado sobre as notcias da rea.
Essas so caractersticas comuns das instituies
e associaes que concentram em seus sites
grande volume de informaes para demonstrar
expertise na rea, evidenciar a necessidade de
contratao de profissionais qualificados bem
como fornecer notcias do setor e oferecer um
banco de dados.

Logo se percebeu que o primeiro passo seria
pesquisar sites de algumas instituies e
associaes para analisar o que era comum entre
eles e partir para a listagem do que no deveria
faltar no site do Ncleo. Foram analisados oito
sites de associaes e grupos ABERGO,
ABIT, IBGM, ABRE, ABTG, ADG, SBDI e
Rede Design Brasil.

Todos os sites foram navegados, tiveram sua
navegao registrada e todas as telas analisadas.
Foram observados os aspectos visuais e de
velocidade da navegao, a terminologia usada,
a qualidade dos documentos, os itens abordados
em cada um deles, entre outros. Depois dessa
analise individual, foi realizada uma
comparao entre eles. Para este trabalho, houve
a preocupao de ser utilizado sempre o mesmo
equipamento - um microcomputador Athlon
AMD 2.0, com 256 MB de memria RAM,
conexo discada com modem de 56kb, alm dos
mesmos horrios de pesquisa - das 24:00 s
2:00 horas e das 12:00 s 14:00 horas.

A comparao dos sites gerou uma srie de
dados importantes para a pesquisa, embora, este
artigo tenha seu foco voltado para as
informaes necessrias ao desenvolvimento da
tcnica de Card Sorting, utilizada para gerar a
arquitetura da informao do site e dar incio
etapa de gerao de alternativas do mesmo.

Foi constatado que um conjunto de itens faziam-
se presentes em todos os sites. Com base nos
mesmos, foram selecionados os itens que
deveriam estar presentes no site do Ncleo para
poder-se investigar, tambm com o usurio, se
faltava algum outro item.

A partir deste procedimeto, seguiu-se para a
realizao da Tcnica de Card Sorting.

O Card Sorting uma tcnica comumente
utilizada para descobrir-se o modelo mental que
os usurios tm de determinado espao de
informao.

Alguns dos benefcios da utilizao da tcnica
de Card Sorting so destacados por Moraes
(2003):


simples e fcil de aprender; barato (o nico
custo real o tempo da preparao);
rapidamente aplicvel, o que permite que mais
usurios sejam envolvidos; envolve os usurios
no processo do projeto e ajuda a demonstrar
que o novo sistema ser criado de acordo com
as necessidades dos usurios; permite
compreender como 'pessoas reais' categorizam
informao; identifica os provveis itens que
so difceis de categorizar e achar; e identifica
provveis terminologias que so mal
entendidas.

Para a aplicao da tcnica realizou-se,
primeiramente, um teste piloto com um Doutor
da rea de ergonomia e, depois de poucos
ajustes, partiu-se para os testes definitivos.

No pr-teste aplicado, foram listados alguns
itens que poderiam ser ajustados, tais como:
- Itemizar as instrues, a fim de esclarecer as
dvidas dos usurios durante a aplicao do teste.
- Substituir a nomenclatura do item Sobre a
associao por Sobre o ncleo.
- Substituir a nomenclatura do item News por
Notcias.
- Retirar os cartes brancos (submenus) Links e
Notcias, em funo de j estarem presentes nos
cartes alaranjados (menus).

Participaram, individualmente, do Card Sorting
treze pessoas: seis professores do curso de Design
de Moda (mestres e especialistas); trs Professores
do curdo de Design Industrial (mestres e
especialistas) e quatro alunas do curso de Design de
Moda. O tempo que cada participante levou para a
elaborao da estrutura exigida variou de 30 a 45
minutos.

Foram elaborados, tambm, instrutivo com
todos os passos a serem seguidos e ilustrao de
alguns passos, caso no ficasse claro o que era
solicitado ao participante fazer, como mostra a
figura que se segue.







Alm disso, procurou-se esclarecer os
participantes quanto proposta do ncleo, no
sentido de dar-lhes cincia do que se tratava
para poderem imaginar um site para tal funo.

Todo o material (papel, cola, cartes impressos e
em branco) foi fornecido aos participantes,
requerendo-se deles que preenchessem um
formulrio com alguns dados pessoais e
algumas perguntas para saber qual o seu grau de
expertise com relao utilizao da Internet.
Depois, que seguissem a ficha com as instrues
e desenvolvessem a tcnica.

Com base nos resultados da aplicao da
tcnica, deu-se incio construo da rvore
semntica do site e gerao de alternativas
para o mesmo.

3. Desenvolvimento e resultados da tcnica

O desenvolvimento da tcnica comeou com a
listagem do contedo que formalizou os cartes
a partir da pr-definio dos itens do site,
considerando-se a anlise de mercado feita com
oito sites de mesma categoria, como explicado
no item da metodologia. Os resultados da
anlise foram:
Itens comuns aos sites avaliados
- Informaes sobre a Associao (Institucional,
Objetivos, Servios, Associados, Categorias,
Como se tornar scio, Benefcios de ser scio,
Cdigo de tica, Lista de scios, Vdeos,
Conquistas, Quem somos, Diretoria (comit),
Parcerias (empresas ou associados), Projetos,
Faq (perguntas freqentes).
- Informaes sobre o que acontece no mercado
(Setor, Profisso de designer)
- Links (Dividido por Categorias)
- Biblioteca (Literatura Tcnica) (Sites, Livros,
Publicaes Prprias)
- Utilidades (Software, Manuais,Tutoriais)
- Chat (Realizados com convidados, On line)
- Currculo (Cadastro de Currculo On line,
Pesquisar Currculo)
- News/Novidades (Notcias, Cliping, Releases)
- Disposio de materiais (Artigos)
- Revistas ou Boletins
- Agenda (Eventos, Calendrio)
Fig.1 Exemplo do
desenvolvimento
do cardsorting
utilizado na ficha
de instruo.


- Economia (Estatsticas, Faturamento,
Empregos)

Itens adaptados para o NID-CT
- Sobre o Nid (Misso [Quem somos, Diretoria],
Objetivos, Cadastro, Benefcios, Categorias
[Empresas, Consultores, Estagirios,
Escritrios], Como se cadastrar (cadastro
online), Vdeos, Conquistas, Parcerias [Sebrae,
Outras Universidades],
Consultorias/Eventos/etc., FAQ)
- Cadeia (Vesturio [Servios, Consultores,
Projetos realizados, Links];
Acessrios[Servios, Consultores, Projetos
realizados, Links]; Calado [Servios,
Consultores, Projetos realizados, Links]; Jias
[Servios, Consultores, Projetos realizados,
Links]; Aviamentos [Servios, Consultores,
Projetos realizados, Links])
- Mercado (Cadeia Textil, Profisso de designer,
Estatsticas)
- Servios (Estgio (cadastro currculo),
Consultorias)
- Agenda (Eventos, Calendrio)
- News (Notcias, Clipping, Acervo de notcias
(por ms))
- Chat (Convidados on-line)
- Biblioteca (Livros interessantes)
- Links (Vesturio, Acessrios, Calado, Jias,
Aviamentos,Outros)
- Outros ncleos (Nid Embalagem, Nid
Cermica, Nid Artesanato, Nid Mobilirio)

Aps a anlise, cada item foi escrito em cartes
separados que foram entregues para o usurio
organizar.

As etapas envolvidas na aplicao da tcnica,
esto descritas abaixo.

- Foram entregues ao participante uma pilha de
cartes, uma caneta hidrocor e um tubo de cola.
- Foram disponibilizados trs tipos de cartes:
cartes alaranjados, cartes brancos e cartes cinza;
- Os cartes alaranjados eram os menus principais;
os cartes brancos diziam respeito ao contedo dos
menus e os cartes cinza poderiam ser utilizados
para a insero de informaes em categorias
propostas pelo participante;
- O participante deveria organizar os cartes brancos
dentro dos menus estabelecidos (cartes alaranjados)
e montar uma estrutura, utilizando seus prprios
critrios;
- O participante teve a liberdade de interferir com
informaes (com o hidrocor), indicando caminhos
ou fazendo algum comentrio para ressaltar algum
item importante;
- Foi permitido a eliminao ou o acrscimo de
itens. Para tanto, foram disponibilizados cartes das
duas cores em branco, alm dos cartes cinza que
poderiam ser utilizados na insero de novas
categorias que no se encaixassem nos assuntos
propostos;
- O participante deveria fazer uso de uma caneta
hidrocor para registrar as ligaes entre menu e sub-
menu;
- A organizao dos cartes, proposta pelo
participante, deveria ser colada num papel maior,
para fins de registro.
O formulrio entregue a cada participante
forneceu ao projeto informaes quanto
experincia do usurio com microcomputadores
e Internet, como segue:
- Todos os usurios utilizavam o microcomputador
h mais de um ano e todos eles eram usurios de
Internet h mais de um ano.
- Nove dos participantes afirmaram que utilizam o
micro mais de 10 horas por semana; um participante
utiliza o microcomputador de 5 a 10 horas por
semana e trs participantes utilizam o
microcomputador apenas 5 horas por semana.
- Quanto ao tempo de uso da Internet: Sete usurios
utilizam mais de 10 horas por semana; trs usurios
usam de 5 a 10 horas por semana e trs usurios
usam a Internet at 5 horas por semana.
- Oito pessoas entrevistadas usam
microcomputadores em casa, no trabalho e na
Universidade; trs usurios usam
microcomputadores em casa e na Universidade e
dois usurios utilizam o microcomputador em casa e
no trabalho.

Pode-se observar que esse pblico tem uma
considervel experincia no uso de
microcomputadores e Internet. A experincia
desse pblico com a Internet, com certeza,
fornece dados significativos, pois essas pessoas
j formaram, nesse tempo, um senso crtico.
Assim sendo, pode-se avaliar at que ponto as
estruturas, consideradas padres na Web, so
vlidas e o que os usurios esto precisando.

De posse da pilha de cartes e do papel em
branco para a organizao dos mesmos, o


usurio deveria partir para o reconhecimento
dos cartes alaranjados (menu principal). Nesta
etapa, aps observar com ateno cada um dos
itens, ele organizava de forma planejada a
disposio dos dez cartes alaranjados no papel.

Observou-se, ento, que a organizao da
estrutura poderia revelar como o usurio
imagina a disposio (localizao) do menu
principal: cinco usurios organizaram o menu
principal, alinhando horizontalmente os cartes
no topo da folha em branco; quatro usurios
organizaram o menu principal, alinhando os
cartes principais (alaranjados) verticalmente,
do lado esquerdo da folha em branco. Dois
usurios apresentaram estruturas mistas que se
compunham de uma estrutura alinhada
horizontalmente e uma estrutura alinhada
verticalmente, contudo ainda prximas das
outras. Apenas dois usurios organizaram os
cartes de forma aleatria no papel, fora de
padro, o que chamou ateno para, num
segundo momento, fazer uma investigao do
porqu de tais estruturas.

No que diz respeito navegao no todo, apenas
um dos usurios organizou um fluxo que
representava uma navegao vertical. Os demais
participantes apresentaram uma navegao
horizontal.











Fig. 2 Exemplo de resultado da tcnica

Para Barreto (1998), as estruturas verticais de
navegao so caractersticas da segunda
gerao de web sites. Atualmente, o tipo de
organizao horizontal est presente na maioria
dos web sites. Esse tipo de estrutura de
navegao faz com que o usurio tenha maior
controle sobre o contedo que acessou.
Outro aspecto que chamou a ateno foi a
seqncia em que os cartes alaranjados foram
dispostos sobre o papel: seis dos usurios
elaboraram uma seqncia semelhante entre si,
onde os primeiros cartes diziam respeito ao
ncleo (Nid Cadeia Txtil e Sobre o
Ncleo), dispondo, em seguida, o item
Servios, como se a primeira coisa a ser lida
fosse uma apresentao do Ncleo para se saber
do que tratava o site.

Aps a disposio dos cartes alaranjados
(menu principal), os usurios dispuseram os
cartes brancos (sub menus). Nessa etapa, os
participantes espalharam os trinta e quatro
cartes brancos sobre o papel, a fim de
reconhecerem cada subitem e encaixarem-nos
dentro do menu principal, realizando, assim, as
incluses e excluses de contedo.

Apenas trs participantes utilizaram todos os
cartes disponveis, sem excluir um s item.
Dentre estes, dois participantes sugeriram novos
contedos.

Pode-se observar, durante a aplicao da
tcnica, assim como nos comentrios feitos
pelos prprios participantes no formulrio
entregue a eles, que uma das maiores
dificuldades dos usurios para organizarem o
contedo se deu em funo da falta de
conhecimento dos reais objetivos do Ncleo de
Design (NID-CT). Isto leva a crer que eles
encaram a home de um site como um carto de
visita, uma vitrina que deve ambientar bem o
site, de forma a ficar claro o objetivo do site e o
que ele dispe de informao para que quem
estiver navegando nele pela primeira vez saiba,
exatamente, o que ele significa.

Uma outra questo muito importante a ligao
do design do site com a identidade corporativa
da empresa para que ele reforce a imagem do
rgo responsvel por aquele domnio e
permita, tambm, a associao imediata com o
universo/rea a que o site pertence.

Tendo essas questes em mente partiu-se para a
definio do design da estrutura do site e a
delimitao das reas visuais do site.



Foram considerados dois indicadores para o
incio do design da estrutura do site: a opinio
da maioria dos respondentes do Card Sorting
que demonstraram facilidade na localizao do
menu principal na horizontal; e pela anlise de
mercado realizada que apontou uma certa
tendncia por menus na horizontal, tambm. E,
por mais que no se quisesse caminhar para uma
padronizao, de acordo com os demais sites,
verificou-se que se podia alcanar um
diferencial, no importando se a estrutura era a
mesma que a de outros, principalmente se estes
estavam atingindo o objetivo de proporcionar
uma relao amigvel com o usurio.

Para Damasceno (2003), impor aos usurios um
modelo de leiaute com alteraes muito
drsticas pode afugent-los do site. A autora
coloca, ainda, que o termo padro no exclui
completamente as possibilidades de inovao,
porm certas mudanas podem nem sempre ser
bem sucedidas.
Damasceno(2003), apresenta um grfico onde
demonstra a organizao visual de uma home
page:










As reas delimitadas so numeradas e descritas
como: 1- Logotipo ou rea do logotipo, 2- Anncios
externos ou reas de busca, 3- Menu Administrativo,
4- Menu de navegao, 5- rea de destaque, 6-
Corpo do portal, 7- Seo de compras e anncios e
8- Rodap do site.
Com base nestas questes props-se a estrutura
do site da seguinte forma:











Aps a estruturao do site e organizao do
contedo seguiu-se para a gerao de
alternativas da pgina inicial do site.













Fig.5 Exemplo da gerao de alternativa do site.

4. Resultados esperados
Aps o momento de gerao de alternativas,
uma delas ser escolhida para ser aprofundada e
desenvolvida como um modelo para pr-teste,
que dever ser avaliado novamente pelos
usurios. Ante as crticas dos mesmos, sero
feitos ajustes na pgina e novamente testada
para ser validada. A, ento, poder-se- partir
para a construo detalhada do site.

5. Referncias Bibliogrficas
DAMASCENO, Anielle. Webdesign Teoria e
Prtica. Florianpolis: Visual Books, 2003.
BARRETO, Alexandre. ASP Active Server Pages.
Disponvel em: http://www.superasp.com.br/tutoriais.asp
Acessado em: 05/06/2004
MIRANDA, Flvia & Moraes, Anamaria de.
Avaliao da arquitetura de informao de um site
de comrcio eletrnico atravs da tcnica Card
Sorting. Artigo publicado no 2 Congresso
Internacional de Pesquisa em Design. Rio de
Janeiro, 2003.

Fig. 3 Exemplo de
organizaodas
reas de contedo do
site proposto por
Damasceno (2003)

Fig.4 Estrutura
organizacional
do contedo
do sites.