aula 09
DESCRIPTION
Formas de representação da estrutura global (sitemaps) e individual (wireframes) dentro de u site.TRANSCRIPT
![Page 1: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/1.jpg)
Estruturas, Sitemaps e Wireframes
1
AI – aula 09
1quarta-feira, 5 de outubro de 11
![Page 2: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/2.jpg)
Estruturas de Navegação
2
Planejamento inicial do Sitemap
2quarta-feira, 5 de outubro de 11
![Page 3: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/3.jpg)
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
3quarta-feira, 5 de outubro de 11
![Page 4: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/4.jpg)
Ações micro e macro rumo ao mesmo objetivo
Início ObjetivoClique Clique Clique
Ações Macro
Ações Micro
4
4quarta-feira, 5 de outubro de 11
![Page 5: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/5.jpg)
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
5quarta-feira, 5 de outubro de 11
![Page 6: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/6.jpg)
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!!!
6quarta-feira, 5 de outubro de 11
![Page 7: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/7.jpg)
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.
7quarta-feira, 5 de outubro de 11
![Page 8: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/8.jpg)
Estruturasde Informação
8
• Estruturas lineares;
• Teias;
• Hierarquias;
• Facetas;
• Estruturas emergentes.
8quarta-feira, 5 de outubro de 11
![Page 9: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/9.jpg)
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.
9quarta-feira, 5 de outubro de 11
![Page 10: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/10.jpg)
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).
10quarta-feira, 5 de outubro de 11
![Page 11: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/11.jpg)
Representação da navegação em facetas
11
cat. 1
cat. 2
cat. 3
11quarta-feira, 5 de outubro de 11
![Page 12: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/12.jpg)
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.
12quarta-feira, 5 de outubro de 11
![Page 13: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/13.jpg)
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
13quarta-feira, 5 de outubro de 11
![Page 14: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/14.jpg)
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
14quarta-feira, 5 de outubro de 11
![Page 15: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/15.jpg)
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.
15quarta-feira, 5 de outubro de 11
![Page 16: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/16.jpg)
Exemplos de Estruturas Emergentes
16
• Blogs;
• Wikipedia;
• Twitter;
• Facebook;
• Orkut;
• Delicious…
16quarta-feira, 5 de outubro de 11
![Page 17: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/17.jpg)
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.
17quarta-feira, 5 de outubro de 11
![Page 18: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/18.jpg)
Sitemaps 18
Relação conteúdo x função
18quarta-feira, 5 de outubro de 11
![Page 19: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/19.jpg)
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)
19quarta-feira, 5 de outubro de 11
![Page 20: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/20.jpg)
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.
20quarta-feira, 5 de outubro de 11
![Page 21: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/21.jpg)
21
21quarta-feira, 5 de outubro de 11
![Page 22: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/22.jpg)
Wireframes 22
Esqueletos das páginas
22quarta-feira, 5 de outubro de 11
![Page 23: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/23.jpg)
23
23quarta-feira, 5 de outubro de 11
![Page 24: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/24.jpg)
24
24quarta-feira, 5 de outubro de 11
![Page 25: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/25.jpg)
25
25quarta-feira, 5 de outubro de 11
![Page 26: Aula 09](https://reader033.vdocuments.site/reader033/viewer/2022061202/546c2f0faf7959b7028b6590/html5/thumbnails/26.jpg)
26
26quarta-feira, 5 de outubro de 11