O uso dos storyboards como documentação de base de UX Design

Fabricio Teixeira
UX Collective 🇧🇷
3 min readApr 25, 2013

--

Recentemente, em um dos projetos que estou trabalhando, tive a oportunidade de testar uma nova forma de encarar as etapas e entregáveis do processo de Design.

Ao invés do tradicional waterfall, onde o processo segue a ordem Wireframes > Layouts > Protótipo > Front-End > Back-End, a ordem dos elementos e entregáveis aparece de forma um pouco invertida. É algo que muitas startups já aplicam, mas achei interessante ver o processo aplicado em uma agência e ser guiado essencialmente por profissionais de UX (mais do que project managers ou profissionais com funções similares).

São 3 grandes etapas, cada uma dividida em etapas menores e envolvendo um grupo diferente de profissionais:

  1. Storyboards de UX
  2. Backlog de telas para desenvolvedores e detalhamento de escopo
  3. Sketches de UX e styleguide de Design

Mas storyboards logo no começo, antes mesmo de um documento técnico que explica como o sistema funciona?

Isso mesmo.

Storyboard

Algumas vantagens do storyboard enquanto documentação de base:

  • Os storyboards são fáceis de serem digeridos por quem entende pouco de desenvolvimento de softwares, porque coloca os personagens em seus papéis reais e permitem uma leitura mais humana sobre o caso de uso;
  • Os storyboards normalmente contemplam representações tanto do comportamento do usuário quanto do desenho da interface, sem que uma coisa ganhe mais importância que a outra;
  • Os storyboards podem circular com mais facilidade entre diferentes stakeholders e têm maior força na hora de garantir a venda / kickoff oficial do projeto;
  • Os storyboards podem despertar novas ideias e conceitos quando são mostrados para outros designers, o que favorece bastante a criação colaborativa;
  • Os storyboards, por serem naturalmente interessantes de ler (quem não gosta de ler quadrinhos?), dão uma boa visibilidade do trabalho do UX Designer para o restante do time;
  • Os storyboards te forçam a pensar no contexto de uso da interface: onde a história acontece? qual o background? qual o horário do dia? como o produto se encaixa na rotina da pessoa?

A partir do momento em que os storyboards estão aprovados, o time de desenvolvedores já começa a trabalhar na estrutura do sistema. É claro que os UX Designers podem ajudar o desenvolvedor a detalhar o escopo do que será desenvolvido, até que todas as dúvidas sejam esclarecidas. Sim, é um processo exaustivo e as reuniões de detalhamento de escopo podem durar até quatro horas seguidas. Mas elas soam menos como “reuniões” e mais como “workshops”, o que deixa o trabalho bem mais interessante.

Mais storyboards

Na terceira e última etapa, o processo de detalhamento da interface e design visual andam juntos e contam com mínima documentação necessária (principalmente porque os desenvolvedores já entenderam como funciona o sistema). Alguns sketches no papel acompanhados de um guia visual dos elementos do site já são suficientes para que os desenvolvedores de front-end peguem o material bruto que tinham produzido e comecem a refinar a interface.

É claro que esse processo funciona bem em alguns contextos, em outros nem tanto. Nesse exemplo que eu citei, para que os storyboards fossem produzidos foi necessário inverter um pouco a proporção de UX versus Visual Designers (3 para 1). Vai depender também da disponibilidade de alocação do time.

Mas mais do que tentar eleger uma metodologia “certa” ou “errada”, o interessante é tentar entender os prós e contras de cada pedaço e conseguir bolar novas combinações a cada projeto.

E convenhamos: trabalhar com storyboards deixam o trabalho beeeem mais agradável :)

--

--