Aula 09
Upcoming SlideShare
Loading in...5
×
 

Aula 09

on

  • 506 views

Formas de representação da estrutura global (sitemaps) e individual (wireframes) dentro de u site.

Formas de representação da estrutura global (sitemaps) e individual (wireframes) dentro de u site.

Statistics

Views

Total Views
506
Views on SlideShare
506
Embed Views
0

Actions

Likes
2
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Aula 09 Aula 09 Presentation Transcript

  • Estruturas, Sitemaps AI – aula 09 e Wireframes 1quarta-feira, 5 de outubro de 11 1
  • Estruturas Planejamento inicial do Sitemap de Navegação 2quarta-feira, 5 de outubro de 11 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 confiante para tomar essa ação? • VENDA + COMPRA • PROCESSO + AÇÃO 3quarta-feira, 5 de outubro de 11 3
  • Ações micro e macro rumo ao mesmo objetivo Ações Macro Início Clique Clique Clique Objetivo Ações Micro 4quarta-feira, 5 de outubro de 11 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 5quarta-feira, 5 de outubro de 11 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!!! 6quarta-feira, 5 de outubro de 11 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 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 7
  • Estruturas de Informação • Estruturas lineares; • Teias; • Hierarquias; • Facetas; • Estruturas emergentes. 8quarta-feira, 5 de outubro de 11 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. 9quarta-feira, 5 de outubro de 11 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). 10quarta-feira, 5 de outubro de 11 10
  • Representação da navegação em facetas cat. 1 cat. 3 cat. 2 11quarta-feira, 5 de outubro de 11 11
  • Vamos ver se vocês aprenderam? • 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 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 13quarta-feira, 5 de outubro de 11 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 14quarta-feira, 5 de outubro de 11 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. 15quarta-feira, 5 de outubro de 11 15
  • Exemplos de Estruturas Emergentes • Blogs; • Wikipedia; • Twitter; • Facebook; • Orkut; • Delicious… 16quarta-feira, 5 de outubro de 11 16
  • Esquemas Organizacionais • 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 17
  • Sitemaps Relação conteúdo x função 18quarta-feira, 5 de outubro de 11 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) 19quarta-feira, 5 de outubro de 11 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 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 20
  • 21quarta-feira, 5 de outubro de 11 21
  • Wireframes Esqueletos das páginas 22quarta-feira, 5 de outubro de 11 22
  • 23quarta-feira, 5 de outubro de 11 23
  • 24quarta-feira, 5 de outubro de 11 24
  • 25quarta-feira, 5 de outubro de 11 25
  • 26quarta-feira, 5 de outubro de 11 26