Avaliação Interface Humano-Computador - Portal UFS

3.828 visualizações

Publicada em

Apresentação sobre a Avaliação da Interface Humano-Computador do Portal UFS, desenvolvida por alunos da Universidade Federal de Sergipe para a disciplina de Interface Humano Computador.
Esta apresentação, elaborada como forma de avaliação da matéria Interface Humano Computador, tem como objetivo mostrar como foi realizada a avaliação da interface do Portal UFS e seus principais resultados, seguindo os princípios de usabilidade, padrões Web e acessibilidade.

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.828
No SlideShare
0
A partir de incorporações
0
Número de incorporações
339
Ações
Compartilhamentos
0
Downloads
67
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Avaliação Interface Humano-Computador - Portal UFS

  1. 1. Universidade Federal de Sergipe Departamento de Computação Interface Humano Computador Avaliação de IHC – Portal UFS Diego Martins, Diego Meneses, Felipe Vieira, Jefferson Santos
  2. 2. Avaliação de Usabilidade
  3. 3. Validação de Usabilidade ● Avaliação Heurística ● Jackob Nielsen ● Percorrer a Interface ● Vários Avaliadores ● Associar problemas às Heurísticas Violadas
  4. 4. Validação de Usabilidade ● Avaliação Heurística (princípios básicos) ● Usar Diálogo Simples e Natural; ● Falar a Linguagem do Usuário; ● Minimizar a Carga de Memória do Usuário; ● Possuir Consistência; ● Fornecer Feedback (Retorno); ● Fornecer Saídas Claramente Marcadas; ● Fornecer Atalhos; ● Possuir Mensagens de Erros Bem Definidas; ● Prevenir Erros; ● Fornecer Ajuda e Documentação;
  5. 5. Diálogo Simples e Natural Clique para editar o estilo do subtítulo mestre
  6. 6. Falar a Linguagem do Usuário Clique para editar o estilo do subtítulo mestre
  7. 7. Minimizar a Carga de Memória do Usuário Clique para editar o estilo do subtítulo mestre
  8. 8. Consistência Clique para editar o estilo do subtítulo mestre
  9. 9. Consistência Clique para editar o estilo do subtítulo mestre
  10. 10. Fornecer Feedback (Retorno) Clique para editar o estilo do subtítulo mestre
  11. 11. Forneça Saídas Claramente Marcadas Clique para editar o estilo do subtítulo mestre
  12. 12. Fornecer Atalhos Clique para editar o estilo do subtítulo mestre
  13. 13. Fornecer Mensagens de Erros Bem Definidas e Prevenção de Erros Not Found The requested URL /gestao/proquali/ was not found on this server.
  14. 14. Ajuda e Documentação Clique para editar o estilo do subtítulo mestre
  15. 15. Avaliação dos Padrões Web
  16. 16. Portal UFS – Design Patterns Web •O que são Design Patterns Web? •Porque usar os Design Patterns Web? •Desafios que motivaram a criação desses padrões? Referência Base VORA, Pawan, 2009. Web Application Design Patterns. Morgan Kaufmann Publishers
  17. 17. Portal UFS – Design Patterns Web Formulários , Filtros , Pesquisa e Autenticação de Usuário.
  18. 18. Portal UFS – Design Patterns Web Formulários , Filtros , Pesquisa e Autenticação de Usuário.
  19. 19. Portal UFS – Design Patterns Web Formulários , Filtros , Pesquisa e Autenticação de Usuário.
  20. 20. Portal UFS – Design Patterns Web Application Main Page – Aplicação Principal.
  21. 21. Portal UFS – Design Patterns Web Navegação.
  22. 22. Portal UFS – Design Patterns Web Internacionalização.
  23. 23. Avaliação de Acessibilidade
  24. 24. DaSilva
  25. 25. CSS Validation Service
  26. 26. Markup Validation Service
  27. 27. PageSpeed
  28. 28. Validação de Acessibilidade ●Três Prioridades ● Prioridade 1 – 16 Erros e 180 avisos ● Prioridade 2 – 18 Erros e 43 avisos ● Prioridade 3 – 1 Erro e 102 avisos
  29. 29. Validação de Acessibilidade ● Erros de Prioridade 1 ● Fornecer equilavência textual para as imagens ● Nas tags script sempre colocar noscript ● Avisos de Prioridade 1 ● Fornecer resumos nas tabelas ● Disponibilizar todas as informações com cor, também sem cor ● Organizar os documentos de tal forma que possam ser lidos sem folha de estilo ● Sequência lógica de tabulação ● Cores entre o fundo e o primeiro plano seja suficientemente contrastante
  30. 30. Validação de Acessibilidade ● Erros de Prioridade 2 ● Tabelas de dimensão fixa ● Atualização automática ● Ausência de tag label fazendo ligações com os id de entrada ● Avisos de Prioridade 2 ● Evitar tabelas para efeitos de disposição de página ● Posicionamento de todos os controles de formulário ● Disponibilizar informações de como o site está organizado ● Não provocar o aparecimento de janelas de sobreposição
  31. 31. Validação de Acessibilidade ● Erros de Prioridade 3 ● Inserção de caractes que deixem claro a distinção entre links adjacentes ● Avisos de Prioridade 3 ● Identificar claramente o destino de cada link ● Utilizar textos claros ● Utilizar gráficos e sons, se facilitar o entendimento ● Fornecer metadados ● Atalhos por teclado ● Palavras relevantes no início de cabeçalhos, parágrafos e listas
  32. 32. Validação Técnica ● HTML e CSS ● HTML - 36 erros e 12 perigos ● CSS – 9 erros ● Eficiência ● Habilitar gzip compression, reduziria a transferência em 365,3kB aproximadamente ● Utilização de cache do navegador ● Redução do número de arquivos JavaScript ● Minify do CSS, redução de 70,2% no tamanho dos arquivos ● Otimização de imagem, redução de 63,1% ● Tamanho total - 997,1kB
  33. 33. Obrigado!

×