Usabilidade na web

740 views

Published on

Usabilidade na web

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
740
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Usabilidade na web

  1. 1. Iuri Raioliuriraiol@gmail.com
  2. 2. On the average Web page, users have time to readat most 28% of the words during an average visit;20% is more likely. (Jakob Nielsen)Tradução livre:Em uma página web média, os usuários tem tempode ler até 28% das palavras em uma visita média; eé ainda mais provável que seja 20%. (Jakob Nielsen)
  3. 3.  Os usuários leem as páginas da esquerda para a direita e continuam em um padrão em forma de “F” Ou seja, eles só “passam um olho”.
  4. 4. Link: youtu.be/3Qg80qTfzgU
  5. 5.  O padrão ISO 9241 define usabilidade como:“effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.”Tradução livre:“efetividade, eficiência e satisfação com os quais usuários específicos alcançam objetivos específicos em um ambiente particular.”
  6. 6. Pouco texto Muitos Formulários
  7. 7. Devemos então melhorar a usabilidade de nossos formulários
  8. 8.  Relação: formulários estabelecem um relacionamento entre o usuário e o sistema. Conversação: formulários estabelecem um diálogo entre o usuário e o sistema. Aparência: pela aparência dos formulários é estabelecida uma relação e uma conversa com o usuário.
  9. 9.  Devem ser baseados em confiança. Possuem um objetivo. O nome do formulário deve ter um propósito. Conhecer o usuário. Linguagem apropriada. Mudanças de comportamento repentinas são ruins. Perguntas fora do escopo.
  10. 10.  Deve ser uma conversa e não um interrogatório. Organize os tópicos! Agrupe as informações relacionadas. Um tópico por vez. Crie pausas naturais. Remova as distrações.
  11. 11. Chris Hemsworth Brigitte Bardot
  12. 12.  1 – Rótulos (Labels) 2 – Campos de Input 3 – Ações 4 – Ajuda 5 – Mensagens 6 - Validação
  13. 13.  x
  14. 14.  Palavras ou frases? Maiúsculo ou minúsculo? “Dois pontos” (:) Alinhamento
  15. 15.  Uso dos campos com a finalidade certa. Cuidado com a customização dos inputs. Restrição de formato de entrada (máscaras) Distinção dos campos obrigatórios e opcionais.
  16. 16.  %
  17. 17.  Ações de botões primárias e secundárias (Ex: primária: salvar, secundária: voltar). Convenções de nome (“Confirmar envio” seria melhor que “Ok”).
  18. 18.  Texto de ajuda somente quando necessário Mostrar ao usuário que ele pode pedir ajuda!
  19. 19.  Validação nos campos somente quando for necessário. Opções pré-selecionadas devem ser utilizadas. (Ex: país)
  20. 20. A ideia é não concluir e sim começar a aplicar a usabilidade!
  21. 21. ~Fim~Facebook: @aitproeg
  22. 22.  NIELSEN, Jakob. How Little Do Users Read? Disponível em: <http://www.nngroup.com/articles/how-little-do-users-read/> Design Blog. 5 vídeos de usabilidade que você deve assistir. Disponível em: <http://design.blog.br/web-design/5-videos-de- usabilidade-que-voce-deve-assistir> MIFSUD, Justin. An Extensive Guide To Web Form Usability. Disponível em: <http://uxdesign.smashingmagazine.com/2011/11/08/extensive- guide-web-form-usability/> GUBE, Jacob. 7 Best Practices for Improving Your Websites Usability. Disponível em: <http://mashable.com/2011/09/12/website-usability- tips/> ABNT. Requisitos Ergonômicos para Trabalho de Escritórios com Computadores. Baseada na ISSO 9241-11,1998. Disponível em: <http://www.inf.ufsc.br/~cybis/pg2003/iso9241-11F2.pdf> Imagens. Google. Disponível em: <www.google.com.br> Imagens. Pattern Tap. Disponível em: <www.patterntap.com>

×