O documento discute conceitos e princípios fundamentais de design e usabilidade na web. Ele aborda tópicos como definições de usabilidade, metas da usabilidade, técnicas e metodologias, arquitetura de informação, design de interface e princípios aplicados à web como não fazer o usuário pensar, não abusar da paciência do usuário e manter o foco de atenção do usuário.

1. Design e Usabilidade na Web
Projetando interfaces que funcionam
Design e Usabilidade na Web Marcelo Vianna

2. O que vamos ver?
• Conceitos
• Metas da Usabilidade
• Principais Técnicas e Metodologias
• Arquitetura de Informação
• Design de Interface
• Princípios Aplicados à Web
• Boas Práticas para um Design Efetivo na Web
• Perguntas
Design e Usabilidade na Web Marcelo Vianna

3. Conceitos
Design e Usabilidade na Web Marcelo Vianna

4. Conceitos
O que é Usabilidade?
“A capacidade de um sistema interativo oferecer a um usuário,
em um determinado contexto de operação, a realização de
tarefas de maneira eficaz, eficiente e agradável.”
Outras definições
É a capacidade em termos funcionais humanos
de um sistema ser usado facilmente e com
eficiência pelo usuário.
Shackel (1992)
Usabilidade está diretamente ligada ao diálogo
na interface. É a capacidade do software em
permitir que o usuário alcance suas metas de
interação com o sistema
Scapin (1993)
Design e Usabilidade na Web Marcelo Vianna

5. Conceitos
E o que é Usabilidade de Interação?
É a facilidade de utilização, quer seja de uma página Web,
um software ou qualquer outro sistema que possua interface
de interação com o usuário.
A usabilidade de interação refere-se à qualidade ou
capacidade de um sistema ou software de ser
compreendido, aprendido, utilizado e de ser atrativo ao
usuário, em condições específicas de utilização.
Design e Usabilidade na Web Marcelo Vianna

6. Conceitos
Ergonomia IHC
Identifica fatores humanos Interação Humano-computador é uma
referentes à eficiência de área de pesquisa dedicada a estudar
utilização de sistemas por fenômenos de comunicação entre
parte dos usuários pessoas e sistemas computacionais
Ergonomia
Usabilidade
IHC
Design e Usabilidade na Web Marcelo Vianna

7. Conceitos
Por quê a Usabilidade na Web
é tão importante?
• Se um site for difícil de usar, o usuário sai.
• Se a homepage não for clara o suficiente para
mostrar o que a empresa oferece e o que é
possível fazer, o usuário também sai.
• Se o usuário se perder, ele sai.
• Se demorar para carregar, ele definitivamente sai.
Design e Usabilidade na Web Marcelo Vianna

8. Metas da Usabilidade
Design e Usabilidade na Web Marcelo Vianna

9. Metas da Usabilidade
• O usuário tem que conseguir usar
• O usuário tem que querer voltar a usar
Design e Usabilidade na Web Marcelo Vianna

10. Metas da Usabilidade
1. Facilidade de aprendizagem
O usuário consegue rapidamente explorar o
sistema e realizar suas tarefas
2. Efetividade
Aumento de produtividade em função da curva
de aprendizado
3. Memorização
Os usuários precisam memorizar as suas
tarefas sem sobrecarregar suas interações
4. Flexibilidade
O sistema e a interface devem ser flexíveis aos
erros dos usuários
5. Eficiência
Menos trabalho, mais resultado
6. Satisfação
Conforto, segurança e felicidade subjetiva
Design e Usabilidade na Web Marcelo Vianna

11. Metas da Usabilidade
Índice de Sucesso do Serviço
É o número de vezes em que ele é completado,
dividido pelo número de vezes em que é procurado.
O sucesso depende, entre outras coisas, de o usuário
conseguir:
• Localizar o serviço que deseja
• Reconhecer o serviço como necessário
• Reconhecer a informação necessária para realizá-lo
• Efetuar sem erros a transação
• Obter o resultado desejado
Design e Usabilidade na Web Marcelo Vianna

12. Principais Técnicas e Metodologias
Design e Usabilidade na Web Marcelo Vianna

13. Principais Técnicas e Metodologias
• Análise Heurística
• Benchmark
• Questionário Online
• Card Sorting
• Monitoramento Estratégico
• Workshop de Usabilidade
• Testes de Usabilidade
• Análise Contextual
• Avaliação de Acessibilidade
Design e Usabilidade na Web Marcelo Vianna

14. Benefícios Mensuráveis
da Usabilidade
Design e Usabilidade na Web Marcelo Vianna

15. Sites mais usáveis, resultados mensuráveis
São muitos os benefícios que o emprego de boas práticas
da usabilidade pode proporcionar a um projetos na Web
Quantificar esses resultados, permite uma clara
percepção do seu impacto sobre o sistema de interação
• Menor custo de desenvolvimento
• Menor custo de manutenção
• Aumento de vendas
• Retenção de consumidores
• Aumento na taxa de sucesso (menos abandono)
• Aumento na eficácia
• Maior eficiência (mais tarefas em menos tempo)
• Menor custo de treinamento
Design e Usabilidade na Web Marcelo Vianna

16. Arquitetura de Informação
Design e Usabilidade na Web Marcelo Vianna

17. Arquitetura de Informação
O que é?
Arquitetura de informação não se trata apenas
de mapas ou diagramas, mas de Comunicação
Para que serve?
Organizar a informação de um ambiente de
forma que seus usuários encontrem com
facilidade a informação que procuram
Quem é o responsável?
Arquiteto de Informação
Design e Usabilidade na Web Marcelo Vianna

18. Arquitetura de Informação
O que o AI faz?
Em geral um arquiteto de informação está envolvido
com as seguintes etapas:
1. Pesquisa com o usuário
O que as pessoas precisam saber e encontrar em
um website?
2. Definição de conteúdo e funcionalidades
Textos, imagens, buscas, menus, botões, etc.
3. Desenvolvimento e organização de esquemas
Como o site será dividido e organizado?
Como o usuário navegará pelo site?
4. Desenvolvimento de interface
Integração com o designer gráfico ou designer de
interfaces.
Design e Usabilidade na Web Marcelo Vianna

19. Arquitetura de Informação
O que ele entrega?
O mais típico deliverable do arquiteto de informação
é o Mapa de Arquitetura. Nele são definidos a
estrutura e organização dos grupos de informações
do site, a fim de suprir as necessidades dos usuários
e os objetivos do negócio
Os deliverables mais comuns são:
• Mapas de AI, Diagramas de Fluxo e Story Boards
• Inventário de Conteúdo
• Lista de funcionalidades
• Lista de keywords (palavras-chave)
• Lista de paths (ou fluxos)
• Checklist de padrões
Design e Usabilidade na Web Marcelo Vianna

20. Design de Interface
Design e Usabilidade na Web Marcelo Vianna

21. Design de Interface
O que é?
É o planejamento físico e organizacional dos
elementos de interface com o usuário
Para que serve?
Desenvolver graficamente a representação
da diagramação e organização espacial
dos componentes e elementos de interface
Quem é o responsável?
Designer de Interfaces
Design e Usabilidade na Web Marcelo Vianna

22. Design de Interface
O que ele entrega?
• Wireframes especificados, incluindo
mensagens de erro, mouse overs,
animações, respostas de sistema e até
comportamentos temporários.
• Layouts com todas as definições gráficas e
visuais de todos os elementos de interface,
incluindo cores, tipografias, botões, menus,
cabeçalhos, rodapés, banners, etc.
• Modelos básicos em HTML (templates) e
imagens tratadas e otimizadas para serem
aplicados nas interfaces do site ou sistema
• Manuais e guias de aplicação de padrões
e estilos visuais
Design e Usabilidade na Web Marcelo Vianna

23. Design de Interface
Objetivos
Objetos bem desenhados devem ser
fáceis de interpretar e compreender.
O desenho de uma interface ou
produto deve buscar alcançar os
objetivos propostos.
Design e Usabilidade na Web Marcelo Vianna

24. Princípios Aplicados à Web
Design e Usabilidade na Web Marcelo Vianna

25. Entendendo o Usuário
Como o Usuário Pensa?
Os hábitos dos usuários na Web não são muito
diferentes dos hábitos de um consumidor numa
loja ou supermercado.
Dão uma olhada geral em cada página e clicam
no primeiro link ou imagem que capture seu
interesse ou que se pareça com o que está
procurando.
De fato, boa parte da página não é nem vista.
A maioria dos usuários procura algo interessante
ou útil para clicar. Assim que encontra algo
promissor, ele clica.
Se o resultado não supre sua expectativa, ele
volta e continua procurando ou sai
Design e Usabilidade na Web Marcelo Vianna

26. Entendendo o Usuário
Como o Usuário Pensa?
1. O Usuário aprecia qualidade e credibilidade
O conteúdo é mais importante que o design que o apoia
2. O Usuário não lê...“scaneia”
Ele corre os olhos a procura de referências que o guiem
3. O Usuário é impaciente e quer gratificação imediata
Site “lento” ou pouco objetivo tem alta taxa de abandono
4. O Usuário não escolhe nem navega linearmente
Tende a clicar na primeira opção mais provável ou notável
5. O Usuário segue a intuição
Não importa “como” funciona, desde que ele consiga usar
6. O Usuário quer ter o controle da navegação
Utiliza os recursos do browser e rejeita pop-ups surpresa
Design e Usabilidade na Web Marcelo Vianna

27. 10 Princípios Básicos para
um Design Efetivo na Web
Design e Usabilidade na Web Marcelo Vianna

28. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
www.twitter.com
A página inicial do twitter deixa claro, de imediato e
em diversos idiomas, para que serve o site, permite
que o visitante faça buscas e acesse alguns perfis em
destaque, mesmo antes de se cadastrar. Além disso,
oferece ao visitante um formulário bem simples para
que ele se cadastre rapidamente ou para que o
usuário já cadastrado faça logon e acesse seu perfil.
Design e Usabilidade na Web Marcelo Vianna

29. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
www.facebook.com
A página inicial do facebook é um excelente exemplo
de página de alta performance, carregamento rápido,
informação clara e objetiva, e acesso rápido ao logon
do usuário e um formulário para cadastramento de
novos visitantes
Design e Usabilidade na Web Marcelo Vianna

30. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
3. Mantenha o foco de atenção do usuário
www.humanized.com
Software GRÁTIS pode ser uma grande motivação
para o usuário. Não é coincidência que o maior
elemento neste página seja a palavra FREE e logo
ao lado um botão verde para fazer o download
Design e Usabilidade na Web Marcelo Vianna

31. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
3. Mantenha o foco de atenção do usuário
4. Destaque os recursos e benefícios
www.netmovies.com.br
A página inicial deixa claro rapidamente sobre o que
trata o site e destaca as principais características,
vantagens, promoções e atrações
Design e Usabilidade na Web Marcelo Vianna

32. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
3. Mantenha o foco de atenção do usuário
4. Destaque os recursos e benefícios
5. Faça uso de texto objetivo
www.mozilla.org/pt-BR/firefox
O Texto na Web precisa ser direto e sintetizado e dar
a informação de forma objetiva e sem rodeios. A
mensagem principal deve estar sempre em maior
destaque na página e sempre que possível usar
tópicos e links curtos e claros
Design e Usabilidade na Web Marcelo Vianna

33. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
3. Mantenha o foco de atenção do usuário
4. Destaque os recursos e benefícios
5. Faça uso de texto objetivo
6. Valorize e priorize a simplicidade
www.wikipedia.org
O Wikipedia tem uma interface extremamente
simples, totalmente focada na riqueza de conteúdo e
na sua natureza colaborativa
Design e Usabilidade na Web Marcelo Vianna

34. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
3. Mantenha o foco de atenção do usuário
4. Destaque os recursos e benefícios
5. Faça uso de texto objetivo
6. Valorize e Priorize a simplicidade
7. Não tenha medo de espaços brancos
www.dropbox.com
O design limpo e quase minimalista da interface dá
clareza e objetividade, levando o usuário a uma de
três ações possíveis: logon se for usuário, assistir a
um vídeo sobre o sistema ou fazer logo o download
do programa
Design e Usabilidade na Web Marcelo Vianna

35. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
3. Mantenha o foco de atenção do usuário
4. Destaque os recursos e benefícios
5. Faça uso de texto objetivo
6. Valorize e Priorize a simplicidade
7. Não tenha medo de espaços brancos
www.skype.com
8. Comunique-se com “linguagem visual”
O Site do Skype possui uma interface com cores
bem vivas e imagens de pessoas jovens sorridentes
usando o computador ou o telefone. Com um ar
visualmente alegre e colorido, passa a idéia de que
usar o sistema é divertido e gratificante
Design e Usabilidade na Web Marcelo Vianna

36. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
3. Mantenha o foco de atenção do usuário
4. Destaque os recursos e benefícios
5. Faça uso de texto objetivo
6. Valorize e Priorize a simplicidade
7. Não tenha medo de espaços brancos www.amazon.com
O uso de convenções reduz a curva de aprendizado
8. Comunique-se com “linguagem visual” porque preconiza a experiência anterior do usuário na
utilização de recursos e simbologias estabelecidas e
9. Convenções são nossas amigas popularizadas. O site da Amazon é um bom exemplo
de site inovador que, ao mesmo tempo, faz intenso
uso de convenções maduras de e-commerce
Design e Usabilidade na Web Marcelo Vianna

37. 10 Princípios Básicos para um Design Efetivo na Web
1. Não faça o usuário pensar
2. Não abuse da paciência do usuário
3. Mantenha o foco de atenção do usuário
4. Destaque os recursos e benefícios
5. Faça uso de texto objetivo
6. Valorize e Priorize a simplicidade
7. Não tenha medo de espaços brancos
8. Comunique-se com “linguagem visual”
9. Convenções são nossas amigas
10. Teste antes, teste depois, teste sempre
Design e Usabilidade na Web Marcelo Vianna

38. 10 Boas Práticas Que Você
Deve Sempre Ter em Mente
Design e Usabilidade na Web Marcelo Vianna

39. 10 Boas Práticas Que Você Deve Sempre Ter em Mente
1. Não use janelas pop-up ou frames
2. Não mude o tamanho da janela do usuário
3. Garanta legibilidade e não use fontes muito pequenas
4. Use links curtos, claros, objetivos e URLs amigáveis
5. Não tenha links mortos ou sem saída
6. Procure ter apenas uma animação por página
7. Facilite as formas de contato e comunicação
8. Empregue imagens para apoio ao conteúdo e não para decoração
9. Evite a necessidade de plug-ins principalmente para navegar
10. Evite links abrindo novas janelas
Design e Usabilidade na Web Marcelo Vianna

40. Perguntas?
Design e Usabilidade na Web Marcelo Vianna

41. Grato pela atenção!
Marcelo Vianna
marcelovianna@me.com
Design e Usabilidade na Web Marcelo Vianna