Elementos básicos do projeto de interface

4

Click here to load reader

description

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.

Transcript of Elementos básicos do projeto de interface

Page 1: Elementos básicos do projeto de interface

Elementos básicos do projeto de interfacePra 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

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br1

Page 2: Elementos básicos do projeto de interface

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).

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br2

Page 3: Elementos básicos do projeto de interface

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.

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br3

Page 4: Elementos básicos do projeto de interface

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.

ARQUITETURA DE INFORMAÇÃO

PROJETANDO

A EXPERIÊNCIA

DO USUÁRIO Com André Silveira @energizador

(51) 3325-2596

www.targettrust.com.br4