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
S umár io
Motivação Obj etivos Mater ial e Métodos Resultados Conclusões T rabalhos Futuros
¬ 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
¬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
¬ 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
¬ 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
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
¬ 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:
¬ 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:
Módulo 1 - caracter ís ticas do usuár io
I ns trumento de Pesquisa:
Coleta dos dados: preenchimento de
questionário
Módulo 1 – dis tr ibuição de conteúdos
I ns trumento de Pesquisa:
Coleta dos dados: atribuição de nota
ϖ 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
ϖ 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
Módulo 2 – pos ição do botão de navegação
I ns trumento de Pesquisa:
Coleta dos dados: elemento utilizado
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
Mapa
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
Mapa Í ndice
Módulo 3 – elementos de navegação
B ar r a de navegação
I ns trumento de Pesquisa:
Mapa Í ndice Í cones
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
¬ Tapejara: Total – 2900 Participantes - 403
¬ LaVia: Total – 200 Participantes - 67
Caracter ís ticas da Amostra
S exo
0%10%20%30%40%50%60%70%80%
Feminino Masculino
Tapejara
LaVia
Caracter ís ticas da Amostra:
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:
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:
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:
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:
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:
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:
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
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
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
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
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
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
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
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
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
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
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
¬ 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!
Recomendações sugeridas:
¬ Navegação no modo seqüencial Elemento testado: botão Localização: canto infer ior direito
Conclusões
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
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
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
¬ 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