Interface e interação

Prévia do material em texto

Interface e interação
Prof.ª Flávia Garcia de Carvalho
Descrição
A área de atuação do design de interação e suas diferenças quanto a outras áreas de atuação.
Recomendações, heurísticas e procedimentos para a projeção de interfaces de usuários.
Propósito
Entender o real propósito do trabalho do designer de interação é essencial para a qualificação do
profissional, o seu posicionamento no mercado e a sua atuação em equipes de trabalho.
Adicionalmente, dominar as principais questões que devem ser levantadas antes de se iniciar um
projeto de criação de interface confere eficiência ao processo de trabalho e garante que o
profissional alcance os objetivos do projeto.
Objetivos
Módulo 1
Interface e o design de interação
Reconhecer a atividade de design de interação e os principais dispositivos de interação.
Módulo 2
Plataformas
Analisar os requisitos de cada plataforma e as posturas requeridas de aplicativos.
Módulo 3
Funcionalidade, usabilidade e acessibilidade
Diferenciar funcionalidade, usabilidade e acessibilidade, além de suas recomendações em
projetos de interface.
Módulo 4
Analogias, abstrações, metáforas, métodos e técnicas
Aplicar as metáforas de interface e os métodos e técnicas de projeto de interface.
Introdução
Hoje em dia, diariamente usamos dispositivos, como smartphones ou computadores, para executar
todo tipo de tarefa, desde o trabalho, nossas obrigações como cidadãos e o acesso a produtos e
serviços até o simples contato com nossos entes queridos. Precisamos interagir todos os dias com
aplicativos e softwares usando interfaces, que estão à vista nas telas de nossos dispositivos.
Atividades que, no passado, eram feitas por atendimento presencial mediante o preenchimento de
formulários em papel ou graças a curtos (ou, o que é pior, longos) telefonemas foram
obrigatoriamente convertidas para soluções digitais. Tais soluções obrigaram essas pessoas a usar
aplicativos e softwares com interfaces para interação.
Você já teve dificuldade ao tentar utilizar um aplicativo, considerando-o “mal feito”? Sentiu-se
perdido, sem saber como fazer uma tarefa? Provavelmente, sua resposta é sim!
Com o grande número de aplicativos e sites que inundou o mercado de forma obrigatória, alguns
realmente não apresentavam boas interfaces. Elas, afinal, deveriam ajudar o usuário a interagir de
maneira fácil – e não o contrário.
É importante que essas interfaces sejam projetadas com um bom design de interação! Por conta
disso, neste conteúdo, falaremos sobre elas, explicando a importância de seu design e de sua
capacidade de interação.

1 - Interface e o design de interação
Ao �nal deste módulo, você será capaz de reconhecer a atividade de design de
interação e os principais dispositivos de interação.
Ligando os pontos
Você sabe o que é design de interação? Quais as competências de um profissional dessa área?
Para entendermos melhor essa área profissional, vamos simular uma situação em uma empresa
fictícia de desenvolvimento de aplicativos.
Imagine que você começou a trabalhar recentemente em uma empresa de desenvolvimento de
aplicativos. É uma empresa antiga, que começou há 20 anos e naquele início contratava web
designers para criarem sites. Desde então, a empresa já passou por muitas mudanças para
acompanhar as transformações do mercado e recentemente contratou você como designer de
interação.
Hoje, dificilmente a empresa recebe um pedido para “criar um website”. Na maioria das vezes os
pedidos são para a criação de um aplicativo para dispositivos móveis adaptando funcionalidades
de um site existente ou então são projetos maiores que envolvem a criação de um site e também o
desenvolvimento de um aplicativo para dispositivos móveis.
Atualmente, a empresa se apresenta como uma agência especializada em desenvolvimento de
aplicativos móveis, plataformas Web e produtos digitais, sempre centrados no fator humano e
analisando sempre qual será o fluxo mais intuitivo para o usuário.
Você participa da sua primeira reunião com colegas de trabalho e um cliente, para os primeiros
passos do planejamento de uma solução digital.
Junto com o cliente, a equipe vai começar a levantar o objetivo da nova solução digital, o público
alvo, quais atividades que esse público deve desempenhar, em quais contextos essas atividades
serão desempenhadas e as possíveis tecnologias que serão envolvidas.
Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?
Questão 1
Como designer de interação nessa equipe, todas essas informações que estão sendo
levantadas são importantes para o seu trabalho? Por quê?
A
Sim, porque essa é a melhor oportunidade para descobrir as cores preferidas
do cliente, que serão usadas como paletas de cores do projeto.
B
Não, pois nas reuniões com cliente são abordados todos os temas possíveis, e
nem todos interessam a todas as especialidades de cada membro da equipe.
C
Sim, porque você criará todo o aplicativo, enquanto os demais membros da
equipe fazem parte do setor administrativo da empresa e trabalharão para
garantir os insumos necessários.
Parabéns! A alternativa D está correta.
Sim. Todas essas informações são importantes para um designer de interação, que trabalhará
junto com a equipe para projetar uma solução. Esse contato inicial é importante para se iniciar o
projeto, mesmo sabendo que depois serão feitas pesquisas para aprofundar e consolidar esse
primeiro levantamento.
Questão 2
Nesta reunião, você terá a oportunidade de entender melhor o escopo do projeto para começar
o planejamento do projeto de interface do novo aplicativo. Considere algumas informações que
podem ser obtidas com o cliente:
I. Mostrar templates de diversas interfaces e pedir para o cliente escolher suas preferidas.
II. Do que se trata o negócio da empresa do cliente e que serviços ela atualmente fornece.
III. Quem são os concorrentes ou serviços similares aos que a empresa do cliente fornece.
IV. Qual seria o diferencial do serviço que o cliente pretende fornecer em relação a seus
concorrentes.
Em sua visão de designer de interação, alinhado com a maneira que a empresa em que
trabalha se posiciona no mercado, escolha as informações que devem ser levantadas com o
cliente.
D Sim, porque o design de interação é uma atividade que tem por fim projetar
produtos interativos que facilitam a comunicação e a interação das pessoas. O
foco está sempre no usuário final.
E
Não, pois essa reunião é somente uma formalidade e todas as informações
necessárias serão levantadas depois, por outra equipe.
A I, II e III
B II, III e IV
C
Parabéns! A alternativa B está correta.
Apesar de ser importante envolver o cliente no projeto, o objetivo é voltado para o usuário. Não é
uma questão de gosto pessoal do cliente ou do designer de interação. Sobre templates de
interfaces, o cliente não é a pessoa mais capacitada para definir qual seria o melhor agora e
também não estamos nessa fase do projeto. Por outro lado, existem informações preciosas que,
nesse caso, o cliente é a pessoa mais capacitada para dar, que são as informações sobre o
próprio negócio do cliente, que, no futuro, será aprimorado pelo novo aplicativo.
Questão 3
Você acredita que o cliente deve estar sempre a par da maneira com que a equipe trabalha e das
etapas do projeto? Justifique sua resposta.
Digite sua resposta
Chave de resposta
É importante que o cliente esteja sempre a par dos métodos utilizados pela equipe e entenda
o funcionamento de cada etapa. Isso não é somente uma forma de vender a imagem da
empresa e de provar o valor do trabalho que está sendo desempenhado. Como ponto de
partida, o envolvimento do cliente ajuda a determinar o real objetivo do novo aplicativo e ajuda
a equipe a chegar nos possíveis usuários. Fazer o cliente entender o processo de trabalho
também ajuda a prevenir insatisfações do mesmo, que pode criar expectativas irreais sobre a
I, III e IV
D I e III
E I e IV
solução do problema, por desconhecimento dos processosque envolvem a criação de um
novo aplicativo e de sua interface.
Design de interação
Não foram somente as interfaces que invadiram o mercado. Você já deve ter esbarrado em termos,
como “design de interação”, “design de interface”, “web design”, “UX”, “UI” e “IxD”.
Todos eles se relacionam de alguma forma com essa questão. Conheceremos o uso desses termos
para podermos entender melhor o mercado de design de interação.
Conceitos iniciais sobre design de interação
Primeiramente, vamos entender o significado de design. Trata-se de um termo muito popular, sendo
aplicado em muitos lugares e contextos. Embora muitas pessoas chamem de "design" belos
trabalhos visuais, ele definitivamente não é sinônimo de "desenho".
O design está relacionado com a atividade de projetar soluções para atingir
objetivos, os quais resultam em um produto com forma e funcionalidade.
O design gráfico é uma atividade de criação ou aplicação de soluções visuais para itens a serem
produzidos pela indústria gráfica. Já em outros exemplos de design, as soluções projetadas não
são necessariamente visuais, como é o caso do design instrucional, cujo propósito é criar materiais
didáticos que atinjam objetivos pedagógicos de forma sistemática.
O que é então um design de interação?
Trata-se da atividade de projetar produtos interativos que facilitam a comunicação e a interação
das pessoas.
Talvez você já tenha ouvido falar em design de sistemas interativos, design de interface do usuário,
projeto de software, web design, design centrado no usuário, design de produto e design de
experiência. Saiba que o termo “design de interação” aparece em todos esses assuntos.
O objetivo do design de interação é entregar uma interface com a qual o usuário:
Possa interagir de maneira fácil.
Sinta-se seguro.
Consiga realizar as tarefas.
Mas o design de interação significa criar interfaces bonitas? Na verdade, ele não é só isso... vamos
analisar melhor a seguir!
E as siglas UX, UI e IxD?
Provavelmente você já deve ter visto essas siglas em algum lugar. De uma forma ou de outra, elas
também se relacionam com o design de interação.
IxD: Considerado um sinônimo de design de interação.
UX: Design de experiência do usuário.
UI: Design de interface.
xD
Interaction design.
X
User experience.
I
User interface.
Talvez você já tenha ouvido falar em UX como sinônimo de design de interação, porque realmente
existe uma sobreposição entre essas duas atividades. A verdade é que o UX está relacionado à
projeção da experiência de usar um produto, o que vai além da interação, mas a maior parte disso
envolve justamente o design de interação.
O UX é uma grande categoria guarda-chuva, uma vez que engloba o design de interação e muitas
outras atividades relacionadas à experiência do usuário.
Já o UI está mais relacionado com o trabalho de selecionar os elementos certos da interface,
como botões, campos de texto e listas. A verdade é que ele também está relacionado ao design de
interação, embora o foco do UI esteja mais voltado para a interface do que para a interação, tendo
um caráter mais material e gráfico.
Ilustração das semelhanças e das diferenças entre UX, UI e IxD.
De forma resumida, podemos dizer que o design de interação (ou IxD) está na sobreposição entre o
design de experiência de usuário (UX) e o de interface de usuário (UI).
Interface x Interação: Relacionamento e
diferenciação
O que é interface?
Originalmente, uma interface configura uma superfície de contato entre coisas diferentes. Se você
colocar água e óleo em um copo, a água irá para a parte de baixo; o óleo, para a de cima. A
superfície de contato entre os dois é chamada de interface.
Aqui, porém, empregaremos o termo “interface” em outro contexto: o uso de ferramentas. No dia a
dia, nós as utilizamos a todo momento para possibilitar ou facilitar nossas tarefas. Essas
ferramentas podem ser analógicas ou digitais.
Exemplo
Quando usa um abridor de latas, você pode interagir diretamente com ele, manipulando-o para abrir
a lata.
Mas o que acontece quando se trata de uma ferramenta digital, como um aplicativo instalado no
celular? Você, que é feito de “carne e osso”, não vai conseguir interagir diretamente com o
aplicativo, que se trata, afinal, de um software de computador!
Para interagir com o aplicativo, portanto, você vai precisar de uma interface. Por terem naturezas
tão diferentes, pessoas e computadores não podem se conectar diretamente; para isso, a interface,
elemento que possibilita que duas coisas de naturezas diferentes se comuniquem, se faz
necessária.
Mas não se engane: nem toda interface é criada para possibilitar a interação entre pessoas e
softwares. Existem interfaces entre máquinas diferentes, por exemplo. Por isso, também é usado o
termo interface do usuário para especificar as interfaces entre as pessoas e um aplicativo.
Exemplo
Em um computador em que esteja instalado o sistema operacional Windows, a área de trabalho é
uma interface, pois ela mostra os comandos do sistema e apresenta ao usuário todas as opções de
ações que ele poderá realizar usando o computador.
Muitas vezes, a imagem de uma interface é chamada de “tela”, o que ocorre quando alguém opina
que achou uma tela bonita ou com um layout atraente. Trata-se também de um significado para
tela.
Comentário
Não confunda isso com o significado de tela que adotaremos aqui: quando nos referirmos à tela de
um aparelho, estaremos tratando da parte física (também chamada de display). Trata-se de um
dispositivo de interação que exibe a imagem da interface e, em muitos casos, é sensível ao toque
(touch screen), além de possibilitar a entrada de comandos. Veremos mais sobre esse assunto em
breve quando falarmos sobre os dispositivos de interação.
Fazendo uma analogia com as obras de artes visuais, algumas pessoas se referem a uma obra
como uma “tela”. No entanto, a tela é o suporte em lona da pintura que o artista criou. Em uma loja
que vende insumos para pintura, há “telas em branco” prontas para serem adquiridas por pintores.
Seguindo essa analogia, vamos considerar a tela um dispositivo de interação, o suporte que exibirá
a interface.
A interação ocorre por meio da interface
Enquanto a interface é um “lugar” para a interação entre pessoas e aplicativos, a interação constitui
um processo comunicacional entre as pessoas e os computadores.
Área de trabalho do Windows 95.
No exemplo da interface da área de trabalho do Windows, a interação do usuário acontece com o
preenchimento de senhas e ao “clicar” em imagens de botões na tela – que, principalmente em
suas primeiras versões, representavam pastas de papel e gaveteiros de arquivos – os quais
permitem acessar aplicativos ou conteúdos apresentados em janelas.
Nos smartphones, a interação ocorre quando nós tocamos na tela para:
Digitar senhas ou fazer reconhecimento de nossa impressão digital.
Clicar em imagens de botões para acessar aplicativos.
Deslizar os dedos para “arrastar” janelas de aplicativos para os lados.
Por que o design de interação é tão importante
para criar a interface?
A interface deveria ajudar nossa comunicação com o aplicativo. No entanto, você provavelmente já
teve alguma dificuldade durante sua interação com uma interface.
O papel da interface não é ser bela. Ela não deve ser pensada só para deixar
um sistema bonito: seu principal objetivo é ajudar o usuário a executar uma
tarefa.
Quando está interagindo com a interface, o usuário deve se sentir seguro – e nunca confuso ou
perdido. Além disso, ele tem de ser capaz de executar sua tarefa da forma mais simples possível.
Tipos de interface
Atualmente, existe uma grande diversidade de interfaces. Rogers, Sharp e Preece (2013) criaram
uma lista com 20 tipos de interface:
Tipo de interface Veja também
1. Baseada em comando
2. WIMP e GUI
3. Multimídia WIMP e web
4. Realidade virtual Realidade aumentada e mista
5. Visualização da informação Multimídia
6. Web Móvel e multimídia
7. Eletrônicos de consumo e eletrodomésticosMóvel
8. Móvel Realidade aumentada e mista
9. Fala
10. Caneta Compartilhável e toque
11. Toque Compartilhável e gestos
Tipo de interface Veja também
12. Gestos Tangível
13. Háptica Multimodal
14. Multimodal Fala, caneta, toque, gestos e háptica
15. Compartilhável Toque
16. Tangível
17. Realidade aumentada e mista Realidade virtual
18. Vestível
19. Robótica
20. Cérebro-computador
Tabela: tipos de interface.
Essa tabela foi desenvolvida como um catálogo pelas autoras para que elas organizassem
preocupações de projeto de acordo com esses tipos de interface. Tais tipos foram listados por elas
na ordem em que foram desenvolvidos: o tipo “Baseado em comando” é o mais antigo; o tipo
“Cérebro-computador”, o mais recente (sem muito rigor, pois se trata de uma classificação feita por
conveniência).
Os critérios para a distinção entre tipos também são variados: você pode notar que parte deles se
diferencia de acordo com o dispositivo de entrada/saída (Fala e caneta), enquanto outros são
baseados na plataforma (Móvel e eletrônicos). É possível ainda que um mesmo produto apareça
em mais de uma categoria.
Exemplo
Um smartphone figura na categoria Móvel e, ao mesmo tempo, na categoria Toque.
WIMP é a forma predominante no mundo dos computadores pessoais há décadas. Ele se baseia no
conceito de manipulação direta em uma área gráfica na qual existem janelas, imagens e ícones
com os quais o usuário interage por meio de um apontador direcionado para o lugar escolhido a fim
de arrastar, clicar, marcar e cortar, entre outras ações. O dispositivo de interação mais popular que
direciona o apontador é o mouse.
Já o GUI consiste em um modelo de interface do usuário que permite a interação por elementos
gráficos. A verdade é que uma WIMP também é uma GUI.
Dispositivos de interação
Para acionarmos os controles na interface, precisamos usar dispositivos de interação que fazem
parte do hardware.
Qual é a diferença entre dispositivos de entrada e
saída?
Dispositivos de interação podem funcionar como dispositivos de entrada, de saída ou os dois ao
mesmo tempo.
Dispositivos de entrada
Usados para receber sinais de entrada do usuário. Eis alguns exemplos: teclado, mouse, microfone,
câmera, scanner, gamepads e sensores de movimento.
Dispositivos de saída
São responsáveis por exibir ou comunicar informações do computador para o usuário. Os principais
exemplos são monitores, impressoras, caixas de som e óculos de realidade virtual.
Dica
Nos smartphones, as telas sensíveis ao toque podem ser consideradas tanto dispositivos de
entrada quanto de saída.
Teclados: os mais tradicionais
Entre os dispositivos de interação apresentados aqui, o teclado é, sem dúvida, o mais antigo e
tradicional – e ele está longe de tornar-se obsoleto! Sua origem remonta ao período anterior ao do
advento dos computadores: ela reside, na verdade, na máquina de escrever do século XIX, que já
adotava o formato QWERTY.
Teclados de diferentes épocas.
Nos primeiros PCs, a forma de interação primordial era a inserção de comandos de texto digitados
no teclado para que a máquina executasse tarefas. Ainda hoje, os atalhos de teclados são
importantes para permitir que seus usuários executem tarefas de maneira ágil.
Mouse: a primeira revolução da interação
A chegada dos mouses ao mercado nos anos 1970 representou uma grande evolução das formas
de interação, pois seus comandos eram bastante intuitivos se comparados com os comandos de
textos, uma vez que emulavam movimentos mais naturais do corpo.
Hoje em dia, eles continuam sendo utilizados amplamente nos desktops.
Entre os jogos digitais, muitos jogadores preferem jogar usando o mouse e o teclado em vez do
gamepad. Apesar de haver especulações sobre seu fim, eles estão longe de se tornarem obsoletos!
Controles de videogame
Tais controles são usados principalmente em consoles de videogame, mas também podem ser
empregados como um periférico de um PC. Diferentes dos mouses, cuja função principal é
posicionar o cursor na tela, eles são projetados principalmente para comandar movimentos nela.
Os controles de jogo têm as seguintes vantagens:
São ergonômicos.
São projetados para serem manipulados com as duas mãos.
Não demandam apoio sobre uma mesa.
Telas: os dispositivos mais usados
Inicialmente, as telas eram somente dispositivos de saída. Isso só mudou com a criação de telas
sensíveis ao toque (touch screen), que invadiram o mercado.
Há vários tipos diferentes de tela touch screen, cada uma com uma tecnologia distinta. As mais
comuns são as telas capacitivas, as quais, após serem tocadas com os dedos, reagem a eles
mediante a condução de eletricidade. Hoje em dia, essas telas estão amplamente difundidas pelos
smartphones.
Controle remoto
Os controles remotos são mais popularmente usados para as TVs. A partir dos anos 1970,
começaram a surgir aqueles com comunicação via infravermelho. Esse tipo é o mais frequente até
hoje, apesar de já haver controles remotos que funcionam via bluetooth.
Controles de captura de movimento
O uso mais popular para os controles de captura de movimento está nos videogames, pois eles
renovaram os jogos como uma forma de capturar os movimentos de todo o corpo.
O Nintendo Wii produziu uma grande inovação ao lançar o Wii Remote, um dispositivo apontador
portátil que detecta o movimento em 3D.
Um par de controles de captura de movimento Wii Remote em uso.
Já o Kinect da Microsoft contém câmera e projetor de infravermelho para a captura do movimento
em 3D e em tempo real. Ele também possui microfone para comando de voz.
Duas pessoas dançam e têm seus movimentos capturados pelo Kinect.
Realidade virtual
Os dispositivos de realidade virtual criam a sensação de presença em um ambiente virtual com
gráficos 3D ou imagens em 360°.
Smart speakers
Dispositivos de entrada e saída conectados à internet, os smart speakers são capazes de realizar
uma série de tarefas por meio de comandos de voz do usuário.
Exemplo de smart speaker.
Esse tipo de dispositivo está diretamente relacionado aos conceitos de casas inteligentes e de
internet das coisas (IoT).
Os smart speakers são compostos de:
Microfone para recebercomandos de voz.
Inteligência arti�cial.
Caixa de som para o aparelhodar retorno ao usuário.
Interface e design de interação
Veja o que é design de interação e o conceito de interface.

Falta pouco para atingir seus objetivos.
Vamos praticar alguns conceitos?
Questão 1
Entre as alternativas a seguir, marque a que melhor define a atividade de design de interação.
A Atividade de desenhar telas atraentes para o usuário a fim de valorizar a marca.
B Atividade que usa softwares, como o Figma, o Adobe XD ou o Sketch.
C
Sinônimo de UX, que é uma atividade de desenvolvimento de experiências de
usuário.
D
Parabéns! A alternativa D está correta.
O design de interação significa mais do que projetar telas atraentes. Trata-se de uma área
próxima dos chamados UX e UI, porém ele se diferencia dessas áreas por trabalhar com a
sobreposição delas. Além disso, não possui um escopo tão amplo quanto o UX nem se limita
ao design de telas como o UI.
Questão 2
Entre as alternativas a seguir, aponte a que melhor define uma interface para o design de
interação.
Parabéns! A alternativa C está correta.
Atividade de projetar interfaces de produtos que facilitam a interação das
pessoas.
E Sinônimo de UI, que é somente uma atividade de design de interface de usuário.
A Layout das telas que visualizamos em um aplicativo.
B Fina película entre a água e o óleo.
C Elemento que possibilita às pessoas “se comunicar” com computadores.
D Tela sensível ao toque (touch screen) dos smartphones.
E Periféricos de computadores.
As interfaces são elementos que permitem aos seres humanos se comunicar com máquinas,
como os computadores e os smartphones. As interfaces podem ser digitais ou físicas. A fina
película entre a água e o óleo é uma interface, porém isso só se verifica nas áreas da Química e
da Física. Parao design de interação, essa película é somente uma metáfora da interface.
2 - Plataformas
Ao �nal deste módulo, você será capaz de analisar os requisitos de cada plataforma e
as posturas requeridas de aplicativos.
Ligando os pontos
Você sabe o que são plataformas? Como diferentes plataformas influenciam a interface e a
interação?
Para entendermos melhor o assunto, vamos retomar o case da empresa fictícia de desenvolvimento
de aplicativos.
Você é um designer de interação e durante a reunião da equipe com o cliente, você pôde ver que a
empresa do cliente já possui um grande site com muitas informações sobre a empresa e os
serviços que ela presta.
Você viu que hoje o único lugar onde os usuários interagem é no website da empresa, pois não há
outras formas disponíveis.
O site possui um menu com muitas abas, muitas páginas com textos longos e detalhados, que
refletem a estrutura organizacional da empresa, como em um organograma.
No contexto da interface e da interação, vamos definir que as plataformas são um tipo de sistema
composto por hardware e sistema operacional, que define como pode ser usado e quais softwares
ou aplicativos são compatíveis.
Nesse exemplo de website, ele foi projetado para as plataformas que são desktops ou notebooks
com sistema operacional e navegador de Internet. Mais especificamente, o website pode ser usado
em PCs com o sistema operacional Windows e navegador que pode ser o Microsoft Edge, Google
Chrome, Opera, Firefox etc., e também em Macs da Apple com sistema operacional macOS e
navegador Safari ou Chrome, Firefox etc.
Dessa forma, a interface deste site foi planejada para usuários interagindo usando os dispositivos
de interação teclado e mouse (ou touchpad, no caso do notebook).
Como os smartphones possuem navegadores de Internet, é possível abrir o site em um
smartphone, mas o site claramente não foi projetado para ser visualizado assim.
A partir da reunião com o cliente, ficou definido que seria criado um aplicativo para dispositivos
móveis com funcionalidades específicas para os clientes da empresa acessarem seus serviços de
forma mais rápida e fácil. Junto com a sua equipe, você vai projetar uma interface para esse novo
aplicativo.
Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?
Questão 1
Analisando as características da interface do site, além de concluir que ele foi desenvolvido
para plataformas de desktops e notebooks, você também pode perceber que:
I. a interface do website não foi projetada de maneira centrada na experiência do usuário, mas
sim na estrutura da empresa.
II. no início da concepção do projeto, também é fundamental saber que plataformas os
usuários usarão para interagir com a interface.
III. provavelmente é um website antigo, que com certeza vai requerer um redesenho da marca e
identidade visual.
IV. como é possível abrir o site usando-se um smartphone, parece desnecessário criar uma
versão própria só para dispositivos móveis como plataforma.
Em sua visão de designer de interação, alinhado com a maneira com que a empresa em que
você trabalha se posiciona no mercado, escolha as conclusões corretas:
Parabéns! A alternativa C está correta.
Interfaces pensadas para seguir a estrutura da empresa costumam ser difíceis de serem usadas
por pessoas que não conhecem a estrutura organizacional. Como é um site público, e não uma
intranet restrita aos funcionários, isso indica que o projeto não é centrado no usuário. As
plataformas fazem grande diferença na hora de projetar os respectivos aplicativos. Nesse
exemplo, lembre-se de que no desktop o site será visualizado em modo “paisagem”, enquanto em
smartphones ele será visualizado em modo “retrato”. Parece ser um website relativamente antigo,
mas isso não quer dizer necessariamente que ele precisará reformular sua marca porque este é
um patrimônio valioso para a imagem da empresa, que não deve mudar a toda hora e, se bem
feito, é concebido para ser válido por muitos anos sem precisar de modernização.
A I, II e III
B II, III e IV
C I e II
D III e IV
E I e IV
Questão 2
Desktops e dispositivos móveis são plataformas bem diferentes. Sabendo disso, neste projeto
você vai considerar que:
Parabéns! A alternativa B está correta.
Para se instalar um aplicativo, existe um software específico para cada plataforma. Há um arquivo
de instalação diferente para os sistemas operacionais Android ou iOS. Como foram projetados
para objetivos diferentes, certamente o website e o aplicativo para dispositivos móveis não terão
exatamente as mesmas funcionalidades. O layout da tela também sofre alterações, pois a
visualização nos celulares é em “modo retrato” e nos navegadores de desktop é em “modo
paisagem”.
Questão 3
A
o aplicativo de instalação do novo aplicativo será o mesmo,
independentemente da plataforma.
B
para cada plataforma, há um aplicativo específico, que ainda pode apresentar
funcionalidades diferentes.
C
para cada plataforma há um software instalador específico, porém o modo de
exibição nas telas é idêntico.
D
para cada plataforma há um software instalador específico, porém são
conservadas exatamente as mesmas funcionalidades.
E
em cada plataforma, o aplicativo deve apresentar diferentes cores e identidades
visuais.
Pensando nesse exemplo fictício, que reflete muitos casos reais, explique a diferença na maneira
com que o website e o aplicativo deverão se diferenciar em relação às funcionalidades que
oferecerão aos usuários.
Digite sua resposta
Chave de resposta
Os dispositivos móveis são plataformas bem diferentes dos desktops. Dessa forma, mesmo
levando o nome de um aplicativo para desktop, um aplicativo para smartphone deverá ter
muitas diferenças ao oferecer funcionalidades para o usuário. Certamente, o aplicativo para
smartphones oferecerá uma quantidade reduzida de funcionalidades e antes deve haver uma
seleção de quais funcionalidades são importantes para o usuário final. Ou seja, seria
importante pesquisar que tipo de tarefas os usuários precisam fazer em um celular e não
tentar oferecer o máximo de funcionalidades, como acontece no desktop. Outra coisa seria
adaptar a forma da interação para a tela sensível ao toque, que não permite o uso de atalhos
de teclado. Isso também reduz o número de funcionalidades que ficam visíveis ao mesmo
tempo na tela.
Introdução
Para qualquer solução de interface, devemos ter em mente para qual plataforma ela está sendo
criada. Para Cooper (2007), uma plataforma pode ser pensada como uma combinação de hardware
e software que permite ao produto funcionar tanto em termos de interações do usuário quanto em
relação às operações internas do produto.
São exemplos de plataformas:
PCs
Consoles de videogame
Smart TVs
Smartphones
Posturas dos aplicativos nas plataformas
Cooper (2007) destaca quão importante é prestar atenção na postura dos aplicativos em cada
plataforma.
Vamos chamar de postura a forma de apresentação da interface que afeta a maneira com que os
usuários interagem com um aplicativo. Essa maneira, afinal, influencia a própria usabilidade do
aplicativo.
A aparência e o comportamento de um aplicativo precisam refletir a maneira com que ele deve ser
usado. Segundo a perspectiva da postura, isso não é uma questão puramente estética, e sim
comportamental. A plataforma tem um papel importante nessa postura.
Exemplo
Existe uma diferença palpável na maneira com que usamos uma caixa de e-mails no nosso PC
quando estamos sentados à mesa de trabalho e quando a conferimos rapidamente no celular antes
de entrar no metrô.
Nos jogos digitais, essa diferença de postura parece ser ainda mais destacada. Basta comparar o
momento em que reservamos um dia em casa para ligar o console de videogame e jogar um game
3D e aquele no qual, entediados no metrô, nos distraímos com um jogo no celular enquanto
esperamos a chegada da próxima estação.
Cooper e demais autores (2007) listam três categorias de postura:
Soberana
Transitória
Daemônica
Como cadacategoria descreve um conjunto diferente de atributos comportamentais, cada uma
delas também é responsável pela descrição de um tipo diferente de interação do usuário. Essas
categorias nos ajudam a ter um ponto de partida para projetar uma interface.
A seguir, descreveremos as três categorias de postura.
Postura soberana
Os aplicativos de postura soberana são aqueles que ocupam a tela inteira e monopolizam a
atenção dos usuários por longos e contínuos períodos de tempo. Trata-se dos aplicativos que
também oferecem um grande conjunto de funcionalidades para o usuário.
Listaremos alguns exemplos:
Processador de textos Word.
Editor de imagens Photoshop.
Editor de vídeos After Effects.
Motor de jogo Unity.
Nesses exemplos, esses aplicativos se mantêm “soberanos”, mesmo que outros aplicativos sejam
usados ao mesmo tempo para tarefas de suporte.
Saiba mais
Os jogos digitais, em sua grande maioria, seguem essa postura de forma mais intensa, ficando em
tela cheia por padrão.
Postura transitória
Quando usamos um aplicativo soberano, algumas vezes precisamos utilizar rapidamente algum
outro, que abre uma janela com somente uma função e poucos controles, fechando-o rapidamente
em seguida para continuar nosso trabalho.
Esse tipo de aplicativo é conhecido como de postura transitória, porque ele
vem e vai. Ele aparece, faz seu trabalho e sai rapidamente. Um exemplo de
aplicativo de postura transitória é o Windows Explorer.
Muitas vezes, ao usar um aplicativo soberano, como o Photoshop, abre-se o Windows Explorer
rapidamente para encontrar uma fotografia, o qual é fechado logo depois para se retomar o trabalho
no Photoshop. Perceba que, nesse momento, o Windows Explorer não ocupa toda a tela: ele abre
uma janela menor, se sobrepondo ao aplicativo soberano para o usuário não perder sua atividade
principal de vista.
Postura daemônica
Programas que normalmente não interagem com o usuário são aplicativos de postura daemônica.
Esses aplicativos funcionam de forma silenciosa e invisível em segundo plano, realizando tarefas
possivelmente vitais sem a necessidade de intervenção humana.
Exemplo
Um driver de impressora ou uma conexão de rede.
No entanto, os aplicativos daemônicos devem ocasionalmente ser instalados e removidos, assim
como também precisam, de forma ocasional, ser ajustados. É só nessas horas que o usuário
interage.
A interação entre um usuário e um aplicativo daemônico sempre é de natureza transitória – e todas
as recomendações de design de interface relativas aos aplicativos transitórios também valem aqui.
A diferença é que os ícones dos aplicativos com tal postura devem sempre ser discretos para não
concorrer pela atenção do usuário.
Desktops, notebooks e dispositivos móveis
Como todo trabalho de design constitui uma conversa com materiais, também é importante para o
design de interação entender as limitações e as oportunidades associadas a cada plataforma.
Sendo assim, faremos algumas considerações sobre as posturas apresentadas e algumas
plataformas.
Desktops e notebooks
O design de interação tem suas raízes no software de desktop. Os desktops podem ter uma grande
variedade de configurações, indo das mais básicas até as mais avançadas, tendo ainda a
capacidade de sofrer alterações e trocas de peças para seu upgrade. Já os notebooks, hoje em dia,
são plataformas muito similares aos desktops, tendo uma grande capacidade de processamento.
Os desktops são a principal plataforma para os aplicativos de postura soberana. São usados neles
os principais aplicativos para o desempenho de trabalhos que exigem muito processamento da
máquina, assim como um grande treinamento e o desenvolvimento de habilidades do usuário, uma
vez que reúnem muitas funcionalidades.
Eis algumas recomendações para a postura soberana em desktops:
Otimizar a interface, priorizando os usuários que já possuem um conhecimento intermediário em
vez de funcionar como se fosse sempre a primeira vez de cada usuário.
Ocupar toda a tela para exibir uma grande quantidade de funcionalidades ao mesmo tempo.
Seguir um estilo visual minimalista para não concorrer pela atenção do usuário ou sobrecarregar
sua visão.
Criar um feedback visual, mas seguindo ao máximo a regra da sutileza minimalista.
Disponibilizar muitas formas de entradas de dados, como digitação no teclado, atalhos de
teclado, caixas de diálogo, cliques e movimentações de seta.
A postura transitória, como o próprio nome diz, diz respeito aos aplicativos que funcionam de
forma temporária. Como não ficam muito tempo na tela, os usuários não têm tempo de se
familiarizar muito com eles.
Suas recomendações, assim, são praticamente o oposto daquelas listadas para a interface
soberana:
Não desenhar uma janela que ocupe toda a tela.
Desenhar botões grandes.
Usar letras grandes e fáceis de entender.
Colocar legendas de instruções com frases curtas, porém claras, em vez de só palavras-chave
que o usuário pode esquecer.
Dar poucas opções para que o usuário não cometa erros.
Não exigir habilidade motora do usuário, preferindo botões e não colocando a barra de rolagem.
Tudo que o usuário precisa fazer tem de estar visível na tela.
Os desktops também reúnem uma série de aplicativos que funcionam com uma postura
daemônica. Eles operam, na maioria das vezes, sem receber comandos do usuário, o qual, por sua
vez, passa a maior parte do tempo sem lembrar que eles existem. Eventualmente, contudo, ele pode
precisar buscá-los para fazer escolhas.
Um exemplo são as configurações de monitores no Windows. Mesmo já tendo usado tais
configurações antes, o usuário pode se esquecer de seus comandos. Isso é facilitado com uma
busca textual para alcançar a respectiva janela. Trata-se de uma interface simples que antecipa as
necessidades do usuário.
Dispositivos móveis
Sem dúvida, eles são atualmente o tipo de plataforma mais difundido e o que evolui mais rápido.
Diversas limitações antigas dos dispositivos móveis já foram superadas, embora haja muitas
diferenças de interação em relação aos desktops que precisam ser observadas.
Os aplicativos assumem uma postura soberana em dispositivos móveis de forma mais limitada.
Eles não podem ter uma quantidade tão grande de funcionalidades quanto os aplicativos para
desktop, mas podem ser projetados para longas sessões de trabalho do usuário. O aplicativo para
pintura digital Procreate é um exemplo, tendo inclusive gráficos minimalistas.
Nos smartphones, alguns aplicativos possuem funções transitórias em apoio a outro aplicativo de
postura soberana.
Exemplo
O Instagram seria considerado de postura soberana, enquanto o aplicativo Repost, usado somente
para repostar algo do feed de outra conta no nosso feed, teria uma postura transitória.
A forma com que sua interface é projetada acaba seguindo algumas das recomendações que
listamos para o desktop.
Em smartphones, muitos aplicativos operam com uma postura daemônica. Entretanto, eles
consomem a energia da bateria. Por isso, desativá-los e ativá-los deve ser simples e fácil, enquanto
a interface é simples e minimalista.
Exemplo
A opção de ligar e desligar a conexão de internet móvel, o bluetooth e o ajuste de brilho de tela.
Já o Spotify é um exemplo de aplicativo que tem uma função daemônica, mesmo não sendo
classificado dessa maneira. Ele, afinal, continua fazendo o streaming de músicas mesmo após
fecharmos a tela do aplicativo e possui um controle discreto para encerrar o streaming.
Smart TVs, media streaming e consoles de
videogame
Smart TVs e media streaming
As smart TVs já obtiveram grandes avanços em suas funcionalidades, conectando-se à internet e
usando uma série de aplicativos de streaming de vídeo e música.
Entretanto, para controlar suas funcionalidades, prevalecem ainda os controles remotos, cujo
formato é muito semelhante ao dos antigos controles que se limitavam a “trocar de canal”. Esses
controles impedem a interface de exibir uma grande quantidade de funcionalidades, pois seria
muito difícil navegarentre elas usando um controle remoto.
Apesar de suas poucas funcionalidades, prevalecem as demais recomendações da postura
soberana para os aplicativos de smart TVs:
Ocupar toda a tela.
Ser minimalista ao máximo para não concorrer pela atenção do usuário, não “enfeitando” janelas
com molduras.
Usar fundos sempre escuros e sem cor, seguindo a mesma luminosidade das telas de créditos
tradicionais ao final de filmes e de séries.
Disponibilizar comandos simples que dependem de movimentações (para cima ou para baixo,
assim como para a direita e para a esquerda), acrescentando um apertar de botão para aceitar
como “OK”.
Para não aumentar os comandos dos controles remotos e dificultar a interação, não há aplicativos
com postura transitória em smart TVs.
Exemplo
Você deve ter percebido que não abrimos novas janelas uma por cima da outra quando usamos as
smart TVs. Isso tornaria a navegação muito difícil com o controle remoto.
Na verdade, os aplicativos possuem uma postura predominantemente soberana, embora sigam
algumas recomendações da postura transitória:
Desenhar botões grandes.
Usar letras grandes e fáceis de entender.
Colocar legendas de instruções com frases curtas, porém claras, em vez de só palavras-chave
que o usuário pode esquecer.
Dar poucas opções para que o usuário não cometa erros.
Não exigir habilidade motora do usuário, preferindo botões e não colocando a barra de rolagem.
A postura daemônica aparece nos ajustes da smart TV, como o ajuste do brilho da tela e da
conexão de internet, além dos controles parentais. Dentro do aplicativo de streaming, eles permitem
o ajuste de idiomas e legendas.
Consoles de videogame
Nesse caso, as interfaces de controle do console devem se assemelhar às interfaces dos jogos
mais comumente jogados no console e ser adaptadas para as possibilidades dos controles de
videogame.
Exemplo
Em um console para jogar jogos usando óculos de realidade virtual e controles de captura de
movimentos, a interface também precisa ser construída em realidade virtual em 3D, enquanto seus
controles devem envolver movimentos da cabeça (usando os óculos de realidade virtual) e das
mãos (segurando os controles de captura de movimentos).
Assim como nas recomendações para as smart TVs, a interface dos consoles de videogame deve
ser fácil de navegar, usando movimentos para cima ou para baixo e para a esquerda ou para a
direita, além de botões do gamepad para dar “OK”.
Porém, ao contrário das interfaces das smart TVs, as interfaces nos consoles podem ter um visual
bem menos minimalista, com cores, texturas e efeitos sonoros para a entrada de botões e telas – e
até mesmo com uma trilha sonora de fundo.
A interface para consoles tem de ser projetada como uma extensão dos jogos do console para que
o usuário jogador não sinta um choque e um contraste entre a postura de um jogo que ele acabou
de jogar e a da interface do console.
Exemplo
Após terminar uma sessão em 3D com muitos efeitos sonoros, texturas, cores e movimentos, o
usuário jogador abre uma interface completamente minimalista, flat, sem cores, escura e silenciosa,
causando nele um estranhamento e a sensação de que o console está aquém do jogo, como se a
plataforma não fosse adequada para os jogos.
Plataformas e posturas de seus aplicativos

Veja as diferentes plataformas e as respectivas posturas de seus aplicativos.
Falta pouco para atingir seus objetivos.
Vamos praticar alguns conceitos?
Questão 1
Entre as alternativas a seguir, escolha a que mostra o funcionamento de um aplicativo de
postura soberana da melhor forma.
A
O aplicativo é chamado para executar uma tarefa rapidamente, sendo, em
seguida, fechado.
B
O usuário passa muito tempo usando esse aplicativo, que funciona
principalmente em tela cheia e possui muitas funcionalidades.
Parabéns! A alternativa B está correta.
Os aplicativos de postura soberana são aqueles que possuem muitas funcionalidades, sendo
usados por longos períodos de tempo. Sua principal plataforma é o desktop. Eles
preferencialmente devem ocupar toda a tela.
Questão 2
Escolha a alternativa mais adequada quanto à relação entre as plataformas e as posturas de
seus aplicativos.
C Abre-se uma janela pequena no meio da tela com um botão grande e
chamativo.
D
O aplicativo funciona de forma constante no computador, sem que o usuário o
veja todo o tempo.
E Seu melhor exemplo é o Windows Explorer.
A
Independentemente da plataforma utilizada, as interfaces devem assumir as
mesmas posturas.
B
Uma interface de postura soberana tem as mesmas características
independentemente da plataforma na qual ela é usada.
C
Os desktops são a plataforma que suporta aplicativos com o maior número de
funcionalidades na postura soberana.
Parabéns! A alternativa C está correta.
Mesmo que a postura soberana possa ser prevalente em um aplicativo para qualquer
plataforma, a interface precisa ser adaptada para cada uma delas e assumir algumas
características de cada postura conforme suas limitações.
3 - Funcionalidade, usabilidade e acessibilidade
Ao �nal deste módulo, você será capaz de diferenciar funcionalidade, usabilidade e
acessibilidade, além de suas recomendações em projetos de interface.
D Os dispositivos móveis podem ter um grande número de aplicativos ativos na
postura daemônica sem que o usuário possa fazer escolhas sobre isso.
E
Para os desktops, não é recomendada a criação de interfaces de postura
transitória.
Ligando os pontos
Você sabe o que é usabilidade? Acessibilidade também é um conceito importante. Qual seria a
diferença entre usabilidade e acessibilidade?
Já falamos sobre funcionalidades, quando demos exemplos de tipos de softwares que oferecem
mais ou menos funcionalidades. Além de oferecer funcionalidades, um aplicativo também precisa
ter uma boa usabilidade e ser acessível.
Para entendermos melhor o assunto, vamos retomar o case da empresa fictícia de desenvolvimento
de aplicativos.
Você é um designer de interação e depois da reunião da equipe com o cliente, ficou acordada a
possibilidade de sua equipe trabalhar em uma atualização do site da empresa do cliente, além da
criação do novo aplicativo para dispositivos móveis.
Nesse momento, você ficou responsável por fazer uma avaliação listando as funcionalidades do
website, se ele atende às dez heurísticas de Jakob Nielsen para a usabilidade no design de
interação e se ele atende aos quatro princípios de acessibilidade (Web Content Accessibility
Guidelines) do Consórcio World Wide Web (W3C). Primeiro, você consultou os dois websites onde
estão disponíveis e explicados esses princípios de acessibilidade e heurísticas de usabilidade.
Com base nisso, você estruturou um relatório que foi bem trabalhoso de se fazer e ficou bem longo.
Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?
Questão 1
Você sabia que muitas pessoas são daltônicas? Além disso, algumas nunca se deram conta de
sua condição. Existem formas diferentes de daltonismo, mas podemos dizer que na maioria
delas as pessoas não enxergam bem o vermelho. Pensando nisso, escolha uma opção que
corresponde à uma escolha de acessibilidade que ajudará a maioria dos daltônicos a enxergar
melhor as cores do site.
Parabéns! A alternativa B está correta.
Como a maioria dos daltônicos têm problema para visualizar as variações das cores, em
particular a cor vermelha e não com uma baixa visão que precisa ser superada com alguma
tecnologia assistiva. Uma interface predominantemente azul vai ser percebida pela maioria das
pessoas que tenham algum dos diferentes tipos de daltonismo.
Questão 2
A usabilidade está relacionada à qualidade de uso de uma interface, com a facilidade com que
as pessoas usam a interface. Dentre as características abaixo que você colocou no seu
relatório sobre o atual website, qual corresponde especificamente a um problema de
usabilidade?
A Optar por fontes grandes e na forma bastão na interface.
B Usar a cor azul como predominante nainterface.
C Optar por um fundo escuro para interface.
D Ajustar a navegação na interface por meio do teclado.
E Construir a interface com tecnologia assistiva.
A
Não mostra mensagens de alerta para ações importantes do usuário que
podem ser um erro.
B Não fornece legendas escritas para os vídeos.
Parabéns! A alternativa A está correta.
A falta de mensagens de alerta é uma questão de usabilidade porque faz o usuário se sentir sem
controle da situação, essa sensação torna a interação mais difícil.
Questão 3
Considere o seguinte cenário: na sua avaliação de acessibilidade do site, você resolveu já ir
anotando sugestões de possíveis oportunidades de melhorias para a nova versão que está sendo
feita. A marca da empresa responsável é vermelha, uma cor bem comum em marcas, por isso
textos importantes em geral estão escritos em vermelho. Adicionalmente, quando o usuário escreve
a senha errada, a borda da caixa de texto se torna vermelha, para sinalizar o erro. Para preservar o
layout, não há opção de aumento do tamanho das letras. Explique sobre que melhorias poderiam
ser feitas para esse pequeno item se adequar melhor a princípios de acessibilidade.
Digite sua resposta
Chave de resposta
As possíveis melhorias na atualização do website, para seguir princípios de acessibilidade,
seriam: a cor da marca não precisa ser repetida em textos importantes, recomendo trocar a
cor dos textos por preto ou cinza escuro, colocando os textos de destaque em negrito ou em
tamanho maior, pois algumas pessoas não enxergarão bem o vermelho, que em vez de
C Não pode ser navegado com atalhos de teclado.
D Não é compatível com tecnologias assistivas.
E Não é possível aumentar o tamanho e o contraste dos textos.
destacar os textos, os tornará pouco legíveis; da mesma forma, algumas pessoas não
perceberão que digitaram a senha errada só pela cor vermelha na borda, essa sinalização
vermelha pode ser mantida, mas recomendo que adicionalmente apareça uma mensagem de
texto na mesma caixa de diálogo, avisando sobre o erro; por fim, é importante que o usuário
tenha a opção de aumentar o tamanho dos textos para melhor leitura, o layout pode ser
projetado para permitir isso sem prejudicar a boa diagramação das janelas.
Introdução
Já vimos que o designer de interação precisa trabalhar para que o usuário consiga interagir o mais
facilmente possível com a interface. Para isso, esse designer precisa ter certos princípios em
mente.
Por isso, apresentaremos adiante os conceitos de funcionalidade, usabilidade e acessibilidade.
Como os três constituem conceitos de qualidade do aplicativo, as pessoas podem confundi-los:
preste atenção em cada um deles.
Funcionalidade
A funcionalidade está relacionada ao fator utilidade ou aplicabilidade de um sistema, ou seja, ao
conjunto de funcionalidades necessárias para o usuário realizar as tarefas desejadas.
Eis alguns exemplos de funcionalidade:
Cadastro de usuários.
Login.
Geolocalização.
Busca por listas.
Geração de relatórios.
Chat.
Notificações.
Push.
Como requisito de qualidade, a funcionalidade de um software diz respeito à satisfação de
necessidades que deram origem ao projeto. Além de abranger requisitos implícitos e explícitos, ela
está intimamente ligada à qualidade do código criado.
Resumindo
A funcionalidade, portanto, está relacionada com a capacidade do aplicativo de executar funções. O
desenvolvimento de um aplicativo requer testes de funcionalidade para verificar a robustez da
implementação.
Usabilidade
A usabilidade se atém à qualidade de uso de uma interface. Seu foco está no usuário, e não nas
funcionalidades do sistema. Ela está relacionada, em suma, com a facilidade com que as pessoas
usam uma ferramenta para realizar uma tarefa.
Trata-se da capacidade de uma interface permitir que o usuário tenha sucesso na execução de suas
tarefas. A usabilidade pode ser vista também como um atributo de qualidade que avalia quão fácil é
usar uma interface.
Dez heurísticas de usabilidade para o design de
interação
Jakob Nielsen (2020) é uma das nossas maiores referências em usabilidade. Em seu site, ele
disponibiliza 10 heurísticas de usabilidade para o design de interação:
eurísticas
Princípios gerais, e não diretrizes específicas.
O usuário deve sempre ser informado sobre o que está acontecendo no sistema. Isso o
ajuda a aprender com o feedback de sua interação e saber o que deve fazer. Interações
previsíveis geram confiança no produto e até na marca envolvida.
Use a linguagem do usuário: palavras, frases e conceitos familiares. Siga convenções do
mundo real, pois isso faz com que o usuário aprenda e lembre mais facilmente como a
interface funciona. Tenha atenção com as metáforas (que vamos ver adiante).
Usuários cometem erros interagindo. Eles precisam ter uma opção fácil para “desfazer” a
ação errada. Quando é fácil para as pessoas “voltarem” uma ação, isso cria uma sensação
de liberdade e confiança.
Procure seguir as convenções da plataforma e do mercado. Os usuários não devem ter que
aprender novas palavras, situações ou ações.
1. Visibilidade do estado do sistema 
2. Correspondência entre o sistema e o mundo real 
3. Controle e liberdade do usuário 
4. Consistência e padronização 
A interface precisa prevenir o usuário de cometer erros. Isso pode ser feito ao impedir ações
que levam ao erro ou ao informar as consequências de uma ação, perguntando se o usuário
realmente quer executar aquela ação.
O usuário não deve ter a necessidade de lembrar informações de uma parte da interface
para a outra. As informações necessárias para interagir precisam estar visíveis na tela ou
ser facilmente recuperáveis quando necessário.
Atalhos podem acelerar a interação para os usuários mais experientes. Crie interfaces
capazes de atender tanto aos usuários experientes quanto aos inexperientes, dando a opção
de eles personalizarem ações frequentes. Com isso, as pessoas vão escolher o que
funciona melhor para elas.
As interfaces devem conter somente informações relevantes. Não crie uma interface
“poluída” com elementos que não são úteis para o usuário e “competem” pela atenção dele.
Isso não quer dizer que você deve adotar a estética flat para os elementos visuais, e sim que
precisa focar o que é essencial para os objetivos do usuário.
5. Prevenção de erro 
6. Reconhecimento em vez de memorização 
7. Flexibilidade e eficiência de uso 
8. Design estético e minimalista 
9. Auxílio na resolução de um erro 
Ajuda os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros.
As mensagens de erro devem:
Ser simples (sem códigos de erro).
Mostrar o problema.
Sugerir uma solução fácil.
Use visuais de mensagens de erro tradicionais, por exemplo, texto em negrito e vermelho.
É melhor que o sistema não precise de nenhuma explicação adicional, mas pode ser
necessário fornecer uma documentação para ajudar os usuários. O conteúdo de ajuda e
documentação deve ser fácil de pesquisar, apresentando, se possível, a documentação
contextualizada no momento em que o usuário precisa dela.
Saiba mais
Você encontra tais heurísticas, assim como outros exemplos e vídeos, no site que Jakob Nielsen
vem mantendo e atualizando desde 1994 (sua atualização mais recente é de 2020). Para achar a
página de Nielsen, basta digitar em uma ferramenta de busca “10 usability heuristics for user
interface design”.
Acessibilidade
A acessibilidade inicialmente estava relacionada à possibilidade de acesso ao sistema de pessoas
portadoras de alguma deficiência física. Hoje em dia, contudo, as diretrizes de acessibilidade são
pensadas para a projeção de produtos a serem utilizados, sem modificações, pelo maior número de
pessoas, e não por grupos pequenos.
A ideia geral também é que, desse modo, uma interface será melhor e mais fácil para todos usarem.
10. Ajuda e documentação 
Exemplo
Mesmo as pessoas que não são surdas podem não ouvir algum som do aplicativo, pois elas se
encontram em um lugar barulhentoou não estão usando fones de ouvido.
O consórcio World Wide Web (W3C) disponibiliza em seu site as WCAG 2.0, que são as diretrizes de
acessibilidade para conteúdo web (WORLD WIDE WEB CONSORTIUM, 2012). Seus princípios de
acessibilidade são uma referência até hoje.
Vamos conhecer melhor tais princípios!
WCAG
Web content accessibility guidelines.
Princípios de acessibilidade
Princípio 1: Perceptível
“As informações e os componentes da interface do usuário devem ser apresentados em formas
que possam ser percebidas pelo usuário” (WORLD WIDE WEB CONSORTIUM, 2012).
Para contemplar esse princípio, é preciso:
Fornecer alternativas em texto para todo o conteúdo não textual.
Dar alternativas, como legendas escritas ou audiodescrição.
Criar conteúdo que possa ser apresentado de diferentes formas.
Facilitar aos usuários a audição e a visão dos conteúdos.
Princípio 2: Operável
“Os componentes de interface de usuário e a navegação devem ser operáveis” (WORLD WIDE WEB
CONSORTIUM, 2012).
Para contemplar esse princípio, é preciso:
Fazer com que toda a funcionalidade fique disponível a partir do teclado.
Proporcionar aos usuários tempo suficiente para eles lerem e utilizarem o conteúdo.
Não criar um conteúdo de visual vibrante (ele pode causar convulsões em pessoas
sensíveis).
Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local
onde estão.
Princípio 3: Compreensível
“A informação e a operação da interface de usuário devem ser compreensíveis” (WORLD WIDE WEB
CONSORTIUM, 2012).
Para contemplar esse princípio, é preciso:
Tornar o conteúdo textual legível e compreensível.
Fazer com que as páginas da Web apareçam e funcionem de forma previsível.
Ajudar os usuários a evitar e corrigir os erros.
Princípio 4: Robusto
“O conteúdo deve ser robusto o suficiente para poder ser interpretado de forma confiável por uma
ampla variedade de agentes de usuário, incluindo tecnologias assistivas” (WORLD WIDE WEB
CONSORTIUM, 2012).
Para contemplar esse princípio, é preciso maximizar a compatibilidade com as tecnologias
assistivas.
Em alguns sistemas, a acessibilidade configura uma característica desejável. No entanto, em
outros, ela é fundamental, como é o caso dos sistemas do governo que oferecem aos cidadãos
serviços on-line.
Saiba mais
No Brasil, a Lei nº 10.098, de 19 de dezembro de 2000, estabelece normas gerais e critérios básicos
para promover a acessibilidade e garantir o acesso a cidadãos com deficiência, colocando a
acessibilidade como exigência no desenvolvimento de sistemas interativos públicos. No site
brasileiro Governo digital, procure por “acessibilidade digital” e saiba mais sobre modelos,
ferramentas e padrões. Esse conteúdo é fundamental em concursos públicos da área.
Daltonismo: veja como é fácil atender os usuários
que não visualizam algumas cores
As cores são importantes para comunicar conceitos e sentimentos.
Exemplo
O uso do vermelho, hoje em dia, constitui um padrão para alertar o usuário sobre perigos e erros.
No entanto, a interface não deve depender só das cores para comunicar coisas importantes para o
usuário; afinal, seu usuário pode ser daltônico. Os nossos olhos possuem células de três tipos para
“detectar” as cores vermelha, verde e azul.
Os daltônicos são pessoas que nascem sem alguns desses tipos. Observe uma ilustração dos
efeitos na visão de cada tipo de daltonismo, os quais podem ser chamados mais especificamente
de deuteranopia, protanopia e tritanopia:
Simulação da alteração da visão de três tipos de daltonismo.
Isso não quer dizer que você não possa usar cores ao criar uma interface! No exemplo adiante,
colocaremos lado a lado uma versão colorida e outra em tons de cinza de uma mesma caixa de
diálogo.
Note que as cores ajudam a identificar o erro e encontrar a solução. Contudo, sem elas, também
conseguimos perceber o destaque pelo sinal de exclamação e podemos ler a mensagem de erro do
sistema. Veja:
Flávia Garcia de Carvalho
Flávia Garcia de Carvalho
Versão colorida e em preto e branco da mesma caixa de diálogo.
Mesmo para quem enxerga todas as cores perfeitamente, cuidar do contraste e da ordem das
mensagens e usar sinais e símbolos tornam a interface melhor. A verdade é que, quando uma
interface atende a quem não visualiza as cores, ela também é mais fácil de compreender e de usar
para todas as pessoas!
Usabilidade e acessibilidade
Veja as diferenças entre funcionalidade, usabilidade e acessibilidade e as principais
recomendações para a criação de interfaces simples e acessíveis.

Falta pouco para atingir seus objetivos.
Vamos praticar alguns conceitos?
Questão 1
Escolha a alternativa com a melhor definição sobre a acessibilidade.
Parabéns! A alternativa C está correta.
A acessibilidade diz respeito à capacidade de uma interface de ser usada por pessoas
diversas, incluindo as que possuem alterações físicas.
Questão 2
Indique a alternativa com exemplos de heurísticas de usabilidade.
A Está relacionada à qualidade de uso de uma interface.
B Diz respeito ao fator utilidade ou aplicabilidade de um sistema.
C
Trata-se de recursos adicionais acrescentados ao final de um projeto de
interface.
D É sinônimo de funcionalidade e usabilidade.
E
É a capacidade da interface de permitir que o número máximo de pessoas e o
mais diverso possível consiga usá-la com facilidade, mesmo aquelas com
alguma alteração física.
A Perceptível e operável.
B
Visibilidade do estado do sistema e correspondência entre o sistema e o
mundo real.
Parabéns! A alternativa B está correta.
Sempre informar o usuário sobre o que está acontecendo no sistema o ajuda a aprender com o
feedback de sua interação e saber o que deve fazer. Seguir as convenções do mundo real faz
com que ele adquira mais conhecimento e lembre mais facilmente como a interface funciona.
4 - Analogias, abstrações, metáforas, métodos e
técnicas
C Compreensível e robusto.
D Maximização da compatibilidade com as tecnologias assistivas.
E Fornecimento de alternativas, como legenda escritas ou audiodescrição.
Ao �nal deste módulo, você será capaz de aplicar as metáforas de interface e os
métodos e técnicas de projeto de interface.
Ligando os pontos
Depois de ver tantos conceitos você deve estar se perguntando quando finalmente vai poder
“colocar a mão na massa” e desenhar a interface!
Mas, calma! Ainda temos que fazer um levantamento de requisitos antes de começar a desenhar.
Para entendermos melhor como é essa etapa, vamos retomar o case da empresa fictícia de
desenvolvimento de aplicativos.
Todos nós tivemos nossa vida transformada com o surgimento da pandemia de covid-19, o mundo
digital também sofreu grandes transformações. A principal delas foi relacionada com a
necessidade de distanciamento social, que criou uma grande reorganização dos espaços físicos e
causou uma grande expansão do trabalho remoto.
Nesse sentido, a legislação que rege a relação entre psicólogos e pacientes passou a permitir o
teleatendimento, gerando uma grande oportunidade de lançamento de novos aplicativos com o
objetivo de atender novas necessidades dos usuários.
Nesse contexto, a empresa em que você trabalha foi procurada por um cliente para criar um
aplicativo para facilitar a realização de sessões de terapia entre pacientes e psicólogos.
Após a tradicional reunião da equipe com o cliente, a equipe se reuniu para fazer um levantamento
de requisitos para o novo projeto de interface. Você sabe que existem várias maneiras de se fazer
um levantamento de requisitos, mas nesse momento a empresa e a equipe optam por padrão a
fazer uma análise PACT (Pessoas, Atividades, Contextos e Tecnologias) de Benyon.
Baseados no PACT, a equipe se reúne e chega a algumas conclusões, como por exemplo:
Pessoas – o novo aplicativo deveria atender dois perfis de usuários bem diferentes, que seriam
os psicólogos e os pacientes. Todos acordam que devem fazer mais pesquisas sobre esses
usuários.
Atividades – foram consideradas as diversascaracterísticas das atividades. Há questões de
legislação da saúde envolvidas, como a garantia de sigilo, documentação, procedimentos para o
uso de planos de saúde.
Contextos – foi apontado, por exemplo, que consultas remotas realizadas em horários mais
flexíveis, fisicamente alocadas em ambientes mais íntimos à escolha dos usuários, poderiam até
aumentar a qualidade das consultas, em relação às tradicionais consultas presenciais.
Tecnologias – a plataforma principal seriam os dispositivos móveis ligados à wi-fi ou Internet
móvel, os smartphones, pois a principal atividade nos aplicativos seriam as teleconferências
realizadas em um clima mais intimista e de maior mobilidade à escolha do usuário, conforme os
contextos levantados. Entretanto, surgiu também a necessidade de uma opção a ser acessada
por navegadores de Internet usando um desktop ou notebook.
Somente depois que todo o levantamento de requisitos estiver pronto é que você poderá finalmente
começar a desenhar seguindo as etapas de Wireframe, Prototipagem e Teste de Usabilidade!
Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos? 
Questão 1
Como você viu, no levantamento de requisitos PACT, o primeiro item são as pessoas. Usuários
são pessoas e envolver o usuário é fundamental, porque ele é a figura central dos objetivos na
criação de uma interface. Escolha abaixo os procedimentos corretos que poderão ser feitos
para continuar complementando o levantamento sobre as “pessoas”.
I. Eleger somente uma pessoa real famosa para representar todos os possíveis usuários.
II. Criar personas fictícias representando cada perfil de usuário.
III. Recorrer à pesquisa com possíveis usuários reais do novo aplicativo.
IV. Usar resultados de pesquisas com usuários para aprimorar as personas.
Entre os procedimentos listados, você considera como corretos:
A I, II e III.
B II, III e IV.
C I e II.
Parabéns! A alternativa B está correta.
O PACT é um método importante de levantamento de requisitos que deve ser usado logo no início
do projeto de interface. A primeira letra corresponde às “pessoas”, que também podemos chamar
de usuários. A criação de personas é um ótimo procedimento para se levantar perfis de usuários,
reunindo várias características de usuários. As personas são fictícias, mas mostram as
verdadeiras necessidades e preocupações dos usuários reais, sendo importante recorrer à
pesquisa com possíveis usuários do novo aplicativo para obter mais dados e usá-los para
aprimorar as personas que você já tinha feito.
Questão 2
Cada parte do levantamento de requisitos PACT reserva espaço para etapas complexas do
planejamento do projeto. No exemplo acima do novo aplicativo, dentro do PACT abordamos
outros tópicos referentes a outros conhecimentos já trabalhados no nosso conteúdo. Como se
o PACT pudesse ser usado para organizar a aplicação de todo o conhecimento adquirido. No
exemplo do item “tecnologias”, podemos aplicar os tópicos:
I. dispositivos de interação: dispositivos de entrada e saída.
II. plataformas.
III. tipos de interface.
IV. analogias e metáforas.
Escolha que tópicos já estudados se adequariam corretamente em “tecnologias”:
D III e IV.
E I e IV.
A I, II e III
B II, III e IV
Parabéns! A alternativa A está correta.
O PACT é um método de levantamento de requisitos que pode ser usado logo no início da
concepção do projeto de interface. No último item “tecnologias” podemos aplicar quase todo o
conhecimento que vimos ao longo do curso, para ajudar a fazer o levantamento de requisitos de
tecnologia.
Questão 3
Com esse exemplo prático, ficou mais claro por que afirmamos que o trabalho de design de
interação é muito mais que “criar telas bonitas” de uma interface. Escreva um resumo em torno de
10 linhas sobre como é o trabalho do designer de interação e suas principais competências ou
atribuições no caso da interface do novo aplicativo do case.
Digite sua resposta
Chave de resposta
O designer de interação deve se concentrar no uso do novo produto e centrar no usuário
desde o início do projeto. Trata-se de um trabalho de projeto que deve levar em consideração
uma série de particularidades para a criação de interfaces que sejam fáceis de usar. No
exemplo do aplicativo do case, o ponto de partida foi uma nova oportunidade de criação de
um produto interativo. Logo no início do projeto, a centralidade no usuário já foi atendida com
o uso do método PACT, que tem as pessoas como primeiro item. Em seguida, são levantadas
C I e II
D III e IV
E I e IV
as necessidades dos usuários enquanto executam atividades em um processo em que o
designer deve entender também os contextos. Depois disso, todas essas informações
fundamentarão o levantamento das tecnologias requisitadas para o projeto. Somente após
todo esse trabalho chega o momento de fazer os primeiros desenhos das telas da interface,
que devem começar como simples wireframes.
Analogias, metáforas e abstrações
A princípio, a analogia e a metáfora são figuras de linguagem bem parecidas e muito utilizadas por
nós no dia a dia.
Quando usamos uma metáfora, transferimos o nome de uma coisa para outra, fazendo uma
comparação. Um exemplo simples é dizer que alguém “é uma flor de pessoa”.
A pessoa, nesse caso, é comparada com algumas características de uma flor, como delicadeza e
suavidade. Repare que, nessa metáfora, não estamos dizendo que a pessoa é um vegetal ou que
possui folhas, e sim que há características mais sutis de uma flor nela.
Na analogia, também comparamos as coisas. Ela, porém, é mais objetiva e
menos poética. É necessário, portanto, encontrar pontos de semelhança
entre as ideias comparadas.
Um exemplo seria dizer que a pessoa “é forte como um touro”. Note que aqui também há uma
figura de linguagem, mas a comparação é mais direta que na metáfora.
A abstração, por sua vez, faz um caminho oposto ao percorrido pela analogia e pela metáfora. Ela é
uma operação intelectual que isola seu conceito dos demais, o qual, por isso, funciona além dos
detalhes do nosso mundo físico.
Exemplo
O conceito abstrato de bola está além das características físicas de uma bola de couro. Também
conseguiremos reconhecê-la como “bola” se ela for feita de plástico ou até se for um modelo em 3D
na tela do computador.
Por outro lado, o conceito abstrato de bola também é útil para a distinguir de outros conceitos,
como o de “quadrado”.
Exemplo
Um triângulo é uma forma abstrata, pois ele não existe no nosso mundo real. Pode até haver coisas
com o formato parecido com o de um triângulo, mas elas não são triângulos, porque eles são uma
abstração matemática.
Mas o que isso tem a ver com o design de interação? Resposta: essas figuras de linguagem da
língua portuguesa também podem ser usadas de maneira visual – e sempre com o objetivo de
ajudar o usuário a entender e interagir com a interface.
Basicamente, os aplicativos operam com uma linguagem que não é a das pessoas. Entretanto,
como a linguagem dos aplicativos é muito abstrata para os usuários, é preciso lançar mão de
metáforas e analogias para criar relações com a realidade do usuário e, com isso, interfaces mais
intuitivas e fáceis de usar.
Metáforas de interface
No design de interface, optamos por falar em metáforas de interface. No entanto, você deve notar
que as analogias vão aparecer aqui junto com as metáforas. Sendo assim, considere que, quando
falamos em metáforas de interface, não excluímos as analogias embutidas nelas.
Interface do Microsoft Paint.
As metáforas de interface são elementos figurados que comparam a interação com um aplicativo
com os elementos do mundo real. Um exemplo bem simples no Paint pode ser o uso de ícones de
lápis para indicar a ferramenta de desenho livre, de borracha para apagar e de balde de tinta para
preencher.
Mas não encare as metáforas de interface como uma mera questão de ilustração. O foco é basear-
se nas experiências do usuário – tanto as passadas quanto as atuais – relacionadas com o
funcionamentodo software.
Quanto mais próxima for a lógica da metáfora da lógica do funcionamento do software, mais fácil
será a interação do usuário. As metáforas de interface, portanto, são criadas para ajudar o usuário a
saber o que fazer em uma interface.
Segundo Fernandes (2005), é possível dividir as metáforas em dois tipos principais:
Metáforas de familiarização
(ou metáforas de interface virtual)
Metáforas de transporte
(ou metáforas de interface verbal)
Metáforas de familiarização
As metáforas de familiarização são projetadas para novos usuários ainda não familiarizados com
o uso do aplicativo. O exemplo mais clássico é a metáfora da área de trabalho do sistema
operacional Windows, porque ela se baseia nas experiências de trabalho em um ambiente de
escritório com seus vários objetos e utilidades disponíveis.
Para facilitar o aprendizado, essas metáforas estão mais relacionadas à lógica e à estrutura do uso.
Itens de uma antiga mesa de trabalho.
Tela do Microsoft Windows usando metáforas de área de trabalho
Metáforas de transporte
As metáforas de transporte se baseiam em elementos visuais que representam objetos físicos
familiares aos usuários. Existe um vínculo forte entre o objeto concreto (que é conhecido do
usuário) e a aparência da interface.
Os exemplos mais comuns são as telas de calculadoras e a tela de discagem de números de
telefone. Seus botões possuem formas e posições semelhantes à interface analógica de botões
físicos de antes.
Telefone com botões físicos.
Interface digital de smartphone.
Conforme já discutimos, as interfaces estão presentes e são muito importantes no dia a dia de
todos nós. Dessa maneira, novas metáforas de interface são aprendidas e acabam rapidamente se
integrando na nossa linguagem comum.
Exemplo
Pessoas que falam em navegar pela internet, curtir, ativar o sininho ou seguir alguém.
Uma história do botão de “salvar”
Os disquetes (ou floppy disks) foram muito usados para gravar, armazenar e transportar arquivos e
softwares até meados dos anos 2000. Depois disso, eles foram substituídos pelos compacts disks
(CDs), os quais, hoje em dia, já são bem pouco usados devido às facilidades dos serviços na
nuvem.
Os antigos disquetes que ainda fazem parte da metáfora de “salvar”.
Hoje em dia, localizado entre os ícones usados em botões para a ação “salvar”, o ícone
representando um disquete ainda está presente em versões bem atuais de softwares da Microsoft,
enquanto outros passaram a adotar a metáfora do download da nuvem. Veja:
Ícones usados para a ação de salvar ou baixar um arquivo disponíveis para uso no editor de textos
Word.
Técnicas e métodos aplicados
Levantamento de requisitos
Requisitos são os atributos que o produto interativo deve ter para se alcançar certo objetivo.
Segundo Benyon (2011), ao se projetar uma interface antes de iniciar a etapa de design, é essencial
que o designer adquira um entendimento completo sobre:
Pessoas envolvidas
(denominadas usuários)
Atividades realizadas no aplicativo
(também chamadas de tarefas)
Contextos
(nos quais essas atividades acontecem)
Tecnologias
(também conhecidas como plataformas)
As quatro palavras em destaque formam a sigla PACT. Essa análise de PACT constitui uma
importante ferramenta a partir da qual são gerados os requisitos para o aplicativo.
Daremos mais detalhes sobre os itens do PACT a seguir:
É importante entender as diferenças entre as pessoas. Essas diferenças podem ser de
ordem física, psicológica ou social.
As diversas características das atividades devem ser consideradas, como:
Aspectos temporais.
Cooperação.
Complexidade.
Segurança.
Conteúdo.
Qualquer atividade acontece dentro de um contexto. Pode haver três tipos de contexto:
Contexto organizacional.
Contexto social.
Contexto físico.
As tecnologias envolvidas são um ponto importante para antecipar algum tipo de problema
e buscar alternativas a fim de facilitar a interação. O designer de interação deve avaliar a
plataforma e os dispositivos de entrada e saída na comunicação e no conteúdo.
Pessoas 
Atividades 
Contextos 
Tecnologias 
Envolvendo usuários na concepção
Se uma interface é desenvolvida para a interação de pessoas, os usuários precisam estar no centro
da concepção do aplicativo desde o início.
A primeira forma de envolvimento dele na concepção é a criação de personas, isto é, personagens
fictícios que representam um público-alvo mais específico do produto. Em seguida, as
possibilidades da relação da persona com a interface são pensadas na construção da jornada do
usuário.
As personas são criadas para se entender o perfil do usuário. Para isso, fazer a si mesmo algumas
perguntas pode ser crucial:
O usuário é jovem ou idoso?
Quais são as motivações dele?
O que ele está fazendo?
Como ele resolve o problema atualmente sem o novo aplicativo que você está criando?
Você precisa entender o contexto do usuário antes de criar uma solução que o ajude a realizar
tarefas. O objetivo é perceber as verdadeiras necessidades e as preocupações dos usuários reais.
Para um mesmo projeto, você ainda pode precisar criar mais de uma persona.
Exemplo
Em um aplicativo para consultas médicas, há, no mínimo, duas personas bem diferentes: uma, que
representa o público de médicos; outra, o público de pacientes.
Siga as seguintes dicas para criar uma persona:
Crie um nome e uma imagem (ilustração ou fotogra�a) que a represente.
Cenário e jornada do usuário
Cenários são descrições de situações hipotéticas em que o público-alvo se coloca. Um cenário
pode ser construído por meio de uma frase como “Suponha que o usuário realize a tarefa de...”.
Para que o cenário não fique muito desconectado com a realidade, em vez de pensarmos em um
usuário genérico realizando as tarefas, devemos criar cenários onde atuam as personas.
A jornada do usuário deve ser criada para entendermos como é o cenário em
que o usuário atua, como é a experiência de uma pessoa realizando uma
tarefa.
Deve mapear como o usuário faz antes, durante e depois do uso do seu novo aplicativo. Para cada
persona criada, você deve criar também uma jornada que descreva:
Estabeleça o per�l demográ�co.
Liste as tarefas que o usuário deve realizar.
Elenque as dores (ou problemas, preocupações etc.) dos usuários.
Anote as possíveis soluções para essas dores.
Estágios da jornada.
Tarefas realizadas em cada estágio.
Sentimentos associados a cada tarefa (frustação, impaciência, angústia, alívio etc.).
Oportunidades para o usuário retornar valor a cada estágio da jornada.
Prototipagem
Segundo Benyon (2011), a antecipação (ou prototipagem) preocupa-se em tornar as ideias visíveis.
Para tanto, utilizam-se os protótipos, os quais podem ser modelos físicos, como esboços a lápis ou
modelos digitais.
Para um design centrado no usuário, a prototipagem é importante, pois ela permite ao designer ver
o aplicativo a partir da perspectiva de outros.
O que é wireframing?
Wireframing é a atividade de criação de modelo ou de esquema de tela que desenhamos para ser
um guia visual da estrutura do esqueleto de um aplicativo. O wireframe constitui um esboço das
telas e aponta como elas vão se comunicar entre si, mostrando, de maneira simples, como o
aplicativo funcionará.
Wireframes de baixa resolução.
Elementos de um bom wireframe
Um wireframe de qualidade deve incluir um bom planejamento das telas do aplicativo. Esse
planejamento tem de mostrar:
Como o conteúdo será apresentado.
Como cada parte do conteúdo será priorizada.
Distribuição de espaço.
Ações planejadas.
Recursos e funções disponíveis.
Transições entre telas.
Criar um wireframe é como fazer um mapa mental de etapas e procedimentos sobre como se
começa um desenvolvimento de aplicativo móvel. Ele fornece uma ideia clara sobre a hierarquia de
conteúdo, as categorias de objetos, os elementos de tela, as ações possíveis e a posição dos
elementos visuais da marca.
É possível planejar no wireframe o estabelecimento de uma hierarquia visual forte para a interface,