SlideShare ist ein Scribd-Unternehmen logo
1 von 4
Downloaden Sie, um offline zu lesen
ARQUITETURA DE INFORMAÇÃO

 PROJETANDO
 A EXPERIÊNCIA
 DO USUÁRIO                                                             Com André Silveira @energizador




Elementos básicos do projeto de
interface
Pra o entendimento sobre Arquitetura de Informação é fundamental conhecer os componentes básicos que
englobam a navegação web. Também é importante se darem conta que esses Elementos podem e devem
ser trabalhados de diferentes formas pra resolver os problemas do projeto. Vocês NÃO vão partir com uma
regra ou receita pronta, mas sim projetar conforme o objetivo de negócio do cliente.


1. ORGANIZAÇÃO:


Vamos começar com a ORGANIZAÇÃO: é o sistema que define regras pra classificar e ordenar as
informações do projeto. Ela possui duas subdivisões: uma mais global, que se refere a Estrutura de
Informação, e outra que se refere à parte de dentro desse conjunto, que são os Esquemas Organizacionais.
A gente pode defini-los como facilitadores de acesso ao conteúdo pra que consigamos navegar entre blocos
de dados. Na prática, a primeira coisa a fazer é pensar no todo, no conjunto, e depois pensar em Esquemas
pra que o usuário consiga filtrar esses registros em partes e, aí sim, encontrar um determinado conteúdo de
forma mais fácil. Esse é o objetivo, ok?


Uma Estrutura de Informação pode ser:
• Linear: quando as páginas são dispostas em sequência. Como exemplo: Etapas de um carrinho de
  compras num e-commerce ou aquelas fases (Experiência, Formação...) dentro de um formulário pra
  cadastro de currículo. Estes são bons exemplos de Estruturas Lineares;
• Teias: são nós (são seções) ligadas sem níveis ou sequência. Pra entender melhor, são aqueles links e
  referências cruzadas, que não tem início ou fim. Tudo a ver com a navegação Associativa, é o mesmo
  conceito;
• Hierárquicas: É uma estrutura em árvore, a mais utilizada pelos projetistas, justamente porque ela é
  clara. Vocês vão ver na hora o relacionamento “pai-filho”, “primeiro e segundo nível” ou “principal e
  local”. É bem fácil e é por isso que praticamente todos os sites têm, por menor que seja, alguma estrutura




 (51) 3325-2596
                                                                                                         1
 www.targettrust.com.br
ARQUITETURA DE INFORMAÇÃO

 PROJETANDO
 A EXPERIÊNCIA
 DO USUÁRIO                                                             Com André Silveira @energizador




  hierárquica. Se vocês estruturarem um site de forma lógica e propuserem uma estrutura hierárquica, a
  chance de sucesso é grande;
• Facetas: Diferente de uma estrutura ou de uma visão hierárquica, onde se chega num conteúdo daquela
  forma, as facetas dão uma alternativa, uma ideia mais global. Por exemplo, se eu vou descrever as
  propriedades de um tênis, eu posso dizer o Tipo, o Preço, a Marca, como categorias pertencentes àquele
  tênis. Mas, existem outros conceitos pra Facetas, que quase sempre a gente vai aplicar em sites maiores
  e eles realmente confundem um pouco. Eu prefiro resolver os problemas usando outras soluções;
• Estruturas Emergentes: Essa é bem mais fácil, é uma estrutura que não é planejada e sim vai se criando,
  se auto-organizando. Isso porque os usuários editam, adicionam e vão excluindo conteúdo e isso vai
  alterando a interface, modificando aquela estrutura, como no antigo site da Wikipedia.


Dentro da ORGANIZAÇÃO, o próximo ponto são os Esquemas Organizacionais, que podem ser:
• Alfabéticos;
• Cronológicos;
• Geográficos;
• Por Assunto;
• Por Grupo de Audiência, ou;
• Por Tarefa.


Alguns exemplos:
No site Almanaque Culinário, eu tenho uma série de receitas e posso filtrar esses registros pela letra de
início. Se estamos procurando por “Bem Casado”, clico no B e encontro o meu conteúdo de uma forma bem
rápida (é um Esquema Organizacional Alfabético);
No site da Tecnisa, estou buscando um Imóvel, mas eu quero especificamente da cidade de São Paulo (é um
Esquema Geográfico).




 (51) 3325-2596
                                                                                                       2
 www.targettrust.com.br
ARQUITETURA DE INFORMAÇÃO

 PROJETANDO
 A EXPERIÊNCIA
 DO USUÁRIO                                                              Com André Silveira @energizador




2. NAVEGAÇÃO


O nosso segundo Elemento é a NAVEGAÇÃO, e eu posso navegar Estruturalmente, Associativamente e
Utilitariamente.


• Navegação Estrutural: é a que linca uma seção à outra dentro da hierarquia do site. Em qualquer página, o
  usuário tem que ser capaz de enxergar esse gráfico; Geralmente, existe a navegação Principal, que são os
  links essenciais/ estruturais do projeto e a navegação Local, que é derivada da Principal. Quase sempre
  vocês vão ver no formato de L-invertido (muito bom, pois permite scroll e você pode colocar vários links),
  Horizontal (que é melhor usar em projetos menores, pra que você não fique limitado quanto ao espaço
  lateral) ou Vertical Embutido (que é outra forma interessante, muito usada em sistemas operacionais,
  então bem amigável pro usuário;
• Navegação Associativa, é aquela que: conecta páginas com tópicos e conteúdos similares; Geralmente
  elas vão estar embutidas dentro dos textos ou, se quiser dar um destaque maior, botar como Links
  Relacionados na lateral ou embaixo do conteúdo. Isso vai resolver e vai ficar bom;
• E, Navegação Utilitária: que são links, são funções pra ajudar as pessoas no uso do sistema ou até mesmo
  fora da estrutura do site; são utilidades, são ferramentas pro usuário realizar coisas. São relevantes pro
  projeto, mas menos importantes que a Navegação Estrutural e, por isso, ela fica num nível menor ou com
  volume visual reduzido.



 Fazendo um anexo, em sincronia com a estrutura do site, existem Mecanismos Complementares de
 navegação. Eu diria que essa é a parte mais matemática da coisa, porque cada widget tem uma função
 determinada, apropriada àquela parte do projeto. Aqui. é bem ‘decoreba’ mesmo. O importante é que
 vocês apliquem uma Nuvem de Tags, um conjunto de Abas, ou um Menu Dropdown, onde isso funcionar
 melhor.




 (51) 3325-2596
                                                                                                         3
 www.targettrust.com.br
ARQUITETURA DE INFORMAÇÃO

 PROJETANDO
 A EXPERIÊNCIA
 DO USUÁRIO                                                                Com André Silveira @energizador




3. ROTULAÇÃO


E, por fim, temos a ROTULAÇÃO. O profissional de Arquitetura de Informação não é redator, não vai escrever
o texto, mas quando se trata da definição do nome, do rótulo do link e/ título (curto, objetivo, lógico pro
usuário) sem dúvida ele é o profissional ideal. Quando o internauta acessa um projeto:
É através dos rótulos (dessas nomenclaturas, dessas palavras-chave ou palavras-gatilho) que o cara vai
optar por um caminho ou outro; então, é sempre necessário fazer uma crítica aos nomes, pra evitar
problemas com vocabulário, com expressões que só dentro de uma empresa são conhecidas, termos
técnicos, entre outras coisas.


Alguns cuidados básicos:
• Títulos do navegador: tem que ser um nome claro, pro usuário ver na hora (esse espaço não é pra texto,
  como faz o GloboEsporte.com);
• URL amigável: também clara e relacionada ao nome da seção, pois isso vai mostrar o caminho pro
  usuário; também não deixa de ser um acesso direto quando ele sabe qual página vai acessar, sem falar
  na questão de SEO, onde a URL amigável ajuda muito;
• Nomes de links: traduzir exatamente o que vai ser feito, exatamente o que vai ser visto. Nada de enigmas;
• Títulos das páginas: Segue a ideia dos itens anteriores e é muito importante que vocês reorientem o
  usuário durante a navegação. Se eu cliquei no link “X”, é interessante que página me mostre que eu estou
  no lugar certo.


Então, esses são alguns fatores úteis: as nomenclaturas que são dadas aos registros; a forma criada pro
usuário navegar e como o conteúdo pode ser organizado em uma tela.




 (51) 3325-2596
                                                                                                             4
 www.targettrust.com.br

Weitere ähnliche Inhalte

Kürzlich hochgeladen

DIA DO INDIO - FLIPBOOK PARA IMPRIMIR.pdf
DIA DO INDIO - FLIPBOOK PARA IMPRIMIR.pdfDIA DO INDIO - FLIPBOOK PARA IMPRIMIR.pdf
DIA DO INDIO - FLIPBOOK PARA IMPRIMIR.pdfIedaGoethe
 
Simulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfSimulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfEditoraEnovus
 
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologiaAula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologiaaulasgege
 
UFCD_10392_Intervenção em populações de risco_índice .pdf
UFCD_10392_Intervenção em populações de risco_índice .pdfUFCD_10392_Intervenção em populações de risco_índice .pdf
UFCD_10392_Intervenção em populações de risco_índice .pdfManuais Formação
 
Apostila da CONQUISTA_ para o 6ANO_LP_UNI1.pptx
Apostila da CONQUISTA_ para o 6ANO_LP_UNI1.pptxApostila da CONQUISTA_ para o 6ANO_LP_UNI1.pptx
Apostila da CONQUISTA_ para o 6ANO_LP_UNI1.pptxIsabelaRafael2
 
HORA DO CONTO4_BECRE D. CARLOS I_2023_2024
HORA DO CONTO4_BECRE D. CARLOS I_2023_2024HORA DO CONTO4_BECRE D. CARLOS I_2023_2024
HORA DO CONTO4_BECRE D. CARLOS I_2023_2024Sandra Pratas
 
cartilha-pdi-plano-de-desenvolvimento-individual-do-estudante.pdf
cartilha-pdi-plano-de-desenvolvimento-individual-do-estudante.pdfcartilha-pdi-plano-de-desenvolvimento-individual-do-estudante.pdf
cartilha-pdi-plano-de-desenvolvimento-individual-do-estudante.pdfIedaGoethe
 
Aula 1, 2 Bacterias Características e Morfologia.pptx
Aula 1, 2  Bacterias Características e Morfologia.pptxAula 1, 2  Bacterias Características e Morfologia.pptx
Aula 1, 2 Bacterias Características e Morfologia.pptxpamelacastro71
 
HORA DO CONTO5_BECRE D. CARLOS I_2023_2024
HORA DO CONTO5_BECRE D. CARLOS I_2023_2024HORA DO CONTO5_BECRE D. CARLOS I_2023_2024
HORA DO CONTO5_BECRE D. CARLOS I_2023_2024Sandra Pratas
 
02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdfJorge Andrade
 
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Mary Alvarenga
 
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptxSlides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptxLuizHenriquedeAlmeid6
 
Educação São Paulo centro de mídias da SP
Educação São Paulo centro de mídias da SPEducação São Paulo centro de mídias da SP
Educação São Paulo centro de mídias da SPanandatss1
 
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASBCRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASBAline Santana
 
William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfAdrianaCunha84
 
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniModelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniCassio Meira Jr.
 
QUARTA - 1EM SOCIOLOGIA - Aprender a pesquisar.pptx
QUARTA - 1EM SOCIOLOGIA - Aprender a pesquisar.pptxQUARTA - 1EM SOCIOLOGIA - Aprender a pesquisar.pptx
QUARTA - 1EM SOCIOLOGIA - Aprender a pesquisar.pptxIsabellaGomes58
 
Habilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasHabilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasCassio Meira Jr.
 
Cultura e Sociedade - Texto de Apoio.pdf
Cultura e Sociedade - Texto de Apoio.pdfCultura e Sociedade - Texto de Apoio.pdf
Cultura e Sociedade - Texto de Apoio.pdfaulasgege
 

Kürzlich hochgeladen (20)

DIA DO INDIO - FLIPBOOK PARA IMPRIMIR.pdf
DIA DO INDIO - FLIPBOOK PARA IMPRIMIR.pdfDIA DO INDIO - FLIPBOOK PARA IMPRIMIR.pdf
DIA DO INDIO - FLIPBOOK PARA IMPRIMIR.pdf
 
XI OLIMPÍADAS DA LÍNGUA PORTUGUESA -
XI OLIMPÍADAS DA LÍNGUA PORTUGUESA      -XI OLIMPÍADAS DA LÍNGUA PORTUGUESA      -
XI OLIMPÍADAS DA LÍNGUA PORTUGUESA -
 
Simulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfSimulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdf
 
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologiaAula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
Aula - 1º Ano - Émile Durkheim - Um dos clássicos da sociologia
 
UFCD_10392_Intervenção em populações de risco_índice .pdf
UFCD_10392_Intervenção em populações de risco_índice .pdfUFCD_10392_Intervenção em populações de risco_índice .pdf
UFCD_10392_Intervenção em populações de risco_índice .pdf
 
Apostila da CONQUISTA_ para o 6ANO_LP_UNI1.pptx
Apostila da CONQUISTA_ para o 6ANO_LP_UNI1.pptxApostila da CONQUISTA_ para o 6ANO_LP_UNI1.pptx
Apostila da CONQUISTA_ para o 6ANO_LP_UNI1.pptx
 
HORA DO CONTO4_BECRE D. CARLOS I_2023_2024
HORA DO CONTO4_BECRE D. CARLOS I_2023_2024HORA DO CONTO4_BECRE D. CARLOS I_2023_2024
HORA DO CONTO4_BECRE D. CARLOS I_2023_2024
 
cartilha-pdi-plano-de-desenvolvimento-individual-do-estudante.pdf
cartilha-pdi-plano-de-desenvolvimento-individual-do-estudante.pdfcartilha-pdi-plano-de-desenvolvimento-individual-do-estudante.pdf
cartilha-pdi-plano-de-desenvolvimento-individual-do-estudante.pdf
 
Aula 1, 2 Bacterias Características e Morfologia.pptx
Aula 1, 2  Bacterias Características e Morfologia.pptxAula 1, 2  Bacterias Características e Morfologia.pptx
Aula 1, 2 Bacterias Características e Morfologia.pptx
 
HORA DO CONTO5_BECRE D. CARLOS I_2023_2024
HORA DO CONTO5_BECRE D. CARLOS I_2023_2024HORA DO CONTO5_BECRE D. CARLOS I_2023_2024
HORA DO CONTO5_BECRE D. CARLOS I_2023_2024
 
02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf
 
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
Grupo Tribalhista - Música Velha Infância (cruzadinha e caça palavras)
 
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptxSlides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
 
Educação São Paulo centro de mídias da SP
Educação São Paulo centro de mídias da SPEducação São Paulo centro de mídias da SP
Educação São Paulo centro de mídias da SP
 
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASBCRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
 
William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdf
 
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniModelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
 
QUARTA - 1EM SOCIOLOGIA - Aprender a pesquisar.pptx
QUARTA - 1EM SOCIOLOGIA - Aprender a pesquisar.pptxQUARTA - 1EM SOCIOLOGIA - Aprender a pesquisar.pptx
QUARTA - 1EM SOCIOLOGIA - Aprender a pesquisar.pptx
 
Habilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasHabilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e Específicas
 
Cultura e Sociedade - Texto de Apoio.pdf
Cultura e Sociedade - Texto de Apoio.pdfCultura e Sociedade - Texto de Apoio.pdf
Cultura e Sociedade - Texto de Apoio.pdf
 

Empfohlen

Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Empfohlen (20)

Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 

Elementos básicos do projeto de interface

  • 1. ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador Elementos básicos do projeto de interface Pra o entendimento sobre Arquitetura de Informação é fundamental conhecer os componentes básicos que englobam a navegação web. Também é importante se darem conta que esses Elementos podem e devem ser trabalhados de diferentes formas pra resolver os problemas do projeto. Vocês NÃO vão partir com uma regra ou receita pronta, mas sim projetar conforme o objetivo de negócio do cliente. 1. ORGANIZAÇÃO: Vamos começar com a ORGANIZAÇÃO: é o sistema que define regras pra classificar e ordenar as informações do projeto. Ela possui duas subdivisões: uma mais global, que se refere a Estrutura de Informação, e outra que se refere à parte de dentro desse conjunto, que são os Esquemas Organizacionais. A gente pode defini-los como facilitadores de acesso ao conteúdo pra que consigamos navegar entre blocos de dados. Na prática, a primeira coisa a fazer é pensar no todo, no conjunto, e depois pensar em Esquemas pra que o usuário consiga filtrar esses registros em partes e, aí sim, encontrar um determinado conteúdo de forma mais fácil. Esse é o objetivo, ok? Uma Estrutura de Informação pode ser: • Linear: quando as páginas são dispostas em sequência. Como exemplo: Etapas de um carrinho de compras num e-commerce ou aquelas fases (Experiência, Formação...) dentro de um formulário pra cadastro de currículo. Estes são bons exemplos de Estruturas Lineares; • Teias: são nós (são seções) ligadas sem níveis ou sequência. Pra entender melhor, são aqueles links e referências cruzadas, que não tem início ou fim. Tudo a ver com a navegação Associativa, é o mesmo conceito; • Hierárquicas: É uma estrutura em árvore, a mais utilizada pelos projetistas, justamente porque ela é clara. Vocês vão ver na hora o relacionamento “pai-filho”, “primeiro e segundo nível” ou “principal e local”. É bem fácil e é por isso que praticamente todos os sites têm, por menor que seja, alguma estrutura (51) 3325-2596 1 www.targettrust.com.br
  • 2. ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador hierárquica. Se vocês estruturarem um site de forma lógica e propuserem uma estrutura hierárquica, a chance de sucesso é grande; • Facetas: Diferente de uma estrutura ou de uma visão hierárquica, onde se chega num conteúdo daquela forma, as facetas dão uma alternativa, uma ideia mais global. Por exemplo, se eu vou descrever as propriedades de um tênis, eu posso dizer o Tipo, o Preço, a Marca, como categorias pertencentes àquele tênis. Mas, existem outros conceitos pra Facetas, que quase sempre a gente vai aplicar em sites maiores e eles realmente confundem um pouco. Eu prefiro resolver os problemas usando outras soluções; • Estruturas Emergentes: Essa é bem mais fácil, é uma estrutura que não é planejada e sim vai se criando, se auto-organizando. Isso porque os usuários editam, adicionam e vão excluindo conteúdo e isso vai alterando a interface, modificando aquela estrutura, como no antigo site da Wikipedia. Dentro da ORGANIZAÇÃO, o próximo ponto são os Esquemas Organizacionais, que podem ser: • Alfabéticos; • Cronológicos; • Geográficos; • Por Assunto; • Por Grupo de Audiência, ou; • Por Tarefa. Alguns exemplos: No site Almanaque Culinário, eu tenho uma série de receitas e posso filtrar esses registros pela letra de início. Se estamos procurando por “Bem Casado”, clico no B e encontro o meu conteúdo de uma forma bem rápida (é um Esquema Organizacional Alfabético); No site da Tecnisa, estou buscando um Imóvel, mas eu quero especificamente da cidade de São Paulo (é um Esquema Geográfico). (51) 3325-2596 2 www.targettrust.com.br
  • 3. ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador 2. NAVEGAÇÃO O nosso segundo Elemento é a NAVEGAÇÃO, e eu posso navegar Estruturalmente, Associativamente e Utilitariamente. • Navegação Estrutural: é a que linca uma seção à outra dentro da hierarquia do site. Em qualquer página, o usuário tem que ser capaz de enxergar esse gráfico; Geralmente, existe a navegação Principal, que são os links essenciais/ estruturais do projeto e a navegação Local, que é derivada da Principal. Quase sempre vocês vão ver no formato de L-invertido (muito bom, pois permite scroll e você pode colocar vários links), Horizontal (que é melhor usar em projetos menores, pra que você não fique limitado quanto ao espaço lateral) ou Vertical Embutido (que é outra forma interessante, muito usada em sistemas operacionais, então bem amigável pro usuário; • Navegação Associativa, é aquela que: conecta páginas com tópicos e conteúdos similares; Geralmente elas vão estar embutidas dentro dos textos ou, se quiser dar um destaque maior, botar como Links Relacionados na lateral ou embaixo do conteúdo. Isso vai resolver e vai ficar bom; • E, Navegação Utilitária: que são links, são funções pra ajudar as pessoas no uso do sistema ou até mesmo fora da estrutura do site; são utilidades, são ferramentas pro usuário realizar coisas. São relevantes pro projeto, mas menos importantes que a Navegação Estrutural e, por isso, ela fica num nível menor ou com volume visual reduzido. Fazendo um anexo, em sincronia com a estrutura do site, existem Mecanismos Complementares de navegação. Eu diria que essa é a parte mais matemática da coisa, porque cada widget tem uma função determinada, apropriada àquela parte do projeto. Aqui. é bem ‘decoreba’ mesmo. O importante é que vocês apliquem uma Nuvem de Tags, um conjunto de Abas, ou um Menu Dropdown, onde isso funcionar melhor. (51) 3325-2596 3 www.targettrust.com.br
  • 4. ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador 3. ROTULAÇÃO E, por fim, temos a ROTULAÇÃO. O profissional de Arquitetura de Informação não é redator, não vai escrever o texto, mas quando se trata da definição do nome, do rótulo do link e/ título (curto, objetivo, lógico pro usuário) sem dúvida ele é o profissional ideal. Quando o internauta acessa um projeto: É através dos rótulos (dessas nomenclaturas, dessas palavras-chave ou palavras-gatilho) que o cara vai optar por um caminho ou outro; então, é sempre necessário fazer uma crítica aos nomes, pra evitar problemas com vocabulário, com expressões que só dentro de uma empresa são conhecidas, termos técnicos, entre outras coisas. Alguns cuidados básicos: • Títulos do navegador: tem que ser um nome claro, pro usuário ver na hora (esse espaço não é pra texto, como faz o GloboEsporte.com); • URL amigável: também clara e relacionada ao nome da seção, pois isso vai mostrar o caminho pro usuário; também não deixa de ser um acesso direto quando ele sabe qual página vai acessar, sem falar na questão de SEO, onde a URL amigável ajuda muito; • Nomes de links: traduzir exatamente o que vai ser feito, exatamente o que vai ser visto. Nada de enigmas; • Títulos das páginas: Segue a ideia dos itens anteriores e é muito importante que vocês reorientem o usuário durante a navegação. Se eu cliquei no link “X”, é interessante que página me mostre que eu estou no lugar certo. Então, esses são alguns fatores úteis: as nomenclaturas que são dadas aos registros; a forma criada pro usuário navegar e como o conteúdo pode ser organizado em uma tela. (51) 3325-2596 4 www.targettrust.com.br