A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

Apresentações semelhantes


Apresentação em tema: "DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz."— Transcrição da apresentação:

1 DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz Carga Horária: 60 h

2 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 3 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 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 Princípios de Bons Projetos de Tela

4 DSC/CCT/UFCGDSC/CCT/UFCG 4 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 (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 Princípios de Bons Projetos de Tela

5 DSC/CCT/UFCGDSC/CCT/UFCG 5 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 (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 Princípios de Bons Projetos de Tela

6 DSC/CCT/UFCGDSC/CCT/UFCG 6 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) 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 Princípios de Bons Projetos de Tela

7 DSC/CCT/UFCGDSC/CCT/UFCG 7 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 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 Princípios de Bons Projetos de Tela

8 DSC/CCT/UFCGDSC/CCT/UFCG 8 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 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. Princípios de Bons Projetos de Tela

9 DSC/CCT/UFCGDSC/CCT/UFCG 9 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 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 Princípios de Bons Projetos de Tela

10 DSC/CCT/UFCGDSC/CCT/UFCG 10 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 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 Princípios de Bons Projetos de Tela

11 DSC/CCT/UFCGDSC/CCT/UFCG 11 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 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) Princípios de Bons Projetos de Tela

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

13 DSC/CCT/UFCGDSC/CCT/UFCG 13 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 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 Princípios de Bons Projetos de Tela

14 DSC/CCT/UFCGDSC/CCT/UFCG 14 Princípios de Bons Projetos de Tela Equilíbrio Balanceamento Instabilidade

15 DSC/CCT/UFCGDSC/CCT/UFCG 15 Princípios de Bons Projetos de Tela Simetria Assimetria

16 DSC/CCT/UFCGDSC/CCT/UFCG 16 Princípios de Bons Projetos de Tela Regularidade Irregularidade Similaridade de tamanhos, formas, cores e espaçamento de elementos

17 DSC/CCT/UFCGDSC/CCT/UFCG 17 Princípios de Bons Projetos de Tela Previsibilidade Espontaneidade ÍconeBarra de TítuloÍcone Controle Barra de Menu Botão Ícone Controle Barra de Menu Botão Barra de Título Sugestão de falta de planejamento incapacidade de previsão da estrutura do restante da tela ou de outras telas

18 DSC/CCT/UFCGDSC/CCT/UFCG 18 Princípios de Bons Projetos de Tela Sequencialidade Aleatoriedade Sugestão de ordenação lógica e/ou rítmica

19 DSC/CCT/UFCGDSC/CCT/UFCG 19 Princípios de Bons Projetos de Tela Economia Modicidade Ornamentação XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXQQQQQQQQQQ ZZZZZZZZZZZZJJJJJJJJJJJJJJ Atenção! árvore de Natal Efeito árvore de Natal Atenção! árvore de Natal Efeito árvore de Natal

20 DSC/CCT/UFCGDSC/CCT/UFCG 20 Princípios de Bons Projetos de Tela Proporcionalidade Unidade Fragmentação 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)

21 DSC/CCT/UFCGDSC/CCT/UFCG 21 Princípios de Bons Projetos de Tela Proporcionalidade , , , 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) 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)

22 DSC/CCT/UFCGDSC/CCT/UFCG 22 Princípios de Bons Projetos de Tela Simplicidade Complexidade Vide medida de complexidade proposta por Tulis (1983), com base em Bonsiepe (1968), in Galitz (2002)

23 DSC/CCT/UFCGDSC/CCT/UFCG 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â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 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

24 DSC/CCT/UFCGDSC/CCT/UFCG 24 Princípios de Bons Projetos de Tela Agrupamento

25 DSC/CCT/UFCGDSC/CCT/UFCG 25 Princípios de Bons Projetos de Tela Agrupamento grupo Carência de uma definição mais objetiva do que constitui um grupo (vide Tulis (1981), com base em Zahn (1971), in Galitz (2002))

26 DSC/CCT/UFCGDSC/CCT/UFCG 26 Princípios de Bons Projetos de Tela Agrupamento TEST RESULTSSUMMARY:GROUND GROUND, FAULT T-G 3 TERMINAL DC RESISTANCE > K OHMS T-R = K OHMS T-R > K OHMS T-R 3 TERMINAL DC VOLTAGE = 8.82 K OHMS T-R = K OHMS T-R = 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 TIP GROUND 14 K DC RESISTANCE DC VOLTAGEAC SIGNATURE 3500 K T-R 14 K T-R3500 K R-G 0 V T-G0V R-G 9 K T-R 14 K T-R 629 K R-G CENTRAL OFFICEBALANCE 39 DB VALID LINE CKTDIAL TONE OK Original Reprojetada Vide Tulis (1981)

27 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 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) 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 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 32 PROGRAMAÇÃO 08:30Abertura 09:00Palestra 1 09:30Palestra 2 10:00Palestra 3 10:00Coffee Break 10:30Palestra 4 11:00Palestra 5 11:30Palestra 6 Princípios de Bons Projetos de Tela Agrupamento usando Bordas Lineares CÓDIGO DE CORES BÁSICO preto0 marrom1 vermelho2 laranja3 amarelo4 verde5 azul6 violeta7 cinza8 branco9 ESCORES DO TORNEIO Raul67 Sílvio76 Roberto99 LISTA DE BENS 18 mesas 72 cadeiras 14 camas LEI DE MURPHY Se algo pode dar errado, então dará. 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. Cabeça do Peu Caranguejo Casa Grande Ipióca 51 Pitú Serra Branca Triunfo Bagagem Rapel Passagens Férias Praia Viagem Passaporte Guia Dunas Notificar Eiry sobre a devolução do livro de Nielsen. O que há em comum na lista abaixo? São LuísArroz de cuchá TeresinaMaria Isabel Campina GrandeBuchada BelémPato no tucupi SalvadorAcarajé FortalezaCaldeirada Nesta figura, ilustra-se o efeito do uso de fronteiras gráficas sobre a percepção humana de grupos em uma tela 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. Jantar às 19:30

33 DSC/CCT/UFCGDSC/CCT/UFCG 33 PROGRAMAÇÃO 08:30Abertura 09:00Palestra 1 09:30Palestra 2 10:00Palestra 3 10:00Coffee Break 10:30Palestra 4 11:00Palestra 5 11:30Palestra 6 Princípios de Bons Projetos de Tela Agrupamento usando Bordas Lineares CÓDIGO DE CORES BÁSICO preto0 marrom1 vermelho2 laranja3 amarelo4 verde5 azul6 violeta7 cinza8 branco9 ESCORES DO TORNEIO Raul67 Sílvio76 Roberto99 LISTA DE BENS 18 mesas 72 cadeiras 14 camas LEI DE MURPHY Se algo pode dar errado, então dará. 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. Cabeça do Peu Caranguejo Casa Grande Ipióca 51 Pitú Serra Branca Triunfo Bagagem Rapel Passagens Férias Praia Viagem Passaporte Guia Dunas Notificar Eiry sobre a devolução do livro de Nielsen. O que há em comum na lista abaixo? São LuísArroz de cuchá TeresinaMaria Isabel Campina GrandeBuchada BelémPato no tucupi SalvadorAcarajé FortalezaCaldeirada Nesta figura, ilustra-se o efeito do uso de fronteiras gráficas sobre a percepção humana de grupos em uma tela 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. Jantar às 19:30

34 DSC/CCT/UFCGDSC/CCT/UFCG 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 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. 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 DSC/CCT/UFCGDSC/CCT/UFCG 35 LISTA DE BENS 18 mesas 72 cadeiras 14 camas Princípios de Bons Projetos de Tela Agrupamento usando Bordas Lineares CÓDIGO DE CORES BÁSICO preto0 marrom1 vermelho2 laranja3 amarelo4 verde5 azul6 violeta7 cinza8 branco9 ESCORES DO TORNEIO Raul67 Sílvio76 Roberto99 LEI DE MURPHY Se algo pode dar errado, então dará. 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. Cabeça do Peu Caranguejo Casa Grande Ipióca 51 Pitú Serra Branca Triunfo Bagagem Rapel Passagens Férias Praia Viagem Passaporte Guia Dunas Notificar aos alunos de IHM que a prova será dia 11/02/2003. O que há em comum na lista abaixo? São LuísArroz de cuchá TeresinaMaria Isabel Campina GrandeBuchada BelémPato no tucupi SalvadorAcarajé FortalezaCaldeirada Nesta figura, ilustra-se o efeito do uso de planos de fundo sobre a percepção humana de grupos em uma tela 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. Jantar às 19:30 PROGRAMAÇÃO 08:30Abertura 09:00Palestra 1 09:30Palestra 2 10:00Palestra 3 10:00Coffee Break 10:30Palestra 4 11:00Palestra 5 11:30Palestra 6

36 DSC/CCT/UFCGDSC/CCT/UFCG 36 Princípios de Bons Projetos de Tela Agrupamento usando Bordas Lineares

37 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 39 Princípios de Bons Projetos de Tela Quantidade de Informações Recomendações Restrição dos níveis de densidade 1 das telas ou das janelas a valores que não excedam 30% Quantidade de Informações Recomendações Restrição dos níveis de densidade 1 das telas ou das janelas a valores que não excedam 30% densidade 1Por 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 densidade Há 2 tipos de densidade a serem calculados em uma tela: global e local

40 DSC/CCT/UFCGDSC/CCT/UFCG 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 Quantidade de Informações Densidade Global Medida do percentual de posições de caracteres na tela inteira que contêm dados 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% 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

41 DSC/CCT/UFCGDSC/CCT/UFCG 41 Princípios de Bons Projetos de Tela Quantidade de Informações Densidade Local Medida do quão fortemente compactada é a tela considerada 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

42 DSC/CCT/UFCGDSC/CCT/UFCG 42 Princípios de Bons Projetos de Tela Quantidade de Informações TEST RESULTSSUMMARY:GROUND GROUND, FAULT T-G 3 TERMINAL DC RESISTANCE > K OHMS T-R = K OHMS T-R > K OHMS T-R 3 TERMINAL DC VOLTAGE = 8.82 K OHMS T-R = K OHMS T-R = 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 Original Vide Galitz (2002) Densidade global: 17,9% Densidade global: 58,0% Densidade global: 17,9% Densidade global: 58,0%

43 DSC/CCT/UFCGDSC/CCT/UFCG 43 Princípios de Bons Projetos de Tela Quantidade de Informações Vide Galitz (2002) Densidade global: 10,8% Densidade global: 35,6% Densidade global: 10,8% Densidade global: 35,6% TIP GROUND 14 K DC RESISTANCE DC VOLTAGEAC SIGNATURE 3500 K T-R 14 K T-R3500 K R-G 0 V T-G0V R-G 9 K T-R 14 K T-R 629 K R-G CENTRAL OFFICEBALANCE 39 DB VALID LINE CKTDIAL TONE OK Reprojetada

44 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 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) 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 DSC/CCT/UFCGDSC/CCT/UFCG 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 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 DSC/CCT/UFCGDSC/CCT/UFCG 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) 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 DSC/CCT/UFCGDSC/CCT/UFCG 49 Princípios de Bons Projetos de Tela Tamanho de Página da Web Páginas Longas vs Páginas Curtas 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 Compreensão de um tema inteiro sem interrupção Apresentação de todo o tema em uma página com links internos para sub-tópicos

50 DSC/CCT/UFCGDSC/CCT/UFCG 50 Princípios de Bons Projetos de Tela Tamanho de Página da Web Páginas Longas vs Páginas Curtas 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 Carga de página via modems lentos e todas as páginas não são necessárias Criação de uma página para a apresentação de um índice compreensivo com links para várias páginas curtas

51 DSC/CCT/UFCGDSC/CCT/UFCG 51 Princípios de Bons Projetos de Tela Rolamento

52 DSC/CCT/UFCGDSC/CCT/UFCG 52 Princípios de Bons Projetos de Tela 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 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

53 DSC/CCT/UFCGDSC/CCT/UFCG 53 Princípios de Bons Projetos de Tela 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: telas únicas palavras 200 diagramas e ilustrações 2½ h de entrevistas em vídeo

54 DSC/CCT/UFCGDSC/CCT/UFCG 54 Princípios de Bons Projetos de Tela 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: telas únicas palavras 300 diagramas e ilustrações 2 h de entrevistas em vídeo

55 DSC/CCT/UFCGDSC/CCT/UFCG 55 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 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 Princípios de Bons Projetos de Tela


Carregar ppt "DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz."

Apresentações semelhantes


Anúncios Google