SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Downloaden Sie, um offline zu lesen
Estudo de navegação e usabilidade Vera Cruz
Análise do site baseado em conceitos universais e

          convenções de usabilidade.
Estudo de navegação e usabilidade Vera Cruz
Barra de localização:           Busca:                                 Destaque principal:
                                                              Não apresenta um campo                 É necessário estudar o tamanho das
      • Home                  Não apresenta barra de
                              localização indica para o       de busca para o usuário. Isso          áreas de destaque. Nessa área por
                              usuário que ele está na         poderia ajudá-lo a localizar o         exemplo o conteúdo está todo em
                              Home.                           conteúdo com mais precisão.            Flash e demora muito para aparecer.
Menus:
Não está claro qual é
menu de contexto do site.                                                                                             Conteúdo:
O usuário tem que dar                                                                                                 As áreas devem ser
muitos cliques para ter                                                                                               Repensadas e quantidade de
acesso ao sublinks dos                                                                                                animações acontecem ao
Menus.                                                                                                                mesmo tempo atrapalhando a
                                                                                                                      leitura do usuário



Área de Destaque:                                                                                                    Interação:
A área de destaques                                                                                                  Oferece pouca interação com o
Mesmo tempo. É necessário                                                                                            Usuário.
ter uma hierarquia visual
mais clara, não está claro
qual é conteúdo que estar
em destaque.



    Formas                                                                                     Importante: a home deve responder a quatro
                                                          Marca:
    É necessário repensar                                                                      questões principais dos usuário:
                                                          O logo está sendo replicado em
    aplicação do logo e
                                                          diversos lugares em diversas
    repensar as formas                                                                         1 – O que isso?
                                                          cores. Isso pode descaracterizar
    triangulo e retângulo e                                                                    2 – O que posso fazer aqui?
                                                          a identidade visual da marca. Ela
    quadro 3 formas                                                                            3 – O que eles tem?
                                                          não de variar muito deve ser
    diferentes em vidência.                                                                    4 – Porque eu devo estar aqui e não num outro lugar?
                                                          preservada.
• Home
Fotos 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.
Estudo de navegação e usabilidade Vera Cruz
usuário



                                                        Conteúdos espalhados:
Espaços em branco:
                                                        Os links podem apresentar seus respectivos
O espaço em branco dá uma sensação que não
                                                        conteúdos em novas páginas ou em área que
há conteúdo suficiente ou mesmo pode ser
                                                        estejam próximas e coerentes que facilitam a
 interpretado como um erro. Algo que não oi
                                                        leitura do usuário. O usuário não pode procurar o
concluído e deve ser evitado.
                                                        conteúdo ele dever ser acessível e intuitivo.
Estudo de navegação e usabilidade Vera Cruz
Estudo de navegação e usabilidade Vera Cruz
Estudo de navegação e usabilidade Vera Cruz
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.
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
Ausência de Referência          serviços da escola.
Onde indica que está é a Home
ou página inicial do site?
                                                                                       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 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)
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.
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á.
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.
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?
•
•
•
•Deixe
•
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.




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               Erro de servidor: mensagem de plugin do Flash. Deve
contrário ele pode desistir de        ter uma instrução para o usuário baixar o plugin do Flash.
ver o conteúdo do site. É             Mesmo assim o site está
necessário mostrar a
contagem para o usuário
saber o quanto falta para
carregar o site.
Estudo de navegação e usabilidade Vera Cruz

Weitere ähnliche Inhalte

Estudo de navegação e usabilidade Vera Cruz

  • 2. Análise do site baseado em conceitos universais e convenções de usabilidade.
  • 4. Barra de localização: Busca: Destaque principal: Não apresenta um campo É necessário estudar o tamanho das • Home Não apresenta barra de localização indica para o de busca para o usuário. Isso áreas de destaque. Nessa área por usuário que ele está na poderia ajudá-lo a localizar o exemplo o conteúdo está todo em Home. conteúdo com mais precisão. Flash e demora muito para aparecer. Menus: Não está claro qual é menu de contexto do site. Conteúdo: O usuário tem que dar As áreas devem ser muitos cliques para ter Repensadas e quantidade de acesso ao sublinks dos animações acontecem ao Menus. mesmo tempo atrapalhando a leitura do usuário Área de Destaque: Interação: A área de destaques Oferece pouca interação com o Mesmo tempo. É necessário Usuário. ter uma hierarquia visual mais clara, não está claro qual é conteúdo que estar em destaque. Formas Importante: a home deve responder a quatro Marca: É necessário repensar questões principais dos usuário: O logo está sendo replicado em aplicação do logo e diversos lugares em diversas repensar as formas 1 – O que isso? cores. Isso pode descaracterizar triangulo e retângulo e 2 – O que posso fazer aqui? a identidade visual da marca. Ela quadro 3 formas 3 – O que eles tem? não de variar muito deve ser diferentes em vidência. 4 – Porque eu devo estar aqui e não num outro lugar? preservada.
  • 5. • Home Fotos 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.
  • 7. usuário Conteúdos espalhados: Espaços em branco: Os links podem apresentar seus respectivos O espaço em branco dá uma sensação que não conteúdos em novas páginas ou em área que há conteúdo suficiente ou mesmo pode ser estejam próximas e coerentes que facilitam a interpretado como um erro. Algo que não oi leitura do usuário. O usuário não pode procurar o concluído e deve ser evitado. conteúdo ele dever ser acessível e intuitivo.
  • 12. 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.
  • 13. 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 Ausência de Referência serviços da escola. Onde indica que está é a Home ou página inicial do site? 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.
  • 14. 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)
  • 15. 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.
  • 16. 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á.
  • 17. 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.
  • 18. 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?
  • 20. 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. 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 Erro de servidor: mensagem de plugin do Flash. Deve contrário ele pode desistir de ter uma instrução para o usuário baixar o plugin do Flash. ver o conteúdo do site. É Mesmo assim o site está necessário mostrar a contagem para o usuário saber o quanto falta para carregar o site.