recomendações básicas para o projeto gráfico e
TRANSCRIPT
![Page 1: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/1.jpg)
CINTED - 2003
R ecomendações B ás icas par a o P r ojet oGr áf ico e Navegacional de I nt er faces de
Apl icações E ducacionais , bas eado emValidação E xper iment al
Cor a H . F . P in t o R ibeir o
I ns t i t u t o de I n for mát ica - U F R GS
![Page 2: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/2.jpg)
S umár io
Motivação Obj etivos Mater ial e Métodos Resultados Conclusões T rabalhos Futuros
![Page 3: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/3.jpg)
¬ Identificação de padrões a seremadotados em interfaces gráficas doscursos de EAD em um ambientecorporativo
¬Busca de referências: Manuais Aplicações reais
Motivação
![Page 4: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/4.jpg)
¬Referências – problemas identificados: ausência de embasamento sólido
divergências entre as recomendaçõesencontradas em manuais
falta de recomendações específicas
falta de padrão nas aplicaçõesdisponíveis
aspectos fis iológicos e cognitivos nãopareciam ser cons iderados
Motivação
![Page 5: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/5.jpg)
¬ Questões :• Por que ausência de critérios e
recomendações embasadas?• Por que os aspectos humanos não são
considerados?
¬ Hipóteses:• Falta comunicação entre as áreas humanase exatas• Não há validação experimental
Motivação
![Page 6: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/6.jpg)
¬ Identificar os componentes básicos de umatela de aplicações voltadas ao ensino atravésdo computador.
¬ Avaliar alternativas, a partir de es tudoexper imental, considerando ascaracterísticas humanas.
¬ Estabelecer critérios válidos, baseados nosresultados obtidos.
Obj etivos
![Page 7: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/7.jpg)
I dent i f icação de component es bás icos eas pect os humanos r elacionados
F is iológicos :
visualização
legibil idade
¬Cor es : matiz e saturação
¬F ont es : tipo de fonte
T rabalho desenvolvido
¬Navegação: dis tr ibuição deconteúdos por telas recursos para navegação
Component es As pect os humanos
¬Cognit ivos : navegação or ientação
![Page 8: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/8.jpg)
¬ Disponibilizado na rede intranet da CRT e da UCS
¬ Participação livre dos usuários
¬ Armazenamento de dados em banco de dados Access
¬ Captura da navegação livre através de log
¬ Dados filtrados e tratados estatisticamente
I ns trumento de Pesquisa:
![Page 9: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/9.jpg)
¬ Composto por 3 módulos.
¬ Método de Navegação:
Seqüencial ou Tutorial – 1º e 2º módulos
Navegação livre – 3º módulo
I ns trumento de Pesquisa:
![Page 10: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/10.jpg)
Módulo 1 - caracter ís ticas do usuár io
I ns trumento de Pesquisa:
Coleta dos dados: preenchimento de
questionário
![Page 11: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/11.jpg)
Módulo 1 – dis tr ibuição de conteúdos
I ns trumento de Pesquisa:
Coleta dos dados: atribuição de nota
![Page 12: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/12.jpg)
ϖ F isiológicos:
Mat iz Contraste Saturação Fadiga visual
ϖ R ecomendaçõesda literatura
ϖ Exemplos
Módulo 2 – cores de fundo e fontes
I ns trumento de Pesquisa:
Coleta dos dados: seleção de preferência(adotada) atribuição de notas paratodas as opções
![Page 13: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/13.jpg)
ϖ Fadiga visual
ϖ Legibilidade
ϖ R ecomendações
da literatura
ϖ Exemplos
Módulo 2 – tipologia de fontes
I ns trumento de Pesquisa:
Coleta dos dados: seleção de preferência(adotada) atribuição de notas paratodas as opções
![Page 14: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/14.jpg)
Módulo 2 – pos ição do botão de navegação
I ns trumento de Pesquisa:
Coleta dos dados: elemento utilizado
![Page 15: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/15.jpg)
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
![Page 16: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/16.jpg)
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
Mapa
![Page 17: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/17.jpg)
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
Mapa Í ndice
![Page 18: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/18.jpg)
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
Mapa Í ndice Í cones
![Page 19: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/19.jpg)
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
Mapa Í ndice Í cones L ocal izador
![Page 20: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/20.jpg)
¬ Tapejara: Total – 2900 Participantes - 403
¬ LaVia: Total – 200 Participantes - 67
Caracter ís ticas da Amostra
![Page 21: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/21.jpg)
S exo
0%10%20%30%40%50%60%70%80%
Feminino Masculino
Tapejara
LaVia
Caracter ís ticas da Amostra:
![Page 22: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/22.jpg)
0 %
1 0 %
2 0 %
3 0 %
4 0 %
5 0 %
6 0 %
< 2 0a n o s
2 0 -3 0a n o s
3 1 -4 0a n o s
4 1 -5 0a n o s
5 1 -6 0a n o s
Ta p e ja ra
L a Via
F aixa et ár ia
Caracter ís ticas da Amostra:
![Page 23: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/23.jpg)
0 %
2 0 %
4 0 %
6 0 %
8 0 %
1 0 0 %
1 2 0 %
2 o g ra u 3 o g ra u P ó s -g ra d u a d o
Ta p e ja ra
L a Via
E s colar idade
Caracter ís ticas da Amostra:
![Page 24: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/24.jpg)
0 %
2 0 %
4 0 %
6 0 %
8 0 %
1 0 0 %
Vis u a l Ve rb a l N ã oid e n tifica d o
Ta p e ja ra
L a Via
E s t i lo de Apr endizagem (S oloman-Felder)
Caracter ís ticas da Amostra:
![Page 25: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/25.jpg)
T es t e Qui-quadr ado
¬ Aplicado ao total da amostra.
¬ Testa a significância entre ocorrência de duasvariáveis:
Variável 1: sexo, idade, nível de escolaridade ouestilo de aprendizagem;
Variável 2: cor ou tipo de fonte preferido.
Análise Es tatís tica:
![Page 26: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/26.jpg)
Anális e de Var iância - ANOVA
¬ Investiga a variabilidade entre as médias de duas oumais populações.
¬ Analisa médias da variável:
nota atribuída para a preferência na distribuiçãode conteúdos.
Análise Es tatís tica:
![Page 27: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/27.jpg)
Não par amét r ico de K olmogor ov-S mir nov
¬ Método KS
¬ Baseado na maior diferença absoluta entre asdistribuições cumulativas teórica e observada, nãoexigindo freqüência mínima por célula
¬ Análises de freqüências obtidas, como:
páginas visitadas durante a navegação livre
Análise Es tatís tica:
![Page 28: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/28.jpg)
Cores de tela/fonte: preferência
Resultados
0%5%
10%15%20%25%30%35%40%45%50%
Azu l c la ro /a zu le s cu ro
B ra n co /p re to B e g e /m a rro m Ve rd ecla ro /ve rd e
e s cu ro
P re to /b ra n co Ve rd ecítrico /ve rd e
e s cu ro
Tape ja raLaV ia
![Page 29: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/29.jpg)
T apejara LaViaM é dia de M é dia de
Notas NotasA z ul 7,6 7,7B ranc o 6,9 7,3B ege 6,3 5,9V erde c laro 5,7 6,0P reto 3,6 3,4V erde c ítric o 2,3 2,2
Core s
Cores de tela/fonte: notas atribuídas
Resultados
![Page 30: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/30.jpg)
Achados Adicionais
No T apejar a - Qui-quadr ado-Cr os s t ab:
¬ 20-30 anos: maior aceitação de preto para fundode tela
¬ 31-40 anos: valorização do fundo branco, menorpontuação de fundo azul
¬41-50: rejeição às cores bege e preto
Cores de tela/fonte, por faixa etária
![Page 31: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/31.jpg)
0%10%20%30%40%50%60%70%
M inúsculosem se rifa
M a iúsculosem se rifa
M inúsculocom se rifa
M a iúsculocom se rifa
Tape ja raLaV ia
Tipos de fonte: preferência
Resultados
![Page 32: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/32.jpg)
Tipos de fonte, notas atribuídas
Tapejara LaViaMédia de Média de
Notas NotasMinúsculo sem serifa 8,3 8,2Maiúsculo sem serifa 5,9 7,9Minúsculo com serifa 7,5 5,8
Maiúsculo com serifa 5,5 5,6
Fontes
preferência rejeição
Resultados
![Page 33: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/33.jpg)
No Tapejara - Qui-quadrado-Crosstab:
¬ 20 a 30 anos: rejeição a fontes maiúsculassem serifa
¬ 41 e 50 anos: maior aceitação de fontesmaiúsculas
→ limitação visual (não podia aumentar otamanho da fonte) estaria relacionada?
Achados Adicionais
Tipo de fonte, por faixa etária
![Page 34: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/34.jpg)
Resultados
6 ,66 ,87 ,07 ,27 ,47 ,67 ,88 ,08 ,2
Pa g in a çã o R o la g e m
Ta p e ja ra
L a Via
Distribuição de Conteúdo
![Page 35: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/35.jpg)
R esumoAspectos Gr áf icos Descr ição da P r ef er ência
Preferênci a: az ul cl aro/az ul es curoAcei t ação: fundos cores cl arasR ej ei ção: cores cí t r i cas para fundo Preferênci a: mi nús cul o s em s er i faAcei t ação: caract eres s em s er i faR ej ei ção: mai ús cul o com s er i faPreferênci a: pagi naçãoAcei t ação: - - - - - - - -R ej ei ção: rol agem de pági na
Cor de f undo/ f onte
T ipologia de f onte
Dis t r ibuição de conteúdo
Resultados
![Page 36: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/36.jpg)
Tipos de fonte, notas atribuídas
Resultados
0%
10%
20%
30%
40%
50%
60%
D ire ito E squerdo S uperio r Infe rio r S empre ferência
Tape jaraLaV ia
![Page 37: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/37.jpg)
R esumoNavegação Descrição da Preferência
Posição geral D ireito
Posição para:
B otão de avanço/retrocesso
Inferior direito
Superior (Tapejara)
Inferior (LaVia)
D ireito (Tapejara)
Esquerdo (LaVia)
Índices Esquerdo ou direito
Localiz adores Superior
Mapas Esquerdo
B arra de navegação
Ícones
Resultados
![Page 38: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/38.jpg)
R esumo
Navegação Descrição da Preferência
Índice x Ícone Índice Localiz ador x Ícone Localiz ador Índice x Localiz ador Índice Ícone direito x Mapa esquerdo x B arra de navegação superior e inferior
Ícone direito
C oncorrência entre elementos:
Resultados
![Page 39: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/39.jpg)
¬ Uso de cores: Cores claras para fundo e escuras para fonte
Conclusões
¬ Uso de fontes: Fontes em minúsculo, sem serifa→ Paradigma do papel não se aplica!
¬ Distribuição de Conteúdos na tela: Paginação→ Rejeição a conteúdos que extrapolam o tamanho
da tela!
![Page 40: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/40.jpg)
Recomendações sugeridas:
¬ Navegação no modo seqüencial Elemento testado: botão Localização: canto infer ior direito
Conclusões
![Page 41: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/41.jpg)
Recomendações sugeridas:
¬ Navegação livre: Elemento testado: textual e icônico Localização do elemento para navegação:
ϖ Barra de navegação: .......... Super iorϖ Localizadores:.....................Super iorϖ Mapas:................................ Esquerdoϖ Í ndices:...............................Esquerdoϖ Í cones:................................Direito
Conclusões
![Page 42: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/42.jpg)
Recomendações sugeridas:
¬ Navegação livre: Elemento testado: textual e icônico Seleção do elemento para navegação:
ϖ Índice x Ícone x Localizador: .... Índiceϖ Localizador x Ícone: ................... Localizadorϖ Ícone direito x Mapa esquerdo x Barra de
navegação:................................... Ícone direito→ Aprendizes visuais e verbais com escolhas
semelhantes!
Conclusões
![Page 43: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/43.jpg)
Contribuições:
¬ Uso de instrumento de validação e de análiseestatística
¬Utilização dos resultados em uma proposta derecomendações
¬ Integração de conhecimento de diferentes áreas
¬Base para uma nova investigação em ambienteuniversitário
Conclusões
![Page 44: Recomendações Básicas para o Projeto Gráfico e](https://reader036.vdocuments.com.br/reader036/viewer/2022081616/62caf2855b834d79395c31f4/html5/thumbnails/44.jpg)
¬ Falta de impacto relacionado a sexo, escolaridadee estilo de aprendizado.
¬ Complexidade dos componentes e inter-relacionamento das áreas de conhecimento.
¬ Importância da integração entre as deferentesáreas.
¬ Importância da validação experimental.
Conclusões