Homepage

Become a memberSign inGet started

Pedro MelloFollow
Feb 21, 2017

Design da informação no mundo digital

10 boas práticas para se criar uma boa interface…

Não basta somente estar no mundo digital para ser notado, uma simples página em HTML não
causa mais impacto se ela não for bem pensada e planejada, é preciso pensar como o design pode
ser usado para que as interfaces sejam amigáveis ao usuário e também atraentes para os olhos.

O bendito do UX e suas diferenças com UI

Vem-se discutindo muito sobre UX e UI e suas diferenças, a grosso modo UX (user experience) é
a forma que usuário interage como um todo, com a interface, produto ou serviço e UI (user
interface) é como o usuário interage graficamente com a interface, design visual, se restringindo
mais a elementos de design como, cor, forma, tipografia, hierarquia…

Envis precisley (2009)

O UX engloba um todo, sendo assim UI está dentro de UX.

O objetivo desse texto não é tratar de UX, apesar de já ter se provado sua real importância, sendo
rentável não só para o usuário, mas, também para as empresas que investem nisso, ou seja, todos
saem ganhando, mas sim em UI e como um bom planejamento de design causa bons impactos
na experiência do usuário.

1 . Clareza em primeiro lugar

Você já usou um aplicativo ou site, em que você se sente perdido confuso sem saber para onde
vai ou para onde clicar? Ou clica em algo que não queria, sai de uma tela importante de
pagamento de uma conta, por exemplo, e mesmo assim põe a culpa na interface? Se sua resposta
for sim, a grande culpa disso é de quem projetou a interface e não dela em si.

Clareza é de fato importante na hora de projetar uma interface, se pergunte cada detalhe antes de
pôr em prática, esse botão é realmente necessário? Quais caminhos o usuário percorre até chegar
aqui? Qual possibilidade pode-se explorar para que menos cliques sejam dados?

Uma interface clara e limpa gera menos confusão na mente das pessoas, uma linha direta de
raciocínio dentro da página ajuda ao usuário entender o que ele está fazendo e como ele está
fazendo, cada decisão de design gera um impacto diferente na experiência do usuário, seja ela
boa ou ruim.

2. Não invente muita moda

Alguns designers sempre dizem que estão cansados de como as coisas são no mundo digital, tudo
parece com a mesma cara, porém se tudo se parece tem um motivo por trás disso. Inventar muito
pode confundir o usuário, pois ele não sabe daquela sua nova invenção, está acostumado com os
padrões já existentes, e isso facilita tanto a vida dos programadores quanto do usuário.

Muitos designers no Dribble ou no Behance projetam verdadeiras obras de arte, inventam

soluções mirabolantes, colocam longas metragens nas introduções dos aplicativos para explicar
suas funções, não que seja proibido inventar algo novo, mas lembre-se que o usuário é a
prioridade não a interface.
“Design para as pessoas e não para o produto”

3. Tenha uma boa biblioteca de referencias

Ferramentas como Behance, Dribble, ou UI patterns são ótimos sites de referência para se
adicionar aos favoritos. Ter uma vasta biblioteca de referências ajuda a quebrar o bloqueio
criativo além de criar importantíssimos insights na hora de projetar.

Pense também em cada componente separado na hora de analisar as referências, um drop menu,
um label diferenciado, um tap menu, uma ferramenta de slider, cada componente separado pode
ser adaptado a sua realidade de projeto e gerar bons insights, porém tome cuidado nem todos
recursos encontrados nas referências pode ser usado em seu projeto analise bastante antes de
usar e sempre adapte à sua realidade.

behance.net
dribble.com

4. Mais legibilidade e mais leiturabilidade

Prefira tipografias com mais leiturabilidade e legibilidade possível, boas tipografias mais legíveis
facilitam a vida do usuário para compreender as palavras e o que se está sendo passado.
Tipografias sem serifa em telas de computador ou outros dispositivos geram mais leiturabilidade
e legibilidade do que tipografias serifadas.

E este é o resultado final …

Outro fator a se a analisar uma tipografia para web, é ver a sua procedência, de onde você tá
baixando esta tipografia, apenas web Fonts são amigáveis aos navegadores, pois nem todos os
computadores possuem todas as fontes existentes, por isso existem as web fonts, no Google
fonts você pode encontrar todas as web Fonts possíveis, e o melhor, todas são gratuitas.

5. A importância das cores

As cores são muito mais do que simplesmente ditar a beleza de uma interface, elas dizem muito
mais e pode impactar diretamente na hierarquia visual, cada cor desperta um sentido diferente
na mente das pessoas, sendo assim, saber quando usar e como usar é muito importante para a
experiência do usuário.

Observe a imagem a baixo…

Apesar de estar escrito “ACEITAR” e “CANCELAR”, os usuários podem facilmente se confundir a
tomar a ação desejada, culpa das cores que estão invertidas e confundem o usuário.

Agora observe esta outra imagem…

Utilizar padrões de reconhecimento já conhecidos pelo nosso cérebro ajuda a deixar a interface
mais intuitiva e melhorar a experiência, isso por que além dos usuários não lerem na web a cor
tem um impacto muito mais imediato do que o texto.

A cor também pode ser usada para determinar e hierarquizar as ações a serem tomadas…
No caso a cima a ação de cancelar é a ação primária, e aceitar é a secundária, esse tipo de caso é
muito utilizado em ações destrutivas, como por exemplo, você apaga o seu histórico de
navegação ou fecha um programa sem salvar. O feedback dado pelo sistema tenta prever que a
ação foi acidental, e com isso usa a cor para que o usuário tenha mesmo certeza se quer ou não
realizar essa ação.

Esse tipo de hierarquia também é muito usada em landing pages ou sites institucionais, é uma
ferramenta de muita importância para determinar as ações a serem tomadas e impactam
diretamente na experiência.

www.wine.com.br
No caso da Wine, por exemplo, claramente é de se observar como a cor verde chama atenção pro
usuário a realizar aquele tipo de tarefa, o verde se destaca e indica que a ação é positiva, e que
usuário avançará dentro do fluxo da compra.

www.spotify.com

O Spotify apela para as cores vivas e para efeitos visuais, como degrades, isso exemplifica o apelo
visual para atrair a atenção do usuário e transmitir a linguagem visual da marca, a cor nesse caso
exerce um importante papel psicológico em despertar os sentidos do usuário e fazer com que ele
exerça a ação de usufruir do serviço.

Algumas boas ferramentas que oferecem paletas de cores e gradientes:

uigradients.com

webgradients.com

colourlovers.com

6. Hierarquia visual, gerando o real interesse

no usuário.
Seguir uma linha lógica na hierarquia da interface é de extrema importância para que o usuário
não se perca e fique desinteressado, o ser humano é capaz de identificar diversas formas, por isso
uma interface poluída atrapalha a linha de raciocínio e consequentemente a experiência.
Nilsen Norman Group

A imagem a cima é uma pesquisa feita pelo Nilsen Norman Group com a tecnologia de
eyetracking, exemplifica como o padrão do olho humano se comporta ao interagir com uma
interface, pode-se notar que as áreas superiores e do canto esquerdo são as áreas de mais
interesse para o olho humano.

Linha visual em padrão “F”

www.awwwards.com

Muito utilizado em blogs e sites de busca, o padrão em “F” ajuda o usuário a ter uma noção geral
do que se passa na página, utilizando de linhas verticais e horizontais, o conteúdo é distribuído
focando a atenção em um formato parecido com a letra “F”, raramente o usuário lê cada palavra
do seu texto, sendo assim é importante focar as palavras chaves primeiro no canto superior
esquerdo, destacando-as.

O Google usa muito o padrão em “F”, como pode se observar…

www.google.com.br
Linha visual em padrão “Z”

www.awwwards.com

Usado pela maioria dos sites na web a o padrão em “Z” é muito utilizado por sites com conteúdo
mais leve, maior apelo visual e quem busca maior taxa de conversão, a grande parte de sites
institucionais e landing pages possuem esse padrão, o uso de imagens é mais propício
aumentando a ligação psicológica da interface com o usuário.

Maioria dos sites usam esse tipo de linha visual, veja alguns exemplos…
apple.com.br

contaazul.com
7. Flat design vs Skeuformismo, qual estilo gráfico
devo usar ?
Se olharmos para o passado o flat design começou a ganhar força à menos de três anos atrás, é
uma tendência mundial iniciada pelo grande e poderoso Google, porém a crítica existente
perante o flat design é ser simples demais ou considerado trabalho de preguiçoso, entretanto
sabemos que existe uma grande diferença entre flat design e um design pobre, antes de tudo irei
pautar o que é cada uma desses estilos que são muito utilizados no mundo digital.

O skeuformismo

Interface de um sistema operacional IOS

A origem da palavra vem do grego, skeuos (recipiente ou ferramenta) e morphe (forma), a

palavra basicamente se refere a objetos formados por outros elementos. Antes se referia apenas a
objetos, porém a partir da década de 90 com a invenção dos computadores, o skeuformismo
ganhou força, e passou também a ser reconhecido como objetos reais representados de forma
gráfica nas interfaces, por exemplo, o ícone da sua lixeira ou as pastas do seu desktop, isso por
que no início as pessoas não tinham costume de interagir com os personal computers, então
tinha que se criar uma forma para se entender do que cada elemento da interface era de fato e
isso tinha que ser o mais intuitivo possível para as pessoas.

O grande percursor disso é a Apple, dê uma olhada nos ícones do Mac os…

Interface de um Mac os

Todos os ícones se parecem bastante com o mundo real, os detalhes não passam batido e o uso
de brilhos e sombras são intensos.
Flat design

Tela inicial do Windows 8

Com os avanços no mundo digital, novas interações foram surgindo, os usuários foram
avançando seu nível de aprendizado com as interfaces e as interações, e precisou abstrair mais a
forma, com isso surge o flat design, um design minimalista que bebe da mesma fonte que as
escolas de Ulm e Bauhaus.
netdna.webdesignerdepot.com

De inicio quando surgiu a interface do Windows 8 os usuários tiveram uma maior dificuldade de
aprendizado, de fato o flat design exige uma curva de aprendizado maior inicialmente, porém
isso não significa ser algo ruim, pelo contrário, depois de sua disseminação esse estilo vem se
mostrando muito útil e muito prático. Os avanços tecnológicos e sociais permitiram a maior
disseminação desse estilo gráfico, sem falar que alguns ícones usados em épocas passadas não se
usam mais, por exemplo, como se explicar para um jovem que o ícone de disquete é para salvar
algo, se o disquete já foi deixado de lado há muito tempo?
Dribble

A criação desse estilo possibilitou o maior uso de animações nas

interfaces, outro fator que gera um profundo impacto na
experiência e ajuda a despertar e atrair o interesse do usuário

Claro que cada projeto tem suas particularidades, porém quando for projetar a sua interface leve
em consideração esses aspectos e adapte à sua realidade sempre da melhor maneira possível,
pensando em como os usuários iriam reagir.

8. O poder das imagens

snapstock.io

Imagens são uma ferramenta poderosa para contar histórias, despertar emoções e mover as
pessoas de diferentes maneiras.

Recentemente neurocientistas do MIT descobriram que o cérebro humano consegue assimilar

imagens em cerca de 13 milissegundos. Isso significa que o impacto é muito mais imediato para o
usuário do que um texto chamativo por exemplo. Porém não é nada fácil procurar a imagem
perfeita para sua interface, existem bons bancos de imagens que oferecem imagens magnificas e
de boa qualidade, como o shuterstock e o istock, por exemplo, porém caso seu cliente não tenha
verba para isso ou até mesmo você, procure bancos free de imagens, o pixbay e
o stopsnack.io oferecem boas imagens tanto quanto bancos pagos, tome cuidado com as imagens
de buscadores como Google, nem sempre as imagens lá podem ser usadas sem uma licença e isso
pode causar problemas de direitos autorais, que é preferível evitar.
9. Micro textos e seus impactos
Há alguns anos, já vem se falando que os usuários não leem na web. Isso vem de um tempo em
que a maioria dos sites usava blocos enormes de textos pra se comunicar com o usuário, fazendo
com que ele esteja disposto a ler. Porém com a revolução no mundo digital o mobile surgiu,
sendo muito diferente não só seu formato, mas também como as pessoas interagem com ele.

Com isso surge o conceito dos microtextos, na prática é a forma de transmitir uma informação
em poucas palavras e em um espaço limitado, com clareza e personalidade. Pode aparecer de
diversas formas, uma chamada em um banner, dentro de um botão, uma mensagem de feedback.
De fato os microtextos surgiram para despertar emocionalmente os sentimentos dos usuários e
também tendo uma importância em sua funcionalidade.

Slack usa chamadas usando microtextos.

Valor funcional
Os microtextos podem tanto comunicar uma ação a ser feita, uma chamada em um banner, dar
feedback necessário ao usuário, além de antecipar alguma necessidade do usuário em alguma
tarefa. Dan Saffer, da boas dicas em seu novo livro, microinteractions.com, de como escrever
esses textos.
Evite nomes de ações muito vagos, como Enviar. O que acontece depois que o usuário “Envia”
os dados do formulário? Será que o nome do botão não pode explicar isso para o usuário?
O texto de instrução é absolutamente necessário? Você não precisa adicionar um “Por favor,
faça login” acima de um formulário de login, por exemplo.
Quando o texto é muito longo e precisa ser truncado na interface, tenha certeza de que o
usuário consegue ler o texto completo facilmente.
Teste seus textos com usuários reais. Mostre uma interação com microtexto para eles e peça
para eles dizerem em voz alta o que acham que acontecerá ao clicarem ou interagirem.
Use linguagem humana, não de sistema. “Postado há 3 horas” é muito mais fácil de entender do
que “postado em 04/03/2014 às 14h33” — um detalhe que acaba passando batido em muitos
produtos por aí.

Mensagem de feedback do slack.

Valor emocional
Os microtextos são uma ótima ferramenta para representar a identidade verbal da marca, a
escolha das palavras certas faz com que o usuário se sinta muito mais confortável em fazer as
devidas ações que são pedidas, por exemplo, preencher um formulário onde a “voz” da interface
é mais próxima e mais humana, ajuda e incentiva o usuário a continuar a preencher, mesmo se o
formulário for cansativo e pouco interessante. Isso aproxima as pessoas da interface além de
engajar o usuário a marca.
Mailchimp usa os microtextos para transmitir a personalidade da marca

10. Sempre esteja atualizado

Assim como o mundo digital sempre está se atualizando e se reinventando, os profissionais e
designers que querem seguir esse caminho também têm que se atualizar. Acompanhar blogs e
canais que falam sobre o assunto é muito importante para o melhor desempenho profissional.
Abaixo alguns blogs , livros e links importantes para se acompanhar.

O medium.com sempre tem assuntos sobre esse mundo, profissionais excelentes para se seguir e
assuntos sempre atualizados.

Alguns dos melhores blogs para se acompanhar no Medium

uxdesign.cc melhor blog de design relacionado ao mundo digital, vale a pena da uma olhada
(www.facebook.com/uxdesigncc/) para se acompanhar dentro do facebook. (brasil.uxdesign.cc —
 versão brasileira)

uxplanet.org bons textos sobre interações e sobre UI.

Sites de pesquisa
nngroup.com Nilsen Norman group, uns dos melhores sites de pesquisa e validação no mundo
das interações. Eles também têm um canal no You Tube (youtube.com/user/NNgroup)

Alguns vídeos interessantes

youtube.com/watch?v=9BdtGjoIN4E — Norman explica o termo “UX”.

youtube.com/watch?v=RlQEoJaLQRA — Norman dando uma ótima palestra no TED.

www.youtube.com/watch?v=eokSUSSm_hQ — Nielsen “por que os designer erram?”

Livros sobre Usabilidade e UX

Design do dia dia

Sinopse: Por que alguns produtos satisfazem os consumidores, enquanto outros os deixam
completamente frustrados? Em „O design do dia-a-dia‟, o especialista em usabilidade Donald A.
Norman analisa essa questão, mostrando que a dificuldade em manipular certos produtos e
entender seu funcionamento não é causada pela incapacidade do usuário, mas sim por uma
falha no design do que foi fabricado.
Não Me Faça Pensar (atualizado)
Sinopse: Este livro busca tratar sobre a usabilidade na Web com informações e conselhos
práticos, tanto para novatos quanto para veteranos. Steve Krug adiciona munição para
aqueles cujos chefes, clientes, investidores e gerentes de marketing insistem em fazer a coisa
errada. Nesta edição, Steve acrescenta três novos capítulos no mesmo estilo do original, com
informações e conselhos práticos.
Introdução e boas práticas em UX Design
Sinopse: Cada vez mais o desenvolvimento do front-end de sites e sistemas tem papel
preponderante em como o seu site converte, retém e agrada os usuários. Porém, além de saber
como implementar uma tela, é importante saber também o que fazer nela. Quais recursos
devem ser usados? Quais informações precisam ser exibidas? Em quais lugares?Atualmente, a
experiência do usuário (User Experience — UX) tem ganhado um papel fundamental na criação
de sites e aplicativos. Entender como o usuário se comportará no seu sistema é de extremo
valor para criar um site simples para ele.Neste livro, Fabricio Teixeira mostra com exemplos
práticos e reais de sucesso e insucesso de diferentes sites quais são as boas práticas e os pilares
para conseguir construir um de uso agradável.
100 Things Every Designer Needs to Know about People
Sinopse: We design to elicit responses from people. We want them to buy something, read
more, or take action of some kind. Designing without understanding what makes people act the
way they do is like exploring a new city without a map: results will be haphazard, confusing,
and inefficient. This book combines real science and research with practical examples to deliver
a guide every designer needs. With it you‟ll be able to design more intuitive and engaging work
for print, websites, applications, and products that matches the way people think, work, and
play.
Interação Humano-computador
Sinopse: Este livro visa fornecer aos leitores um conhecimento abrangente sobre práticas de
projeto e avaliação de sistemas interativos de alta qualidade. Inicialmente são apresentados os
principais conceitos da área de Interação Humano-Computador (IHC). Em seguida, são
apresentadas atividades envolvidas em design e avaliação de interfaces de usuário, incluindo
métodos, técnicas, modelos e representações utilizados em cada uma delas. Cada capítulo inclui
modelos de relatórios, diagramas e outros artefatos produzidos pelas atividades nele descritas.
Cada método apresentado é aplicado através de exemplos e exercícios relacionados em
diversos ambientes (PC, Web, celulares, entre outros). O leitor será capaz de aplicar os métodos
de design e de avaliação de interfaces de usuário em seus projetos, introduzindo atividades
relacionadas a IHC nos processos de desenvolvimento de software de que participe, para
aumentar a qualidade do produto gerado.

Conclusão
O mundo digital pode ser um mundo obscuro e cheio de desafios, porém não há segredo nenhum
em projetar interfaces, somente entender seu usuário e testar, um bom projeto de design pode
mudar a vida das pessoas. Então espero ter ajudado você.

Obrigado!
UX
UI
Design
Web
Developer
16
1

Follow

Pedro Mello

Also tagged Design

UX best practices: How to design scannable app screenshots

Girish Rawat

13.7K

Also tagged Web

9 Best Website Layout Examples and Ideas for Web Design in 2018

Amy Smith

1.3K
Also tagged Developer

Build a webcam communication app using WebRTC

Flavio Copes

1.4K

Responses

Write a response…

Applause from Pedro Mello (author)

Igor Franzotti

Feb 21, 2017

Boa, Pedro!!! Começando bem ;)

O Design é a ponte do que "pode ser" para o que "deve ser". E, discuti-lo é a estrutra dessa ponte.
Segue!

16

Never miss a story from Pedro Mello, when you sign up for Medium. Learn more