Os Princpios de UX

para Aplicativos em
Dispositivos Mveis
Melhorando a Experincia do Usurio
e Otimizando Converses

Escrito Por: Stephen Griths

Publicado Em: abril de 2015
Os Princpios de UX para
Aplicativos em Dispositivos Mveis
Esse estudo apresenta a estruturao de converses
otimizadas, customizadas para aplicativos em dispositivos
mveis (sem considerar aplicativos de tablets).
Facilite a
Adote Use Retorne
O estudo dene os princpios e as consideraes-chave por Transao
exemplo, os aspectos importantes que devem ser
considerados no acesso de aplicativos em smartphones para
identicar o que e como melhorar a experincia do usurio,
Elimine obstculos Simplique Proporcione Self-Service,
otimizar converses e medir o desempenho do aplicativo de de utilizao decises o mximo Engajamento
maneira mais eciente. de converso de convenincia e Satisfao

Mesmo levando em conta que esse estudo pode auxiliar na Tela de abertura,
Dicas & Tcnicas Busca Carrinho Sua Conta
criao de um novo aplicativo, sua inteno a otimizao de
de Ativao
aplicativos existentes.
Informaes
Tela Inicial Produtos Senhas
Pessoais
& Navegao & Servios & Resgate
& Endereo

Cadastro/Log-In Entre Dispositivos Contedo

Pagamento
& Permisses & Oine & Design

Check-Out & Widgets &

Conrmao Noticaes

Higiene de Usabilidade:
o que fazer e o que no fazer

2
ndice

1. Adote 05 4. Retorne 34

Tela de Abertura, Dicas e Tcnicas de Ativao 06 Sua Conta 35

Tela Inicial & Navegao 08 Senhas & Resgate 36
Cadastro, Log-In & Permisses 11 Contedo & Design 37
Widgets & Noticaes 40
2. Use 15
5. Higiene de Usabilidade 42
Busca 16
Produtos & Servios 19 O que fazer 43
Entre Dispositivos & Oine 23 O que no fazer 48

3. Facilite a Transao 26

Carrinho 27
Informaes Pessoais & Endereo 29
Pagamento 30
Check-Out & Conrmao 32

3
Consideraes Revisores

Estudo Especializado: Categorias Excludas: Oliver Borm

Ao invs de derivado de testes de usabilidade,
esse estudo especializado foi proveniente: das
melhores prticas da UX para aplicativos; da
auditoria de aplicativos de clientes na Europa,
Oriente Mdio, frica e Amrica do Norte; das
linguagens visuais dos sistemas Android e iOS,
alm de diretrizes HCI; de pesquisa secundria;
etc.
Otimizando Converses:
O objetivo desse estudo ajudar empresas a
melhorarem/otimizarem a converso dos seus
aplicativos existentes direcionados a vendas,
reservas, etc.
Plataformas de Aplicativo:
As capacidades dos sistemas Android e iOS
foram as plataformas consideradas.
Variedade de Aplicativos:
Uma das complexidades no desenvolvimento de
princpios para aplicativos em dispositivos
mveis o fato de que aplicativos em qualquer
categoria podem apresentar uma variedade
maior do que sites mveis e, portanto, podem
exibir uma varivel muito maior entre o aplicativo
satisfazer um caso de utilizao de maneira mais
utilitria (ex.: busca) ou experiencial (ex.:
descoberta).
4
Devido variedade de categorias de
aplicativos e a necessidade de focar no
aspecto de converso, esse estudo excluiu
categorias com foco maior em engajamento,
(ex.: jogos, mdias sociais e mensagens.)
Aprofunde-se ou Pule:
Esse detalhado porm nada exaustivo
conjunto de princpios de UX para aplicativos
em smartphones pode ser lido por completo
ou de maneira seletiva (ex.: uma seo de EMEA
cada vez).
Mensurao:
Os KPIs e as mtricas destacadas no nal de
cada seo foram apresentados para indicar
o que voc poderia medir e estimular o Cemal Buyukgokcesu
debate para denir exatamente o que voc
deveria medir dentro do contexto especco
do seu negcio.
Lder de Desempenho Avanado, CSI EMEA
Jos Meijerhof
Especialista de Converses, CSI EMEA
Elmar Nubbemeyer
Especialista de Atribuies, CSI EMEA
Pawel Matkowski
Google Analytics e Expert de Produto, CSI
Morgane Gaudin
Especialista de Implementao de Solues
de Desempenho, CSI EMEA
Especialista de Converses, PerfX EMEA
Matt Brocklehurst
Gerente de Marketing de Produto, Reino
Unido
Richard Hyndman
Diretor de Interlocuo Escalvel EMEA
Nick Butcher
Interlocutor de Programao
Lina Lau
Gerente de Parceiros Estratgicos Online
APAC
 01. ADOTE

Elimine obstculos de utilizao

5
Telas de Abertura, Dicas
& Tcnicas de Ativao
O objetivo nesse estgio remover todos os
obstculos de utilizao e adeso do seu Dena as expectativas imediatamente garantindo que
aplicativo mvel.
Faa com que os usurios sintam-se engajados
pelo contedo/substncia o mais rpido possvel
para que eles possam utilizar, acessar e sentir o
valor do aplicativo para eles.
A primeira impresso conta, e a tela de abertura
(splash screen) oferece uma janela pequena, mas
crucial para engajar o usurio com a sua proposta.
Porm, nunca deixe os usurios esperando.
Opes de Dicas/Ajuda ou uma sequncia de
Tcnicas de Ativao s devem ser implementadas
se necessrio para no interromper os usurios
porm, quando utilizadas de maneira adequada,
essas funes podem guiar o usurio na sua
experincia inicial e adeso.
Quando perguntados se preferem clicar
diretamente para um aplicativo ou para
um site mvel de uma lista de resultados
de busca em um dispositivo mvel, um
nmero maior de pessoas prefere o aplicativo.
Aqui vai o motivo: aplicativos carregam mais
rpido do que sites mveis (46%).
App-Nsia no Reino Unido: A Necessidade
de Marketing de Reengajamento, 2015
6
O aplicativo parece carregar rapidamente
a tela de abertura carregue depressa, fazendo com
que o aplicativo parea rpido e com agilidade de
resposta. No perca o tempo dos usurios nesse
estgio crucial de adeso, antes mesmo deles
tentarem utilizar o seu aplicativo.
A tela de abertura consistente com a marca
(ex.: comunica a essncia da marca)
A tela de abertura (ou splash screen) deve engajar os
usurios e comunicar a essncia da marca, porm,
ela nunca deve deixar os usurios esperando.
Sempre coloque o usurio em controle e capaz de
executar a sua tarefa o mais rpido possvel.
Se o aplicativo oferece Dicas/Ajuda, essas
funes devem aparecer em contexto com
o que o usurio est fazendo
Se o usurio precisa aprender alguma coisa sobre o
aplicativo, mas no antes da sua primeira utilizao,
oferea dicas contextuais e ajuda em vez de uma
sequncia de Tcnicas de Ativao. Dicas e Ajuda
relevantes para o que o usurio est tentando fazer,
quando ele estiver fazendo, sero mais teis do
que ativaes genricas e interruptivas. Engaje os
usurios atravs de imagens, animaes e
interatividade para ajud-los a aprender utilizando o
aplicativo e apenas oferea dicas para tarefas
prioritrias ou difceis (elas no substituem um bom
design de UX). (Ver imagem 01)
imagem 01
Se o aplicativo oferece Tcnicas de Ativao,
a funo necessria por ser essencial para
a primeira utilizao do aplicativo MENSURAO
A sequncia de ativao s deve ser implementada
se for essencial e se as opes de Dicas/Ajuda forem
insucientes. Se utilizada, a sequncia s deve Taxa de Rejeio: voc quer reduzir esse
apresentar informaes de alta prioridade que o ndice (ex.: lanando casos em elementos/
usurio precisa saber para a primeira utilizao do pacotes carregados para entender motivos
aplicativo. Para engajar os usurios da mesma maneira de rejeio; rastreando erros de digitao
que as funes Dicas/Ajuda, evite mais do que 3 ou 4 do usurio, os quais so motivos cruciais
telas e benefcios e reduza o volume de texto. Conra para altas taxas de rejeio em aplicativos)
os dados analticos regularmente e se o uxo no
estiver funcionando, elimine! e considere outra Tempo de Usurio: se voc utilizar o Google
abordagem de design. O raciocnio por trs de Analytics, voc pode medir o tempo de
Tcnicas de Ativao : carregamento de pginas especcas
(em aplicativos Android e iOS)
O aplicativo est vazio e precisa da contribuio
do usurio para alimentar a base de dados para a No caso de Tcnicas de Ativao, voc
primeira utilizao. pode medir:
O aplicativo necessita de contribuies ou selees
personalizadas para a primeira utilizao. A % de usurios que completa a sequncia
O aplicativo tem funcionalidades complexas, como de ativao e chega tela inicial.
um aplicativo de produtividade.
O aplicativo depende de gestos escondidos ou A % de usurios que escolhe pular a
customizados, desconhecidos para a maioria dos sequncia.
usurios.
O aplicativo foi atualizado com novos recursos. O tempo decorrido entre as telas de
ativao.
Se Tcnicas de Ativao forem utilizadas, o usurio
pode escolher pul-las (coloque o usurio em controle)
Os usurios devem poder pular a sequncia de
ativao se no quiserem ser interrompidos por ela
ou se no perceberem o benefcio de passar por todas
as telas. Coloque o usurio em controle do seu tempo
e experincia inicial com o aplicativo. As Tcnicas de
image 02
Ativao deveriam aparecer somente na primeira
utilizao do aplicativo ou at o cadastro do usurio.

7
Tela Inicial & Navegao
A tela inicial de um aplicativo deve proporcionar ao
usurio jornada(s) e funcionalidades para completar
suas tarefas prioritrias, alm de proporcionar
contedo que atende as suas necessidades e
expectativas. A navegao deve ser clara, com foco
na tarefa e lgica (ex.: controles na tela sugerem a
melhor utilizao). O local de navegao (ex.: barra
do menu) tambm deve ser consistente por todo o
aplicativo. Apenas a navegao e o contedo
primrio devem ser visveis na congurao padro,
com o contedo secundrio escondido porm,
disponvel atravs de cliques e deslizes fora da tela.
Quando perguntados se preferem clicar
diretamente para um aplicativo ou para um site
mvel de uma lista de resultados de busca em
um dispositivo mvel, um nmero maior de
pessoas prefere o aplicativo. Aqui vai o motivo:
Aplicativos so mais simples de navegar do que
sites mveis (50%).
App-Nsia no Reino Unido: A Necessidade
de Marketing de Reengajamento, 2015
Logos de marcas so utilizados de forma
sutil e escassa
(o espao de tela de aplicativos limitado)
8
Aplicativos no so sites e NO precisam de um
logo de marca em todas as telas que fazem o
link para a tela inicial. O espao de tela de
aplicativos limitado. E os usurios j zeram o
esforo de baixar ento eles j conhecem a
sua marca e utilizar o seu aplicativo, portanto,
reforce a sua identidade de maneira sutil. Por
exemplo, em vez de usar o nome completo da
sua marca, utilize um cone ou uma cor; faa a
aplicao de maneira escassa, como, por
exemplo, apenas na tela de abertura e inicial.
O propsito e a jornada prioritria do
usurio so claros (crtico para novas
marcas)
Para os usurios que j zerem o esforo de
baixar o seu aplicativo, voc agora precisa
satisfazer as suas expectativas sobre o que a sua
marca e proposta pretendem entregar por
exemplo, comunicando as jornadas prioritrias e
as necessidades atendidas que o seu
pblico-alvo ter interesse em participar. (Ver
imagem 03)
imagem 03
Razes para comprar/reservar so claras
(para estimular utilizao e converses)
Isso vale para todas as marcas, sejam conhecidas
ou desconhecidas. Marcas desconhecidas precisam
apresentar motivos para os usurios as adotarem
e a sua nova proposta, enquanto marcas conhecidas
precisam se posicionar e se destacar entre os seus
concorrentes. Razes para acreditar podem ser
relacionadas a aspectos como: preo, descontos,
recursos, realizao, atendimento ao consumidor,
mercado de luxo, tradio, etc.
Design simples, contedo intenso.
Edward Tufte
Apenas o contedo e as funcionalidades
primrias devem aparecer na tela padro
(todo contedo secundrio est fora da tela
e disponvel atravs do menu)
Os usurios no devem ser apresentados a um
aplicativo que uma rplica do site da marca
ou que contm muito contedo e funcionalidades
na tela padro. Aplicativos devem ser claros e as
jornadas/tarefas devem ser bvias, portanto, a marca
deve priorizar o contedo e as funcionalidades
primrias e colocar todo o resto fora da tela, (ex.:
acessvel com um deslize do menu, acima, do lado
ou abaixo da tela). (Ver imagem 04)
A gaveta do menu deve permanecer acessvel
em todos os nveis do aplicativo
(possvel exceo: pgina de check-out
de eCommerce)
9
O usurio deve poder clicar em um cone de
gaveta de menu visvel ou deslizar na tela para
revelar a lista do menu em todos os nveis do
aplicativo (exceto, possivelmente, em uma
pgina de check-out de eCommerce, a qual
permanece em quarentena) para garantir a
rpida navegao. A navegao atravs do
menu em todos os nveis essencial para
aplicativos que tm estruturas profundas ou
complicadas, como mercados de varejo ou
criadores de contedo.
Se o aplicativo utiliza uma gaveta de menu,
ela deve ser apresentada na primeira utilizao
(atravs de uma dica ou abrindo por completo)
Na primeira utilizao do aplicativo, a gaveta de
menu se o aplicativo utilizar esse sistema pode
ser revelada de maneira padronizada para apresentar
a variedade de contedo e a organizao antes que
o usurio inicie a navegao. Uma alternativa
apresentar uma dica informando que existe uma
gaveta de menu disponvel, porm fora da tela por
exemplo, mostrando a gaveta rapidamente e
escondendo na sequncia ou atravs da abertura
e fechamento sutil da gaveta de menu.
Em aplicativos Android, a barra de aplicativos
e barra Tab devem estar localizadas no topo
da tela (no no nal)
No padro Android, a barra de aplicativos (menu)
e a barra Tab so apresentadas no topo da tela.
Se as barras forem expostas no nal da tela onde
o Android apresenta controles de navegao do
sistema elas podem gerar confuso e prejudicar
a navegao.
image 04
Pginas longas do aplicativo no devem
ser um beco sem sada
(ex.: para que o usurio continue descobrindo
e explorando)
Se o seu aplicativo tem longas pginas de contedo,
tenha certeza de que quando os usurios chegarem
ao nal de pgina, eles continuem descobrindo
e explorando e no encontrem um beco sem sada,
o que faz com que eles abandonem o aplicativo.
Por exemplo, no nal de uma pgina longa, seu
aplicativo pode oferecer:
Um boto de voltar para o TOPO.
Um campo de busca se o mesmo foi apresentado
no topo da tela.
Poucas opes de navegao para estimular
os usurios a continuarem explorando.
Ou voc pode proporcionar uma tela de scroll
innito, utilizada por aplicativos com foco em
engajamento (ex.: contedo social ou de mensagens).
Essa opo tambm utilizada por alguns aplicativos
de eCommerce para apresentar itens como parte do
contedo em modo stream.
A lista do menu pode ser curta (ex.: at 7 itens)
ou mais longa com sees claras
Existem diversas maneiras de criar uma lista de
menu, mas todos devem ser claros para o pblico-alvo
do aplicativo. Uma lista curta e clara o menu
padro. Outra alternativa um menu com mais itens
separados por sees claras, possivelmente
identicadas para o rpido entendimento do usurio.
Por exemplo, aplicativos de varejo podem conter
as seguintes sees de menu (e links): Compre
(por sexo, departamento, promoes, etc.),
Conta (carrinho, detalhes, log-out, etc.).
(Ver imagem 05)
10
Terminologia bvia da lista do menu
para o pblico-alvo
(os menus no devem conter termos que os
seus usurios no entendero)
Os usurios precisam se identicar com
termos/terminologia do menu para que eles
possam navegar para a seo do aplicativo que
precisam o mais rpido possvel. Alm disso,
ordene a lista do menu com base em
popularidade ou outro sistema que ser
compreendido e valorizado pelos usurios.
Menus com termos que requerem conhecimento
sobre o negcio ou que tentam combinar termos
literais e metafricos, por exemplo, podem
confundir os usurios e aumentar o ndice de
rejeio.
Carrossis so bvios de navegar
(cuidado, a maioria no !)
Carrossis so to problemticos em aplicativos
quanto em sites, onde o nvel de desistncia de
98% entre a primeira e a segunda tela no
raro (fonte: Erik Runyon). Os carrossis podem
ser pontos cegos onde as promoes so
raramente acessadas. Isso dito, se o carrossel
for o mtodo de interao adequado para o seu
aplicativo, desenvolva-o com cuidado e
alavanque os padres de design mvel que os
usurios esto acostumados, apresentados
pelos seus sistemas de operao. Ex.: Nos
sistemas Android e iOS um conjunto de
pontinhos indica uma srie de imagens
horizontais deslizveis.
imagem 05
O usurio pode deslizar horizontalmente
para a rpida navegao lateral
Um aplicativo mvel com timo design permite
que os usurios rapidamente deslizem para
navegar lateralmente para a prxima tela, ao
invs de serem forados a navegar de maneira
hierrquica (formato pogo de cima para baixo).
MENSURAO
Taxa de Rejeio: (para mais detalhes, veja
Tela de Abertura, Dicas & Tcnicas de
Ativao)
Tempo na Tela: deveria ser mnimo para
indicar que os usurios encontraram o que
estavam buscando rapidamente e
navegaram at o item desejado
Aes dos Usurios: analise o mapa de
cliques (se disponvel) para ver no que os
usurios esto clicando. Ou, analise os
relatrios de navegao (relatrio de
prxima tela) para ver qual contedo faz
mais sucesso.
% de usurios que navegaram para a
prxima tela no carrossel (se o carrossel for
utilizado)
Erros: o rastreamento e limitao de erros
no aplicativo (por aplicativo por
dispositivo/OS) uma questo chave que a
maioria dos produtos analticos para
aplicativos oferece.
11
Cadastro, Log-In
e Permisses outro campo adicional, como nome de usurio,
senha ou log-in atravs de uma rede social).
Um dos grandes pontos de diferena entre
Mas, se o seu aplicativo depende do cadastro
aplicativos mveis e sites mveis que os
do usurio para agregar valor ex.: com contedo
aplicativos permitem que os usurios se
personalizado, servios on-demand, ricos recursos
mantenham logados por mais tempo (eliminando
sociais, etc. voc precisar apresentar convincentes
o esforo de log-in manual e erros), recebendo os
armaes de benefcios para impulsionar adeso
benefcios do nvel de convenincia e
e cadastro. (Ver imagem 06)
personalizao, os quais so apenas possveis por
conta de um estado de log-in prolongado, derivado
de aplicativos que armazenam e atuam com base
nas suas informaes, comportamentos e histrico
de transaes. Para proporcionar uma experincia
para o usurio com o menor nmero de barreiras
para a converso, os aplicativos mveis devem:
Proporcionar uma jornada sem a
necessidade de log-in.
Solicitar o cadastro do usurio apenas
quando ele agrega valor e mesmo assim...
Solicitar o menor nmero de dados
possvel.
Apresentar armaes claras de
benefcios.
O sistema deveria tratar todas as
contribuies do usurio como sagradas.
Jef Raskin
O cadastro do usurio no aplicativo rpido e
as armaes de benefcios so convincentes
O cadastro um obstculo para a adeso. Se voc
tem um aplicativo de eCommerce e quer que os
usurios se cadastrem, tente capturar a grande
maioria dos seus dados durante o primeiro imagem 06
check-out (alm de qualquer
O cadastro do usurio em aplicativos que
requerem dados delicados/valiosos rpido
e as armaes de benefcios so convincentes
(ex.: aplicativos de servios nanceiros ou fornecedores
de histrico de sade)
O cadastro uma obrigao conhecida para aplicativos
em vertentes altamente regulamentadas (ex.: servios
nanceiros) ou para aqueles que armazenam dados
extremamente delicados (ex.: histricos de sade
pessoais). Esses aplicativos tambm devem otimizar o
tempo de cadastro, estimul-lo com base em
armaes de benefcios e proporcionar o nvel de
segurana que os usurios esperam daqueles que
solicitam uma deciso de risco/benefcio.

Se o aplicativo solicita o cadastro, o usurio

pode escolher continuar como visitante
(o usurio est em controle)
O usurio deve poder ignorar a opo de cadastro e
continuar como visitante, onde ele ter apossibilidade
de testar e avaliar o valor do aplicativo antes de se
comprometer com o cadastramento. Isso ainda
mais importante para aplicativos de marcas
desconhecidas, ou aplicativos que oferecem contedo
engajador e que dependem da visualizao dos
usurios antes que eles tomem a deciso de seguir
com o cadastro. Sempre coloque o usurio em
controle do seu tempo e da sua experincia inicial
com o aplicativo. (Ver imagem 07)
imagem 07 imagem 08
Se o cadastro no aplicativo for obrigatrio,
o usurio pode escolher uma demonstrao
primeiro (o usurio est em controle) do aplicativo antes de se comprometer com o antes que eles tomem a deciso de seguir com o
cadastramento. Isso ainda mais importante cadastro. Sempre coloque o usurio em controle
O usurio deve poder ignorar a opo de para aplicativos de marcas desconhecidas, ou do seu tempo e da sua experincia inicial com o
cadastro e continuar como visitante, onde ele aplicativos que oferecem contedo engajador aplicativo. (Ver imagem 08)
ter a possibilidade de testar e avaliar o valor e que dependem da visualizao dos usurios

12
O usurio de primeira viagem tem vrias
opes de cadastro
(ex.: nome de usurio/senha e cadastro atravs
de redes sociais)
Os usurios devem ser apresentados a diversas
opes de cadastro, como nome de usurio/senha
e cadastro atravs de redes sociais. Isso porque
enquanto alguns usurios podem preferir a
abordagem mais rpida de cadastro atravs de
mdias sociais (ex.: atravs do G+, Facebook ou
Twitter), outros podem preferir manter seus pers
sociais separados e outros ainda podem nem ser
consumidores de redes sociais. (Ver imagem 09)
Os usurios podem selecionar para revelar
ou esconder a senha ao digitarem durante
o cadastro ou log-in
(ex.: ao clicarem no controle de revelar ou esconder)
D aos usurios a opo de rapidamente
selecionarem o controle que revela ou esconde
a senha quando esto digitando. Isso reduzir o
nmero de erros por preenchimento de senha
durante os processos de cadastro e log-in. (Ver
imagem 09)
Quando perguntados se preferem clicar
diretamente para um aplicativo ou para um
site mvel de uma lista de resultados de busca
em um dispositivo mvel, um nmero maior
de pessoas prefere o aplicativo. Aqui vai o
motivo: Os aplicativos que eu j instalei tm
os meus dados de log-in pr-armazenados
e otimizam o meu tempo (51%).
App-Nsia no Reino Unido: A Necessidade
imagem 09
de Marketing de Reengajamento, 2015
13
Usurios recorrentes contam com o log-in
automtico no aplicativo
Os usurios no devem ter que fazer o log-in toda vez
que acessarem o aplicativo aps a concluso do
cadastro porque uma das grandes diferenas entre
um site e um aplicativo que este oferece uma
experincia prolongada para proporcionar
convenincia e personalizao contnua. Uma base
persistente de usurios logados permite o
rastreamento de converses atravs de diversos
dispositivos. As excees de log-in prolongados so
em aplicativos de vertentes regulamentadas (ex.:
servios nanceiros) ou aqueles que armazenam
dados extremamente delicados (ex.: histricos de
sade pessoais).
A opo Touch ID oferecida para usurios de
iPhone (5S e acima) como uma forma conveniente
de log-in
Empresas podem implementar o Touch ID
(reconhecimento de impresso digital) para permitir
que os usurios do sistema iOS (verso 5S e acima)
faam o log-in em aplicativos de forma mais
conveniente, como usurios do Evernote Premium,
que tem acesso a uma senha com compatibilidade
Touch ID. (Ver imagem 10)
O aplicativo solicita permisses para o usurio
e explica os motivos por trs disso
(e os usurios percebem o benefcio)
Apenas pea por permisses que permitem que o seu
aplicativo agregue valor ao usurio; pea no momento
adequado (em contexto com o que o usurio est
fazendo) e com uma clara armao de benefcio. Por
exemplo, pea permisso para receber a localizao
atual de um usurio quando ele iniciar uma busca ou
servio:
- A ACME gostaria de utilizar a sua localizao atual
para ajud-lo a lembrar dos eventos. (Ver imagem 11)
 MENSURAO

# de cadastro criados e % de cada

opo (ex.: manual, opo de rede
social, etc.)

% de opes de cadastro escolhidas

(ex.: manual, opo de rede social, Touch
ID, etc.)

% de usurios que escolhem continuar

como visitantes

% de usurios que negam permisso

para acessar recursos do smartphone
(ex.: localizao, lista de contatos, etc.)

imagem 10 imagem 11

14
 02. Use

Simplique decises
de converso

15

A tecnologia mvel transformadora.
Conforme a nossa porcentagem de clientes
adotando a tecnologia mvel continua
crescendo, a plataforma mvel no pode
simplesmente ser um conjunto de recursos
ou produtos. E ns acreditamos que com
base no uso criativo de funes e design,
possvel entregar 100% aos consumidores.
Paul Cousineau, Diretor de Compras
Mveis, Amazon.com, Posio n.1
de Varejistas Online no 2015 Mobile 500
Porcentagem de usurios de aplicativos
de varejo que engajaram nos seguintes
tipos de atividades nos ltimos 30 dias:
Fazer uma compra online (58%);
Procurar informaes sobre um
produto/servio especco (56%);
Navegao (54%); Fazer uma compra
o-line (35%); Procurar por algo por
perto (35%); Encontrar opinies sobre
resenhas de outros (34%); Administrar
ou conferir a minha conta (21%).
Estudo de Consumidores de Aplicativos
Mveis nos EUA, 2014, Google/Ipsos
MediaCT
16
Busca
O foco nesse estgio permitir que as pessoas ser um call-to-action para o usurio e pode
utilizem o seu aplicativo da maneira que ele foi esclarecer o que digitar (ex.: produto, marca,
intencionado. Uma tima ferramenta de busca categoria, nmero de identicao, etc). (Ver
ajudar os usurios a encontrarem o que esto imagem 12)
buscando de maneira rpida e fcil, atingindo o
objetivo de satisfazer suas necessidades e
impulsionar o ndice de converso. Na nossa
experincia, a busca em aplicativos apresenta um
nvel de converso muito mais alto do que a
utilizao sem busca, reetindo a inteno maior
do consumidor. Existem diversas maneiras de
permitir a busca, de palavras-chave a leitura
ptica do produto at buscas por imagem.
47% dos participantes preferem aplicativos
versus um site mvel quando buscam
informaes rpidas.
App-Nsia no Reino Unido: A Necessidade
de Marketing de Reengajamento, 2015
A opo de busca deve ser destacada
(ex.: no topo da tela)
Se a busca for uma funo primria do seu aplicativo,
destaque-a, j que esse recurso pode ser a rota mais
rpida de descoberta para os usurios com alta
inteno de converso. Aplicativos de eCommerce
devem apresentar o campo de busca no topo da sua
tela inicial (e se a tela inicial for comprida, novamente
no nal). Para aplicativos com inventrios gigantescos,
a apresentao do campo de busca na formatao
padro avalizaria sua utilizao bvia e rpida. Alm imagem 12
disso, proporcione um aviso para buscar, o qual pode
 No sistema Android, a busca est na barra de
aplicativos no topo da tela.
No sistema iOS, a busca pode ter uma barra
adicional de escopo que permite que os usurios
rapidamente selecionem o escopo da busca, ex.: com
base em critrios claramente denidos ou categorias
(porm, isso no substitui uma boa arquitetura de
informao e design de UX).
Sugestes automticas so utilizadas
(para reduzir o tamanho do texto e oferecer
resultados imediatos)
Oferea sugestes automticas (ou resultados de
textos predeterminados) o mais rpido possvel,
como, por exemplo, depois que o terceiro caractere
for digitado, para agregar valor imediato e reduzir os
esforos de digitao dos usurios (e erros que eles
poderiam cometer em pequenos teclados com
dedos gordinhos). (Ver imagem 13)
imagem 13
17
Os primeiros resultados de busca so
altamente relevantes
(o mercado mvel imobilirio limitado!)
Levando em conta que a tela de um smartphone
apresenta limitaes no nmero de resultados que
ela pode apresentar sem a necessidade de navegar
para cima ou para baixo, tenha certeza de que o
usurio ter acesso a um conjunto de 3 a 5
resultados altamente relevantes como congurao
padro; apenas depois desses resultados que
haver a necessidade de navegao. Como uma
atividade contnua, voc deveria checar a qualidade
dos resultados de busca regularmente para as
buscas mais recorrentes no seu aplicativo e ajustar
o ranking se necessrio.
Oferea alternativas quando no houverem
resultados de busca (nada de becos sem sada)
Evite apresentar um beco sem sada para os usurios
durante a experincia quando a busca no
apresentar nenhum resultado. Oferea opes, (ex.:
na reserva de voos, sugira outros aeroportos; na
locao de veculos, sugira outras frotas; no varejo,
sugira produtos ou categorias alternativas). Para
ajudar o usurio ainda mais, voc pode implementar
o recurso de busca inteligente, o qual analisa termos
escritos no singular, plural e erros de ortograa, etc.
O usurio pode facilmente classicar os
resultados de busca
Oferea opes de classicao para os usurios
relevantes a busca. No esconda o recurso de
classicao dentro do recurso de ltro essas so
duas tarefas diferentes.
O usurio pode facilmente ltrar os resultados
de busca
Oferea opes de ltro para os usurios relevantes a
busca e permita que eles selecionem/no selecionem
diversas opes toda vez que aplicarem o ltro aos
resultados.
 As buscas recentes so apresentadas
(para acelerar a experincia)
Os aplicativos devem armazenar todas as
interaes, inclusive buscas recentes, para oferecer
esses dados para o usurio da prxima vez que ele
conduzir uma busca. Isso benecia o usurio uma
vez que economiza o seu tempo e esforo na busca
do mesmo item e melhora a sua experincia como
um todo. Esse ponto especialmente importante
para aplicativos de viagens, onde os usurios
normalmente repetem as mesmas buscas e teriam
um enorme benefcio.
Dados de formulrios de reserva j esto
pr-preenchidos com dados sugeridos
(ex.: um formulrio de restaurante)
Pr-preencha automaticamente os dados em um
formulrio de reserva com dados sugeridos, os
quais geralmente estaro certos para o usurio, e
torne o processo ainda mais conveniente. Por
exemplo:
Dados sugeridos para reservas em restaurantes:
Mesa Para (2), Quando (Hoje), Horrio (19:00), Onde
(Localizao Atual), etc. (Ver imagem 14)
MENSURAO
Utilizao de busca no site: % de visitas
com busca no site
Relevncia e preciso da busca: rastreie
para analisar se os resultados da busca
foram precisos ou se o usurio teve que
refazer a busca com um termo similar
Compare o que as pessoas esto
buscando em dispositivos mveis e em
dispositivos desktop; otimize com base
nas diferenas.
Analise os ndices de desistncia com
base nas buscas por termo de busca
para descobrir resultados de baixa
qualidade ou gaps no seu
inventrio/oferta de produto.

Dados sugeridos para reservas em hotis: Local

(Cidade Atual), Data de Check-In (Hoje), Data de
Check-Out (Amanh), Hspedes por Quarto (2), etc.

image 14

18
Produtos & Servios

As telas de produto so onde os usurios fazem A imagem do produto principal aparece

suas decises de converso-chave, ex.: adicionar acima da dobra
ao carrinho, adicionar lista de desejos, reservar (para fazer o merchandising de suas ofertas
agora, ligar agora, preencher o formulrio, etc. prioritrias)
Boas telas de produto em aplicativos permitem No faa os usurios navegarem para baixo
que os usurios concluam a transao para terem acesso imagem principal de um
rapidamente, salvem os dados para mais tarde e produto (a primeira e melhor imagem). Podem
compartilhem os itens sobre os quais eles devem haver outras imagens abaixo que os usurios
tomar alguma deciso. podem navegar para visualizar. (Ver imagem 15)
De longe a maior oportunidade de receita
na economia de aplicativos at 2017 o
eCommerce. As telas maiores dos smartphones,
a otimizao do uxo de compra mvel na web
e os aplicativos nativos customizados j tm
mudado esse comportamento. A erradicao
de questes de pagamento acelerar ainda mais
a transio para o comrcio mvel.
Vision Mobile, Previses da Economia de
Aplicativos, 2014-2017
A descrio do produto fcil de escanear
(encontrar informaes especcas) e ler de
relance (entender o escopo geral)
As descries dos produtos devem ser de alta
qualidade (pense de maneira concisa) e
apresentadas de maneira clara como, por exemplo,
uma lista para permitir a leitura rpida. Os recursos
principais ou dimenses de compra do produto
devem ser o foco para estimular os usurios a
clicarem no boto de detalhes sobre o produto
(para mais informaes) ou adicionarem ao imagem 15
carrinho.
19
Imagens de produtos podem rapidamente
ser deslizadas de maneira horizontal
(e no esto amontoadas em uma coluna
vertical)
Os usurios devem rapidamente poder
deslizar atravs das imagens de maneira
horizontal e no ter que navegar para baixo
para visualizar diversas imagens.
Imagens, vdeos e outras peas de produtos
so de alta qualidade
(para assegurar novos usurios)
Online e no prprio aplicativo, suas imagens,
vdeos e outras peas so o produto, j que
no h nenhuma outra dimenso fsica do
mesmo. Logo, elas deveriam ser de alta
qualidade para maximizar o impacto da
mercadoria e do inventrio, chamar a ateno
de usurios com o hbito de olhar de relance
e impulsionar call-to-actions.
Peas grcas para o sistema Android
devem ser ntidas: sempre utilize XHDPI (e
agora XXHDPI).
O sistema iOS recomenda que voc utilize
peas @3x para o iPhone 6 Plus e peas @2x
para outros dispositivos iOS de alta resoluo.
As imagens permitem a funo zoom
(e permanecem em alta qualidade)
Os usurios devem poder acionar o zoom da
imagem de um produto para analis-lo com
mais detalhes clicando duas vezes ou
selecionando o boto de zoom. As imagens na
funo zoom devem permanecer em alta
qualidade. E para no ter que fazer o usurio
pensar, informe a ao necessria, )ex.: Clique
duas vezes para acionar o zoom).
20
A autoajuda est se tornado a nova
moda. Um em cada trs consumidores
utilizam seus smartphones para encontrar
informao em vez de perguntar para
os vendedores nas lojas.
Pesquisa sobre Dispositivos Mveis nas
Lojas, 2013, Google
Contedo til sobre o produto fcil de
encontrar e refora conana
(ex.: detalhes sobre o produto, especicaes,
perguntas frequentes)
Os usurios esperam ver detalhes sobre o
produto e a profundidade do contedo
apresentado deve ser adequada para cada
tipo de produto para que o usurio possa
fazer a deciso de converso. Especicaes
devem estar disponveis para produtos que os
consumidores precisariam ver para tomar
uma deciso de compra, ex.: itens de alto valor
(como carros), itens tcnicos (como
computadores), itens complicados (como uma
aplice de seguro), etc.
Resenhas ou depoimentos de consumidores
so fceis de encontrar e reforam conana
Nesse ponto-chave de converso, os usurios
podem precisar fazer uma pesquisa adicional
sobre o produto ou acessar informaes
relacionadas antes de tomar uma deciso.
Esse tipo de contedo self-service pode existir
no formato de perguntas frequentes, uma
seo de ajuda no prprio aplicativo, diretrizes importante na tela e seus olhos deveriam
de dimenses sobrepostas na tela no produto,
etc.
28% dos consumidores abandonaro
os seus carrinhos de compra se forem
apresentadost com custos inesperados
de frete.
VWO, Pesquisa eCommerce, 2014
Os custos so transparentes
(incluindo os impostos)
Os itens devem claramente apresentar todos
os custos e quaisquer impostos relacionados
para reforar o nvel de conana dos
usurios. Custos inesperados de frete,
impostos, etc., so os motivos principais para
os usurios abandonarem o funil de compra.
Informaes sobre o estoque/inventrio
local so proporcionadas
(para compradores impulsivos ou de ltima hora)
A disponibilidade de estoque ou inventrio (ex.:
quartos de hotel) importante para usurios de
aplicativos, j que eles so os usurios mais
propensos a comprar ou reservar no ltimo
minuto ou por impulso e voc precisa satisfazer
essa urgncia. A disponibilidade local permite
que os usurios comprem/reservem por perto e
retirem/cheguem de forma imediata. (Ver
imagem 16)
O boto call-to-action primrio o elemento
mais importante na tela e o boto call-to-action
secundrio deve estar perto do primeiro
O CTA primrio deve ser o boto mais
naturalmente visualiz-lo, ex.: Adicionar ao
Carrinho, Reservar Agora, Enviar Formulrio,
etc. Alm disso, o CTA secundrio deve estar
perto do primeiro, para satisfazer
comportamentos entre dispositivos
(microconverses), atravs de recursos como
Enviar Produto por e-mail, Adicionar Lista de
Desejos, etc. (Ver imagem 17)

O usurio pode ver produtos ou categorias

sugeridas
(ex.: produtos similares ou recomendados)
Apresente um conjunto de produtos
relacionados ou recomendados para aquele
que o usurio est analisando. Produtos
relacionados so valiosos para o usurio
porque entram no contexto do que eles esto
considerando; alm disso, so valiosos para a
empresa porque podem aumentar o valor
mdio do carrinho. (Ver imagem 17)

O usurio pode ver o smbolo do carrinho

ou de reserva de forma clara e contnua
O smbolo do carrinho ou de reserva na barra
principal de navegao de fcil acesso
(normalmente no topo da tela, mas nem
sempre) e lembra os usurios de seu
contedo e custo (pode ser por item e/ou o
valor total). Esse smbolo proporciona
conana e a simples edio do seu contedo.

imagem 16 imagem 17

21
 MENSURAO
Separe as telas de produto em quatro grupos
com base no volume de trfego que elas
recebem (alto ou baixo) e o seu ndice de
converso (alto ou baixo). Para:
1. Trfego baixo/CvR alto (ndice de converso):
estimule mais trco!
2. Trfego alto/CvR alto: continue promovendo
(ou faa ainda mais) e garanta que a sua oferta
permanea disponvel.
3. Trfegobaixo/CvR baixo: procure por algumas
estrelas em ascenso e promova-as.
4. Trfego alto/CvR baixo: comece a investigar!
As imagens dos produtos so de alta qualidade?
O preo competitivo? Existem produtos em
estoque? As ofertas tm boas descries? Etc.
22
Mea tambm:
O nmero de resenhas ou depoimentos
de consumidores visualizados (e para
quais produtos/categorias)
O nmero e tipo de contedo til
visualizado
O nmero de termos visualizados (e
quais, ex.: entrega, devolues,
cancelamentos, etc.)
O nmero de checagem de
estoque/inventrio e aquelas que
geraram converses
O nmero de checagem de
estoque/inventrio e aquelas que
geraram converses
O nmero e os tipos de produtos
recomendados e relacionados
visualizados e aqueles que geraram
converses (ndice de Produto para
Carrinho)
Entre Dispositivos e Oine
Cada vez mais, os consumidores pesquisam e
consideram produtos e servios entre diversos
pontos de contato dispositivos, aplicativos e
browsers alm de pontos de contato oine,
como lojas de telefonia e varejo. Portanto, de
extrema importncia que as marcas permitam
que os usurios faam a transio do seu
aplicativo no smartphone para o prximo ponto
de contato online ou oine como parte da
jornada perfeita rumo a converso. Isso gerar
converses entre dispositivos e oine e satisfar
os comportamentos dos consumidores de hoje
em dia.
Smartphones esto transformando a
experincia de compras na loja. 90%
dos consumidores com smartphones
utilizam os seus dispositivos para executar
atividades pr-compras. 84% usam seus
dispositivos para auxlio com a compra na
prpria loja.
Pesquisa sobre Dispositivos Mveis
nas Lojas, 2013, Google
O escaneamento do produto ou o recurso
de busca por imagens fcil de encontrar
(ex.: para encontrar detalhes do produto
escaneando um cdigo de barras ou buscando
atravs de uma imagem)
Alguns usurios querem encontrar detalhes
sobre o produto escaneando os itens na loja
(atravs da cmera e escaneando um cdigo de
23
barras ou QR Code), ou atravs de buscas por
uma imagem (que eles fotografaram ou zeram
o upload). Eles devem poder encontrar esses
recursos e ativ-los rapidamente da tela inicial,
do menu, do cone/campo de busca ou da tela
de busca. Esse recurso extremamente
conveniente para os usurios, uma vez que
reduz a necessidade de engajar com a equipe de
vendas ou buscar atravs de palavras-chave
alm de ser mais uma rota para a converso. O
benefcio para empresas sem presena oine
a possibilidade de engajar com o usurio sem a
necessidade de uma loja fsica. O benefcio para
um varejista multicanal a possibilidade de
oferecer um showroom para os usurios e
convert-los. (Ver imagem 18)
possvel salvar um produto ou reserva
(ex.: para uma lista de desejos, favoritos ou conta
pessoal)
Alguns usurios escolhem no converter em uma
nica sesso enquanto outros no tem nenhuma
inteno de converso para os quais a habilidade
de salvar o seu produto ou reserva se torna um
recurso importante (para que eles possam
continuar com a compra ou reserva em um outro
momento). (Ver imagem 19)
52% de todos os compartilhamentos feito
atravs de smartphones.
ShareThis, Relatrio de Tendncias de
Compartilhamento do Consumidor, Q4 2014
imagem 18
 Lista de desejos, favoritos e o carrinho esto
sincronizados com a conta pessoal do usurio
(para acesso em um prximo momento ou em
qualquer dispositivo/browser)
Os usurios devem poder alternar entre o
aplicativo no seu smartphone e continuar a busca,
compra ou reserva em qualquer outro
dispositivo/browser, com todos os itens
sincronizados no seu carrinho, lista de desejos ou
favoritos, etc.

O produto pode ser facilmente compartilhado

(ex.: atravs de e-mail, G+, Facebook, Twitter,
LinkedIn)
Permita que os usurios compartilhem por meio
de e-mail ou rede social um item com os outros
para maiores consideraes e para auxili-los na
tomada de deciso de compra. Algumas categorias
requerem mais pesquisa do que outras e alguns
usurios gostam de recomendaes, enquanto
outros precisam conversar com seus amigos e
familiares. Tente utilizar a funcionalidade de
compartilhamento nativa da plataforma nos
sistemas Android e iOS.

O usurio pode clicar para ligar no prprio

aplicativo
Os usurios podem facilmente clicar para ligar
(CTC) para a marca diretamente do aplicativo.
Quanto mais complicado for o processo de compra
e/ou alto o preo ou limitado o inventrio, mais
importante ser posicionar o CTC como um
call-to-action primrio, visvel e acessvel
quando/onde os usurios esperam que ele esteja.
imagem 19 O CTC uma microconverso chave que deve ser imagem 20
rastreada, assim como seu valor agregado ao
dispositivo mvel. (Ver imagem 20)

24
O usurio pode facilmente encontrar a
disponibilidade de um centro de contato
(ex.: em uma tela de Contato)
Usurios que escolhem no seguir com a opo
CTC de um cone de alto nvel ou CTA (ex.: na tela
inicial ou barra de menu primria) devem poder
facilmente encontrar a tela de centro de contato
da marca e informaes de disponibilidade, ex.:
datas e horrios comerciais (e dias especiais,
como feriados de banco); e o que ocorre fora
dessa disponibilidade (ex.: ligue quando
abrirmos, deixe uma mensagem ou ligue mais
tarde, etc.)
Consumidores que utilizam mais os seus
dispositivos mveis gastam mais nas lojas.
Consumidores mveis frequentes gastam
25% a mais nas lojas do que pessoas que
utilizam seus dispositivos mveis para
auxlio com as compras apenas
ocasionalmente.
Pesquisa sobre Dispositivos Mveis
nas Lojas, 2013, Google
Os usurios podem localizar um negcio
por perto utilizando dados de localizao
do smartphone
(ex.: uma loja de varejo)
Uma vez que os usurios conrmaram que o
aplicativo pode acessar o recurso de localizao
do smartphone, eles devem facilmente poder
localizar uma loja fsica da marca atravs do
aplicativo (seja uma loja de varejo, uma estao
de locao de veculos, um hotel, etc.). Quanto
mais complicado for o processo de compra e/ou
alto o preo, limitado o inventrio ou
25
experiencial o produto, mais importante ser
posicionar o localizador de loja como um
call-to-action primrio, visvel e acessvel
quando/onde os usurios esperam que ele esteja.
O recurso mvel para oine uma
microconverso chave que deve ser rastreada,
assim como seu valor agregado ao dispositivo
mvel.
MENSURAO
O nmero de escaneamento de produtos O nmero de cliques para ligar iniciados
iniciados e aqueles que geraram converses e aqueles que geraram converses
O nmero de buscas por imagens iniciadas O nmero de checagem de
e aquelas que geraram converses estoque/inventrio e aquelas que
geraram converses
O nmero de contas criadas
Converses estimadas entre dispositivos
O nmero de favoritos ou lista de desejos no AdWords
criadas e aquelas que geraram converses
Mensurao Universal Analytics entre
O nmero de produtos compartilhados dispositivos com ID de Usurio
atravs de e-mails ou canais sociais e aqueles
que geraram converses
O nmero de localizadores de lojas iniciados
e telas de detalhes sobre as lojas visualizadas
e aquelas que geraram converses
 03. Facilite a Transao

Proporcione o mximo
de convenincia

26
O objetivo nesse momento ajudar os usurios
a avanarem a cada etapa do check-out
empenhando o mnimo de esforo e contando
com mensagens conveis sucientes para
realizarem a converso sem pensar duas vezes.
42% das vendas atravs de dispositivos
mveis realizadas pelos principais 500
comerciantes de m-commerce em 2014
sero feitas atravs de aplicativos.
Varejista Online 2015 Mobile 500
% de usurios de aplicativos por categoria
que realizaram compras de produtos,
servios e assinaturas atravs de
aplicativos nos ltimos 30 dias: Varejo
(50%); Viagens (44%); Local (48%);
Tecnologia (65%); Finanas (38%).
Estudo de Consumidores de Aplicativos em
Dispositivos Mveis nos EUA, 2014,
Google/Ipsos MediaCT
O usurio sente-se seguro durante todas as
etapas de check-out por meio de mensagens
relevantes que os motivam a avanar para
a prxima etapa (sem pensar duas vezes!)
Proporcione mensagens visveis e claras que so
especcas a esta etapa da jornada de
transao. Dessa forma, voc passar segurana
e motivao para o usurio avanar para a
prxima etapa sem pensar duas vezes. Por
exemplo:
27
Carrinho: check-out seguro, desconto de Informaes Pessoais & Endereo: frete grtis, opes
comprador de primeira viagem, gaste mais R$X de entrega premium ou trocas/devolues pr-pagas.
para obter frete grtis. (Veja imagem 21)
Pagamento: conrmao das opes de pagamento
disponveis, meio de pagamento seguro, custos exibidos
de maneira simples e clara. (Ver imagem 21)
Check-out & Conrmao: opes de apoio ao
consumidor e disponibilidade, ex.: self-service (vdeos,
demonstraes, perguntas frequentes, fruns, etc.) ou
assistncia virtual (e-mail, web chat, clique-para-ligar, etc.)
Carrinho
Na etapa do carrinho de compras, devemos dar o
impulso necessrio para que o usurio realize o
check-out (para converter) ou continue comprando
(para aumentar o valor mdio do carrinho). O carrinho
deve conrmar claramente todos os itens adicionados
e os custos (por item e total). Tambm vale a pena
considerar os seguintes recursos: permitir que o
usurio edite os itens; e vendas cruzadas de produtos
(ex.: itens recomendados) ou servios (ex.:
parcelamento disponvel).
O usurio pode editar as caractersticas
principais do produto (ex.: para produtos: cor,
tamanho ou quantidade)
Permita que o usurio mude de ideia e possa editar as
caractersticas do produto ex.: a cor de um vestido, o
tamanho de uma bicicleta, etc. ainda na etapa de
check-out, ao invs de ter que clicar diversas vezes
para voltar no funil de compra ou buscar o produto
imagem 21 novamente.
Essa opo deve ser disponibilizada em conjunto
com a possibilidade de editar a quantidade do
produto recurso que a maioria dos aplicativos
j oferece e contribui para a higiene de
usabilidade. (Ver imagem 22)
imagem 22
28
O usurio pode visualizar produtos
relacionados ou recomendados
Exiba um conjunto de produtos recomendados ou
relacionados ao produto que o usurio j est
visualizando. Produtos relacionados so valiosos para
imagem 23
usurios porque so relevantes no contexto que
esto considerando, e so valiosos para o negcio
tambm porque podem aumentar o valor mdio do
carrinho de compras. (Ver imagem 23)
MENSURAO
# de usurios que editam as
caractersticas do produto
# de caractersticas do produto
editadas (ex.: cor, tamanho, quantidade)
# de produtos relacionados adicionados
ao Carrinho
Relatrios de funil de compra: % de
visitas avanando para a prxima etapa
do processo
Erros funcionais: Erro de digitao e falha
no pagamento (a ser consertado)
Informaes Pessoais & Endereo
Proporcione segurana suciente aos usurios de
primeira viagem para que eles preencham seus
dados e avancem para a etapa de pagamento sem
hesitao. Oferea tambm preenchimento
automtico para a convenincia dos usurios
recorrentes.
Remova distraes com uma tela em quarentena
Fornea um ambiente despoludo para
proporcionar velocidade entre as telas de
check-out removendo todo o contedo alheio e
navegao / menus que poderiam vir a distrair os
usurios. Exiba apenas o mnimo de contedo
essencial e aes para impulsionar a converso.
(Ver imagem 24)
Para usurios recorrentes, as informaes
pessoais e o endereo so preenchidos
automaticamente
Preencha automaticamente as informaes pessoais
e o endereo do usurio para agilizar a compra. A
ausncia de armazenamento e preenchimento
automtico das informaes inseridas previamente
tornar a transao mais rdua.
47% dos entrevistados preferem aplicativos
ao invs de um site mvel quando querem
realizar uma tarefa ou transao com agilidade.
App-nsia no Reino Unido: A Necessidade
de Marketing de Reengajamento, 2015
29
Para usurios recorrentes, o processo inteiro
da transao ocorre em uma nica tela
(i.e.: a partir do preenchimento das informaes
pessoais at o check-out)
Usurios recorrentes, cujas informaes pessoais, de
endereo e de pagamento j esto armazenadas no
aplicativo, devem ter uma experincia de transao
em uma nica tela, onde todos os dados so
preenchidos automaticamente (com opes de
edio), para que possam concluir o processo de
maneira gil e conveniente. Os usurios no
deveriam ter que clicar em diversas telas durante a
jornada de check-out. (Ver imagem 24)
MENSURAO
Relatrios de funil de compra: % de
visitas avanando para a prxima etapa
do processo
Erros funcionais: Erro de digitao e falha
no pagamento (a ser consertado)
# de erros de validao: se o nmero
de erros for alto, recomendado
demonstrar exemplos de preenchimento
image 24 correto
Pagamento
Maximize a converso na etapa de pagamento
proporcionando segurana aos usurios e
empregando mtodos de preenchimento prticos,
tais como: leitura ptica de cartes, opes de
pagamento e pagamento express para usurios de
primeira viagem; e preenchimento automtico para
usurios recorrentes; etc.
Custos transparentes (custos por item e custo total)
Os carrinhos de compra devem exibir todos os itens
dentro dele e custos relacionados, descontos ou
economias, assim como o custo total. Durante o
check-out, tambm necessrio exibir os impostos
incididos, tarifas de frete e custo total.
Para usurios recorrentes, as informaes de
pagamento so preenchidas automaticamente
(para reforar convenincia)
Preencha automaticamente os dados de pagamento
para reforar os mesmos benefcios mencionados
acima. O nico campo que deve ser preenchido
manualmente em todos os acessos por questes
de segurana o cdigo de vericao do carto o preenchimento dos primeiros quatro dgitos
(CVV).
O usurio deve ter acesso apenas s opes
de pagamento disponveis em seu pas
Fornea formas de pagamento adaptadas para o
pas do usurio. Proporcione diversas opes para
garantir a cobertura da gama total de mtodos de
pagamento em cada pas, por exemplo: carto de
crdito, carto de dbito, PayPal, etc.
Pagamento express / opo de check-out
oferecida (ex.: Google Wallet, PayPal, Apply Pay)
30
Alguns consumidores consideram o pagamento
express/mtodos de check-out uma alternativa mais
conveniente do que cartes de crdito e dbito ou o
preenchimento manual de informaes pessoais e
endereo. Esses mtodos tendem a ser usados para
alguns tipos de mercadorias, como compras de
baixo custo ou pontuais, as quais demandam um
nvel baixo de considerao por parte do usurio. A
reduo do nmero de etapas no processo de
check-out e o volume da entrada de dados
aumentar o ndice de converso do aplicativo.
Mtodos alternativos incluem PayPal, Apple Pay e
Google Wallet.
No caso do Apple Pay, evite a exibio do boto
de pagamento caso o usurio no possa efetuar o
pagamento dessa forma (i.e.: no possui carto
autenticado ou um dispositivo compatvel com a
Apple).
Quando usurios de primeira viagem selecionarem
um carto como a forma de pagamento, o Tipo
de Carto detectado automaticamente aps
(para reforar convenincia vs.
do carto (ex.: carto de dbito Visa)
Para usurios iniciantes ou durante o check-out, evite
solicitar que os usurios escolham o tipo e bandeira
do carto. Aps o preenchimento dos primeiros
quatro dgitos do carto de crdito ou dbito, o
mesmo deve ser reconhecido automaticamente e
exibido para o reconhecimento e segurana dos
usurios.
Para usurios de primeira viagem
selecionando ou cadastrando um carto,
todos os dados podem ser preenchidos
sequencialmente em um nico campo
(ex.: nmero de 16 dgitos, em seguida ms e
ano e nalmente o CVV)
Para usurios iniciantes ou durante o
check-out, evite forar o usurio a alternar
entre diversos campos para preencher os
dados do carto. Em vez disso, solicite que
todos os dados sejam inseridos em um nico
campo, com instrues em linha para cada
dado sequencial exigido. Por exemplo,
quando o usurio chegar etapa de dados
do carto, ele j ter fornecido o seu nome
completo e agora deve apenas preencher
informaes sobre o carto: nmero de 16
dgitos, ms e ano e cdigo de vericao
(CVV). Isso muito mais prtico do que
alternar e car pulando entre os campos e o
teclado numrico. (Ver imagem 25)
Para usurios de primeira viagem que
esto selecionando pagamento atravs
de carto, ser exibida a opo de leitura
ptica
preenchimento manual)
Proporcione os usurios com a opo de
escanear o carto de pagamento de forma
prtica em vez de preencher os dados
manualmente. O benefcio para o usurio a
convenincia (leva apenas alguns segundos
ao invs de um minuto) e os benefcios para
o negcio incluem a obteno de dados
100% corretos e um menor ndice de
abandono do carrinho chega de nmeros
compridos inseridos incorretamente ou
nomes no preenchidos exatamente como
constam no carto, etc. (Ver imagem 25)
 Caso seja solicitado um documento de identidade,
ser exibida a opo de leitura ptica
(ex.: passaporte ou CNH)

Pelos mesmos motivos e benefcios de proporcionar

usurios com a opo de escanear os cartes de
pagamento, alguns negcios/aplicativos como
companhias areas, empresas de aluguel de carros,
seguradoras, esquemas de delizao, etc. podem ler
os dados do documento de identidade ao permitir que
os usurios escaneiem seu passaporte, carteira de
motorista, etc. para captar a identidade solicitada. Esta
funo proporciona maior convenincia ao usurio e
agiliza o processo do funil de compra.

MENSURAO

# de pagamentos por opo (tipo de

carto ou tipo de pagamento express)

# de usurios que optam pela leitura

tica (carto de pagamento e / ou
documento de identidade)

Relatrios de funil de compra: % de

visitas avanando para a prxima etapa
do processo

Erros funcionais: Erro de digitao e falha

no pagamento (a ser consertado)
imagem 25

31
Check-out & Conrmao
Maximize a converso na ltima etapa do check-out
tomando as seguintes medidas: remova todas as
distraes (tudo que no leve deciso de
converso); garanta atendimento ao cliente; oferea
uma experincia de check-out em uma nica tela
para usurios recorrentes; conrme os principais
detalhes da transao; e fornea contedo
contextual que agregue valor alm da operao
imediata (e que contribua para a reteno).
Com as novas tecnologias, provavelmente
veremos a converso mvel ultrapassar a
converso de desktop, motivo pelo qual todas
as empresas atuais devem ser, antes de mais
nada, mveis. Sem dvida, os smartphones
e tablets sero imprescindveis para o varejo
online no futuro e esses dispositivos mveis
impulsionaro o crescimento de forma geral.
Vishal Agarwal, EVP & CMO, Nomorerack.
com Inc., N. 78 no Varejista Online 2015
Mobile 500
O usurio pode selecionar a melhor data /
hora de entrega
Permita que os usurios selecionem a melhor data
/ hora de entrega e remova essa barreira
desnecessria de converso. Alguns usurios
podem no ter disponibilidade em certas datas,
devido a compromissos familiares ou frias.
Considere oferecer uma gama de opes para
atender diferentes situaes e classique os
custos de entrega a m de atingir um alto nvel
de qualidade de servio.
32
Se o usurio fechar o aplicativo Telas de conrmao ps-pagamento ou
durante um check-out parcial, ao ps-reserva so uma etapa importante para dar
reabri-lo, todas as entradas so incio aos esforos despendidos na reteno de
restauradas para que ele possa concluir usurios. Atravs de contedo contextual,
o processo de forma conveniente possvel agregar valor em momentos aps a
transao, alm de ser um diferencial. Por
Se o usurio decidir fechar o aplicativo no meio exemplo:
do processo de check-out, ao abrir o aplicativo
novamente, todos os dados inseridos devem ser
restaurados, permitindo que o usurio continue
do mesmo lugar onde havia parado de forma
Transao de varejo: envie um lembrete por
prtica.
SMS uma hora antes da entrega
A tela de conrmao deixa o cliente mais
conante ao exibir as informaes Aluguel de carro: envie o endereo e o mapa
completas da transao do local de devoluo do veculo
Reserva de evento: Adicionar ao Calendrio,
Proporcione informaes que tranquilizem o
Enviar para o Passbook ou TripIt. (Ver imagem
consumidor em termos de sua compra ou
28)
reserva, ex.: o(s) item(ns), preos, impostos,
endereo de entrega, data prevista de entrega,
impresso de fatura, links para perguntas
frequentes, opes de contato para
atendimento, etc. Essas informaes deixam os
consumidores mais conantes, os direcionam ao
contedo til de self-service e reduzem o
volume da procura pela central de atendimento.
MENSURAO
(Ver imagens 26 e 27)
Relatrios de funil de compra: %
A tela de conrmao exibe contedo
contextual de visitas avanando para a prxima
etapa do processo
(para agregar valor alm do check-out)
Erros funcionais: Erro de digitao e falha
no pagamento (a ser consertado)
 imagem 26 imagem 27 imagem 28

33
 04. RETORNE

Self-service, engajamento
e satisfao (ou encantamento)

34

Durante esta etapa, o foco principal ser til,
gerar engajamento e satisfao
(encantamento) para reter consumidores ou
incentivar delidade. Isso porque aplicativos
em dispositivos mveis so o ponto de contato
mais adequado para: interaes recorrentes e
transaes frequentes; clientes e membros
que j so eis a uma marca; casos de primeira
utilizao mvel (que no existiriam sem os
recursos nicos do smartphone); servios que
alavancam dados ricos e contextuais; etc.
Essencialmente, mais barato reter um
consumidor do que adquirir um novo.
A Reteno em Aplicativos Continua
Melhorando:
Nos ltimos quatro anos, a porcentagem
de aplicativos utilizados 11 ou mais
vezes aumentou 13%, atingindo 39% em
2014. Essas melhorias podem ser
atribudas ao melhor entendimento e o
foco no engajamento do usurio. Esses
fatores permitiram que desenvolvedores
criassem aplicativos mais teis e
personalizados.
Localytics 2014
35
Sua Conta
Os aplicativos so o ponto de contato ideal
para consumidores e membros servirem a si
mesmos, assim como administrarem suas
contas e transaes a qualquer hora e em
qualquer lugar. D o controle e o nvel de
convenincia que apenas aplicativos em
dispositivos mveis podem proporcionar aos
seus consumidores.
44% dos consumidores baixam apps para
saber o status de seu pedido. 38% dos
consumidores baixam apps para
monitorar e administrar uma conta de
delidade.
Responsys, Abril 2014
O usurio pode administrar suas reservas (e
autosservir)
O usurio deve ter a possibilidade de administrar sua
reserva no aplicativo e alterar qualquer uma de suas
dimenses (ex.: datas, extras, etc.), e ver os resultados na
tela para sua segurana. Evite direcionar os
consumidores central de atendimento para esse tipo
de interao, uma vez que isso frustra os consumidores,
alm de aumentar o nmero de ligaes central de
atendimento e o custo para o negcio. (Ver imagem 29)
imagem 29
O usurio pode cancelar suas reservas
(e autosservir)
O usurio deve ter a possibilidade de cancelar sua
reserva no aplicativo em vez de realizar uma busca
no app para descobrir qual o processo de
cancelamento, ou ento ligar ou escrever para a
empresa para perguntar. O cancelamento deveria
ser to prtico quanto a administrao da reserva.
Evite direcionar os consumidores central de
atendimento para esse tipo de interao (ou, pior
ainda, solicitar que eles entrem em contato por
escrito!), uma vez que isso frustra os
consumidores, alm de aumentar o nmero de
ligaes central de atendimento e o custo para o
negcio.
MENSURAO
# de ordens / reservas visualizadas
# de ordens / reservas alteradas
# de ordens / reservas canceladas
Senhas e Resgate
Permita que os usurios recebam e resgatem
senhas ou vouchers no aplicativo, visualizem
seu status de delidade ou recebam
atualizaes quando algo for alterado e
elimine a necessidade de imprimirem e
portarem garantias fsicas.
36
50% dos consumidores baixam aplicativos
para ter acesso a ofertas especiais ou
exclusivas.
Responsys, April 2014
O ndice de resgate de cupons em
dispositivos mveis de 10%, esmagando
o ndice de resgate de cupons impressos,
o qual mantm-se a 1%.
Business Insider 2013
Ao emitir senhas e/ou cupons de eventos
ou reservas, permita que os usurios os
resgatem atravs do Passbook ou com o
Google Now para resgate oine
(e elimine senhas fsicas e impressas)
Os usurios devem ter a possibilidade de resgatar
e visualizar suas senhas no aplicativo, em vez de ter
que imprimi-los. Eles tambm devem ter a opo
de leitura ptica para entrar em eventos ou locais
especcos, como a rea de segurana de
aeroportos ou ao realizar o check-in em hotis.
Alm disso, os usurios devem ter a opo de
resgatar cupons ou vouchers para mercadorias ou
eventos atravs do Passbook, assim como
visualizar e administrar suas senhas no aplicativo.
Em dispositivos Android, o Google Now oferece
cartes aos usurios contendo as informaes e o
horrio correto seja uma reserva para um evento,
voo, hotel ou restaurante os quais so enviados
para a conta do Gmail. Basta selecionar a opo de
noticao por e-mail para usurios. Veja quais
esquemas so compatveis: Google Now
Em dispositivos iOS, as senhas podem ser
adicionadas ao Passbook para serem visualizadas/
exibidas a qualquer momento. Alm disso, voc
pode atualiz-los quando quiser recurso
essencial para reservas e eventos nos quais o
horrio constitui um fator fundamental, pois so
sujeitos a atrasos e cancelamentos.
Caso voc j possua um esquema de delidade,
permita que os usurios de iOS visualizem seu
status e resgatem prmios oine com a
utilizao do aplicativo Passbook
(em vez de requerer um log-in atravs da web)
Independentemente de possuir um ou no um
esquema de delidade no seu aplicativo, os
usurios de iOS devem ter a possibilidade de
visualizar sua senha de delidade e status
diretamente no Passbook (em conjunto com todas
as outras senhas). Permita que os usurios
visualizem seu status e resgatem prmios de forma
prtica. O Passbook tambm permite a atualizao
dos dados de delidade a qualquer momento, o
que muito importante quando o status e/ou
prmios esto sujeitos a alteraes por conta de
datas/horrios.
MENSURAO
Universal Analytics para mensurao
online-para-oine com IDENTIDADE
DO USURIO
Contedo & Design
Otimize a experincia do usurio com contedo
adequado, tom de voz, design visual, utilizao de
motion design sutil, e formas de descobrir e
evitar becos sem sada.
% de usurios de aplicativos que mencionam
caractersticas associadas com os aplicativos
mais usados: Sempre possui contedo novo
(45%); Design atrativo e esttica do app (57%)
Estudo de Consumidores de Aplicativos em
dispositivos Mveis nos EUA, 2014,
Google/Ipsos MediaCT
Diferente da tela inicial tradicional, o contedo
utilizado para engajar os usurios de forma
imediata
Alguns aplicativos resolveram substituir a tela inicial
tradicional por uma tela alimentada de contedos
que engajam o usurio imediatamente. A tela faz
com que o usurio interaja e teste os recursos na
hora, conhecendo o valor inerente do app de
forma imediata. (Ver imagem 30)
O usurio pode descobrir contedos novos
ou produtos atravs de stream Innito
(funo de scroll livre de becos sem sada)
Apps engajadores com grande volume de contedo ou
mensagens (ex.: mdias ou mdias sociais) podem
proporcionar um stream de contedo que pode ser
navegado innitamente com a funo scroll, para
engajar usurios da forma que desejarem, sem
atingirem becos sem sada ou interrupes com aes
imagem 30
de prxima tela.
37
O usurio recorrente pode visualizar contedos,
buscas ou transaes recentes / histricos com
agilidade
Permita que os usurios visualizem seu histrico
de contedo ou transaes com rapidez, ex.:
contedo recente ou ltimos 10 itens, ou
transaes efetuadas no ltimo ms, etc. Os
aplicativos possuem a capacidade de armazenar
esses dados, ento porque no exibi-los para
otimizar convenincia (e no esperar que os
usurios realizem buscas para encontrar essas
informaes)? (Ver imagem 31)
O usurio recorrente pode congurar avisos
para itens ou buscas
(ex.: ativado quando h alteraes em disponibilidade
ou preo)
Permita que os usurios recorrentes congurem
avisos para receberem atualizaes de status ex.:
disponibilidade ou preo de itens que visualizaram
ou buscaram. Esse recurso prtico para os usurios
e elimina a necessidade de realizar novas buscas para
visualizar as mesmas coisas.
O usurio recorrente pode repetir uma transao
que j realizou no passado com apenas 1 clique
(para convenincia mxima)
Permita que os usurios recorrentes realizem uma
transao passada atravs de apenas 1 clique para
garantir total praticidade em compras e reservas. O
aplicativo pode preencher automaticamente todos os
dados exceto o cdigo de vericao do carto (CVV)
e, caso seja uma reserva, o app pode fornecer novas
sugestes de datas.
 Experincias de apenas 1 clique quase nunca so com os valores da marca, o design deve ser
realmente compostas de 1 clique, porm um repensado e concebido para o dispositivo
check-out que pode ser realizado em uma nica smartphone e aplicativos. (Ver imagem 33)
tela para transaes repetidas ou que requeira o
preenchimento de poucos dados, podem ser Motion design aperfeioa as interaes
considerados processos de 1 clique. Alm disso, e a experincia do usurio
1-Click foi patenteado pela Amazon alguns anos (ex. Por meio de animaes sutis)
atrs, ento mesmo levando em considerao
que voc no pode oferecer o processo idntico, possvel aplicar motion design para otimizar
seu objetivo deveria ser criar o processo mais experincias, por exemplo para deixar claro o
ininterrupto / livre de atrito possvel, assim como que j aconteceu no passado e o que est
reduzir o esforo despendido pelo usurio. acontecendo atualmente, assim como encantar
os usurios. Isso pode ser feito atravs de
s vezes, o tom de voz surpreende e encanta animaes de interface de usurios adequadas
os usurios tanto nas telas ou entre telas. (Ver imagem 34)
Comunique-se com os usurios reforando a
personalidade da sua marca, porm tente
aproveitar o seu tom de voz para surpreend-los
e encant-los atravs de uma linguagem informal
ou engraada, especialmente quando os usurios
estiverem esperando instrues formais. (Ver
imagem 32)

Os seus produtos concorrem a eleies

todos os dias e um belo design
fundamental para ganhar a campanha.
MENSURAO
Procter & Gamble CEO A.G. Laey, 2005

O design visual engaja e otimiza a experincia Tempo despendido

do usurio
A experincia com o aplicativo pode ser otimizada Profundidade do app
atravs do design da interface do usurio, a qual
pode ser excepcionalmente bela, minimalista, rica Frequncia e atividade recente do
ou impactante. Mesmo considerando que a usurio
image 31
comunicao visual deve estar em conformidade

38
 imagem 32 imagem 33 imagem 34

39
Widgets & Noticaes
Widgets so extenses do app contidas dentro
do seu aplicativo mvel principal que permitem
que voc publique plulas de informao de alto
valor e em momentos oportunos para usurios
especcos, as quais so exibidas no smartphone
do usurio para serem visualizadas e digeridas
rapidamente.
Noticaes push so mensagens que avisam
os usurios de eventos altamente relevantes,
pessoais e oportunos, assim como contedos ou
mensagens. As noticaes funcionam em modo
stream no plano de fundo, at que o usurio
identique ou oua um alerta.
Os widgets so congurveis, ento
fundamental que os seus agreguem valor a partir
de sua primeira visualizao (ou voc corre o
risco de o usurio desativar essa funo) e no
funcionam simplesmente como uma maneira
alternativa de abrir o seu app!
% de usurios de app que utilizariam um
app novamente devido aos lembretes:
Desconto ou cupom para minha prxima
compra (30%); Contedo exclusivo ou
bnus (24%); Noticao no celular sobre a
incluso de novos recursos (16%).
Estudo de Consumidores de Aplicativos
em dispositivos Mveis nos EUA, 2014,
Google/Ipsos MediaCT
9 em cada 10 usurios cujos aplicativos de
40
Viagens & Frias e Compras caram no
esquecimento, esto abertos a utiliz-los
novamente.
App-nsia no Reino Unido: A Necessidade
de Marketing de Reengajamento, 2015
Se o aplicativo possui noticaes push, o
usurio tem a opo de aceitar ou no esse
recurso
(a autorizao do usurio necessria)
A sua base de usurios para noticaes push deve
ser composta de usurios que escolheram essa
opo, ou seja, o usurio deve autorizar
expressamente o recebimento de mensagens push.
Seja muito claro sobre os tipos de noticaes que
os usurios recebero, quando sero enviadas e
com qual frequncia. Sempre respeite a ateno do
usurio, pois esta a escassez pela qual todas as
marcas esto disputando.
Se o aplicativo possui widgets e / ou
noticaes, o usurio pode olhar de
relance e entender sua relevncia
imediatamente
Seja conciso, escolha os momentos certos e
concentre-se em aes ao desenvolver o contedo
do widget ou noticao. Dessa forma, o usurio
pode visualiz-lo de relance e ainda assim entender
sua relevncia pessoal e oportuna e identicar o
call-to-action. Sempre respeite a ateno do
usurio, pois esta a escassez pela qual todas as imagem 35
marcas esto disputando. (Ver imagens 35 e 36)
 Widgets & Noticaes

O usurio recebe noticaes pessoais possibilidade de clicar na noticao e ser

incentivadoras, em momentos oportunos direcionado tela especca no aplicativo (e
(e as mesmas criam um sentido de urgncia para agir) no a tela inicial). Acesso s subpginas (deep
linking) garante uma transio uda da
As mensagens devem ser pessoais com contedo noticao para o app, otimizando a
relevante para cada usurio, com base em seu perl converso.
demogrco ou comportamento no app. Segmente
os usurios que optaram pelas noticaes
cautelosamente para alcan-los de forma ecaz e
com mensagens pessoais. As mensagens tambm
devem ser enviadas em momentos oportunos e o
recipiente deve entender porque as esto recebendo
em determinado momento. Dever haver
call-to-actions claros que incentivem os usurios a
agir de forma urgente e pontual. Sempre considere o
contexto de cada usurio, como data e horrio local.
Por exemplo: mensagens enviadas durante feriados
bancrios ou fora de horrios sociais podem ser
interpretadas como interrupes e, portanto, correm
o risco de rejeio. Exemplo de noticao:

Compre agora: clientes delidade recebem 25%

de desconto esse ms!
Voc no concluiu o check-out: sobraram apenas
3 ACME receba 5% de desconto hoje mesmo!

O usurio pode tocar/clicar no widget ou

noticao para ser direcionado ao contedo
mencionado no aplicativo
O usurio pode visualizar e interagir com o contedo do seu
widget ao tocar/clicar uma nica vez na noticao para
image 36 abrir o aplicativo principal e visualizar as reservas, produtos
ou eventos listados. Alm disso, o usurio deve ter a

41
 05. Higiene
de Usabilidade

O que fazer
e o que NO fazer

42
O que fazer
Esta seo tem como foco principal a higiene de
usabilidade, ou os itens bsicos que devem ser
abordados para otimizar a converso e evitar a
interrupo ou forar os usurios a pensarem
sobre coisas que deveriam ser bem simples.
necessrio trabalhar duro para atender s
expectativas dos usurios que esto cada vez mais
acostumados com apps de altssima qualidade,
lanados por marcas que investem tempo e
empenham esforos para criar, testar e otimizar
seus servios com o objetivo de proporcionar
experincias de alta usabilidade, robustas e, s
vezes, at encantadoras.
O texto e o contedo so de leitura fcil
(mesmo longe da luz do sol)
Para que o texto seja sempre legvel,
recomendado usar um tamanho de fonte igual ou
maior do que 11 pontos (inclusive quando os
usurios selecionam um tamanho de texto
pequeno); e a fonte deve ser consistente no app
inteiro. Certique-se de que exista contraste
suciente e perceptvel entre o contedo do
aplicativo e o plano de fundo, especialmente
quando utilizado contra a luz do sol.
Em dispositivos Android, a tipologia dever ser
especicada em pixels independentes (sp) e os
layouts devero ser compatveis com tipologias
escalveis testadas com essas conguraes.
43
34% preferem aplicativos versus um O sistema Android recomenda controles com o
site mvel quando esto com sinal fraco tamanho de 48dp para elementos na tela, tais
como botes, cones, guias com cones, etc.
de WiFi ou conexo 3G. O sistema iOS recomenda controles com o
tamanho de aproximadamente 44 x 44 pontos.
Reengajamento do Google App, Reino
Unido, 2015 Visualizaes modais so utilizadas para tarefas
contidas em um processo de diversas etapas
Contedo acessvel quando o usurio
`estiver sem sinal (i.e.: sem 3G ou WiFi)
Quando o usurio precisa realizar uma tarefa
simples dentro de um processo de diversas etapas,
Garanta a acessibilidade do contedo principal
durante a jornada do consumidor i.e.: disponvel e a mesma no pertence UI do aplicativo, utilize a
no cach do aplicativo mesmo quando a conexo visualizao modal.
de dados estiver limitada ou nula no 3G ou WiFi.
Essa questo deve s er cuidadosamente O sistema iOS possui duas visualizaes
identicada e priorizada para proporcionar uma modais: vertical e ip. Elas podem cobrir a tela
experincia sem interrupes para o usurio e inteira ou apenas parcialmente, incorporar cpia
evitar o abandono do app. ou funcionalidade e deve ser concluda ou
cancelada. Tambm importante que seja fcil
O espaamento e o tamanho dos controles sair desse modo de visualizao.
e do contedo facilitam a interao
Os botes de call-to-action primrios so sticky /
Facilite a interao dos usurios com o contedo e constantemente visveis
controles do app por meio de espaamento (at mesmo quando o usurio utilizar o scroll)
adequado entre todos os itens para que seja fcil
clicar nos controles. Desenvolva elementos de Um bom exerccio seria manter os botes de
clique/toque que proporcionem feedback direto call-to-action acima da dobra e nas pginas com
em estado normal, pressionado, desativado, etc. contedos ricos e detalhados. As chamadas podem
(ex.: o sistema Android utiliza iluminao e ser posicionadas em um boto sticky na parte
escurecimento para ajudar o usurio a visualizar a inferior da tela visvel mesmo quando os usurios
rea em que pode tocar e aprender onde clicar no utilizarem a funo scroll para que possam agir
app). em qualquer momento. (Ver imagens 37, 38 e 39)
 imagem 37 imagem 38 imagem 39

44
Nos formulrios, os call-to-actions que
estiverem abaixo da dobra voltam
automaticamente para o topo da pgina
aps o preenchimento dos campos
necessrios
(os usurios nunca devem ter que procurar
os call-to-actions)
Se o formulrio possuir um call-to-action abaixo
da dobra, ajude os usurios a visualizarem e
agirem com base na chamada. Faa isso exibindo
o boto aps o preenchimento dos campos
necessrios.
Os rtulos dos formulrios devem estar
acima dos campos do formulrio ou exibidos
em forma de rtulos utuantes
(no sistema Android)
Os rtulos devem estar posicionados acima dos
campos do formulrio para que os usurios
possam visualizar, com facilidade, o que esto
preenchendo e por qu. Os campos do
formulrio direita reduzem consideravelmente o
espao disponvel para os mesmos. As descries
dos campos do formulrio presentes dentro do
prprio campo de preenchimento desaparecem
uma vez que o usurio comea a preench-lo. Se
o usurio estiver distrado, possvel que ele no
lembre a informao que estava inserindo.
No sistema Android, em vez de colocar os
rtulos acima dos campos de preenchimento, um
rtulo em linha utuante pode ser utilizado. Ex.:
quando o usurio interage com o campo de
preenchimento, o rtulo utua para cima e ca
posicionado sobre o campo, para orientar o
usurio durante o processo.`
45
Erros de envio de formulrio so reduzidos
atravs da comunicao
(explicaes sobre o que deve ser inserido em
cada campo do formulrio)
Explique aos usurios o que devem preencher em
cada campo e o formato adequado. Isso reduzir
a quantidade de erros e aumentar a
porcentagem de usurios que concluem o
processo.
Os dados preenchidos so validados em
tempo real
(aps o preenchimento do campo, possvel
visualizar se a informao est correta ou no)
Avisar os usurios de possveis erros enquanto
eles estiverem preenchendo o formulrio
economiza tempo e evita a frustrao de enviar o
formulrio para depois descobrir que o mesmo
continha erros.
Em um formulrio, o cursor posicionado
no primeiro campo e a entrada correta
exibida por padro
Reduza o nmero de cliques no formulrio e
ajude a manter o foco do usurio posicionando o
cursor no primeiro campo do formulrio por
padro e exibindo a entrada adequada (ex.:
teclado ou dial-pad) por padro. Faa esse esforo
em nome dos usurios para que eles possam
concluir os formulrios com mais agilidade.
Em um formulrio, o usurio pode selecionar
uma opo de uma lista de etiquetas horizontais
exibidas acima do teclado virtual
(em vez de uma lista vertical oculta abaixo do imagem 40
teclado)
As telas mveis so reduzidas pela metade (ex.: para selecionar sexo ou ordem de Sra.). Os controles segmentados exibem todas as
quando o teclado virtual exibido, portanto a tratamento) opes por padro, permitindo que o usurio faa
maioria da lista vertical ca oculta. Logo, quando o Quando os usurios precisam selecionar um item comparaes e selees com agilidade. Seja
usurio for solicitado a selecionar algum item de a partir de uma srie de cinco ou menos opes consistente e evite misturar imagens e textos em
uma lista de formulrio, considere a utilizao de que so relacionadas, porm mutuamente uma nica guia de controle segmentado ou em
uma lista horizontal exibida acima do teclado. exclusivas fornea um controle segmentado, ex.: todo o conjunto de controles. (Ver imagem 42)
Dessa forma, voc tem melhor aproveitamento da seleo de sexo (M / F) ou ordem de tratamento
tela disponvel para ajudar o usurio a selecionar (Sr. / Srta. /
a opo mais adequada. (Ver imagem 40)
Em formulrios, a entrada de nmeros de telefone
restrita a dial-pads
(i.e.: apenas nmeros)
Quando os usurios so solicitados a inserir um nmero de
telefone, exiba o dial-pad para garantir que eles apenas
cliquem em nmeros e no caracteres. Isso limitar suas
opes e, consequentemente, reduzir erros, agilizando a
concluso do processo. Algumas consideraes: exiba o
formato do nmero que devem inserir por padro com
uma mscara de entrada e no atravs de revelao
gradual para proporcionar assistncia aos usurios; no
aceite a entrada de caracteres (utilize uma mscara para
elimin-los).
Em um formulrio ou carrinho de compras, o usurio
pode editar a quantidade de itens com a utilizao
do controle de rotao (stepper control)
(ex.: no carrinho ou no check-out)
Quando os usurios precisam aumentar ou reduzir a
quantidade de um item presente no carrinho, utilize o
controle de rotao +/- (o qual consiste de duas guias de
controle segmentado). O controle permite que o usurio
faa pequenos ajustes quantidade e especialmente
relevante para itens categorizados ou caros que
dicilmente seriam aumentados ou reduzidos para mais de
um ou dois. Evite menus drop-down.
Em um formulrio ou carrinho de compras, o usurio
pode selecionar um item de uma srie de opes
relacionadas, porm mutuamente exclusivas image 41 image 42
utilizando um controle segmentado

46
Em formulrios de busca ou de ltro, o usurio
pode posicionar o controle deslizante para
denir uma faixa mnima / mxima
(ex.: para preos, oramentos)
Quando os usurios precisam denir uma faixa
mnima / mxima de preos ou oramento para
buscar itens ou renar resultados de busca
utilize o controle deslizante horizontal. Esse
recurso facilita o deslizamento horizontal e
proporciona indicaes visuais simples para
personalizar esta ao. Itens a considerar:
Valores podem ser inseridos com facilidade.
Os nmeros no cam ocultos quando o
controle deslizante estiver em utilizao (evitando
erros tipogrcos).
Para algumas faixas, um controle deslizante
discreto com uma srie de separadores com
valores predenidos pode ser melhor do que uma
faixa de valores contnua e, voc pode adicionar
um histograma em um controle deslizante
Em um formulrio, o usurio pode selecionar
horrios e datas com o controle de calendrio
(ex.: para inserir datas de viagem, data de
nascimento ou horrio de chegada)
Quando os usurios selecionarem datas e
horrios, fornea o horrio local e o controle de
calendrio para tornar o processo de seleo mais
gil e familiar, e proporcione diversos formatos.
O sistema Android pode exibir at trs rodas
simultaneamente.
O sistema iOS pode exibir at quatro rodas
simultaneamente (cada roda exibe um valor em
uma nica categoria, com formatos como data e
horrio, horrio, data e contagem regressiva).
47
Em formulrios de viagem, o usurio pode voc no precisar utilizar um indicador de
selecionar uma data de um calendrio visual progresso, o qual concentra-se na espera dos
Especialmente no dispositivo mvel, muitos usurios em vez da tarefa ou transio. Veja
usurios no tero um calendrio em mos algumas consideraes sobre o contedo exibido
quando quiserem realizar uma tarefa com na tela a seguir:
agilidade. Facilite a seleo das datas corretas
fornecendo um calendrio com os dias da semana Armazene o layout ou esqueleto da tela
para que possam concluir a tarefa. localmente (para que sejam exibidos
imediatamente)
Quando o aplicativo travar, o mesmo deve Minimize o contedo na tela (que deve
reiniciar e direcionar o usurio para a carregar dinamicamente)
ltima tela acessada Otimize o processamento de back-end (para
(para continuar do mesmo lugar onde parou) carregar os elementos em ordem de prioridade
Caso o aplicativo trave, certique-se de que o
ou prever o que o usurio vai precisar / fazer em
mesmo reinicie no estado da ltima tela utilizada, seguida e executar essa mesma tarefa)
para que o usurio continue trabalhando de onde
Utilize animaes para criar o efeito de telas
parou especialmente se a jornada do usurio que esto carregando rapidamente e proporcione
envolvia o preenchimento de dados e exigia algum
feedback visual de uma ao do usurio
esforo por parte dele. No force os usurios a
reinserirem informaes.
Um atraso de 1 segundo no tempo de
carregamento pode signicar 16% de
queda em satisfao do consumidor e
uma perda de 7% em converses. MENSURAO
Akamai, 2013
O contedo exibido na tela e as transies
entre telas aparecem de forma gil Tempo do usurio: se voc utiliza o
Google Analytics, possvel mensurar
(as pausas causam frustrao e confundem os
o tempo de carregamento de cada
usurios)
recurso em uma tela especca (para
aplicativos Android e iOS)
Garanta que o contedo na tela e as aes do
usurio assim como as transies entre telas
Relatrio de Dispositivos Mveis do
respondam de forma gil porque telas com pouca
Analytics verique ndices de converso
capacidade de resposta levam usurios a repetir
para diferentes sistemas operacionais
certas aes e at mesmo a fechar o aplicativo. E,
de dispositivos mveis
quando as telas respondem de maneira ecaz,
O que NO fazer
Desenvolva um design para cada plataforma mvel
Android e iOS porque cada uma tem as prprias
capacidades e linguagens visuais. No replique a
experincia web nos aplicativos e no interrompa
os usurios.
No copie elementos da UI de outras plataformas
(de Android para iOS e vice-versa)
Cada plataforma possui uma srie diferente de
convenes e qualidades. Ao replicar os elementos de
uma plataforma na outra, voc corre o risco de
comprometer a experincia do usurio e a converso.
Por exemplo, algumas plataformas so compatveis
com botes de bordas redondas, ou aes podem ter
comportamentos diferentes, e esses detalhes e
possibilidades so responsveis por proporcionar uma
experincia familiar e consistente. (Consulte:
amostra de elementos da UI, cones, guias, etc.
de Android, iOS e Windows Phone)
No utilize links sublinhados
(aplicativos utilizam botes e NO links)
Evite a utilizao de textos com links sublinhados
estes so parte do modelo web / navegador /
pgina html, e no parte do modelo de aplicativos /
telas. Apps utilizam botes e no links.
No codique links com hardcode
(a outros sites ou apps)
48
Evite a codicao de links com hardcode no seu abriu o app ou com base no nmero de
app, tanto a sites quanto a outros apps. Links tarefas / objetivos concludos. Alm disso,
codicados precisam ser manualmente alterados e nunca incentive avaliaes positivas uma vez
exigiro tempo e trabalho. Os usurios que que isso proibido na regulamentao da loja.
navegarem em links defeituosos tero uma
experincia fraca e podem vir a abandonar o app.
No direcione os usurios ao navegador
(os usurios devem car no aplicativo sempre)
Mantenha os usurios no aplicativo em todos os
momentos para que os usurios no se percam e
para otimizar a converso. Se o seu app no tiver
um recurso ou contedo especco, experimente
utilizar um navegador dentro do prprio aplicativo,
mas nunca direcione para o navegador do
smartphone, ou voc far com que os usurios se
percam, aumentando o ndice de abandono e
reduzindo a converso.
No solicite a avaliao do seu aplicativo
logo aps o download
(i.e.: no interrompa os usurios)
No interrompa os usurios solicitando que faam
uma avaliao do aplicativo logo aps o download
ou se apenas utilizaram o app algumas vezes. Ao
invs disso, espere at que se tornem usurios
recorrentes e, dessa forma, mais provvel que
proporcionem uma avaliao positiva e ofeream
feedback fundamentado (onde voc possa intervir).
Voc pode ativar a solicitao de avaliao aps
um nmero especco de vezes que o usurio
Reengajamento do Google App, Reino Unido,
2015 (2015), base da amostra:
N=1.200 entrevistados com aplicativos em uma
de trs categorias: compras, restaurantes &
takeaways, viagens & frias

Dados da Pesquisa:
O Google rmou uma parceria com a Ipsos MediaCT
para realizar o Estudo de Consumidores de Aplicativos
Mveis para descobrir os comportamentos de
aquisio e utilizao de smartphones. A pesquisa
online foi conduzida entre 12 e 22 de setembro de
2014 nos Estados Unidos, incluindo 8.470 usurios
de smartphones entre 18 e 64 anos que utilizaram
qualquer aplicativo de smartphones nos ltimos 7
dias e aplicativos de Entretenimento, Finanas, Gaming,
Local, Varejo, Social, Tecnologia ou Viagens nos ltimos
30 dias.