Prof.:

1. Interface Homem-Máquina Princípios de Bons Projetos de Interfaces Prof.: José Eustáquio Rangel de Queiroz Carga Horária: 60 h

2. Princípios de Bons Projetos de Tela • Tela bem projetada • Reflexo das habilidades, necessidades e tarefas de seus usuários • Desenvolvimento fundamentado nas limitações físicas impostas pelo hardware no qual é exibida • Uso efetivo das facilidades de seu software de controle • Focalização nos objetivos do sistema para o qual foi projetada • Necessidade do conhecimento/compreensão dos princípios que regem bons projetos de tela

3. Princípios de Bons Projetos de Tela • Considerações Humanas em Projetos de Telas • Quanta informação deve ser apresentada • Como a informação deve ser distribuída • Qual a linguagem que deve ser utilizada • Quão discrimináveis devem ser as componentes da tela • Quão estética é a apresentação da informação • Quão consistente é uma tela com relação às demais

4. Princípios de Bons Projetos de Tela • Telas Deficientes • Distração do Usuário (Barnett, 1993) • Legendas confusas e questões mal formuladas • Ênfase inadequada de tipos e gráficos • Cabeçalhos desorientadores • Solicitações de informações irrelevantes ou desnecessárias • Solicitações de informações que impliquem o retrospecto de respostas e/ou contextos • Distribuiçãorestrita e/ou desordenada das componentes na tela • Deficiência em nível da qualidade da apresentação, legibilidade, aparência e disposição da informação

5. Princípios de Bons Projetos de Tela • Telas Deficientes • Distração do Usuário (Howlett, 1995) • Inconsistência visual na apresentação dos detalhes na tela e com o SO • Necessidade de restrição no uso de características e elementos de projeto • Sobrecarga de apresentações 3D • Sobrecarga de cores muito brilhantes • Uso de ícones mal projetados • Deficiência tipográfica • Uso de metáforas autoritárias ou excessivamente engraçadas ou literais com relação a opções de projeto com restrições

6. Princípios de Bons Projetos de Tela • Telas Deficientes • Distração do Usuário - Web (Galitz, 2002) • Interrupções visuais/audíveis numerosas • Desordem visual excessiva • Legibilidade da informação insuficiente • Componentes de tela incompreensíveis • Navegação confusa e ineficiente • Operações ineficientes com dispêndio excessivo de tempo do usuário • Rolamento de página excessivo ou ineficiente • Sobrecarga de informações • Inconsistência no projeto

7. Princípios de Bons Projetos de Tela • Telas Deficientes • Distração do Usuário - Web (Galitz, 2002) • Informações desatualizadas • Projeto ultrapassado devido à imitação ou cópia de documentos impressos ou sistemas tecnologicamente superados

8. Princípios de Bons Projetos de Tela • Telas Deficientes • Expectativas mais comuns dos usuários • Aparência ordenada, clara e bem distribuída da informação exibida • Indicação clara da informação que está sendo exibido e do que fazer com ela • Apresentação da informação exatamente onde o usuário a esperaria • Indicação evidente das relações entre opções, cabeçalhos, dados, dicas, legendas, etc.

9. Princípios de Bons Projetos de Tela • Telas Deficientes • Expectativas mais comuns dos usuários • Modo simples de acesso a todas as funcionalidades presentes no sistema e de saída de cada uma delas • Indicação clara de quando uma ação pode causar uma alteração permanente nos dados ou no sistema

10. Princípios de Bons Projetos de Tela • Telas Deficientes • Metas de Projeto de Interfaces • Redução da carga de trabalho visual • Redução da carga de trabalho intelectual • Redução da carga de trabalho motora • Redução da carga de trabalho mental • Minimização ou eliminação de quaisquer encargos ou instruções impostas por aspectos tecnológicos • Elevação da produtividade • Aumento do grau de satisfação

11. Princípios de Bons Projetos de Tela • Significado e Propósito da Tela • Cada elemento na tela… • Todos os controles • Todo o texto • A organização da tela • Toda a ênfase dada à informação • Cada cor • Todos os elementos gráficos • Toda a animação • Cada mensagem • Todas as formas de retorno da informação (feedback)

12. Princípios de Bons Projetos de Tela • Significado e Propósito da Tela • Devem… • Ter significado para os usuários • Ter uma função no contexto das tarefas do usuário

13. Princípios de Bons Projetos de Tela • Organização Clara e Significativa dos Elementos • Consistência • Ordenação dos Dados e do Conteúdo da Tela • Definição de um Ponto de Partida • Navegação entre Telas e Fluxo em cada Tela • Composição Visualmente Agradável • Quantidade de Informação • Facilidade de Discriminação • Foco e Ênfase • Uso de Profundidade e Aparência Tridimensional

14. Princípios de Bons Projetos de Tela • Equilíbrio Balanceamento Instabilidade

15. Princípios de Bons Projetos de Tela • Simetria Simetria Assimetria

16. Princípios de Bons Projetos de Tela • Regularidade Regularidade • Similaridade de tamanhos, formas, cores e espaçamento de elementos Irregularidade

17. Ícone Barra de Título Ícone Ícone Controle Controle Controle Controle Controle Controle Botão Botão Botão Princípios de Bons Projetos de Tela • Previsibilidade Previsibilidade Barra de Menu • Sugestão de falta de planejamento  incapacidade de previsão da estrutura do restante da tela ou de outras telas Ícone Controle Controle Botão Controle Controle Botão Controle Controle Ícone Barra de Menu Barra de Título Botão Ícone Espontaneidade

18. Princípios de Bons Projetos de Tela • Sequencialidade Sequencialidade • Sugestão de ordenação lógica e/ou rítmica Aleatoriedade

19. Princípios de Bons Projetos de Tela • Economia Modicidade XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX • Atenção! • Efeito árvorede Natal XXXXXXXXXXXXXXXXXXXXXX QQQQQQQQQQQQQQQQQQQQ ZZZZZZZZZZZZZZZZZZZZZZZZ JJJJJJJJJJJJJJJJJJJJJJJJJJJJ Ornamentação

20. Princípios de Bons Projetos de Tela • Proporcionalidade Unidade • Quadrado (1:1) • Raiz Quadrada de Dois (1:1,414) • Retângulo Áureo (1:1,618) • Raiz Quadrado de Três (1:1,732) • Quadrado Duplo (1:2) Fragmentação

21. Quadrado (1:1) Raiz Quadrada de Dois (1:1,414) Retângulo Áureo (1:1,618) Raiz Quadrado de Três (1:1,732) Quadrado Duplo (1:2)  Quadrado (1:1)  Raiz Quadrada de Dois (1:1,414)  Retângulo Áureo (1:1,618)  Raiz Quadrado de Três (1:1,732)  Quadrado Duplo (1:2) Princípios de Bons Projetos de Tela • Proporcionalidade   1  1 1 1,618  1,414 1 1 1,732  1 2

22. Princípios de Bons Projetos de Tela • Simplicidade Simplicidade • Vide medida de complexidade proposta por Tulis (1983), com base em Bonsiepe (1968), inGalitz (2002) Complexidade

23. Princípios de Bons Projetos de Tela • Agrupamento • Recomendações • Formação de agrupamentos de elementos associados • Criação de agrupamentos espaciais tão próximos quanto possível de 5 graus de ângulo de visão (1,67” de diâmetroou cerca de6a7 linhas de texto,12a14 caracteres de largura) • Reserva de ⅛ a ¼” entre cada controle de espaçamento introduzido em um agrupamento • Reforço visual de agrupamentos • Separação adequada entre agrupamentos mediante uso apropriado de espaços brancos • Inserção de bordas lineares em torno dos grupos • Associação de títulos significativos a cada agrupamento

24. Facilidade de Recuperação Estruturação da Informação mais Efetiva Agrupamento de Elementos Configuração Rapidez na Expressiva Busca em Tela Relações Significativas Princípios de Bons Projetos de Tela • Agrupamento

25. Proximidade Casamento Agrupamentos de Padrões Visuais Encerramento Similaridade Princípios de Bons Projetos de Tela • Agrupamento • Carência de uma definição mais objetiva do que constitui um grupo(vide Tulis (1981), com base em Zahn (1971), inGalitz (2002))

26. TIP GROUND TEST RESULTS SUMMARY:GROUND 14 K GROUND, FAULT T-G 3 TERMINAL DC RESISTANCE > 3500.00 K OHMS T-R = 14.21 K OHMS T-R > 3500.00 K OHMS T-R 3 TERMINAL DC VOLTAGE = 8.82 K OHMS T-R = 14.17 K OHMS T-R = 628.52 K OHMS R-G LONGITUDINAL BALANCE POOR = 39 DBB COULD NOT COUNT RINGERS DUE TO LOW RESISTANCE VALID LINE CKT CONFIGURATION CAN DRAW AND BREAK DIAL TONE DC RESISTANCE AC SIGNATURE DC VOLTAGE 3500 K T-R 14 K T-R 3500 K R-G 9 K T-R 14 K T-R 629 K R-G 0 V T-G 0V R-G CENTRAL OFFICE BALANCE VALID LINE CKT DIAL TONE OK 39 DB Princípios de Bons Projetos de Tela • Agrupamento Reprojetada • Vide Tulis (1981) Original

27. Princípios de Bons Projetos de Tela • Agrupamento usando Espaços Brancos • Recomendações (Galitz, 2002) • Separação adequada entre agrupamentos mediante uso apropriado de espaços brancos • Consideração cuidadosa do compromisso entre uso de espaçamento em branco e requisitos para rolamento de página para páginas da Web

28. Princípios de Bons Projetos de Tela • Agrupamento usando Espaços Brancos • Contradições • Uso comedido de espaços em branco (usability.com) • Baixa pontuação de usuários para sites com grandes quantidades de espaços em branco e texto esparso (Fiesta, 1998) • Minimização do uso de espaços em branco em tarefas em tarefas de busca (Bailey, 1999)

29. Princípios de Bons Projetos de Tela • Agrupamento usando Espaços Brancos • Contradições • Grandes quantidades de espaços em branco (grok.com) (top 100 Web sites) • Sugestão • Definição do compromisso entre as diversas partes do conteúdo da tela, o rolamento das páginas e os requisitos de busca visual

30. Princípios de Bons Projetos de Tela • Agrupamento usando Bordas Lineares • Recomendações • Incorporação de bordas lineares para • Focalização da atenção em agrupamentos ou informações correlatas • Orientação do olho ao longo da tela • Uso de uma representação hierárquica padronizada para a representação de linhas, não excedendo 3 espessuras e 2 estilos de linha • Criação de linhas consistentes em altura e comprimento • Alinhamento das bordas de agrupamentos adjacentes (sempre que possível) pela esquerda, direita, topo e base

31. Princípios de Bons Projetos de Tela • Agrupamento usando Bordas Lineares • Recomendações • Alocação de espaço suficiente entre a informação e as bordas circundantes • Uso moderado de bordas e frisos • Em projetos de páginas da Web • Uso cauteloso de linhas horizontais como separadores de seções de página • Utilização preferencial de linhas horizontais para a discriminação de áreas adjacentes

32. Princípios de Bons Projetos de Tela • Agrupamento usando Bordas Lineares ESCORES DO TORNEIO Raul 67 Sílvio 76 Roberto 99 Notificar Eiry sobre a devolução do livro de Nielsen. CÓDIGO DE CORES BÁSICO preto 0 marrom 1 vermelho 2 laranja 3 amarelo 4 verde 5 azul 6 violeta 7 cinza 8 branco 9 LEI DE MURPHY Se algo pode dar errado, então dará. ATENÇÃO!!! Um projeto de tela deficiente pode exercer um impacto fortemente negativo sobre a excelência subjacente do software e do hardware. Detalhes gráficos de projeto não são apenas tópicos de enfeite ou aspectos decorativos. O que há em comum na lista abaixo? São Luís Arroz de cuchá Teresina Maria Isabel Campina Grande Buchada Belém Pato no tucupi Salvador Acarajé Fortaleza Caldeirada LISTA DE BENS 18 mesas 72 cadeiras 14 camas Bagagem Rapel Passagens Férias Praia Viagem Passaporte Guia Dunas Nesta figura, ilustra-se o efeito do uso de fronteiras gráficas sobre a percepção humana de grupos em uma tela Cabeça do Peu Caranguejo Casa Grande Ipióca 51 Pitú Serra Branca Triunfo Jantar às 19:30 PREVISÃO DO TEMPO Durante o dia de hoje, céu parcialmente nublado, com mínima de 23 °C e máxima de 26,5 °C. À noite, possibilidade de ocorrência de chuvas. PROGRAMAÇÃO 08:30 Abertura 09:00 Palestra 1 09:30 Palestra 2 10:00 Palestra 3 10:00 Coffee Break 10:30 Palestra 4 11:00 Palestra 5 11:30 Palestra 6

33. Princípios de Bons Projetos de Tela • Agrupamento usando Bordas Lineares ESCORES DO TORNEIO Raul 67 Sílvio 76 Roberto 99 Notificar Eiry sobre a devolução do livro de Nielsen. CÓDIGO DE CORES BÁSICO preto 0 marrom 1 vermelho 2 laranja 3 amarelo 4 verde 5 azul 6 violeta 7 cinza 8 branco 9 LEI DE MURPHY Se algo pode dar errado, então dará. ATENÇÃO!!! Um projeto de tela deficiente pode exercer um impacto fortemente negativo sobre a excelência subjacente do software e do hardware. Detalhes gráficos de projeto não são apenas tópicos de enfeite ou aspectos decorativos. O que há em comum na lista abaixo? São Luís Arroz de cuchá Teresina Maria Isabel Campina Grande Buchada Belém Pato no tucupi Salvador Acarajé Fortaleza Caldeirada LISTA DE BENS 18 mesas 72 cadeiras 14 camas Bagagem Rapel Passagens Férias Praia Viagem Passaporte Guia Dunas Nesta figura, ilustra-se o efeito do uso de fronteiras gráficas sobre a percepção humana de grupos em uma tela Cabeça do Peu Caranguejo Casa Grande Ipióca 51 Pitú Serra Branca Triunfo Jantar às 19:30 PREVISÃO DO TEMPO Durante o dia de hoje, céu parcialmente nublado, com mínima de 23 °C e máxima de 26,5 °C. À noite, possibilidade de ocorrência de chuvas. PROGRAMAÇÃO 08:30 Abertura 09:00 Palestra 1 09:30 Palestra 2 10:00 Palestra 3 10:00 Coffee Break 10:30 Palestra 4 11:00 Palestra 5 11:30 Palestra 6

34. Princípios de Bons Projetos de Tela • Agrupamento usando Planos de Fundo (Backgrounds) • Recomendações • Incorporação de planos de fundo contrastantes para informações correlatas • Atenção para que a ênfase seja dada à informação, não para o plano de fundo incorporado ao projeto para ressaltá-la • Uso reservado de maior contraste ou de técnicas de “enfatização” para componentes de tela para as quais a atenção do usuário deva ser prioritariamente dirigida • MÁXIMA A realização de tarefas suportada por um sistema nunca deve ser desconfortável. Ao contrário, deve ser tão “indolor” que o usuário esqueça que está sendo apoiado pelo sistema.

35. Princípios de Bons Projetos de Tela • Agrupamento usando Bordas Lineares ESCORES DO TORNEIO Raul 67 Sílvio 76 Roberto 99 Notificar aos alunos de IHM que a prova será dia 11/02/2003. CÓDIGO DE CORES BÁSICO preto 0 marrom 1 vermelho 2 laranja 3 amarelo 4 verde 5 azul 6 violeta 7 cinza 8 branco 9 LEI DE MURPHY Se algo pode dar errado, então dará. ATENÇÃO!!! Um projeto de tela deficiente pode exercer um impacto fortemente negativo sobre a excelência subjacente do software e do hardware. Detalhes gráficos de projeto não são apenas tópicos de enfeite ou aspectos decorativos. O que há em comum na lista abaixo? São Luís Arroz de cuchá Teresina Maria Isabel Campina Grande Buchada Belém Pato no tucupi Salvador Acarajé Fortaleza Caldeirada LISTA DE BENS 18 mesas 72 cadeiras 14 camas Bagagem Rapel Passagens Férias Praia Viagem Passaporte Guia Dunas Nesta figura, ilustra-se o efeito do uso de planos de fundo sobre a percepção humana de grupos em uma tela Cabeça do Peu Caranguejo Casa Grande Ipióca 51 Pitú Serra Branca Triunfo Jantar às 19:30 PREVISÃO DO TEMPO Durante o dia de hoje, céu parcialmente nublado, com mínima de 23 °C e máxima de 26,5 °C. À noite, possibilidade de ocorrência de chuvas. PROGRAMAÇÃO 08:30 Abertura 09:00 Palestra 1 09:30 Palestra 2 10:00 Palestra 3 10:00 Coffee Break 10:30 Palestra 4 11:00 Palestra 5 11:30 Palestra 6

36. Princípios de Bons Projetos de Tela • Agrupamento usando Bordas Lineares

37. Princípios de Bons Projetos de Tela • Quantidade de Informações • Recomendações • Apresentação da quantidade apropriada de informações para a tarefa • Informação insuficiente reflete ineficiência • Informação excessiva causa confusão

38. Princípios de Bons Projetos de Tela • Quantidade de Informações • Recomendações • Apresentação de toda a informação necessária ao desempenho de uma ação ou à tomada de uma decisão, sempre que possível • Memorização de detalhes apresentados em telas anteriores é contraproducente para a execução de tarefas • O desenvolvimento de telas com o máximo necessário de informações requer uma análise cuidadosa das tarefas do usuário

39. Princípios de Bons Projetos de Tela • Quantidade de Informações • Recomendações • Restrição dos níveis de densidade1 das telas ou das janelas a valores que não excedam 30% 1 Por definição, densidade é o cálculo da proporção das posições dos caracteres exibidos na tela ou de uma área da tela contendo algum agrupamento de elementos • Há 2 tipos de densidade a serem calculados em uma tela: global e local

40. Princípios de Bons Projetos de Tela • Quantidade de Informações • Densidade Global • Medida do percentual de posições de caracteres na tela inteira que contêm dados • Thacker (1987) comparou telas com densidades de 14, 29 e 43%, concluindo que o tempo de resposta aumentava significativamente com o aumento da densidade global • Danchak (1976) recomendou que a densidade global não deveria exceder 25% • Tullis (1981) reforçou a recomendação de Danchak (1976), concluindo que o limite superior da densidade global usualmente se encontra em torno de 25%

41. Princípios de Bons Projetos de Tela • Quantidade de Informações • Densidade Local • Medida do quão “fortemente compactada” é a tela considerada 012222201 0123445443210 023456777654320 01235679+97653210 023456777654320 0123445443210 012222201 • Tullis (1983) derivou uma medida para a densidade local: o percentual de caracteres em um círculo de acuidade visual com 88 caracteres

42. Princípios de Bons Projetos de Tela • Quantidade de Informações • Densidade global: 17,9% • Densidade global: 58,0% TEST RESULTS SUMMARY:GROUND GROUND, FAULT T-G 3 TERMINAL DC RESISTANCE > 3500.00 K OHMS T-R = 14.21 K OHMS T-R > 3500.00 K OHMS T-R 3 TERMINAL DC VOLTAGE = 8.82 K OHMS T-R = 14.17 K OHMS T-R = 628.52 K OHMS R-G LONGITUDINAL BALANCE POOR = 39 DBB COULD NOT COUNT RINGERS DUE TO LOW RESISTANCE VALID LINE CKT CONFIGURATION CAN DRAW AND BREAK DIAL TONE • Vide Galitz (2002) Original

43. TIP GROUND 14 K Princípios de Bons Projetos de Tela • Quantidade de Informações • Densidade global: 10,8% • Densidade global: 35,6% DC RESISTANCE AC SIGNATURE DC VOLTAGE 3500 K T-R 14 K T-R 3500 K R-G 9 K T-R 14 K T-R 629 K R-G 0 V T-G 0V R-G CENTRAL OFFICE BALANCE VALID LINE CKT DIAL TONE OK 39 DB • Vide Galitz (2002) Reprojetada

44. Princípios de Bons Projetos de Tela • Tamanho de Página da Web • Recomendações • Minimização da altura da página • Restrição a 2 ou 3 telas de informação • Posicionamento de informações críticas ou importantes o mais próximo possível do topo da página, de modo a torná-las visíveis quando a página for aberta • Distribuição nas 4” (≈ 10 cm) do topo da página

45. Princípios de Bons Projetos de Tela • Tamanho de Página da Web • Recomendações • Minimização da altura da página • Restrição a 2 ou 3 telas de informação • Posicionamento de informações críticas ou importantes o mais próximo possível do topo da página, de modo a torná-las visíveis quando a página for aberta • Distribuição nas 4” (≈ 10 cm) do topo da página

46. Princípios de Bons Projetos de Tela • Tamanho de Página da Web • Argumentos para páginas mais curtas • Alocação de mais memória do usuário (informação mais espalhada e nem sempre visível) • Possível condução a um senso de perda de contexto quando os botões de navegação e links principais desaparecem do campo de visão do usuário • Exibição de um conteúdo mais extenso e de uma gama mais abrangente de links de navegação (dificuldade de localização e decisão sobre o caminho a seguir)

47. Princípios de Bons Projetos de Tela • Tamanho de Página da Web • Argumentos para páginas mais curtas • Requisito de rolamento excessivo de página (confusão e ineficiência) • Condução menos efetiva ao “encadeamento” do esquema de organização da informação comumente empregada em sites da Web

48. Princípios de Bons Projetos de Tela • Tamanho de Página da Web • Argumentos para páginas mais longas • Aparência com a estrutura familiar de documentos em papel (formulário contínuo) • Demanda de um número menor de “cliques” para a navegação através de um site da Web • Maior facilidade de download e impressão para leitura posterior • Maior facilidade de manutenção (número menor de categorias de links de navegação para outras páginas)

49. Princípios de Bons Projetos de Tela • Tamanho de Página da Web • Páginas Longas vs Páginas Curtas Localização rápida de informações específicas Vários links para páginas curtas Apresentação de todo o tema em uma página com links internos para sub-tópicos Compreensão de um tema inteiro sem interrupção

50. Princípios de Bons Projetos de Tela • Tamanho de Página da Web • Páginas Longas vs Páginas Curtas Uso de uma página longa ou preparação de uma versão com uma página Impressão de todo ou maior parte do conteúdo para leitura posterior Criação de uma página para a apresentação de um índice compreensivo com links para várias páginas curtas Carga de página via modems lentos e todas as páginas não são necessárias