O papel do Storyboard em UX Design
O Storytelling é parte fundamental no trabalho dos UX designers.
O Storytelling é parte fundamental no trabalho dos UX designers. Afinal, boas histórias são capazes de capturar a atenção, fornecer clareza, além de inspirar equipes e partes interessadas a agir.
No contexto de UX (User Experience), há diversas maneiras de comunicar visualmente essas histórias para as equipes, os chamados Storyboards são o principal exemplo disso.
Neste artigo, você vai entender a função dos Storyboards em UX Design, quais são seus principais elementos, além do passo a passo para criar um.
Glossário
O que é um Storyboard?
Um Storyboard consiste em um conjunto de desenhos sequenciais, usados para contar uma história. Em outras palavras, ele funciona como uma espécie de organizador gráfico que serve para planejar uma narrativa visual. Isso é feito usando imagens organizadas em ordem cronológica.
Essas imagens, chamadas de Visuais, são exibidas em uma sequência de painéis, semelhante a uma história em quadrinhos.
Originalmente utilizados na produção de animações, filmes e jogos, os Storyboards passaram a ser muito usados em projetos gráficos.
Não demorou muito até que essa ferramenta chegasse ao mundo dos negócios para modelar como os clientes irão interagir com novos produtos.

No contexto de UX, os Storyboards são usados para fornecer um contexto adicional ao trabalho das equipes de design e partes interessadas. Esses esboços ajudam, dentre outras coisas, a visualizar ideias, elaborar e detalhar uma sequência de ações por parte dos usuários.
Elementos de um Storyboard
Independente da forma, os Storyboards possuem três elementos comuns. São eles:
1. Cenário (Story)
Em geral, os Storyboards são baseados em um cenário ou história (story). Nele, a Persona ou função que corresponde a esse cenário precisa ser especificada na parte superior do esboço.
Esse último precisa estar acompanhado de um texto descritivo. Essa descrição do cenário precisa ser clara o suficiente para que qualquer membro da equipe seja capaz de entender o que está representado antes de olhar para o visual.
2. Visuais
Os Visuais são esboços, ilustrações ou fotos que representam visualmente cada etapa do Cenário em uma sequência.
Dependendo da finalidade do Storyboard e do público-alvo, essas imagens podem ser tanto desenhos rápidos e de baixa fidelidade quanto artefatos elaborados e de alta fidelidade.
É importante que os Visuais incluam detalhes relevantes para a história, como a aparência do ambiente do usuário, balões de fala com citações, ou até mesmo um esboço da tela com a qual o usuário está interagindo.
3. Legendas
As Legendas descrevem as ações do usuário, ambiente, estado emocional, dispositivo e assim por diante. Cada visual tem uma legenda correspondente.
Como a imagem é o conteúdo principal em um storyboard, as legendas precisam ser concisas e objetivas.
O que é um storyboard em UX Design?
Um Storyboard em UX é uma ferramenta que prevê e explora visualmente a experiência de um usuário com um produto, apresentando-o de maneira similar a um filme em termos de como as pessoas o usarão.
Ele ajuda UX designers a entender o fluxo de interação das pessoas com um produto ao longo do tempo, dando a eles uma noção clara do que é realmente importante para os usuários.




O storyboard é também um ótimo instrumento para ideação. Afinal, a combinação familiar de imagens e palavras torna claras até mesmo as ideias mais complexas.
Além disso, essa ferramenta também permite reunir Personas, User Stories e descobertas de pesquisa para desenvolver requisitos para o produto.
Quando baseados em dados reais e combinados com outras atividades de UX, os Storyboards podem, por exemplo:
- Tirar o foco do preconceito interno, promovendo mais empatia em relação ao comportamento dos usuários;
- Ajudar clientes e partes interessadas a lembrar de cenários de usuários específicos;
- Permitir entender o que impulsiona o comportamento do usuário.
Porque o storytelling é importante em UX?
As histórias são uma maneira eficaz e barata de capturar, transmitir e explorar experiências no processo de design. No caso do UX, essa técnica é considerada importante pelos seguintes motivos:
Abordagem centrada no ser humano
O storytelling permite colocar as pessoas no centro do processo de design, ajudando a dar uma cara humana para dados analíticos e resultados de pesquisas.
Nesse sentido, instrumentos como o storyboard transformam situações de vida em narrativas nas quais UX designers podem se colocar no lugar dos usuários e encontrar soluções de acordo.
Engajamento emocional
O storytelling em UX se concentra em problemas e situações em vez de recursos. Enquanto isso, o uso de Jornadas e Storyboards possibilitam uma abordagem mais envolvente, com a qual as pessoas se relacionam emocionalmente com mais facilidade.
São as histórias que ajudam a entender os cenários de interação existentes, além de fornecer hipóteses para possíveis cenários.
Memorabilidade
No que diz respeito ao UX Design, o storytelling adiciona camadas extras de significado, permitindo que tanto membros quanto pessoas de fora da equipe processem as informações apresentadas e se lembrem delas com muito mais facilidade.
Quando é útil fazer um storyboard?
Como vimos até aqui, a principal finalidade de um Storyboard é contar histórias com imagens. Partindo desse princípio, essa ferramenta pode ser útil em diferentes processos. Listamos alguns deles a seguir.
Pesquisa e testes de usabilidade
Quanto uma equipe de UX está envolvida em testes de usabilidade, um storyboard pode transmitir como seus participantes interagiram com o aplicativo ou site.
Os storyboards criados a partir de testes de usabilidade podem incluir citações reais de usuários, juntamente com imagens ou notas de qualquer linguagem corporal reveladora que foi exibida.
Durante o processo de Ideação
Você pode usar um storyboard para esboçar uma ideia de como um usuário poderá utilizar um recurso. Isso ajuda a visualizar uma experiência em potencial, assim como a ter uma melhor compreensão do ambiente do usuário antes de iniciar o desenvolvimento.
No processo de Ideação, os storyboards devem ser usados como um meio de conversa em vez de um artefato duradouro ou ferramenta de priorização. Isso porque, o cenário provavelmente irá mudar quando você estiver usando dados reais.
Ao construir um produto
No caso dos produtos em desenvolvimento, você pode utilizar um storyboard para modelar a interação do usuário com base em dados coletados de testes, entrevistas ou análises.
Se forem produtos já existentes, essa ferramenta poderá mostrar sua inserção em situações cotidianas, bem como os cenários em que as pessoas os usam.
Durante a fase de descoberta de um novo produto
Ao criar um produto ou serviço completamente novo, o storyboard pode resumir e explicar as histórias e problemas de usuários existentes.
Ele também pode resumir suas descobertas após as primeiras entrevistas ou pesquisas de campo.
Ao visualizar Mapas de Jornada (User Maps)
Os storyboards podem enriquecer os mapas de jornada adicionando uma imagem do contexto do usuário em vários estágios de interação com um produto.
A visualização do dispositivo de um usuário, espaço e configuração de grupo permite que tanto a equipe quanto as partes interessadas tenham empatia com a situação do usuário.
Ao priorizar melhorias
A visualização de como os usuários irão interagir com um aplicativo pode facilitar o entendimento e a lembrança de quais recursos são necessários para que eles completem o cenário.
Nesse sentido, as imagens do storyboard permitem que a equipe discuta e decida em qual melhoria focar. Tudo isso com base em uma compreensão compartilhada dos usuários e de seu contexto.
Diferença entre storyboard e mapa de jornada (Journey Map)
Um mapa de jornada é uma visualização do processo pelo qual um usuário ou cliente passa para atingir uma meta. Ele geralmente contém informações textuais extensas sobre as diferentes etapas da jornada (ações, pensamentos, emoções etc.).
Via de regra, essa visão geral da experiência serve como um instrumento para identificar pontos problemáticos específicos.
O Storyboard, por outro lado, ilustra uma sequência de etapas visualmente, de maneira fácil de entender. Seu foco principal são as imagens, com menos ênfase no texto que as acompanha.
Embora as legendas sejam importantes para o artefato, elas não fornecem ao leitor tanto contexto quanto um mapa de jornada.
Além disso, os storyboards costumam ser usados para descrever um fragmento da User Journey (e vários deles podem ser necessários para capturar as diferentes ramificações da jornada).
Diferente dos mapas de jornada, que geralmente são usados por diferentes departamentos, os storyboards costumam ter um uso mais restrito e orientado a detalhes, sendo usados por membros da mesma equipe.



Passo a passo para criar um storyboard
Criar um storyboard pode parecer uma tarefa assustadora. Mas basta lembrar que esse artefato nem sempre precisa ser de alta fidelidade.

Aqui estão as 6 etapas principais que você pode seguir para criar um storyboard:
Passo 1: Coleta de dados
Antes de mais nada, você precisa determinar quais dados serão usados em seu storyboard – entrevistas com usuários, testes de usabilidade ou métricas do site.
Mesmo assim, é possível criar um storyboard sem dados reais se você ainda não coletou dados ou deseja usá-lo como forma de ideação.
Passo 2: Escolha seu nível de fidelidade
Tenha em mente o objetivo e o público do seu storyboard. Use esboços para desenhar uma sequência ou comunicar uma cena à sua equipe durante uma reunião de brainstorming.
Nessas reuniões de ideação, você pode até criar storyboards de forma colaborativa com notas adesivas, para obter a perspectiva de cada membro da equipe.
Comece discutindo a linha do tempo e as etapas que o usuário seguirá. Aqui, vale tentar se concentrar em uma única etapa de cada vez para manter a discussão.
Enquanto você discute as ideias com a equipe, desenhe cada passo em um post-it e coloque em um quadro branco ou na parede. Esse método oferece flexibilidade para alterar a sequência de eventos reorganizando as notas adesivas sem precisar redesenhar todo o storyboard.
Caso você tenha realizado, por exemplo, um teste de usabilidade e está criando um storyboard para filtrar as informações obtidas, use fotos ou fotos de vídeo. Esses tipos de recursos visuais maximizam o tempo, sem necessidade de esboços, enquanto adicionam autenticidade ao seu storyboard.
É possível também usar ilustrações detalhadas, criadas em algum programa como Sketch ou até mesmo no próprio Powerpoint.
Lembre-se: um storyboard serve, acima de tudo, para contar uma história. Não precisa gastar muito tempo aprimorando o visual, a menos que seja necessário.
Passo 3: Defina o básico
Nesta etapa, você irá definir a persona e o cenário ou user story representado. Para que seu storyboard não se divida em várias direções, o cenário deve ser específico e corresponder a um único caminho de usuário.
No caso dos cenários complexos de vários caminhos, mantenha uma regra de 1 para 1 — um storyboard por um caminho que o usuário segue.
Passo 4: Planejando as etapas
Comece escrevendo as etapas e conectando-as com setas antes de ir direto para o modelo de storyboard.
Se criar o visual for assustador, comece escrevendo as etapas e determinando o estado emocional do usuário para cada etapa.
Passo 5: Crie recursos visuais e adicione legendas
Embora você possa criar um storyboard à altura de uma verdadeira história em quadrinhos, saiba que habilidades avançadas de ilustração não são um pré-requisito nesta etapa.
Desde que consiga ilustrar o que está tentando transmitir, você pode usar esboços básicos ou até mesmo desenhos palito.
Por fim, adicione legendas como marcadores abaixo dos visuais para descrever o contexto adicional que não pode ser compreendido à primeira vista.
Importante: seu storyboard deve estar em um formato fácil de modificar, para que você possa fazer alterações em outras iterações, se necessário.
Passo 6: Distribuir e iterar
Chegou o momento de distribuir seu storyboard para o seu público, seja sua equipe ou as partes interessadas do projeto, e pedir feedback.
Se preciso, repita algumas dessas etapas para melhorar o artefato.
Quer ingressar na área de Design? Conheça a Awari!
A Awari é uma plataforma de ensino completa que conta com mentorias individuais, cursos com aulas ao vivo e suporte de carreira para você dar seu próximo passo profissional.
Conheça nossa trilha de Design e confira os nossos cursos de UX/UI com jornada personalizada e materiais complementares desenvolvidos por especialistas no mercado.


