SlideShare uma empresa Scribd logo
1 de 4
Baixar para ler offline
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

Mais conteúdo relacionado

Último

Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividadeMary Alvarenga
 
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
 
Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.keislayyovera123
 
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -Aline Santana
 
Orações subordinadas substantivas (andamento).pptx
Orações subordinadas substantivas (andamento).pptxOrações subordinadas substantivas (andamento).pptx
Orações subordinadas substantivas (andamento).pptxKtiaOliveira68
 
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptxATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptxOsnilReis1
 
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumGÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumAugusto Costa
 
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERDeiciane Chaves
 
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptxSlides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptxLuizHenriquedeAlmeid6
 
A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.silves15
 
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
 
Simulado 2 Etapa - 2024 Proximo Passo.pdf
Simulado 2 Etapa  - 2024 Proximo Passo.pdfSimulado 2 Etapa  - 2024 Proximo Passo.pdf
Simulado 2 Etapa - 2024 Proximo Passo.pdfEditoraEnovus
 
Bullying - Texto e cruzadinha
Bullying        -     Texto e cruzadinhaBullying        -     Texto e cruzadinha
Bullying - Texto e cruzadinhaMary Alvarenga
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresLilianPiola
 
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMCOMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMVanessaCavalcante37
 
“Sobrou pra mim” - Conto de Ruth Rocha.pptx
“Sobrou pra mim” - Conto de Ruth Rocha.pptx“Sobrou pra mim” - Conto de Ruth Rocha.pptx
“Sobrou pra mim” - Conto de Ruth Rocha.pptxthaisamaral9365923
 
Governo Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 BrasilGoverno Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 Brasillucasp132400
 
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃOLEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃOColégio Santa Teresinha
 
Gerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalGerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalJacqueline Cerqueira
 

Último (20)

Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividade
 
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
 
Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.
 
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
 
Orações subordinadas substantivas (andamento).pptx
Orações subordinadas substantivas (andamento).pptxOrações subordinadas substantivas (andamento).pptx
Orações subordinadas substantivas (andamento).pptx
 
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptxATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
ATIVIDADE AVALIATIVA VOZES VERBAIS 7º ano.pptx
 
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumGÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
 
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
 
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptxSlides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
Slides Lição 4, Betel, Ordenança quanto à contribuição financeira, 2Tr24.pptx
 
A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.
 
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)
 
Simulado 2 Etapa - 2024 Proximo Passo.pdf
Simulado 2 Etapa  - 2024 Proximo Passo.pdfSimulado 2 Etapa  - 2024 Proximo Passo.pdf
Simulado 2 Etapa - 2024 Proximo Passo.pdf
 
Bullying - Texto e cruzadinha
Bullying        -     Texto e cruzadinhaBullying        -     Texto e cruzadinha
Bullying - Texto e cruzadinha
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
 
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEMCOMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
COMPETÊNCIA 1 DA REDAÇÃO DO ENEM - REDAÇÃO ENEM
 
“Sobrou pra mim” - Conto de Ruth Rocha.pptx
“Sobrou pra mim” - Conto de Ruth Rocha.pptx“Sobrou pra mim” - Conto de Ruth Rocha.pptx
“Sobrou pra mim” - Conto de Ruth Rocha.pptx
 
Governo Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 BrasilGoverno Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 Brasil
 
CINEMATICA DE LOS MATERIALES Y PARTICULA
CINEMATICA DE LOS MATERIALES Y PARTICULACINEMATICA DE LOS MATERIALES Y PARTICULA
CINEMATICA DE LOS MATERIALES Y PARTICULA
 
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃOLEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
LEMBRANDO A MORTE E CELEBRANDO A RESSUREIÇÃO
 
Gerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalGerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem Organizacional
 

Destaque

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
 

Destaque (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