O design de experiência do usuário (UX) e o design de interface do usuário (UI) remontam às primeiras invenções, quando o primeiro humano pré-histórico prendeu uma pedra a um bastão, facilitou o movimento da pedra (e, esperamos, ganhou uma promoção no processo). Contudo, como disciplina coesa, a UI foi codificada na década de 1970, em empresas como a Xerox, e popularizada na década de 1990 com a adoção mais ampla do computador pessoal.
Desde então, o UI design continua a evoluir e se adaptar a novas tecnologias e dispositivos. Você pode implementar o design de interface do usuário – comumente abreviado para UI design – em todo o seu site de e-commerce, seguindo algumas diretrizes. Aprenda como começar.
O que é UI design?
O UI design é o processo de criar o layout visual e a aparência de software, aplicativos, sites ou qualquer interface digital com a qual o usuário interage. Exemplos de componentes de UI incluem a disposição de botões em uma página, o texto que orienta você nas etapas para criar uma conta com nome de usuário e senha, e os ícones que guiam você durante a experiência de compra. O objetivo do UI design é criar interfaces simples, esteticamente agradáveis e funcionais, que ajudem os usuários a realizar tarefas.
Por que o UI design é importante?
Um bom design vai além de ser visualmente atraente, ele pode melhorar seus resultados financeiros. Um estudo amplamente citado, que acompanhou o desempenho de empresas populares orientadas por design ao longo de uma década, descobriu que elas superaram as 500 maiores empresas listadas nas bolsas de valores dos EUA em 219%. Uma das maneiras mais diretas de enfatizar o design é por meio da interface do usuário do seu site.
Design de UI vs. design de UX
Os designers de UI normalmente trabalham em estreita colaboração com os designers de experiência do usuário, e embora UI e UX estejam intimamente relacionadas, são disciplinas distintas. Enquanto o UI design se concentra nos elementos visuais e interativos do produto, como layout, tipografia, cores, ícones e botões, o design de UX se preocupa com a experiência geral do usuário, incluindo conceitos mais amplos, como o propósito geral do produto e como o usuário se sente em relação a ele. Ambos são cruciais para um resultado bem-sucedido: um UI design bem feito apoia a estratégia subjacente de UX.
Pense no telefone. No início, você tinha que informar a um operador humano com quem gostaria de falar. Depois, surgiu o disco rotativo, eliminando a necessidade de operadores humanos, mas adicionando um mecanismo de giro que consumia tempo. Posteriormente, foi introduzido o teclado numérico, com um layout de botões que sobreviveu ao telefone tradicional e se tornou padrão para celulares. O discador rápido, listas de contatos e assistentes de voz agilizaram ainda mais esse processo.
Essa evolução acompanha a interface do usuário do telefone: os botões e os meios pelos quais interagimos com ele. Sua experiência do usuário, por outro lado, abrange não apenas a UI do dispositivo, mas também as ações que ele realiza, nossa compreensão de suas capacidades, quão satisfeitos ficamos após usá-lo, e assim por diante. Por exemplo, sua satisfação com a experiência de reservar uma corrida em um aplicativo de carona é influenciada não apenas pela interface do aplicativo, mas também pela facilidade de encontrar um motorista, o tempo estimado de chegada e o comportamento do motorista durante a corrida.
7 princípios de UI design
Nas últimas décadas, algumas regras de ouro de UI emergiram. Aqui estão seis que você deve ter em mente:
- Conforto para o usuário
- Deixe o usuário conduzir a experiência
- Torne intuitivo
- Seja acessível
- Informe os usuários quando as coisas estão funcionando…
- …Mas planeje para quando não funcionarem
- Abrace a iteração
1. Conforto para o usuário
O usuário, neste caso, é seu cliente. Para melhorar a experiência de navegação, é essencial criar um ambiente acolhedor em seu site. Veja seguir tornar a navegação mais intuitiva e amigável:
- Menos é mais. Independentemente do seu gosto por arte, o minimalismo é a essência do UI design. Um bom design de interface do usuário exige a remoção de qualquer elemento em uma página que não atenda às suas necessidades. Fontes chamativas, informações desnecessárias e textos excessivamente longos são os principais culpados. Mantenha a hierarquia visual clara. A lei de Fitts afirma que alvos maiores são mais fáceis e rápidos de clicar do que alvos menores e mais distantes. Em outras palavras, certifique-se de que elementos importantes, como botões de compra, sejam proeminentes e notáveis, e que fotografias e informações-chave atraiam naturalmente o olhar. Mantenha a simplicidade. Uma ótima UI utiliza linguagem simples, fontes legíveis e uma paleta de cores reduzida. O espaço negativo (ou espaço em branco) na página também é desejável. Mantenha a consistência. Elementos de UI design, como botões, microcópias, layout de página e esquemas de cores, devem permanecer uniformes em todo o seu site. Siga convenções gerais de design, como colocar um menu na parte superior da página. Evite jargão. Faça seus visitantes se sentirem confortáveis em seu site usando uma linguagem que não seja intimidadora nem tenha termos técnicos desnecessários.
Em outras palavras, seu objetivo é um design limpo e atraente, com elementos visuais intencionais que forneçam aos usuários as informações necessárias, quando necessário.
2. Deixe o usuário conduzir a experiência
O UI design também é uma oportunidade para conhecer seu público. Com pesquisas de mercado ou até mesmo informações demográficas disponíveis através de contas de redes sociais, você pode explorar suas necessidades e interesses. Ganhe insights colocando-se no lugar dos usuários e mapeando o que os motiva a visitar seu site. Quais botões e informações visuais os usuários querem que estejam em evidência? O que usuários mais experientes podem querer que fique escondido? Priorizando seu público, você permite que as necessidades dele ditem a interface.
Outra maneira de permitir que os usuários conduzam a experiência é permitindo que eles desfaçam uma ação sem consequências negativas. Isso torna a exploração do site mais acessível e segura, sabendo que eles podem sempre voltar atrás e retornar mais tarde se se deparar com sequências tediosas de inserção de dados. As chamadas trilhas de migalhas, que mostram aos usuários onde estiveram e para onde estão indo, ajudam a criar um mapa mental do site e a encontrar informações mais facilmente. (Por exemplo, a trilha acima do título deste post, que diz: Início > Blog Shopify > Princípios de Design de UI.)
3. Torne intuitivo
Boas interfaces de usuário são intuitivas, com tudo exatamente onde o usuário espera. Nem as marcas mais “disruptivas” não quebram as expectativas do usuário em seu UI design. Em vez disso, o objetivo deve oferecer uma experiência de usuário fluida.
Padrões familiar, modelos, escolhas de fontes e layouts de página reduzem a carga cognitiva do visitante. Isso também significa que você não precisa reinventar a roda ou explicar cada decisão de design. Os pequenos menus de três linhas no topo de cada aplicativo funcionam porque sabemos o que eles fazem.
4. Seja acessível
O daltonismo afeta cerca de 5% da população masculina adulta mundial e 0,5% da população feminina. A Organização Mundial da Saúde relata que 253 milhões de pessoas têm algum tipo de cegueira ou deficiência visual, 466 milhões têm surdez e perda auditiva, e mais 200 milhões têm deficiências intelectuais.
Projetar um bom site significa projetar um bom site para todos. A Iniciativa de Acessibilidade da Web WCAG fornece diretrizes detalhadas para designers de UI. Uma regra prática é não depender de um único elemento para toda a comunicação. Dois botões rotulados “Sim” e “Não” também poderiam ter um sinal de visto e um X em cada um, respectivamente. Colori-los de verde e vermelho pode adicionar outra camada de comunicação, garantindo que o daltonismo ou as habilidades de leitura não impeçam um usuário de navegar pelo site.
O princípio anterior – “Torne intuitivo” – também ajuda aqui. Símbolos e frases padronizados mantêm todos em um terreno sólido. Iconografias, como o ícone do carrinho de compras, o símbolo do dólar e os sinais de visto são amplamente reconhecidos, permitindo que usuários de todos os tipos naveguem facilmente.
5. Informe os usuários quando as coisas estão funcionando…
Os usuários gostam de saber quando as coisas estão funcionando. Considere adicionar uma animação leve quando um botão for clicado para confirmar a ação, uma página de agradecimento para fechar o ciclo em uma transação ou preenchimento de formulário bem-sucedido, uma barra de progresso se uma função demorar para carregar, ou uma série de requisitos que gradualmente ficam verdes ao tentar criar uma senha. Todas essas opções podem proporcionar aos seus visitantes aquela sensação familiar de conclusão.
6. …Mas planeje para quando não funcionarem
Todos vivemos isso: clicar com raiva quando um site ou um software não funciona como deveria. Uma boa UI mitiga isso fornecendo feedback imediato e informativo.
Prepare-se para quando as coisas não saírem como esperado. Mensagens de erro bem projetadas e páginas 404 são claras e úteis, redirecionando o usuário para outra coisa. Detalhes como esses mostram aos clientes que eles estão em um ambiente de compras funcional e confiável: Eles significam, “Não se preocupe. Nós sabemos e estamos cuidando disso.” (Pense na famosa “baleia da falha” do Twitter – a alegre beluga sendo levantado das ondas por um bando de pássaros – que costumava aparecer quando a plataforma enfrentava uma interrupção de serviço. (A baleia da falha foi aposentada no verão de 2013, mas permanece como um símbolo nostálgico dos primeiros tempos do Twitter, quando lutava para lidar com altos volumes de tráfego.)
7. Abrace a iteração
Pense no processo de design como um loop iterativo sem um verdadeiro ponto final. Trata-se de repetir etapas para melhorar. Após a implantação, reserve um momento para ver como seu design funciona antes de avaliar os dados e fazer ajustes.
Você pode abraçar a iteração de muitas formas; talvez ouvindo o feedback dos clientes, contratando usuários para testar um site ou mergulhando em análises para ver quais páginas têm uma alta taxa de rejeição ou onde a conversão é menor do que o esperado. Pequenas mudanças no design de uma página de checkout, por exemplo, podem corrigir um funil de vendas vazando.
Todos os usuários e todos as empresas são diferentes, portanto, um pouco de tentativa e erro é esperado. Com alguns ajustes, um bom UI design pode tornar seu site mais bonito, amigável e lucrativo.
Perguntas frequentes sobre princípios de UI design
Quais são os principais princípios de UI design?
Os principais princípios de UI design são:
- Conforto para o usuário
- Deixe o usuário conduzir a experiência
- Torne óbvio
- Seja acessível
- Informe os usuários quando as coisas estão funcionando…
- …Mas planeje para quando não funcionarem
- Abrace a iteração
Quais são as fases do UI design?
As seis fases do UI design são análise (definir os objetivos e expectativas do usuário e do negócio), design (esboçar, criar wireframes e protótipos de um fluxo real de usuário pelo site), desenvolvimento (transformar o design em um produto web utilizável), implantação (testar bugs e lançar), avaliação (medir a eficácia do UI design por meio de testes de usuário, feedback e análises) e iteração (usar os resultados da avaliação para aprimorar o design).
O que torna um UI design bom?
Um bom UI deve efetivamente impulsionar os indicadores-chave de desempenho (KPIs), ser esteticamente agradável, intuitivo para os usuários e amplamente acessível.
