Template para Fluxo de Tela
Valide componentes visuais de tela em um fluxo de usuário.
Sobre o Template de Fluxo de Tela
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 fim a fim mapeia o que os usuários veem em cada tela e como isso impacta seu processo de tomada de decisão através do seu produto ou serviço. Com essas informações 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 para tornar a experiência do usuário sem atritos e livre de frustrações do início ao fim.
Se você está interessado em desenvolver ainda mais seu trabalho e adentrar o reino do design UX, onde pode apresentar a jornada do usuário como um fluxograma com textos e símbolos ao invés de telas, pode se interessar pelo Template de Fluxo de Usuário.
Continue lendo para aprender mais sobre fluxos de tela.
O que é um Fluxo de Tela?
Um fluxo de tela (ou wireflow) reúne um layout de múltiplas telas conectadas como um fluxograma, para mapear os pontos de decisão e movimentações de um cliente do início ao fim.
Wireframes por si só carecem de contexto para mostrar como seria um fluxo de usuário interativo, página por página. Os fluxos de UX são mais abstratos e não podem mostrar o que o cliente realmente vê.
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ê impacta significativamente a forma como experimentam seu produto ou serviço.
Quando usar Fluxos de Tela
Wireframes ajudam times de UX e produto a pensar em uma 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 telas quando precisa...
Garantir que não faltem cenários: com a jornada de ponta a ponta mapeada, é possível considerar todos os potenciais casos de uso que se aplicam às necessidades do cliente.
Melhorar interações com o usuário: conheça seu cliente por meio de cada oportunidade no fluxo, como criações de conta, confirmações ou pop-ups.
Criar melhor comunicação interfuncional: unir designers e desenvolvedores, incentivando-os a pensar na experiência completa, em vez de telas separadas.
Engajar na educação de stakeholders: se os clientes ou equipes nunca consideraram o que o cliente vê ao usar seu produto ou experiência, seguir um fluxo ajuda a criar empatia com os pontos de dor dos clientes.
Crie seu próprio fluxo de telas
Criar seu fluxo de tela é fácil. A plataforma de colaboração virtual da Miro oferece o canvas perfeito para criar e compartilhar esses fluxos. Comece selecionando o Template de Screen Flow e siga os passos a seguir para criar o seu próprio.
1. Defina a história do seu usuário
Antes de começar a mapear uma sequência visual, descreva as necessidades e os pontos de dor do usuário que precisam ser resolvidos. Esta é a base para definir o ponto de partida do seu fluxo de tela.
2. Decida o que suas telas principais devem mostrar
Pense bem no seu ponto de partida e de chegada na jornada. Você precisa de uma landing page? Tela de criar conta? Página de confirmação? Identifique mudanças 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, com uma Galeria de wireframes que possui mais de 15 componentes de UI que você pode facilmente adicionar ao seu fluxo de telas.
3. Conecte as telas
Adicione e mova setas entre cada tela para avançar o usuário na tarefa, usando a ferramenta Linha de Conexão da Miro. Você também pode incluir pontos de decisão e mostrar o que acontece em cada situação disponível para o usuário.
4. Compartilhe seu fluxo de telas com seu time ou stakeholders para receber feedback
Você pode usar a Funcionalidade de Mensagem da Miro para marcar seu time ou indivíduos para rodadas rápidas de feedback, críticas de design ou revisões antes de sessões de workshop ao vivo com clientes. Você também pode compartilhar seu Board da Miro com qualquer pessoa (mesmo que ainda não esteja registrada!) clicando no botão Convidar Membros.
Descubra mais exemplos de fluxo de usuário para ajudar você a construir sua próxima grande inovação.
Perguntas frequentes sobre o Template para fluxo de telas
O que é fluxo de telas em UX?
Um fluxo de telas ajuda você a analisar as interações do seu usuário, focando principalmente nas telas do seu produto. Ele combina o melhor de wireframing e fluxogramas, oferecendo uma visão mais detalhada do fluxo do cliente e, portanto, mais dados para construir uma melhor experiência do usuário.
O que é fluxo de tela em UX?
Um fluxo de tela ajuda você a analisar as interações do usuário, focando principalmente nas telas do seu produto. Ele combina o melhor do wireframing e dos fluxogramas, oferecendo uma visão geral mais detalhada do fluxo de clientes e, portanto, mais dados para criar uma melhor experiência do usuário .
Comece com esse modelo agora mesmo.
Template de Wireframes de baixa fidelidade
Ideal para:
Pesquisa de Mesa, Gerenciamento de produtos, Wireframes
Quando você está projetando um site ou desenvolvendo um aplicativo, as primeiras etapas devem ser GRANDES — visualizando o panorama geral e comunicando a grande ideia. Wireframes de baixa fidelidade te capacitam a ver e fazer. Esses esboços (pense neles como a versão digital de um rabisco em um guardanapo) ajudam seus times e stakeholders do projeto a determinar rapidamente se um design atende às necessidades dos seus usuários. Nosso template permite que você use facilmente wireframes durante reuniões, workshops, apresentações e sessões de crítica.
Template de Wireframe de apps
Ideal para:
Design de UX, Wireframes
Pronto para começar a criar um aplicativo? Não basta imaginar como irá funcionar e como os usuários irão interagir com ele — deixe que um wireframe mostre a você. Wireframing é uma técnica para criar um layout básico de cada tela. Ao criar um wireframe, idealmente no início do processo, você entenderá o que cada tela irá realizar e obterá o comprometimento de stakeholders importantes—tudo isso antes de adicionar o design e o conteúdo, o que economizará tempo e dinheiro. E ao pensar nas coisas em termos da jornada do usuário, você proporcionará uma experiência mais envolvente e bem-sucedida.
Template de Sketching Online
Ideal para:
Design de UX, Pesquisa de Mesa, Design Thinking
Antes de seguir a todo vapor com uma ideia promissora, observe-a de um ponto de vista mais amplo — para saber como ela funciona e o quanto atende aos seus objetivos. É isso que os esboços fazem. Este template oferece uma poderosa ferramenta de colaboração remota para as etapas iniciais de prototipagem, seja você esteja esboçando páginas da web e aplicativos móveis, desenhando logotipos ou planejando eventos. Então, você pode facilmente compartilhar seu esboço com seu time e salvar cada etapa do seu esboço antes de alterá-lo e expandi-lo.
Template de Wireframe para site
Ideal para:
Wireframes, Experiência do Usuário
Wireframing é um método para projetar um site em nível estrutural. Um wireframe é um layout estilizado de uma página da web que exibe os elementos da interface em cada página. Use este template de wireframe para iterar em páginas da web de forma rápida e barata. Você pode compartilhar o wireframe com clientes ou colegas de equipe e colaborar com as partes interessadas. Os wireframes permitem que os times obtenham o buy-in dos stakeholders sem investir muito tempo ou recursos. Eles ajudam a garantir que a estrutura e o fluxo do seu site atendam às necessidades e expectativas dos usuários.