Wireframes iniciais: uma dinâmica para equipe organizar e alinhar ideias
A prototipagem é um processo complexo que demanda muita pesquisa e alinhamento interno da equipe. Principalmente quando estamos desenvolvendo produtos complexos com equipes grandes. Nesse post, pretendo explicar uma estratégia que usei para iniciar a geração dos primeiros wireframes de um aplicativo. Foi organizada uma dinâmica simples, mas bastante eficaz, que fugia do convencional protótipo colaborativo feito em ferramentas digitais. A ideia era trazer de volta ferramentas bem conhecida por nós designers: o famoso papel, caneta e post-its.
Os objetivos da dinâmica eram:
Alinhamento interno: entender o que cada pessoa de equipe estava imaginando em questões funcionais para cada tela do aplicativo
Buscar um olhar que priorize funções e organização: focar primeiramente na função e organização e assim definir as telas principais que iríamos trabalhar, ou seja, o core do app. Projetos complexos com muitas features e funções podem ser confusos na hora da definição do principal.
Liberdade de construir e desconstruir as telas de forma conjunta: tocar fisicamente em papel caneta e post-its estimula a comunicação entre os integrantes do time e a expressão das ideias de forma mais livre.
Organizando a papelada
Para representar a tela de um celular foi usada uma folha sulfite A4. Preparei cerca de 6 folhas onde desenhei com caneta um retângulo para representar essas telas. Para representar pop-ups e telas que interligavam as telas principais recortei a folha A4 no meio e fiz o mesmo esquema, desenhei um retângulo pra representar uma tela.
Com outro tipo de papel, recortei diversos quadrados e retângulos. Eles simbolizariam a Tab Bar e os espaços que seria ocupados pelas features e ferramentas nas telas (por exemplo, chat, mapa, informações do usuário, etc). Para representar botões, recortei bolinhas de cores variadas que poderiam ser posicionadas em qualquer lugar das telas. Deixei algumas prontas de exemplo como o botão home, perfil e explorar.
Separei post-its de diversas cores. Escolhi o tipo de post-it retangular e comprido usado geralmente pra marcar páginas por ele ser pequeno, podendo caber mais nas telas. Por fim, separei várias folhas, bolinhas e post-its reservas, assim como canetas diferentes de pontas finas e grossas para serem usadas na hora da dinâmica.
Mão na massa
Com toda equipe reunida, expliquei o que iríamos fazer. Coloquei as telas em branco na mesa e fomos juntos posicionando as features nas telas. O legal desse tipo de dinâmica é que ela possibilita ver exatamente como o outro está pensando, rabiscando e colocando no protótipo, ficando muito mais fácil opinar, pensar como grupo e reorganizar uma configuração de tela feita anteriormente, reciclando algumas coisas e descartando outras. O protótipo vai se lapidando conforme o grupo de pessoas presente da dinâmica vai mexendo e interagindo com ele.
No final de 1 hora tínhamos o core do nosso app organizado em telas de papel, assim como todas as principais features. Tirei uma foto de cada tela feita que foram usadas pra gerar um protótipo no Figma.
Resultados (e considerações sobre papel e caneta)
Sempre fui uma grande entusiasta de tecnologias manuais. Acredito que somos mais criativos e talvez um pouco mais livres quando desenhamos com uma caneta aquilo que estamos pensando. A dinâmica foi muito bem sucedida, e mais tarde enquanto pedi pra equipe feedbacks, todos foram muito positivos.
Além de ser uma ótima ferramenta pra se iniciar protótipos, é também um momento pra equipe de conectar. Percebi que todos que participaram da dinâmica estavam muito animados pra mostrar as ideias no papel e ter um momento fora das telas do computador. É muito satisfatório quando as ideias estão bem alinhadas e quando todo mundo está caminhando pro mesmo lugar.
A dinâmica também é uma ótima forma de alinhar ideias com clientes e usuários, trazendo uma ferramenta bem familiar (papel e caneta) como forma de expressar idéias e alinhar expectativas.
