DESIGN DE INTERAÇÃO E UI/UX

AULA 3

Prof.ª Margarete Marzani

 CONVERSA INICIAL

Nesta aula, vamos continuar nossos estudos projetando para os

dispositivos móveis, ou melhor, para os usuários móveis. Estamos nos referindo
às pessoas que irão utilizar nossos aplicativos como usuários, mas não podemos
nos esquecer de que estamos projetando para pessoas. Trata-se de ter empatia.
Será que o design centrado no usuário é diferente no contexto móvel? Se
é diferente, vamos abordar em quais aspectos. Também vamos abordar as
heurísticas de Nielsen, considerado o defensor dos usuários e o responsável por
apresentar os dez princípios norteadores que vamos aplicar no contexto móvel.
Para dar início aos trabalhos, precisamos conhecer técnicas para
desenvolvimento de ideias. Já avisamos que existem diversas técnicas, e cada
empresa faz uma opção que melhor lhe agrade, além de poder fazer adequações
nos modelos propostos. Finalmente, vamos conhecer o Design Sprint, uma
técnica para desenvolvimento de ideias que promete ser mais ágil e adequada
para o desenvolvimento de aplicativos.

TEMA 1 – DISPOSITIVOS MÓVEIS OU USUÁRIOS MÓVEIS?

Designers de aplicativos móveis devem levar em consideração o fato de

que os dispositivos móveis são operados dentro de um contexto de restrições
significativas e distrações ambientais. Há uma ciência do contexto de uso do
usuário, o qual habitualmente mantém o aparelho ligado e o transporta para
todos os lugares aonde vai.
Dispositivos móveis acompanham seus usuários durante a maior parte do
dia, se não o dia todo. Os smartphones estão conosco em todos os ambientes,
internos e externos. O uso do dispositivo é moldado pelas normas culturais
existentes e pelas muitas atividades em que estamos envolvidos
simultaneamente. Os objetivos de uso são diversificados e os níveis de atenção
também. Além disso, o número de tarefas desempenhadas por dispositivos
móveis continua a crescer.
O dispositivo também está situado em camadas de contexto, incluindo
políticas das empresas operadoras de celular, tipos de conexão e todas as
variáveis do aparelho, de especificações à familiaridade. A interface é o espaço
em que essas esferas de clientes e dispositivos sobrepostas se cruzam.

2
 Quais são as implicações desse modelo de contexto para o design móvel?
Devemos focar nossas práticas de design em torno de pessoas móveis, não de
dispositivos móveis. Em outras palavras, não estamos apenas encolhendo em
tamanho uma experiência web, mas criando uma plataforma totalmente nova
para comunicação e interação. Há tanto a oportunidade de se envolver com os
clientes em qualquer lugar e a qualquer momento quanto há também a
necessidade de integrar novas experiências com outras experiências reais e
virtuais que constituem atividades e contextos cotidianos.

1.1 Compreendendo o contexto de uso do usuário móvel

Para conceber a arquitetura de informação, devemos considerar os

aspectos:

• Culturais: condições econômicas do usuário, condição social,

religiosidade, o que gosta de fazer como lazer, como gosta de ocupar seu
tempo, entre outros;
• Ambientais: como já observamos, os usuários carregam os smartphones
para todos os lugares. As características ambientais são diversificadas,
considerando: ruído, iluminação, privacidade, entre outros;
• A atividade: como os usuários desenvolvem suas atividades ao usar o
smartphone (caminhando, trabalhando, dirigindo, pilotando etc.);
• As metas do usuário: o que o usuário pode pretender (interagir
socialmente, entretenimento, entre outras possibilidades);
• O período de atenção que o usuário tem disponível: o tempo
disponível para interagir é contínuo ou intermitente;
• As tarefas que o usuário deseja realizar: enviar mensagens, fazer
chamadas etc.;
• Os recursos no qual o usuário interage: sistema operacional, recursos,
hardware;
• A conexão disponível: velocidade, confiabilidade etc.

O que queremos? Levar a melhor experiência para nossos usuários. Mas

temos que considerar que o contexto de uso móvel é diferente do contexto de
uso do desktop.

3
 TEMA 2 – HEURÍSTICAS

Não podemos falar de heurísticas sem citar Jacob Nielsen, Ph.D., diretor
do Nielsen Group, juntamente com o Dr. Donand A. Norman (ex-vice-presidente
da Apple Computer). Nielsen é um estudioso da usabilidade e defensor dos
usuários. Uma de suas contribuições famosas e amplamente divulgadas na
internet nos assuntos referentes ao design são as heurísticas de Nielsen:

• Visibilidade de onde estamos situados no sistema;

• Correspondência entre o sistema e o mundo real;
• Liberdade de controle fácil ao usuário;
• Consistência e padrões;
• Prevenções de erros;
• Reconhecimento em vez de memorização;
• Flexibilidade e eficiência de uso;
• Estética e design minimalista;
• Ajuda para os usuários reconhecerem, diagnosticarem e recuperarem-se
de erros;
• Ajuda e documentação.

2.1 Feedback – Visibilidade de onde estamos situados no sistema

Trata-se de informar onde exatamente o usuário está posicionado.

Figura 1 – Nielsen Norman Group

Fonte: Norman Group, [S.d.].

4
 Observamos que ao navegar no site Nielsen Norman Group, quando
escolhemos a página “Relatórios e livros”, o designer nos dá uma pista de onde
estamos (figura 2), mantendo à disposição as outras páginas.

Figura 2 – Ícone para relatórios e livros

No dispositivo móvel, temos:

Figura 3 – Tela (1) Smartphone

Crédito: R.Bordo/Shutterstock.

Observe o menu hambúrguer , o qual nos fornece acesso a

outras páginas disponíveis para navegação. Quando aberto o menu, ele se
transforma em um X, já conhecido pelos usuários para fechar.

Curiosidade
O menu hambúrguer foi criado em 1891 por Norm Cox enquanto
trabalhava este trabalhava na interface do sistema operacional Xerox Star.

2.2 Correspondência entre o sistema e o mundo real

Lembre-se de que já conversamos sobre o usuário ter uma modelo mental

de experiências anteriores! Nesse caso, um exemplo muito bem aplicado em

5
 sites, tanto para desktop quanto para dispositivos móveis, é o uso do carrinho de
compras, usado no mundo real.

Figura 4 – Carrinho de compras

2.3 Saídas claras – liberdade de controle fácil ao usuário

Um exemplo para proporcionar liberdade ao usuário é o de sair da

interface a qualquer momento. No processo de compras, isso corresponderia a
abandonar o processo antes de confirmar a compra em qualquer etapa, ou
mesmo de ter a opção de excluir produtos do carrinho de compras. Outro
exemplo, específico de aplicações para dispositivos móveis, é a facilidade em
desinstalar o aplicativo.

2.4 Consistência – consistência e padrões

Para o usuário, é importante manter os objetos visuais na mesma posição

para que não precise ficar procurando. Lembre-se de que temos uma memória
visual já gravada no modelo mental. Imagine se tivéssemos que reaprender a
cada tela.

2.5 Prevenções de erros

Prevenir erros é essencial. Um bom exemplo de prevenção de erro é a

confirmação de que deseja excluir um arquivo no Windows Explorer. No mercado
livre, antes de confirmar a compra, o aplicativo mostra os dados da compra para
que o usuário verifique. No iFood, é solicitada a confirmação do endereço de
entrega duas vezes devido ao fato de as pessoas fazerem o pedido em casa ou
no trabalho, por exemplo, e não prestarem atenção inicialmente no endereço que
estava habilitado.

2.6 Reconhecimento em vez de memorização – reconhecimento

Podemos citar os aplicativos Office como exemplo, os quais possuem os

menus com comandos mais utilizados à disposição.

6
 Figura 5 – Word

Poderíamos, erroneamente, somente utilizar teclas de atalho, as quais

são difíceis de memorizar para um usuário iniciante. Aqui, faremos um parêntese
para contar uma história: como usuários do editor de texto WordStar, tínhamos
que determinar previamente quais seriam as teclas para acentuação e
caracteres especiais. E pior: antes de iniciar o documento, tínhamos que definir
quantas páginas iríamos precisar. Consegue imaginar? Nem todos conseguiam
utilizar o editor naquela outra vida.

2.7 Flexibilidade e eficiência de uso (atalhos)

A eficiência pode ser atingida com o uso de diversos recursos, como

autopreenchimento e armazenamento de dados. A eficiência deve atender tanto
usuários iniciantes quanto usuários especialistas, com o uso de teclas de atalho.

2.8 Estética e design minimalista

O título estética e design minimalista já é suficientemente claro: o usuário

necessita apenas de informações necessárias, sem as saturações de excesso
de informações desnecessárias que tirem sua atenção. Um exemplo:

7
 Figura 6 – Google

Crédito: Nikolay Antonov/Shutterstock.

O Google é uma empresa que poderia encher sua tela inicial (index) de
propaganda. Porém, a empresa compreendeu e optou pelo minimalismo,
sobressaindo-se com o quesito estética. Assim, vale a frase: “menos é mais”.

2.9 Ajuda os usuários a reconhecerem, diagnosticarem e recuperarem os

erros

Toda a orientação nas ocorrências de erros é extremamente necessária.

Como exemplos, no preenchimento de senhas erradas, com mensagens de
alerta (bloqueio após três tentativas erradas), e na criação de senhas, alertar
para senhas fracas. Para conseguir recuperar arquivos, no caso dos aplicativos
de escritório, a mensagem dever ser simples e clara, o mais próximo possível da
linguagem humana. Jamais devemos deixar uma mensagem técnica como
“ERRO 4040”.

2.10 Ajuda e documentação

No caso de uma interação muito complexa, com muitas possibilidades, é

necessário dispor de recursos de ajuda, como documentos e vídeos.
Dependendo do tipo de atividade, até um FAQ (Perguntas Frequentes) é
importante. A maioria dos aplicativos que rodam no ambiente Windows
padronizaram a tecla de função F1 para o recurso de ajuda on-line.
Veja a tela na Netflix:

8
 Figura 7 – Mensagem de erro da Netflix e disponibilização de ajuda

TEMA 3 – USUÁRIOS MÓVEIS

Por mais incrível que seu aplicativo possa ser em recursos, conteúdo e
eficiência técnica, ele só será baixado se seus usuários o acharem conveniente,
necessário e fácil de usar em um contexto móvel. "Mobile" significa “em
movimento”, é claro. Mas no contexto do smartphone, é útil pensar em seu
significado mais flexível, como "longe da minha mesa". Se você está no
supermercado ou apenas enrolado em seu sofá, ambos são contextos móveis
— cada um com suas próprias oportunidades e possíveis distrações. Para qual
contexto móvel você está projetando?
Por que você usaria um aplicativo quando está longe de sua mesa ou
computador? Por que é especialmente conveniente ter acesso, em qualquer
hora, a esse aplicativo no bolso? Às vezes, isso é fácil: alguns aplicativos são
desenvolvidos para serem utilizados dessa maneira, como o WhatsApp.

9
 Crédito: Oatawa/AdobeStockPhotos.

Na verdade, sabemos que o WhatsApp superou seu contexto de uso,

passando até a ser usado no desktop e tablet, devido a sua utilidade.
Provavelmente, seu usuário estará em um ambiente de distração que poderá
tirar a atenção a qualquer instante – um ônibus lotado, um restaurante animado,
a sala de estar da família. Isso significa que as pessoas estão manuseando seu
aplicativo em uma mão, com apenas um olho na tela, prestando apenas atenção
parcial à sua interface cuidadosamente trabalhada. Eles veem um aplicativo
completamente diferente do que você vê como designer.

Figura 8 – Você projetou/O usuário vê

Crédito: Kaspars Grinvalds/ AdobeStockPhotos.

10
 Essa visão embaçada do seu aplicativo exige uma atenção cuidadosa a
respeito da organização de informações em sua tela, com alvos visuais grandes.
No contexto de atenção dispersa e um ambiente de distração, você não pode
esperar que as pessoas tenham tempo ou paciência para estudar a tela. Porém,
há exceções. Algumas pessoas levarão tempo jogando. Outras pessoas poderão
passar horas lendo um e-book. Mas esses mesmos aplicativos, games e ebook
readers provavelmente serão usados para um sprint de 30 segundos na próxima
sessão da mesma pessoa. Isso significa que mesmo aplicativos que incentivam
interações mais longas devem se antecipar, de modo a serem projetados para
usos rápidos.
Josh Clark (2010) define três categorias para acesso à web móvel:

• Microtarefa: quando o usuário interage com o dispositivo por momentos

breves, mas frenéticos períodos de atividade;
• Local: quando o usuário deseja saber o que está acontecendo ao seu
redor;
• Entediado: quando o usuário não tem nada melhor para fazer e quer se
divertir ou se distrair de alguma outra forma.

Manter essas categorias em mente pode tornar muito mais fácil projetar
para as necessidades do usuário e focar no que torna o celular diferente de
outras plataformas de acesso. Há quatro dimensões de design de interação que
nos auxiliam (Gillian Crampton Smith, 2007):

1. Palavras utilizadas nas interações, como títulos do botão da imagem, que

devem ser simples e significativas.

Crédito: Crstocker/Shutterstock.

11
 Nas colunas acima, o significado do botão é o mesmo, apenas o estilo é
diferente. Da esquerda para a direita: 1. Ler mais. 2. Aprender mais. 3. Comprar
agora. 4. Baixar.

2. Representações visuais: são os elementos gráficos com os quais os

usuários interagem. Ícones e imagens geralmente complementam as
palavras usadas para comunicar informações aos usuários.

Mesmo que você não saiba ler no idioma chinês, é possível reconhecer o
ícone da câmera do Android na figura a seguir:

Figura 9 – Ícone de câmera

3. Objetos físicos ou espaço: refere-se aos tipos de mídias com as quais

os usuários interagem (desktop, notebook, tablet, smartphone) e onde ele
interage, o que nos remete ao local em que a pessoal interage.

Crédito: Rawpixel.com/Shutterstock.

12
 4. Tempo de interação: nos remete também às microtarefas a serem
executadas nos smartphones ou tablets, recordando o que já foi dito sobre
o tempo de interação. Também diz respeito à possibilidade de o usuário
poder continuar a desenvolver quando retornar a usar o aplicativo. A
seguir, você pode ver a tela de um aplicativo (Drops) usado para estudar
o alfabeto hebraico. Em cada interação (gratuita), podemos dar
continuidade aos estudos, conforme liberam-se as letras.

Figura 10 – Kevin Silve (2007) adicionou uma quinta dimensão

5. Comportamento: como o usuário reage e interage com o produto.

TEMA 4 – DESENVOLVENDO A IDEIA

O processo criativo não é um processo instantâneo. Pense: nem

Leonardo da Vinci idealizou a Santa Ceia rapidamente. Dependendo da
situação, é necessário fazer estudos, reuniões e pesquisas.
Inicialmente, precisamos entender o contexto no qual os usuários irão
interagir com o sistema. O próximo passo é identificar os requisitos e
funcionalidades. A próxima fase será a de desenvolver soluções. É necessário
fazer iterações entre as fases continuamente até que os resultados sejam
satisfatórios.
Desenvolver uma ideia, costumeiramente, é um trabalho para ser
desenvolvido em equipe. Lowdermilk (2019) usa a seguinte técnica:

13
 • Definição de missão da equipe;
• Detalhes do projeto;
o Título;
o Descrição;
o Lista das pessoas-chave;
o Avaliação do impacto;
• Requisitos de usuário;
• Requisitos funcionais;
• Diagramas de banco de dados/fluxo de dados;
• Imagens de telas de protótipos.

É possível utilizar diversas técnicas para dar início ao projeto, o que

depende também do tipo de projeto que você irá desenvolver. Se o projeto for
desenvolvido por encomenda, é porque temos um cliente; se o projeto é
desenvolvido sem ter um cliente específico, podemos ter múltiplos clientes. Há
várias maneiras de monetização ao se trabalhar com aplicativos móveis. Você
pode ter um cliente que solicitou um projeto ou pode publicar e monetizar com o
Google.
É possível fazer uma analogia com o conceito de Design Thinking,
utilizando umas das metodologias utilizadas pelos designers.

Tabela 1 – Modelo da IDEO, empresa que criou o mouse da Apple

INSPIRAÇÃO IDEAÇÃO IMPLEMENTAÇÃO

Tenho um desafio de Oportunidade de Tenho uma
design design solução inovadora
Como eu: Como eu: Como eu:
Começo? Interpreto o que Torno meu conceito
Conduzo uma aprendi? real?
entrevista? Torno minhas ideias Como avalio se
Permaneço centrado no tangíveis? funciona?
humano? Faço um protótipo? Planejo para
sustentabilidade?

14
 Figura 11 – Modelagem da IDEO

Fonte: Ideo, 2009.

Figura 12 – A Universidade de Stanford detalha um pouco mais o processo no

seu diagrama

Fonte: Hasso Plattner Institute of Design.

O modelo utilizado vai depender da empresa para a qual você for

trabalhar, ou mesmo da existência de adaptação de algumas das muitas
metodologias disponíveis.

TEMA 5 – DESIGN SPRINT

A metodologia Design Sprint foi concebida em um contexto que é comum

para muitas empresas, com um cenário de mudanças rápidas, riscos e respostas
incertas. Por esse motivo, o Design Sprint é interessante para empresas que
visam à inovação.

15
 O processo surgiu por meio da oportunidade de se desenvolver ideias em
pouco tempo, ressaltando que foi uma experiência real. Jake Knapp, John
Zeratsky e Braden Kowitz publicaram o livro Sprint: O Método Usado no Google
Para Testar e Aplicar Novas Ideias em Apenas Cinco Dias, em 2016. No livro,
os autores explicam a metodologia Design Sprint, utilizada por Jake Knapp no
período em que trabalhou no Google. Os autores utilizavam o Design Sprint para
vários trabalhos. Um exemplo foi a necessidade de testar uma ideia para um
software de videoconferências que pudesse ser executado em um navegador da
web. Os autores estavam numa viagem e tiveram cinco dias para desenvolver a
ideia. Posteriormente, uma versão aperfeiçoada do aplicativo foi lançada como
Google Hangouts.
O Design Sprint foi também utilizado no GV, antigo Google Ventures, firma
de capital de risco criada pelo Google para investir em startups promissoras. Em
geral, essas empresas têm apenas uma chance de criar um produto de sucesso
antes de ficarem sem dinheiro. Os sprints permitiam que os autores soubessem
se estavam no caminho certo antes de se arriscarem a desenvolver e lançar seus
produtos. Conduzir sprints era uma chance de economizar e gerar dinheiro.
O objetivo principal é validar hipóteses e soluções sem um longo processo
de desenvolvimento de produtos ou serviços, proporcionando inovação, redução
de custo e de tempo. O Design Sprint é um processo dividido em cinco etapas,
começando com um desafio, os cinco dias e finalizando com o aprendizado.

16
 Crédito: Mariane Martins Almeida/Shutterstock.

O primeiro passo é ter um bom desafio: qual problema o projeto

resolverá? A situação deve ser bem explicada para a equipe que participará do
sprint.
É extremamente importante definir a Equipe para o sprint. Se quiser
montar a equipe perfeita para um sprint, primeiro você vai precisar de alguém
com autoridade para tomar decisões.
Essa pessoa é o Definidor, é quem oficialmente toma as decisões no
projeto. Em muitas startups com as quais trabalhamos, essa pessoa é o fundador
ou o CEO. Em companhias maiores, pode ser o vice-presidente, um gerente de
produto ou outro líder. Esses Definidores, em geral, entendem o problema
profundamente e com frequência têm opiniões fortes e critérios que ajudam a
encontrar a solução certa.
Obviamente, é preciso haver um local adequado para realizar o sprint. O
uso de ferramentas de conferência também funciona bem. Os sprints duram em
torno de um dia cada, preferencialmente, sem interrupções para não perder o
foco nem a produtividade.

17
 O primeiro dia começa com um exercício que chamamos de “comece
pelo fim”: um olhar sobre o futuro – para o fim da semana do sprint e além. Você
e sua equipe vão determinar o básico: seu objetivo de longo prazo e as questões
difíceis que devem ser respondidas. Para iniciar a conversa, pergunte para a sua
equipe: “por que estamos realizando este projeto? Onde queremos estar daqui
a seis meses, um ano ou até cinco anos?”
Apresente propostas que ajudarão a equipe a pensar em suposições e
questões: a quais questões queremos responder nesse sprint? Para alcançar
nosso objetivo de longo prazo, o que precisa acontecer? Nessa etapa, é
fundamental saber com certeza qual a pergunta ou problema a se resolver.
O segundo dia é o dia das ideias. Explorar a criatividade da equipe
funciona como um brainstorming, porém, alguns autores recomendam que,
nesse momento, as pessoas desenvolvam suas ideias sozinhas, com tempo
para fazer estudos e pesquisas. As ideias individuais amadurecem com as
pesquisas.

Figura 13 – Esboço de quatro etapas

Fonte: Knapp et al., 2016.

O método de esboço de quatro etapas agiliza o processo de criação.

1. Notas: a equipe vai checar os quadros brancos do primeiro dia e fazer o

máximo de anotações possível sobre o que foi visto e entendido sobre o
problema;

18
 2. Ideias: fase da criação individual, em que cada participante desenvolve
suas ideias iniciais, baseando-se em suas pesquisas;
3. 8s louco: da melhor ideia individual, o integrante desenha em oito
minutos, oito variações da ideia;
4. Esboço da solução: você escolhe das opções o que mais gostou para
apresentar para a equipe. Um detalhe: o esboço não deve conter seu
nome.

O terceiro dia da decisão: é escolhido o que será levado adiante no

sprint. O importante é chegar em uma ou no máximo duas soluções que serão
prototipadas e colocadas à prova para a validação pelo público-alvo. Para isso,
é utilizada uma abordagem de cinco passos para escolher a solução mais
promissora apresentada.

1. Museu de arte: os integrantes colam os esboços das soluções em uma

longa fileira preferencialmente na parede;
2. Mapa de calor: cada participante analisa os esboços em silêncio e cola
de um a três adesivos ao lado das partes que gostou, ou no esboço de
que mais gostou;
3. Críticas: a equipe discute durante três minutos os destaques de cada um.
Então, registram as ideias mais promissoras e anotam as objeções mais
importantes;
4. Votação individual: cada um escolhe em silêncio sua ideia favorita;
5. Supervoto: o definidor tem direito a três adesivos grandes para escolher.
Essas escolhas serão transformadas em protótipos e testadas nas fases
seguintes.

O quarto dia é o dia da prototipação. É o momento de desenhar a ideia

ou ideias para serem testadas por outras pessoas. O time se organiza para
desenvolver um modelo que seja capaz de comunicar a solução de forma
eficiente para ser validada pelo público-alvo. Mas é importante ter em mente que
não se trata de construir uma versão final, mas sim o mínimo suficiente para que
as questões do sprint sejam respondidas. O protótipo deverá ser apenas uma
versão para a solução criada. Deve funcionar minimamente apenas para testar
e validar a ideia desenvolvida ao longo do sprint. É recomendável utilizar um
software de prototipação para essa etapa.

19
 O quinto dia é o dia dos testes. Pessoas serão convidadas para participar
dos testes. No final do dia, lê-se o quadro com anotações dos testes e entrevistas
com os usuários e identificam-se padrões de comportamento e problemas
encontrados nas soluções. Assim, é feita uma lista de todos os padrões que as
pessoas identificaram, cada um sendo rotulado como positivo, negativo ou
neutro. O resultado do quinto dia é a aprendizado. Obviamente, o processo do
design sprint pode ser adequado às necessidades da empresa, principalmente
em termos de tempo.

FINALIZANDO

Para iniciar a fase de design, precisamos conhecer os conceitos

envolvidos e principalmente o contexto de uso dos aplicativos por parte dos
usuários, além de saber quais são as características dos usuários móveis.
O Google fez uma pesquisa sobre hábitos de uso de usuários no Brasil,
em 2015, chamando-a de micromomentos, os quais se referem aos momentos
de interação dos usuários com os aplicativos. Veja o resultado:

Figura 14 – Micromomentos

Fonte: Google, 2015.

Além do comportamento e contexto de uso, precisamos aplicar em nossos

projetos as heurísticas de Nielsen, obviamente adaptadas para o contexto móvel.
Josh Clark (2010) também contribuiu com o insight das microtarefas, um conceito
muito similar ao utilizado pelo Google em 2015 com os micromomentos.

20
 Nesta aula, vimos também opções para o desenvolvimento da ideia, como
o design sprint, que permite agilizar o processo de apresentação das ideias. Não
existem regras sobre essas metodologias, ficando a critério das empresas a
escolha da metodologia que parecer mais adequada.

21
 REFERÊNCIAS

IDEO. The Field Guide to Human-Centered Design. Disponível em:

<https://www.ideo.org/tools>. Acesso em: 7 out. 2021.

22