Design de UX para

Dispositivos Móveis:
Princípios Fundamentais
Design de UX para dispositivos móveis
● A adoção de smartphones e sua influência na vida das pessoas estão crescendo a uma
taxa exponencial.
● Em 2016, mais de 28% da população do mundo usava um smartphone.
● As estatísticas prevêem que o número de usuários globais de smartphones chegue a 6,1
bilhões até 2020.
Design de UX para dispositivos móveis
● Os smartphones se tornaram uma fonte de acesso a todos os tipos de informações,
porque são facilmente acessíveis a qualquer hora, em qualquer lugar.
● Além da comunicação e coleta de informações, serviços e recursos como bancos,
pedidos, rastreamento de assistência médica e até segurança em casa tornaram-se parte
da experiência do smartphone.
Design de UX para dispositivos móveis
● O mais importante a ser lembrado ao projetar um aplicativo móvel é garantir que
ele seja útil e intuitivo.
● Se o aplicativo não for útil, ele não terá um valor real para o usuário e ninguém terá
motivos para usá-lo.
● Se o aplicativo for útil, mas exigir muito tempo e esforço, as pessoas não se
incomodarão em aprender como usá-lo.
Design de UX para dispositivos móveis
● Um bom design de interface do usuário aborda esses dois problemas de design:
● Para serem úteis, os aplicativos móveis devem ser centrados no usuário. Os
usuários instalam seu aplicativo porque precisam resolver um problema. Pense no que
seus usuários tentarão alcançar e se concentre em seus objetivos principais /
remova todos os obstáculos que encontrarem.
● Você deve trazer clareza à sua interface do usuário. Não deve haver espaço para
confusão na sua interface do usuário.
Design de UX para dispositivos móveis
● Mas projetar uma experiência móvel utilizável e agradável é mais do que apenas uma
boa estética.
● Para provocar reações positivas, você precisa satisfazer os princípios básicos de
usabilidade do design de interface.
Design de UX para dispositivos móveis
● Aprendizagem: com que facilidade os usuários iniciantes concluem tarefas básicas.
● Eficiência: a rapidez com que os usuários executam tarefas básicas depois de
aprenderem o design.
● Memorabilidade: a capacidade dos usuários de se lembrar de como usar o sistema.
● Erros: a quantidade e a gravidade dos erros que os usuários cometem e com que
facilidade podem corrigi-los.
● Satisfação: Quão agradável foi a experiência de usar o design.
1 - Remover a desordem
● A atenção do usuário é um recurso precioso e deve ser alocado de acordo.
● A confusão de interface sobrecarrega o usuário com muita informação: cada botão,
imagem e linha de texto adicionados tornam a tela mais complicada.
1 - Remova a desordem
1 - Remova a desordem
● Há uma famosa citação de Antoine de Saint-Exupéry que diz:
● "A perfeição é alcançada quando não há mais o que tirar".
● É importante se livrar de qualquer coisa em um design para dispositivos móveis que
não seja absolutamente necessária, pois reduzir a desordem melhora a
compreensão.
1 - Remova a desordem
● Uma regra simples: uma ação principal por tela.
● Cada tela projetada para o aplicativo deve suportar uma única ação de valor real
para a pessoa que o usa.
● Isso facilita o aprendizado, o uso e a adição ou desenvolvimento quando necessário.
● Cem telas claras são preferíveis a uma única tela desordenada.
1 - Remova a desordem
● Veja o Uber, por exemplo.
● O Uber sabe que o objetivo do usuário que usa o aplicativo é pegar um táxi.
● O aplicativo não sobrecarrega o usuário com outras informações: ele detecta
automaticamente a localização dos usuários com base nos dados GEO e a única coisa
que os usuários precisam fazer é selecionar um local onde ele se encontra.
1 - Remova a desordem

● Uma regra simples: uma ação

principal por tela.

Uma das regras básicas do bom UX é

reduzir o esforço que os usuários
precisam fazer para conseguir o que
querem.
2 - Tornar a Navegação Intuitiva
● Ajudar os usuários a navegar deve ser uma alta prioridade para todos os
aplicativos.
● Uma boa navegação deve parecer uma mão invisível que guia o usuário ao longo
de sua jornada.
● Afinal, mesmo o recurso mais interessante ou o conteúdo mais atraente é inútil se as
pessoas não o encontrarem. Os princípios de boa navegação móvel são:
2 - Tornar a Navegação Intuitiva
● Os princípios de boa navegação móvel são:
● A navegação móvel deve ser coerente:
2 - Tornar a Navegação Intuitiva
● Os princípios de boa navegação móvel são:
● A navegação móvel deve ser consistente para o aplicativo:
● Não mova os controles de navegação para um novo local ou oculte-os em páginas
diferentes.
● Isso apenas desorienta o usuário.
2 - Tornar a Navegação Intuitiva
● Os princípios de boa navegação móvel são:
● A navegação móvel deve comunicar a localização atual:
● Falha ao indicar a localização atual é provavelmente o erro mais comum de se ver
nos menus de aplicativos.
● "Onde estou?" é uma das perguntas fundamentais que os usuários precisam responder
para navegar com sucesso.
2 - Tornar a Navegação Intuitiva
● A capacidade de aprendizado do seu design é essencial para o seu sucesso.
● Os usuários devem poder intuitivamente navegar pelo aplicativo por caminhos claros e
concluir todas as tarefas principais sem exigir explicações.
2 - Tornar a Navegação Intuitiva
● As jornadas do usuário devem ser lógicas o suficiente para que uma tarefa seja
realizada em um único aplicativo.
● Não faça com que os usuários tenham que alternar entre páginas e aplicativos para
fazer algo.
● Simplifique o processo e tenha todas as informações necessárias prontamente
disponíveis.
3 - Crie uma experiência perfeita
● Você não deve pensar em um design para dispositivos móveis isoladamente.
● Criar uma experiência perfeita em dispositivos móveis, computadores e tablets é
muito importante para seus usuários.
3 - Crie uma experiência perfeita
● Apple Music
3 - Crie uma experiência perfeita
● Veja o Apple Music, por exemplo.
● Você pode configurar uma lista de reprodução no seu Mac e ela estará disponível
instantaneamente no seu iPhone.
● A Apple reconhece que, embora o design do aplicativo móvel seja muito importante, a
criação de uma experiência perfeita no iPhone, no desktop e no iPad é tão
importante para os usuários.
4 - Projete alvos de toque amigáveis
● Alvos de toque menores são mais difíceis de atingir do que os maiores.
● Ao projetar interfaces para dispositivos móveis, é melhor aumentar seus objetivos o
suficiente para facilitar o acesso dos usuários.
4 - Projete alvos de toque amigáveis
● Crie controles que meçam o tamanho de 7 a 10 mm para que possam ser
precisamente tocados com um dedo.
● Esse alvo permite que o dedo do usuário se ajuste confortavelmente dentro do alvo.
● As bordas do alvo são visíveis quando o usuário toca nele.
● Isso fornece a eles um feedback visual claro de que estão atingindo o alvo com precisão.
● Verifique também se há uma boa quantidade de espaçamento entre os pontos de toque.
5 - O conteúdo do texto deve ser legível
● Quando comparados aos computadores de mesa, os smartphones possuem telas
relativamente pequenas, o que significa que um dos desafios do design para
dispositivos móveis é incluir muitas informações em uma pequena interface do usuário.

● Você pode ter a tentação de esmagar tudo para um design móvel na tentativa de
fornecer o máximo de informações possível.
● Mas você deve resistir à tentação.
5 - O conteúdo do texto deve ser legível
● Uma regra prática para dispositivos móveis: o texto deve ter pelo menos 11
pontos, para que seja legível a uma distância de visualização típica sem o zoom.
5 - O conteúdo do texto deve ser legível
● Melhore a legibilidade aumentando a altura da linha ou o espaçamento das letras.
● Um espaço em branco bom e generoso pode fazer com que algumas das interfaces
mais confusas pareçam convidativas e simples.
6 - Tornar os elementos da interface claramente
visíveis
● Você deve usar cores e contraste para ajudar os usuários a ver e interpretar seu
conteúdo.
● Escolha cores primárias, secundárias e de destaque para seu aplicativo que
suportam usabilidade.
● Garanta um contraste de cores suficiente entre os elementos para que usuários com
baixa visão possam ver e usar seu aplicativo.
6 - Tornar os elementos da interface claramente
visíveis
● Verifique se há amplo contraste entre a cor da fonte e o fundo, para que o texto
fique legível.
● O W3C recomenda as seguintes taxas de contraste para o corpo do texto e o texto da
imagem:
● O texto pequeno deve ter uma taxa de contraste de pelo menos 4,5: 1 no plano de
fundo.
● O texto grande (com 14 pontos em negrito / 18 pontos em regular e acima) deve ter
uma taxa de contraste de pelo menos 3: 1 no fundo.
6 - Tornar os elementos da interface claramente
visíveis
● O texto que
não atende às
recomendaçõ
es da taxa de
contraste de
cores é difícil
de ler em
segundo
plano.
6 - Tornar os elementos da interface claramente
visíveis
● É extremamente importante ter contraste suficiente no celular: os usuários
podem estar ao ar livre com baixo contraste na tela por causa da iluminação.
6 - Tornar os elementos da interface claramente
visíveis
● O cinza neutro desta página é agradável ao olhar em ambientes fechados, mas ao
ar livre não parece tão bom.
6 - Tornar os elementos da interface claramente
visíveis
● Ícones ou outros elementos críticos também devem usar as taxas de contraste
recomendadas acima.
7 - Projetar Controles com base na posição da
mão
● Steven Hoober, em sua pesquisa sobre o uso de dispositivos móveis, descobriu que
49% das pessoas confiam em um dedo para fazer as coisas em seus telefones.
7 - Projetar Controles com base na posição da
mão
● Na figura abaixo, o diagrama que aparece nas telas dos telefones celulares são gráficos
de alcance aproximados, nas quais as cores indicam quais áreas um usuário
pode alcançar com o polegar para interagir com a tela.
7 - Projetar Controles com base na posição da
mão
● Verde indica a área que um usuário pode alcançar facilmente; amarelo, uma área
que requer alongamento; e vermelho, uma área que exige que os usuários mudem
a maneira como estão segurando um dispositivo.
7 - Projetar Controles com base na posição da
mão
7 - Projetar Controles com base na posição da
mão
● A posição e a aderência das mãos devem influenciar o posicionamento dos
controles em um design móvel:
● É importante colocar no menu de nível superior, controles usados com frequência e
ações comuns na zona verde da tela, porque eles são alcançados confortavelmente com
interações de um polegar.
7 - Projetar Controles com base na posição da
mão
● Coloque ações negativas (como excluir ou apagar) na zona vermelha difícil de
alcançar, porque você não deseja que os usuários as toquem acidentalmente.
8 - Minimize a necessidade de digitação

● Mantenha os formulários o mais curto e simples possível, removendo todos os campos

desnecessários.
8 - Minimize a necessidade de digitação

● Use dados de preenchimento automático e personalizados, quando apropriado, para

que os usuários precisem inserir apenas o mínimo de informações.
9 - Teste seu Design

● Com muita frequência, um design para celular fica ótimo quando visualizado em uma
tela grande de área de trabalho, mas não funciona quase a metade quando é
testado em um celular real.
● Mesmo o UX mais minuciosamente considerado acabará por conter
alguma falha invisível quando colocado no mundo real.
9 - Teste seu Design

● É por isso que é tão importante testar seu aplicativo com usuários reais em uma
variedade de dispositivos móveis.
● Você deve pedir aos usuários reais que realizem tarefas regulares somente depois
de ver o desempenho realmente do design.
● Trate seu aplicativo como uma entidade em constante evolução, usando dados de
análises e feedback do usuário para melhorar constantemente a experiência.
9 - Teste seu Design

● É por isso que é tão importante testar seu aplicativo com usuários reais em uma
variedade de dispositivos móveis.
● Você deve pedir aos usuários reais que realizem tarefas regulares somente depois
de ver o desempenho realmente do design.
● Trate seu aplicativo como uma entidade em constante evolução, usando dados de
análises e feedback do usuário para melhorar constantemente a experiência.
10 - Priorização de conteúdo

● A atenção humana é muito curta.

● Tipo muito, muito curto.
● 8 segundos para ser exato.
● Isso torna extremamente importante atrair a atenção de seus usuários nos primeiros
segundos de interação com seus produtos.
10 - Priorização de conteúdo

● Exiba apenas o conteúdo e as funcionalidades essenciais que o usuário precisa.

● O espaço limitado disponível em uma tela pequena torna cada elemento adicional que
você adiciona impressionante aos seus usuários.
● O conteúdo secundário deve estar disponível através de um menu.
● As listas de menus, curtas ou longas, devem ter divulgação progressiva e terminologia
simples para não confundir seus usuários.
● Para reduzir ainda mais a desordem, use ícones em vez de texto sempre que possível.
● Priorize o conteúdo e lembre-se de que as notificações para novos conteúdos devem
aparecer sem interromper o conteúdo principal!
10 - Priorização de conteúdo
10 - Priorização de conteúdo

● Exiba apenas o conteúdo e as funcionalidades essenciais que o usuário precisa.

● O espaço limitado disponível em uma tela pequena torna cada elemento adicional que
você adiciona impressionante aos seus usuários.
● O conteúdo secundário deve estar disponível através de um menu.
● As listas de menus, curtas ou longas, devem ter divulgação progressiva e terminologia
simples para não confundir seus usuários.
● Para reduzir ainda mais a desordem, use ícones em vez de texto sempre que possível.
● Priorize o conteúdo e lembre-se de que as notificações para novos conteúdos devem
aparecer sem interromper o conteúdo principal!