estudo de navegação e usabilidade vera cruz

21

Upload: cristiane-coimbra

Post on 07-Jul-2015

1.770 views

Category:

Design


2 download

DESCRIPTION

Realizei uma análise de navegação e usabilidade do site do Vera Cruz. Fiz um levantamento dos sites atuais, identifiquei erros e apontei soluções para promover uma arquitetura mais funcional.

TRANSCRIPT

Page 1: Estudo de navegação e usabilidade Vera Cruz
Page 2: Estudo de navegação e usabilidade Vera Cruz

Análise do site baseado em conceitos universais e

convenções de usabilidade.

Page 3: Estudo de navegação e usabilidade Vera Cruz
Page 4: Estudo de navegação e usabilidade Vera Cruz

• Home

Barra de localização:

Não apresenta barra de

localização indica para o

usuário que ele está na

Home.

Área de Destaque:

A área de destaques

Mesmo tempo. É necessário

ter uma hierarquia visual

mais clara, não está claro

qual é conteúdo que estar

em destaque.

Menus:

Não está claro qual é

menu de contexto do site.

O usuário tem que dar

muitos cliques para ter

acesso ao sublinks dos

Menus.

Busca:

Não apresenta um campo

de busca para o usuário. Isso

poderia ajudá-lo a localizar o

conteúdo com mais precisão.

Destaque principal:

É necessário estudar o tamanho das

áreas de destaque. Nessa área por

exemplo o conteúdo está todo em

Flash e demora muito para aparecer.

Formas

É necessário repensar

aplicação do logo e

repensar as formas

triangulo e retângulo e

quadro 3 formas

diferentes em vidência.

Marca:

O logo está sendo replicado em

diversos lugares em diversas

cores. Isso pode\ descaracterizar

a identidade visual da marca. Ela

não de variar muito deve ser

preservada.

Conteúdo:

As áreas devem ser

Repensadas e quantidade de

animações acontecem ao

mesmo tempo atrapalhando a

leitura do usuário

Importante: a home deve responder a quatro

questões principais dos usuário:

1 – O que isso?

2 – O que posso fazer aqui?

3 – O que eles tem?

4 – Porque eu devo estar aqui e não num outro lugar?

Interação:

Oferece pouca interação com o

Usuário.

Page 5: Estudo de navegação e usabilidade Vera Cruz

• HomeFotos em destaque: As fotos aparecem em destaque numa grande área do site, mas não apresentam legenda,

não fica claro o que elas representam: Alunos, Projetos, Eventos?

Maior aproveitamento das imagens: As fotos poderiam ser

visualizadas numa galeria de fotos da escola. As fotos são

Interessantes e isso provar interesse das pessoa em conhecer

melhor a escola. Com um simples clique poderia haver a

possibilidade de ir direto para galeria de fotos.

Page 6: Estudo de navegação e usabilidade Vera Cruz
Page 7: Estudo de navegação e usabilidade Vera Cruz

Espaços em branco:

O espaço em branco dá uma sensação que não

há conteúdo suficiente ou mesmo pode ser

interpretado como um erro. Algo que não oi

concluído e deve ser evitado.

Conteúdos espalhados:

Os links podem apresentar seus respectivos

conteúdos em novas páginas ou em área que

estejam próximas e coerentes que facilitam a

leitura do usuário. O usuário não pode procurar o

conteúdo ele dever ser acessível e intuitivo.

usuário

Page 8: Estudo de navegação e usabilidade Vera Cruz
Page 9: Estudo de navegação e usabilidade Vera Cruz
Page 10: Estudo de navegação e usabilidade Vera Cruz
Page 11: Estudo de navegação e usabilidade Vera Cruz
Page 12: Estudo de navegação e usabilidade Vera Cruz

Menus:

As áreas do lateral direita

e lado esquerdo estão em

branco. A timeline está numa

nova janela o ideal é deixar

Sempre num área do site.

Para que o conteúdo fique

mais conectado. Deixar

apenas conteúdos periféricos

para ser apresentados em

novas janelas.

Page 13: Estudo de navegação e usabilidade Vera Cruz

Menu principal

Deveria permitir o acesso para todas as páginas

principais e suas respectivas subpáginas.

De ser concebida uma novo estrutura para organizar e

agrupar as demais páginas dentro de um contexto

Coerente com o grupo principal de informações ou

serviços da escola.

Menu contexto

Apresenta um menu que se desdobra

e exibe os sublinks correspondentes

ao menu principal selecionado.

Ausência do Submenu

Não aparece só quando o usuário

acessa o conteúdo de uma página

interna. Deve obedecer a hierarquia

do menu principal e seguir uma

lógica que permite a fácil associação

do conteúdo a exibir, com sua ordem

Hierárquica.

Ausência de Referência

Onde indica que está é a Home

ou página inicial do site?

Page 14: Estudo de navegação e usabilidade Vera Cruz

Ausência de localização da página

Nenhuma página mostra o “Migalhas de pão” , o caminho de localização da página de onde usuário está. Ou seja, é necessário mostrar

para o usuário o caminho que ele percorreu e onde e ele está. Na tela ao lado para visualizar o conteúdo foi necessário usar a barra d

rolagem e o usuário perde a referencia de onde está. Segundo as convenções de usabilidade de Steve Krug define algumas boas

práticas das migalhas de pão se caracterizam por:

Serem colocadas no Alto:

Parecem funcionar melhor se forem apresentadas acima de todo o resto. Elas ficam literalmente na margem parecendo um acessório.

Quando ficam muito abaixo do conteúdo do site podem confundir com a navegação.

Usa o sinal entre níveis:

O uso do sinal “>” é bem adotado no mundo inteiro, “:” ou “/” funcionam, mas o sinal “>” é mais satisfatório.

Letras pequenas:

Para deixar claro que se trata de um acessório para apoiar o usuário não deve ser o destacar mais do que o conteúdo do site.

Colocar em negrito o último item:

O último item da lista deve ser o nome da página atual e deixá-lo em negrito dá o destaque necessário.

* Steve Krug é um dos grandes pesquisadores de navegabilidade autor de diversos livros incluindo “Não me faça pensar” (2001)

Page 15: Estudo de navegação e usabilidade Vera Cruz

Para demonstrar um exemplo de aplicação desse conceito de navegação e usabilidade exploramos um exemplo baseado no site atual da

escola Vera Cruz. Essa imagem é de um conteúdo que foi acessado do item comunidade.

Page 16: Estudo de navegação e usabilidade Vera Cruz

Agora é possível observar o exemplo da mesma página, mas com aplicação das “migalhas de pão” ou seja com o caminho que o usuáro

Percorreu. Se ele desejar voltar a página anterior ele poderá clicar nos itens apresentado na barra da migalha de pão sem se perder. Outro

Ponto interessante é que nesse exemplo o usuário sabe onde ele está.

Page 17: Estudo de navegação e usabilidade Vera Cruz

Conflito navegação dos Menus

Os itens de menu estão muito próximo e podem

Confundir o usuário. O site apresenta 3 Menus isso

em áreas diferentes isso confunde o usuário o ideal é

que a navegação

Ausência do Submenu

Não aparece só quando o usuário

acessa o conteúdo de uma página

interna. Deve obedecer a hierarquia

do menu principal e seguir uma

lógica que permite a fácil associação

do conteúdo a exibir, com sua ordem

Hierárquica.

Page 18: Estudo de navegação e usabilidade Vera Cruz

Destaques e divisões

A hierarquia de um

conteúdo não precisa se

segmentado por cores

existem diversos

elementos que podem se

utilizados visualmente

para dividir uma sessão.

Com site apresenta muitas

cores não é possível

identificar a cor da escola.

Qual é cor que representa

a escola?

Page 19: Estudo de navegação e usabilidade Vera Cruz

•Deixe

Page 20: Estudo de navegação e usabilidade Vera Cruz

Loading (carregar o site):

Demora para na área de

grande destaque no site. O

usuário não pode esperar

mais do que 2 seg. Caso

contrário ele pode desistir de

ver o conteúdo do site. É

necessário mostrar a

contagem para o usuário

saber o quanto falta para

carregar o site.

serviço Temporariamente Indisponível: mensagem de serviço

indisponível.

Erro de servidor: mensagem de servidor não encontrado quando

o site é acessado com outro navegador.

Erro de servidor: mensagem de plugin do Flash. Deve

ter uma instrução para o usuário baixar o plugin do Flash.

Mesmo assim o site está

Page 21: Estudo de navegação e usabilidade Vera Cruz