[email protected] [email protected] [email protected] [email protected]...

55
[email protected] [email protected] [email protected] [email protected] DSC/CCT/UFCG DSC/CCT/UFCG Prof .: José Eustáquio Rangel de Queiroz Carga Horária: 60 h

Transcript of [email protected] [email protected] [email protected] [email protected]...

Page 1: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

ran

gel@

dsc.u

fpb

.b

rra

ng

el@

lmrs

-sem

arh

.ufp

b.b

rra

ng

el@

dsc.u

fpb

.b

rra

ng

el@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Prof.:Prof.: José Eustáquio Rangel de QueirozJosé Eustáquio Rangel de Queiroz

Carga Horária:Carga Horária:60 h60 h

Page 2: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

22

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 3: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

33

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 4: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

44

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 5: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

55

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 6: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

66

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 7: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

77

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 8: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

88

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 9: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

99

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 10: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1010

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 11: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1111

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 12: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1212

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 13: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1313

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

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

Princípios de Bons Projetos de Tela

Page 14: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1414

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Equilíbrio EquilíbrioBalanceamentoBalanceamento

InstabilidadeInstabilidade

Page 15: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1515

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Simetria SimetriaSimetriaSimetria

AssimetriaAssimetria

Page 16: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1616

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Regularidade RegularidadeRegularidadeRegularidade

IrregularidadeIrregularidade

Similaridade de

tamanhos,

formas, cores e espaçamento de

elementos Similaridade de

tamanhos,

formas, cores e espaçamento de

elementos

Page 17: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1717

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Previsibilidade PrevisibilidadePrevisibilidadePrevisibilidade

EspontaneidadeEspontaneidade

Ícone Barra de Título Ícone Ícone

Controle Controle Controle

Controle Controle Controle

Barra de Menu

BotãoBotão Botão

Ícone

Ícone

Ícone

Controle

Controle

Controle

Controle

Controle

Controle

Barra de Menu

Botão

Botão

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

Sugestão de

falta de

planejamento incapacidade

de previsão da estrutura do

restante da tela ou de outras

telas

Page 18: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1818

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Sequencialidade SequencialidadeSequencialidadeSequencialidade

AleatoriedadeAleatoriedade

Sugestão de ordenação

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

lógica e/ou rítmica

Page 19: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

1919

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Economia EconomiaModicidadeModicidade

OrnamentaçãoOrnamentação

XXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXX

QQQQQQQQQQQQQQQQQQQQ

ZZZZZZZZZZZZZZZZZZZZZZZZ

JJJJJJJJJJJJJJJJJJJJJJJJJJJJ

Atenção!

Efeito áárrvvoorree dde e NNaattaall

Atenção!

Efeito áárrvvoorree dde e NNaattaall

Page 20: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2020

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Proporcionalidade ProporcionalidadeUnidadeUnidade

FragmentaçãoFragmentaçã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)

Page 21: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2121

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Proporcionalidade Proporcionalidade

11

11

1,4141,414

11

1,6181,618

11

1,7321,732

11

22

11

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)

Page 22: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2222

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Simplicidade SimplicidadeSimplicidadeSimplicidade

ComplexidadeComplexidade

Vide medida

de

complexidade proposta

por Tulis (1983), com

base em Bonsiepe

(1968), in Galitz (2002)

Vide medida

de

complexidade proposta

por Tulis (1983), com

base em Bonsiepe

(1968), in Galitz (2002)

Page 23: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2323

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 24: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2424

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Agrupamento Agrupamento

Page 25: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2525

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Agrupamento Agrupamento

Carência de uma definição mais

objetiva do que constitui um

ggruruppoo (vide Tulis (1981), com base

em Zahn (1971), in Galitz (2002))

Carência de uma definição mais

objetiva do que constitui um

ggruruppoo (vide Tulis (1981), com base

em Zahn (1971), in Galitz (2002))

Page 26: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2626

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Agrupamento Agrupamento

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

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

14 K T-R

629 K R-G

CENTRAL OFFICEBALANCE

39 DB VALID LINE CKT

DIAL TONE OK

OriginalOriginal

ReprojetadaReprojetada

Vide Tulis (1981)

Vide Tulis (1981)

Page 27: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2727

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 28: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2828

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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)

Page 29: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

2929

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 30: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3030

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 31: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3131

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 32: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3232

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

PROGRAMAÇÃO08:30 Abertura09:00 Palestra 109:30 Palestra 210:00 Palestra 310:00 Coffee Break 10:30 Palestra 411:00 Palestra 511:30 Palestra 6

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Agrupamento usando Bordas Lineares Agrupamento usando Bordas Lineares

CÓDIGODE CORESBÁSICO

preto 0marrom 1vermelho 2laranja 3amarelo 4verde 5azul 6violeta 7cinza 8branco 9

ESCORESDO TORNEIO

Raul 67Sílvio 76Roberto 99

LISTADE BENS

18 mesas72 cadeiras14 camas

LEI DE MURPHYSe algo pode dar errado, então dará.

PREVISÃO DO TEMPODurante 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 PeuCaranguejoCasa GrandeIpióca51PitúSerra BrancaTriunfo

BagagemRapel PassagensFériasPraiaViagemPassaporteGuiaDunas

Notificar Eiry sobre a devolução do livro de Nielsen.

O que há em comum na lista abaixo?

São Luís Arroz de cucháTeresina Maria IsabelCampina Grande BuchadaBelém Pato no tucupiSalvador AcarajéFortaleza Caldeirada

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

Page 33: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3333

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

PROGRAMAÇÃO08:30 Abertura09:00 Palestra 109:30 Palestra 210:00 Palestra 310:00 Coffee Break 10:30 Palestra 411:00 Palestra 511:30 Palestra 6

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Agrupamento usando Bordas Lineares Agrupamento usando Bordas Lineares

CÓDIGODE CORESBÁSICO

preto 0marrom 1vermelho 2laranja 3amarelo 4verde 5azul 6violeta 7cinza 8branco 9

ESCORESDO TORNEIO

Raul 67Sílvio 76Roberto 99

LISTADE BENS

18 mesas72 cadeiras14 camas

LEI DE MURPHYSe algo pode dar errado, então dará.

PREVISÃO DO TEMPODurante 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 PeuCaranguejoCasa GrandeIpióca51PitúSerra BrancaTriunfo

BagagemRapel PassagensFériasPraiaViagemPassaporteGuiaDunas

Notificar Eiry sobre a devolução do livro de Nielsen.

O que há em comum na lista abaixo?

São Luís Arroz de cucháTeresina Maria IsabelCampina Grande BuchadaBelém Pato no tucupiSalvador AcarajéFortaleza Caldeirada

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

Page 34: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3434

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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.

Page 35: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3535

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

LISTADE BENS

18 mesas72 cadeiras14 camas

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Agrupamento usando Bordas Lineares Agrupamento usando Bordas Lineares

CÓDIGODE CORESBÁSICO

preto 0marrom 1vermelho 2laranja 3amarelo 4verde 5azul 6violeta 7cinza 8branco 9

ESCORESDO TORNEIO

Raul 67Sílvio 76Roberto 99

LEI DE MURPHYSe algo pode dar errado, então dará.

PREVISÃO DO TEMPODurante 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 PeuCaranguejoCasa GrandeIpióca51PitúSerra BrancaTriunfo

BagagemRapel PassagensFériasPraiaViagemPassaporteGuiaDunas

Notificar aos alunos de IHM que a prova será dia 11/02/2003.

O que há em comum na lista abaixo?

São Luís Arroz de cucháTeresina Maria IsabelCampina Grande BuchadaBelém Pato no tucupiSalvador AcarajéFortaleza Caldeirada

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:30PROGRAMAÇÃO08:30 Abertura09:00 Palestra 109:30 Palestra 210:00 Palestra 310:00 Coffee Break 10:30 Palestra 411:00 Palestra 511:30 Palestra 6

Page 36: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3636

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Agrupamento usando Bordas Lineares Agrupamento usando Bordas Lineares

Page 37: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3737

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 38: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3838

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

O desenvolvimento de telas

com o máximo necessário de

informações requer uma

análise cuidadosa das tarefas

do usuário

Page 39: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

3939

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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%

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, densidadedensidade é 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

1 Por definição, densidadedensidade é 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

densidade

a serem calculados em

uma tela: global e local Há 2 tipos de densidade

densidade

a serem calculados em

uma tela: global e local

Page 40: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4040

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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% 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%

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

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

Page 41: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4141

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Tullis (1983) derivou uma

medida para a densidade local:

o percentual de caracteres em

um círculo de acuidade visual

com 88 caracteres

0122222010123445443210

02345677765432001235679+97653210

0234567776543200123445443210

012222201

Page 42: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4242

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Quantidade de Informações Quantidade de Informações

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

OriginalOriginal Vide Galitz (2002)

Vide Galitz (2002)

Densidade global: 17,9% Densidade global: 58,0%

Densidade global: 17,9% Densidade global: 58,0%

Page 43: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4343

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela

Quantidade de Informações Quantidade de Informações

Vide Galitz (2002)

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 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

14 K T-R

629 K R-G

CENTRAL OFFICEBALANCE

39 DB VALID LINE CKT

DIAL TONE OK

ReprojetadaReprojetada

Page 44: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4444

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 45: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4545

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 46: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4646

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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)

Page 47: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4747

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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

Page 48: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4848

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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)

Page 49: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

4949

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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 Vários linkslinks para para páginas curtaspáginas curtas

Compreensão de um tema inteiro sem interrupção

Apresentação de Apresentação de todo o tema em uma todo o tema em uma página com links página com links internos para sub-internos para sub-tópicostópicos

Page 50: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

5050

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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 Uso de uma página longa ou preparação longa ou preparação de uma versão com de uma versão com uma páginauma página

Carga de página via modems lentos e todas as páginas não são necessárias

Criação de uma Criação de uma página para a página para a apresentação de um apresentação de um índice compreensivo índice compreensivo com links para várias com links para várias páginas curtaspáginas curtas

Page 51: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

5151

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela Rolamento Rolamento

Page 52: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

5252

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

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”

Page 53: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

5353

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela Exemplo 1 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• 180.000 palavras • 200 diagramas e

ilustrações• 2½ h de entrevistas

em vídeo

Page 54: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

5454

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Princípios de Bons Projetos de Tela

Princípios de Bons Projetos de Tela Exemplo 2 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• 60.000 palavras • 300 diagramas e

ilustrações• 2 h de entrevistas

em vídeo

Page 55: Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCGDSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz.

5555

ran

gel@

dsc.u

fpb

.br

ran

gel@

lmrs

-sem

arh

.ufp

b.b

r

DSC/CCT/DSC/CCT/UFCGUFCGDSC/CCT/DSC/CCT/UFCGUFCG

Exercício

Analise o link http://www.usoftrecords.com/ à 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 http://www.usoftrecords.com/ à 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

Princípios de Bons Projetos de Tela