DESIGN DE INTERFACE

Introdução
 O foco no design de interface é na experiência do
usuário e interação.

 Um bom design de interface é funcional e facilita a
conclusão das tarefas pelo usuário.

 O processo de design deve equilibrar funcionalidade
técnica e elementos visuais para criar um sistema
que não é apenas operacional, mas também útil e
adaptável para alterar as necessidades do usuário.

Introdução
 Como todo trabalho de design, ele é um projeto, e
necessita uma análise informacional, a partir de um
briefing. Detectar corretamente o objetivo do projeto é
essencial para um bom planejamento, de modo que as
ações sejam tomadas de forma correta.

 É sempre necessário definir o público alvo do site, o
objetivo, os serviços oferecidos, o diferencial para o
público. A partir dessas e de outras informações
relevantes ao projeto e do conteúdo, será definida a
arquitetura da informação, a estrutura de navegação e o
layout.

Introdução
 Uma vez que esteja claramente definida a arquitetura da
informação, a estrutura de navegação e o layout, você
pode então começar a organizar o seu futuro site em
páginas de conteúdo com foco na funcionalidade e
usabilidade para facilitar a interação e a comunicação.

 Então, o processo de design segue utilizando os
softwares gráficos para definir a diagramação da tela,
definindo o layout em subáreas e a disposição dos
elementos visuais verbais (tipografia) e não verbais
(imagens).

Arquitetura da Informação
 A Arquitetura da Informação consiste no design de
ambientes informacionais compartilhados e é a base para um
excelente Web Design. É a planta de um site, sobre a qual
todos os outros aspectos são construídos - função, metáfora,
navegação, layout, interação e comunicação visual.

 O termo arquitetura da informação descreve um conjunto de
habilidades especializadas que se relaciona à interpretação
da informação e expressão de distinções entre signos e
sistemas de signos. Há algum grau de origem na
biblioteconomia. Muitas escolas com biblioteca e
departamentos de ciência da informação ensinam
arquitetura da informação.

Arquitetura da Informação
 A arquitetura da informação é a categorização da informação
em uma estrutura coerente, preferencialmente aquela que a
maioria das pessoas possa compreender rapidamente.
Geralmente é hierárquica, mas pode ter outras estruturas,
como concêntrica ou até mesmo caótica. Ela está totalmente
relacionada com a filosofia e a semiótica.

 No contexto do projeto de sistemas de informação, a
arquitetura da informação refere-se à análise e ao design dos
dados armazenados pelos mesmos, concentrando sobre as
entidades seus atributos e relacionamentos.

Arquitetura de Informação
Segundo Peter Morville e Louis Rosenfeld ,

“a arquitetura da informação é a arte e a ciência de
organizar a informação para ajudar as pessoas a
satisfazer suas necessidades de informação de
forma efetiva (…) o que implica organizar, navegar,
marcar e buscar mecanismos nos sistemas de
informação.”

Ou seja, a usabilidade começa com aqui! A usabilidade é,
praticamente, garantida se a arquitetura da informação for bem
planejada.

A arquitetura da informação tem como objetivos
(Garret, 2003):
 Prover as condições para o usuário chegar de um
ponto a outro, levando em conta diferentes modos
de chegar às informações.
 Comunicar as relações entre os elementos, levando
em conta desde o contexto geral de informações
quanto as suas unidades.
 Comunicar as relações entre o conteúdo geral e a
página que o usuário está vendo.

A concepção de caminhos para o usuário chegar a informações específicas se
baseia em modelos conceituais como:
 A aderência das informações e do conteúdo aos objetivos do site.
 A aderência ao enfoque conceitual e editorial, que inclui o planejamento
da experiência do usuário e do modo como as informações estabelecem
processos de comunicação/ interlocução/ reação.
 A antecipação dos modelos mentais do usuário, padrões de conduta em
relação às informações, dispositivos, recursos tecnológicos, circunstâncias
de acesso (na rua, no escritório em casa em viagem).
 Relação adequada entre a extensão e a profundidade das áreas de
informação.
 Modo como as informações fluem de dentro de uma organização para o
público externo, de modo a valorizar mais ou menos as informações
internas.

A organização do conteúdo e dos dados online deve prevê aspectos como:
 O modo como as informações fluem do público externo para uma
organização.
 O modo como as informações fluem dentro de uma organização para o
público interno (especialmente no caso das intranets).
 O modo como as informações fluem independentemente da organização
(na sociedade em geral ou em grupos, comunidades, culturas geográficas
específicas).

Como planejar tudo
isso na prática?

Defina os objetivos do site
 O primeiro passo o planejamento da arquitetura da informação é definir
os objetivos do site.

 Não basta ter um site porque todo mundo tem um, pois, ao invés de
contribuir para melhorar a imagem de uma empresa ou pessoa, o
resultado pode ser contrário e devastador.

Então, se você não sabe o que está tentando alcançar, por que
se arriscar ou se ocupar construindo um site?

 Definir os objetivos de um site estabelece uma ideia clara e bem
documentada do que você irá fazer, e assegura o sucesso e retorno
esperado. Importante! O consenso do grupo que está desenvolvendo o
site pode fazer o projeto acontecer ou parar. Por isso, trabalhar com
metodologias é fundamental!

Defina o papel de cada pessoa do grupo
 Determinar as pessoas que estarão envolvidas no
projeto, bem como a função de cada uma delas é
fundamental.

 É importante que estas pessoas estejam se
comunicando umas com as outras. É importante,
também, que uma pessoa seja responsável pelo
gerenciamento do projeto, mas sem atitudes de
“controle absoluto” do processo. É necessário saber
liderar, de forma que o trabalho seja executado de
forma organizada e respeitando o cronograma definido.

Faça perguntas
Quando estiver reunido com o cliente para definição do
briefing, ou na fase de levantamento de dados, quatro
questões são de extrema importância para o projeto:

 Qual é a missão e o propósito da organização?

 Quais são os objetivos de curto a longo prazo do site?

 Qual é o público-alvo?

 Por que as pessoas irão visitar o site?

Transforme as respostas em metas
Nesta etapa você deve ter vários dados que precisam ser
filtrados e organizados para transformar em metas (e mini
metas). Desta forma, é importante que:

 agrupe suas metas em categorias;
 classifique a ordem de importância
 certifique-se de que seu cliente concorda e assina
embaixo os objetivos/metas do site.

Defina o público-alvo
Algumas pessoas pensam que o público-alvo é definido
pela tecnologia que usam para acessar o site. Porém, este é
apenas um quesito para definição do público-alvo. Para
definir o público-alvo você precisa de informações como:
faixa etária, gênero, nível educacional, tamanho da família,
renda e localização geográfica.

Atenção! Se o objetivo é atingir/atrair outras empresas
você precisa detalhar o tipo de empresa, tamanho, cargos,
funções, estimativa de receita, áreas geográficas de
atuação, etc.

Defina a experiência do usuário
 Definir de antemão a experiência que você quer que o
usuário tenha facilita a definição da estrutura de
navegação, maximiza o alcance aos objetivos/metas, e
garante uma boa usabilidade da interface.

 Criar cenários, ou histórias, facilitam a previsão e
visualização do site e da experiência do usuário.

Crie cenários e histórias
 Selecione um conjunto de usuários que represente a
maioria dos visitantes.

 Para cada usuário, crie um personagem, um cenário, e
defina uma tarefa a ser realizada no site (use uma tarefa
da sua lista de necessidades e metas).

 Então tente escrever uma história sobre como o
personagem utiliza o site para completar a tarefa
escolhida.

Analise os similares
 Conhecer a concorrência ajuda a enxergar o projeto que será
desenvolvido.
 Faça uma pesquisa de empresas/sites com produtos/serviços/conteúdos
similares.
 Defina características e critérios a serem avaliados. Organizar as
informações em uma planilha ajuda a visualizar e avaliar os pontos
positivos e negativos dos similares.

Identifique o conteúdo e os requisitos funcionais
 Use a lista de objetivos, as necessidades do público, e sua análise
competitiva e crie outras duas listas: uma de componentes de conteúdo e
outra de requisitos funcionais para o site.
 Defina um “inventário de conteúdo” classificando as
informações/recursos por tipo de conteúdo : estático, dinâmico,
funcional e transacional.
 exemplos de conteúdo estático: copyright, política de privacidade,
e regras de participação.
 exemplos de conteúdo dinâmico: hiperlinks, tags, rss.
 exemplos de conteúdo funcional: menus, botões (entrar, limpar,
cancelar, etc).
 exemplos de conteúdo transacional: login de membros,
formulários, downloads, uploads, compras.

Agrupe e Rotule o Conteúdo

 Organize o conteúdo. Comece criando um índice, escrevendo
cada componente do inventário. Agrupe os componentes por
assuntos/funções e defina um nome para cada grupo.

 Com base nos grupos, defina as seções do site, e defina a
base para a estrutura de navegação.

Estrutura de Navegação
Na Web as pessoas ficam totalmente perdidas porque
não há senso de direção, de proporção e de
localização. Por isso, a hierarquia do site é tão
importante. A navegação precisa ajudar o usuário a
encontrar o que procura e dizer-lhe onde está. Além
disso, ela diz o que o site contém, como usá-lo e faz
com que os visitantes confiem nas pessoas que o
construíram.

A estrutura de navegação de um web site é organizada
para que cada visitante possa compreendê-la com
rapidez e se desloque facilmente entre páginas e
seções. Quanto mais rapidamente o visitante construir
um modelo mental de resposta a esta estrutura, mais
fácil será o seu deslocamento.

1. Que site é este? (identificação do site)
2. Em que página estou? (nome da página)
3. Quais são as seções principais deste site? (seções)
4. Quais são minhas opções neste nível? (navegação local)
5. Onde estou no esquema das coisas? (indicadores “Você está
aqui”)
6. Como posso procurar?
(KRUG, 2001:87)

Home page ou Página principal
É recomendável que a página principal tenha um layout diferente das demais
páginas, bem estruturado e com caminhos para as informações mais
relevantes do site. Desta forma, a página principal deve:
 identificar claramente a localização do usuário e a atividade/conteúdo
mais importante do site e o que este pode oferecer;
 oferecer suporte aos usuários para encontrar o que procuram;
 ser permanentemente atualizada e identificar o conteúdo renovado;
 Marcar a localização do usuário;
 ter mais área para a navegação do que para conteúdo;
 Informar os assuntos de maneira concisa e direta;
 ser dividida em diferentes seções de acordo com os objetivos estratégicos
da marca e com a estrutura de informações;
 uma seção ou menu com links para as áreas mais acessadas pelos
usuários.

Páginas internas
Para facilitar a navegação e a realização de tarefas nas páginas internas é
recomendável:
 apresentar em destaque o nome da página Principal, de preferência no
canto superior esquerdo;
 mostrar a marca da empresa ou organização em local bem visível, ligado à
página principal;
 manter o mesmo estilo e identidade visual em todas as páginas;
 manter o foco em aspectos mais específicos;
 localizar o usuário em relação ao resto do site;
 manter as informações estruturais de navegação, sempre em locais de
fácil acesso e visualização.

Links
Os links permitem que o usuário se desloque de uma página para outra
localizada em diferente URL (Uniform Resource Locator), que pode ser
relativo ao mesmo ou a outro site, através de uma estrutura hipertextual de
informações. Links devem ser sinalizados claramente e sua funcionalidade
ficar aparente na página, e para tanto:
 normalmente são associados a textos sublinhados;
 devem ter cores ligeiramente diferentes dos demais textos;
Tipos de links:
 Links incluídos num texto (ex: hiperlinks)
 Links estruturais (ex: menus, barra de navegação)
 Links tipo “saiba mais“
 Links de suporte à navegação (ex: voltar, avançar)
 Links em mapas de imagens

Componentes da interface web
 Área de conteúdo  Ferramentas de busca (interna)
 Área restrita  Formulários
 Atalhos  Links (internos e externos)
 Banners  Mapa do site
 Barra de localização (breadcrumbs)  Marca
 Barra de navegação  Menus
 Barra de rolagem  Tags
 Calendário  Título da página

Tipos de estrutura de navegação
Linear ou sequencial
Hierárquica ou arborescente
Matricial ou em grade
Híbrida
Personalizada
Participativa
"Caótica" ou em teia
Cross-media (mídias cruzadas)
Cross-channel (ou transchannel, canais cruzados)
Multi-channel (multi-canais)

Linear ou sequencial
Define o deslocamento de página a página com botões tipo
"Próxima página" e "Página anterior". O processo de compras
em um site de comércio, por exemplo, segue uma ordem que
vai desde a identificação do usuário e dos produtos que quer
comprar até a confirmação da compra. O início e o final são
previsíveis dentro da lógica que os encadeia.

Hierárquica ou arborescente
Liga tópicos genéricos a tópicos mais específicos, com base na
construção de uma taxonomia. As informações podem se
estruturar de alto para baixo como os ramos de uma árvore ou
de baixo para cima, segundo a estrutura de um banco de dados
hospedado num servidor, que atende às solicitações dos
usuários.
A estrutura hierárquica pode apresentar diversas estruturas
dominantes, com subordinações para cada uma delas e neste
caso se configurar como uma estrutura Poli-hierárquica.

Matricial ou em grade
Neste caso, a estrutura não é hierarquizada e segue um modelo
horizontal, porém o deslocamento entre páginas não é
necessariamente linear.
Os "Links relacionados" (ou "Veja também") que unem diversas
páginas de um mesmo site segundo algumas afinidades
temáticas entre informações podem estabelecer uma estrutura
matricial.

Híbrida
Tópicos genéricos se ligam a tópicos mais específicos, ou vice-
versa, de acordo com conteúdo gerado dinamicamente pelo
usuário.
Diversos critérios de organização, entre horizontais e verticais,
se combinam para criar uma experiência de uso integrada.

Personalizada
O usuário define as informações que quer receber ou as
ferramentas do próprio site rastreiam o percurso que o usuário
percorreu durante uma visita e selecionam o conteúdo de sua
preferência (normalmente o mais acessado).

Participativa
Estruturada em torno das ações dos usuários e dos objetos
sociais criados ou modificados durante estas ações.

"Caótica" ou em teia
Não apresenta uma ordem aparente, é uma estrutura de certa
forma randômica. Os percursos são definidos pelos usuários que
se deslocam de acordo com os seus interesses, seguindo
hiperlinks que encontram nas páginas, ou ordenações baseadas
nas características das próprias informações. É a forma de
estrutura que oferece mais risco de desorientação, no entanto
permite o cruzamento total e irrestrito de informações, pois não
está condicionada a nenhum modelo pré-definido.

Cross-media (mídias cruzadas)
Segue os encadeamentos de um ambiente amplo de
informações, composto por um conjunto de ambientes mais
restritos, mídias e canais interligados, que se complementam e
dependem um do outro para compor uma experiência de uso ou
completar uma ideia ou tarefa. Considera a experiência de
acesso e uso fragmentada ou parcial em cada um, sendo que
nenhum produto em si provê a experiência completa.
O cadastro de um email para receber uma mala direta é uma
experiência cross-mídia quando há o envio de mensagem para a
caixa postal do assinante e este precisa clicar num link para
confirmar o cadastro. O cadastro não é finalizado caso não haja
confirmação.

Cross-channel / transchannel /canais cruzados)
Considera uma estrutura de informações de canais cruzados,
composta por elementos dispersos de maneira estruturada
(criação, publicação, ação, relacionamento, recriação). O
conjunto dos elementos individuais, cada um contribuindo à sua
maneira, compõe uma experiência integrada, entre canais.
Um único canal pode ou não prover uma porta de entrada ao
ambiente, e a maioria dos usuários não percorre todos os seus
pontos de contato do início ao fim. Alguns canais permitem que
os usuários completem a sua experiência sem precisar de
outros.

Multi-channel (multi-canais)
Oferta de serviços ou experiências da mesma natureza que
podem ser acessados ou usados a partir de inúmeros canais. Os
usuários acessam um ou outro e podem realizar a mesma tarefa
ou acessar a mesma informação completa.
Ou seja, um correntista de um banco acessa a sua conta através
do web site e obtém o seu extrato, mas pode fazê-lo também
num caixa eletrônico, pelo seu celular, ou pelo caixa do banco. A
realização destas tarefas inteiras independe do acesso a outros
canais complementares, como o recebimento de mala direta
postal ou o recebimento de mensagens telefônicas.

Layout
O layout precisa transmitir a informação desejada com
eficiência. É preciso que o layout seja um elo de
comunicação com o usuário, que sua linguagem seja
condizente com o objetivo do site.

Cada elemento inserido em um website deve ter um
objetivo, a perfeição de um website se atinge quando
não há nada a ser retirado e não quando não há nada
mais a ser inserido.

Layout
Será necessário definir blocos de
espaço para a navegação global e
local, e integrar os demais elementos
do site que podem não fazer parte da
estrutura de navegação. Publicidade e
chamadas de patrocínio devem ser
incorporadas ao design.

Primeiro deve ser definido o layout da
página principal, e, com base neste,
deve ser definido o layout padrão das
páginas internas. Dependendo do
projeto, será necessário criar layouts
específicos para algumas páginas.

Design do layout
 Utilizando um programa gráfico, crie um arquivo
com as dimensões do seu site.
 Crie um retângulo representando a página, e
delineie blocos para os elementos visuais e
conteúdos do seu design.
 Outros elementos precisam ser considerados:
branding (marca, logotipo, slogan), publicidade e
patrocínio, navegação, títulos da página, gráficos do
cabeçalho, e rodapés (incluindo copyright).
 Experimente dois ou três layouts com estilos
diferentes

Esboços/modelos do site
 Esboços/modelos são usados para estabelecer o
visual e o estilo do site.

 É necessário saber o tamanho dos arquivos gráficos,
bem como quaisquer outras restrições técnicas, e
representar o site de fato.

 Os modelos precisam ser o mais parecidos possível
com as páginas reais do site. Use seu programa
gráfico favorito para manipular os esboços.

Introdução
Usabilidade é o conceito utilizado para A usabilidade é relacionada à eficácia e
descrever a qualidade da interação de uma eficiência da interface diante do usuário e
interface diante de seus usuários, e está pela reação do usuário diante da interface.
relacionada aos estudos de Ergonomia e de
Interação Humano-Computador (IHC).
Segundo os standards ISO
Esta qualidade está associada de acordo com 9241-11 (Guidance on Usability,
os seguintes princípios: 1998), usabilidade é a
 facilidade de aprendizado; amplitude de uso de
 facilidade de memorização de tarefas no determinado produto por seus
caso de uso intermitente;
usuários, de modo que possam
 produtividade dos usuários na execução de
tarefas; realizar tarefas de maneira
 prevenção, visando a redução de erros por efetiva, eficiente e satisfatória
parte do usuário; num contexto definido.
 satisfação subjetiva do usuário.

Antecipação da experiência
Deve-se considerar alguns fatores para facilitar a antecipação da experiência
de uso:
 Prover baixo tempo de download para a interface e imediata percepção de
valor aos usuários;
 Oferecer suporte à navegação e ao uso, por meio de mensagens claras e
objetivas;
 Facilitar o aprendizado de uso, de modo que o usuário possa usar o site
sem precisar de aprendizado formal;
 Informar o usuário as tarefas a realizar;
 Permitir a reversibilidade das ações, para que o usuário possa explorar o
site e, caso "erre o caminho" ou desista de uma tarefa, volte à etapa inicial;
 Incluir pequenos resumos próximos aos links;
 Incluir "Links relacionados“.

Importante!
 Autonomia orientada – para que o usuário tenha controle sobre sua ação
num site ou plataforma online, um ambiente adequado de uso facilita a
navegação e a realização de tarefas sem necessidade de apoio ou suporte.

 Antecipação da experiência – quando o usuário aprende facilmente a
estrutura de informações e as funcionalidades disponíveis, sabe o que vai
encontrar antes de selecionar o conteúdo de um site, bem como antes de
usar uma ferramenta.

 Consistência funcional e de produtividade – os usuários memorizam
facilmente os modelos aplicados e os aplicativos respondem à mesma ação
aprendida pelos usuários com os mesmos resultados, em qualquer
momento, em qualquer tela, com poucos erros e mal-entendidos.

Benefícios para o usuário
 Autonomia do usuário, que se sente no controle das
suas ações e das suas impressões subjetivas.

 Satisfação do usuário com a experiência de uso e com
o veículo de modo geral, em decorrência do controle e
da percepção crítica das ações.

Consistência funcional e de produtividade
Consistência em interfaces web se refere à homogeneidade e à coerência de
situações que devem ser tratadas, apresentadas ou acionadas de maneira
semelhante. Antecipando as respostas do sistema, interfaces consistentes
facilitam o aprendizado e aumentam a produtividade dos usuários, que
cometem menos erros e controlam melhor suas ações.
 Coordenação entre a funcionalidade da interface e o comportamento do
usuário;
 Provimento de respostas claras e imediatas;
 Invisibilidade do conceito aplicado na estrutura de navegação;
 Visibilidade informativa;
 Layout e funcionalidades do programa previsíveis de acordo com modelos
pré-definidos;
 Posicionamento dos elementos de acordo com convenções já aceitas pelo
senso comum;
 Consistência terminológica.

Fatores a considerar
 Quando o uso é sujeito a erros frequentes, colocar condicionantes que forcem a
adaptação dos usuários para que a tarefa seja realizada corretamente.
 Grau de familiaridade do usuário médio do site com o uso da internet e suas
ferramentas.
 Adaptação da interface às condições físicas ou de acesso do usuário.
 Uso de convenções já aceitas em grandes sites e portais, que facilita a localização de
informações.
 Clareza da localização das páginas de abertura das seções principais em relação à
página Principal.
 Orientação visual dos percursos a seguir, dos caminhos percorridos e pontos de
chegada.
 Sinalização visual dos pontos onde os usuários devem permanecer mais tempo.
 Sinalização do status de uma tarefa durante a sua realização.
 Manutenção da continuidade da ação entre etapas.
 Possibilidade de opção sobre a instalação de plug-ins e programas no computador
ou no browser do usuário para a visualização de imagens e animações.

DESIGN DE INTERFACE

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a DESIGN DE INTERFACE

Mais de Andrea Dalforno

DESIGN DE INTERFACE