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.

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. Avaliação de Usabilidade

3. Validação de Usabilidade
●
Avaliação Heurística
●
Jackob Nielsen
●
Percorrer a Interface
●
Vários Avaliadores
●
Associar problemas às Heurísticas Violadas

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. Diálogo Simples e Natural
Clique para editar o estilo do subtítulo
mestre

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

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

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

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

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

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

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

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. Ajuda e Documentação
Clique para editar o estilo do subtítulo
mestre

15. Avaliação dos Padrões Web

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. Portal UFS – Design Patterns Web
Formulários , Filtros , Pesquisa e Autenticação de Usuário.

18. Portal UFS – Design Patterns Web
Formulários , Filtros , Pesquisa e Autenticação de Usuário.

19. Portal UFS – Design Patterns Web
Formulários , Filtros , Pesquisa e Autenticação de Usuário.

20. Portal UFS – Design Patterns Web
Application Main Page – Aplicação Principal.

21. Portal UFS – Design Patterns Web
Navegação.

22. Portal UFS – Design Patterns Web
Internacionalização.

23. Avaliação de Acessibilidade

24. DaSilva

25. CSS Validation Service

26. Markup Validation Service

27. PageSpeed

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. 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. 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. 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. 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. Obrigado!