Como criar fluxos de usuários para comércio eletrônico

Imagine que você está criando um novo site para sua loja online. Você entra em um construtor de páginas como o WordPress e começa a adicionar seções às páginas, decidindo que a barra de navegação deve ser centralizada ou que o clipe Sobre deve vir primeiro.

Ou talvez você já tenha um site e decidiu que poderia ficar melhor, então você começa a realocar imagens, texto e CTAs.

Independentemente disso, erros já foram cometidos: em ambos os casos, não há estratégia ou fluxo de usuários presente. O design é escolhido casualmente, salpicado como uma autêntica pintura de Jackson Pollock.

Fã ou não de Pollock, suas pinturas nunca tiveram que passar de um estágio do funil para o próximo.

Na nova era das compras online, ter um site de comércio eletrônico é fundamental – um aplicativo, potencialmente benéfico.

Mas ter um site bonito não é suficiente da mesma forma que atrair muito tráfego é um desperdício, a menos que converta (ou seja, compre seus produtos). Você precisa de um site projetado para guiar seus leads no caminho da conversão.

Um site bem projetado não começa com a escolha de sua fonte e animação favoritas. Ele começa com o mapeamento de seus fluxos de usuário.

O que é um diagrama de fluxo de usuário?

Os diagramas de fluxo do usuário – também chamados de fluxogramas do usuário, diagramas de fluxo de tarefas e diagramas de fluxo da interface do usuário – mostram o caminho que um usuário percorre em seu site ou aplicativo para atingir uma meta ou tarefa. Ao ilustrar as etapas que um usuário executa para fluir de uma página para outra até concluir sua tarefa (como comprar um produto), você entende como incentivar a conclusão da tarefa.

Exemplo de diagrama de fluxo do usuário do UX Collective.

O papel dos fluxos de usuário no design de UX

O design da experiência do usuário (design UX) trata da criação de designs centrados no usuário. Ao colocar seus usuários, também conhecidos como clientes em potencial, no centro de suas escolhas de design, você aprimora a experiência deles e aumenta as chances de eles navegarem até o final da venda.

Os fluxos do usuário revelam como os usuários interagem com o design do seu produto, levando em consideração as ações do usuário e a funcionalidade do produto necessária para criar uma conversão.

Crie um diagrama de fluxo do usuário antes de iniciar o processo de design para informar as necessidades do seu site. Estrategistas, designers e desenvolvedores web usam fluxos de UX para identificar deficiências de produtos e entender o escopo de um projeto, incluindo o número de páginas, componentes para cada e arquitetura de informação de tudo.

Você também pode criar fluxos de usuário após o desenvolvimento do site para identificar áreas para simplificação e melhoria.

Exemplo de diagrama de fluxo do usuário do Creately.

Fluxos de usuário de alto nível x detalhados

Os fluxos de usuário de alto nível são rápidos e breves, criados para fornecer uma visão geral rápida de uma ideia ou processo.

Fluxos de usuário detalhados, ou fluxos de tarefas, são mais úteis, detalhando todas as etapas e decisões envolvidas na conclusão de uma tarefa. Diagramas de fluxo detalhados são o que você deseja criar para informar o design e o conteúdo do seu site de comércio eletrônico.

Alguns diferenciam fluxos de usuários de fluxos de tarefas em que fluxos de usuários enfatizam que uma tarefa pode ser concluída de forma diferente pelos usuários com base na persona e no ponto de entrada.

Fluxos do usuário versus jornadas do usuário

Os fluxos do usuário são diferentes dos mapas de jornada do usuário que descrevem a experiência de ponta a ponta de um usuário com um produto. Onde os fluxos são puramente baseados em ação, as jornadas do usuário levam em consideração fatores como as emoções do usuário.

Os mapas de jornada do usuário e os mapas de jornada do cliente às vezes são usados ​​de forma intercambiável, mas isso só funciona quando o usuário e o cliente são a mesma pessoa, o que nem sempre é o caso. Por exemplo, um empregador (o cliente) pode comprar uma ferramenta online para seus funcionários (os usuários) usarem.

Como criar diagramas de fluxo de usuário

1. Decidir sobre o propósito do diagrama

O que o diagrama de fluxo do usuário inclui dependerá do seu objetivo e da tarefa que você está acompanhando. Limite o número de metas ou tarefas por diagrama; traçar apenas um de cada vez é o melhor. Olhar para mais de um pode complicar e sobrecarregar o diagrama, tornando-o menos eficaz.

Dê ao fluxo do usuário um título claro com base em sua finalidade para referência futura.

2. Entenda seu usuário típico

Uma compreensão de seus usuários ajudará a informar a navegação do fluxo de tarefas que funciona melhor e o conteúdo a ser incluído em cada página.

Conduza pesquisas de usuários para reunir:

• Metas
• Motivações
• Recursos desejados
• Nível de experiência/conhecimento
• Barreiras

Esses fatores podem mudar para diferentes segmentos de público e estágios ao longo da jornada de compra, mas você os usará para determinar o que acontece em cada página da Web, como projetar cada página e para onde vincular.

As metas do usuário e da empresa devem estar alinhadas para que você possa criar fluxos de sites de comércio eletrônico que atendam a ambos.

Estudar os fluxos de sua concorrência também pode fornecer informações.

3. Crie uma chave de fluxo de tarefas

Não há regras rígidas para a aparência do seu diagrama de fluxo de tarefas, desde que você seja consistente e forneça uma chave para cores e formas usadas para que outras pessoas possam entendê-lo.

Os símbolos de fluxo de usuário comuns incluem:

Outras formas às vezes usadas incluem triângulos, paralelogramos inclinados e formas tracejadas (em vez de contornos sólidos). Você pode ser tão específico quanto quiser, alternando formas para itens adicionais, como tarefas do sistema, elementos de entrada ou seleções/cliques.

Quaisquer cores usadas devem contribuir para o significado e a legibilidade do fluxograma do usuário. Considere como a cor pode ajudar a agrupar itens, identificar elementos e revelar padrões.

Outros tipos de fluxogramas de usuário

Como os fluxogramas do usuário são exclusivos do seu site, nem todos seguem a prática comum de usar formas e cores.

Outro estilo de fluxo de usuário é modelado a partir dos diagramas de estado usados ​​em ciência da computação. Os diagramas de estado variam em aparência, mas você pode escrevê-los como uma série de frações com setas orientando o fluxo do processo de comércio eletrônico. As frações incluem o que o usuário vê acima da linha de fração e o que o usuário faz abaixo dela, assim:

Há também fluxos de usuários modelados a partir de mapas do site. Além das ações realizadas, eles apresentam cada página da web envolvida no fluxo do usuário com uma lista de todas as seções e subseções dessas páginas. Em seguida, setas ou linhas mostram quais seções de página e CTAs levam os usuários à próxima etapa do fluxo.

Exemplo de fluxo de usuário de Salinthip Kaewkerd no Behance.

4. Esboce seu diagrama de fluxo de usuário

Com seu formato decidido, você pode começar a mapear seus fluxos de tarefas. Comece com o ponto de entrada escolhido para seu diagrama específico e liste todas as etapas entre o ponto de entrada e a conclusão da tarefa.

Os pontos de entrada podem ser qualquer fonte que leve um usuário ao seu site, incluindo anúncios, mídias sociais, resultados de pesquisa orgânica, links externos, campanhas de e-mail e muito mais. Os aplicativos tendem a ter menos pontos de entrada do que os sites.

As etapas a seguir (a essência do diagrama de fluxo da interface do usuário) dependerão da tarefa que você escolheu mapear. Eles podem incluir itens como formulários de login e inscrição, navegação de produtos, processos de checkout ou integração. Considere como o usuário chega a cada página, todas as ações que ele pode realizar nela e para onde ele vai a partir dessa página para progredir em direção ao seu objetivo.

A etapa final no fluxo do usuário não deve ser a ação do usuário que conclui a tarefa, mas a funcionalidade que confirma a conclusão para o usuário.

Se você estiver atualizando um site de comércio eletrônico atual, poderá usar os relatórios de fluxo de comportamento do Google Analytics para obter informações sobre a origem de seus usuários, como eles navegam em seu site e de onde saem.

Ao mapear seu fluxo de usuário, você notará que há vários caminhos que um usuário pode seguir para concluir uma tarefa. Ramos ou nós serão interrompidos nesses pontos para continuar mapeando os caminhos primários.

Ao criar diagramas de fluxo, você pode aumentar a legibilidade limitando o número de direções em que eles se movem. Se você acabar com setas apontando em todas as direções, seu diagrama começará a parecer mais um labirinto. Existem muitas ferramentas de fluxo de usuário disponíveis para criar diagramas funcionais.

5. Reduza seus fluxos

Depois de criar seu diagrama de fluxo do usuário, é hora de sacar suas tesouras. Esta etapa envolve três edições significativas:

1. Removendo informações que não são essenciais para visualizar o fluxo
2. Mover detalhes fora da navegação pura do usuário para um mapa de jornada
3. Identificando etapas que são redundantes ou desnecessárias

Esta última etapa é menos para visualizar o fluxo de navegação e mais para o usuário cuja experiência você está melhorando. Quanto mais decisões e ações um usuário tiver que tomar para concluir uma tarefa, menor será a probabilidade de fazê-lo. Simplifique seu fluxo de usuários o máximo que puder para aumentar as chances de conversão.

6. Etiqueta com intenção

Rotule todos os elementos do seu diagrama de fluxo do usuário com clareza. Deve ficar claro a que cada forma, página, seção ou ação está se referindo. Evite usar taquigrafia se isso diminui o significado. Quando terminar, peça a alguns colegas de trabalho que revisem seus fluxos de usuário para ver se eles podem interpretá-los.

Otimize seus fluxos de usuários com dados

Ao criar um novo site ou testar novos designs ou conteúdo, considere examinar os fluxos de usuários da vida real e compará-los com suas expectativas, conforme retratado em seu diagrama de fluxo. Se surgirem discrepâncias, você pode usá-las para corrigir seu diagrama de fluxo ou editar a própria interface do usuário para orientar os usuários da maneira que você planejou. Vários métodos de pesquisa de UX testam os fluxos de usuários, incluindo testes de usabilidade, análise de tarefas e testes de árvore.

Você também pode usar dados do Google Analytics ou pesquisas para ver onde pode otimizar seu fluxo de usuários para aumentar as vendas. Ao criar sites de comércio eletrônico, os fluxos de usuários são vinculados ao funil de vendas do comércio eletrônico. É natural que os usuários desçam à medida que avançam no funil (daí o formato do funil), mas pontos de desistência drásticos indicam áreas de melhoria.

E, muitas vezes, melhorias significam otimizar seu fluxo de usuários, seja tornando a navegação mais natural, editando design ou adicionando cópia direcional.

As quedas no fluxo também podem resultar de escolhas de negócios: um aumento nas taxas de rejeição depois que os compradores em potencial veem o custo do frete indica que as altas taxas de frete provavelmente são o problema.

Analise as etapas em torno das taxas de rejeição e crie hipóteses sobre qual pode ser o problema (e a solução). Teste A/B de suas soluções até que as desistências diminuam e mais usuários passem para a próxima etapa.

Diferenciando o fluxo do seu site de comércio eletrônico

Os fluxogramas de comércio eletrônico tendem a seguir um padrão semelhante: descobrir uma página externamente, entrar na página, ver produtos, adicionar produtos ao carrinho, finalizar compra, receber confirmação.

Embora essas sejam todas as etapas envolvidas no comércio eletrônico por natureza, vale a pena considerar sua proposta de valor e público exclusivos ao projetar fluxos de usuários.

Você pode oferecer mais? Seus usuários podem se beneficiar de recursos adicionais?

Algumas lojas de comércio eletrônico misturam jornadas do usuário e fluxos de tarefas, incluindo questionários de personalização ou recursos de teste. O Virtual Artist da Sephora, por exemplo, permite que os usuários simulem a aparência da maquiagem antes de comprar em casa.

Outro lugar para se diferenciar no comércio eletrônico que muitas vezes é esquecido ao projetar fluxos de usuários é a pós-compra. Confirmar a compra de um cliente nunca é o fim da jornada do cliente. Agora eles precisam rastrear seu pacote, aguardar ansiosamente sua chegada, desembalá-lo com entusiasmo e potencialmente devolvê-lo. Vale a pena considerar como você pode melhorar a experiência do usuário com envio, páginas de agradecimento e vendas adicionais.

Ao criar fluxos para sites e aplicativos de comércio eletrônico, lembre-se de todas as etapas do funil de comércio eletrônico:

• Consideração
• Avaliação
• Comprar
• Pós-compra

Impulsione as vendas com fluxos de UX eficientes

A experiência do usuário é mais do que um design bonito que os usuários gostam de ver. Está projetando a arquitetura de informações e o conteúdo que orienta os leads pela jornada do comércio eletrônico em direção à conversão.

Trata-se de construir um site ou aplicativo que um usuário possa navegar com facilidade, passando de um estágio para o outro, encontrando o produto que está procurando e clicando no CTA certo quando chegar a hora.

Acumular muitas etapas entre o ponto de entrada e o ponto de venda significa pedir-lhes que trabalhem mais; poucos passos podem não ser suficientes para resolver suas hesitações, o que significa pedir-lhes que assumam um risco maior. Ninguém gosta de trabalho ou risco ao comprar online.

Mapear um fluxo de usuários eficiente para cada uma das tarefas em seu site é uma forma eficaz de identificar pontos de atrito do consumidor, para que você possa projetar um produto digital que proporcione uma maior experiência ao usuário e, consequentemente, impulsione as vendas.