WEB DESIGN

AULA 5

Prof. Matias Peruyera

 CONVERSA INICIAL

Nesta aula, abordaremos algumas questões relacionadas ao processo de

produção de um site. É importante não considerar apenas a parte técnica, mas
também entender os processos e o porquê de o trabalho ser dividido dessa
maneira. Nesta aula vamos, então, ver os seguintes temas:

• Planos da experiência do usuário

• Heurísticas de Nielsen
• Plano da estrutura
• Plano do esqueleto
• Plano da superfície

CONTEXTUALIZANDO

A complexidade de um produto digital exige um planejamento diferente do

de outros produtos. Há funcionalidades que precisam ser planejadas desde o
começo, há decisões importantes que precisam ser tomadas no momento certo,
há uma ordem para evitar atrasos e custos desnecessários. Para considerar
esses processos, consideramos a divisão do processo feita por Jesse James
Garrett e focamos nas partes mais próximas ao web design. Isso permitirá que
você tenha uma visão mais holística do processo, entenda quais diferentes
habilidades e técnicas são necessárias em cada etapa e como a usabilidade
deve ser considerada durante todo o trabalho.

TEMA 1 – PLANOS DA EXPERIÊNCIA DO USUÁRIO

Jesse James Garrett, em seu livro The Elements of User Experience

(2011), divide as decisões tomadas durante o desenvolvimento de sites – e
também de outros produtos digitais – em cinco “planos”. Eles começam pelo
mais abstrato e vão se tornando mais concretos. São eles:

1.1 Plano estratégico

Os objetivos do site como um todo. Esses objetivos podem estar

relacionados ao marketing, por exemplo, e se focar em aumentar o número de

2
 vendas. Também pode ser um site público, que tem como objetivo prestar um
serviço à população. É o plano mais abstrato. Nesse plano, pensa-se em quem
vai usar nosso site, criar personas, pensar no público alvo.

1.2 Plano do escopo

Uma vez definidas as necessidades de nosso público, chega o momento

de levantar as maneiras de satisfazer essas necessidades, ou, usando o jargão
da área, requerimentos. Definir requerimentos ajuda a estabelecer objetivos, a
dar um norte para o produto, a orientar o desenvolvimento.

1.3 Plano da estrutura

Uma vez que os requerimentos foram definidos e priorizados, é possível

começar a organizar o que o site ou produto terá. Ainda não estamos falando de
layout, e sim da lógica de estrutura, navegação e organização do conteúdo de
nosso site.

1.4 Plano do esqueleto

É quando o site começa a tomar forma, quando são tomadas as primeiras

decisões quanto ao layout e quanto à maneira de navegar pela estrutura definida.

1.5 Plano da superfície

O arremate da parte visual – e de outros sentidos. Refinamentos de layout,

escolha de padrões tipográficos, cores, elementos, uso de imagens, estilos de
redação etc.
Aqui, pela proximidade com o web design, vamos aprofundar esses três
últimos planos e relacioná-los com as técnicas e conhecimentos necessários,
além de relacioná-los com princípios de usabilidade.

TEMA 2 – HEURÍSTICAS DE NIELSEN

Ao falar em design de interação, é impossível ignorar o trabalho de Jakob

Nielsen (2020). Suas dez heurísticas servem para analisar e corrigir problemas

3
 de usabilidade de qualquer artefato, o que inclui sites e produtos digitais. Vamos
a um resumo:

• 1ª heurística: visibilidade do status do sistema. Quem usa um sistema

precisa saber o que está acontecendo. Em alguns casos – um
liquidificador, por exemplo –, é óbvio. Em outros, como um site que está
processando sua compra, se não houver uma comunicação clara, as
pessoas podem pensar que aconteceu algum problema.
• 2ª heurística: compatibilidade entre o sistema e o mundo real.
Modelos mentais são “representações de sistemas e ambientes derivadas
da experiência” (Lidwell; Holden; Butler, 2003, p. 130). As pessoas sabem
reconhecer um botão em uma interface, desde que ele se pareça com a
ideia que as pessoas têm de como é um botão.
• 3ª heurística: controle e liberdade para o usuário. Errar é humano.
Como erros têm consequências, não queremos errar – e menos ainda
quando não sabemos ao certo quais serão essas consequências. No
digital, a forma mais típica é que o usuário saiba da possibilidade de
desfazer possíveis erros – e que essa possibilidade seja implementada.
• 4ª heurística: consistência e padronização. Se você for dirigir um carro,
você provavelmente vai abrir a porta dianteira esquerda, esperar que o
volante esteja ali, que a alavanca de câmbio esteja no meio dos dois
assentos da frente, e que o botão do meio do volante seja a buzina. Carros
são mais ou menos assim há várias décadas. Sites são mais recentes,
mas já têm idade suficiente para que as pessoas tenham uma ideia – um
modelo mental – de como usá-los.
• 5ª heurística: prevenção de erros. Já falamos de como a possibilidade
de consertar erros dá mais tranquilidade ao usuário. Mas e se esses erros
sequer acontecessem? Isso poupa o trabalho de desfazer o erro ou de
lidar com as consequências de uma ação irreversível.
• 6ª heurística: reconhecimento em vez de memorização. Saídas de
emergência de lugares públicos podem ser reconhecidas rapidamente por
uma série de pistas visuais, como maçanetas de emergência e sinais
padronizados. Em uma emergência, a evacuação pode ser feita

4
 rapidamente, inclusive porque as pessoas reconheceram essa saída.
Imagine a tragédia se a localização dessa porta não fosse tão óbvia.
• 7ª heurística: eficiência e flexibilidade de uso. O exemplo mais típico
dessa heurística é a bicicleta com rodinhas, que podem ser retiradas
assim que a criança aprender a se equilibrar em duas rodas.
• 8ª heurística: estética e design minimalista. A frase “Menos é mais” é
bem conhecida e resume bem essa heurística. Se trata de focar no
essencial, sem firulas ou decorações que possam dificultar a tarefa que o
usuário quer executar. A quantidade de informação deve ser superior à
quantidade de ruído (Lidwell; Holden; Butler, 2003, p. 182). Por outra
parte, sistemas considerados “bonitos” são percebidos como mais fáceis
de usar (Lidwell; Holden; Butler, 2003, p. 18). Isso faz pensar em um
equilibrio necessário entre forma e função.
• 9ª heurística: ajude os usuários a reconhecerem, diagnosticarem e
recuperarem-se de erros. Já tentamos diminuir os erros por meio de
boas propiciações, pedindo pro usuário confirmar que realmente quer
fazer algo, com alertas, com alarmes, mas… a Lei de Murphy está aí. A
conexão pode cair, o programa pode ter algum bug – defeito –, o estoque
do produto pode ter acabado, alguém pode ter tropeçado no cabo da
internet. Apesar do inesperado, é possível manter o usuário no controle
da situação (3ª heurística).
• 10ª heurística: ajuda e documentação. O ideal é que sistemas não
precisem de manuais, mas caso seja necessário, deixe-os à mão. Ou,
melhor ainda, facilite outro tipo de ajuda.

As heurísticas de Nielsen devem ser levadas em consideração durante

todo o processo de desenvolvimento de um site. Há algumas, como as
relacionadas a erros, que talvez precisem ser consideradas logo no começo do
desenvolvimento de um site. Outras têm mais a ver com o plano da superfície,
como a 8ª e a 4ª.
Não é interessante fazer uma relação direta entre os planos e as
heurísticas, mas pense quais das heurísticas se relacionam mais com cada plano
e de que maneiras seria possível aplicar essas heurísticas para garantir o bom
funcionamento de um site.

5
 TEMA 3 – PLANO DA ESTRUTURA

Depois de definido o que Garrett (2011) chama de planos estratégico e de

escopo, teremos uma ideia do que o nosso produto precisa ter. Os requerimentos
não deveriam exigir soluções específicas, e sim serem mais abstratas,
especificar objetivos, para não determinar demais as soluções.
Neste plano, não vamos pensar ainda na forma do nosso produto final.
Vamos pensar em como o conteúdo será organizado e como será a navegação
e a hierarquia das informações do site. A área que cuida disso é a arquitetura
da informação. Também vamos pensar na maneira como as pessoas vão
interagir com o site – design de interação.

3.1 Design de interação

Ao pensar como as pessoas vão interagir com nosso site, uma boa saída
é pensar em um modelo conceitual (Garrett, 2011, p. 83). Talvez não seja o caso
de tentar reinventar a roda. As pessoas já sabem como é um site de e-
commerce: um lugar que é possível escolher um produto de várias maneiras, se
acrescenta o produto ao “carrinho”, se aperta um botão e se paga. Claro que não
é tão simples, mas nesse plano os detalhes ainda não interessam. Mais adiante
será definido o layout, fontes, cores, entre outros. Por enquanto, ter uma ideia
do que vai ser projetado é suficiente.
Esses modelos conceituais também podem ser usados para elementos
do layout do site. Por exemplo, talvez as pessoas estejam acostumadas a
encontrar opções em uma coluna à esquerda, e opções de navegação na parte
superior da página.
Também é importante pensar em como trabalhar com erros (Garrett,
2011, p. 87). Esse tipo de decisões implicam em como o site será desenvolvido.
Tipicamente, um erro pode ser previnido, corrigido e/ou recuperado, com
diferentes níveis de dificuldade – e trabalho – tanto para usuários como para a
equipe do site.

6
 3.2 Arquitetura da informação

A outra área que trabalha no plano da estrutura é a arquitetura da

informação, que se ocupa de organizar tudo o que precisa constar no site de
maneira tal que faça sentido e que tudo seja “encontrável”. É uma disciplina que
parece focar muito em lógica, mas na verdade presta bastante atenção na
maneira em que as pessoas navegam e buscam informações.
Ao pensar um site, é possível começar a pensar por cima ou por baixo da
estrutura – top-down e bottom-up, segundo Garrett (2011, p. 90). Faz mais
sentido começar pela home, que é uma parte do site geralmente superestimada?
Ou é melhor começar pelas páginas de produtos, que costumam ser as páginas
linkadas em anúncios ou compartilhadas em redes sociais?
Além disso, Garrett elenca alguns tipos de estruturas típicas de sites. Isso
é interessante para pensar qual – ou inclusive quais – é(são) mais adequada(s)
para diferentes soluções.
Hierárquica: a mais típica, divide a informação em categorias e
subcategorias. Pense na taxonomia do reino animal, por exemplo. Um animal
não pode ser ao mesmo tempo uma ave e um mamífero, e um mamífero não
pode ser ao mesmo tempo um marsupial e um roedor.

Matriz: concebe várias ligações entre os nós, hierarquicamente ou não.

Imagine que você está escolhendo sapatos. A partir de um modelo, você pode
querer ver outros do mesmo tamanho, outros da mesma marca, outros do
mesmo tipo, ou outras sugestões de presente para o dia das mães.

7
 Orgânica: não tem um critério definindo, sem um conceito forte de seções
ou categorias. Pense em um jogo point-and-click, de interagir com vários
elementos em um cenário para resolver desafios, no qual essa falta de
organização aporta a dificuldade desejada em um jogo. Outro exemplo são os
links que estão no meio do texto dos artigos da Wikipédia.

Sequencial: apresenta cada nó de informação em uma sequência

determinada, como um slideshow, um livro, ou um vídeo.

Uma outra visão é apresentada por Guerci (2017), que fala em três etapas
do processo de arquitetura de informação:

• Ontologia: estabelece o significado de cada palavra. Isso ajuda a manter

padrões e apresentar corretamente diferentes seções. Vamos chamar
esta seção de “contato” ou de “fale conosco”? Os botões vão dizer “OK”
ou “Feito”? Vamos chamar de produtos “usados” ou “seminovos”?
• Taxonomia: se trata de encontrar sentido nos diferentes elementos, para
poder classificá-los e agrupá-los de maneira que faça sentido. Um piano,
por exemplo, é um instrumento de cordas. Em um aplicativo de compra e
venda de instrumentos musicais, faria sentido colocá-lo junto aos violões
e ukulelês? Ou melhor deixá-lo junto a teclados e sintetizadores? Ou ele
precisa de uma categoria própria?

8
 • Coreografia: depois de formados os grupos, é necessário “criar mais um
nível de relação (Guerci, 2017). Esses grupos precisam ser organizados.
Continuando com o exemplo do site de instrumentos, o que é mais
importante? As ofertas? Instrumentos de corda? Acessórios? O endereço
da loja física? É o tipo de decisões a serem tomadas aqui.

Outra questão importante é considerar os critérios para organizar o

conteúdo. Aqui vamos te apresentar os cinco “cabideiros” de Richard Saul
Wurman (2001, p. 40-45), que os resume na sigla LATCH, que também funciona
em português.

• Localização: organizar a informação por lugares, como países ou bairros.

• Alfabética: de A a Z.
• Temporal: pela ordem cronológica dos acontecimentos.
• Categoria: pelos conjuntos formados por objetos que compartilhem
características.
• Hierarquia: pela ordem de alguma medição.

Certamente, algum ou alguns desses métodos de organização serão úteis

para o seu site, e alguns não farão sentido. Também é possível aproveitar as
características do meio digital para mudar a maneira em que as informações são
apresentadas.
Uma lista de médicos de um plano de saúde, por exemplo. Você pode
organizar geograficamente, inclusive em um mapa, para que a pessoa possa ver
quais ficam mais próximos da sua casa. Ou apresentados em ordem alfabética,
caso seja necessário localizar algum nome específico. Ou separar por categorias
– especialidades.
Blogs são por definição organizados em forma temporal, e sites de
notícias herdam a categorização em editorias de diferentes assuntos dos jornais
impressos. Essa categorização inclusive faz parte do modelo conceitual desses
produtos.

9
 TEMA 4 – PLANO DO ESQUELETO

Se o plano da estrutura define como o produto funciona, o plano do

esqueleto define a forma dessa funcionalidade (Garrett, 2011, p. 108). No
esqueleto, nossas preocupações se concentram em elementos menores.
Chegou o momento de pensar no design de interface, no design da
navegação e no design da informação. A interface deve prover a quem usa
seu site elementos fáceis de serem operados, de executar tarefas. A navegação
deve permitir um acesso rápido às diferentes categorias, seções e nós –
elementos da informação – determinados na arquitetura da informação, e o
design da informacão deve garantir a comunicação dos processos anteriores.

4.1 Navegação

Uma vez definida a organização do que vai no site, definido pela

arquitetura da informação, chegou a hora de decidir como será a navegação por
esses conteúdos e categorias. Segundo Garrett (2011, p. 118-119), são três os
objetivos da navegação:

• Possibilitar que quem usa um site saia de um ponto e chegue a outro. Não
diretamente, claro, porque em muitos casos é impraticável listar todos os
destinos possíveis do site. Mas pelo menos que seja possível retornar à
home ou à página de busca rapidamente e refazer o caminho.
• Comunicar a relação entre os elementos. Imagine uma lista de links sem
nenhuma diferença entre eles. Seria muito útil entender a hierarquia entre
eles, ou se há alguma categorização.
• Comunicar a relação entre o conteúdo e a página atual. Basicamente, o
que esse link tem a ver com o que estamos fazendo agora? Vai nos
mostrar algo que pode nos interessar? É um anúncio que leva para outra
página? Vai voltar para a home page?

Para atingir esses objetivos, é interessante pensar de que maneiras as

pessoas navegarão pelo nosso site. Garrett (2011, p. 120-123) elenca vários
sistemas de navegação. Aqui estão sendo mostrados separadamente e com
esquemas baseados em uma estrutura hierárquica, mas várias dessas formas

10
 de navegação podem conviver em um mesmo site. Pode até ser desejável
permitir que as pessoas naveguem da maneira que preferirem ou precisem no
momento.
Navegação global: fornece acesso às principais seções do site.

Navegação local: provê acesso ao que estiver mais próximo, como a

categoria imediatamente superior e páginas subordinadas.

Navegação suplementar: provê atalhos a conteúdos que seriam difíceis

de acessar pela navegação normal do site.

Navegação contextual: embutida no próprio conteúdo, para facilitar o

acesso a links relacionados ao conteúdo.

11
 Navegação de cortesia: links para informações não relacionadas ao
conteúdo, e sim ao site em geral, como formulário de contato, serviço de chat,
informações gerais, entre outros.

4.2 Interface

Se para pensar o site pensávamos em modelos conceituais, ao pensar na

interface podemos nos aproveitar do conhecimento que as pessoas têm de como
funciona um site – ou até outros artefatos. Aí entram as metáforas, analogias e
convenções. A palavra-chave é consistência – a quarta heurística de Nielsen.
A consistência pode ser interna ou externa. Interna se refere a manter
padrões dentro do seu site. Que um botão de confirmar uma ação tenha textos
diferentes, como “ok” e “entendi”, pode ser confuso. Se o resultado é o mesmo,
para que mudar o texto?
Já a consistência externa se relaciona com a ideia de modelos mentais.
Por exemplo, o carrinho de compras do e-commerce. Sabemos que um colchão
não cabe em um carrinho, mas entendemos que o carrinho é metafórico e que
tudo o que comprarmos deve ir pra ele. Considerando isso, imagine que o
departamento de marketing de uma loja on-line de materiais de construção teve
a ideia “genial” de trocar o carrinho de compras por um carrinho de mão. Há uma
possibilidade de as pessoas não entenderem que aquilo está substituindo o
conhecido carrinho de compras.
12
 Também é importante hierarquizar o que será visto na tela. Imagine um
site no qual é possível fazer 20 tarefas, mas 80% das pessoas entram para fazer
três delas. Pode ser útil dar mais destaque a essas três tarefas, ou esconder as
outras sob um menu. É o tipo de decisão que é tomado no plano do esqueleto.
É interessante quando aparecem exemplos fora da web. No caso, essa
ideia de hierarquizar a informação que é exibida ao usuário pode ser vista em
um forno de microondas. Algumas receitas exigem que o botão “mais receitas”
seja apertado e depois escolher o número correspondente. Isso exigiria que o
usuário memorize a receita, mas, ali atrás da porta, há uma lista das receitas
desse menu. Não é algo que atrapalhe a funcionalidade, já que passa a maior
parte do tempo escondida, mas está ao alcance de quem precise consultar esse
recurso.

Fonte: Peruyera, 2021.

Cuidado também com a consistência em formulários. Veja o exemplo e

pense o que tem de errado nele:

13
 Passamos várias décadas aprendendo que se uma série de opções é
precedida de círculos, é porque podemos escolher apenas uma. Esse exemplo
é fictício, mas infelizmente baseado em um exemplo real. O resultado é uma
interface confusa, que pode causar vários tipos de problemas.

TEMA 5 – PLANO DA SUPERFÍCIE

O plano da superfície implica na relação com os sentidos, especialmente

a visão, mas é possível contar com o som e, fora do web design, com o tato –
celulares e joysticks podem vibrar.
Garrett (2011, p. 138-139) menciona duas qualidades de como o olhar do
usuário percorre um site – qualidades que, consequentemente, também são do
site:

Em primeiro lugar, segue um fluxo suave. Quando as pessoas

comentam que um design é “carregado” ou “poluído”, na verdade elas
estão reagindo ao fato de que o design não as conduz suavemente
pela página. Em vez disso, seus olhos quicam de um lugar para outro
em vários elementos, todos clamando por atenção.
Segundo, dá aos usuários uma espécie de visita guiada das
possibilidades disponíveis sem oprimi-las com detalhes. Como
sempre, essas possibilidades precisam apoiar os objetivos e tarefas
que o usuário está tentando realizar nesta interação com o produto.
Talvez o mais importante seja que essas possibilidades não deveriam
distrair os usuários da informação ou funções necessárias para cumprir
esses objetivos. (Garrett, 2011, p. 138-139)

Há várias maneiras de conseguir essa “suavidade” na qual Garrett resume

a boa experiência de usar um site. Pense nos princípios de design e como eles
podem ser aplicados à web. Pense inclusive como a maneira de projetar sites
favorece essa tarefa. Ao fazer um layout usando grids CSS, por exemplo, dá

14
 trabalho deixar algum elemento desalinhado. Tirar o peso bold de um título
também é uma tarefa a mais. Então aproveite essa lógica.
Pense em quais elementos devem contrastar e quais não. É importante
diferenciar quais palavras de um texto são clicáveis, mas pode não ser
necessário deixá-las de uma cor completamente diferente. Para um menu de
navegação, talvez você queira o maior contraste possível.
Outra característica dos processos de produção de sites é que a
padronização é facilitada. As cores e tipografia, por exemplo, são padronizadas
pelo CSS e é outra tarefa que é mais difícil de ser feita errado do que certo.
Para manter os padrões, é possível trabalhar com guias de estilo ou
manuais, mas também com sistemas de design. Nessa maneira de trabalhar, há
designers que preparam elementos e os disponilizam para que o resto da equipe
trabalhe com esses elementos, mantendo, assim, os padrões e facilitando a vida
de designers e desenvolvedores.

TROCANDO IDEIAS

Qual a importância de conhecer o processo inteiro de elaboração de um

site? Tem alguma das partes que te atraiu mais? Em qual você gostaria de
trabalhar? Em qual você não trabalharia de jeito nenhum? O que colegas acham
disso?

NA PRÁTICA

Como está seu portfólio? Faça uma avaliação de usabilidade dele. As

palavras estão claras? Os links funcionam? Há algo que o usuário – ou seja, seu
potencial cliente – possa se perder na navegação?

FINALIZANDO

Conhecer um processo completo é algo que faz a diferença entre quem

apenas vai executar uma tarefa e uma pessoa que será importante no processo
inteiro. As decisões são uma espécie de bola de neve, e participar do processo
pode exigir um pouco de tempo da sua parte, mas também pode economizar
tempo ao final do trabalho, garantindo que seja bem claro o que deve ser feito e
como isso ajudará o site a alcançar seus objetivos.
15
 REFERÊNCIAS

GARRETT, J. J. The Elements of User Experience. Berkeley: New Riders,

2011.

GUERCI, J. Uma metodologia para a etapa de arquitetura da informação.

Brasil: UX Collective, 2017. Disponível em:
<https://brasil.uxdesign.cc/arquitetura-da-informação-d057cf7301a>. Acesso
em: 18 set. 2021.

LIDWELL, W.; HOLDEN, K.; BUTLER, J. Universal Principles of Design.

Gloucester, EUA: Editora Rockport, 2003.

NIELSEN Norman Group. 10 Usability Heuristics for User Interface Design.

EUA: Nielsen Norman Group, 2020. Disponível em:
<https://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso em: 18 set.
2021.

WURMAN, R. S. Angustia Informativa. Buenos Aires: Prentice Hall, 2001.

16