Elementos básicos do projeto de interface

1,473 views
1,322 views

Published on

Componentes básicos que englobam a navegação web: 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.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,473
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Elementos básicos do projeto de interface

  1. 1. ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizadorElementos básicos do projeto deinterfacePra o entendimento sobre Arquitetura de Informação é fundamental conhecer os componentes básicos queenglobam a navegação web. Também é importante se darem conta que esses Elementos podem e devemser trabalhados de diferentes formas pra resolver os problemas do projeto. Vocês NÃO vão partir com umaregra 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 asinformações do projeto. Ela possui duas subdivisões: uma mais global, que se refere a Estrutura deInformaçã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 blocosde dados. Na prática, a primeira coisa a fazer é pensar no todo, no conjunto, e depois pensar em Esquemaspra que o usuário consiga filtrar esses registros em partes e, aí sim, encontrar um determinado conteúdo deforma 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. 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 deinício. Se estamos procurando por “Bem Casado”, clico no B e encontro o meu conteúdo de uma forma bemrá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 (é umEsquema Geográfico). (51) 3325-2596 2 www.targettrust.com.br
  3. 3. ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador2. NAVEGAÇÃOO nosso segundo Elemento é a NAVEGAÇÃO, e eu posso navegar Estruturalmente, Associativamente eUtilitariamente.• 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. 4. ARQUITETURA DE INFORMAÇÃO PROJETANDO A EXPERIÊNCIA DO USUÁRIO Com André Silveira @energizador3. ROTULAÇÃOE, por fim, temos a ROTULAÇÃO. O profissional de Arquitetura de Informação não é redator, não vai escrevero texto, mas quando se trata da definição do nome, do rótulo do link e/ título (curto, objetivo, lógico prousuá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 vaioptar por um caminho ou outro; então, é sempre necessário fazer uma crítica aos nomes, pra evitarproblemas com vocabulário, com expressões que só dentro de uma empresa são conhecidas, termosté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 prousuário navegar e como o conteúdo pode ser organizado em uma tela. (51) 3325-2596 4 www.targettrust.com.br

×