Negócios

O que é UX design e como você pode usá-lo para vender mais

Mandaê

Postado por Mandaê

Atualizado em maio 10, 2021 por Mandaê

user_experience

O que é UX Design (User Experience Design)? Basicamente, UX significa design de experiência do usuário, em tradução literal para o nosso idioma. Com esse conceito, surge outro termo para completar – e complicar – um pouco a definição: UI Design (User Interface Design), também denominado design de interface do usuário.

O que é UX design: diferenças entre UX e UI

Ambos são utilizados para se referir à interação de um usuário com um site, mas há controvérsias. Alguns autores e profissionais discordam e afirmam que todo designer é UX porque sempre trabalhará com experiências, independentemente de elas ocorrerem com produtos, numa loja física ou em um site.

Não é raro que um termo e outro sejam confundidos, mas a diferenciação é clara entre os profissionais: enquanto o UI lida com o layout, diagramação, botões, caminhos e lógicas responsáveis pela interface entre o design e a programação, UX é o resultado desse trabalho e como o usuário lida com a experiência proporcionada pelo UX.

Complicado? Ok, vamos simplificar com a tradução de um exemplo retirado do blog Web Designer Deplot:

  • UI é a sela, o estribo e as rédeas.
  • UX é a sensação produzida no usuário por conseguir montar um cavalo sozinho.

Como vender mais com UX Design

Em suma, podemos dizer que UI é o meio de atingir um resultado, que é o UX. O nome já diz tudo: a experiência é do usuário, mas a interface é responsabilidade da empresa que desenvolve. Embora cada um defina seus parâmetros, sites de sucesso seguem mais ou menos a mesma receita. Quanto mais eles seguem esses padrões, mais usuários aprendem a navegar nesses sites e “desaprendem” a navegar em qualquer outro site confuso.

Este artigo pretende ser um miniguia de UI e UX design. Mas não vamos nos prender aos termos técnicos, ok? Listamos abaixo as principais dicas de UX e UI design que você pode perceber mesmo sem conhecer o assunto a fundo e, quem sabe, aplicar esses novos conhecimentos à sua loja virtual?

1. First Scroll

O conceito de first scroll tem sido aplicado a muitos sites. Funciona assim: quando um usuário entra em uma página, a informação da home page aparece em blocos de tamanhos iguais. O primeiro bloco geralmente tem resolução completa na tela inteira do navegador com as principais informações “condensadas” sem que o usuário precise rolar.

Uma expressão que pode ser aplicada à regrinha do first scroll é “a primeira impressão é a que fica”. No segmento de serviços, é comum ver uma proposta de valor acompanhada de uma call to action e uma imagem simples ou genérica que não atrapalhe a linguagem verbal, como no site da Mandaê:

Já nos e-commerces, o first scroll na home page é geralmente um banner grande sozinho ou acompanhado de três outros banners logo abaixo com as promoções e seleções de produtos. Veja alguns exemplos:

Meltin' Pot aplica a regra do first scroll. Saiba mais sobre o que é UX design

Mesmo que não saiba o que é UX design ou UI design, talvez você repare que diferentes sites seguem mais ou menos a mesma estrutura e não se dê conta. Isso explica por que você consegue navegar na maioria das páginas que visita e por que se irrita com outros sites que fogem do padrão. Mas tudo isso começa com a criação de um wireframe.

2. O que é um wireframe

Wireframe é um desenho técnico, geralmente feito por arquitetos da informação ou UX Designers. É um desenho da estrutura do site que tem por objetivo mostrar os caminhos em que as páginas podem levar e elaborar um layout para cada página, pensando na padronização e usabilidade, com base nos dados de comportamento dos usuários disponíveis no Analytics e em outras ferramentas para e-commerce que fornecem informações interessantes sobre o comportamento dos seus visitantes, como os heat maps.

Depois da análise, cabe ao UI designer elaborar as imagens e os banners que vão compor cada uma das páginas. Veja o exemplo de um site estrangeiro que comercializa alimentos:

O que é UX design: saiba para que serve um wireframe

Agora, repare no site da Dafiti, brasileira do segmento de moda. Consegue enxergar semelhanças com o wireframe do exemplo acima? Não é mera coincidência.

O UX e UI designs são elaborados com base nos comportamentos e características mais frequentes: tamanho da tela, tipo de dispositivo, navegador, sistema operacional. Todos esses dados podem ser encontrados no Analytics, mas uma observação um pouquinho mais analítica dos padrões entre no UI de grandes varejistas podem ajudar bastante a melhorar a experiência na sua loja.

3. Captação de leads

Outro ponto comum entre os e-commerces é a abertura de um pop-up após um período em que o usuário tem o site aberto em uma aba, mas está inativo. O pop-up serve para estimular a conversão imediata de novos clientes e gerar cadastros para a base de contatos. Geralmente, é exibido apenas em versões desktop por conta de penalizações do Google a sites que utilizam pop-ups no mobile e prejudicam a usabilidade porque a tela é muito pequena.

Voltando à finalidade do pop-up na home, essa opção pode ajudar a formar uma base de clientes que servirá para o envio de e-mail marketing com promoções, cupons e seleção de produtos, ou até mesmo para aumentar as vendas de determinados produtos no site, como podemos ver o exemplo da Giovanna Baby, cliente da Mandaê:

4. Barra inferior

Meios de pagamento, redes sociais e informações institucionais costumam ficar na barra inferior do site. O consumidor já está condicionado a saber que essas informações estão afixadas ali, não importa a página do site em que estejam. Servem para facilitar a navegação e informar ao cliente os dados de contato e informações de segurança e pagamento sem que ele precise mudar de página, o que poderia minar a taxa de conversão.

Veja a barra inferior da Laboratório Fantasma, outra cliente que faz envios com a Mandaê:

5. Barra superior

Assim como a barra inferior, a barra superior é fixa e concentra as categorias de produtos da sua loja, o logotipo e a área de acesso restrito ao usuário – conta e carrinho. Dessa maneira, o visitante pode navegar entre todos os seus departamentos sem precisar voltar à página inicial todas as vezes. Abaixo outro exemplo da loja virtual da Laboratório Fantasma:

No post que escrevemos sobre categorias de produtos, falamos sobre a quantidade de categorias-mãe do seu site (7 em média) e sobre a criação dessas páginas e aplicação de filtros que facilitam a navegação. As barras superior e inferior sempre serão fixas, enquanto o “recheio”, o conteúdo que está entre as barras, muda à medida que a pesquisa no site se afunila.

6. Usabilidade

Todos esses recursos de um site têm que ser pensados a partir da versão mobile. O conceito de “mobile first” é real, não é mais um daqueles termos que surgem e desaparecem. Prova disso é a edição 43 da pesquisa Webshoppers, feita pelo E-bit, onde mostra que, no ano de 2020, 55,1% das vendas online foram concretizadas por dispositivos móveis. De acordo com a própria E-bit/Nielsen, navegar na internet pelo smartphone é muito mais acessível para a maioria dos consumidores, o que justifica o aumento no número de compras pelo celular.

Dicas extras

Essas são as noções mais básicas de UX design e UI design que você precisa ter em mente para planejar mudanças na sua loja virtual. O site ecomm.design pode ser uma fonte de inspiração interessante: é uma curadoria de design de sites de diversos países. Lá, você consegue notar semelhanças entre os UX designs e estruturas e ainda garimpar ideias para a sua loja virtual.

Leia também:

Design sprint e customer development: conheça essas técnicas que estão impulsionando a Mandaê
Como criar banners sem usar Photoshop