Como Ler um Livro Jacques Philippe Sauvé UFCG/DSC [email protected].
Transcript of [email protected] [email protected] [email protected] [email protected]...
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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)
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)
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
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
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))
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)
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
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)
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
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
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
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
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
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.
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
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
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
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
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
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
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
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%
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
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
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
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)
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
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)
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
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
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
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”
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
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
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