Aula 09

Estruturas, Sitemaps e Wireframes

1

AI – aula 09

1quarta-feira, 5 de outubro de 11

Estruturas de Navegação

2

Planejamento inicial do Sitemap


Arquitetura Persuasiva

3

• 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 confiante para tomar essa ação?

• VENDA + COMPRA

• PROCESSO + AÇÃO


Ações micro e macro rumo ao mesmo objetivo

Início ObjetivoClique Clique Clique

Ações Macro

Ações Micro

4


Conceito de Navegação

5

• Objetivos de negócios;

• Objetivos do site;

• Concorrentes;

• Marca;

• Tipos de usuários;

• Objetivos dos usuários e cenários


Qualidades de um bom conceito

6

• 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!!!


Passos para criar um conceito de navegação

7

• 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 perfil 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.


Estruturasde Informação

8

• Estruturas lineares;

• Teias;

• Hierarquias;

• Facetas;

• Estruturas emergentes.


Recapitulando modelos…

9

• 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.


Facetas

10

• 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).


Representação da navegação em facetas

11

cat. 1

cat. 2

cat. 3


Vamos ver se vocês aprenderam?

12

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

• Estruturas hierárquicas;

• Facetas.


Exemplo de estrutura hierárquica

13

• RockLançamentosRock Clássico Beatles Abbey Road Sgt. Pepper’s… Pink Floyd Dark Side of the MoonRock Experimental Frank Zappa We’re Only in it for the Money Jazz from Hell

• JazzBebop Miles Davis E.S.P. Kind of BlueJazz Vocal Ella Fitzgerald Best Of Ella Fitzgerald & Louis Armstrong


Exemplo de estrutura em facetas

14

Faceta Valores

Estilo Rock Rock Clássico Rock ExperimentalJazz Bebop Jazz Vocal

Artista Louis ArmstrongBeatlesMiles DavisElla FitzgeraldPink FloydFrank Zappa

Título Abbey RoadBest of Ella Fitzgerald & Louis ArmstrongDark Site of the MoonE.S.P.Jazz From HellSgt. Pepper’s Lonely Hearts Club BandWe’re Only in it for the Money

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


Estruturas Emergentes

15

• 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.


Exemplos de Estruturas Emergentes

16

• Blogs;

• Wikipedia;

• Twitter;

• Facebook;

• Orkut;

• Delicious…


Esquemas Organizacionais

17

• Alfabéticos;

• Cronológicos (idade, tempo,);

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

• Por tópico (assunto);

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

• Por tarefa.


Sitemaps 18

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


Vocabulário visual de um sitemap

19

Nó (página)

Pilha de páginas(mesmo layout, mesma seção, conteúdo ≠)

Continuação(permite parar o diagrama em uma páginae continuá-lo em outra)

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

Conectores:– c/seta = sentido único;– s/seta = mão dupla;– c/barra pequena: não é possível navegar p/cima.

Ponto de decisão(uma ação gera dois ou mais resultados)


Os símbolos não explicam tudo

20

• 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 definitivo 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.


21


Wireframes 22

Esqueletos das páginas


23


24


25


26


Education

Aula 09