Fluxos de Tela#
Definições e exemplos#
Para prototipar um aplicativo, o primeiro passo costuma ser desenhar sketches, ou seja, rascunhos grosseiros das telas. Como o próprio nome indica, um sketch não é uma representação exata do produto final, mas uma representação simplificada, cujo objetivo é comunicar uma visão geral da interface.
Sketches não precisam ser caprichados, pois são feitos em momentos nos quais ideias nascem, ideias morrem e ideias mudam constantemente. Não faz sentido gastar tempo e esforço para caprichar em algo que pode mudar significativamente ou até desaparecer em pouco tempo.
De fato, o capricho é uma armadilha: você pode acabar rejeitando boas ideias por não querer desperdiçar o tempo e esforço que já foram gastos.
Por esse motivo, sketches geralmente são feitos à mão e sem nenhum equipamento de desenho. Pessoalmente, eu gosto da regra "se está usando régua, já está caprichando demais." As linhas tortas da foto acima podem não ser esteticamente agradáveis, mas não impedem a compreensão do desenho, certo?
Por outro lado, sketches têm uma limitação indesejada mesmo dentro desse contexto de pouco capricho: eles só servem para comunicar telas estáticas. Isso é suficiente quando seu objetivo é apenas design gráfico, mas não é suficiente quando seu objetivo é design de interação, ou seja, projetar as interações de um usuário com o aplicativo.
Uma alternativa quase tão simples quanto sketches mas capaz de representar interações são os fluxos de tela. Grosso modo, um fluxo de tela é um storyboard, uma espécie de "história em quadrinhos" que mostra a sequência de telas pelas quais um usuário passa ao realizar uma tarefa específica através do aplicativo e indica os elementos de cada tela com que ele precisa interagir.
Considere, por exemplo, a ideia abaixo.
Um aplicativo para resolver dúvidas de voluntários que cuidam de animais abandonados. Esse aplicativo permite fazer perguntas sobre cuidados básicos e obter respostas de fontes sérias como veterinários, especialistas e abrigos. Dessa forma, o voluntário não precisa se preocupar com o tempo gasto em consultas presenciais e também não precisa se preocupar com a confiabilidade das fontes de informação.
Considere também o seguinte exemplo de tarefa específica que um usuário desse aplicativo poderia realizar através dele: procurar informações sobre primeiros cuidados em um gato abandonado.
A imagem acima é um possível fluxo de telas para essa tarefa. Além de sketches de todas as telas pelas quais o usuário passa, esse fluxo também usa caixas tracejadas para indicar os botões e caixas de texto com que ele precisa interagir. Também usa setas tracejadas para indicar mudanças de tela causadas por essas interações.
Aliás, repare que a imagem acima é uma mistura de sketches feitos à mão com símbolos adicionados por software (mais especificamente, Google Slides). O uso de software significa que ele é "mais caprichado" que um fluxo feito inteiramente à mão?
Hmmm... mais ou menos.
Vamos considerar outro exemplo de tarefa: descobrir todas as situações possíveis nas quais manchas brancas podem ser encontradas nas fezes de um cachorro.
A imagem acima é um possível fluxo de telas para essa tarefa. Repare que os dois fluxos compartilham várias telas. Esse é o motivo pelo qual optei por misturar desenhos à mão com símbolos por software: se eu não tivesse feito isso, teria que desenhar a mesma tela várias vezes em vez de simplesmente copiar e colar. Ou seja, a partir de uma mesma tela podemos seguir caminhos diferentes dependendo do fluxo que estivermos seguindo.
Em outras palavras, houve uso de ferramentas para acelerar o processo, não caprichar.
Antes de falar mais sobre fluxos de tela, vamos falar um pouco sobre as descrições de tarefa consideradas nesses exemplos. Essas descrições são os chamados casos de uso.