Design Centrado no Usuário na Web

Após algumas semanas sem dormir direito, terminei finalmente meu Trabalho de Conclusão de Curso em Jornalismo. O assunto, é claro, tinha que ter a ver com Web:

Design Centrado no Usuário para o Website da Universidade Federal do Paraná [DOC / PDF - 2MB - 93 páginas] e o Protótipo Final [Flash - 400Kb]

O portal da UFPR (www.ufpr.br) permite o acesso a mais de 200 páginas através de menus de navegação. 35% de seus usuários relataram já terem se perdido navegando pelo website e 60% gostariam que ele fosse mais organizado. O website precisa de uma nova arquitetura e design da informação e, conseqüentemente, novo design gráfico que levem em conta as necessidades e comportamento dos usuários. Para tanto, é proposta a metodologia de Design Centrado no Usuário, contextualizada para a Web por Garret. Sua principal característica é o ciclo iterativo de definir-testar-avaliar, envolvendo usuários a cada ciclo, através de testes com protótipos de papel, card-sorting, entrevistas e etc. O tempo gasto nos testes é compensado seja qual for a métrica de sucesso (satisfação, conscientização de marca, corte de custos em suporte, etc). Apesar do usuário não interagir com o website e sim com quem está por trás dele, a deficiência na sua interface pode ofuscar uma política saudável de relacionamento com clientes.

O objetivo do trabalho não era propor um novo website, mas sim a metodologia para a reestruturação dele. Por isso, cada método está descrito em detalhes e sua origem está devidamente reconhecida. Cada decisão do projeto teve sua justificativa. É um bom exemplo de design racional, o mais adequado para esse tipo de website.

Quem acompanha este blog há algum tempo já deve ter visto os destaques do projeto que ia colocando na medida em que estava sendo desenvolvido. Porém, alguns dos leitores me perguntaram como é que se inseriam os métodos dentro de seus projetos. Espero que agora entendam a mecânica do negócio.

Por favor, não pensem que estou sugerindo que todos os projetos sejam iguais a esse. Percebam que a cada novo método, explico porque ele foi escolhido e a variante adotada. Se esse projeto fosse aplicado na prática, por exemplo, eu faria testes com maior confiabilidade, envolveria a administração da Universidade nas tomadas de decisões e teria uma porção de outras variávies que nem posso prever.

Por isso, o que espero que vocês entendam é a idéia de envolver usuários do começo ao fim do design, mantendo uma visão holística do produto final. Como isso será feito, fica a cargo do designer. Além dos métodos que descrevi, existem muitos outros.

O trabalho ainda sofrerá as alterações sugeridas pela banca de professores e por vocês, caros leitores. Quem estiver em Curitiba, está convidado para a apresentação do trabalho para a banca na sexta, 16 horas, no Campus Juvevê da UFPR.

comente aqui

Design interativo tem que ser iterativo

Apesar da cacofonia, o que quero dizer é que num projeto de interface com o usuário, é preciso estabelecer um ciclo do tipo entender > criar > testar. Cada etapa deve se repetir, até que o produto alcance as metas desejadas de satisfação do usuário. É claro que não estou sugerindo que batamos a cabeça contra a parede até que ela caia, até porque isso é impossível (design perfeito não existe).

Devemos contemplar as etapas do ciclo em etapas crescentes, seguindo a analogia da espiral (mola). Veja na animação abaixo as etapas de um design centrado no usuário sugeridas pelo Jesse James Garret contempladas pela minha analogia da espiral:

Primeiro você começa entendendo o as motivações do projeto, seu público-alvo e etc. Depois esboça soluções e testa o mais rápido possível com alguns usuários. O resultado deve ser analisado e as lições aprendidas, incorporadas no novo esboço. Essa técnica se repete enquanto os esboços vão ficando cada vez mais detalhados, até chegar ao produto final.

Hoje realizei alguns testes com um protótipo que se assemelha de longe com a versão final do produto. Só continha as opções dos menus principais de navegação, mais nada. Meu objetivo era validar a estrutura de navegação que antes já havia sofrido a iteração do card-sorting.

Tive a excelente idéia de usar um Palm ao invés dos protótipos de papel que a literatura recomenda. Além da motivação extra para os usuários que ficaram impressionados com a nova tecnologia, pude realizar o teste com o usuário em pé e numa velocidade incomparável a alternativa de papel. Imagine carregar 50 folhas de papel, cada uma representando uma página?

Apesar do Palm oferecer algums problemas no quesito tamanho da fonte, interação complicada e número limitados de linhas, creio que esses fatores não tenham afetado muito meu resultado. Só poderia confirmar isso se fizesse os mesmos testes usando papel, mas não tenho tempo para isso. Aliás, eu deveria realizar mais uma bateria de testes como esse para verificar se minhas alterações em decorrência do teste realmente melhoraram a solução, mas infelizmente meu tempo está acabando. Trabalho acadêmico é assim mesmo, sempre deixamos para a última hora e o resultado é meia-boca (pelo menos na minha faculdade é assim...).

Fiz o teste orientado a tarefas, aplicando aquela técnica de criar cenários motivadores para os participantes do teste. Não houve rejeições, pelo contrário, alguns até deram risada. Bom-humor facilita muito para conversar com pessoas que nunca vimos na vida. Dê uma olhada no roteiro de tarefas [DOC] propostas aos usuários e veja como não é difícil aplicar essa técnica. Depois, veja a planilha com os resultados [Excel] de cada teste e as mudanças que eles acarretaram ao diagrama de navegação que, por enquanto, está assim [WMF]. Se alguém tiver soluções para os problemas que ainda não consegui resolver, por favor, me ajude.

comente aqui

Card-sorting é melhor que buraco

O buraco a que me refiro é aquele jogo de cartas cujo objetivo é juntá-las em sequências lógicas, formando trincas e canastras. O card-sorting é uma técnica usada por arquitetos da informação para descobrir como o usuário classifica determinada informação em sua mente. Gosto de buraco, mas card-sorting é ainda melhor porque não depende da sorte para o jogador ganhar!

Ontem terminei de aplicar a técnica com 19 usuários do website da UFPR e estou muito feliz com o resultado. O procedimento foi bem simples:

1. Escrevi 20 cartões (10x7cm) que descrevem determinados conteúdos que estão contidos no website atual (para isso foi tão importante o inventário de conteúdo), por exemplo:
   

   Orientação vocacional, explicação sobre cotas, Provar, processo seletivo para pós-graduação, semana do trote, prova do vestibular, estatísticas

2. Agrupei os cartões em 11 categorias, formando o esboço da taxonomia do website. Criei mais outras 6 categorias alternativas que poderiam ser escolhidas pelos usuários
3. No total, foram 17 cartões de categorias (17x5cm) para classificar os cartões de conteúdo, tais como: Academia, Administração, Entrar na UFPR, etc.
4. Fui para as bibliotecas da universidade porque lá tem mesas e usuários não muito ocupados
5. Perguntei se o usuário tinha 5 minutos para responder uma pesquisa acadêmica e, caso sim, expliquei que bastava que ele pegasse um cartão do monte e escolhesse a categoria mais adequada. Apesar de ter 17 categorias no total, só poderiam ser usadas 10 no máximo. A mesa ficou mais ou menos assim:
   
   
6. Anotei quando os usuários não entendiam alguma categoria ou conteúdo do cartão e quando faziam alguma observação
7. Anotei os códigos contidos atrás de cada cartão, relacionando ao código da categoria escolhida (nos cartões eram letras de "a" a "q", nas categorias, números de 1 a 20)
8. Levei o resultado para casa e coloquei no modelo de planilha do Excel que esse tutorial explica como usar
9. À partir do resultado gerei a taxonomia final do website

leia ainda mais

Arquitetura da Informação comparada

Vocês lembram das análises heurísticas dos portais de universidade né? Pois bem, agora comparei a arquitetura da informação do website da UFPR com similares. A análise heurística foi fácil porque é mais fácil encontrar defeitos na capa do livro do que no seu conteúdo, ou melhor, na sua organização.

Como nunca tinha lido nada sobre esse tipo de análise, fiz umas buscas tentando encontrar algum procedimento semelhante à análise heurística, mas que não fosse apenas uma lista de verificação (checklist), para que me desse margem à comparações mais qualitativas.

Por coincidência, poucos dias antes, Louis Rosenfeld havia publicado o que parece ser as primeiras heurísticas para a Arquitetura da Informação de websites:

• Página principal
• Interface de busca
• Resultados da busca
• Navegação global (site-wide)
• Navegação contextual

Apesar de boas, elas estavam direcionadas mais para uma estratégia de baixo pra cima do que cima para baixo. Explico.

Como estou analisando os websites do lugar de quem vê de fora, não tenho acesso aos procedimentos utilizados para a construção do website, a tal da estratégia de baixo para cima (ou no inglês bottom-up). Não sei os metadados, o algoritmos das buscas e etc. Porém, posso analisar o website à partir daquilo que vejo, penetrando até onde der. Isso é de cima para baixo (top-down). Posso analisar os rótulos, os menus de navegação, os agrupamentos, a hierarquia e vários outros aspectos da arquitetura.

leia ainda mais

O Inventário do website

Ô coisa chata de fazer! Mas, como fazer o re-design de um site sem conhecê-lo como a palma da sua mão? Quero propor uma nova organização para o website da UFPR, mas antes preciso saber exatamente o que estarei organizando. Para isso, fui clicando em todos os links que haviam na página inicial e nas secundárias e anotei todos os pedaços de conteúdo que encontrei (content chunks, em inglês).

Se por acaso, estivesse arquitetando um website que ainda não existe, iria entrar em contato com todos os manda-chuvas do projeto (stakeholders) para descobrir o que eles pretendem colocar dentro do website. Seria mais trabalhoso, mas não haveria escolha.

O Inventário de Conteúdo tem só 5 páginas porque economizei verbo. Poderia ter sido mais descritivo em cada item, mas já que esse inventário foi escrito só para mim e não para ser compartilhado com uma equipe, nem discutido com manda-chuvas, escrevi só o necessário para ativar minha memória. Em cima desse documento, rabiscarei rótulos e agrupamentos menores. Depois, acho que vou usar um método chamado Diagrama de Afinidades (affinity diagram) para criar agrupamentos maiores. O objetivo é chegar na taxonomia principal do website. Falarei mais disso na sequência.

comente aqui