09/09/2015

DESIGN DE INTERAO
E
ARQUITETURA DA INFORMAO

AULA 3 Sistemas de NAVEGAO

Profa. Pollyanna Miranda de Abreu

UniBH Belo Horizonte Minas Gerais Brasil

Objetivos da disciplina

Proporcionar ao aluno um maior aprofundamento

Objetivos em Design de Interao e Arquitetura da
Informao.

Aprender:
ORGANIZAR O CONTEDO DO SITE
Objetivos especficos ROTULAR A INFORMAO
NAVEGAR PELO CONTEDO
ENCONTRAR A INFORMAO.

Profa. Pollyanna M. Abreu 2

1
 09/09/2015

LEITURA INDISPENSVEL

livros

Profa. Pollyanna M. Abreu 3

Sistema de Navegao

Profa. Pollyanna M. Abreu 4

2
 09/09/2015

Sistema de Navegao

Profa. Pollyanna M. Abreu 5

Sistema de Navegao

Dicionrio Aurlio: Ir de um lugar ao outro. Mas esse destino est

fora da nossa rea de viso

Profa. Pollyanna M. Abreu 6

3
 09/09/2015

Sistema de Navegao

Profa. Pollyanna M. Abreu 7

Sistema de Navegao na AI

Profa. Pollyanna M. Abreu 8

4
 09/09/2015

Principais elementos da Navegao

Profa. Pollyanna M. Abreu 9

Principais elementos da Navegao

Profa. Pollyanna M. Abreu 10

5
 09/09/2015

Principais elementos da Navegao

Profa. Pollyanna M. Abreu 11

Principais elementos da Navegao

Menu global pode est

localizado na lateral.
Mas continua fixo.

Profa. Pollyanna M. Abreu 12

6
 09/09/2015

Principais elementos da Navegao

Menu local tambm indica onde eu posso ir. Porm

em um segundo nvel de navegao. Dentro de um
menu global

Profa. Pollyanna M. Abreu 13

Principais elementos da Navegao

Menu local tambm indica onde eu posso ir. Porm

em um segundo nvel de navegao. Dentro de um
menu global

Profa. Pollyanna M. Abreu 14

7
 09/09/2015

Principais elementos da Navegao

Breadcrumb = Migalha de po

Profa. Pollyanna M. Abreu 15

Principais elementos da Navegao

Breadcrumb = Migalha de po

Breadcrumb reflete o
caminho que o usurio
fez at chegar na
pgina.

Profa. Pollyanna M. Abreu 16

8
 09/09/2015

Principais elementos da Navegao

Profa. Pollyanna M. Abreu 17

Principais elementos da Navegao

Profa. Pollyanna M. Abreu 18

9
 09/09/2015

Principais elementos da Navegao

Profa. Pollyanna M. Abreu 19

Navegao passo a passo

Muito usado em fluxo

de check out e fluxo de
cadastro. Refletem os
passos que o usurio
DEVE seguir para
chegar onde ele deseja.

Profa. Pollyanna M. Abreu 20

10
 09/09/2015

Navegao passo a passo

Refletem os passos que

o usurio DEVE seguir
para chegar onde ele
deseja.

Profa. Pollyanna M. Abreu 21

Navegao passo a passo

Sugere contedos
relacionados aqueles que
voc est acessando.

EX: blogs sugerem posts

relacionados.

Profa. Pollyanna M. Abreu 22

11
 09/09/2015

Navegao passo a passo

Sugere contedos
relacionados aqueles que
voc est acessando.

EX: blogs sugerem posts

relacionados.

Profa. Pollyanna M. Abreu 23

Navegao passo a passo

Profa. Pollyanna M. Abreu 24

12
 09/09/2015

Navegao

Funciona como ajuda para o

usurio.

Profa. Pollyanna M. Abreu 25

Visite o site e observe a navegao

Bom exemplo sobre UX.

Indica muito bem:
ONDE EU ESTOU
DE ONDE EU VIM
E ONDE EU POSSO IR...

Profa. Pollyanna M. Abreu 26

13
 09/09/2015

Visite o site e observe a navegao

Bom exemplo sobre UX.

Indica muito bem:
ONDE EU ESTOU
DE ONDE EU VIM
E ONDE EU POSSO IR...

Profa. Pollyanna M. Abreu 27

Visite o site e observe a navegao

LIMITA A LIBERDADE DE
NAVEGAO DO
USURIO PARA QUE ELE
CONCLUA SUA COMPRA.

Profa. Pollyanna M. Abreu 28

14
 09/09/2015

Concluso

Profa. Pollyanna M. Abreu 29

15