4

Prévia do material em texto

Storyboarding e prototipação de 
interfaces
APRESENTAÇÃO
As tecnologias estão se polarizando e sua utilização está cada vez mais comum. Dessa forma, o 
diferencial é não somente oferecer um produto computacional, mas um sistema que seja 
eficiente e atraente, proporcionando uma boa experiência ao usuário durante a utilização.
Mas como saber se a sua ideia é boa e se os usuários pagarão por ela?
O design centrado no usuário apresenta técnicas e métodos que podem ser utilizados para 
proporcionar aumento da aceitação do produto pelo usuário final, objetivando ampliar a visão da 
equipe de design e dos usuários sobre o produto a ser desenvolvido, antes mesmo de codificá-lo. 
Por exemplo: a utilização de storyboards e de protótipos, que possibilitam a avaliação da ideia e 
sua reformulação de forma barata e com baixo esforço, ampliando a criatividade do designer e 
melhorando o entendimento sobre o que os usuários desejam.
Nesta Unidade de Aprendizagem, você aprenderá sobre os diferentes métodos que podem ser 
utilizados, ao longo do processo de desenvolvimento para a compreensão do problema. Verá, 
também, a importância da técnica de storyboard para o processo de design e qual o passo a 
passo para a sua criação. Por fim, estudará o uso de protótipos para a validação de ideias ao 
longo da construção do sistema.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Descrever métodos e técnicas de construção de interfaces.•
Demonstrar a narrativa gráfica ou storyboarding.•
Distinguir os tipos de protótipos de interfaces.•
DESAFIO
O uso de técnicas para o projeto de interface auxilia a equipe de design em vários estágios do 
processo de desenvolvimento da solução computacional, seja na compreensão e no estudo do 
problema ou na comunicação entre os membros da equipe para o entendimento da proposta de 
solução. Além disso, facilita a avaliação dos usuários, visando identificar e corrigir problemas.
Você integra a equipe de design da empresa Desenvolve! Recentemente, a equipe recebeu um 
novo projeto, porém vocês ainda não têm conhecimento do domínio da aplicação.
Até o momento, a informação recebida é de que o sistema foi solicitado para auxiliar usuários 
com deficiência visual.
Acompanhe o caso:
Agora é com você e sua equipe.
O trabalho é projetar a solução do sistema, auxiliando Ricardo na realização de sua tarefa. Para 
isso, apresente o passo a passo realizado nesse processo de desenvolvimento.
INFOGRÁFICO
A atividade de criar protótipos e wireframes é, em sua essência, uma atividade que exige do 
designer muito cuidado e atenção. Os protótipos de baixa fidelidade têm estrutura mais abstrata 
e rústica, mas passam uma mensagem ao usuário: de como o sistema está sendo pensado. Em 
um primeiro momento, quando ainda não se conhece a solução, rabiscos da interface são 
excelentes para aguçar a criatividade.
Contudo, em determinados momentos, é interessante apresentar ao usuário uma estrutura mais 
detalhada da aplicação, mostrando detalhes essenciais para a compreensão do que se deseja 
fazer. Dessa forma, ferramentas computacionais podem ser utilizadas para ajudar o designer na 
criação dos protótipos, sem grandes custos e desperdício de tempo.
Confira no Infográfico a seguir, algumas ferramentas de prototipação que auxiliam o designer 
na criação da solução computacional.
CONTEÚDO DO LIVRO
Como saber se o design proposto é realmente efetivo para o usuário do sistema? Como 
compreender e validar os requisitos coletados? Para que a equipe de design tenha melhor 
compreensão do que é o sistema computacional, técnicas e métodos podem ser utilizados para 
auxiliar na comunicação entre os interessados do projeto.
Storyboards e protótipos são ferramentas que auxiliam a equipe de design a se comunicar entre 
si e com seu cliente. Além de serem poderosas ferramentas para testar a qualidade do produto 
antes mesmo de desenvolvê-lo.
No capítulo Storyboarding e prototipação de interfaces, da obra Interface humano-computador, 
você verá que ao longo do processo de desenvolvimento de sistemas centrados no usuário, a 
equipe de design pode realizar uma série de atividades, com ou sem a participação do 
usuário para a capacitação, o conhecimento e a avaliação das informações necessárias à 
realização de um bom projeto.
Boa leitura.
INTERFACE 
HUMANO-
COMPUTADOR 
Leonara de Medeiros Braz
Storyboarding e 
prototipação de interfaces
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
  Descrever métodos e técnicas de construção de interfaces.
  Demonstrar a narrativa gráfica ou storyboarding.
  Distinguir os tipos de protótipos de interfaces.
Introdução
Não é de hoje que estamos cercados pela tecnologia, que, dia após dia, 
ganha ainda mais espaço na nossa vida e na realização de nossas ativi-
dades. Seja em telas de computadores, celulares ou objetos com poder 
de processamento, como os sistemas vestíveis, o ser humano está cada 
vez mais utilizando tecnologia.
Diante desse cenário, o design de interface deve ser cuidadosamente 
planejado para que ofereça soluções amigáveis e intuitivas para seus 
usuários. A atividade de design de interface envolve a prática do plane-
jamento e desenvolvimento de sistemas computacionais com o foco na 
boa experiência do usuário. Para isso, técnicas podem ser utilizadas para 
facilitar o processo de escolha feito pela equipe de design. 
Neste capítulo, você vai conhecer as principais técnicas, e sua im-
portância, para a construção de interfaces. Para isso, verá mais a fundo 
a narrativa gráfica, mais conhecida como storyboarding, e diferentes 
protótipos de interfaces.
1 Técnicas para a construção de interfaces
O processo de design em interação homem-computador (IHC) tem três fases 
fundamentais para a concepção de uma boa solução computacional: análise, 
síntese e avaliação. Porém, o esforço do designer deve ir além da compreen-
são sobre os usuários, suas tarefas e suas necessidades: deve estudar como 
estruturar as informações necessárias (de forma técnica e estética) para que 
o sistema seja funcional, tenha boa usabilidade e traga boa experiência para 
o usuário durante o uso do sistema.
Um dos grandes problemas enfrentados na construção de sistemas compu-
tacionais é a não compreensão do que realmente deve ser feito, muitas vezes 
devido às rupturas comunicativas entre usuário e designer. Esse problema de 
comunicação frequentemente se dá pelo fato de que o designer não compreende 
o domínio da aplicação — nomenclatura utilizada, contexto e tarefas realizadas 
— e porque o usuário não consegue transmitir de forma clara suas intenções. 
Em sua pesquisa, Braz (2017) percebeu a necessidade de uma melhor 
compreensão sobre o domínio da aplicação (ambiente escolar e ambiente 
educacional especializado — AEE), seus usuários (professores e alunos com 
deficiência) e o ambiente de utilização (sala de aula e salas multifuncionais). 
Para uma melhor compreensão sobre essas informações, técnicas foram utili-
zadas para auxiliar no processo de conhecimento e captação de informações.
As técnicas disponíveis na literatura servem como ferramentas poderosas para 
diminuir o esforço do designer na captura e no entendimento de informações, 
tendo como objetivo ser de baixo custo e baixo esforço de desenvolvimento.
Vale ressaltar que as diferentes técnicas disponíveis podem ser utilizadas em 
diferentes momentos no processo de design, apoiando tanto designers quanto 
usuários na estruturação do que deve ser o sistema computacional. O Quadro 
1 apresenta um conjunto de atividades que podem ser realizadas durante as 
várias fases do processo de desenvolvimento e que podem ser aplicadas tanto 
pela equipe do projeto quanto em conjunto com os clientes/usuários.
Pré-design Design Avaliação Pós-design
Clarificação/
requisitos
Inicial/iterativo Testes
Customização/
redesign
Storytelling HOOTD CISP Buttons ProjectPicture Card BrainDraw Icon Design Game Priority Workshop
Group Elicitation … … …
Quadro 1. Diferentes técnicas para auxílio da construção do sistema computacional 
durante as fases do processo
Storyboarding e prototipação de interfaces2
Cada técnica, com suas características, apresenta um modo diferente (e 
complementar) de coletar informações dos usuários para que haja um bom 
entendimento do que deve — e como deve — ser estruturado na interface 
do sistema.
Storytelling
O storytelling se refere à contação de história como processo de compreensão 
do contexto do projeto. Porém, não se trata apenas de contar uma história 
— essa história precisa ser relevante para o entendimento do sistema, e 
essas narrativas são importantes para entender como o design da interface 
apoiará o usuário.
Dentro da prática de storytelling, existem várias técnicas que podem ser 
utilizadas, sempre com o mesmo objetivo: contar uma narrativa que exem-
plifique um cenário de uso.
Em uma dessas técnicas, cada participante deve contar duas histórias sobre 
o sistema: uma positiva e outra negativa, geralmente com cards vermelhos 
e verdes. Após a contação, cada participante compartilha as histórias cria-
das e todos observam os contrastes e semelhanças. Essa técnica tem como 
resultados o reconhecimento das dificuldades, o conhecimento de caracte-
rísticas e dificuldades da população de usuários e a coesão aumentada entre 
os participantes. Por isso, pode ser utilizada com os usuários, que trarão as 
dificuldades enfrentadas por eles no cenário investigado, de modo que a 
equipe terá uma compreensão mais aprofundada sobre o usuário e sobre o 
que ele deseja. Quando essa prática traz a participação do usuário, aumenta 
também a sua compreensão sobre o seu problema, compreendendo a solução e 
as limitações enfrentadas para a concepção do sistema, o que pode contribuir 
para a aceitação do produto quando ele estiver desenvolvido.
Outra técnica é a jornada de usuário, que traz uma narrativa do objetivo 
maior do usuário, das ações e dos passos dos usuários, apresentando os sen-
timentos e expectativas do usuário sobre o produto que será desenvolvido. 
Geralmente, essa técnica é realizada pela equipe de design, não tendo a partici-
pação do usuário. Com a utilização dessa técnica, o designer busca visualizar 
as oportunidades de aperfeiçoamento do sistema. A Figura 1 traz um exemplo 
de uma especificação de jornada de usuário.
3Storyboarding e prototipação de interfaces
Figura 1. Exemplo de jornada do usuário.
Fonte: Ribeiro (2018, documento on-line).
Picture card
Nesta técnica, são utilizados cartões com imagens e legendas que ilustram 
tarefas ou cenários da vida cotidiana (se necessário, a equipe de design pode 
fazer uso de cartões mais específi cos, focando em uma tarefa). Essa técnica 
é utilizada juntamente com usuários para conhecimento de seus hábitos, 
experiências, tendências e comportamentos.
Na realização da atividade planejada, utilizando esse método, ao partici-
pante pode ser solicitado que relembre um evento, situação, tarefa ou história, 
agrupando os cartões em grupos. O uso de cartões com figuras em um contexto 
de grupo ajuda o diálogo e permite várias interpretações.
Brainstorming
Esta técnica busca gerar ideias e alternativas para o projeto. Geralmente, é 
utilizada com a participação do usuário, na fase de análise do projeto, para a 
compreensão do que é deve ser atendido pelo sistema. No entanto, a técnica é 
versátil e pode ser utilizada nas diferentes fases do processo, defi nindo como 
deve ser a estrutura da interface (fase de síntese) e determinando causas e 
soluções de problemas (fase de avaliação).
Storyboarding e prototipação de interfaces4
As atividades de brainstorming são realizadas em grupo, encorajando 
o compartilhamento de ideias e a participação de todos os envolvidos. Um 
moderador deve guiar a seção, dando oportunidade para que todos apresentem 
suas ideias, sem julgamento e sem limite. Nesse momento, o que vale é a 
quantidade de ideias apresentadas, não sua qualidade. Dessa forma, encoraja-
-se que os participantes não tenham vergonha de expor suas ideias, por mais 
“bobas” que elas possam parecer.
Após a coleta de toas as ideias, a equipe se reúne para discutir analisando 
cada proposta e priorizando as mais importantes. Desse modo, ao final da seção, 
tem-se como resultado uma lista das principais funcionalidades (requisitos) 
que o sistema deve apresentar ordenadas por relevância/prioridade.
Uma técnica semelhante, BrainDraw, pode ser utilizada para analisar 
como o usuário estrutura as informações de forma visual. Como o nome já 
indica (brain significa cérebro e draw, desenho), os usuários apresentam suas 
ideias em forma de desenho, estruturando as funcionalidades como forma de 
interface. Com essa técnica, busca-se entender como o usuário visualiza a 
solução computacional.
Geralmente essa técnica é utilizada na fase de síntese, quando já existe um 
conhecimento das funcionalidades a serem desenvolvidas; com essa técnica, 
a equipe de design busca soluções para possíveis organizações da estrutura 
do sistema. Após o término dos desenhos, todos os participantes apresentam 
a solução desenhada e priorizam os elementos e estruturas que façam sentido 
para o projeto.
Essa fase também é muito eficaz para promover a compreensão e aumentar 
a coesão entre usuários e designers, de modo que todos tenham o mesmo 
entendimento sobre o sistema a ser desenvolvido.
Existem diversas outras técnicas de design que podem ser utilizadas ao longo das fases 
de desenvolvimento do sistema computacional. Cabe à equipe escolher quais técnicas 
atendem os objetivos e necessidades da equipe. Para conhecer novos métodos de 
design, acesse o link a seguir.
https://qrgo.page.link/HsjRG
5Storyboarding e prototipação de interfaces
2 Storyboards
O storyboard busca representar uma história, contando-a de forma gráfi ca 
por meio de uma sequência de imagens em que cada uma representa um 
momento no tempo. Essa técnica é utilizada desde a década de 1920 pelos 
estúdios Walt Disney.
A técnica de storyboard é amplamente utilizada na área de design e design 
visual, na produção de desenhos animados, televisão e vídeos (HART, 1998). 
O uso do storyboard possibilita a visualização de todo o contexto do cenário 
antes mesmo de construí-lo. Esse recurso funciona como um mapa que, acom-
panhado de informações adicionais, traz orientações à equipe. 
Mas como essa técnica se aplica ao design de interfaces computacionais? 
No design de UX (user experience), os storyboards podem ser utilizados para 
descrever o produto, facilitando a sua compreensão; por exemplo, cada bloco 
ilustrado representa um estado da interface em um momento da interação.
Trata-se de um documento extremamente visual e que descreve em deta-
lhes todas as funcionalidades do produto. Ao dividir uma história em pedaços 
lineares, permite-se que o autor se concentre em cada célula separadamente, 
sem distração. Para Truong, Hayes e Abowd (2006), “os storyboards ge-
ralmente ilustram um cenário previsto de como um recurso de aplicativo 
funciona”.
Para que o sistema computacional apresente uma estrutura coerente, é 
necessário que o designer compreenda os mínimos detalhes relacionados ao 
processo de interação do usuário com o sistema. Dessa forma, os storyboards 
(Figura 2) possibilitam esse detalhamento e mapeamento do fluxo de inte-
ração, mostrando como as ações realizadas pelos usuários sobre a interface 
encadeiam eventos no sistema.
Durante a fase de análise do desenvolvimento de software, os designers 
estudam as práticas atuais das partes interessadas e realizam estudos de 
campo para gerar cenários de problemas. Durante a fase de design, os 
designers usam cenários de atividades para introduzir ideias concretas 
sobre como os requisitos do usuário podem ser atendidos por meio de 
funcionalidades de alto nível introduzidas por um novo sistema que afetará 
inerentemente as atividades atuais do usuário. Emseguida, os designers 
criam cenários de design de informações, que especificam representações 
dos objetos e ações de uma tarefa que ajudarão os usuários a perceber, 
interpretar e entender as funcionalidades propostas. Por fim, os cenários 
de design de interação especificam como os usuários interagem com o 
sistema para executar as novas atividades (TRUONG; HAYES; ABOWD, 
2006, p. 12).
Storyboarding e prototipação de interfaces6
Figura 2. Storyboard de Alice no país das maravilhas.
Fonte: Rivas (2016, documento on-line). 
O uso do storyboard no processo de design traz como vantagem a de-
monstração visual do produto, tanto sob a perspectiva do usuário quanto para 
o entendimento da equipe de design sobre a tecnologia a ser criada. Dessa 
forma, a utilização dessa técnica “abre os olhos” do designer para novos 
cenários de investigação.
Para Nick Babich (2017), o uso storyboard para contar uma história é uma 
poderosa ferramenta para captura de informação, pois:
  histórias são mais memorizáveis do que lista de planos;
  histórias captam a atenção do usuário, criando um maior engajamento;
  produz-se maior empatia: cria-se personagens que possuem vida, his-
tória, contexto.
 Considerando o ditado popular segundo o qual “uma imagem vale por 
mil palavras”, concluímos que as ilustrações ajudam no entendimento da 
ideia apresentada.
Jake Knapp (2013), designer do Google Ventures, apresentou oito passos 
que são utilizados durante as sprints de seus projetos para a criação de um 
bom storyboard; confira-os a seguir. 
7Storyboarding e prototipação de interfaces
1. Escolher parte do problema: se a história for muito grande, é melhor 
dividi-la em histórias menores.
2. Tomar notas: é preciso identificar suas considerações e impressões 
sobre o problema.
3. Mapa mental: juntamente com as notas que se tomou, deve-se adicionar 
suas ideias e organizá-las em um papel.
4. “Oito malucos”: cada membro da equipe deve ter uma folha em branco 
com oito painéis vazios. Em cinco minutos, todos da equipe devem 
desenhar oito sketches (um em cada painel). O principal objetivo dessa 
fase é apresentar uma variedade de ideias de forma rápido. Nesse passo, 
ainda não é necessário preocupar-se com beleza — considerando que 
o tempo disponível é curto, o designer deve se preocupar mais com a 
ideia do que com o estilo.
5. Storyboard: deve-se começar com um papel em branco e desenhar três 
notas, em que cada uma represente um frame do storyboard. Para isso, 
é possível utilizar as atividades passadas como auxílio no processo 
criativo. Esses três frames são utilizados para apresentar progresso — 
primeiro isso, depois aquilo e depois aquilo outro. Uma boa prática é 
deixa-lo anônimo, ou seja, não identificar quem criou cada storyboard.
6. Crítica silenciosa: de forma silenciosa, todos devem analisar os story-
boards produzidos e colocar notas em cada ideia que gostar (não há 
limites de uso das notas).
7. Três minutos de crítica: analisando os storyboards, um por vez, os 
participantes falam o que eles gostaram da proposta apresentada e 
pede-se ao autor do desenho para explicar sua ideia. Essa atividade 
deve respeitar o tempo de três minutos por storyboard.
8. Supervoto: cada membro pode votar na ideia que mais se agradou. 
O supervoto ajuda a refletir sobre as decisões. 
Após a realização desses passos, é preciso repeti-los. Essas técnicas devem 
ser seguidas de forma iterativa, realizando os passos quantas vezes forem 
necessárias. Ao observar que as decisões foram tomadas e não são necessárias 
reformulações, passa-se a um novo problema. A Figura 3 apresenta a realização 
de algumas das atividades descritas por Knapp (2013), como a escolha de parte 
do problema que será abordado pelo time (a), o mapa mental construído após 
as considerações individuais de cada membro (b), as oito telas desenhadas, 
Storyboarding e prototipação de interfaces8
apresentando a ideia de solução do problema (c), a criação do storyboard (d) e 
a fase de crítica, em qye cada membro apresenta o que gostou e o que poderia 
ser melhorado nas propostas apresentadas (e).
Figura 3. Técnicas para criação de storyboards.
Fonte: Adaptada de Knapp (2013).
9Storyboarding e prototipação de interfaces
Os storyboards podem ter vários níveis de abstração e, segundo Greenberg 
et al. (2011), podem ser abstratos, podem ter uma interface visual, anotações, 
indexar ações realizadas ou apresentar um layout. A Figura 4 apresenta uma 
representação desses níveis de abstração.
Figura 4. Representação dos diferentes tipos de storyboards.
Fonte: Adaptada de Greenberg et al. (2011).
3 Tipos de protótipos
Uma das poucas certezas que existem no desenvolvimento de sistemas compu-
tacionais é que os requisitos mudam. Para não perder tempo do projeto desen-
volvendo uma versão do sistema para confi rmação com o usuário, utilizamos 
protótipos para a representação da interface. Dessa forma, representamos as 
informações necessárias e apresentamos aos usuários, de modo a observar se 
estamos seguindo o caminho correto.
O design das interfaces pode ser realizado em diferentes níveis de abstração, 
desde a representação informal, por meio de esboços (como os storyboards), 
passando por representações estruturadas e até mesmo representações de alto 
nível, fiéis ao produto final.
Storyboarding e prototipação de interfaces10
A essas representações estruturadas e de alto nível, damos o nome de 
protótipo. A ideia inicial é que a equipe de desenvolvimento inicie o processo 
de criação apresentando esboços da solução proposta e, ao longo do processo 
de desenvolvimento, vá criando novos e melhores protótipos.
De acordo com McElroy (2016), a utilização de protótipos e a sua validação 
por usuários reais (em vez da equipe de desenvolvimento) é o melhor caminho 
para criar uma solução que tenha impacto na vida do usuário final: “Existem 
muitas razões para criar protótipos e incluí-los cedo e frequentemente em seu 
processo: entender, testar e melhorar, comunicar e advogar. Cada um deles é 
semelhante, mas tem uma reviravolta única na qual os protótipos são valiosos” 
(MCELROY, 2016, documento on-line).
  Para entender: o melhor modo de entender o problema é explorar 
novas ideias, e o protótipo é uma boa ferramenta para isso. Criar uma 
variedade de alternativas auxilia o designer a entender o caminho 
que o sistema vai percorrer. Ademais, o protótipo auxilia a criar uma 
concordância de entendimento e ideias sobre o que é o sistema e como 
será a sua solução.
  Para testar e melhorar: esse é o principal objetivo da utilização dos 
protótipos. Cada pedaço da sua solução pode ser prototipada e, assim, 
ser testada pelos usuários do sistema, levando à aprovação do modelo 
de solução proposto ou à apresentação dos problemas que devem ser 
corrigidos e modificados para as próximas versões.
  Para comunicar: os protótipos auxiliam na comunicação entre a equipe 
de design e os usuários. Compreender uma ideia que é apresentada de 
forma gráfica (ou até mesmo fisicamente) é muito mais fácil do que 
analisar uma lista de requisitos que foram coletados. Por exemplo, os 
diferentes integrantes da equipe podem imaginar, a seu modo, a solução 
proposta, dificultando o alinhamento entre todas as ideias que surgirem.
  Para defender: a criação de protótipo auxilia a “defesa” da solução 
apresentada, e os testes com usuários retornam valores importantes e 
apresentam uma direção a ser seguida.
Os protótipos podem ser classificados pelo seu grau de fidelidade: na hora 
da criação do protótipo, o tipo de objetivo é o principal fator que define o seu 
nível de fidelidade, ou seja, saber quem vai usar uma simulação define como 
ela deve ser desenvolvida.
11Storyboarding e prototipação de interfaces
Protótipos de baixa fidelidade são rascunhos ou esboços da interface, sem 
preocupação com detalhes dos aspectos gráficos; podem ser feitos manual-
mente ou por computador. Alguns exemplos de ferramentas computacionais 
que auxiliam o designer na criaçãode protótipos de baixa fidelidade são 
Balsamiq, MockFlow, Mockingbird, Draw.io, Moqups. A Figura 5, a seguir, 
exemplifica um protótipo de baixa fidelidade feito à mão.
Figura 5. Protótipo em pape criado em minutos.
Fonte: Adaptada de Travis (2010).
Esse tipo de protótipo não se parece com o produto final, embora seja mais 
barato e fácil de fazer. O principal objetivo de se usar protótipos de baixa 
fidelidade é que sua produção é rápida e auxilia na avaliação pelo usuário, 
encontrando problemas como arquitetura da informação, navegação, fluxo 
de interação, etc. 
A ideia é utilizar esse tipo de protótipo no início do processo de design, 
quando a equipe ainda está maturando a ideia e entendendo o problema. 
Por ser barato, pode ser facilmente descartado e refeito, sem grandes custos 
orçamentais e de tempo.
Storyboarding e prototipação de interfaces12
Protótipos de média fidelidade já começam a ser mais parecidos com o 
produto final, trazendo uma visibilidade gráfica melhor. Com o aumento do 
grau de fidelidade do protótipo, aumenta também o esforço e o custo para a 
sua concepção. Dessa forma, esses protótipos são indicados para um estágio 
mais avançado no processo de design, e o seu objetivo é testar pontos mais 
específicos da solução, focando no teste da interação do usuário com o sistema. 
Exemplos são protótipos clicáveis, ou até mesmo protótipos codificados, em 
seu estado inicial. A Figura 6 apresenta um exemplo de protótipo de média 
fidelidade.
Figura 6. Protótipo de média fidelidade, apresentando mais detalhes.
Fonte: McElroy (2016, documento on-line).
Os protótipos de alta fidelidade representam fielmente a aplicação desenvol-
vida e apresentam as decisões de tamanho, posições, cores, fontes, etc. Nesse 
momento, no processo de design, a maioria das questões foram testadas nos 
protótipos anteriores; dessa forma, os protótipos funcionais são usados para 
testar pequenos detalhes, como legibilidade, tamanho da fonte e experiência 
do usuário. Devido ao seu grau de fidelidade, esses protótipos têm alto grau 
de esforço e custo de desenvolvimento. A Figura 7 apresenta uma evolução 
dos protótipos desenvolvidos para uma aplicação.
13Storyboarding e prototipação de interfaces
Figura 7. Diferentes tipos de protótipos.
Fonte: Dantas (2018, documento on-line). 
O designer deve ter cuidado com a escolha do protótipo durante o processo 
de criação, pois “O nível de fidelidade que você escolher para um protótipo 
afetará o tipo de feedback que você recebe dos usuários nos testes” (MCELROY, 
2016, documento on-line). A Figura 8 exemplifica a variação de fidelidade que 
o protótipo pode atender. Cabe ao designer responsável equilibrar a que nível 
pertence seu protótipo para atender o seu objetivo; quanto mais próximo desses 
limites de fidelidade, maior é a diferença entre as vantagens e desvantagens 
de sua utilização.
Figura 8. Diferentes graus de fidelidade do protótipo.
Fonte: Adaptada de Dantas (2018). 
Storyboarding e prototipação de interfaces14
McElroy (2016) apresenta uma comparação entre os prós e contras de cada 
nível de protótipo utilizado, indicando a visão e o comportamento do usuário ao 
utilizar essas aplicações. No Quadro 2, você confere a comparação realizada.
Fonte: Adaptado de McElroy (2016).
Baixa 
fidelidade
Média 
fidelidade
Alta 
fidelidade
Prós
Rápido, sem 
necessidade 
de muito 
conhecimento, 
barato, feito com 
materiais próximos.
Mais interativo, 
fácil de testar, 
bom equilíbrio 
entre tempo 
e qualidade.
Design completo, 
incluindo visual, 
conteúdo e 
interação; pode 
testar os detalhes 
da interação.
Contras
Limitações na 
interação, difícil 
testar detalhes e 
fluxos de navegação, 
apresenta pouco 
contexto para 
os usuários.
Mais demorado, 
mas não 
totalmente 
funcional.
Muito mais 
demorado, requer 
habilidades de 
software ou 
codificação, difícil de 
testar componentes 
grandes.
Uso
Exploram e testam 
conceitos de 
alto nível, como 
a arquitetura da 
informação; é o 
melhor para fazer 
várias versões 
diferentes e testar 
uma contra a outra.
Usuários testam 
interações 
específicas; é 
melhor para os 
stakeholders, 
pois apresenta 
mais contexto.
Usuários testam 
interações bastante 
específicas de 
forma detalhada, 
teste final de fluxo 
de interação e 
apresenta o design 
final para as partes 
envolvidas.
Quadro 2. Prós e contras dos diferentes níveis de fidelidade dos protótipos
A escolha do grau de fidelidade do protótipo deve estar de acordo com o 
objetivo da equipe de design. Quando se está no início do projeto, é interessante 
apresentar um protótipo de baixa fidelidade, pois a estrutura do sistema pode 
mudar; com isso, a equipe de design não desenvolverá um sistema (gastando 
tempo e orçamento) que será modificado. Quando se tem um maior conheci-
mento da estrutura do sistema, o nível de fidelidade dos protótipos aumenta, 
atendendo as novas necessidades até que o sistema seja aprovado pelo usuário.
15Storyboarding e prototipação de interfaces
BABICH, N. Storyboarding in UX Design. 2017. Disponível em: https://medium.com/@
mauri.ribeiro/o-stoytelling-e-a-import%C3%A2ncia-para-a-narrativa-dentro-do-design-
-f407b0d6c677. Acesso em: 2 fev. 2020.
BRAZ, L. M. Design para todos e educação inclusiva: envolvendo professores na criação 
de tecnologias. 2017. Dissertação (Mestrado em Ciência da Computação) — Instituto 
de Computação, Universidade Estadual de Campinas, Campinas, 2017. Disponível em: 
https://www.unicamp.br/unicamp/teses/2017/11/22/design-para-todos-e-educacao-
inclusiva-envolvendo-professores-na-criacao-de. Acesso em: 2 fev. 2020.
DANTAS, A. Um rápido estudo de prototipagem. 2018. Disponível em: https://brasil.
uxdesign.cc/uma-r%C3%A1pido-estudo-de-prototipagem-81a1b300471b. Acesso 
em: 2 fev. 2020.
DESIGN PRACTICE METHODS. 2020. Disponível em: http://www.designpracticemethods.
rmit.edu.au/. Acesso em: 2 fev. 2020.
GREENBERG, S. et al. Sketching User Experiences: The Workbook. Burlington: Morgan 
Kaufmann Publishers Inc., 2011. 
HART, J. The Art of the Storyboard: Storyboarding for Film, TV, and Animation. Massa-
chusetts: Focal Press: 1998.
KNAPP, J. The 8 steps to creating a great storyboard. 2013. Disponível em: https://www.
fastcompany.com/1672917/the-8-steps-to-creating-a-great-storyboard. Acesso em: 
2 fev. 2020.
MCELROY, K. Prototyping for physical and digital products. 2016. Disponível em: https://
www.oreilly.com/ideas/prototyping-physical-digital-products. Acesso em: 2 fev. 2020.
RIBEIRO, M. O Storytelling e a importância para a narrativa dentro do design. 2018. Dispo-
nível em: https://medium.com/@mauri.ribeiro/o-stoytelling-e-a-import%C3%A2ncia-
-para-a-narrativa-dentro-do-design-f407b0d6c677. Acesso em: 2 fev. 2020.
RIVAS, N. Storyboard. 2016. Disponível em: https://designculture.com.br/storyboard. 
Acesso em: 2 fev. 2020.
TRAVIS, D. 7 myths about paper prototyping. 2010. Disponível em: https://www.userfocus.
co.uk/articles/paperprototyping.html. Acesso em: 2 fev. 2020.
TRUONG, K. N.; HAYES, G. R.; ABOWD, G. D. Storyboarding: An Empirical Determination 
of Best Practices and Effective Guidelines. In: Proceedings of the 6th Conference on 
Designing Interactive Systems, 6., 2006. Anais… New York: ACM, 2006. Disponível em: 
https://dl.acm.org/doi/10.1145/1142405.1142410. Acesso em: 2 fev. 2020.
Storyboarding e prototipação de interfaces16
Os links para sites da Web fornecidos neste capítulo foram todos testados, e seu fun-
cionamento foi comprovado no momento da publicação do material. No entanto, a 
rede é extremamente dinâmica; suas páginas estão constantemente mudando de 
local e conteúdo. Assim, os editores declaram não ter qualquer responsabilidade 
sobre qualidade, precisão ou integralidade das informações referidas em tais links.
17Storyboarding e prototipação de interfaces
DICA DO PROFESSOR
A escolha de qual método utilizar na construção de modelos de interface nem sempre é uma 
tarefa trivial. Por isso, é necessário conhecer as características das técnicasa serem utilizadas e 
como elas suportam a realização da atividade pelo designer. Os storyboards, por 
exemplo, apresentam visualização de cenário de utilização, proporcionando entendimento do 
contexto de uso, se caracterizando como protótipo de baixa fidelidade; os mockups já 
apresentam estrutura mais elevada, com detalhes da aplicação; enquanto os protótipos 
funcionais de alto nível se assemelham ao produto final que será produzido.
Saber o que você deseja coletar é fundamental para que a escolha da técnica utilizada seja 
assertiva. Usar a ferramenta correta amplia as vantagens de utilização dos métodos, 
proporcionando boa coleta de informações, escolha que deve ser guiada pelo objetivo 
estabelecido com a realização das atividades. Para isso, é necessário pensar além do objetivo-
alvo e se a equipe tem habilidade necessária para manusear a ferramenta. 
Confira na Dica do Professor a seguir, algumas técnicas de prototipação e de desenvolvimento 
colaborativo. 
Conteúdo interativo disponível na plataforma de ensino!
EXERCÍCIOS
A construção de interface é um processo demorado que requer do designer atenção e 
cuidado para que o sistema computacional oferecido seja adequado às necessidades 
do usuário.
Sobre a construção de interfaces, analise as seguintes afirmativas: 
I - As três fases fundamentais para a concepção de uma boa solução computacional 
no processo de design em IHC são: análise, síntese e execução.
II – O designer deve compreender as tarefas e as necessidades de seu público-alvo e 
não somente seu perfil e objetivo.
1) 
III - É de extrema importância que o designer tenha boa compreensão do domínio da 
aplicação, de seus usuários e do ambiente de utilização.
Assinale a alternativa que contém as assertivas corretas. 
A) I, II e III.
B) Apenas I e III.
C) Apenas I e II.
D) Apenas II e III.
E) Apenas I.
2) Existem diferentes técnicas na literatura que podem ser utilizadas pela equipe de 
design durante as diferentes fases do processo de desenvolvimento do sistema. Cada 
técnica tem suas características e auxilia a equipe na compreensão e na construção da 
solução.
Sobre essas técnicas, analise as definições a seguir:
I. Esta técnica traz uma narrativa sobre o usuário, apresentando seu objetivo, os 
passos realizados e os sentimentos experimentados durante a realização das ações.
II. Esta técnica é utilizada para conhecer os hábitos, as experiências, as tendências e 
os comportamentos dos usuários; nela o participante é convidado a relembrar uma 
tarefa ou uma situação.
III. Esta técnica pode ou não ser utilizada em conjunto com o usuário e cada 
participante apresenta seu ponto de vista por meio de duas narrativas sobre o 
sistema, mostrando conceitos relevantes para o seu entendimento.
Considerando as definições acima, assinale a alternativa que apresenta, na ordem 
correta, as técnicas descritas.
A) Jornada de usuário, picture card, storytelling.
B) Storytelling, brainstorming, jornada de usuário.
C) Picture card, jornada de usuário, brainstorming.
D) Storytelling, picture card, storyboard.
E) Jornada de trabalho, storyboard, picture card.
3) A técnica de storyboard é uma representação, em forma de desenho, de uma história 
de uso ou cenário. Ela serve para apresentar um panorama do sistema computacional 
e como ele se comporta durante a interação do usuário.
Considerando seus conhecimentos sobre storyboards, analise as afirmações a seguir e 
selecione a correta.
A) O uso de storyboards possibilita a visualização de todo o contexto do cenário após a sua 
construção.
B) Cada bloco ilustrado representa um conjunto de interfaces dinâmicas do sistema 
computacional.
C) Os storyboards trazem benefícios para a equipe apenas quando são utilizados na fase de 
síntese, pois já se conhece a solução.
D) Histórias captam a atenção do usuário, criando maior engajamento e empatia dos usuários.
E) Os storyboards devem seguir um formato restrito. Dessa forma, a equipe poderá seguir um 
passo a passo restrito.
4) Storyboards são representações visuais que contam uma história, tendo por objetivo 
melhorar o entendimento da equipe de design sobre a proposta de solução. Segundo 
Greenberg et al. (2011), eles podem ter diferentes níveis de abstração.
Considerando seus conhecimentos, analise as afirmações a seguir e selecione a 
alternativa correta.
A) Storyboards caracterizados como Interface visual apresentam apenas as representações 
visuais da solução computacional.
B) Storyboards caracterizados como Layout apresentam a representação visual e uma pequena 
descrição dos elementos da tela.
C) Storyboards caracterizados como Abstrato apresentam um cenário de uso, mostrando o 
porquê a solução faz sentido.
D) Storyboards caracterizados como Indexado apresentam apenas um fluxo lógico da 
sequência de telas, sem muitos detalhes.
E) Storyboards caracterizados como Com anotação apresentam a representação do fluxo 
lógico das telas e uma possível representação da solução.
Os protótipos auxiliam a equipe de design a compreender o problema abordado e a 
tentar propor uma solução que seja efetiva e aceita. Ele possibilita aos usuários e aos 
designers avaliarem a proposta antes mesmo de seu desenvolvimento. 
Sobre o uso de protótipos, analise as afirmativas e selecione a alternativa que 
apresenta apenas as assertivas corretas: 
I. O protótipo de alta fidelidade tem como ponto negativo o tempo, o esforço e os 
custos necessários para sua criação. Durante seu desing são implementadas 
funcionalidades muito semelhantes com o que será apresentado ao usuário no 
produto final. 
5) 
 
II. Com os protótipos de baixa fidelidade, os usuários podem testar interações 
específicas do sistema.
 
III. Para a construção de protótipos de média fidelidade, a equipe de design leva mais 
tempo, mas traz um bom equilíbrio entre tempo e qualidade.
A) Apenas a afirmação I está correta.
B) Apenas a afirmação II está correta.
C) Apenas a afirmação III está correta.
D) Apenas as afirmações II e III estão corretas.
E) Apenas as afirmações I e III estão corretas. 
NA PRÁTICA
O desenvolvimento de sistemas computacionais centrados no usuário requer maior atenção da 
equipe de design para as necessidades e as experiências dos usuários. Técnicas e métodos 
podem ser utilizados para maior compreensão do problema, para apresentar formas criativas de 
explorar as ideias da equipe, para melhorar a comunicação e para avaliar a solução proposta, 
antes mesmo de desenvolver o sistema.
Storyboards e protótipos são técnicas que contribuem para a criação de sistemas centrados no 
usuário, pois possibilitam a criação de recursos de baixo custo e alto valor de retorno, incluindo 
a fase de avaliação da ideia ou do material construído ao longo do processo de desenvolvimento, 
o que favorece a aceitação do produto pelo usuário e maior facilidade de utilização. Além disso, 
essas técnicas contribuem para que a equipe de design compreenda de forma homogênea o 
caminho que o projeto está trilhando, diminuindo a ambiguidade de compreensão e a 
divergência de opiniões.
Conheça neste Na Prática, a história de Leo, que visualiza em suas atividades diárias a 
importância de utilizar diferentes técnicas para a concepção de sistemas voltados para boa 
usabilidade e melhor aceitação do produto pelo usuário final.
Conteúdo interativo disponível na plataforma de ensino!
SAIBA MAIS
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do 
professor:
Brainstorming: ideias para soluções inovadoras
Neste vídeo, o autor fala sobre a técnica do brainstorming, sua importância na coleta de 
informações para a compreensão do que deve ser feito e diferentes formas de aplicação dessa 
técnica em um projeto.
Conteúdo interativo disponível na plataforma de ensino!
A importância da prototipação no design de games
O autores refletem sobre a utilização de protótipos nas diferentes fases de desenvolvimento de 
jogos,apresentando as vantagens observadas com a utilização dessa técnica.
Conteúdo interativo disponível na plataforma de ensino!
Guia completo de prototipação em UX Design
Confira, neste artigo, um guia para a utilização de protótipos no design de sistemas voltados 
para uma boa experiência do usuário.
Conteúdo interativo disponível na plataforma de ensino!