Design para Dispositivos Móveis apostila 2

Prévia do material em texto

Nome professor
E-book 1E-book 2
Ariel da Silva Dias
DESIGN PARA 
DISPOSITIVOS 
MÓVEIS
Neste E-Book:
INTRODUÇÃO ����������������������������������������������������������� 3
USABILIDADE E DESIGN MOBILE ����������������������4
Carregamento Progressivo �������������������������������������������������������7
Breakpoints �����������������������������������������������������������������������19
Breakpoints com base no dispositivo ������������������������������������20
Push notifications ��������������������������������������������������������������23
One hand operation ������������������������������������������������������������24
CONSIDERAÇÕES FINAIS ����������������������������������� 33
REFERÊNCIAS BIBLIOGRÁFICAS & 
CONSULTADAS ������������������������������������������������������� 35
2
INTRODUÇÃO
Usabilidade é um termo abrangente, que engloba 
facilidade de uso, capacidade de aprendizado, recu-
peração rápida de erros e suporte às características 
de uso de usuários, de iniciantes a especialistas�
Desse modo, durante sua leitura, você compreende-
rá a definição do conceito de usabilidade na produ-
ção de aplicações eficazes e eficientes. Entenderá 
também como aplicar o conceito de usabilidade no 
desenvolvimento de aplicativos e as diretrizes gerais 
para o projeto de interação�
3
USABILIDADE E DESIGN 
MOBILE
O Instituto de Engenheiros Eletricistas e Eletrônicos 
(IEEE) define o conceito de usabilidade como “a faci-
lidade com que um usuário pode aprender a operar, 
preparar entradas e interpretar saídas de um sistema 
ou componente” (IEEE, 1990). Em uma visão geral, 
um produto que possui usabilidade, ou seja, um pro-
duto utilizável, facilita a chegada aos objetivos do 
usuário sem dificultar o alcance desses objetos.
Para complementar a definição do IEEE, a ISO 9241, 
que apresenta a norma sobre os requisitos de ergo-
nomia, apresenta também, de acordo com Barbosa 
(2010), a seguinte definição sobre usabilidade: “grau 
em que um produto é usado por usuários específicos 
para atingir objetivos específicos com eficácia, efici-
ência e satisfação em um contexto de uso”�
Observe, então, que a usabilidade é entendida como 
a facilidade de uso de um determinado produto e se 
o produto é fácil de usar é porque ele é eficaz e efi-
ciente. Logo, por ser eficaz e eficiente, proporciona ao 
usuário final a satisfação pelo uso. Acompanhemos, 
então, o significado dos conceitos que compõem a 
definição de usabilidade, são eles: eficácia, eficiência 
e satisfação:
 ● Eficácia – A precisão e integridade com as quais 
os usuários podem atingir objetivos específicos em 
ambientes específicos. Logo, consiste em fazer a 
4
coisa certa. Por exemplo: considere um aplicativo X 
que monitora a temperatura de uma caldeira� Quando 
a temperatura da caldeira ultrapassa os 80º C ela 
envia um e-mail para o encarregado, para que ele 
regule a temperatura para a faixa normal que é de 
70ºC a 79ºC.
 ● Eficiência – Os recursos gastos em relação à 
precisão e integridade dos objetivos alcançados� 
Consiste em fazer certo as coisas. Uma aplicação efi-
ciente, mas sem eficácia, passa a ser desnecessária 
pois não agregará nada ao usuário, por melhor que 
seja sua execução. A partir do exemplo do aplicativo 
citado anteriormente, que monitora a temperatura da 
caldeira, considere um aplicativo Y que, ao invés de 
enviar um e-mail ao encarregado, o próprio aplicativo 
ao observar uma temperatura acima de 80º C regu-
lará (automaticamente) a temperatura da caldeira 
para a faixa normal entre 70º C e 79º C.
 ● Satisfação – Trata-se do conforto e aceitabilidade 
do sistema de trabalho para seus usuários e outras 
pessoas afetadas por seu uso� No exemplo anterior, 
ter um aplicativo que monitora a temperatura e ge-
rencia a caldeira trará uma alta satisfação (desde 
que seja eficiente e eficaz).
De modo geral, então, podemos concluir que usabi-
lidade é a soma de eficácia, eficiência e satisfação. 
Veja então que, quando o aplicativo X foi desenvolvi-
do para monitorar a caldeira, avisava o encarregado 
sobre a temperatura, ou seja, fez a coisa certa, pois 
tinha que avisar.
5
Já no exemplo do aplicativo Y, ele além de monito-
rar ainda regulava a temperatura da caldeira, dando 
a possibilidade ao encarregado de realizar outras 
atividades� Logo, o aplicativo fez certo a coisa, ou 
seja, regulou a temperatura assim que ela ficou aci-
ma dos 80º C�
Existem muitos outros atributos importantes de qua-
lidade. Uma palavra-chave é a utilidade, que se refere 
à funcionalidade do design e responde à pergunta: o 
sistema faz o que os usuários precisam?
Usabilidade e utilidade são igualmente importantes 
e, juntos, determinam se algo é útil: pouco importa 
que algo seja fácil se não for o que você deseja� 
Também não é bom se o sistema hipoteticamente 
puder fazer o que você deseja, mas você não pode 
fazer isso acontecer porque a interface do usuário é 
muito difícil� Para estudar a utilidade de um design, 
você pode usar os mesmos métodos de pesquisa 
de usuário que melhoram a usabilidade.
 ● Definição de utilidade: se fornece os recursos que 
você precisa, então o sistema tem utilidade�
 ● Definição de usabilidade: se esses recursos são 
fáceis de aprender e memorizar, são agradáveis e 
fácil de usar com o tempo, então o sistema possui 
usabilidade�
 ● Definição de útil: se o sistema une usabilidade e 
utilidade, então ele é útil�
Para resumirmos toda essa introdução, considere um 
caso em que você escavou um poço com perfeição� 
6
O ato de escavar o poço é ser eficiente, ou seja, você 
realizou um feito com perfeição, escavou o poço, mas 
sem resultado impactante (por exemplo, não havia 
água no poço aberto).
Por outro lado, você realizou uma análise prévia e es-
cavou um poço e, dessa vez, sabia onde havia água. 
Isso é ser eficaz, você escavou o poço, cumpriu um 
trabalho e resolveu um problema que era encontrar 
água�
Por fim, você escavou um poço para obter água em 
uma região considerada desértica� Você instalou 
um sistema a motor que retira rapidamente a água 
do fundo do poço e traz para a superfície em um 
balde� Isso vai gerar satisfação para o seu usuário 
final (população sedenta) e será muito útil (uma vez 
que fornece o recurso necessário e o processo de 
aprendizado de uso do sistema é muito simples).
Carregamento Progressivo
A possibilidade do carregamento progressivo da web 
mudou nossa percepção sobre os aplicativos da web� 
Eles abriram a porta para mais possibilidades de 
criação de experiências ricas na web móvel, graças 
a vários recursos padronizados recentemente em 
JavaScript e navegadores da web. Agora cabe aos 
desenvolvedores examinar a usabilidade de aplicati-
vos da web progressivos e garantir que a experiência 
do usuário (UX) seja tão boa quanto com aplicativos 
nativos�
7
Spinner no carregamento
Carregamento spinner é um dos indicadores mais usa-
dos no design de interface do usuário (Figura 1). Mas 
existem muitas falhas que, geralmente, são esquecidas.
Figura 1: Facebook utilizando Spinner no carregamento de 
imagem� Fonte: Elaboração própria a partir de captura de tela.
8
Você já teve a sensação de estar em um lugar e o 
tempo não passar? Por exemplo, você olha no reló-
gio e são 13 horas e 10 minutos, um tempo depois 
você olha novamente e o relógio marca 13 horas e 
14 minutos, um tempo depois você olha e são 13 
horas e 17 minutos. Parece que a hora não passa e 
o relógio não “anda”.
Essa é exatamente a sensação que temos quando 
entramos em um site e encontramos o carregamento 
por spinner como da Figura 2 a seguir�
Figura 2: Carregamento spinner� Fonte: Elaboração própria 
(2020).
Nos exemplos da Figura 2, temos dois tipos diferen-
tes de spinners utilizados em aplicativos móveis� O 
primeiro (à esquerda) é o mais tradicional e apresenta 
um círculo que fica rodando na tela de modo inter-
mitente, até que a página se carregue� O segundo 
(à direita) é um modelo de spinner animado, em que 
os quadradinhos vão mudando de cor em sentido 
horário.Seja em círculo, em quadrado ou com animações 
(alguns são representados pela letra da empresa que 
9
fica rodando na tela), os spinners apresentam um 
“enorme” período de incertezas como: “será que a 
página está carregando ou a conexão com a internet 
caiu?”, ou então: “será que o conteúdo vai aparecer?”. 
Para ambas as perguntas, temos duas saídas: ou 
aguardar ou ir para uma outra página (geralmente, 
a do concorrente!).
Olhando ainda para os spinners da Figura 2 e recor-
dando os aplicativos que você já usou e que possuem 
spinners, responda sinceramente: quando você olha 
para um spinner, sabe quanto tempo resta para se 
concluir o carregamento? Quanto de conteúdo já foi 
carregado? Quanto ainda falta para carregar?
Com isso podemos concluir que, com os spinners, 
a sensação é que o carregamento parece ser mais 
lento, assim como quando você olha para o relógio 
e o tempo não passa�
Além do tempo que não sabemos se está correndo 
ou não, também não conseguimos saber o quanto 
uma página já carregou ou está para carregar� Desse 
modo, muitos usuários, devido a essa falta de infor-
mação, acabam por abandonar a aplicação�
Barra de progresso finito no carregamento
Então, eis que surge uma alternativa: a barra de car-
regamento finito (Figura 3). Com ela, se pudermos 
determinar os tempos de carregamento, consegui-
mos saber o quanto a página carregou e o quanto 
está por carregar�
10
Figura 3: Barra de progresso finito. Fonte: Elaboração pró-
pria (2020).
Entretanto, existe uma ilusão nesse tipo de carrega-
mento, afinal, não é possível determinarmos o tempo 
de carregamento de uma página. Além disso, mais 
uma vez, é criada a sensação de incerteza para o 
usuário que não sabe quando a página vai ser apre-
sentada (isso é, se ela realmente for apresentada!).
Outro ponto negativo, tanto para a barra de carrega-
mento finito quanto para o spinner é que, em ambos 
os casos, tudo o que vem a seguir é uma surpresa� 
Claro, existem surpresas boas e outras não tão boas� 
Porém, pense em seus usuários. Até que todo o con-
11
teúdo esteja carregado, eles não têm a menor ideia 
do que esperar da interface do seu aplicativo�
Observe a Figura 4 a seguir e a Figura 3, analise com 
atenção e responda a esta pergunta: o que estas 
imagens possuem em comum? Veja que, apesar da 
barra azul no topo, o restante é bem diferente�
A Figura 4 é o resultado, ou seja, o conteúdo que apa-
rece após o carregamento (da Figura 3). Agora, você, 
como usuário, poderia prever que a interface final 
ficaria assim como na Figura 4? Acredito que não.
Figura 4: Interface de uma aplicação mobile� Fonte: 
Elaboração própria.
12
Observe então que o usuário é pego de surpresa. Ele 
fica no aguardo por um determinado layout, mas, de 
repente, é surpreendido por uma interface que não 
era esperada�
Seja com o spinner ou com este tipo de barra, o usu-
ário não pode perder tempo� O seu conteúdo não 
pode demorar para carregar e ser disponibilizado ao 
usuário� Isso pode não parecer grande coisa, mas o 
tempo de espera e a falta de informação pode levar 
o usuário a migrar de sua aplicação para a de seu 
concorrente (lembre-se: o seu aplicativo não é o pri-
meiro que o usuário utiliza e nem será o último, então, 
entregue a usabilidade para ele).
Até aqui, então, só foram críticas a dois elementos 
muito utilizados, mas, afinal, o que seria um bom 
indicador de progresso? Essa resposta é simples: é 
aquele que obviamente não possui nenhum dos pon-
tos negativos apresentados anteriormente e ainda 
segue a estes três elementos:
 ● Dá feedback imediato;
 ● Fornece uma noção de tempo;
 ● Remove dúvidas mostrando o progresso gradual, 
garantindo ao usuário, desse modo, que o aplicativo 
está ainda funcionando�
De acordo com Nielsen (1993), a visibilidade do sta-
tus do sistema tem tudo a ver com transparência e 
comunicação clara com os usuários� O sistema sem-
pre deve manter os usuários informados sobre o que 
13
está acontecendo, por meio de feedback apropriado 
dentro de um prazo razoável�
Uma possível solução então são as telas de esquele-
to, elas nos auxiliarão no processo de carregamento 
de nossas páginas, indicando visualmente o que está 
acontecendo�
Telas de esqueleto no carregamento (skeleton 
loaders)
Ao contrário das técnicas mencionadas anterior-
mente, em que a interface do usuário é exibida de 
uma vez, a tela de esqueleto (skeleton loader) ajuda 
a carregar a interface do usuário gradualmente, um 
pouco de cada vez�
A técnica da tela de esqueleto (Figura 5) pode ajudar 
a aliviar a percepção dos usuários de inatividade ou 
lentidão por parte do site� Os designers estão, basica-
mente, dando às pessoas que visitam o site algo para 
ver enquanto a página não é exibida completamente�
Figura 5: Carregamento da linha do tempo do LinkedIn. 
Fonte: Miro Medium online. Acesso em: 21 set. 2020
14
https://miro.medium.com/max/700/0*s7uxK77a0FY43NLe.png
Assim como uma casa tem uma planta, há um esbo-
ço básico para cada site� Usar um esboço (ou talvez 
um wireframe) permite que os designers saibam a 
localização dos elementos-chave, desde gráficos e 
conteúdo de texto até navegação e muito mais, antes 
que qualquer trabalho real seja concluído. Isso torna 
possível decidir a aparência e o desempenho de um 
site antes que os designers realizem o processo real 
de criá-lo. O resultado é um produto de site melhor 
pensado e consistente�
Uma tela de esqueleto fornece um benefício seme-
lhante, mas em vez de indicar ao designer para onde 
ir, ela mostra aos visitantes o que eles podem esperar 
(por exemplo, texto, imagem) e onde eles podem 
esperar que apareça quando a página carregar to-
talmente (sem surpresas).
Observe na Figura 5 que a página do LinkedIn ainda 
não foi carregada por inteiro, entretanto, temos uma 
visão inicial de como é o layout e é possível compre-
ender que a página está carregando� Isso evita o fator 
surpresa e também possibilita ao usuário aguardar 
sem ter a sensação que “o relógio não anda”, pois 
parte do conteúdo (o esqueleto) já está carregado 
na tela�
As telas de esqueleto não fornecem as informações 
reais que vão aparecer, mas permitem que os visua-
lizadores, nas primeiras centenas de milissegundos, 
saibam onde devem focar sua atenção visual. Assim 
que apareça a informação real, o usuário já está pro-
15
curando no lugar certo, o que, em tese, deve melhorar 
a experiência do usuário�
Quando executado corretamente, os usuários nor-
malmente não percebem que estão olhando para 
uma tela de esqueleto. A percepção é que o site 
apareceu instantaneamente (mas não totalmente) 
porque algo estava na tela� Quando o foco visual foi 
alcançado, o texto e as imagens estavam na página, 
no layout programado pelos desenvolvedores, então 
tudo estava bem na mente do usuário� É uma vitória 
em todos os sentidos�
Existem diferentes tipos de telas de esqueleto. Os 
principais são marcadores de posição de texto e mar-
cadores de posição de imagem (ou cor).
A maioria dos desenvolvedores prefere usar espaços 
reservados de texto como o esqueleto da interface 
de usuário em suas páginas porque são fáceis de 
construir e o desenvolvimento não exige nenhum 
detalhe sobre o conteúdo real; em vez disso, o es-
queleto imita a interface do usuário�
Os marcadores de posição de cores são mais difí-
ceis de construir porque exigem detalhes sobre o 
conteúdo�
Alguns pacotes populares facilitam a implementação 
de telas de esqueleto em aplicativos da web, são eles 
o React Placeholder e o React Loading Skeleton�
Vamos dar uma olhada em ambos, começando com 
os prós e contras do React Placeholder:
16
 ● Prós
 ○ Os componentes de placeholder (espaço reserva-
do) são usados para criar um esqueleto de interface 
de usuário personalizado;
 ○ Suporte para animação pulse (trata-se de efeito 
de movimento em um elemento);
 ○ Ele vem com uma application programming interfa-
ce (API), ou interface de programação de aplicações, 
baseada em componentes�
 ● Contras
 ○ Os componentesdo esqueleto são mantidos se-
paradamente, portanto, a atualização dos estilos de 
um componente, possivelmente, exigirá a atualização 
do componente do esqueleto;
 ○ A curva de aprendizado não é linear porque existem 
vários componentes para diferentes necessidades�
SAIBA MAIS
Conheça mais sobre o React Placeholder lendo a 
documentação oficial. Disponível em: Github online.
Isso posto, vejamos os prós e contras do React 
Loading Skeleton.
 ● Prós
 ○ É baseado em API e possui um componente com 
adereços para toda personalização;
17
https://github.com/buildo/react-placeholder
 ○ Pode ser usado como um componente de esque-
leto separado e também dentro de qualquer compo-
nente diretamente, por isso é flexível;
 ○ Suporta temas e animações pulse.
 ● Contras
 ○ Fácil de implementar para um esqueleto de inter-
face de usuário mais simples, mas complicado para 
interfaces mais complexas;
 ○ Ter um componente de esqueleto separado torna-
rá mais difícil a manutenção quando a interface do 
usuário e os estilos mudarem�
SAIBA MAIS
Conheça mais sobre React Loading Skeleton len-
do a documentação oficial. Disponível em: Github 
online�
A tela de esqueleto definitivamente é uma melhor 
opção de carregamento quando a comparamos com 
barras ou spinners, entretanto, tem seus detratores� 
Essa abordagem pode ser interessante para usuários 
em conexões lentas, pois estão observando a página 
ser carregada pouco a pouco e sabem que algo está 
acontecendo, entretanto, pode ser um tanto desne-
cessária para aqueles em conexões rápidas, pois 
acaba que estes nem perceberão a tela de esqueleto� 
18
https://github.com/dvtng/react-loading-skeleton
https://github.com/dvtng/react-loading-skeleton
Breakpoints
Uma vez que a aplicação foi carregada, agora é a hora 
de a apresentarmos ao usuário e é aí que surgem os 
breakpoints�
O sucesso de um site depende muito da experiência 
de usabilidade do usuário� Hoje em dia, um usuário 
pode acessar um site de vários dispositivos de ta-
manhos diferentes. Desse modo, ter experiências 
de usabilidade iguais em cada dispositivo pode ser 
um desafio.
No design de uma aplicação web, um breakpoint é o 
ponto a partir do qual o conteúdo e o design de um 
site se adaptam de uma certa maneira para fornecer 
a melhor experiência possível ao usuário. Por exem-
plo, quando o site da UOL é visualizado em uma tela 
de desktop, o usuário vê todo o menu de navegação 
na barra lateral�
No entanto, se for visualizado na tela de um dispo-
sitivo móvel, o tamanho menor da tela fará com que 
a barra de navegação apareça no canto superior es-
querdo, como um menu�
Embora não haja um padrão para se definir pontos de 
interrupção, devido ao grande número de dispositivos 
no mercado, podemos listar os principais tamanhos 
de tela, são eles:
 ● 360 × 640
 ● 1366 × 768
 ● 1920 × 1080
 ● 375 × 667
 ● 360 × 720
 ● 768 × 1024
19
Breakpoints com base 
no dispositivo
Decidir pontos de interrupção com base em dife-
rentes dispositivos parece uma boa ideia, mas, na 
realidade, nem sempre é a melhor abordagem. Já 
temos dispositivos suficientes com que nos preocu-
par e quando um novo sai, com uma largura diferente, 
voltar para seu CSS e adicionar um novo ponto de 
interrupção novamente é demorado�
No entanto, ainda é uma opção viável, pois você 
pode achar que funciona bem para você. A Figura 
6 apresenta um exemplo de pontos de interrupção 
específicos do dispositivo.
Figura 6: Código CSS. Fonte: Elaboração própria.
20
Observe pela Figura 6 que, com esse tipo de abor-
dagem, você acabará tendo uma enorme lista de 
mídias�
Breakpoints com base no conteúdo
A melhor opção para se decidir os pontos de interrup-
ção é baseada no conteúdo do seu site. Esse método 
permite que você simplesmente adicione pontos de 
interrupção onde seu conteúdo precisa de ajuste de 
layout. Isso tornará sua consulta de mídia muito mais 
simples e gerenciável�
Na Figura 7, o ponto de interrupção significa que o 
CSS será aplicado quando a largura do dispositivo 
for 768px ou superior.
Figura 7: Código CSS breakpoint por conteúdo. Fonte: 
Elaboração própria.
Observe agora o exemplo de CSS da Figura 8, veja 
que é possível também definir-se um intervalo com 
pontos de interrupção, de modo que o CSS só se 
aplicará dentro desses limites�
Figura 8: Código CSS breakpoint por conteúdo com inter-
valo� Fonte: Elaboração própria.
21
Atributos min-width e max-width
Nos códigos CSS apresentados, ambos apresentam 
os atributos min-width e max-width. Você pode defi-
nir os pontos de interrupção de diferentes maneiras 
usando estes atributos ou mesmo através da com-
binação de ambos. Mas a questão é: quando você 
deve usar cada um?
Para responder de forma simples, se você estiver 
projetando seu layout com uma abordagem mobile 
first, use pontos de interrupção de largura mínima e 
vá aumentando�
Defina seus estilos padrão para os dispositivos pe-
quenos e, após concluir, ajuste para dispositivos 
maiores, de acordo com o tamanho das telas.
FIQUE ATENTO
Ao definir e implementar pontos de interrupção, é 
importante verificar como o site aparece em uma 
variedade de dispositivos� Na medida do possível, 
teste o design responsivo em dispositivos reais, 
para verificar como o design será exatamente para 
os usuários finais.
Da mesma forma, se você estiver projetando para 
dispositivos maiores primeiro, defina seu CSS padrão 
como faria, normalmente, e ajuste para dispositivos 
menores com a abordagem de largura máxima�
22
Push notifications
A notificação push tem sido uma das maneiras efi-
cazes de melhorar a taxa de retenção e aumentar o 
envolvimento do usuário. A notificação push rece-
bida oportunamente lembra os usuários de reagir 
às mensagens on-line, informa sobre o clima atual, 
apresenta as promoções de aplicativos de entrega 
e até mesmo notifica os usuários sobre o status de 
seu jogo favorito�
A mágica da notificação push é que ela permite que 
os dispositivos sejam atualizados no servidor sem 
se esgotar a bateria. Depois de habilitar a notifica-
ção push, você pode receber o alerta mesmo sem 
visitar o site�
As notificações push fornecem conveniência e valor 
para os usuários do aplicativo� Por exemplo, os usu-
ários podem receber:
 ● Placares esportivos e notícias direto na tela de 
bloqueio;
 ● Mensagens de utilitários como relatórios de trân-
sito, clima e neve;
 ● Check-in de voos, alterações e informações de 
conexão�
Para desenvolvedores de aplicativos, as notifica-
ções push são uma forma de falar diretamente com 
o usuário. Elas não são pegas em filtros de spam ou 
esquecidas em uma caixa de entrada – as taxas de 
cliques podem ser duas vezes mais altas do que as 
23
de e-mail. Elas também podem lembrar aos usuá-
rios de usar um aplicativo, esteja o aplicativo aberto 
ou não� Também podem ser usadas para conduzir 
ações, como:
 ● Promoção de produtos ou ofertas para aumentar 
as vendas;
 ● Melhorar a experiência do cliente;
 ● Converter usuários de aplicativos desconhecidos 
em clientes conhecidos;
 ● Envio de recibos de transações imediatamente;
 ● Direcionar usuários para outros canais de marke-
ting, como redes sociais�
O objetivo do celular é fazer com que cada mensa-
gem seja importante. Desse modo, não envie notifi-
cações com o objetivo de apenas envolver o usuário� 
Envie se, e somente se, você acha que essas men-
sagens são valiosas para o usuário�
A melhor maneira de estabelecer uma estratégia de 
mensagens de aplicativo móvel eficaz é usar diferen-
tes tipos de mensagens – notificações push, e-mail, 
notificações no aplicativo e mensagens de feed de 
notícias. Diversifique suas mensagens de modo que 
elas funcionem juntas em perfeita harmonia, criando 
uma ótima experiência ao usuário�
One hand operation
Nos primórdios, os celulares tinham apenas duas fun-
ções: realizar chamadas telefônicas e enviar mensa-
24
gens� Com apenas uma mão você conseguia digitar 
o número do telefone, cadastrar um contato, navegar 
pelo menu (utilizando o navegadorno próprio tecla-
do), atender uma ligação ou enviar uma mensagem. 
Muitas ações, com uma mão.
Com a evolução, a primeira característica impactante 
foi: remover o teclado físico e colocá-lo em uma tela. 
Além disso, toda interação acontecia na tela: tecla-
do, botões de seleção, navegação em menu� Com 
isso, toda execução que antes era realizada com 
uma única mão, agora precisa de duas mãos para ser 
feita� Isso ocorre porque as interfaces das aplicações 
são construídas pensando no mundo desktop, onde 
temos o mouse que consegue percorrer os quatro 
cantos de uma tela sem muita dificuldade.
Acredita-se que a principal razão desse domínio de 
uso de duas mãos é o fato de que as telas estão 
constantemente crescendo em tamanho, criando 
oportunidades e desafios para designers de interface 
de usuário. Mas o fato é que hoje a grande maioria 
dos smartphones vendidos não são grandes (entre 
4,7 a 6 polegadas). Basicamente, tudo o que precisa-
mos fazer é parar de colocar todos aqueles botões 
em posições difíceis do alcance do usuário�
Identificando as zonas de segurança
Antes de avançarmos para o design, precisamos 
conhecer as áreas de segurança de um dispositivo 
móvel. A Figura 9 apresenta um exemplo de estrutura 
de um celular com tela de 4,7 polegadas.
25
Aqui cabe uma orientação: nós consideraremos para 
este tópico as telas de até 6 polegadas, pois, além 
de estarem entre os modelos mais populares, este é 
o tamanho máximo de tela que é possível manipular 
com uma única mão�
Figura 9: Zonas de segurança em um celular com tela no 
tamanho de 4,7 polegadas, visão da mão direita. Fonte: 
Elaboração própria.
Antes de avançarmos para o design, precisamos 
conhecer as áreas de segurança de um dispositivo 
móvel. A Figura 9 apresenta um exemplo de estrutura 
de um celular que está sendo segurado pela mão di-
reita do usuário (para uma análise da mão esquerda, 
considere o espelhamento da mesma imagem).
26
A cor verde indica a zona segura na qual é fácil mover 
o polegar, logo, tudo o que está dentro da zona verde 
é de fácil acesso e deve ser explorado� Dentro da área 
azul fica um pouco mais difícil de se trabalhar e se 
mover, mas ainda é possível (com algum esforço) 
chegar a qualquer ponto. A zona vermelha é a área 
que é impossível alcançar sem mover os outros dedos, 
trata-se de uma região distante e de difícil acesso� 
Portanto, em nosso design, devemos colocar todos 
os botões e outros elementos interativos dentro das 
áreas verde e azul e ficar longe da zona vermelha.
A Figura 10 apresenta um mapa com as zonas em 4 
tamanhos de tela diferentes. Observe como, de acordo 
com a variação do tamanho da tela, o alcance na área 
mais segura (verde) começa a ser comprometido e a 
região azul e vermelha começam a crescer. Lembrando 
que na região verde podemos colocar a maioria dos 
controles, na região azul podemos colocar com algu-
ma cautela e a região vermelha deve ser evitada.
Figura 10: Quatro diferentes tamanhos de tela e o mapa de 
calor das regiões de alcance com os dedos da mão direita� 
Fonte: Elaboração própria.
27
Desse modo, analisando a Figura 10, podemos con-
cluir que é necessário adaptar um design para me-
lhorar a experiência do usuário. Temos então que 
nos certificar de que o aplicativo pode ser facilmente 
usado em uma tela grande com uma mão, colocando 
as opções de navegação ao alcance do polegar�
A Figura 11 apresenta um exemplo que é o Facebook. 
Observe com atenção o mapeamento em uma tela 
de 4,7 polegadas.
Figura 11: Facebook e as áreas de segurança� Fonte: 
Elaboração própria, com print screen da tela do Facebook.
28
Analisando a Figura 11, ao utilizar o dispositivo com 
uma mão, o usuário terá facilidade por percorrer sua 
linha do tempo e ver as publicações de seus amigos 
(área verde). Porém, se o usuário quiser ver as noti-
ficações (região vermelha) ele terá dificuldade, pois 
seu dedo não as alcançará. Também terá dificuldade 
de escrever algum post em seu Facebook�
Agora, analise com atenção a Figura 12, que apresen-
ta a interface do Instagram para dispositivos móveis�
Figura 12: Instagram e as áreas de segurança� Fonte: 
Elaboração própria, com print screen da tela do Instagram.
29
O Instagram, diferentemente do Facebook, possui a 
maioria dos controles na parte inferior da tela (tam-
bém chamado de sub navigation), logo, esses con-
troles estão nas regiões verdes e azul� Com isso, é 
possível utilizar apenas uma mão para navegar pelo 
Instagram�
Conforme podemos ver, é necessário adaptar um 
design para melhorar a experiência do usuário. Tente 
se certificar de que seu aplicativo pode ser usado fa-
cilmente (e totalmente) em uma tela grande com uma 
mão� Coloque as opções de navegação ao alcance 
do polegar (como foi feito na Figura 12).
Botão voltar
Além dessa preocupação com as áreas de segurança, 
de onde colocar ou não componentes, existe uma 
outra preocupação: o botão voltar. O botão voltar é 
um dos botões mais usados em aplicativos móveis� 
O telefone Android ainda o torna uma chave física 
fixa. Entretanto, ele é colocado no canto superior 
esquerdo da tela no iOS, o que é extremamente difícil 
de alcançar�
30
Figura 13: Exemplo de tela no iPhone6. Fonte: Elaboração 
própria, com print screen da tela do site da Amazon.
Observe na Figura 13 que temos duas capturas de 
tela distintas� Na primeira, ao acessar um produto 
no site da Amazon, o produto é apresentado na tela 
(Figura 13, imagem da esquerda). Se desejarmos ver 
as imagens com mais detalhes, basta clicar sobre 
ela e a mesma será apresentada (Figura 13, imagem 
da direita).
Agora, como fazer para sair da visualização de ima-
gem e voltar para a tela principal utilizando apenas 
uma mão? Note que o botão voltar está no canto 
superior esquerdo, em uma região não alcançável 
por uma mão apenas�
31
Uma vez que o botão de voltar é inalcançável com 
uma mão, a solução seria utilizar o conceito de jane-
las popover� Trata-se de uma visualização temporária 
que é exibida em uma tela de conteúdo quando um 
usuário clica em um botão de controle ou dentro de 
uma área definida (nesse caso, uma imagem). Para 
fechar o popover, tendemos a clicar em qualquer 
lugar fora dele que não seja o botão fechar.
Desse modo, em um novo design da página de deta-
lhes do produto, poderemos colocar as informações 
detalhadas em um grande popover, que na verdade 
é do mesmo tamanho do design antigo, mas a barra 
de status esmaecida e a barra de guias fazem com 
que pareça flutuar acima da página anterior.
Quando o usuário desejar voltar para a página an-
terior, basta clicar na área fora do popover e, deste 
modo, voltará para a visualização antiga�
32
CONSIDERAÇÕES FINAIS
Neste e-book você pôde compreender os conceitos 
de usabilidade� Você viu que um sistema possui usa-
bilidade se ele for eficiente e eficaz, além de ser útil 
e trazer satisfação ao usuário. Logo, fatores como: 
facilidade de aprendizagem, eficiência, segurança 
no uso e satisfação são atributos importantes e que 
devem compor um sistema para que ele seja útil�
Em seguida, fizemos uma análise sobre dois tipos 
de recursos muito utilizados no carregamento de pá-
ginas: os spinners e as barras de progressão� Como 
vimos, o carregamento progressivo com esses re-
cursos tende a gerar uma ansiedade e, em muitos 
casos, afastar o usuário de nossa página, devido 
principalmente à falta de feedback (a página termi-
nou de carregar? Está carregando? Quanto falta para 
carregar?).
Como solução para esses problemas, estudamos o 
conceito de telas de esqueleto, que ajudam a carregar 
a interface do usuário gradualmente e permitem o 
feedback que não temos com outros recursos�
Analisamos também o conceito de breakpoints, que 
é muito utilizado principalmente no desenvolvimento 
mobile first� Foram apresentadas duas técnicas que 
são os breakpoints com base no dispositivo, ou seja, 
no arquivo CSS colocaremos uma configuração para 
cada dispositivo existente� Isso pode ser muito tra-
balhoso, uma vez que adiversidade de dispositivos 
33
existentes é muito grande� Logo, uma alternativa são 
os breakpoints com base no conteúdo� Nesse, como 
o nome sugere, os pontos de interrupção são base-
ados no conteúdo da página, utilizando geralmente 
os atributos min-width e max-width�
Por fim, vimos a definição de one hand operation, 
um conceito que já era empregado em dispositivos 
mais antigos como os celulares de flip, por exem-
plo, onde era possível digitar mensagens e efetuar 
ligações apenas utilizando uma mão� Porém, com a 
evolução tecnológica, as telas foram ficando maiores 
e a atenção para a operação com uma mão acabou 
sendo deixada de lado�
Todos os assuntos aqui tratados compõem a usabi-
lidade: o usuário precisa ter satisfação ao interagir 
com uma aplicação. Desse modo, o layout precisa 
se adaptar ao tamanho da tela, os elementos dessa 
tela precisam estar ao alcance de seus dedos e pre-
cisam ser possíveis de, na maioria do tempo, serem 
utilizado apenas com uma mão�
Com isso, é possível concluir que, ao criarmos apli-
cações para dispositivos mobile, devemos pensar no 
usuário final, em sua satisfação e se o que estamos 
desenvolvendo tem boa usabilidade e utilidade, para 
que, satisfeitas essas condições, possamos afirmar 
que é útil�
34
Referências Bibliográficas 
& Consultadas
BARBOSA, S.; SILVA, B. Interação humano-compu-
tador. Rio de Janeiro: Elsevier, 2010.
CHAK, A. Como criar sites persuasivos: clique 
aqui. São Paulo: Pearson Education do Brasil, 2004. 
[Biblioteca Virtual]�
CSS Tutorial. W3Schools. Disponível em: http://www.
w3schools.com/css/default.asp. Acesso em: 16 fev. 
2020�
FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. 
Porto Alegre: Bookman, 2013. [Minha Biblioteca].
IEEE STD. IEEE Standard Glossary of Software 
Engineering Terminology 610.12-1990. Piscataway 
(NJ): IEEE, 1997.
JavaScript Tutorial. W3Schools. Disponível em: http://
w3schools.com/js/default.asp. Acesso em: 16 fev. 
2020�
MACDONALD, M.; DORIA, A. Criação de sites: o ma-
nual que faltava. São Paulo: Digerati Comunicação 
e Tecnologia, 2010.
NIELSEN, J. Usability Engineering. New York: 
Academic Press, 1993.
NORMAN, D.; DRAPER, S. User Centered System 
Design. Hillsdale (NJ): Lawrence Erlbaum, 1986.
SILVA, D. Desenvolvimento para dispositivos mó-
veis. São Paulo: Pearson Education do Brasil, 2016. 
[Biblioteca Virtual]�
SIMAS, V. L. et al� Desenvolvimento para dispositi-
vos móveis. v. 2. Porto Alegre: SAGAH, 2019. [Minha 
Biblioteca]�
TERUEL, E. C. HTML5: guia prático. 2. ed. São Paulo: 
Érica, 2014. [Minha Biblioteca].
	Introdução
	Usabilidade e design mobile
	Carregamento Progressivo
	Breakpoints
	Breakpoints com base no dispositivo
	Push notifications
	One hand operation
	Considerações finais
	Referências Bibliográficas & Consultadas