O documento analisa o layout e a navegabilidade do Ambiente Virtual de Aprendizagem (AVA) Solar usando critérios como proximidade, contraste e repetição. A análise identifica problemas como itens desconexos visualmente e falta de destaque na hierarquia da informação. Uma reorganização dos menus é proposta aplicando os princípios, e testes de usabilidade apontam melhorias como indicadores de localização e busca.
3. A análise a seguir tem como objeto de estudo o Ambiente Virtual de
Aprendizagem (AVA) Solar. Essa primeira etapa de análise está fundamentada no
layout do AVA e se utilizará dos seguintes critérios:
Proximidade
Itens relacionados entre si devem ser agrupados visualmente.
Contraste
Se dois itens não pertencerem à mesma categoria, diferencie-os
completamente.
Repetição
Algum aspecto do design deve repetir-se no material inteiro.
4. Devido ao grande número de vezes em que se foi levantado o problema de
engenharia da informação como grande problema desse AVA em estudo, iremos
começar a análise pelo conceito de proximidade. Uma vez que o mesmo tem uma
grande relação com a organização da informação, recaindo sobre o problema da
engenharia da informação, na verdade a análise irá se basear nesse critério,
entretanto veremos que este critério irá requerer os outros dois outros.
Dessa forma, essa análise começa com o bloco de menus apresentado pelo AVA.
Percebemos que o primeiro bloco tenta englobar um número de informações
referente a disciplina ou a determinado curso em questão, ao notarmos que o título
de seção faz referência a isso. E é nesse primeiro bloco que nossa análise se inicia.
5. Dessa forma notamos uma primeira incoerência, tendo o princípio de proximidade como critério. Dentro desse bloco de
menus qual a relação da guia Inicio com o título em que a mesma se insere?
Entendemos que a guia Inicio está numa hierarquia superior a do grupo de menus em
que está inserida, uma vez que ela irá direcionar o usuário a Homepage do Solar, que
é a página principal de qualquer ambiente web, a página que serve de ponto inicial na
experiência de navegação através do AVA. Dessa maneira, vemos a necessidade do
destaque de tal guia, diferenciando-a do restante das outras e a colocando em canto
favorável a visualização, fora de qualquer grupo de menus, posicionando-a no canto
superior esquerdo da página (padrão ocidental), além do seu renomeamento para a
guia Solar ou usando sua respectiva logo.
Aplicando o princípio de proximidade, nos utilizamos dos conceitos do princípio de
contraste. Percebam que ao destacarmos a logo Solar na posição que planejavámos,
não apenas a afastamos das demais, mas também aplicamos contraste de tamanho.
É notório ainda que a relação título-subtítulo não está em acordo, uma vez que o
título deve exercer maior peso em relação a seus subtítulos, uma vez que sua relação
de importância é maior. Perbe-se que isso ocorre pela relação de contraste ter sido
aplicada de forma inversa, dando maior destaque aos subtítulos, uma vez que o fundo
é de cor laranja e os tipos do subtítulo são de cor branca, não ocorrendo o mesmo
com o título, que também é laranja. O não destaque do título também se dá por não
haver contraste de peso, uma vez que as fontes aplicadas em título e subtítulo são as
mesmas, em se tratando de tamanho e estrutura (negrito, no caso).
6. A disposição dos menus aparece de forma não tão coerente, uma vez que certos menus conversam entre si e acabam
entrando em desacordo por não estarem próximos. Como é o caso dos menus Aulas e Material de Apoio. Nesse
primeiro momento iremos fazer essa reorganização somente entre os elementos de cada sessão, mas sabemos que a
reestruturação do Solar deve ser feita de maneira global.
A figura mostrada ao lado é uma tentativa de aplicar os princípios de proximidade e
contraste no primeiro bloco de informações apresentado no Solar. Para tornar o
menu mais coerente em termos visuais, de acordo com o princípio de proximidade,
geramos três blocos de informações, agrupando-os por áreas relacionadas. O
primeiro bloco faz referência a aula e os materiais necessários para estudo. O
segundo bloco faz referência a disciplina, exibindo a agenda e as informações da
mesma. O terceiro tem foco nas pessoas envolvidas, exibindo os participantes e o
acompanhamento. Entretanto, como dissemos anteriormente, essa organização é
uma tentativa de restruturar a informação, trabalhando de forma segmentada, uma
vez que estamos nos preocupando na reorganização das sessões. Por outro lado,
percebemos a necessidade de uma rearquitetura da informação de forma mais
holística.
7. As outras seções podem ser refeitas seguindo os princípios já vistos
anteriormente e também o princípio de repetição que nos garante uma
integridade para a peça, uma vez que manteremos o padrão previamente
estabelecido. Queremos ressaltar novamente que numa análise mais holística
o nosso menu de Conta não se comportaria da
forma ao lado. Uma vez que pensamos na criação
de uma barra de tarefas superior, onde tal seção
ficaria localizada, mas, como dissemos, esta
análise está se dando de forma segmentada, uma
vez que é necessário se fazer uma reestrutaração
da informação previamente. Outro elemento que
devemos dar devida atenção é o fato de os botões
Alternar pergil e Sair que não seguem o pricípio
de repetição, não estando de acordo com o tamanho, alinhamento e cores dos
demais menus. Isso ocorre pelo fato de querermos darmos maior atenção a eles,
tornando-os mais visíveis ao usuário na tentativa de localizá-los.
8. Alinhamento
Nada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.
Ao analisarmos o menu redesenhado percebemos a existência de duas linhas
principais de alinhamento. A linha de alinhamento dos títulos dos
menus(vermelha) e a linha de alinhamento dos subtítulos(azul). Os títulos e
subtítulos não estão alinhados propositalmente para gerar uma indentação
que dá evidência aos títulos.
As outras duas linhas de alinhamento, mais fracas, fogem desse alinhamento
principal propositalmente, as duas com intenção com intenção de destacar os
elementos desalinhados. A logo do Solar está com alinhamento centralizado
(verde) ao corpo central do menu, lhe dando destaque maior. Os menus
Alternar Perfil e Sair necessitavam de um destaque, devido a serem opções
recorrente na navegação do usuário. Dessa maneira, reduzimos sua forma em
relação aos demais menus e o alinhamos a direita(roxo), a fim de quebrar o
padrão, e evidenciar-lhes diante do resto da peça.
9.
10. Nossa segunda parte da análise irá se dá no quesito navegabilidade. Iremos verificar dentro da estrutura do
AVA Solar como o usuário se situa dentro do mesmo. Para isso utilizaremos um método conhecido como Teste
do Porta-Malas, proposto por Steve Krug, em seu livro Não me faça pensar.
Krug elencou 6 perguntinhas básicas em se tratando da navegabilidade de um site:
• Que site é este?
– Nome do site
• Em que página estou?
– Nome da página
• Quais as seções principais deste site?
– Seções
• Quais são as opções deste nível?
– Navegação local
• Onde estou no esquema das coisas?
– Indicadores de posição
• Como posso procurar?
Que site é esse?
11. O solar responde sempre a essa pergunta com sua logo que está localizada no canto superior direito.
Entretanto não é o melhor lugar para o padrão ocidental, uma vez que lemos da esquerda para a direita, desse
modo a logo não é a primeira coisa a ser vista.
Em que página estou?
O solar também responde a essa pergunta, entretando o nome da página acaba não sendo tão destacado,
devido ao título não ter um destaque baseados nos princípios de proximidade e contraste, além do nome da
página se encontrar abaixo da migalha de pão que acaba sendo mais visível que o nome da página por possuir
mais constraste que o mesmo.
12. • Quais as seções principais deste site?
As sessões do site são bem claras.
13. • Quais são as opções deste nível?
A navegação local é bem clara pois o solar tem uma área de contéudo muito bem delimitada e
diferenciada dos menus gerais. Desse modo é fácil de perceber que a navegação local somente pode
acontecer dentro da área de conteúdo, não fazendo com o que o usuário se confunda.
14. • Onde estou no esquema das coisas?
O solar possui um sistema de migalha de pão que mostra ao usuário onde ele se encontra no esquema
das coisas. Entretanto, essa localização poderia se dar de maneira mais eficiente se houvesse um
cursor que indicasse sobre qual menu o usuário se encontra. Além disso o recurso migalha de pão
poderia ser navegável.
• Como posso procurar?
O solar não dispoe de sistema de busca.
15.
16. Abaixo apresentamos-lhes a paleta de cores do AVA Solar. Como pode-se perceber o
mesmo utiliza-se apenas uma matiz do círculo de cores de cor variando apenas a
luminosidade e a saturação . A partir disso podemos aferir que a harmonia de cores do
Solar é monocromática.
O site http://www.amopintar.com aponta os prós e contras de
harmonias monocromáticas:
Prós:
A harmonia monocromática, é simples de utilizar e sempre luz
balançada e visualmente apelativa.
Contras:
Este esquema carece de contraste. Não é uma harmonia tão vibrante
como a harmonia de complementares.
Ler mais: http://www.amopintar.com/harmonia-das-
cores#ixzz1rc3z5HDC
17. Outro fator para escolha deste tipo de harmonia pode ter sido o fato de o Solar ser um sistema voltado para o Ensino
que requer uma carga horário de trabalho dentro do mesmo alta e este tipo de harmonia favorece a permanência do
usuário no sistema sem que o mesmo sinta-se desconfortável, uma vez que essa harmonia não apresenta grandes
variações de matizes, não super estimulando o glóbulo ocular