💻 🤦🏾 🏕️ Fluxo do usuário: como criar aplicativos e sites populares ♈️ 😡 👩‍👧‍👧

Olá a todos!

Sou Maxim Skvortsov, designer de UX / UI da Omega-R, uma empresa internacional para o desenvolvimento e integração de soluções de TI. Projecto e visualizo as interfaces de aplicações móveis e web.

Com base na minha experiência no campo da tecnologia da informação e no conhecimento da empresa, quero compartilhar minha visão e abordagem do uso de uma das ferramentas de design - fluxo do usuário. Por que é usado e por que é um assistente valioso para um designer? Como é o fluxo do usuário e como criá-lo?

imagem

O que é o fluxo do usuário?

Situação: Você encontrou um novo aplicativo que promete fazer exatamente o que deseja e pressiona ansiosamente o botão de download. Após um momento, o aplicativo é iniciado e você está pronto para começar. Mas primeiro você precisa registrar uma conta e conceder ao aplicativo permissão para acessar sua localização e enviar notificações por push. Depois disso, você precisa percorrer todo o tutorial, o acordo sobre o uso de dados pessoais etc. A verdade amarga é que é mais provável que o usuário nessa interação feche e desinstale o aplicativo, independentemente de sua funcionalidade. É por isso que é tão importante otimizar o caminho do usuário no aplicativo com o fluxo do usuário.

O fluxo do usuário é uma representação visual da sequência de ações.que o usuário executa para atingir seu objetivo . Pode abranger uma função específica ou todo o produto.

Para fazer uma sequência, é necessário realizar um estudo e responder a três perguntas básicas :

Quem é o usuário?
Qual é o seu propósito?
Que medidas ele deve tomar para conseguir isso?

Essas são as principais perguntas que às vezes podem ser difíceis de fornecer respostas claras, portanto, as perguntas de suporte podem ajudar:

Para que o usuário usará o aplicativo?
O que motiva o usuário a atingir esse objetivo?
Como o aplicativo ajuda você a alcançar seu objetivo?
O que pode impedir um usuário de usar o aplicativo?
Quais qualidades de um produto ou serviço são mais importantes para o cliente e os usuários? Quais são as perguntas, dúvidas e hesitações?
Quais qualidades do aplicativo são mais importantes para o usuário?
Quais informações os usuários precisam para concluir uma ação?
Que tipo de gatilho emocional os leva à ação?

No processo de design, muitas questões sempre devem surgir. A busca de respostas para eles oferece uma oportunidade para considerar todas as pequenas coisas de todos os lados. Somente nesse caso o resultado pode ser um produto realmente conveniente.

O fluxo do usuário é uma história sobre um usuário.

O fluxo do usuário permite que você observe a interação do usuário e o aplicativo através dos olhos do usuário.

Se sites completos fornecem espaço suficiente para a criatividade, o desenvolvimento de aplicativos móveis sempre nos obriga a buscar um equilíbrio entre funcionalidade e usabilidade. Por um lado, os usuários devem acessar facilmente as funções mais importantes na tela principal do aplicativo, sem muitas etapas adicionais, clicando facilmente nos botões grandes. Por outro lado, quando falamos de aplicativos, não se trata apenas de botões.

Suponha que você esteja criando um aplicativo para um music player. Por um lado, você deseja que o usuário possa tocar suas músicas favoritas com um toque. Por outro lado, eles precisam de uma maneira de determinar as faixas favoritas, procurar novas músicas (possivelmente em vários lugares), controlar o volume e ajustar o equalizador, classificar músicas, embaralhar a lista, ler a biografia do artista, fazer compras e ter todas as outras funções do reprodutor à mão. O usuário deseja compartilhar recomendações e listas de reprodução nas redes sociais e ver o que seus amigos estão ouvindo.

Se o usuário navega na loja online enquanto ouve a lista de reprodução e decide pular a faixa atual, ele não precisa fechar a loja e voltar por várias etapas do menu - o acesso a esse botão de pular deve estar na mesma tela.

Criar o aplicativo mais funcional não é tão difícil, mas reunir tudo da maneira mais atraente e fácil de usar é uma tarefa muito mais difícil. Se a empresa desenvolvedora não lidou com isso e não criou o aplicativo intuitivamente, ele permanecerá não reclamado nas histórias. É sempre mais fácil para o usuário baixar um aplicativo mais compreensível do que gastar tempo lendo manuais e tutoriais ou passear sem parar por ele em busca de significado.

Função de designer

Imagine que você está trabalhando em um produto em uma equipe, onde há gerente de projetos, desenvolvedores de back-end e da Web. Suponha que exista até algum tipo de tarefa técnica do cliente, que seja escrita em detalhes suficientes e de maneira sadia. Resta apenas pegar e fabricar um produto.

O que um designer deve fazer? A julgar pelo resultado esperado, desenhe todas as telas necessárias para que o produto final seja conveniente e bonito e entregue-o aos desenvolvedores.

Em geral, sim. Mas há uma parte subaquática de um iceberg. Muitas coisas estão escondidas lá, nas quais poucas pessoas pensam. Todos nós gostamos de interfaces convenientes e intuitivas, adoramos quando tudo funciona logicamente e o resultado de qualquer interação é previsível. E para que tudo isso aconteça, você precisa trabalhar cuidadosamente todos os detalhes.

Para isso, você precisa de um fluxo de usuários - ele ajudará a determinar as maneiras de atingir a meta, calcular cenários positivos e negativos no caminho escolhido para atingir as metas de nossos usuários em potencial. Torna possível entender se todos os processos no produto têm uma conclusão lógica e são construídos com eficiência, para que o usuário gaste um tempo mínimo para atingir a meta.

Importante: quanto maior o problema e mais funções, mais cenários você precisará trabalhar.

Assim, o fluxo do usuário ajuda a eliminar um erro comum ao criar uma lista de funções necessárias e simplesmente projetar interfaces com base nelas. Essa abordagem é, obviamente, possível. Mas isso pode levar a cenários de interação com a interface, fazendo com que o usuário execute muitas etapas para executar operações simples.

Valor para a equipe do produto

O fluxo do usuário ajuda no nível superior a coordenar cenários com o cliente para o produto ou funcionalidade. Especialmente quando os clientes não têm requisitos específicos e detalhados (quando eles próprios não entendem bem o que querem). Nesse caso, o fluxo do usuário pode dar alguma orientação aos clientes, e eles já lhe dirão em quais lugares eles gostariam de mudar a lógica, fornecendo seus comentários - na forma de um comentário ou ajustando independentemente o esquema atual. Apesar de criar um fluxo de usuários parecer um processo complicado e demorado, ajuda a eliminar muitos erros durante o desenvolvimento do produto. Com a ajuda dele, como dizem, "aproveite lentamente, mas ande rapidamente".

Para o PM, com base no fluxo do usuário, é conveniente iniciar tarefas para desenvolvedores - é bastante óbvio e transparente que mudanças precisam ser feitas na lógica atual ou que novas funções serão adicionadas.

Os testadores podem preparar casos de uso (testes) e listas de verificação, pois demonstram scripts amigáveis em um formato conveniente.

O fluxo do usuário é muito útil para a equipe, especialmente quando a composição da equipe é grande o suficiente - você não precisa explicar separadamente a lógica do trabalho. Assim, o fluxo do usuário envolve o cliente no processo de design, motiva a equipe, direciona todos os processos de trabalho em uma única direção, pois cada membro da equipe vê a imagem como um todo.

Valor para o cliente

Um usuário quase sempre é quem compra ou usa um produto ou serviço ou está potencialmente pronto para fazê-lo. De quão confortável esse processo é construído, sua lealdade do usuário depende. Não importa como ele adquira um produto ou serviço - no escritório, por telefone, com um especialista visitando a casa, pelo site, pelo aplicativo - a maneira de adquirir e usar deve ser a mais simples possível.

Quanto aos sites e aplicativos móveis, o fluxo do usuário é como o usuário navegará no conteúdo (texto, imagens, áudio, vídeo). O fluxo do usuário inclui a priorização de requisitos de conteúdo, barreiras à navegação e a busca pelas rotas mais rápidas e sem problemas para a ação de destino. Essencialmente, o fluxo do usuário está diretamente conectado ao funil de conversão, e a empresa de TI que usa o fluxo do usuário desenvolve automaticamente um funil de conversão eficaz ou otimiza um funil existente.

O resultado da assistência prestada a ele na consecução do objetivo incorporado no design, graças ao fluxo do usuário, é um usuário feliz e interessado. Um usuário feliz e interessado significa mais tempo gasto no aplicativo ou no site, menores taxas de rejeição, maiores taxas de conversão e melhor experiência do usuário.

Assim, o fluxo do usuário afeta diretamente o sucesso do site ou aplicativo móvel e o lucro do cliente. O usuário se torna o centro do design, e isso coincide completamente com o princípio do foco do cliente nos negócios.

Com o que se parece?

Eu nunca vi um padrão claramente definido de acordo com o qual o design do fluxo do usuário ocorra. A representação do fluxo do usuário pode ser diferente e depende de quão bem tudo precisa ser trabalhado. É importante atingir seu objetivo como designer - para que o cliente e a equipe do produto entendam como o usuário terá acesso a uma função específica, onde eles estarão localizados e como irão funcionar.

O fluxo do usuário pode ser representado como combinações de:

fluxo de tarefas
fluxo de fio (lo-fi)
fluxo de tela (hi-fi)

Vamos olhar para cada um deles e ver como eles podem parecer. Como exemplo, tomamos a loja online de eletrodomésticos. Defina o usuário, seu objetivo e etapas para alcançá-lo.

Seja nossa usuária uma jovem mãe cujo objetivo é comprar um processador de alimentos multifuncional. Um cenário na sequência de etapas pode ser assim:

abrir o site da loja;
digite na pesquisa "processador de alimentos";
Compare vários produtos dos resultados da pesquisa
coloque o produto que você gosta na cesta;
faça uma compra;
pagar;
feche o site.

Fluxo de tarefas

O fluxo de tarefas é uma representação simples do que o usuário faz em cada etapa para atingir uma meta ou tarefa. Este é essencialmente um fluxograma clássico que define essa sequência.

imagem

Esse esquema não reflete convenções e outros problemas que precisam ser abordados. E o que acontecerá se nada for encontrado pelos resultados da pesquisa? E o que acontecerá se o pagamento não for bem sucedido? Aqui, são apresentadas apenas etapas gerais que podem envolver muitas ações: por exemplo, a pesquisa pode ser expandida com muitos filtros, o caminho do pagamento depende da escolha da ferramenta de pagamento, etc.

Para elaborar um diagrama, você pode usar a lista de elementos necessários e suficientes dos diagramas de blocos clássicos mostrados na figura ou usar o padrão BPMN - Destina-se a especialistas técnicos e usuários de negócios.

imagem

Fluxo do fio (lo-fi)

O fluxo de arame é uma combinação de fluxograma e wireframes. A estrutura de arame é um esboço pouco detalhado do design da tela, cuja ênfase não está no componente visual, mas na localização dos elementos, na estrutura e no conteúdo da tela.

No fluxo de arame, em vez de elementos do fluxograma, são apresentados layouts de tela esquemáticos, com os quais o usuário interage no caminho para alcançar a meta. Não há necessidade de se concentrar nos detalhes visuais e desenhar cada botão e ícone. Na maioria das vezes, a ênfase está nos elementos de navegação no design de cada página individual.

Os fluxos de fio são especialmente úteis ao criar telas móveis: os tamanhos relativamente pequenos de telas móveis são facilmente usados para substituir elementos mais abstratos dos fluxogramas. Os fluxos de arame são confortáveis para a formação e aprimoramento de especificações técnicas, mas dificilmente são adequados para a fase de teste.

Um exemplo desse esquema:

imagem

Fluxo da tela (hi-fi)

Aqui estamos falando de telas elaboradas que são compreensíveis para usuários e desenvolvedores. Geralmente, a ênfase é colocada nos elementos de navegação e em algumas nuances de comportamento. Ele pode ser usado como um documento regulatório para aprovar o design de layouts.

O fluxo da tela pode ser chamado essencialmente de protótipo se você adicionar interatividade a ele. Sua característica é a alta precisão ou a perfeita correspondência de pixels: leva em consideração o tamanho físico da tela e apresenta todos os detalhes visuais e tipográficos do produto. Os elementos de fluxo de tela são na verdade layouts de tela de um aplicativo finalizado.

O cliente do aplicativo pode ser agradavelmente surpreendido com a velocidade do desenvolvimento quando você mostra a ele o fluxo da tela e pode pensar que o desenvolvimento está próximo da conclusão. Como regra, informamos antecipadamente ao cliente que não há código por trás do fluxo da tela, mas a presença do fluxo da tela garante ao cliente que UX e UI bem preparados serão seguidos por um código igualmente perfeito.

Exemplo de fluxo de tela:

imagem

Abaixo está um exemplo de como um híbrido de fluxogramas clássicos, imagens esquemáticas e layouts finais pode parecer no agregado.

imagem

Como você sabe, o mais demorado é o mais elaborado - o fluxo da tela. Parece um aplicativo funcional e está pronto para prototipagem interativa, testes, novas iterações, aprovação e transferência para desenvolvedores. Existem muitas ferramentas de automação para o design da equipe de fluxo do usuário, incluindo Overflow, Miro, Flowmapp e outras.

Assim, o fluxo do usuário, abrangendo todo o produto, sistematiza e estrutura o processo de sua criação, orienta ao máximo a equipe do produto para as necessidades do usuário e seu entendimento comum, permite criar um produto extremamente compreensível e intuitivo analisando os cenários do usuário. Tudo isso não apenas acelera significativamente a velocidade de desenvolvimento, mas também aprofunda a interação com o cliente. O fluxo do usuário faz uma empresa de TI sempre pensar nos requisitos de negócios do cliente para criar um aplicativo mais eficiente e bem-sucedido do que é possível dentro do orçamento e do tempo alocados sem usar o fluxo do usuário.

Fluxo do usuário: como criar aplicativos e sites populares