Núcleo de User Experience

Benchmark + Analytics + Wireframe = Design Pattern

Posted on: agosto 25, 2009

design-pattern

Uau, Benchmark, Analytics, Wireframe, Design Pattern… Uma sopa de palavras pra vocês, alguém aí fez bingo?

O papo agora é design pattern! Mas o que são design patterns? São padrões ou modelos que definem as melhores soluções de usabilidade a problemas comuns ou problemas de acessibilidade em contextos específicos. Esses modelos tornam mais fácil a compreensão de uma interface aos usuários em realizar suas tarefas.

Ok, chega de blá, bla, blá porque existem milhares de sites falando sobre design patterns. Nossa abordagem aqui é mais direta e prática…  e aí? Como aplicar no dia-a-dia a definição de design patterns?

Você, gênio da arquitetura de informação e usabilidade, já deve ter uma receita de bolo pronta, mas nós do NUX também temos nosso step-by-step, confira:

1. Definição do que será pesquisado – é a hora de escolher o foco de pesquisa. Ex.: os footers (mais uma palavra para marcar na cartela de bingo) dos sites que sou responsável estão fora de padrão, cada novo release (bingo!) possui um footer diferente do anterior. Preciso então definir um padrão mega-blaster para os footers! Muito bem garotão, próximo passo.

2. Benchmark – nada mais é do que obter referências, listar todos seus concorrentes, sites com soluções que você acha interessante, levando em consideração as funcionalidades. Depois de criar essa listagem de referências, analise cada caso sobre o que há de legal, ruim e dê uma nota. Ex.: achei interessante os footers da Revista Exame, CNET e desatualizados os footers do Estadão e UOL.

3. Google Analytics – a ferramenta serve para analisar qual o comportamento do usuário em seus sites, não se preocupe com os números absolutos apenas em identificar padrões de busca e acessos. Ex.: No meu site identifiquei que o usuário procura por notícias, acessa mais conteúdo específico para mulheres e como assinar meu serviço oferecido.

4. Wireframe – com base nas informações obtidas em suas referências e o Analytics, agrupe as informações e comece a rabiscar um modelo. Troque muita informação com o gerente responsável pelo projeto que trabalha, troque figurinhas com a equipe de SEO (se existir) a fim de esgotar todas as possibilidades de inputs ao seu trabalho.

wire1

Ex.: Com base no menu de navegação e resultado do analytics resolvi agrupar meu footer em 4 áreas: Navegação primária, conteúdo mais acessado, serviço ao assinante e informações institucionais.

wire2

5. Documentação – Depois que o formato for aprovado entre os interessados documente todas as funcionalidades do novo padrão criado. Crie um wireframe de alta fidelidade e compartilhe o documento entre os visual designers, diretores de criação e etc.

wire3

6. Testes com o novo formato – Como assim fechar um padrão se ele não foi testado? A chance de errar ao se criar um modelo com base no comportamento de seus usuários (via Analytics) e referências que já funcionam (benchmarks) é bem baixa, mas isso não lhe garante 100% de certeza que está indo para o caminho correto.

Todo design pattern está em eterna atualização, é um trabalho contínuo. Vocês notarão que esta não é uma receita fechada de como um footer deve ser, pois para cada produto há uma necessidade e usuários distintos.

Você, arquiteto e ux specialist precisa sempre estar atento as mudanças de cenário e novas ferramentas a fim de trazer valor a seu usuário e consequentemente um produto melhor.

Como aplicar testes de usabilidade? Isso fica para outro post com nossos ninjas do UX.

1 Response to "Benchmark + Analytics + Wireframe = Design Pattern"

Olhei o site finalizado, acredito que seja o http://www.3m.com/intl/br/mmm e realmente a navegação ficou super agradável assim como a organização das informações.

Uma coisa que me incomodou foi o fato de estar em flash, como ficam as informações em relação aos mecanismos de busca?

Obrigado !

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

NUX no Flickr

Participantes EBAI 2009

Carol e Guilhermo

Maria Ercília

EBAI 2009

EBAI 2009

EBAI 2009

Mais fotos

Twitter: Siga-nux

%d blogueiros gostam disto: