design e novas midias aula 4

Prévia do material em texto

DESIGN E NOVAS MÍDIAS 
AULA 4 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Profª Fabiane Alves de Lima 
 
 
2 
CONVERSA INICIAL 
Até aqui, você já recebeu uma grande quantidade de informações e está 
quase habilitado a desenvolver os seus próprios produtos interativos – quase! 
Uma vez que temos estabelecido todo o conjunto de requisitos para dar início ao 
nosso projeto, definidos nosso escopo e a estrutura de navegação, estamos 
prontos para montar o esqueleto e, finalmente, dar uma “cara” definitiva ao nosso 
produto digital. 
Todo o processo em cinco etapas que vimos na aula anterior descreve 
essa atividade do designer, que vai do projeto conceitual ao produto final 
propriamente dito. Mas o que permite ao designer percorrer toda essa trajetória 
e ir do conceito ao produto, passando pela avaliação com os usuários, é a 
prototipação ou prototipagem. 
Nesta aula, estudaremos as várias formas de se criar protótipos para 
interações digitais, os seus vários graus de complexidade e as aplicações de 
cada um deles nas diferentes fases de desenvolvimento. Também veremos a 
sua importância no momento em que precisamos validar esses designs junto aos 
usuários, afinal são eles – e a satisfação que eles obtêm da interação com o 
nosso produto – o objetivo do nosso trabalho como projetistas. 
CONTEXTUALIZANDO 
A essa altura dos seus estudos, já deve ter ficado claro para você que o 
processo de design de um produto digital evolui em ciclos iterativos 
interdependentes. Conforme avaliamos cada design junto aos usuários em cada 
uma das etapas de criação, podemos avançar no desenvolvimento dessa 
interação, polindo-o progressivamente até que ele possa estar pronto para ser 
lançado no mercado e usado pelo público que queremos atingir. 
Se esperamos para validar a interação com os nossos usuários somente 
quando a peça estiver pronta, podemos deixar passar muitas coisas que, 
estando diretamente envolvidos na produção, podem não ser tão evidentes a 
nós. E, acredite: isso dá a maior dor de cabeça! Mas, se fazemos validações 
constantes do produto junto ao nosso público-alvo desde a sua gênese, 
diminuímos as chances de ter surpresas desagradáveis no momento em que 
pensamos que estamos concluindo o projeto. No entanto, para que possamos 
 
 
3 
fazer essa validação junto aos usuários, não é necessário que tenhamos em 
mãos o produto finalizado. 
As ferramentas e os meios de prototipação que vamos apresentar aqui, 
bem como as formas de avaliação e validação, são algumas das habilidades 
mais cobiçadas pelos designers no mercado atualmente. Você terá acesso aos 
diferentes tipos de atividades dentro da prototipação e, ao final desta aula, estará 
pronto para desenvolver os seus próprios protótipos para produtos digitais. 
TEMA 1 – PROTOTIPAGEM 
Geralmente, quando pensamos em prototipagem no design, lembramos 
daqueles modelos feitos em clay – uma espécie de massa de modelar – ou ainda 
das maquetes que permitem a engenheiros e arquitetos terem uma noção mais 
clara do que visam construir. No caso do design digital, nosso objetivo final não 
é exatamente construir um modelo físico do nosso produto, ainda que boa parte 
dessa construção possa ocorrer no mundo analógico. Porém, tanto os modelos 
em clay quanto os protótipos puramente digitais servem a um mesmo propósito: 
possibilitar “uma representação limitada de um design que permite aos usuários 
interagir com ele e explorar a sua conveniência” (Preece; Rogers; Sharp, 2013, 
p. 261). 
A verdade é que, dado que os protótipos podem ter uma ampla variedade 
de graus de complexidade, a princípio eles podem ser qualquer coisa entre 
alguns rabiscos em uma cartolina até uma simulação feita com softwares 
apropriados que emulam com grande fidelidade aquela que pode ser a versão 
final do produto desenvolvido. O que determina esse grau de fidelidade é 
justamente o grau de semelhança do protótipo com o produto final (Babich, 
2017). Esses dispositivos facilitam a comunicação das ideias entre os diferentes 
membros da equipe e permitem testar com rapidez algumas das ideias geradas. 
Protótipos respondem a questões e fornecem suporte aos designers 
para a escolha de uma dentre as várias opções. Portanto, servem para 
vários fins: por exemplo, testar a viabilidade técnica de uma ideia, 
esclarecer alguns requisitos vagos, realizar alguns testes com usuários 
e avaliações, ou verificar certo como que se tomou no design é 
compatível com o resto do desenvolvimento do sistema. ter um desses 
fins como seu propósito irá influenciar o tipo de propósito que você irá 
construir. (Preece; Rogers; Sharp, 2013, p. 261)	
 
 
 
4 
1.1 Protótipos no design conceitual 
Como você deve ter notado, os protótipos podem ser usados nas mais 
diversas fases da produção. Dado que seu objetivo é testar o resultado do 
trabalho enquanto ele está sendo feito, eles servem para avaliar as ideias 
conforme elas forem surgindo e responder a questões projetuais. Diferentes 
tipos de protótipos respondem a questões diferentes e podem ser usados em 
momentos distintos do processo, inclusive ajudando os projetistas a identificar 
aquelas ideias tecnicamente inviáveis. 
Protótipos de baixa fidelidade em geral são usados desde muito cedo no 
processo de design, enquanto os de alta fidelidade costumam ser usados mais 
tarde. Note que os protótipos de baixa fidelidade não são usados no momento 
de se decidir como a interface será ou que menus e pictogramas ela terá, ainda 
que incluamos neles alguns detalhes mínimos – apenas o suficiente para que 
consigamos fazer os usuários interagirem com eles. 
Cenários de uso, por sua vez, podem também ser bastante úteis. Com 
base neles, retratados em storyboards, podemos inferir os rumos do projeto – 
será que as pessoas utilizarão o produto da forma como planejamos? Será que 
o cenário que elegemos é apropriado à realização da tarefa que propomos? – e 
também esboçar as suas possibilidades. Apoiados nesses protótipos mais 
simples, podemos fazer uso de modelos conceituais que nos ajudem a 
selecionar os designs mais apropriados. Com eles, podemos estruturar os 
processos do sistema a ser desenvolvido de forma clara, considerando os 
caminhos e formatos do ambiente virtual por onde o usuário vai passar. 
1.2 Protótipos de baixa fidelidade 
Os protótipos de baixa fidelidade são os mais distantes da ideia final 
proposta. Eles podem ser feitos de papel e, no caso de um produto digital que 
também tenha uma “encarnação física” – um console de videogame, um novo 
modelo de smartwatch etc. –, podem até mesmo ser feitos em madeira 
esculpida. Esses protótipos são úteis justamente pela simplicidade e pela 
possibilidade de rápida produção e servem para a exploração de ideias 
alternativas e também para investigar cenários de uso. 
 
 
 
5 
Figura 1 – Protótipos de baixa fidelidade são rápidos e baratos de produzir 
 
Crédito: Chaosamran_Studio/Shutterstock. 
Protótipos de baixa fidelidade podem ser de muitos tipos, e a seguir 
exploraremos alguns deles: 
● Storyboards: como nos storyboards para cinema e audiovisual, os 
storyboards aplicados ao desenvolvimento de produtos digitais servem à 
exploração de cenários de uso, mostrando como um usuário progride na 
realização de uma determinada tarefa. Eles podem consistir em uma série 
de telas que o usuário percorre em uma interface gráfica ou mesmo em 
cenas, demonstrando o uso prático de um produto no mundo real. 
● Esboços: nessa modalidade de prototipação de baixa fidelidade, os 
esboços servem para representar ações e possibilidades dentro da 
interface – botões, formulários, ícones e caixas de diálogo. Usados junto 
aos storyboards, eles também podem representar pessoas, objetos e até 
mesmo ações do mundo real. 
● Fichas: são provavelmente o método de prototipação de baixa fidelidade 
favorito de dez entre dez designers digitais. Elas representam cada uma 
das telas ou elementos da tarefaa ser realizada pelo usuário. Nas 
avaliações em que o usuário está presente, podemos usar essas fichas 
para simular a trajetória dele na interface, alternando esses cartões 
 
 
6 
conforme as escolhas que o usuário faz enquanto interage com eles. 
Existem muitos modelos prontos de fichas desse tipo que podem ser 
usados em projetos de produtos interativos. 
● Em software: ainda que em geral os protótipos em software costumem 
ter mais similaridade ao produto final, é possível criar interações simples 
no meio digital que possam simular as interações possíveis dos usuários 
com o sistema. Esses protótipos simples não precisam ser funcionais, e 
pode haver um simulador humano na outra ponta simulando as respostas 
do sistema diante das ações desempenhadas dentro dele. Alguns autores 
classificam esse tipo de protótipo como de média fidelidade. 
TEMA 2 – PROTÓTIPOS DE ALTA FIDELIDADE 
Enquanto os protótipos de baixa e média fidelidades buscam auxiliar 
designers e projetistas a formarem uma visão mais palpável do produto que 
estão desenvolvendo, os protótipos de alta fidelidade, como o nome já implica, 
aproximam-se muito mais do produto acabado. Antigamente, esse tipo de 
prototipagem era mais difícil de se realizar e era feito em ferramentas visuais de 
programação, como a suíte do Visual Basic, da Microsoft. 
Alguns autores argumentavam contra uso de protótipos de alta fidelidade, 
dado que até alguns anos atrás eles levavam tempo considerável para serem 
construídos e podiam elevar as expectativas de desenvolvedores e usuários em 
relação ao produto final. Ao longo da última década, no entanto, várias 
ferramentas dedicadas especificamente à prototipagem de produtos digitais 
foram lançadas no mercado. A grande maioria dessas novas ferramentas é 
gratuita e acessível e permite a qualquer um com o mínimo de experiência no 
uso de softwares de edição gráfica montar o seu protótipo. 
 
 
 
7 
Figura 2 – Protótipos de alta fidelidade podem ser confundidos com a versão 
final do sistema 
 
Créditos: AlexanderTrou/ Shutterstock. 
2.1 Vantagens e desvantagens 
 Devido à facilidade atual de se criar protótipos de alta fidelidade, designers 
podem se sentir tentados a, logo de início, fazer uso deles. No entanto, é preciso 
estar atento às diferentes aplicações desses diferentes tipos de prototipagem. 
Isso é importante porque muitas vezes podemos ser levados a perder muito 
tempo detalhando nosso protótipo de alta-fidelidade, deixando passar erros que 
poderiam ser detectados em uma "encarnação" mais simples da interação que 
estamos projetando. 
Entre as vantagens dos protótipos de alta fidelidade sobre os de baixa 
fidelidade, está a possibilidade de simular a funcionalidade e as interações 
completas do produto, permitindo que o usuário sozinho possa testá-lo sem a 
intermediação de um projetista. Com protótipos de alta fidelidade, também 
podemos fazer demonstrações claras do funcionamento do produto, podendo 
usá-los em apresentações e provas de conceito quando, por exemplo, uma 
empresa ou startup busca investidores para tornar as suas ideias factíveis. 
 
 
8 
Porém, uma vez que se trata de um desenvolvimento a ser realizado mais 
tarde no esquema da metodologia da experiência de usuário (Garrett, 2011), os 
protótipos de alta fidelidade não possuem as vantagens da produção e avaliação 
rápidas de conceitos de design. Por outro lado, eles facilitam a identificação de 
erros de interação e não possuem as limitações óbvias das prototipagens mais 
simples. Isso também pode acarretar algumas dificuldades, como podemos ver 
a seguir: 
Um dos perigos de se produzir em protótipos executáveis, isto é, com 
os quais se pode interagir automaticamente, é o fato de usuários 
poderem acreditar que ele constitui o próprio sistema. O perigo para os 
desenvolvedores está na possibilidade de um protótipo poder levá-los 
a considerar menos alternativas, visto que eles descobriram uma que 
funciona e que os usuários apreciam. (Preece; Rogers; Sharp, 2013, p. 
267) 
2.2 Do design à implementação: design patterns 
 Uma vez que o projeto tenha passado pelos ciclos iterativos de produção 
um número de vezes suficiente para que possa se enquadrar nos requisitos 
elencados na primeira fase – e tenha produzido protótipos que foram avaliados 
e aprovados pelos desenvolvedores e, se possível, também por usuários e 
especialistas, em uma avaliação heurística –, é chegado o momento de reunir 
todos os conhecimentos produzidos até então para a geração do produto final. 
Todo esse trabalho é necessário para produzir um produto concreto, livre de 
falhas (ao menos com o mínimo possível delas), buscando atender as 
necessidades de projetistas e utilizadores. 
A prototipação é que nos permite detalhar e concretizar o projeto, 
possibilitando atravessar o vão que vai do conceito criado até o produto 
propriamente dito. Produzir um protótipo significa tomar decisões, mesmo que 
essas decisões sejam revertidas posteriormente diante de um novo dado ou 
perspectiva. Essas decisões e conhecimentos serão então convertidos em 
recomendações, princípios e regras que ajudarão a equipe a desenvolver aquele 
produto específico da forma mais eficaz e eficiente possível. 
Algumas das grandes empresas de tecnologia que temos hoje têm 
embutidos em seu processo de produção o uso de design patterns (padrões de 
design). Frutos da sua extensa experiência no desenvolvimento de produtos 
digitais, empresas como Google, Apple e Microsoft criaram documentos 
detalhando de que forma devem ser produzidas aplicações para as suas 
 
 
9 
plataformas. Esses padrões são populares na engenharia de software desde os 
anos 1990 e buscam criar um vocabulário com soluções simples para tratar de 
problemas em um determinado contexto. 
A documentação do Material Design (<http://material.io>) é um exemplo 
de design pattern, pensada especificamente para construção de interfaces 
gráficas, tanto dentro do ambiente Android (sistema para smartphones mantido 
pelo Google) quanto na web que acessamos pelo navegador dos nossos 
computadores desktop. Esses documentos podem auxiliar jovens designers e 
estudantes a pensarem na aplicação dessas estruturas de componentes e 
modelos mentais de interação. 
TEMA 3 – CONSTRUINDO PROTÓTIPOS – PARTE 1 
Conforme já vimos nesta aula, os protótipos de baixa fidelidade são 
formas rápidas e práticas de testar conceitos de design convertidos em um 
artefato palpável e possível de interação e avaliação. Neste item, trataremos das 
técnicas mais comuns de desenvolvimento de protótipos de baixa e média 
fidelidades: começaremos pelos populares cartões de papel e depois veremos 
os wireframes clicáveis, demonstrando seus usos e aplicações práticas, 
conforme alguns dos tipos de abordagem elencados no subitem 1.2 deste 
material. 
3.1 Prototipando em papel 
É comum que muitos estudantes de Design hoje em dia sejam ansiosos 
para ir logo ao computador dar forma às suas ideias. O computador nos parece 
dar resultados aparentemente polidos e bem acabados em pouco tempo, porém 
o que alguns desses estudantes podem falhar em perceber é que, apesar de o 
computador nos dar muitas possibilidades criativas, ele também pode coibir 
nossos processos criativos ao restringi-los ao relativamente pequeno quadro 
formado pelos limites de sua tela. 
Os protótipos em papel, por sua vez, podem servir para incluir no 
processo de desenvolvimento de um novo produto digital todos os interessados 
envolvidos, e não apenas aqueles familiarizados às linguagens dos 
computadores. A curva de aprendizagem para uso dos protótipos de papel é 
muito menor, afinal todo mundo sabe rabiscar — inclusive aqueles que não 
 
 
10 
possuem conhecimentos técnicos para desenvolver protótipos mais detalhados, 
os quais, ainda assim, podem contribuir com sua experiência como usuários, 
dando contexto ao design de interação. 
Muitos escritóriosde design e startups passaram a criar os seus próprios 
templates para o desenvolvimento de aplicações digitais. Alguns desses 
templates – que podem incluir esquemas simplificados de componentes de 
interação ou mesmo dispositivos, como a tela de um celular – podem ser 
facilmente encontrados na internet. O blog do Marvel, um dos vários aplicativos 
para criação de protótipos de média e alta fidelidades, disponibiliza alguns 
templates gratuitamente1. Eles abarcam desde os tamanhos de tela mais 
comuns em smartphones até as grandes telas de tablets e desktops, passando 
pelas pequenas telinhas dos smartwatches. Esses templates possuem um grid 
para facilitar o desenho à mão dos componentes e espaço para tomar notas. 
No entanto, é muito fácil produzir os seus próprios templates com papel e 
canetinhas. Não é preciso ter medo de fazer desenhos “feios”: o importante é 
permitir que as ideias fluam, mesmo que não se enquadrem na telinha em um 
primeiro momento. Em seguida, tenha em mente que atualmente o principal meio 
de acesso à internet das pessoas é o celular. Assim, a prioridade precisa ser o 
design da interface móvel. Com base nela, é possível expandir o design para os 
demais formatos, sem o inconveniente de ter que fazer o processo inverso e ter 
que espremer muita coisa um pouco espaço. É importante também que se faça 
apenas um esboço por tela. 
Algumas vezes, é necessário fazer uma demonstração de funcionalidade 
com protótipos de papel. Isso pode exigir uma certa carga de imaginação por 
parte de designers e possíveis espectadores, uma vez que um membro da 
equipe precisa ser designado para fazer o papel do “computador”: este será 
responsável por prover o feedback ao usuário, trocando os cartões de tela 
conforme planejado na interação mediante a ação do usuário. Esse “papel” 
precisa ser ensaiado para evitar confusões no momento dos testes e das 
eventuais demonstrações (Fulton, 2018). 
Todos esses desenhos gerados podem integrar, posteriormente, a 
documentação do projeto. Além da possibilidade de coletar feedback de todos 
os envolvidos nele de forma fácil e barata, essa forma de prototipagem gera 
 
1 Disponível em: <https://marvelapp.com/static/site/downloads/devices.pdf>. Acesso em: 12 jul. 
2021. 
 
 
11 
artefatos que nos ajudam a compreender a história desse desenvolvimento, de 
modo que possamos retomar esse processo criativo mais tarde. 
3.2 Prototipando com software 
Alguns protótipos simples, mas um tanto mais complexos que os de papel, 
podem ser produzidos com as mesmas ferramentas da prototipagem de alta 
fidelidade que veremos adiante. A diferença é que aqui o nível de detalhe é muito 
mais baixo: em vez de uma interface semelhante à do produto final, temos 
simples wireframes clicáveis. 
Um wireframe é um tipo de representação hiper-simplificada dos 
elementos, componentes e estruturas de uma página, aplicação ou tela. Ele 
organiza os itens no espaço virtual como se fosse, por exemplo, o grid de uma 
página de revista. Dentro da metodologia de experiência de usuário que vimos 
na aula anterior (Garrett, 2011), os wireframes são aplicáveis na fase da 
estrutura, no momento em que se pensa a arquitetura da informação. 
Transpondo-se esses wireframes estáticos para um programa de 
prototipagem, é possível criar e planejar uma jornada de usuário ou um fluxo de 
interação completo. O resultado ao final é um protótipo testável, ainda que 
simples, de fácil modificação e adaptação e que pode ser testado com usuários, 
projetistas e demais membros da equipe de desenvolvimento sem a necessidade 
de tanto faz de conta, como no caso dos protótipos de papel. 
No item a seguir, abordaremos e demonstraremos a criação de protótipos 
de alta fidelidade em uma das ferramentas disponíveis gratuitamente. Por ora, 
basta saber que, tanto para protótipos de média fidelidade quanto para os de 
alta, usa-se esse mesmo tipo de ferramenta. 
TEMA 4 – CONSTRUINDO PROTÓTIPOS – PARTE 2 
Desde que os estudos em interação humano-computador se iniciaram, na 
primeira metade do século XX, muita coisa mudou. Antigamente, não era tão 
simples criar um protótipo funcional de alta fidelidade: engenheiros e técnicos 
muitas vezes assumiam o papel dos designers, e, quando os designers 
começaram a entrar na área, a partir dos anos 1980, muitos deles se dedicaram 
a aprender habilidades técnicas como a programação, tornando-se quase 
engenheiros na prática (Preece; Rogers; Sharp, 2013). 
 
 
12 
Com a popularização dos dispositivos móveis e dos computadores, 
também o trabalho de desenhar interfaces foi sendo facilitado. Hoje existe um 
sem número de ferramentas para prototipação disponíveis, que cobrem os mais 
variados contextos e necessidades dos projetistas. Apresentaremos a seguir 
algumas dessas ferramentas e uma pequena introdução a respeito de como 
utilizá-las. 
Sendo os designers digitais já bastante familiarizados com o modo de 
funcionamento dos programas gráficos, você notará que não é muito difícil 
aprender a usá-los. Afinal, essas ferramentas são projetadas pelos melhores 
designers de interface do mercado. 
4.1 Escolhendo sua ferramenta 
As ferramentas listadas a seguir permitem que você desenvolva 
representações interativas dos seus projetos digitais. Elas permitem construir 
protótipos bastante finalizados, mas também podem ser usadas em níveis de 
abstração um pouco maiores. Nem todas as ferramentas listadas são gratuitas, 
mas algumas permitem hospedar pelo menos um projeto sem custo ou possuem 
um período de experimentação suficiente para que você possa se tornar versado 
nelas. 
Algumas precisam ser instaladas na máquina do usuário, enquanto outras 
rodam diretamente no navegador. A maioria permite simular a interação em um 
smartphone de forma bastante realística. Elas funcionam mais ou menos 
seguindo a mesma lógica, de modo que, se você aprender bem como usar uma 
delas, pode aplicar o mesmo conhecimento no uso de outra, caso uma vaga de 
emprego exija experiência específica. 
● InVision: há mais de 10 anos no mercado, o InVision tem uma boa base 
de usuários, sendo a preferida de muitos designers. Ele permite trabalhar 
de forma cooperativa, rápida e dinâmica, com ferramentas de desenho 
vetorial e uma grande biblioteca de componentes, transições, animações 
e outros efeitos visuais interativos. É possível usá-lo gratuitamente ou 
assinar alguns de seus planos. Disponível em: <http://invisionapp.com>. 
● Adobe XD: parte da suíte Adobe, essa ferramenta de prototipagem se 
integra bem com Photoshop e Illustrator e, justamente por isso, 
rapidamente ganhou popularidade entre os designers. Seus recursos 
 
 
13 
permitem gerar resultados muito bem acabados e visualmente 
impressionantes. Ele possui um plano gratuito para uso não profissional, 
o que é perfeito para o jovem estudante de design que está aprendendo. 
Disponível em: <http://adobe.com/products/xd.html>. 
● Sketch: outro dos mais tradicionais e favoritos programas de 
prototipagem, o Sketch também tem uma boa base de usuários, e muito 
conhecimento compartilhado por essa comunidade está disponível online. 
Possui uma grande biblioteca de elementos reutilizáveis, sendo também 
muito fácil de usar. Seus desenvolvedores disponibilizam planos de 
assinatura ou licença individual do programa, com os quais só se paga 
uma vez. Disponível em: <http://sketch.com>. 
● Marvel: uma das primeiras opções que os estudantes escolhem para 
aprender prototipagem, o Marvel possui um plano gratuito ilimitado para 
uso pessoal. Também pensado para ser usado em equipe, ele é bastante 
flexível e permite publicar um protótipo por meio de um link que pode ser 
acessado para realização de testes de qualquer lugar — contanto que 
haja conexão com internet. Bastante usado também profissionalmente, 
ele também gera código e elementos de interface que podem ser usados 
mais tarde no produto final. Disponível em: <http://marvelapp.com>.● Figma: mais um queridinho dos designers, o Figma surgiu como uma 
ferramenta de desenho colaborativa e online. Experimentando as 
possibilidades de desenvolver software que rodasse diretamente no 
navegador, ele acabou evoluindo para se tornar uma ferramenta nativa da 
internet, acessível e fácil de usar. Além de seu principal uso como 
ferramenta de projeto de interfaces, o Figma pode ser usado como uma 
ferramenta de design gráfico e desenho vetorial, com baixíssima curva de 
aprendizagem. Disponível em: <http://figma.com>. 
4.2 Principais recursos 
Nesta subseção, vamos explorar alguns dos principais recursos do Adobe 
XD, ferramenta de prototipagem de uso gratuito individual — pago em caso de 
uso comercial — que vem junto à Adobe Creative Cloud, popular suíte de 
ferramentas projetuais para designers, artistas e produtores de conteúdo. O site 
da ferramenta possui vasta documentação, com tutoriais e recursos que podem 
ser baixados e usados nos projetos. 
 
 
14 
Assim que o programa abre, somos apresentados a uma tela de boas-
vindas em que podemos começar escolhendo algumas das especificações de 
nosso novo documento a ser criado. Podemos, por exemplo, escolher o tamanho 
da tela conforme a necessidade – se nosso projeto interativo é um aplicativo para 
celular ou um site que será acessado via desktop –, dispondo de várias opções 
de resoluções de tela usadas nos mais variados dispositivos disponíveis no 
mercado. Pode-se também escolher um tamanho personalizado. Uma vez que 
essa configuração esteja ajustada, podemos prosseguir salvando nosso arquivo. 
Da mesma forma que outros programas de edição gráfica, tanto da Adobe 
quanto outros, o Adobe XD funciona com pranchetas, chamadas artboards, na 
versão em inglês. Cada prancheta representa uma tela (ou “página”) da interface, 
o espaço virtual em que disporemos os componentes de interação. Essas 
pranchetas possuem grande flexibilidade, podendo ter dimensões, nome, 
número de telas, orientação (vertical ou horizontal) e outras configurações 
facilmente alteradas. Tome cuidado com esse tipo de alteração, pois pode afetar 
diretamente a apresentação do protótipo, dependendo da plataforma em que 
você pretende que ele rode posteriormente. 
Um recurso muito interessante e prático no momento de criar protótipos 
são os UI Kits. Os UI Kits do Adobe XD são coleções de componentes e 
elementos de interface – botões, formulários, menus etc.; UI é sigla para user 
interface – prontos e personalizáveis que podem ser usados no projeto, sem a 
necessidade de se perder muito tempo na sua confecção. Além dos conjuntos 
de elementos que vêm com a ferramenta, outros podem ser baixados 
posteriormente. Copiando e colando elementos, é possível criar telas com 
aspecto de produto finalizado rapidamente. 
Ao clicar com o lado esquerdo do mouse em cada um dos elementos de 
interface, é possível programar rapidamente o seu comportamento mediante as 
interações: podemos decidir que o clique um dado botão redirecione o usuário 
para outra tela (prancheta/artboard) ou abra um menu específico sobreposto 
(chamado na ferramenta de overlay); podemos escolher se essa ação será 
animada, como essa animação acontecerá e quanto tempo ela vai durar. 
Podemos também importar conteúdos de outros programas da suíte, como o 
Photoshop e o Illustrator. 
É importante ter em mente que a maioria dos programas de prototipagem 
de produtos interativos funciona mais ou menos dentro dessa mesma lógica. 
 
 
15 
Assim, o que você aprende em uma das ferramentas pode ser facilmente 
transposto para aplicação em outra. Para mais detalhes, acesse a página de 
tutoriais do Adobe XD (disponível em: 
<https://helpx.adobe.com/br/xd/tutorials.html>). 
TEMA 5 – AVALIANDO A EXPERIÊNCIA DE USUÁRIO 
A premissa de envolver o usuário no design diz respeito a torná-lo central 
no processo de desenvolvimento do produto. O usuário é um parâmetro 
importante desde as definições, especificações técnicas e de escopo do projeto, 
mas provavelmente o principal momento em que a sua participação mais direta 
é fundamental é quando precisamos testar as nossas criações. Uma vez que 
esse design progride em ciclos iterativos, a avaliação do usuário pode acontecer 
em vários estágios do desenvolvimento, auxiliando os projetistas a evitarem 
refações e consertar problemas descobertos depois de um produto pronto. 
Existem muitas técnicas para avaliação que buscam oferecer suporte aos 
desenvolvedores. Algumas delas já foram apresentadas em aulas anteriores, 
como a avaliação heurística, conduzida por profissionais experientes na área. 
Entretanto, ainda que a avaliação por especialistas seja importante, a avaliação 
por parte dos usuários pode nos ajudar a encontrar problemas no uso prático 
das aplicações, que podem passar despercebidos por olhos treinados. 
Algumas das técnicas que são utilizadas na avaliação de produtos digitais 
são as mesmas que podemos usar no estabelecimento de requisitos e 
necessidades do projeto, mas empregadas de maneira diferente (Preece; 
Rogers; Sharp, 2013). A escolha dessas técnicas depende de uma série de 
fatores, como: falta de disponibilidade de usuários para teste, necessidade de se 
observar os usuários em seu contexto de uso sem interferências externas, 
disponibilidade de equipamentos apropriados para realização dos testes etc. 
Cada projeto pode exigir uma metodologia de testes diferente. 
No caso de uma avaliação de usabilidade, existe a necessidade de 
observar usuários. Em alguns casos, essa observação pode ser mais curta e 
ligeira, feita de maneira casual visando obter feedback imediato sobre um dado 
protótipo. Outras vezes, faz-se necessária uma observação mais detalhada, em 
ambiente controlado e com equipamento adequado – câmeras, microfones, 
keyloggers etc. – para registrar o percurso dos usuários, incluindo seus toques, 
cliques e conversas. Em outros casos ainda, pode ser necessário observar os 
 
 
16 
usuários em seu “ambiente natural”, em um contexto mais próximo do uso real 
desses produtos. 
Algumas das técnicas envolvem metodologias semelhantes às utilizadas 
na antropologia, como a observação participante e a etnografia. Outras técnicas 
buscam realizar uma análise mais quantitativa dos dados coletados, por exemplo 
quantas vezes um usuário clica em uma determinada área ou em quais locais da 
interface os seus olhos repousam com mais frequência. 
Provavelmente, as técnicas mais flexíveis para avaliação de produtos 
digitais são as entrevistas e os questionários. Da mesma forma que a entrevista 
tem papel de metodologia na pesquisa social, aqui ela pode ser mais ou menos 
estruturada, individual ou em grupos focais. Também é possível realizar 
questionários com perguntas abertas – nas quais os usuários descrevem a sua 
experiência – ou fechadas – como o uso de escalas de diferencial semântico, 
como a escala de Likert, em que se assinala em uma escala numérica a 
intensidade com que o usuário concorda com uma dada afirmação ou discorda 
dela. 
A literatura do design de interação, do design de experiência de usuário e 
da interação humano-computador fornece vasta documentação sobre o assunto. 
Cabe aos projetistas decidirem a melhor forma de avaliação diante de seu 
contexto de projeto e desenvolvimento. 
TROCANDO IDEIAS 
 Atualmente, a área do design de interação e o projeto de experiências de 
uso têm atraído bastante atenção de designers, técnicos e pessoas com os mais 
variados perfis e repertórios profissionais. O trabalho na área é interessante e 
recompensador, podendo conduzir à criação de produtos e experiências 
inovadoras. Além disso, existe uma série de possibilidades de trabalho que 
podem fazer uso desses diferentes perfis profissionais, abarcando desde artistas 
e ilustradores até engenheiros e programadores. 
No fórum de nossa disciplina, converse com seus colegas a respeito de 
em que tipo de papel profissionalvocês gostariam de atuar na área do design de 
interação, diante de tantas possibilidades.	
 
 
 
17 
NA PRÁTICA 
 Algumas décadas atrás, a criação de protótipos de média e alta 
fidelidades era dificultada pela falta de ferramentas específicas a essa atividade. 
Além disso, a curva de aprendizagem para utilizar o que havia de disponível era 
um tanto mais alta, exigindo os mesmos conhecimentos técnicos de 
programadores de sistemas. Hoje em dia, como pudemos ver nesta aula, temos 
à nossa disposição um sem número delas, todas de uso bastante simples e 
intuitivo. 
Entre as ferramentas listadas aqui, experimente algumas delas e escolha 
a que mais se adapta ao seu uso e rotinas pessoais. Busque exercitar na prática 
os seus recursos principais, tendo em mente que possuir experiência com essas 
aplicações pode ser a garantia que você precisava para conseguir uma boa vaga 
de emprego nesse mercado tão promissor. 
FINALIZANDO 
 Nesta aula, vimos em profundidade como se dá o processo de 
prototipagem de baixa e alta fidelidades – e também as suas possibilidades 
intermediárias. Percorremos as conceituações e perspectivas específicas dessa 
fase projetual, bem como as suas aplicações práticas e as ferramentas 
disponíveis para tornar esse desenvolvimento possível. 
Com base nos conhecimentos expostos aqui, esperamos que você possa 
dar início à sua própria jornada individual como usuário-aprendiz dessas 
ferramentas. Esperamos que você possa traçar para si uma trajetória profissional 
de sucesso na área. Na próxima aula, faremos uma breve introdução a 
ferramentas mais técnicas de produção de interações digitais, que permitirão 
avançar do protótipo ao produto final: lidaremos um pouquinho com os mistérios 
dos códigos HTML e CSS. Até lá! 
 
 
 
REFERÊNCIAS 
ADOBE. Adobe XD tutorials: design, prototype, and share user experiences”. 
Disponível em: <https://helpx.adobe.com/br/xd/tutorials.html>. Acesso em: 12 
jul. 2021. 
BABICH, N. Prototyping 101: The Difference between Low-Fidelity and High-
Fidelity Prototypes and When to Use Each. Adobe Blog: Creativity. Disponível 
em: <https://blog.adobe.com/en/publish/2017/11/29/prototyping-difference-low-
fidelity-high-fidelity-prototypes-use.html>. Acesso em: 12 jul. 2021. 
FULTON, G. Stop Talking and Start Sketching: A Guide to Paper Prototyping. 
MarvelApp Blog. Disponível em: <https://marvelapp.com/blog/stop-talking-start-
sketching-guide-paper-prototyping/>. Acesso em: 12 jul. 2021. 
GARRET, J. J. The Elements of User Experience: User-Centered Design for 
the Web and Beyond. 2. ed. Berkeley: New Riders, 2011. 
PREECE, J.; ROGERS, Y.; SHARP, H. Design de interação: além da interação 
humano-computador. Porto Alegre: Bookman, 2013.