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

TIPOS DE CALOR CALOR LATENTE E CALOR SENSIVEL.pptx
TIPOS DE CALOR CALOR LATENTE E CALOR SENSIVEL.pptxTIPOS DE CALOR CALOR LATENTE E CALOR SENSIVEL.pptx
TIPOS DE CALOR CALOR LATENTE E CALOR SENSIVEL.pptxMarceloMonteiro213738
 
"Nós Propomos! Escola Secundária em Pedrógão Grande"
"Nós Propomos! Escola Secundária em Pedrógão Grande""Nós Propomos! Escola Secundária em Pedrógão Grande"
"Nós Propomos! Escola Secundária em Pedrógão Grande"Ilda Bicacro
 
Aula 5 - Fluxo de matéria e energia nos ecossistemas.ppt
Aula 5 - Fluxo de matéria e energia nos ecossistemas.pptAula 5 - Fluxo de matéria e energia nos ecossistemas.ppt
Aula 5 - Fluxo de matéria e energia nos ecossistemas.pptParticular
 
APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.HandersonFabio
 
análise obra Nós matamos o cão Tinhoso.pdf
análise obra Nós matamos o cão Tinhoso.pdfanálise obra Nós matamos o cão Tinhoso.pdf
análise obra Nós matamos o cão Tinhoso.pdfMaiteFerreira4
 
Livro infantil: A onda da raiva. pdf-crianças
Livro infantil: A onda da raiva. pdf-criançasLivro infantil: A onda da raiva. pdf-crianças
Livro infantil: A onda da raiva. pdf-criançasMonizeEvellin2
 
Nós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
Nós Propomos! Canil/Gatil na Sertã - Amigos dos AnimaisNós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
Nós Propomos! Canil/Gatil na Sertã - Amigos dos AnimaisIlda Bicacro
 
Meu corpo - Ruth Rocha e Anna Flora livro
Meu corpo - Ruth Rocha e Anna Flora livroMeu corpo - Ruth Rocha e Anna Flora livro
Meu corpo - Ruth Rocha e Anna Flora livroBrenda Fritz
 
prova do exame nacional Port. 2008 - 2ª fase - Criterios.pdf
prova do exame nacional Port. 2008 - 2ª fase - Criterios.pdfprova do exame nacional Port. 2008 - 2ª fase - Criterios.pdf
prova do exame nacional Port. 2008 - 2ª fase - Criterios.pdfssuser06ee57
 
Exercícios de Clima no brasil e no mundo.pdf
Exercícios de Clima no brasil e no mundo.pdfExercícios de Clima no brasil e no mundo.pdf
Exercícios de Clima no brasil e no mundo.pdfRILTONNOGUEIRADOSSAN
 
HISTORIA DA XILOGRAVURA A SUA IMPORTANCIA
HISTORIA DA XILOGRAVURA A SUA IMPORTANCIAHISTORIA DA XILOGRAVURA A SUA IMPORTANCIA
HISTORIA DA XILOGRAVURA A SUA IMPORTANCIAElianeAlves383563
 
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptxSlides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptxLuizHenriquedeAlmeid6
 
bem estar animal em proteção integrada componente animal
bem estar animal em proteção integrada componente animalbem estar animal em proteção integrada componente animal
bem estar animal em proteção integrada componente animalcarlamgalves5
 
Nós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º anoNós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º anoIlda Bicacro
 
Atividade do poema sobre mãe de mário quintana.pdf
Atividade do poema sobre mãe de mário quintana.pdfAtividade do poema sobre mãe de mário quintana.pdf
Atividade do poema sobre mãe de mário quintana.pdfmaria794949
 
O que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaO que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaCludiaRodrigues693635
 
Produção de poemas - Reciclar é preciso
Produção  de  poemas  -  Reciclar é precisoProdução  de  poemas  -  Reciclar é preciso
Produção de poemas - Reciclar é precisoMary Alvarenga
 
Unidade 4 (Texto poético) (Teste sem correção) (2).docx
Unidade 4 (Texto poético) (Teste sem correção) (2).docxUnidade 4 (Texto poético) (Teste sem correção) (2).docx
Unidade 4 (Texto poético) (Teste sem correção) (2).docxRaquelMartins389880
 
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptxEBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptxIlda Bicacro
 

Último (20)

TIPOS DE CALOR CALOR LATENTE E CALOR SENSIVEL.pptx
TIPOS DE CALOR CALOR LATENTE E CALOR SENSIVEL.pptxTIPOS DE CALOR CALOR LATENTE E CALOR SENSIVEL.pptx
TIPOS DE CALOR CALOR LATENTE E CALOR SENSIVEL.pptx
 
"Nós Propomos! Escola Secundária em Pedrógão Grande"
"Nós Propomos! Escola Secundária em Pedrógão Grande""Nós Propomos! Escola Secundária em Pedrógão Grande"
"Nós Propomos! Escola Secundária em Pedrógão Grande"
 
Aula 5 - Fluxo de matéria e energia nos ecossistemas.ppt
Aula 5 - Fluxo de matéria e energia nos ecossistemas.pptAula 5 - Fluxo de matéria e energia nos ecossistemas.ppt
Aula 5 - Fluxo de matéria e energia nos ecossistemas.ppt
 
APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.
 
análise obra Nós matamos o cão Tinhoso.pdf
análise obra Nós matamos o cão Tinhoso.pdfanálise obra Nós matamos o cão Tinhoso.pdf
análise obra Nós matamos o cão Tinhoso.pdf
 
Enunciado_da_Avaliacao_1__Sistemas_de_Informacoes_Gerenciais_(IL60106).pdf
Enunciado_da_Avaliacao_1__Sistemas_de_Informacoes_Gerenciais_(IL60106).pdfEnunciado_da_Avaliacao_1__Sistemas_de_Informacoes_Gerenciais_(IL60106).pdf
Enunciado_da_Avaliacao_1__Sistemas_de_Informacoes_Gerenciais_(IL60106).pdf
 
Livro infantil: A onda da raiva. pdf-crianças
Livro infantil: A onda da raiva. pdf-criançasLivro infantil: A onda da raiva. pdf-crianças
Livro infantil: A onda da raiva. pdf-crianças
 
Nós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
Nós Propomos! Canil/Gatil na Sertã - Amigos dos AnimaisNós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
Nós Propomos! Canil/Gatil na Sertã - Amigos dos Animais
 
Meu corpo - Ruth Rocha e Anna Flora livro
Meu corpo - Ruth Rocha e Anna Flora livroMeu corpo - Ruth Rocha e Anna Flora livro
Meu corpo - Ruth Rocha e Anna Flora livro
 
prova do exame nacional Port. 2008 - 2ª fase - Criterios.pdf
prova do exame nacional Port. 2008 - 2ª fase - Criterios.pdfprova do exame nacional Port. 2008 - 2ª fase - Criterios.pdf
prova do exame nacional Port. 2008 - 2ª fase - Criterios.pdf
 
Exercícios de Clima no brasil e no mundo.pdf
Exercícios de Clima no brasil e no mundo.pdfExercícios de Clima no brasil e no mundo.pdf
Exercícios de Clima no brasil e no mundo.pdf
 
HISTORIA DA XILOGRAVURA A SUA IMPORTANCIA
HISTORIA DA XILOGRAVURA A SUA IMPORTANCIAHISTORIA DA XILOGRAVURA A SUA IMPORTANCIA
HISTORIA DA XILOGRAVURA A SUA IMPORTANCIA
 
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptxSlides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
 
bem estar animal em proteção integrada componente animal
bem estar animal em proteção integrada componente animalbem estar animal em proteção integrada componente animal
bem estar animal em proteção integrada componente animal
 
Nós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º anoNós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º ano
 
Atividade do poema sobre mãe de mário quintana.pdf
Atividade do poema sobre mãe de mário quintana.pdfAtividade do poema sobre mãe de mário quintana.pdf
Atividade do poema sobre mãe de mário quintana.pdf
 
O que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaO que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditiva
 
Produção de poemas - Reciclar é preciso
Produção  de  poemas  -  Reciclar é precisoProdução  de  poemas  -  Reciclar é preciso
Produção de poemas - Reciclar é preciso
 
Unidade 4 (Texto poético) (Teste sem correção) (2).docx
Unidade 4 (Texto poético) (Teste sem correção) (2).docxUnidade 4 (Texto poético) (Teste sem correção) (2).docx
Unidade 4 (Texto poético) (Teste sem correção) (2).docx
 
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptxEBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
EBPAL_Serta_Caminhos do Lixo final 9ºD (1).pptx
 

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