Aula 09

Estruturas, Sitemaps
AI – aula 09
e Wireframes 1

quarta-feira, 5 de outubro de 11 1

Estruturas
Planejamento inicial do Sitemap
de Navegação 2


Arquitetura
Persuasiva

• Qual é a ação que você quer
que o usuário tome?

• Quem você está persuadindo
para tomar uma ação?

• O que a pessoa precisa para
sentir-se conﬁante para tomar
essa ação?

• VENDA + COMPRA

• PROCESSO + AÇÃO

3


Ações micro e macro rumo ao mesmo objetivo

Ações Macro

Início Clique Clique Clique Objetivo

Ações Micro

4


Conceito
de Navegação

• Objetivos de negócios;

• Objetivos do site;

• Concorrentes;

• Marca;

• Tipos de usuários;

• Objetivos dos usuários
e cenários

5


Qualidades de um bom conceito

• Ser fácil de lembrar;

• Ser envolvente
(deve cobrir a navegação de nível micro e macro
e prever futuras decisões de design);

• Estar alinhado com os objetivos de quem $ o produto;

• SATISFAZER ÀS EXPECTATIVAS DOS USUÁRIOS!!!

6


Passos para criar um conceito de navegação

• Revisar as informações coletadas durante a Análise: visão da empresa,
atributos da marca, características da concorrência, os objetivos do site
e – sobretudo – o perﬁl do usuário;

• Descrição de cenário: quais ações o usuário precisa realizar
p/satisfazer os objetivos do cliente?

• Brainstorming: Guiar o conceito a partir de um gênero (tema)
e/ou de metáforas p/explorar os diversos modelos de navegação possíveis;

• Desenhar um mapa conceitual: mostrar as relações
entre as funcionalidades e o conteúdo do site;

• Descrever o conceito em palavras de modo simples, fácil de lembrar.
7


Estruturas
de Informação

• Estruturas lineares;

• Teias;

• Hierarquias;

• Facetas;

• Estruturas emergentes.

8


Recapitulando modelos…

• Estruturas lineares: páginas dispostas em sequência. Não se pode chegar
a uma determinada página sem ter passado por uma página anterior.
Ex.: busca dirigida, formulários para cadastro;

• Teias: estrutura de páginas cujos nós são ligados sem níveis ou sequências.
A informação é ligada através de links e referências cruzadas sem início e fim
bem definidos. Ex.: My Space (os usuários criam livremente links tanto para
o conteúdo que criam quanto para as páginas de outros usuários do serviço);

• Estruturas hierárquicas: níveis de nós dispostos em relações pai-filho
(estrutura em árvore). Os filhos (ou galhos inferiores) herdam a designação
do pai e a estendem para o próximo subnível (categorias e subcategorias);

• Hierarquia múltipla: é quando um filho possui mais de um pai.

9


Facetas

• A localização de um item é dada pelas categorias
as quais esse item pertence.

Ex.: item 1 pertence às categorias A, B e C mas não à categoria D.

• Múltiplos pontos de acesso;

• Maior flexibilidade ao localizar informações (amplifica a busca);

• A posição de um objeto é dada pela categoria de valores a qual pertence
(≠ hierarquia de categorias subordinadas pai(s), filhos e irmãos).

10


Representação da navegação em facetas

cat. 1
cat. 3

cat. 2

11


Vamos ver se
vocês aprenderam?

• Vamos deﬁnir (quase)
os mesmos ítens (páginas,
categorias) para dois tipos
de navegação diferentes:

• Estruturas hierárquicas;

• Facetas.

12


Exemplo de estrutura hierárquica
• Rock
Lançamentos
Rock Clássico
Beatles
Abbey Road
Sgt. Pepper’s…
Pink Floyd
Dark Side of the Moon
Rock Experimental
Frank Zappa
We’re Only in it for the Money
Jazz from Hell

• Jazz
Bebop
Miles Davis
E.S.P.
Kind of Blue
Jazz Vocal
Ella Fitzgerald
Best Of Ella Fitzgerald & Louis Armstrong

13


Exemplo de estrutura em facetas
Faceta Valores
Estilo Rock
Rock Clássico
Rock Experimental
Jazz
Bebop
Jazz Vocal

Artista Louis Armstrong
Beatles
Miles Davis
Ella Fitzgerald
Pink Floyd
Frank Zappa

Título Abbey Road
Best of Ella Fitzgerald & Louis Armstrong
Dark Site of the Moon
E.S.P.
Jazz From Hell
Sgt. Pepper’s Lonely Hearts Club Band
We’re Only in it for the Money

Preço Abaixo de $10
$10-15
Acima de $15

14


Estruturas Emergentes

• Não são planejadas a priori: materializam-se espontaneamente;

• Não são criadas por uma pessoa, equipe ou evento
mas, sim, incrementalmente;

• Ao invés de um processo hierárquico e descendente (top-down)
com planejamento e estrutura de design, as arquiteturas emergentes
são formadas de maneira ascendente (bottom-up);

• Os elementos individuais (páginas e conteúdo)
unem-se e constroem-se em um sistema auto-organizado;

• São as estruturas que descrevem como a arquitetura do site é criada
ao invés do relacionamento entre as páginas.
15


Exemplos de Estruturas Emergentes

• Blogs;

• Wikipedia;

• Twitter;

• Facebook;

• Orkut;

• Delicious…

16


Esquemas
Organizacionais

• Alfabéticos;

• Cronológicos (idade, tempo,);

• Geográﬁcos (continente, país,
região, estado, cidade, bairro);

• Por tópico (assunto);

• Por grupo (gestores,
professores, pais, ﬁlhos,
funcionários, etc.);

• Por tarefa.
17


Sitemaps Relação conteúdo x função
18


Vocabulário visual de um sitemap

Nó (página) Área
(agrupa páginas similares. Exige rótulo de texto)

Conectores:
Pilha de páginas – c/seta = sentido único;
(mesmo layout, mesma seção, conteúdo ≠) – s/seta = mão dupla;
– c/barra pequena: não é possível navegar p/cima.

Continuação Ponto de decisão
(permite parar o diagrama em uma página
(uma ação gera dois ou mais resultados)
e continuá-lo em outra)

19


Os símbolos não explicam tudo
• Esquemas de numeração: atribua letras para as seções
e números para as páginas. ex.: A1, A2, A3, A3.1, A3.2, A4…

• Rótulos: títulos das páginas. Procure ser conciso e óbvio.
Já dê o nome deﬁnitivo nesta etapa;

• Atributos de página: inclua nos ícones das páginas legendas
para atributos tais como PDF, pop-up, conteúdo dinâmico,
login, tipo, template, funcionalidades e características especiais;

• Notas e anotações: utilize breves notas explicativas
para exceções ou condições especiais;

• Escopo: mostre as páginas que estão dentro e fora do escopo para o projeto atual.
Isso ajuda a planejar mudanças posteriores e garante que o site seja escalável.

• Título e legenda: dê um título para o sitemap com data e número de versão. Crie uma legenda p/os símbolos.

20


21


Wireframes Esqueletos das páginas
22


23


24


25


26


Aula 09

Mais conteúdo relacionado

Semelhante a Aula 09

Mais de Hélio Sassen Paz

Último

Aula 09