Template de fluxo de tela
Validar componentes visuais de tela em um fluxo de usuário.
Sobre o Template de Fluxo de Telas
Os fluxos de tela (também conhecidos como "wireflows") são uma combinação de wireframes e a criação de um fluxograma. O fluxo de ponta a ponta mapeia o que os usuários veem em cada tela e como isso impacta o processo de tomada de decisão por meio do seu produto ou serviço. Com essa informação em mãos, você pode explicar melhor as decisões que tomou em relação ao seu design de interação.
Use o template de fluxo de tela para encontrar novas oportunidades de tornar a experiência do usuário sem atritos e livre de frustração do começo ao fim.
Se você está interessado em desenvolver seu trabalho ainda mais e entrar no mundo do design de UX, onde pode apresentar a jornada do usuário como um fluxograma com textos e símbolos em vez de telas, pode se interessar pelo Template de Fluxo do Usuário.
Continue lendo para saber mais sobre fluxos de tela.
O que é um Screen Flow?
Um fluxo de tela (ou wireflow) reúne um layout de várias telas, conectadas como um fluxograma para mapear os pontos de decisão e os movimentos do cliente do início ao fim.
Wireframes por si só carecem de contexto sobre como um fluxo de usuário interativo, página a página, poderia ser. Os fluxos de UX por si só são mais abstratos e não podem mostrar o que o cliente realmente está vendo.
Os wireflows, ou fluxos de tela, combinam as forças de ambos os métodos e ajudam você a argumentar como o que o usuário vê tem um grande impacto em como ele experimenta seu produto ou serviço.
Quando usar Fluxos de Tela
Wireframes ajudam os times de UX e de produto a pensar na jornada do cliente como um fluxo completo em vez de um conjunto de telas. O wireflow ou fluxo de tela foca nas próprias telas e na interação do cliente com seu serviço ou produto.
Um designer pode mapear um fluxo de tela quando eles precisam...
Certifique-se de que não há cenários faltando: com uma jornada de ponta a ponta mapeada, você pode considerar todos os casos de uso em potencial que se aplicam às necessidades do cliente.
Melhore as interações com o usuário: conheça melhor seu cliente em cada oportunidade do fluxo, como criar conta, confirmações ou pop-ups.
Crie uma melhor comunicação multifuncional: reúna designers e desenvolvedores, incentivando-os a pensar na experiência como um todo, em vez de telas separadas.
Engaje-se na educação de stakeholders: se clientes ou times nunca consideraram o que o cliente vê ao passar pelo seu produto ou experiência, seguir um fluxo ajuda a construir empatia pelos pontos problemáticos do cliente.
Crie seu próprio fluxo de tela
Fazer o fluxo da sua tela é fácil. A plataforma de colaboração virtual da Miro fornece o canvas perfeito para criar e compartilhá-los. Comece selecionando o Template de Fluxo de Tela, depois siga os seguintes passos para criar um próprio.
1. Defina sua história do usuário
Antes de começar a mapear uma sequência visual, descreva as necessidades do seu usuário e os pontos problemáticos a serem resolvidos. Este é o seu alicerce para estabelecer um ponto de partida para o fluxo da tela.
2. Decida o que suas telas principais mostrarão
Pense nos seus pontos de início e término na jornada. Você precisa de uma página inicial? Tela de criar conta? Página de confirmação? Identifique alterações ou etapas adicionais no processo, como páginas que precisam ser divididas ou telas que precisam ser adicionadas. A Miro é o criador de wireframe perfeito criador de wireframe com uma Galeria de wireframes que possui mais de 15 componentes de UI que você pode adicionar facilmente ao seu fluxo de tela.
3. Conectar as telas
Adicione e mova setas entre cada tela para avançar o usuário na tarefa, usando a ferramenta de Linha de Conexão da Miro. Você também pode incluir pontos de decisão e mostrar o que acontece em cada instância disponível para o usuário.
4. Compartilhe o fluxo da sua tela com seu time ou stakeholders para feedback
Você pode usar o recurso de menção da Miro para marcar seu time ou pessoas individualmente para rodadas rápidas de feedback, críticas de design ou revisões antes das sessões de workshops ao vivo com clientes. Você também pode compartilhar seu Miro Board com qualquer pessoa (mesmo que ela ainda não esteja registrada!) clicando no botão Convidar Membros.
Descubra mais exemplos de fluxos de usuário para ajudar você a construir sua próxima grande inovação.
What is screen flow in UX?
A screen flow helps you analyze your user’s interactions, focusing mainly on your product screens. It combines the best of wireframing and flowcharts, giving you a more detailed overview of your customer flow and, therefore, more data to build a better user experience.
Comece com esse modelo agora mesmo.
Modelo para Wireframes de Baixa Fidelidade
Ideal para:
Desk Research, Product Management, Wireframes
Quando você está projetando um site ou criando um aplicativo, os estágios iniciais devem ser GRANDES — como ver o panorama geral e comunicar a grande ideia. Os wireframes de baixa fidelidade permitem que você veja e faça isso. Esses layouts de rascunho (pense neles como a versão digital de um esboço em um guardanapo) ajudam seus times e stakeholders do projeto a determinar rapidamente se uma reunião de design atende às necessidades dos seus usuários. Com nosso modelo, você pode usar os wireframes facilmente durante as reuniões ou workshops, apresentações e sessões de análise.
Template de wireframe para aplicativos
Ideal para:
Design UX, Wireframes
Vamos começar a criar um aplicativo? Como funcionará? Como será a interação dos usuários com seu app? Não fique somente na imaginação, o wireframe mostra tudo isso para você. A criação de wireframe é uma técnica para criar um layout básico de cada tela. Quando faz um wireframe, idealmente no início do processo, você entende o que cada tela realizará e recebe a adesão de importantes partes interessadas — tudo antes de adicionar o design e o conteúdo, o que economizará tempo e dinheiro. E ao pensar nas coisas em termos de jornada de um usuário, você oferecerá uma experiência mais atraente e bem-sucedida.
Modelo para Sketch Online
Ideal para:
UX Design, Desk Research, Design Thinking
Antes de seguir a todo vapor, analise ideias promissoras com uma visão macro, para saber como funcionam e como satisfazem seus objetivos. É isso que os esboços (Sketching) fazem. Este modelo oferece uma ferramenta de colaboração remota poderosa para as fases iniciais de prototipagem, seja para esboçar páginas da web e aplicativos móveis, desenhar logos, ou planejar eventos. Em seguida, você pode compartilhar seus esboços com seu time e salvar cada estágio do esboço antes de alterá-lo e desenvolvê-lo.
Template de Wireframe para Site
Ideal para:
Wireframes, Experiência do Usuário
Wireframe é a palavra em inglês para o termo "estrutura" e, como seu próprio nome indica, é o método usado para projetar a estrutura de um site. Um wireframe é um método de criação de disposição para sites, que mostra os elementos da interface em cada uma das páginas da plataforma. Use este template de wireframe para websites para replicar páginas de forma rápida e simples. Você pode compartilhar seu wireframe com clientes ou colegas de equipe e colaborar com as partes interessadas em uma mesmo board da Miro online. Os wireframes permitem que as equipes obtenham adesão dos stakeholders sem precisar investir muito tempo ou recursos. Eles ajudam a garantir que a parte estrutural e o fluxo do seu site atenda às necessidades e expectativas dos usuários.