Interface Homem-Mquina

Navegabilidade

Agosto/2012

Navegabilidade

a propriedade, ou capacidade de

navegao que possui a interface de um portal na internet, ou o prprio software navegador, de facilitar ao usurio chegar ao seu destino da maneira o mais eficiente possvel;
Corresponde qualidade da "estrutura viria" e/ou do "veculo" que d acesso ao contedo das informaes no portal (ou "site").
http://pt.wikipedia.org/wiki/Navegabilidade 2

Navegabilidade

Qualidade de navegao; estado do que oferece condies para ser navegado. Alguns elementos a serem considerados para obter e manter a navegabilidade:

Guias (ou abas); Nome das pginas; Barra de navegao (migalhas de po); Links funcionais.
4

Uso de Guias - Softwares

MS Word Bordas e Sombreamento MS Excel Formatar Clulas

5

Uso de Guias - Softwares

MS Word Bordas e Sombreamento

Uso de Guias - Softwares

Layout de um sistema de informao

Uso de Guias - Softwares

No navegador Mozilla Firefox possvel abrir guias que facilitam a navegao em vrios sites simultaneamente.

Uso de Guias - Softwares

O navegador Internet Explorer permite tambm grande facilidade para abertura de guias.

Uso de Guias - WEB

http://www.submarino.com.br em 2004

10

http://www.submarino.com.br // em 2010

Uso de Guias - WEB

11

http://www.submarino.com.br // em 2011

Uso de Guias - WEB

12

http://www.submarino.com.br // em 2012

Uso de Guias - WEB

13

Uso de Guias - WEB

Exemplo bastante familiar do uso de Guias: http://www.toledo.br

14

Uso de Guias - WEB

http://www.saraiva.com.br em 2010

15

Uso de Guias - WEB

http://www.saraiva.com.br em 2011

16

Uso de Guias - WEB

http://www.saraiva.com.br em 2012

17

Uso de Guias - WEB

http://www.saraiva.com.br (+ antigo)

18

Uso de Guias - WEB

A Amazon.com usava cores diferentes para cada guia do site. Cores fortes e difceis de se ignorar ficam ainda mais destacadas devido a cor clara das guias inativas.

Posteriormente passou a ser assim...

19

Uso de Guias - WEB

Em 2010 estava assim...

20

Em 2012 assim...

Uso de Guias - WEB

21

Uso de Guias - WEB

22

Uso de Guias - WEB

M utilizao:
As guias deste site foram desenhadas incorretamente; No existe a iluso de que a guia ativa est na frente das outras. A guia no tem nenhuma conexo com o espao logo abaixo dela.

http://www.extra.com.br (anteriormente)

23

Uso de Guias - WEB

http://www.extra.com.br (2010)

24

Portanto...
25

As Guias...
So evidentes;
So difceis de ignorar;

So agradveis;
Sugerem um espao fsico.
26

Nomes das pginas

H quatro coisas que preciso saber sobre os nomes das pginas: - Toda pgina precisa de um nome; - O nome precisa estar no lugar certo; - O nome precisa estar destacado; - O nome precisa combinar com o que for clicado.
27

Nomes das pginas

Normalmente esperamos encontrar as placas de ruas nas esquinas, olhando para cima, na horizontal.

28

Nomes das pginas

Sendo assim, preciso que o nome esteja em destaque para que o nome das ruas possam ser vistos sem esforo, para que o motorista tenha certeza do caminho e assim obter a sua orientao.

29

Migalhas de Po
Migalhas de po o nome sugestivo que o autor utiliza para identificar a barra de navegao. Essa barra mostra/identifica o caminho pelo qual o usurio passou dentro do site.
30

Migalhas de Po
Algumas caractersticas sobre as migalhas de po: - Devem ser colocadas no alto da pgina; - Utilizar o sinal de > entre os nveis das pginas visitadas; - Usar um tamanho de letra que faa com que essas informaes sejam notadas;

....

31

Migalhas de Po
- Utilizar as palavras Voc est aqui;

- O ltimo item (a pgina atual) deve ser colocado em negrito;

- No confundir migalhas com o nome da pgina. No utilizar as migalhas no lugar do nome da pgina.
32

33

34

35

36

Em 2012...

37

38

39

Ao escolher que quero ver Ipad...

40

41

42

Exemplo citado no livro de Steve Krug: http://www.about.com

43

Teste do Porta Malas?

Imagine que voc teve os olhos vendados e foi jogado no porta-malas de um carro; em seguida, rodado, para ser jogado numa pgina em algum lugar nas entranhas de um site. Se a pgina for bem projetada, quando a viso estiver clara, voc deveria ser capaz de responder s seguintes perguntas, sem hesitao:
44

Teste do Porta Malas?

Que site esse? (identificao do site) Em que pgina estou? (nome da pgina)

Quais as sees principais deste site? (sees)

Quais as minhas opes neste nvel? (navegao local)

Onde estou no esquema das coisas? (indicadores como Voc est aqui)
Como posso procurar?
45

Teste do Porta Malas

Que site esse? Em que pgina estou? Quais as principais sees deste site? Onde estou no esquema das coisas? Quais so as minhas opes neste nvel? Como posso procurar?

http://www.samsung.com.br

46

Teste do Porta Malas

Que site esse? Em que pgina estou? Quais as principais sees deste site? Onde estou no esquema das coisas? Quais so as minhas opes neste nvel? Como posso procurar?

http://www.samsung.com.br (+ atual)

47

Bibliografia
Livro: No me faa pensar Autor: Steve Krug

48