Universidade Federal de Sergipe
Departamento de Computação
Interface Humano Computador




Avaliação de IHC – Portal UFS

...
Avaliação de Usabilidade
Validação de Usabilidade
 ●
  Avaliação Heurística
       ●
           Jackob Nielsen
       ●
           Percorrer a Inte...
Validação de Usabilidade
 ●
  Avaliação Heurística (princípios básicos)
       ●
         Usar Diálogo Simples e Natural;
...
Diálogo Simples e Natural




     Clique para editar o estilo do subtítulo
                     mestre
Falar a Linguagem do Usuário




     Clique para editar o estilo do subtítulo
                     mestre
Minimizar a Carga de Memória do Usuário




     Clique para editar o estilo do subtítulo
                     mestre
Consistência




     Clique para editar o estilo do subtítulo
                     mestre
Consistência




     Clique para editar o estilo do subtítulo
                     mestre
Fornecer Feedback (Retorno)




     Clique para editar o estilo do subtítulo
                     mestre
Forneça Saídas Claramente Marcadas




     Clique para editar o estilo do subtítulo
                     mestre
Fornecer Atalhos




     Clique para editar o estilo do subtítulo
                     mestre
Fornecer Mensagens de Erros Bem Definidas e
Prevenção de Erros



Not Found
The requested URL /gestao/proquali/ was not fo...
Ajuda e Documentação




    Clique para editar o estilo do subtítulo
                    mestre
Avaliação dos Padrões Web
Portal UFS – Design Patterns Web

•O que são Design Patterns Web?
•Porque usar os Design Patterns Web?
•Desafios que motiv...
Portal UFS – Design Patterns Web
Formulários , Filtros , Pesquisa e Autenticação de Usuário.
Portal UFS – Design Patterns Web
Formulários , Filtros , Pesquisa e Autenticação de Usuário.
Portal UFS – Design Patterns Web
Formulários , Filtros , Pesquisa e Autenticação de Usuário.
Portal UFS – Design Patterns Web
Application Main Page – Aplicação Principal.
Portal UFS – Design Patterns Web
Navegação.
Portal UFS – Design Patterns Web
Internacionalização.
Avaliação de Acessibilidade
DaSilva
CSS Validation Service
Markup Validation Service
PageSpeed
Validação de Acessibilidade



 ●Três Prioridades
       ●   Prioridade 1 – 16 Erros e 180 avisos
       ●   Prioridade 2 ...
Validação de Acessibilidade
 ●
  Erros de Prioridade 1
       ●
           Fornecer equilavência textual para as imagens
 ...
Validação de Acessibilidade
 ●
  Erros de Prioridade 2
       ●
           Tabelas de dimensão fixa
       ●
           At...
Validação de Acessibilidade
 ●
  Erros de Prioridade 3
       ●
           Inserção de caractes que deixem claro a distinç...
Validação Técnica
 ●
     HTML e CSS
 ●
     HTML - 36 erros e 12 perigos
 ●
     CSS – 9 erros

 ●
     Eficiência
 ●
   ...
Obrigado!
Upcoming SlideShare
Loading in …5
×

Avaliação Interface Humano-Computador - Portal UFS

3,881 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,881
On SlideShare
0
From Embeds
0
Number of Embeds
339
Actions
Shares
0
Downloads
67
Comments
0
Likes
2
Embeds 0
No embeds

No notes for 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!

×