recomendações básicas para o projeto gráfico e

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