Template para Screen Flow UX (Fluxo de Telas)
Valide os componentes visuais da tela em um fluxo de usuário e obtenha informações sobre sua interação com o usuário usando o template para Screen Flow UX. Crie uma experiência melhor em todas as plataformas.
Sobre o template para Screen Flow UX
Os screen flows (também conhecidos como “fluxos de tela” ou “wireflows”) são uma combinação de wireframes e fluxogramas. O fluxo de ponta a ponta mapeia o que os usuários veem em cada tela e como isso afeta o processo de tomada de decisão deles ao usar seu produto ou serviço. Com essas informações em mãos, você pode explicar melhor as decisões que você tomou com relação ao seu design de interação.
Use o template de Screen Flow UX para encontrar novas oportunidades de otimizar a experiência do usuário, para que seja sem percalços e frustração do início ao fim.
Se você estiver interessado em desenvolver seu trabalho ainda mais e entrar no campo de UX design, onde você pode apresentar a jornada do usuário como um fluxograma com textos e símbolos em vez de telas, o template de User Flow para UX pode lhe interessar.
Continue lendo para saber mais sobre os screen flows ou conheça todas as funcionalidades da Miro para escrever histórias de usuários.
O que é um Screen Flow (Fluxo de Telas)?
Um screen flow, conhecido também como fluxo de tela ou wireflow, é um layout com várias telas, conectadas como um fluxograma para mapear os pontos de decisão e os movimentos de um cliente do início ao fim.
Os wireframes em si não fornecem nenhum contexto sobre a experiência interativa página a página de um fluxo de usuário. Os fluxos de UX, por si só, são mais abstratos e não conseguem demonstrar o que o cliente está realmente vendo.
Os wireflows, fluxos de tela ou screen flows, combinam os pontos fortes de ambos os métodos e ajudam você a demonstrar como o que o usuário vê tem um grande impacto na sua experiência com seu produto ou serviço.
A ferramenta da Miro para criar fluxogramas online te ajuda a diagramar seus fluxos de telas em poucos cliques, experimente agora mesmo.
Quando usar Screen Flows?
Os wireframes organizados em um fluxograma 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 separadamente. O wireflow, ou screen flow, se concentra 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 precisa…
Ter certeza de que não falta nenhum cenário: com uma jornada mapeada de ponta a ponta, você pode considerar todos os possíveis casos de uso que se aplicam às necessidades do cliente.
Melhorar as interações dos usuários: conheça seu cliente através de cada etapa do fluxo, como as inscrições, confirmações ou pop-ups.
Criar uma melhor comunicação multifuncional: reúna os designers e desenvolvedores, e incentive-os a pensar em toda a experiência completa em vez de telas separadas.
Envolver-se na educação das partes interessadas: se os clientes ou times nunca consideraram o que o cliente vê quando navegam em seu produto ou experiência, pode ser útil seguir um fluxo para sentir empatia pelas dificuldades do cliente.
Crie seu próprio Screen Flow UX
É fácil criar seu próprio fluxo de telas de usuário usando nosso template de screen flow UX. A ferramenta de lousa da Miro é a canvas perfeita para criá-los e compartilhá-los. Comece selecionando o nosso template de Screen Flow UX e siga os passos a seguir para desenvolver o seu.
Defina sua história de usuário
Antes de começar a mapear uma sequência visual, descreva as necessidades do usuário e os pontos problemáticos a serem resolvidos. Esta será sua base para configurar um ponto de partida para sua screen flow.
Decida o que suas principais telas irão mostrar
Pense no início e nos pontos finais da jornada. Você precisa de uma landing page? Tela com o formulário de inscrição? Página de confirmação? Identifique as alterações ou etapas adicionais ao processo, como as páginas que precisam ser divididas ou telas que precisam ser adicionadas. A Biblioteca de wireframes da Miro tem mais de 15 componentes de UI que você pode adicionar com facilidade ao seu fluxo de tela, se precisar de inspiração extra.
Conecte as telas Adicione e mova as setas entre cada tela para avançar o usuário no fluxo usando a ferramenta de Linha de Conexão da Miro. Você também pode incluir pontos de decisão e mostrar ao usuário o que acontece em todas as instâncias disponíveis.
Compartilhe sua tela com seu time ou stakeholders para obter feedback Você pode usar o recurso de menção da Miro para marcar seu time ou pessoas para receber feedback, críticas de design ou revisões antes das sessões de workshop ao vivo com os 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.
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.
Template Prune the Product Tree
Ideal para:
Design, Desk Research, Product Management
Prune the Product Tree (também conhecido como o jogo da árvore de produto ou o framework de priorização da árvore de produto) é uma ferramenta visual que ajuda os gerentes de produto a organizar e priorizar as solicitações de funcionalidades do produto. A árvore representa um roadmap de produto e ajuda o time a pensar em como crescer e moldar seu produto ou serviço por meio da gamificação da coleta de feedbacks de clientes e partes interessadas. Uma árvore de produto típica tem quatro features simbólicos: o tronco, que representa as funcionalidades existentes do produto que seu time está construindo; os ramos, cada um deles representa um produto ou função do sistema; raízes, que são os requisitos técnicos ou infraestrutura, e folhas, que são as novas ideias para as funcionalidades do produto.
Modelo de Gráfico KWL
Ideal para:
Educação, Brainstorming, Retrospectivas
Compartilhar e aprender novos conhecimentos é o combustível de qualquer time ou organização ambiciosa. Um gráfico KWL é um organizador visual que potencializa o processo de aprendizagem. Este modelo simples permite projetar e usar um KWL (Know, Want to Know and Learned) com três colunas: sei, quero saber e aprendi. Em seguida, você e seu time podem preencher cada coluna seguindo três passos: faça um balanço do que você sabe, documente o que deseja aprender com a sua sessão e, por último, registre o que aprendeu.
Modelo de fluxograma
Ideal para:
Fluxogramas, Mapeamento, Diagramas
Você está explicando um processo ou fluxo de trabalho para sua equipe com sucesso - ou está apenas se enrolando em suas próprias explicações? Às vezes é melhor ver do que falar, e para isso, podemos criar fluxogramas. Usando formas comuns (geralmente apenas ovais, retângulos, diamantes e flechas), um fluxograma mostra a direção de um processo ou fluxo de trabalho e a ordem de cada etapa. Além de lhe dar uma compreensão clara, você também será capaz de ver possíveis falhas ou gargalos nos processos, o que vai te ajudar a refinar e melhorá-los facilmente e sem estresses.
Modelo de Fluxo de Trabalho
Ideal para:
Workflows Ágeis, Metodologia Ágil, Gerenciamento de Projetos
Quer esteja produzindo um podcast, uma campanha de marketing, um programa de TV, ou qualquer conteúdo, estabelecer um fluxo de trabalho é crucial. Um fluxo de trabalho cria um guia visual para as diferentes etapas de um processo. Ele pode ser usado para treinar novos membros do time, ou oferecer uma visão geral de alto nível para as partes interessadas. Embora os fluxos de trabalho variem de acordo com o time ou a empresa, eles geralmente contêm informações sobre quem são as partes interessadas, como você faz o brainstorming de ideias, qual é o seu cronograma, e quais recursos você precisa para ter sucesso.
Modelo de Brainstorming de Tópicos de Pesquisa
Ideal para:
Desk Research, Brainstorming, Ideation
Criar um tema para um projeto de pesquisa pode ser uma tarefa bastante difícil. Use o Modelo de Brainstorming de Tópicos de Pesquisa para transformar uma ideia geral em algo concreto. Com o Modelo de Brainstorming de Tópicos de Pesquisa, você pode compilar uma lista de ideias gerais que lhe interessam e depois dividi-las em partes componentes. Você pode então transformar essas partes em perguntas que podem ser o foco de um projeto de pesquisa.
Modelo para Diagrama ER
Ideal para:
Fluxogramas, Planejamento Estratégico, Diagramas
Às vezes, os relacionamentos mais importantes nos negócios são os internos, entre times, entidades e agentes em um sistema. O modelo para diagrama de entidades e relacionamento (ERD) é um diagrama estrutural que ajudará você a visualizar e entender as várias conexões complexas entre diferentes funções. Quando um ERD é útil? É uma ótima ferramenta para instrução e onboarding de novos funcionários ou membros de um time. Além disso, nosso modelo de ERD é fácil de personalizar de acordo com suas necessidades individuais.