Site Map, User Flow e Fluxos

Rápido e fácil

Thami Guarinho
Ladies That UX PT
Published in
4 min readJul 1, 2020

--

Percebi que é bem comum profissionais fazerem uma certa confusão a cerca de alguns conceitos de ferramentas de arquitetura de informação, fluxos e interações.

Decidi fazer um guia bem rápido e didático a cerca dessas ferramentas. E o mais importante: quando, por que ou qual momento a ser usado(s)?

Site Map

Ele te ajuda a visualizar toda a arquitetura de informação de um site. ( Todo site ou aplicação tem um, ou deveria) Ele nasce como a organização visual de toda a AI. O que vemos com certa frequência é o site crescer de forma frenética sem nenhum tipo de planejamento, como consequência não tendo um Site Map oficial, sem nenhum tipo de atualização também.

Importante: Site Map não indica interações entre as páginas, mas sim a estrutura de todo o conteúdo, quais páginas se relacionam e seus níveis de navegação.

Níveis de Navegação

Ao definir o Site Map, estabeleça os níveis de navegação (primária, secundária …). Páginas mais importantes? Navegação primária. Assim promovendo a hierarquia da informação ( sempre com a referência do seu Usuário x Negócio ). Desde as principais informações até as menos visitadas, como páginas Jurídicas ( informações de rodapé).

Na prática

Detalhe de um sitemap da vida real.

Nesse produto precisei organizar a AI de uma dashboard e também visualizar todos os pontos de encontro das páginas. Essa visualização contribui tanto para a experiência, indicando onde as interações na interface devem ser feitas, quanto para o Dev-team, deixando claro as informações que devem ser tratadas.

User Flow

User Flow nos mostra os steps que o usuário faz para alcançar um objetivo definido. Ele valida essas etapas, sendo possível identificar possíveis Gaps na jornada.

Diferente do site map: As páginas são mostradas na ordem em que o usuário tem contato de acordo com o seu objetivo, representando assim suas decisões e feedbacks do sistema.

Alguns materiais utilizam diferentes formas para representar uma página, uma decisão ou ações. lembre-se nada é escrito em pedra, utilize legendas e formas que seu time/stakeholders compreendam, o importante é todos estarem alinhados.

Uma das coisas mais legais do User Flow é o nosso primeiro contato com a experiência do nosso usuário tentando completar uma tarefa. Aqui você também tem a possibilidade de mapear vários objetivos e todas as suas possibilidades.

Ele tanto pode ser em formato de diagrama, como a imagem acima, quanto evoluir para um protótipo mais visual ( baixa, média ou alta fidelidade), ambos ainda são User Flows. O modo de utilizar vai depender do seu objetivo no momento. Geralmente usamos o diagrama para ter uma primeira validação do fluxo, ou testar diversos objetivos e o protótipo quando queremos validar interações diretamente ligadas a interface.

Tenha em mente:

  • Para quais personas esse User flow é?
  • Qual "estória do usuário" ou objetivos você deseja validar ou documentar.
  • De onde o seu usuário está vindo? outro site, uma lading page, uma plataforma?

Na prática

User Flow da vida real em diagrama.

Aqui validei alguns objetivos principais do usuário. Com os fluxos pude ver de forma clara alguns Gaps, possíveis decisões e desejos. Nesse ponto fica bem mais claro quais fluxos são necessários estarem no protótipo, seus níveis de detalhamento ou em quais interações devemos nos preocupar mais.

Façam testes

Eu sei que pode ser um desafio dependendo da sua empresa ou posição conseguir com que protótipos sigam para testes e sejam validados com usuários reais. Mas estou aqui para fazer com que você não desista! todos só tendem a ganhar com os testes, identificando problemas em seus estágios iniciais ( ótimo artigo para se preparar para o convencimento dos testes em seu time: Tests Go First. Usability Testing in Design. )

Sem dúvida que melhor jeito de validar o seu user flow final é testar. Teste ainda no protótipo observando alguns pontos:

Seu usuário cumpriu facilmente os objetivos? Quais foram as suas barreiras? Poderíamos adicionar algo ou retirar ? O modelo mental está correto?

--

--