Wireflow

É o diagrama que junta wireframe e fluxo: mostra como cada tela é e como elas se conectam ao mesmo tempo.

Hard

O que é

Wireflow é, na prática, o wireframe com setas. Ele junta o layout de cada tela com as conexões entre elas, mostrando ao mesmo tempo o que cada tela tem e como a pessoa se move de uma pra outra.

A vantagem aparece quando você compara com os artefatos separados. O wireframe sozinho descreve uma tela, mas não mostra a passagem entre telas, e o fluxo de usuário sozinho mostra os passos, mas não o layout. O wireflow combina os dois, e é por isso que ajuda tanto em processo de vários passos e em caminho com ramificação.

Além disso, ele é um artefato de colaboração. O designer documenta a intenção, o dev consulta pra implementar a navegação, e quem decide valida se o fluxo bate com o objetivo. Vale pra casos como checkout, onboarding e cadastro.

Em uma frase

Pra esse checkout vou montar um wireflow, assim a gente vê o layout de cada tela junto da navegação entre elas.

A pergunta que ele responde

Como eu mostro ao mesmo tempo como é cada tela e como a pessoa anda de uma pra outra?

Quando usar

Use ao documentar um fluxo de várias telas, como checkout, onboarding ou cadastro, quando você precisa mostrar layout e navegação juntos.

Como não usar

O cuidado é não detalhar o visual cedo demais. O wireflow é estrutura e caminho, não é mockup de alta fidelidade, então enfeitar agora só atrasa o que importa nessa fase.

Na prática

Pense num passo de pagamento. Em vez de só uma caixa escrita escolher pagamento, o wireflow mostra a tela real de pagamento, com seus campos, e a seta apontando pro próximo passo.

Não confunda com

Vale separar wireflow de fluxo de usuário. O fluxo de usuário mostra os passos de forma abstrata, como caixas e setas, enquanto o wireflow mostra esses mesmos passos junto do layout de cada tela. Um descreve a sequência, o outro mostra a sequência já com a cara das telas.

D

Em inglês

Wireflows

Pronúncia

uái-er-flôu

Também chamado de

wireflow, wireflows

Origem

Termo associado a Nick Babich e à literatura de UX.

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre wireflows