1

Análise da arquitetura da informação

Planejamento visual 4Análise da Arquitetura da informação pontofrio.com.br

Design gráfico IFPB, Professora Mariana CantisaniAluno Adson Santos

3

4.5.15.16.19.20.23.27.28.29.30.

O siteHeurísticasConclusãoWireframeSistema de rotulaçãoSistema de organizaçãoSistema de navegaçãoSistema de buscaPágina de errosTestesSugestões

Sumário

4

O site do Ponto Frio tem a função de comercializar produtos das mais variadas marcas e serviços associados, buscando fidelizar os clientes através do bom atendimento. Conta com alguns níveis de informação, destacando as ofertas do dia, na área superior, principal da página, em seguida, ao rolar, outros produtos podem ser visualizadosA hierarquia das informações são tratadas por diferentes níveis cromáticos, o que pode parecer confuso em um primeiro momento, já que as cores não se relacionam diretamente com a identidade visual da empresa.

Na navegação e fechamento do pedido, existem recursos para melhorar a experiência da compra, como por exemplo:- Coleção de vídeos demonstrativos sobre produtos para você fazer a melhor escolha.- Filtros para encontrar exatamente o produto que você precisa e procura.- Carrinho de compras com todos os passos para fechamento do pedido em uma única tela.

O site

5

O sistema deve informar continuamente ao usuário sobre o que ele está fazendo; 10 segundos é o limite para manter a atenção do usuário focalizada no diálogo;

Heurísticas de Nielsen

1. Feedback

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

6

A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema; As informações devem ser organizadas conforme o modelo mental do usuário;

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

2. Linguagem do usuário

7

O usuário controla o sistema, ele pode, a qualquer momento, abortaruma tarefa, ou desfazer uma operação e retornar ao estado anterior;

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

3. Saídas claramente demarcadas

8

Um mesmo comando ou ação deve ter sempre o mesmo efeito; A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento;

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

4. Consistência

9

Evitar situações de erro; Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram;

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

5. Prevenir erros

10

O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico;

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

6. Minimizar a sobrecarga de memória do usuário

11

Para usuários experientes executarem as operações mais rapidamente; Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto; Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal;

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

7. Atalhos

12

Deve-se apresentar exatamente a informação que o usuário precisa nomomento, nem mais nem menos; A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suastarefas;

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

8. Diálogos simples e naturais

13

Linguagem clara e sem códigos; Devem ajudar o usuário a entender e resolver o problema; Não devem culpar ou intimidar o usuário;

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

9. Boas mensagens de erro

14

Mesmo que seja melhor que um sistema possa ser usado sem documentação,pode ser necessário fornecer uma ajuda e documentação. Qualquer informação deve ser fácil de se pesquisada, com foco na atividade do usuário, lista de passos concretos a serem realizados, e não ser muito grande.

Usuário 1

Usuário 2

Usuário 3

1 2 3 4 5 6 7

1 2 3 4 5 6 7

1 2 3 4 5 6 7

10. Ajuda e documentação

15

Conclusão

De maneira geral, o site proporciona ao usuário uma fácil navegação, assim ele atende as principais necessidades. Contém bastantes informações, porém muitas delas podem confundir usuários menos experientes, tanto pela quantidade, como pela organização do conteúdo. A página inicial é bastante longa e pode prejudicar o usuário que não tenha acesso a conexões mais rápidas, pois imagens acabam demorando para serem carregadas. Porém, percebe-se que esta é uma prática bastante usual de lojas de departamento na internet.Uma solução para a página inicial seria diminuir o número de itens, para que a rolagem fosse menor e menos confusa.

16

Wireframe home1 2 3 4

5 6

10

8

7

9

11

12

1314 15 16

17 18 19

20

2122

1 - Topo2 - Logo3 - Busca superior4 - Carrinho5 - Menu geral6 - Oferta do Pinguim7 - Ofertas do dia8 - Navegação ofertas do dia9 - Escolha por faixa de preço10 - Demais promoções11 - Blog do Pinguim12 - Serviços13 - Busca inferior14 - Dúvidas15 - Serviços 216 - Institucional17 - Televendas18 - Atendimento19 - Redes sociais20 - Formas de pagamento21 - Segurança /plataformas22 - Endereço / CNPJ

17

Wireframe identificação

12 3

4

5

6 7

1 - Topo2 - Logo3 - Carrinho4 - Oferta do Pinguim5 - Login com rede social6 - Login cliente cadastrado7 - Cadastro novo cliente

18

Wireframe página de erro

1

23

4

51 - Logo2 - Mensagem de erro3 - Navegação por categorias4 - Busca5 - Televendas e atendimento

19

Sistemas de rotulaçãoPo

nto

Frio

Am

eric

anas

Mag

azin

e Lu

iza

20

Taxonomia, indexaçãoOrganização de informações e conhecimentos de forma significativa, possibilitando que o usuário possua acesso à informação organizada e estruturada.São organizados por ordem de importância nos três sites analisados, todos eles possuem um link para que sejam vistos todos os departamentos.

Vocabulário controlado/ontologia:Controlar a terminologia usada nos índices e controlar a exibição dos relacionamentos entre conceitos nos índices.O Ponto Frio e Magazine Luiza, utilizam as palavras para departamento, ao contrário das Lojas Americanas que usa em sua página apenas ícones, o que dificulta a compreensão do usuário.

21

Organização por sequênciaO usuário sabe em que setor eles está, baseado nas informações sequenciais.

Organização por categoriaO usuário seleciona a categoria em que ele acha que o produto procurado se insere.

Sistemas de organização

22

Esquema dirigido à metáfora O usuário faz a leitura de pictogramas/símbolos, de conhecimento geral, para chegar nos produtos ou categorias desejadas.

23

Mapa do siteO site possui um link em que lista todas as categorias presentes, caracterizando como um mapa do site.

Sistemas de navegação

24

Informações de ordenar os produtos e outros tipos de filtro só aparecem quando você seleciona uma das categorias existentes.

Navegação local

No topo da página existe um menu fixo com as principais informações, além de um campo de busca que aparece na maioria das páginas.

Navegação global

25

Na página individual do produto, existe um campo para avaliação do cliente e perguntas que podem ser respondidas por outros usuários.

Navegação interna

26

É possível compartilhar um produto nas redes sociais, o site destaca o facebook e o twitter, porém ao clicar no “+compartilhar” outras redes aparecem e também pode ser feito o compartilhamento por e-mail.

Navegação externa

27

O site possui um sistema de busca que automaticamente completa ao digitar um termo no campo e faz uma sugestão prévia de busca e produtos.

Sistema de busca

28

A página de erro é simples, porém bastante útil e proporciona ao usário várias formas de encontrar o que procura, nela existe mais um campo de busca e navegação por categoria. Ainda é possível encontrar a ajuda online do Ponto Frio.

Páginas de erro

29

A navegação pelo site foi feita em quatro navegadores diferentes, Chrome, Safari, Firefox e Internet Explorer, usando os sitemas Windows 7 e Mac OS X Lion 10.7.5 e não foram encontrados erros. O comportamento nos diferentes ambientes aconteceu da mesma maneira.

Testes

30

O layout do site segue um padrão comum para lojas deste gênero, existem muitas categorias e sessões e isso pode dificultar a navegação de alguns usuários, especialmente por conta do grande número de produtos espalhados pela página inicial. A sugestão, é que acontecesse uma diminuição na quantidade de produtos que ficam expostos na primeira página do site.

Outro fator que pode confundir o usuário, é o excessivo número de cores para a mesma primeira página, o tratamento cromático não segue a identidade visual da empresa.*

As páginas internas possuem uma melhor organização das informações, possuem um background branco, o que torna o contraste muito bom e a tipografia é de boa legibilidade.

O mapa do site e a busca são bons e atendem as necessidades do usuário.

*Na última visita ao site, foi observada a redução de cores, isso já deixou melhor a página inicial.

Sugestões