Está em dúvida sobre como documentar um screenflow de forma nivelada e lógica para TODOS os stakeholders? Este artigo é pra você!

Mas é importante começar dizendo que, não, não existe ferramenta perfeita. Este artigo não tem como objetivo divulgar nenhum novo software para a documentação de um screenflow. Se você chegou aqui com esse objetivo, pode dar meia volta. Proponho aqui técnicas que podem ser utilizadas em qualquer ferramenta e suporte, seja digital ou físico.

A documentação de qualquer trabalho demanda sempre tempo e um certo nível de organização. Como designers, acredito que somos constantemente estimulados a conectar os diversos pontos entre necessidades humanas, de projeto e negócios. Representar visualmente essas ligações é de extrema importância para todo o time no processo de desenvolvimento de um produto digital: todos os stakeholders são beneficiados.

Fluxograma

Por muitos, o fluxograma é entendido como a fase mais simples de ordenar conceitos. Quando penso em um fluxograma, imediatamente a representação do livro “Change By Design” de Tim Brown vem à minha cabeça. Nele, o autor ilustra e conecta todos os pontos e conceitos propostos durante todo o livro em uma só página.

O objetivo de um bom fluxograma (no contexto de um produto ou serviço), é basicamente ordenar uma sequência –  com começo, meio e fim — mapeando uma ou mais jornadas. Essa etapa é bem explorada por arquitetos de informação, na qual é designado qual tipo de dado deve ser representado de acordo com a posição do usuário na jornada.

Nessa etapa, é importante considerar a hierarquia dos elementos. A ordenação dos tópicos no sentido ocidental de leitura (da esquerda para a direita e de cima para baixo) ajuda a visualizar a complexidade do projeto ou tema específico. Esse pensamento também facilita na documentação dos passos ou ações necessárias que precisam ser realizadas para prosseguir no fluxo.

Em um time multidisciplinar, fluxogramas também agregam muito valor no trabalho de desenvolvedores back-end, pois, com essa documentação, fica claro quais informações serão dispostas em cada um dos estágios, incluindo suas origens.

Mas e o screenflow?

O conceito de fluxogramas se mantém o mesmo para screenflows. A maior diferença é que ilustramos cada estágio com interfaces: botões, formulários, textos, links, imagens, etc. É aconselhado também, já que estamos falando de interface, especificar qual tipo de interação o usuário deve realizar para prosseguir o fluxo: toque, swipe, long press, 3D touch, etc.

Um bom screenflow tem como objetivo documentar a tarefa do usuário em todas as variações possíveis: padrões, modos e loops de interação. É importante também descrever os caminhos (cenários felizes, tristes, erros de conexão, empty states, carregamento, etc) que o usuário deve percorrer para realizar determinada ação.

Boas práticas

No software de sua preferência (Sketch, Figma, Studio, etc), procure sempre organizar as telas de forma hierárquica, na qual a primeira tela estará sempre localizada na parte superior esquerda e a última na parte inferior direita. Com isso, todo o time (você incluso) consegue entender a complexidade do seu projeto como um todo.

Utilize linhas tracejadas para conectar variações de tela, empty states, splash screens. Para as telas de empty states e as demais variações de tela, particularmente gosto de contemplar esses cenários junto ao fluxo, sempre abaixo da(s) tela(s) correspondente(s). Alguns amigos(as) também preferem criar páginas e/ou diferentes arquivos para essas variações de cenários de um mesmo fluxo, ajudando a manter seu fluxograma mais organizado.

Utilize linhas preenchidas para conectar cenários de uso comuns. A dica aqui é aplicar diferentes cores para designar diferentes fluxos. Ao analisar as linhas em conjunto, fica mais fácil entender e focar em um fluxo específico quando seu olho pode ser guiado apenas por uma cor.

Disponha as telas de maneira que cada linha represente um fluxo ou tarefa que é esperada do usuário. Assim, cada linha de artboards também será representada por uma cor. Aqui, você também pode descrever que tipo de interação o usuário precisa fazer para chegar a um determinado fluxo. Utilize textos fora das artboards para especificar também qualquer resposta esperada de alguma API ou banco de dados, caso seja necessário. Fique à vontade para utilizar técnicas de arquitetura da informação para detalhar tipos de interação, quais informações serão dispostas, etc.

É um fato que o tempo disponível e o tamanho do time e do produto são determinantes para a escolha de documentar. Fazer tudo isso demanda bastante tempo e muito trabalho. Porém, quando se tem todos esses casos de tela, cenários de uso e interação, o trabalho de prototipar um fluxo ou produto é muito mais eficiente e eficaz.

Te convido a utilizar uma ou mais das técnicas propostas por esse artigo em um futuro projeto, para que todo o time possa estar na mesma página, com a compreensão dos problemas de maneira mais acessível. Fique à vontade também para relatar qualquer problema ou dificuldade, estou sempre aberto para reaprender meus processos.

Ficou alguma dúvida ou tem alguma contribuição? Aproveite os campos abaixo!

Até a próxima.

***

Este artigo foi publicado originalmente em: https://www.concrete.com.br/2018/07/09/4-dicas-para-screenflows-mais-eficientes/