Interface Homem-Máquina Projetos de Interfaces

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

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

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

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ção restrita 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

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

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

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

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.

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

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

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)

Significado e Propósito da Tela Devem… Ter significado para os usuários Ter uma função no contexto das tarefas do usuário

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

Equilíbrio Balanceamento Instabilidade

Simetria Simetria Assimetria

Regularidade Regularidade Similaridade de tamanhos, formas, cores e espaçamento de elementos Irregularidade

Previsibilidade Previsibilidade Ícone Barra de Título Barra de Menu Controle Sugestão de falta de planejamento  incapacidade de previsão da estrutura do restante da tela ou de outras telas Botão Ícone Controle Controle Botão Controle Controle Botão Ícone Controle Controle Barra de Menu Barra de Título Botão Ícone Espontaneidade

Sequencialidade Sequencialidade Sugestão de ordenação lógica e/ou rítmica Aleatoriedade

Economia Modicidade XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX Atenção! Efeito árvore de Natal XXXXXXXXXXXXXXXXXXXXXX QQQQQQQQQQQQQQQQQQQQ ZZZZZZZZZZZZZZZZZZZZZZZZ JJJJJJJJJJJJJJJJJJJJJJJJJJJJ Ornamentação

Proporcionalidade Unidade Raiz Quadrada de Dois (1:1,414) Quadrado (1:1) Retângulo Áureo (1:1,618) Raiz Quadrado de Três (1:1,732) Quadrado Duplo (1:2) Fragmentação

Proporcionalidade   1  1 1 1,618  1,414 1 1  Raiz Quadrada de Dois (1:1,414)  Quadrado (1:1)  Retângulo Áureo (1:1,618)  Raiz Quadrado de Três (1:1,732)  Quadrado Duplo (1:2) 1,732  1 2

Simplicidade Simplicidade Vide medida de complexidade proposta por Tulis (1983), com base em Bonsiepe (1968), in Galitz (2002) Complexidade

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âmetro ou cerca de 6 a 7 linhas de texto, 12 a 14 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

Agrupamento Estruturação mais Efetiva de Recuperação da Informação Facilidade Agrupamento de Elementos Rapidez na Busca em Tela Relações Significativas Configuração Expressiva

Agrupamento Proximidade Agrupamentos Visuais Encerramento Similaridade Casamento de Padrões Carência de uma definição mais objetiva do que constitui um grupo (vide Tulis (1981), com base em Zahn (1971), in Galitz (2002))

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

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

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)

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

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

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

Agrupamento usando Bordas Lineares ESCORES DO TORNEIO Raul 67 Sílvio 76 Roberto 99 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 Notificar Eiry sobre a devolução do livro de Nielsen. 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

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.

Agrupamento usando Bordas Lineares ESCORES DO TORNEIO Raul 67 Sílvio 76 Roberto 99 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 Notificar aos alunos de IHM que a prova será dia 11/02/2003. 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

Agrupamento usando Bordas Lineares

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

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

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

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%

Quantidade de Informações Densidade Local Medida do quão “fortemente compactada” é a tela considerada Tullis (1983) derivou uma medida para a densidade local: o percentual de caracteres em um círculo de acuidade visual com 88 caracteres

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

Quantidade de Informações Densidade global: 10,8% Densidade global: 35,6% TIP GROUND 14 K 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

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

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)

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

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)

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

Tamanho de Página da Web Páginas Longas vs Páginas Curtas Impressão de todo ou maior parte do conteúdo para leitura posterior Uso de uma página longa ou preparação de uma versão com uma página 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

Rolamento

Rolamento vs Paginação Paginação Inclusão de elementos que estimulem a visualização da informação na tela mediante “paginação” Criação de uma segunda versão de um site da Web, consistindo de telas individuais visualizáveis mediante “paginação”

Exemplo 1 Descrição: CD-ROM para pacientes portadores de câncer e profissionais da área de saude. Contém informação detalhada do contexto. Características: 1.400 telas únicas palavras 200 diagramas e ilustrações 2½ h de entrevistas em vídeo

Exemplo 2 Descrição: CD-ROM componente de uma série de 23 títulos produzida para pacientes portadores de tumores cerebrais e profissionais da área de saude. Características: 1.000 telas únicas palavras 300 diagramas e ilustrações 2 h de entrevistas em vídeo

Exercício Analise o link à luz do conteúdo estudado e das recomendações de Galitz (2002) Aponte as deficiências do projeto de tela, se existirem Sugira soluções para cada aspecto deficiente identificado, caso se façam necessárias

Interface Homem-Máquina Projetos de Interfaces

Apresentações semelhantes

Apresentação em tema: "Interface Homem-Máquina Projetos de Interfaces"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Interface Homem-Máquina Projetos de Interfaces

Apresentações semelhantes

Apresentação em tema: "Interface Homem-Máquina Projetos de Interfaces"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback