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 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. Saiba usar uma boa tipografia

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.

Outra coisa que tipografias podem fazer é dar voz para sua interface, dependendo do estilo tipográfico que você escolha, uma fonte pode dizer muito sobre o que você quer passar.

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.

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!

--

--

Senior designer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store