A Importância das Decisões de Design em Uma Interface
Um botão, uma fonte, uma cor primária, uma cor secundária e até mesmo uma grande quantidade de espaço vazio. Nada está naquela interface por acaso.
--
Um dos principais pilares da experiência do usuário com um produto digital, é a interação com a interface. Por isso, eu acredito que seja praticamente impossível falar sobre UX (User Experience) sem mencionar UI (User Interface).
Afinal, do que adianta idealizar o produto perfeito, que gera valor para a empresa resolvendo um problema que os usuários enfrentam, se a interface não comunica corretamente o que é necessário fazer para completar uma tarefa ou alcançar um objetivo?
Pensando nesse contexto, decidi trazer neste artigo a importância de algumas das principais decisões do design de interfaces, que não acontecem por acaso ou apenas com a intenção de deixar aquelas telas que o usuário interage bonitinhas — a beleza das telas é importante, mas é, muitas vezes, apenas consequência de um trabalho bem feito e consistente.
Botões
A criação de botões em interfaces está muito além da prototipação ou do desenvolvimento. UI Designers experientes já estão familiarizados com boas práticas que parecem óbvias, mas ainda não são tão populares quanto deveriam ser.
Ao decidir criar um novo botão, é preciso deixar claro para o usuário qual ação aquele botão irá realizar. Palavras soltas, como “fechar” ou “finalizar”, podem confundir o usuário e induzi-lo ao erro, se estiverem fora de contexto — é claro que esse contexto, muitas vezes, está implícito, como um botão de “entrar” na tela inicial de um aplicativo.
A melhor maneira que temos para garantir que esse contexto seja consistente, é através dos testes de usabilidade. Nunca saberemos o que os usuários pensam e algo que parece óbvio para quem está por trás do desenvolvimento do produto, pode não dizer nada para quem nunca teve contato com aquela tela antes.
“O que estarei finalizando se clicar nesse botão?”
Além disso, se você quer que o botão seja identificado no meio de uma interface, é preciso tomar cuidado para não camuflá-lo. Você precisa demonstrar que aquilo é um botão, que o usuário deve clicar ali para realizar uma ação.
Você já deve ter visto por aí também, interfaces que utilizam tipos diferentes de botões. Isso acontece quando queremos atribuir pesos diferentes para os botões que iremos utilizar naquele produto. Os mais comuns são conhecidos como botões primários, secundários e call to action (chamada para a ação).
O call to action é o botão que demonstra qual é a ação principal a ser realizada dentro daquela interface. Ele é o que tem mais destaque dentre todos os botões e é comum em telas iniciais ou landing pages, quando você precisa que o usuário se cadastre, teste o seu produto ou realize alguma outra ação fundamental.
Os botões primários são os botões que aparecerão com maior frequência nas telas do produto, normalmente indicando as ações primárias que você quer que o usuário realize. Os secundários, por sua vez, irão representar ações menos importantes ou que você não tem tanto interesse que o usuário realize.
Além dos tópicos falados acima, existe um conteúdo muito mais abrangente quando falamos apenas da criação de botões em design de interfaces. Você pode ler mais sobre essas boas práticas clicando em alguns dos artigos que separei abaixo:
Tipografia
A tipografia escolhida para compor uma interface é fundamental para consolidar a sua comunicação com o usuário. Ela influencia no tom das mensagens que você quer passar com cada palavra ou frase, além de, é claro, também auxiliar na harmonia visual das telas.
Veja alguns exemplos:
Você percebe a diferença de peso entre as fontes escolhidas para cada interface?
A fonte “casa” com o contexto do que está sendo dito e com a mensagem que a página quer passar para o usuário (calma e força, respectivamente).
Ademais, existe uma hierarquia, de tamanho, cor e peso, que possibilita o ajuste perfeito da fonte para cada parte da interface. Essa hierarquia deve levar alguns aspectos em consideração, como os diferentes níveis de destaque que precisa ser dado ao que está sendo dito e o dispositivo que o usuário estará utilizando para visualizar aquelas telas — um tamanho de fonte que pareça muito grande para ser vista em um celular, pode ser o ideal para um desktop, por exemplo.
Alguns outros aspectos da tipografia, como o espaçamento, o alinhamento ou o comprimento das linhas do texto, também podem definir se o conteúdo fica confortável, muito curto ou muito cansativo para ler.
Existem muitos detalhes que auxiliam na definição da tipografia ideal para a sua interface e merecem a sua atenção. Caso você tenha interesse em saber mais sobre o assunto, os artigos abaixo podem auxiliar nos seus estudos:
Cores
A existência prévia de uma identidade visual do produto que está sendo construído, pode ditar paletas que devem ou não ser usadas nas telas. Manter essa harmonia é muito importante, entretanto, as cores de uma interface não podem ser escolhidas apenas com base nisso ou no gosto pessoal do designer.
Quando falamos das cores, estamos falando das emoções que aquele visual irá transmitir para o usuário. É claro que esse é um aspecto pessoal e único para cada usuário, afinal, cada individuo é um universo particular de cultura, lembranças e sensações.
Mas, utilizando uma visão generalista, podemos dizer que cada cor que conhecemos irá remeter um determinado conjunto de sensações para os usuários, mesmo que inconscientemente. Vou dar um exemplo. Observe a imagem abaixo:
Agora, observe a interface abaixo:
Você consegue notar algo em comum entre as duas imagens?
É normal a utilização de cores quentes, como o vermelho e o laranja, na identidade visual de restaurantes conhecidos. Não por acaso, essas cores também são escolhidas por aplicativos relacionados a comida, como o iFood e o Rappi.
É claro que o vermelho, assim como qualquer outra cor, pode representar muitas sensações diferentes e, mais uma vez, o contexto deve ser levado em consideração.
A escolha das cores que irão compor as telas da sua interface também não para por aí. Além de escolher paletas que façam sentido, é importante saber organizar a maneira como essas cores serão distribuídas dentro da sua interface.
O 60–30–10, por exemplo, é uma proporção bem interessante. Ela dita que 60% da interface deve ser composta pela cor predominante, 30% pela cor secundária e 10% pela cor em destaque.
Na interface genérica acima, utilizei o branco como cor predominante, o cinza escuro (quase preto) como cor secundária e o azul como cor de destaque.
Outra boa prática na escolha das cores, é também se preocupar com a acessibilidade. Garanta que as cores da sua interface tenham um bom nível de contraste, para que todos consigam ler o que está escrito. Utilize ícones de apoio para indicar sucesso ou erro em alguma ação do usuário, já que apenas a utilização das cores verde e vermelha não podem ser identificadas por pessoas com daltonismo.
Abaixo seguem alguns artigos que podem te auxiliar mais no conhecimento sobre a importância das cores dentro do design de interfaces:
Espaço vazio
O espaço vazio (ou espaço em branco) em UI, representa todo o espaço que não está sendo ocupado por textos, botões ou ícones. Ele não precisa ser representado, necessariamente, pela cor branca. Pode ser qualquer cor, textura ou imagem que você esteja usando como background. E, ao contrário do que possa parecer, esse espaço não está presente ali por falta de conteúdo.
Você já parou para pensar que, em meio a uma multidão, fica mais difícil que uma única pessoa específica seja encontrada? Então, eu pergunto:
O que precisa ser encontrado na sua tela?
A ideia do espaço vazio na interface, é que as ações principais sejam destacadas e, por isso, facilmente encontradas pelos usuários. Além disso, o espaço vazio facilita a navegação e a legibilidade do conteúdo. Seu usuário não irá ficar sobrecarregado com informações e poderá focar no que quer fazer ao interagir com o seu produto.
Se você prestar atenção em todas as capturas de tela das interfaces que utilizei como exemplo para os tópicos acima, cada uma delas possui uma grande quantidade de “espaço em branco” em volta do conteúdo em destaque, chamando a atenção do usuário para a ação principal.
Veja mais alguns exemplos:
Como diria Hans Hofmann:
“A habilidade de simplificar significa eliminar o desnecessário para que o necessário possa se manifestar.”
Separei alguns artigos que podem te auxiliar a entender mais sobre a importância do espaço vazio e como utilizar esse artifício da maneira ideal para compor as suas telas. Confira:
A harmonia entre todas as decisões de design é essencial. Ela demonstra que essas decisões não são (e não podem ser) tomadas aleatoriamente. Entretanto, essa harmonia não garante, necessariamente, uma usabilidade perfeita.
Para encontrar o equilíbrio entre a consistência do design de interfaces e a usabilidade, é necessário entender que apenas os testes com usuários nos trarão respostas do que está certo, errado ou do que precisa ser melhorado.
Devemos buscar sempre basear nossas decisões em estudo, mas evitar nos apegar a essas decisões caso elas se mostrem equivocadas. Manter a mente aberta para melhorar e facilitar a vida de quem está utilizando o produto, deve ser o foco.
Obrigada por ler até aqui. Vamos nos conectar no LinkedIn? Você pode me encontrar clicando aqui.
