Os storyboards são o elo que faltava no processo de design da experiência do usuário?

Storyboards ... isso é o que os roteiristas usam para criar filmes e programas de TV, certo? Sim, é verdade, mas os storyboards não se limitam ao mundo do entretenimento ficcional. Eles também podem desempenhar um papel importante no processo de design da experiência do usuário.

Neste post, vou abordar tudo sobre storyboards. Vou começar com uma definição simples e trabalhar até como você pode usar storyboards para criar as jornadas dos usuários em seu projeto e, consequentemente, criar uma melhor experiência do usuário.

O que são storyboards?

Os storyboards são um conceito bastante simples. Basicamente, são ilustrações simples que se movem por uma história sequencialmente. Como mencionei, eles são mais conhecidos pelo uso como ferramenta para desenvolver as tramas de filmes e peças de teatro.

Para uma visualização divertida de como os storyboards funcionam quando aplicados a filmes, o Flavorwire montou uma lista de storyboards de alguns filmes famosos. Lembra daquela cena famosa da cortina de chuveiro de Psycho? Aqui está o que parecia em forma de storyboard:

Mas os storyboards não são úteis apenas para traçar enredos fictícios. Eles também se tornaram um método popular de visualizar como um ser humano real experimenta um site ou aplicativo.

Quando se trata de seu site ou aplicativo, um storyboard basicamente segue a jornada completa de uma persona de usuário específica, começando com ele lutando com um problema e terminando com ele interagindo com sua criação e experimentando uma resolução positiva.

O importante é que seu storyboard retrate uma pessoa real com um problema real em um ambiente real . Os storyboards devem sempre parecer autênticos e baseados na realidade.

Então, como isso pode parecer na realidade? Aqui está um exemplo da Chelsea Hostetter no Austin Center for Design:

Observe como o storyboard de Chelsea descreve uma história completa do início ao fim? Ele não se concentra apenas no uso que Susan faz do aplicativo Heartline. Começa com uma situação da vida real, atinge o pico com Susan usando o aplicativo para se conectar com Tom e termina com a resolução do problema na vida real.

Como os storyboards ajudam a melhorar o design da experiência do usuário?

Hoje em dia, há um grande foco em big data. E embora os dados físicos frios sejam certamente valiosos, eles removem completamente o ser humano do processo de design. O storyboard pode ajudar a trazer esse elemento humano de volta ao design.

Com o storyboard, você tem humanos reais completando ações reais, em vez de descrições de recursos abstratos ou dados analíticos.

Além do elemento humano, o storyboard também facilita a revisão e a iteração rápida de suas ideias. Como tudo o que você está fazendo é esboçar o processo, você precisa investir muito menos tempo do que precisaria para criar um protótipo funcional da mesma funcionalidade.

Isso significa que você pode implementar mudanças mais rapidamente do que seria possível com um protótipo.

Dicas para ajudar a criar seu primeiro storyboard

Você não precisa ser um ilustrador profissional para criar um storyboard, mas existem algumas estratégias que você deve seguir para criar storyboards que são realmente úteis para o seu processo de design.

Lembre-se de que seu objetivo é criar algo que seja autêntico e convincente. Se precisar, volte e dê uma olhada no exemplo Heartline novamente. Observe como a história:

• Está repleto de emoções humanas
• Concentra-se em todo o cenário, não apenas na parte em que os personagens usam seu produto
• Tem uma resolução clara

Embora o produto final de Chelsea seja um bom exemplo, não sinta que precisa ir direto da página em branco para o storyboard totalmente desenvolvido.

Em vez disso, ajuda a construir lentamente o produto final.

Primeiro, lembre-se de que seu objetivo é ter:

• Caracteres autênticos
• Um problema da vida real
• Uma maneira lógica e autêntica de resolver esse problema por meio de seu produto
• Uma resolução real no final do storyboard

Para garantir que você acertou todos esses elementos, é mais fácil começar com descrições em texto simples que esboçam os fundamentos da história. Conecte-os em um arco narrativo, mas não se preocupe em ir muito a fundo ainda.

Em seguida, volte e reescreva sua história, trazendo emoções mais detalhadas. O que seus personagens estão sentindo em cada estágio da jornada? Eles estão felizes? Triste? Indiferente?

Depois de ter a narrativa e as emoções esboçadas em texto simples, você está pronto para traduzir isso em um storyboard real. Para fazer isso, divida cada ação da história em um quadro individual e faça um esboço usando ilustrações reais.

Se você tiver habilidades artísticas, tente realmente trazer emoção para suas ilustrações ao desenhar seu storyboard.

Ferramentas para ajudá-lo a criar storyboards

Antes de avançar muito em algumas ferramentas para ajudá-lo a criar storyboards de experiência do usuário, devo começar com o fato de que você provavelmente já tem ferramentas suficientes em um armário em algum lugar.

Ou seja, você não precisa necessariamente de nada sofisticado para criar um storyboard. Tornar-se lo-fi com papel e caneta é totalmente aceitável se você for o único a olhar para o seu storyboard. Ou você sempre pode escolher uma abordagem digital usando algo como o PowerPoint para criar uma história coesa.

Mas se você vai colaborar com outros membros da equipe, convém criar storyboards que pareçam um pouco mais polidos e profissionais do que a caneta e o papel ou o PowerPoint permitem. Nessas situações, as seguintes ferramentas podem ajudar ...

Storyboard That

Em vez de esboçar à mão, o Storyboard That permite que você crie storyboards quadro a quadro usando elementos de arrastar e soltar predefinidos. Depois de esboçar sua história com texto simples, você pode usar esses elementos para construir um produto final mais polido.

A ferramenta é bastante simples de usar. Tudo o que você realmente precisa fazer é:

• Escolha um plano de fundo para sua cena
• Adicionar personagens
• Traga texto ou itens

Por exemplo, consegui criar este storyboard básico em apenas alguns minutos:

Embora eu duvide de ganhar uma competição de storyboard, é muito mais rápido do que esboçar à mão (pelo menos para mim). A única desvantagem é que você perde a capacidade de expressar emoções com as expressões faciais de seus personagens.

A ferramenta básica Storyboard That é gratuita, embora eles também tenham planos premium que oferecem mais recursos.

Boords

Boords é uma ferramenta mais inteligente e de alta tecnologia que ajuda você a criar storyboards a partir de ilustrações existentes.

Embora não ajude você a criar essas ilustrações, ajuda a organizá-las, adicionar notas e compartilhar seus storyboards pela Internet ou PDF:

Portanto, se você está planejando colaborar com outras pessoas em seu storyboard, o Boords o torna muito mais fácil de ajustar em tempo real.

Há um plano básico gratuito que permite que você tenha até dois storyboards gratuitamente. Mas depois disso, você precisará pagar pelo Pro.

Empacotando

Os storyboards não são apenas para filmes e peças de teatro. Eles ajudam você a iterar mais rápido, entender melhor seus usuários e dar um rosto humano a todo o processo de design.

Lembre-se de que seus storyboards precisam ser autênticos e convincentes. Desenhar uma situação complicada em que seu produto salva o mundo pode parecer bom, mas esse não é o objetivo do storyboard. Mantenha-o realista e concentre-se em contar a história completa do início ao fim.

Agora é sua vez - você usa storyboards em seu processo de design? Em caso afirmativo, você acha que vale a pena o tempo que levam para fazer?

Imagem em miniatura do artigo por CharacterFamily / shutterstock.com