Apostila - Modulo 2 - Bootcamp UX Designer

Prévia do material em texto

Mobile Design 
 
 
 
 
 
 
Alan Vasconcelos 
 
 
 
 
 
 
 
 
2021 
 
 
 Mobile Design – Página 2 de 92 
 
 
Mobile Design 
Alan Vasconcelos 
© Copyright do Instituto de Gestão e Tecnologia da Informação. 
Todos os direitos reservados. 
 
 
 
 
 
 
 Mobile Design – Página 3 de 92 
Sumário 
Capítulo 1. Introdução ao Mobile Design ............................................................... 6 
O paradigma anterior: desktop ................................................................................ 7 
Principais diferenças entre desktop e mobile ...................................................... 9 
Mobile Web. Ou melhor dizendo... Web ............................................................... 12 
Então qual é, de fato, a diferença entre Mobile e Desktop? .............................. 14 
É aí que aparece nossa oportunidade .............................................................. 16 
Padrões de interação mobile ................................................................................ 17 
A diversidade no ecossistema mobile ................................................................... 19 
Tamanhos e densidades de telas ......................................................................... 21 
Como o dp funciona? ........................................................................................ 23 
E quanto às imagens? ...................................................................................... 24 
Capítulo 2. Conduzindo um projeto mobile .......................................................... 26 
Briefing de projetos mobile.................................................................................... 26 
Etapas típicas de um projeto mobile ................................................................. 26 
Elementos do briefing ....................................................................................... 28 
Processo orientado a UX ...................................................................................... 33 
Investigação - User research ............................................................................ 34 
Investigação - User research ............................................................................ 35 
Ideação - Requisitos de uso .............................................................................. 36 
Ideação - Mínimo Produto Viável (MVP) ........................................................... 37 
Prototipagem - Materializando as histórias de usuários .................................... 37 
Prototipagem - Evoluindo os protótipos em papel ............................................. 38 
Teste - Colocando nossa ideia à prova ............................................................. 38 
Capítulo 3. Projetando a experiência do usuário ................................................. 40 
 
 
 Mobile Design – Página 4 de 92 
Relembrando a Arquitetura da Informação ........................................................... 40 
Esquemas típicos de navegação mobile ............................................................... 40 
1 - Hierarquia .................................................................................................... 41 
2 - Hub & spoke ................................................................................................ 42 
3 - Nested doll ................................................................................................... 42 
4 - Tabbed view................................................................................................. 43 
5 - Dashboard ................................................................................................... 43 
6 - Filtered view ................................................................................................. 44 
Algumas considerações .................................................................................... 45 
Relembrando o que prendemos sobre prototipagem ............................................ 45 
Capítulo 4. Design de interface ........................................................................... 49 
A Lei de Fitts ......................................................................................................... 51 
Regra 1. Crie alvos maiores .............................................................................. 52 
Regra 2. Minimize o movimento do cursor ........................................................ 53 
Regra 3. Evite tensão muscular ........................................................................ 54 
Regra 4. Explore os Prime Pixels (ou pixels de ouro) ....................................... 55 
O paradoxo da escolha ......................................................................................... 57 
Design da informação ........................................................................................... 59 
Conheça seu público e suas necessidades ...................................................... 59 
Conteúdo é mais importante que navegação .................................................... 60 
Grid é nosso amigo ............................................................................................... 61 
Zelo com a qualidade do layout ........................................................................ 62 
Terminologia ..................................................................................................... 62 
As 12 unidades ................................................................................................. 65 
Benefícios para o usuário ................................................................................. 66 
 
 
 Mobile Design – Página 5 de 92 
Atomic Design ....................................................................................................... 66 
Átomos .............................................................................................................. 67 
Moléculas .......................................................................................................... 67 
Organismos ....................................................................................................... 68 
Templates ......................................................................................................... 68 
Páginas ............................................................................................................. 69 
Mobile Guidelines .............................................................................................. 72 
Capítulo 5. Mobile First ........................................................................................ 73 
A grande expansão em números .......................................................................... 73 
Restrições ............................................................................................................. 75 
Oportunidades ...................................................................................................... 81 
Capacidades dos smartphones ......................................................................... 88 
O que já podemos fazer com HTML5 hoje? ...................................................... 88 
Mobile First numa casca de noz: ....................................................................... 89 
Capítulo 6. Conclusão ......................................................................................... 91 
Referências………… ................................................................................................ 92 
 
 
 
 
 Mobile Design – Página 6 de 92 
Capítulo 1. Introdução ao Mobile Design 
Os dispositivos móveis são os PC’s do século XXI. Essa é uma realidade 
que não há como negar e que dificilmente irá se reverter. 
O crescimento vertiginoso da adoção dos dispositivos móveis pelas pessoas 
é comparado ao do rádio, TV e Internet. Em 2011, os smartphonesvenderam mais 
que PC’s e, em 2013, o número de dispositivos móveis conectados excedeu à 
população mundial. 
Esse é o cenário que nos espera! 
A preocupação com usabilidade e experiência de uso deixou de ser um luxo 
para se tornar o ponto de sobrevivência no mercado mobile. A extrema concorrência 
e a variedade de novos aplicativos abrem inúmeras possibilidades de escolha para 
os usuários que estão cada vez mais exigentes não só com aspectos funcionais, 
mas com design, facilidade de uso e até mesmo estética. 
Dado esse cenário, esperamos com essa disciplina capacitar o aluno a 
atuar no projeto de interfaces para dispositivos móveis, criando experiências ricas, 
agradáveis e coerentes com esse suporte. Aqui, vamos compreender as técnicas 
desde o briefing inicial até a entrega do layout para o desenvolvimento, de forma 
alinhada com os princípios de design de interação e experiência do usuário de cada 
plataforma. Os principais objetivos deste texto são: 
▪ Compreender as características peculiares do design para dispositivos 
móveis. 
▪ Entender como se dá a concepção e condução de projetos mobile design. 
▪ Conhecer os métodos e técnicas de criação e prototipagem. 
▪ Saber analisar as diferentes linguagens de design de interface e, com isso, 
saber escolher a melhor opção. 
 
 
 Mobile Design – Página 7 de 92 
▪ Entender as restrições e oportunidades que os dispositivos móveis nos 
oferecem. 
Neste capítulo, abordaremos as principais diferenças entre o paradigma 
desktop e o móvel, além das diferenças entre densidades de tela. 
 
O paradigma anterior: desktop 
Em 1984, Jakob Nielsen, considerado o “pai da usabilidade”, realizou um 
estudo na IBM para ver qual paradigma se encaixava melhor no modelo mental das 
pessoas que iriam utilizar os terminais 3270 (ou apenas “terminais burros”, como 
eram conhecidos por aqui). A ideia era fazer testes com usuários para descobrir 
como as pessoas controlariam a tela, por meio das teclas direcionais do teclado, 
quando havia mais informações do que um único monitor poderia conter. Ou seja, 
se um documento é maior que a altura do monitor, dando a entender que há “mais 
informações” abaixo da borda inferior da tela, qual tecla as pessoas deveriam 
pressionar para visualizar o restante do documento: seta para baixo, ou seta para 
cima? 
A essa altura você deve estar imaginando que a resposta foi “seta para 
baixo”. Exato! Afinal é o padrão usado até hoje. Pode não parecer tão 
surpreendente à primeira vista, mas acredite: segundo os pesquisadores essa não 
era a resposta mais óbvia entre os membros da equipe que realizou o teste. Para 
eles, o resultado da pesquisa foi sim uma surpresa. Para saber mais sobre esta 
pesquisa, acesse: https://www.nngroup.com/articles/macintosh-25-years/. 
 
 
 
 
https://www.nngroup.com/articles/macintosh-25-years/
 
 
 Mobile Design – Página 8 de 92 
Figura 1 - No desktop, nós movemos a tela em direção ao conteúdo. 
 
No desktop, movemos a tela em direção ao conteúdo. Em mobile, o 
paradigma é o oposto, ou seja, é o conteúdo que se move dentro da tela. A Apple 
alterou um pouco esse modelo nos Mac OS. Se usarmos o scroll do Magic Mouse 
da Apple, o conteúdo moverá na direção oposta à do Microsoft Windows. 
E quando se fala em mobile, devemos entender que não se trata apenas de 
smartphones, mas também tablets, games consoles, totens, relógios e outros. Pode 
parecer óbvio, mas esse é um fator constantemente negligenciado pelos projetistas 
de interfaces mobile. 
Figura 2 - Em mobile, o paradigma é o oposto: É o conteúdo que é descolado 
dentro da tela. 
 
 
 
 Mobile Design – Página 9 de 92 
Principais diferenças entre desktop e mobile 
Muitos esquecem que não há mouse com scroll nem teclado físico na 
maioria dos dispositivos móveis e, por isso, deixam de reservar os espaços 
necessários para o toque, o scroll e outros movimentos. Por causa disso, muitas 
vezes os usuários acabam, sem querer, acionando um comando quando queria 
apenas subir o conteúdo. A seguir, veremos outras diferenças cruciais. 
▪ Não há como prever onde os usuários irão interagir com seu aplicativo. 
Os notebooks impulsionaram a história da computação móvel, mas, agora, 
as pessoas levam a computação na palma de suas mãos e esperam que tudo 
funcione no lugar e na hora que elas desejam. 
Pode ser numa fábrica escura e barulhenta, pode ser no sofá da sala, na 
rua sob um sol a pino ou, pior ainda, em cima de uma moto. 
 
▪ Nem todo mundo está numa grande metrópole. 
No Brasil, mais de 15% da população vive na área rural, sem contar as 
cidades de médio porte. Ou seja, nem sempre as pessoas estarão dentro de um 
metrô ou naquelas ruas modernas e bem pavimentadas como nos comerciais de 
TV. Então não se assuste ao saber que seu aplicativo foi acessado em cima de um 
trator. 
▪ Sua interface deve atender às necessidades dos usuários, as quais 
mudam dependendo de onde estão. 
 
 
 Mobile Design – Página 10 de 92 
Um clássico estudo feito pelo Google descobriu que um mesmo usuário 
pode ter até 3 perfis diferentes dependendo do contexto: 
‒ “O Repetitivo” – Checa a mesma informação várias vezes, como status 
do Facebook, Instagram etc. 
‒ “O entediado” – Geralmente é quando precisa de um passatempo, 
como esperando uma conexão em um aeroporto, dentro de uma 
viagem longa etc. Esse perfil é muito semelhante ao internauta 
comum. 
‒ “O apressado” – Quer encontrar o que precisa com urgência, como 
uma agência bancária ou o trajeto para o aeroporto. Nesse caso, 
utilizar as APIs de georreferenciamento são bastante úteis. 
▪ As interfaces clássicas de Web podem não funcionar bem. 
Lembre-se não só a tela é menor, mas a conexão e o contexto de uso são 
bem diferentes em mobile. Por isso, privilegie a informação relevante e faça com 
que o layout seja adaptado ao dispositivo. 
▪ Não existe interface padrão para todos os dispositivos mobile. 
iOS e Android são bastante distintos entre si em termos de interface. Cada 
um deles tem sua particularidade e seria um erro criar a mesma interface para 
todos. 
▪ Não há muito espaço para expor sua marca. 
Apesar de a maioria dos clientes caírem na tentação de pedir para aumentar 
o logotipo, em mobile isso deve ser feito com bastante cuidado. Nesse caso, o 
melhor é seguir a identidade visual da empresa ou produto. 
 
 
 
 
 Mobile Design – Página 11 de 92 
▪ Tamanho é documento. 
Se em laptops e desktops você pode usar barras laterais, banners e menus 
extensos, lembre-se que, agora, você deve dar importância à tarefa a ser 
executada. 
Dê preferência a uma tarefa-chave por tela. Pergunte a si mesmo: “Quais 
são as ações e comandos essenciais para a execução de uma tarefa, e quais deles 
eu posso deixar para uma tela secundária? 
▪ Não deixe que sua interface exija muita digitação de texto. 
Digitar em smartphones já é difícil, ainda mais quando estamos em 
movimento. Por isso, faça com que sua interface possua comandos frequentes à 
vista. Seguem abaixo algumas dicas que podem ser úteis: 
‒ Adote padrões inteligentes e orientados ao objetivo da tarefa; 
‒ Deixe algumas configurações como default para o usuário não ter que 
configurar tudo; 
‒ Ofereça ao usuário uma lista de opções de escolha em vez de ter que 
digitá-las; 
‒ Ofereça a opção de inserção de texto por voz. 
▪ Desenhar para diferentes telas e densidades pode ser doloroso. 
Lembre-se que não só os tamanhos são diferentes, mas a densidade de 
pixels também varia. Dessa forma, um quadrado de 80px de largura pode aparecer 
maior ou menor dependendo do aparelho. Densidade é a quantidade de pixels em 
uma polegada linear de tela. Por exemplo, o iPad Air e o Galaxy Tab 3 possuem 
dimensões semelhantes, mas o primeiro tem uma densidade de 264 ppi (pontos por 
polegada) enquanto o segundo tem apenas 149 ppi. Isso significa que o quadrado 
acima visto nesses dois aparelhos terá tamanhos diferentes, ou seja, no iPado 
quadrado terá quase a metade do tamanho que no Galaxy. 
 
 
 Mobile Design – Página 12 de 92 
▪ Usuários mobile não são tão fiéis. 
Devido a imensidão de opções disponíveis, usuários desistem facilmente de 
um aplicativo que não lhe agrada em algum aspecto, seja funcional, estético ou 
qualquer outro que afete a sua experiência de uso. Por isso, tome cuidado em fazer 
uma interface agradável, e com uma experiência rica. 
O principal efeito da portabilidade é que as pessoas usam esses 
dispositivos nos mais variados lugares e contextos. 
 
Mobile Web. Ou melhor dizendo... Web 
Tim Benners-Lee, considerado por muitos o maior gênio vivo da história, foi 
o primeiro ser vivo a publicar uma página feita na linguagem HTML em um servidor 
de acesso público. 
Figura 3 – Primeira página em HTML 
 
Página: http://info.cern.ch/hypertext/WWW/TheProject.html. 
http://info.cern.ch/hypertext/WWW/TheProject.html
 
 
 Mobile Design – Página 13 de 92 
Desde que criou o conceito Web, Tim Benners-Lee pensou sua grande 
invenção como algo universal e de acesso irrestrito: 
"O princípio de design mais importante para a utilidade da Web e seu 
crescimento é a universalidade".1 
Brad Frost, um dos criadores do conceito Atomic Design, argumenta que 
não existe essa história de “Desktop Web” ou “Mobile Web” ou “qualquer-dispositivo 
Web”. O que existe de fato é a Web como foi pensada desde o início, ou seja, 
universal. Muitos chamam essa postura de Agnostic Web, dando a entender que a 
Web precisa funcionar em qualquer dispositivo que seja capaz de rodar uma página 
HTML. 
Figura 4 - Agnostic Web. 
 
 
 
1 Tim Brenners Lee. 
 
 
 Mobile Design – Página 14 de 92 
Então qual é, de fato, a diferença entre Mobile e Desktop? 
Como foi dito, a Web é universal, mas o que muda é a abordagem. Não 
podemos simplesmente achar que nosso website que funciona até bem no Desktop 
ficará perfeito no Mobile. Como vimos, há uma série de diferenças de hardware, 
conexão, telas, gestos, paradigmas de uso, enfim... não dá para encarar essas 
mídias como se fossem a mesma coisa. 
Além disso, basta observarmos os números para saber que os dispositivos 
móveis já dominam o mercado há alguns anos. Foi no ano de 2014 que aconteceu a 
tal “virada” em que o número de usuários móveis ultrapassou o número de usuários 
desktop. 
Figura 5 – Usuários Mobile (milhões). 
 
E para reforçar a premissa de que a Web deve ser universal e não orientada 
ao dispositivo dominante no mercado, veja o gráfico a seguir: 
 
 
 
 Mobile Design – Página 15 de 92 
Figura 6 – Distribuição das plataformas de acesso à web por país. 
 
Aqui podemos constatar que a tendência mais forte é o acesso multi-
plataforma. Ou seja, o volume de acesso por apenas uma plataforma é mais 
exceção do que regra. 
 
No entanto, como podemos ver acima, é inegável que ficamos mais tempo 
na Web via Mobile do que em outra plataforma. 
 
 
 
 Mobile Design – Página 16 de 92 
É aí que aparece nossa oportunidade 
No gráfico a seguir, podemos ver como ainda estamos desperdiçando 
grandes oportunidades de lucro ao perceber que a taxa de conversão (relação entre 
acesso e compra) no Desktop é muito superior ao Mobile. 
Figura 7 – Tendência de conversão por dispositivo. 
 
Fonte: https://www.statista.com/statistics/918503/worldwide-online-shopper-
conversion-rate-by-device/. 
O gráfico acima, junto com os outros anteriores, nos leva a algumas 
constatações importantes: 
‒ Existe um vasto mercado ainda inexplorado; 
‒ Logo, há muito trabalho a ser feito; 
‒ A era do “desktop only” já passou; 
‒ Publicar um site que funciona em apenas uma das muitas plataformas 
é um suicídio comercial. 
Resumindo, se você pretende entrar no mundo do desenvolvimento/criação 
para dispositivos móveis, é bom estar bem animado, pois temos muito trabalho a 
fazer. 
https://www.statista.com/statistics/918503/worldwide-online-shopper-conversion-rate-by-device/
https://www.statista.com/statistics/918503/worldwide-online-shopper-conversion-rate-by-device/
 
 
 Mobile Design – Página 17 de 92 
Padrões de interação mobile 
Veja a seguir alguns padrões de interação que são típicos de dispositivos 
mobile, sobretudo os de tela sensível ao toque (touch screen). 
▪ Gesture 
Um gesto é, basicamente, um movimento de um dedo, mão ou outra parte 
do corpo para expressar uma ideia, desejo ou acionar um comando. 
Inicialmente, alguns dispositivos só podiam processar o toque de um dígito 
por vez, mas hoje em dia, os dispositivos multitoque podem perceber gestos feitos 
por um dedo ou mais simultaneamente. 
Cada gesture recebe um nome específico. O problema é que esse nome 
varia em diferentes plataformas. Por isso, é recomendável ler a documentação de 
Design Pattern de cada plataforma. 
Figura 8 - Documentação sobre gestures disponibilizada pelo iOS e Android 
em seus respectivos sites de desenvolvimento. 
 
Luke Wroblewski criou um excelente guia de referência de gestures que 
está disponível em PDF no link abaixo: 
‒ http://static.lukew.com/TouchGestureGuide.pdf 
Em seu site ele ilustra e explica gestos fundamentais, bem como a forma 
como eles diferem em todas as plataformas. Veja alguns exemplos: 
http://static.lukew.com/TouchGestureGuide.pdf
 
 
 Mobile Design – Página 18 de 92 
Figura 9 - Alguns gestos (gestures) ilustrados por Luke Wrobleswski. 
 
▪ Feedback 
São ações e métodos que atraem a atenção do usuário para uma 
informação importante. 
Algumas orientações: 
‒ Alertas e demais mensagens devem ser usadas com moderação para 
que o usuário saiba que se trata de uma informação crítica. Exagerar 
nesse quesito faz com que o usuário não dê importância aos alertas. 
‒ As mensagens devem ser claras e objetivas, explicando o que 
aconteceu, a causa e oferecer uma saída com comandos e botões 
claros. 
‒ As notificações devem ser sucintas e informativas, sem interferir no 
que o usuário está fazendo, de modo que ele possa responder à 
notificação ou descartá-la com facilidade. 
‒ Não quebre o fluxo de interação do usuário para exibir alertas. 
▪ Orientação 
Trata-se da posição do dispositivo em relação ao solo. Pode ser retrato ou 
paisagem. Essa posição é detectada pelo acelerômetro disponível em quase todos 
os aparelhos atuais. 
 
Pinch para zoom out, 
spread para zoom in
dragging para mover, 
ajustar, rolar e posicionar
Press and hold para abrir um 
item ou menu de contexto
Flick para próxima tela 
ou rolagem rápida
 
 
 Mobile Design – Página 19 de 92 
Figura 10 - Orientações: Retrato (Portrait) à esquerda e Paisagem (Landscape) 
à direita. 
 
No projeto de sua interface, considere as diferenças de orientação a fim de 
propor novas possibilidades de interação. Em sites responsivos, é possível detectar 
com CSS qual é a orientação do dispositivo. 
 
 
A diversidade no ecossistema mobile 
O sucesso do Android trouxe um novo desafio para os desenvolvedores de 
aplicativos e de Web, sobretudo para os smartphones. O mais surpreendente é que, 
há apenas 8 anos atrás a Apple havia lançado uma tendência que é seguida por 
muitos até hoje: o iPhone. 
No entanto, essa diversidade é muito maior do que pensamos. Veja os 
exemplos a seguir. 
 
 
 
 
 Mobile Design – Página 20 de 92 
Figura 11 - Smartphone de duas telas criado pela operadora de telefonia russa 
Yota. 
 
Figura 12 - Tablet da marca Nabi criado para fins educativos. 
 
Embora muitos consumidores ainda compram dispositivos projetados, 
desenvolvidos e comercializados por grandes empresas, isso pode não ser o caso 
daqui para frente. 
 
 
 Mobile Design – Página 21 de 92 
Se os padrões atuais continuarem, consumidores ao redor do mundo irão 
cada vez mais ter a mesma probabilidade de adquirir dispositivos desenvolvidos por 
"outros" fabricantes, como mostra o gráfico a seguir. 
Figura 13 - Venda de Smartphones para usuários finais no mundo por 
fabricante em 2020.Fonte: https://www.counterpointresearch.com/global-smartphone-share/. 
Com essa diversidade, podemos esperar uma vasta gama de tamanhos e 
densidades diferentes. 
 
Tamanhos e densidades de telas 
Entendemos por densidade uma quantidade de coisas inseridas em um 
espaço limitado, certo? Por exemplo, falamos em densidade populacional para 
descrever a proporção entre a quantidade de pessoas inseridas em um espaço. Ou 
mesmo na Física, o termo pode ser entendido como a quantidade de matéria 
presente em um volume. 
https://www.counterpointresearch.com/global-smartphone-share/
 
 
 Mobile Design – Página 22 de 92 
Em 2010 a Apple anunciou o iPhone 4, o primeiro smartphone da “Maçã” 
com tela de alta densidade. No entanto, como o conceito “densidade” se aplica em 
telas gráficas? 
Figura 14 – iPhone 4, o primeiro smartphone da Apple de alta densidade. 
 
Densidade de tela é a quantidade de pixels existente em um determinado 
comprimento de tela física. A medida padrão de densidade é o ppi = pixel per inch 
ou pixel por polegada. 
Na grande maioria dos computadores desktop, a densidade dos monitores é 
de 72 ppi. Ou seja, em uma polegada do seu monitor, cabem 72 pixels. 
Nos computadores da Apple munidos com a tecnologia Retina Display, a 
densidade chega a 288 ppi. 
Há uma tendência por parte da indústria de smartphones, tablets e TVs em 
aumentar a densidade das telas para valores maiores que 300 ppi. Isso se deve ao 
fato de que, num futuro próximo, o padrão full-HD, cuja resolução máxima é de 1920 
por 1080 pixels, será totalmente substituído pelo padrão 4K que chega a ter 4 
vezes mais resolução que o anterior. 
 
 
 Mobile Design – Página 23 de 92 
O iPhone 4 e o Samsung Glalaxy SIII foram um dos primeiros a 
ultrapassarem a marca dos 300 ppi. 
Essa diferença entre densidades e tamanhos de tela pode ser problemática 
para nós desenvolvedores. Em telas com diferentes densidades, um elemento visual 
com a mesma medida em pixels, terá tamanhos “físicos” diferentes. Veja o exemplo 
a seguir. 
Figura 15 – Diferentes densidades. 
 
O retângulo amarelo possui a mesma medida em pixels (4 x 2), mas 
aparece em tamanhos diferentes em telas com densidades maiores. 
A grande diversidade de dispositivos Android torna essa tarefa mais difícil. 
No caso do iPhone, por ser uma tecnologia fechada, esse problema é minimizado. 
Por causa da grande quantidade de fabricantes de telas e dispositivos com 
Android, o Google criou um mecanismo que permite com que os desenvolvedores 
possam criar layouts usando uma nova medida que independe da densidade da 
dela - o dp (density independent pixel). 
Como o dp funciona? 
O dp(pronuncia-se “dip”)é uma espécie de “pixel virtual” para designar 
dimensões e posicionamento. Elementos gráficos em dp são escalonados 
automaticamente para o tamanho apropriado, independentemente do tamanho ou 
da densidade da tela. Veja abaixo o mesmo retângulo mostrado anteriormente, só 
que dessa vez, com as medidas em dp e não mais em pixels. 
Tela de densidade baixa Tela de densidade média Tela de densidade alta
 
 
 Mobile Design – Página 24 de 92 
Figura 16 - 1dp corresponde a 1px em uma tela de 160ppi. 
 
E quanto às imagens? 
Cada imagem (ícone, botão, símbolo etc.) deverá ser fornecida em 
tamanhos diferentes a fim de suprir todas as densidades possíveis. Isso pode 
causar sérios problemas de performance, já que os arquivos das imagens ficarão 
cada vez maiores. Por isso, gráficos em SVG são mais apropriados, já que são 
vetores e, por isso, são escalonáveis. Abordaremos esse assunto com profundidade 
mais adiante. 
No gráfico a seguir, temos uma estatística de 2020, fornecida pelo Google, 
sobre o uso de dispositivos de alta densidade. 
Figura 17 – Uso de telas de alta densidade no mundo. 
 
Fonte: http://developer.android.com/about/dashboards/index.html. 
Tela de densidade baixa.
O botão foi reajustado em 
seu tamanho “físico”.
Tela de densidade média.
É usada como a base de 
cálculo. (160 ppi)
Tela de densidade alta.
O botão foi reajustado em 
seu tamanho “físico”.
http://developer.android.com/about/dashboards/index.html
 
 
 Mobile Design – Página 25 de 92 
De fato, a chegada dos dispositivos Android provocou um desafio 
gigantesco no ofício do UX designer. Por causa dessas peculiaridades, é preciso 
adotar alguns métodos e técnicas, (novos e já consolidados) para a condução 
segura e eficiente de um projeto para dispositivos móveis. É disso que vamos falar 
agora. 
 
 
 
 
 
 
 
 
 Mobile Design – Página 26 de 92 
Capítulo 2. Conduzindo um projeto mobile 
É bastante comum sermos procurados por uma pessoa ou empresa 
dizendo: 
“Olha, eu tenho uma ideia para um aplicativo. Quanto custa e quanto tempo 
leva pra fazer?” 
Responder a essa pergunta instintivamente pode ser uma grande armadilha. 
Basear-se em estimativas para “chutar” um valor e um prazo pode levá-lo a um 
prejuízo difícil de recuperar. 
Portanto, é extremamente importante que você faça um planejamento 
baseando-se nas etapas que você ou sua empresa adotam. 
 
Briefing de projetos mobile 
Uma das melhores maneiras de começar esse planejamento é criando um 
documento chamado briefing.Trata-se de um documento que contempla, de forma 
generalista, todas as características de um projeto. 
O briefing ainda ajuda a dimensionar melhor o projeto e seus custos, além 
de esclarecer todas as nuances tanto para a equipe quanto para o cliente. Este, por 
sua vez, poderá ter uma noção muito mais fiel de quais são os custos, etapas e o 
que mais envolve a criação e desenvolvimento de um produto mobile. 
A construção de um briefing é um evento que vai esclarecendo passo-a-
passo, para ambas as partes, quão complexo é o produto. 
Etapas típicas de um projeto mobile 
A seguir, apresentaremos um fluxo de etapas de um típico projeto mobile. 
Existem várias outras abordagens no mercado e na literatura, com os quais você 
 
 
 Mobile Design – Página 27 de 92 
pode estar mais familiarizado, mas essas são apenas algumas etapas mais típicas e 
que podem ser adaptadas em qualquer cenário. 
1. Descoberta 
Aqui se faz um levantamento dos objetivos gerais do projeto, usuários, 
stakeholders e métricas de sucesso. 
2. Planejamento estratégico 
Aqui nós identificamos os usuários finais e suas necessidades, para 
conduzir o projeto centrado no usuário. Recomenda-se fazer uma análise SWOT a 
fim de determinar se a estratégia está correta e, claro, elaborar personas (como 
visto no módulo anterior). Por fim, criamos um cronograma com as estimativas de 
tempo e entrega. 
3. Design 
Aqui começam os trabalhos de prototipagem, testes com usuários e layout. 
Uma vez que o design e a identidade visual estão concluídos, começa o 
desenvolvimento. 
4. Desenvolvimento 
Esta é a fase em que são feitas as implementações nas linguagens e 
plataformas escolhidas. Hoje em dia os processos ágeis dominam o mercado, e é 
essa etapa que é subdividida em sprints com entregas iterativas. 
5. Lançamento 
Com o desenvolvimento e os testes concluídos, é hora de lançar o produto. 
Esse lançamento pode acontecer em um ambiente interno ou para usuários 
testadores. 
 
 
 
 
 Mobile Design – Página 28 de 92 
Elementos do briefing 
1. Introdução 
Aqui você deve perguntar ao cliente sobre o que o motivou a criar um 
aplicativo. Tente descobrir se é apenas uma maneira que entrar no mercado ou se é 
para atender a uma necessidade real e registre o que descobriu. Uma boa maneira 
de se descobrir isso é fazendo uma análise SWOT (um gráfico em que são 
mapeadas as forças, fraquezas, oportunidades e ameaças. Para saber mais sobre 
isso acesse: http://goo.gl/a0E2jW). 
2. Objetivos 
É, basicamente, mapear o problema e os objetivos de uso. O que os futuros 
usuários alcançarão com seu produto? Que vantagens eles terão? O produto 
resolve algum problema específico? Você consegue descrevê-lo? 
Veja se os objetivos são:a) específicos; 
b)mensuráveis; 
c)atingíveis; 
d)oportunos. 
Isso irá ajudar o planejamento de marketing no lançamento do produto, já 
que nenhum aplicativo se “vende” sozinho. 
3. Contexto de uso 
Baseando-se nos objetivos, você consegue identificar como e onde as 
pessoas utilizarão seu produto? 
Por exemplo, se for um aplicativo para corridas, é presumível que este será 
usado na rua, sob o sol e em movimento. Se for um aplicativo para gestão de 
clínicas, podemos pensar que este será usado em ambientes internos. 
http://goo.gl/a0E2jW
 
 
 Mobile Design – Página 29 de 92 
Com este contexto mapeado, teremos uma ótima fonte de consulta tanto 
para o design, quanto para o planejamento dos testes. 
4. MVP – Mínimo produto viável (Minimal Viable Product) 
É comum que, durante a reunião de briefing, você e o cliente se empolguem 
em listar várias e várias funcionalidades diferentes para seu produto. 
Entretanto, é importante definir quais são as funcionalidades que deverão 
atingir os objetivos principais e resolver os problemas-chave definidos 
anteriormente na data de lançamento. 
Deixe o MVP bem esclarecido para todos, a fim de não gerar falsas 
expectativas no cliente e nem desmotivar a equipe com o acréscimo de trabalho 
durante o projeto. 
As demais funcionalidades podem ser adicionadas em versões posteriores. 
Por incrível que pareça, usuários gostam de perceber que o aplicativo está em 
evolução e com novas funcionalidades sempre surgindo.No entanto, é importante 
definir com o cliente como essas novas funcionalidades serão implementadas. 
5. Dispositivos, plataformas e pessoas 
A escolha da plataforma influencia bastante no custo e no prazo de 
desenvolvimento. 
No mercado atual, o que podemos ver é basicamente uma corrida com 
apenas 2 carros: Apple e Android. 
Mesmo que você opte por construir “apenas” para essas duas plataformas, 
fique atento para não cair em um erro muito comum: planejar o lançamento do 
aplicativo nas duas plataformas ao mesmo tempo. O ideal é que o produto seja 
desenvolvido para uma plataforma por vez, por três motivos: 
1. Quaisquer problemas que surgiram desde o desenvolvimento da 
primeira plataforma serão evitados para o segundo. 
 
 
 Mobile Design – Página 30 de 92 
2. Os feedbacks dos usuários da primeira plataforma podem ser úteis 
para o desenvolvimento da segunda que poderá ir ao ar com 
atualizações decorrentes da plataforma anterior. 
3. O risco é menor, já que todas as experimentações já foram feitas 
anteriormente. 
Então, qual plataforma adotar primeiro? Pergunte às pessoas! Faça 
pesquisas on-line usando redes sociais, ferramentas de entrevistas como Survey 
Monkey ou PollDaddy e descubra informações relevantes que poderão nortear sua 
estratégia de negócio. 
Já escolhi a plataforma, agora, qual versão adotar? Converse com seu 
desenvolvedor. Ele saberá melhor quais recursos estão disponíveis em cada 
versão. Por exemplo: seu aplicativo iOS precisa detectar movimento dos usuários 
ou o número de passos que eles dão? Se assim for, isso só é possível na 2ª 
geração do iPhone 5s/iPad Air e iPad Mini, que utiliza novo coprocessador de 
movimento M7 da Apple. 
No caso do Android, você precisa atender ao público do Android 2.3 ou é 
melhor começar do 5.0 (veja as estatísticas em 
http://developer.android.com/about/dashboards/index.html)? 
6. Conteúdo 
Este é outro fator muitas vezes negligenciado. Em caso de um app web, ou 
outro aplicativo de exibição de conteúdo, você deve descobrir quem irá prover o 
conteúdo editorial? Você, a equipe de marketing do cliente ou um terceiro? 
Outra questão importante é se o conteúdo será atualizado. Se sim, como? 
Com que frequência? 
Esse conteúdo será “puxado” de algum site ou webservice? 
 
 
http://developer.android.com/about/dashboards/index.html
 
 
 Mobile Design – Página 31 de 92 
7. Layouts preliminares 
Não pense que basta mudar a orientação do aparelho de retrato para 
paisagem e que tudo irá automaticamente se encaixar de forma perfeita. É preciso 
desenhar e especificar essa parte também. 
Duas das ferramentas mais eficazes para esta etapa são papel e lápis. 
Rabisque algumas ideias no papel e vá aprimorando-as depois. 
Não se preocupe em fazer um belo desenho ou um protótipo de alta 
fidelidade. A ideia aqui é gerar esboços preliminares que irão ajudar a equipe de 
design. 
Se quiser, você poderá usar uma ferramenta bastante útil chamada POP 
(Prototype On Paper). É um aplicativo (Android e iOS) no qual você pode escanear 
seus desenhos e colocar links em cada elemento desenhado e até transições entre 
telas diferentes. 
8. Banco de dados e hospedagem 
Essa é uma questão crítica que, se não for tratada com cuidado, poderá 
arruinar todo o projeto. 
Na medida do possível, tente estruturar o modelo de banco de dados para 
seu produto ou inclua amostras do banco de dados atual que seu cliente já dispõe 
para que seus desenvolvedores possam analisá-lo. 
Dependendo do estado e da qualidade da estrutura do banco, pode ser que 
você tenha que incluir os custos da remodelagem ou mesmo terceirizar essa parte. 
Deixe claro de quem é a propriedade do banco. Você, o cliente ou a 
empresa terceirizada. 
Caso seu aplicativo precise de puxar ou alimentar um banco externo, 
especifique se a hospedagem (hosting) contratada que irá abrigar o banco de 
dados. 
 
 
 Mobile Design – Página 32 de 92 
Mesmo a hospedagem sendo própria (fornecida por você) ou contratada, 
anote todas as informações técnicas e repasse-as para sua equipe de 
desenvolvimento. 
9. Política de suporte 
Se você ficar responsável por prestar suporte para os usuários, certifique-se 
de que você conta com uma estrutura para: 
a. Aceitar feedbacks através de determinados canais (telefone, chat, e-
mail etc.); 
b. Ouvir e responder aos feedbacks. 
Lembre-se que toda e qualquer definição nesse quesito deverá entrar na 
sua planilha de custos. 
Itens de suporte ainda incluem correção de bugs, hospedagem e 
compatibilidade com novas versões de software. 
10. Lançamento 
Como dito, aplicativos não se promovem sozinhos. Foi-se o tempo em que 
os usuários ficavam ansiosos para baixar um aplicativo novo assim que a aparecia 
na loja. Fazer o marketing do aplicativo não é uma tarefa trivial. É preciso uma 
estratégia de curto, médio e longo prazo para que o marketing realmente funcione. 
Dessa forma, é preciso que o briefing mostre quais são os canais de 
marketing que serão usados para anunciar seu aplicativo. 
Esse é um ótimo exercício para ver como criar um produto sustentável e de 
sucesso. 
11. Prazos 
Leve em consideração todos os requisitos técnicos, escopo e equipe antes 
de especificar um prazo. 
 
 
 Mobile Design – Página 33 de 92 
Não planeje o fim do projeto para uma data específica determinada por 
outros fatores como um grande evento ou uma festa de abertura. 
Caso o prazo final seja inflexível, nesse caso, é melhor renegociar o escopo, 
pautando-se na sua capacidade produtiva. 
O documento de briefing não acaba aqui. 
Uma das melhores coisas sobre esse artefato é que ele é o principal ponto 
de partida para novas discussões e descobertas. 
Uma relação saudável entre cliente e desenvolvedor começa com um 
briefing bem escrito e com todas as funcionalidades descritas e programadas (MVP 
e atualizações). 
O briefing bem feito é uma ótima fonte de referência, que serve como base 
para a equipe de desenvolvimento, evitando surpresas ao longo do projeto. 
 
Processo orientado a UX 
Como sabemos, UX (User Experience) aborda uma série de práticas, todas 
elas voltadas para garantir a melhor experiência de uso possível. No entanto, os 
frutos dessa “filosofia” vão além da facilidade de uso. Podemos dizer que um bom 
UX é também ótimo para o negócio, pois visa garantir que consumidores/usuários 
fiquem sempre satisfeitos. E isso, claro, pode sim resultar em mais receita para 
negócio. 
Comisso, a fim de se aproximar ao máximo desses objetivos, o mercado 
adota uma postura como a descrita no diagrama a seguir. 
 
 
 
 
 
 Mobile Design – Página 34 de 92 
Figura 18 - Ciclo de design. 
 
Trata-se de um processo cíclico que objetiva a melhoria e a descoberta 
contínua. Os processos de User Experience (UX) e Design Thinking (DT) se 
assemelham em muitos aspectos. 
Dessa forma, não há como fugir do fluxo 
Investigar – Idear – Prototipar – Testar 
 ... e repeti-lo enquanto for necessário. 
 A seguir, iremos detalhar cada uma dessas etapas. 
Investigação - User research 
Resultado do processo: Personas. 
Para fazer a modelagem de usuários em forma de personas, é preciso 
observar, registrar, analisar e identificar as características mais relevantes que 
distinguem um grupo do outro. As estratégias são: 
‒ Observação direta ou indireta; 
‒ Entrevistas; 
‒ Análise de logs de acesso (Analytics ou similares); 
‒ Social Media. 
 
 
 Mobile Design – Página 35 de 92 
 Investigação - User research 
Resultado do processo: Mapa de empatia. 
O Mapa de Empatia é uma forma colaborativa de visualizar, identificar, 
elucidar e comunicar a todo o time sobre o perfil psicológico dos usuários (da 
Persona, no caso). 
Figura 19 - Mapa de empatia (xplane.com). 
 
No centro do mapa fica a persona, identificada pelo nome. À sua volta, 
colamos post-its com informações sobre o que a persona: 
a. Pensa e sente. 
b. Vê. 
c. Ouve. 
d. Fala e faz. 
Abaixo, opcionalmente, colocamos suas dores (medos, frustrações, 
anseios) e ganhos (metas de sucesso, objetivos, esperanças). 
 
 
 Mobile Design – Página 36 de 92 
Ideação - Requisitos de uso 
Resultado do processo: User Story Mapping. 
O USM organiza as histórias de usuário de forma útil para ajudar a 
compreender as features do sistema, identificar falhas e planejar releases que 
oferecem valor aos usuários e ao negócio. 
Com esse mapa, todo o time tem noção da completude do produto e suas 
prioridades. 
Primeiro, agrupa-se as histórias por funcionalidade. Cada funcionalidade é 
alinhada horizontalmente por ordem de importância (valor). Debaixo de cada 
funcionalidade, as histórias são organizadas verticalmente, também por ordem de 
importância (valor). 
Figura 20 - User Story Mapping. 
 
Fonte: Jeff Patton’sThe New User Story Backlog Is a Map - AgileProductDesign.com. 
 
 
http://www.agileproductdesign.com/blog/the_new_backlog.html
 
 
 Mobile Design – Página 37 de 92 
Ideação - Mínimo Produto Viável (MVP) 
Resultado do processo: MVP e Releases. 
Depois de posicionar as histórias, chega a vez de “fatiar” o mapa a fim de 
estabelecermos os releases do nosso projeto. 
Geralmente, o primeiro release é o que chamamos de MVP ou Minimum 
Viable Product, isto é, Produto Mínimo Viável. 
Figura 21 - USM resultando em na definição do MVP. 
 
Fonte: Jeff Patton’s The New User Story Backlog Is a Map - AgileProductDesign.com. 
Prototipagem - Materializando as histórias de usuários 
Resultado do processo: Protótipos em papel. 
Protótipos em baixa fidelidade ou protótipos rápidos (geralmente feitos em 
papel), são úteis para validar ideias dentro do time, ou seja, esse não é um artefato 
que deva ser entregue ao cliente. 
Também não servem como documentação de projeto, pois são voláteis a 
mudanças e são frutos de uma obra coletiva. 
http://www.agileproductdesign.com/blog/the_new_backlog.html
 
 
 Mobile Design – Página 38 de 92 
Apesar de essa atividade ser atribuída ao UX designer, o protótipo em papel 
pode e deve receber inputs de várias pessoas. 
Ao final desse processo, já teremos uma ideia mais palpável de como será 
nosso produto e o grau de incerteza é bem menor. 
Prototipagem - Evoluindo os protótipos em papel 
Resultado do processo: Wireframes, Layouts. 
Os wireframes são uma espécie de planta-baixa de uma casa. Aqui,no 
entanto, eles servem para aumentar a consistência e a compreensão da ideia. 
Servem também para: 
‒ Simular alguns comportamentos de uso; 
‒ Testar o posicionamento de elementos de interação como botões, 
formulários, slides, blocos de texto; e 
‒ Realizar testes de usabilidade e especificar e documentar soluções. 
Teste - Colocando nossa ideia à prova 
Resultado do processo: Problemas e mais ideias :-) 
 Testar é sempre importante em todas as etapas de desenvolvimento. 
Desde a ideação e principalmente na etapa de prototipagem, é necessário 
colocarmos nossa solução à prova. 
Formalmente, os testes com usuários são feitos em protótipos funcionais e 
wireframes. No entanto, isso não significa que a prática do teste deva acontecer 
somente nessas etapas. Quanto mais cedo você conseguir testar a usabilidade da 
sua interface, mais firme será o terreno pelo qual você irá pisar no decorrer do 
projeto. 
Neste bootcamp, teremos um módulo inteiro apenas dedicado a esse 
assunto. No módulo “Métodos e Técnicas de Avaliação” (MTA), você conhecerá as 
 
 
 Mobile Design – Página 39 de 92 
diferentes abordagens de avaliação de usabilidade de uma interface, além de 
aprender a discernir qual é a mais apropriada para cada realidade do projeto. 
 
 
 Mobile Design – Página 40 de 92 
Capítulo 3. Projetando a experiência do usuário 
Uma vez que já registramos as funcionalidades (USM) e já sabemos como é 
o perfil dos nossos usuários (Personas), chega a hora de começar a pensar na 
forma como iremos distribuir a informação em nosso produto. É o que chamamos de 
Arquitetura da Informação. A Biblioteconomia já se debruçou sobre esse tema há 
várias décadas e o Design tira vantagem de todas as teorias sobre o assunto, mas, 
claro, dando sua contribuição no que se refere às técnicas. 
 
Relembrando a Arquitetura da Informação 
Se você concluiu a disciplina de Fundamentos de UX, você deve se lembrar 
do tópico dedicado à Arquitetura de Informação que visa, justamente, dar uma 
“estrutura” no conteúdo e, principalmente, organizar a maneira com a qual as 
pessoas irão navegar de um conteúdo/assunto para outro. 
Se esse assunto não ficou tão bem fixado na sua mente, não se preocupe. 
Nas aulas gravadas em vídeo desta disciplina, esse assunto será abordado 
novamente, mas com uma “ênfase” um tanto diferente, como veremos a seguir. 
Arquitetura da Informação visa garantir que todo o conteúdo esteja 
organizado e categorizado da maneira mais lógica para o usuário. Por isso, elimine 
os achismos e observe seu público. 
E falando em como estruturar a informação, a seguir, temos alguns 
esquemas típicos de navegação em dispositivos móveis. 
 
Esquemas típicos de navegação mobile 
É possível dizer que os dispositivos móveis já têm seu próprio padrão de 
A.I. 
 
 
 Mobile Design – Página 41 de 92 
Enquanto sites responsivos (sites comuns que readaptam seu layout ao 
dispositivo) tendem a seguir os padrões, digamos, mais “clássicos”, os app nativos 
(feitos na linguagem do dispositivo) seguem uma estrutura de navegação já 
consolidada. 
Atenção. 
Os exemplos a seguir são convenções já consolidadas no mercado e não 
regras rígidas. As convenções são soluções que alguém desenvolveu e que tiveram 
boa aceitação. 
1- Hierarquia 
Se assemelha bastante com a estrutura hierárquica de um website. Se você 
estiver em um projeto de site responsivo, é mais adequado seguir este padrão. 
Figura 22 - Exemplo de esquema hierárquico. 
 
Entretanto, nada o impede de melhorar e incrementar a navegação com 
outros esquemas. 
Vantagem: Ajuda a estruturar informações complexas. 
Cuidado: Navegação longa e multifacetada pode ser um problema em telas 
pequenas. 
 
 
 
 Mobile Design – Página 42 de 92 
2- Hub & spoke 
É um padrão que típico no iPhone, no qual o usuário parte de uma tela 
inicial (hub) e navega para as de fora (spokes). Para navegar para outro spoke, é 
preciso voltar ao hub. Não há como navegar entre spokes. 
Figura 23 - Exemplo do esquema Hub & spoke. 
 
Vantagem: Útil para ferramentas com multifunçõesou que possuem 
restrições de navegação em que o usuário precisa interagir com uma tela por vez, 
como numa tela de configurações, por exemplo. 
Cuidado: Não use em casos em que o usuário demanda tarefas múltiplas. 
3- Nested doll 
É um padrão fazer com que o usuário vá aprofundando em detalhe no 
conteúdo. Em condições difíceis, promove uma navegação mais segura e faz com 
que o usuário tenha uma noção mais precisa de onde está e se deve ir para frente 
ou para trás. 
Figura 24 - Exemplo de esquema Nested doll. 
 
 
 
 Mobile Design – Página 43 de 92 
Vantagem: Útil para navegar entre tópicos fortemente relacionados entre si. 
Cuidado: Os usuários não serão capazes de alternar rapidamente entre 
tópicos. Considerar se este padrão ajuda ou atrapalha o usuário a explorar o 
conteúdo. 
4- Tabbed view 
Também chamado de painel de abas, é um padrão já bem difundido e faz 
com que os usuários tenham uma noção rápida do conteúdo todo. 
Figura 25 - Esquema de navegação Tabbed view. 
 
Vantagem: Útil para aplicativos de ferramentas (não de conteúdo) e 
multitarefas. 
Cuidado: Esse padrão é para estruturas simples, não para as complexas. 
5- Dashboard 
Permite uma interface mais detalhada do conteúdo já na tela de abertura. 
Serve para mostrar conteúdos e ferramentas ao mesmo tempo e é mais indicado 
para tablets. 
Figura 26– Esquema Dashboard. 
 
 
 
 Mobile Design – Página 44 de 92 
Vantagem: Útil para aplicativos com ferramentas e conteúdos em tablets. 
Cuidado: Demanda mais espaço e maior habilidade com design de 
interfaces. 
6- Filtered view 
Permite navegar em um conjunto de dados por meio de filtros que, quando 
acionados, exibem o conteúdo relacionado e ocultam os demais. Pode ser útil em 
navegações multifacetadas. 
Figura 27 - Esquema Filterd view. 
 
Vantagem: Útil para aplicativos e sites com grande quantidade de conteúdo 
como vídeos, artigos e imagens. Bom para revistas e sites de conteúdo. 
Cuidado: Como no dashboard, demanda mais espaço e maior habilidade 
com design de interfaces. 
Muitos aplicativos incluem uma barra de navegação que fornece um botão 
claro de volta à tela anterior. No entanto, os usuários também podem navegar para 
trás e para frente por meio do slide. 
Entretanto, a navegação por gestos deve ser usada para 
complementar, e não substituir, ações e navegação baseadas em toque. 
 
 
 Mobile Design – Página 45 de 92 
Sempre que possível, ofereça uma maneira simples e visível de navegar ou 
executar uma ação, mesmo que isso signifique um toque extra ou dois. 
Algumas considerações 
1. Uma boa Arquitetura de Informação leva em conta o modelo mental dos 
usuários. 
2. Um erro bastante comum em organizar conteúdos é pensar uma navegação 
espelhando a estrutura organizacional da empresa. 
3. Lembre-se: para o usuário lá fora, sua estrutura interna e suas siglas podem 
não fazer sentido algum. 
4. Na medida do possível tente sempre validar a arquitetura com usuários 
potenciais. Se não for possível, tente validá-la ao menos com pessoas 
próximas. 
5. Como bem disse Jacob Nielsen, “qualquer teste é melhor que nenhum 
teste”. 
 
Relembrando o que prendemos sobre prototipagem 
Na disciplina de Fundamentos de UX, nós também visitamos o assunto da 
prototipagem de forma mais abrangente. Dessa vez, vamos dar um enfoque 
especial em protótipos rápidos e funcionais, voltados para dispositivos móveis. 
Antes, no entanto, vamos apenas reforçar alguns conceitos: 
▪ Protótipos rápidos ou de baixa fidelidade (alguns autores também 
chamam de “protótipos sujos”) 
São aqueles protótipos que servem para “gerar ideias”, ou seja, é quase 
uma forma de “pensar com as mãos”. Eles começam com alguns rabiscos e 
anotações e terminam com o desenho de algumas telas que, de certa forma, 
 
 
 Mobile Design – Página 46 de 92 
“solucionam” as User Stories mais importantes (sim, aquelas que você escolheu 
durante o User Story Mapping). 
‒ É um método que permite delinear de forma ágil e barata a interface 
de um sistema (web, app, game etc.); 
‒ Devem elucidar a lógica e as regras de negócio do produto; 
‒ É bem barato! (Gasta-se, basicamente, papel, lápis e tempo); 
‒ Possui o fator “engajamento” (por envolver mais pessoas e ter um 
caráter quase lúdico); 
‒ Não precisa ser bonito! (Aliás, a proposta é ser ágil. O foco é na 
experiência de uso); 
‒ Não deve refletir a aparência estética (design); 
‒ Podem ser usados em testes de usabilidade. 
Fazer tudo em papel, ou usar um software? 
Bom, quando o objetivo é gerar ideias, nada como uma oficina com 3 a 5 
pessoas, em uma grande mesa (ou todos em pé diante de um quadro branco com 
canetas para todos). Nessa oficina todos podem rabiscar à vontade, expressar suas 
microideias no papel e gerar bastante discussão. 
No entanto, nada impede que façamos essa atividade remotamente, usando 
alguns recursos tecnológicos para isso, ou, ainda melhor, aproveitar o melhor dos 
dois mundos. Durante a aula interativa vamos realizar uma atividade que, na 
verdade contempla as duas abordagens. 
Hoje em dia, é plenamente possível criar protótipos rápidos, de baixa 
fidelidade em aplicações (web ou desktop) como: 
‒ Mockflow (grátis); 
‒ Balsamiq; 
 
 
 Mobile Design – Página 47 de 92 
‒ Axure; 
‒ UXPin. 
Dá para compartilhar um protótipo feito em papel? 
Perfeitamente! 
Uma boa ferramenta para isso é o Marvel App. Você pode fazer o upload de 
seus desenhos para a plataforma, criar os links de uma tela para outra e, por fim, 
gerar uma URL de compartilhamento para mandar para quem quiser. A Marvel 
ainda torna essa tarefa mais fácil com o aplicativo POP (Prototyping On Paper). 
▪ Protótipos funcionais ou Wireframes: 
São protótipos que simulam o comportamento, funcionalidade e a 
navegação de forma mais semelhante à versão final. No entanto, ainda não 
estamos preocupados com o layout final, ou seja, na hora de fazer um 
wireframe, não se preocupe com: 
‒ Paleta de cores; 
‒ Tipografia; 
‒ Branding/marca; 
‒ Imagens reais (as que serão usadas quando o app for publicado 
oficialmente). 
O objetivo principal durante a criação do wireframe, além de simular o fluxo 
de operação, é elaborar a estrutura ea disposição dos componentes e informações 
na tela. 
Importante: 
Ainda que não estejamos preocupados com a estética do protótipo, é 
importante já considerarmos algumas dimensões (tamanhos) dos elementos, como: 
 
 
 Mobile Design – Página 48 de 92 
‒ Parágrafos; 
‒ Botões; 
‒ Títulos; 
‒ Listas; 
‒ Campos de formulários; 
‒ Demais componentes. 
De preferência, opte por usar textos mais fidedignos ou mais próximos do 
real. Exemplo: Numa tela que mostra detalhes de um filme e série de TV, ao invés 
de criar um título com um mero “xxxxx”, ou um simples “nome aqui”, ou ainda 
“Lorem ipsum”, prefira usar títulos reais, como “How I Met Your Mother”, ou 
“Friends” ou ainda “Corra”. 
Isso vai ser útil para você já prever onde o seu layout pode quebrar, com 
títulos que são muito longos ou muito curtos. 
 
 
 
 Mobile Design – Página 49 de 92 
Capítulo 4. Design de interface 
O diagrama a seguir reflete a “psicologia das ações” que, de forma bem 
simplificada, é uma abstração de todas as ações que nosso cérebro executa toda 
vez que interagimos com alguma interface. Essa interface pode ser praticamente 
qualquer objeto, desde uma escova de dente ao interruptor da luz do seu quarto, ou 
mesmo um aplicativo no seu smartphone. 
Figura 28 - Psicologia das ações. 
 
Fonte: Cognitive engineering - 
https://onlinelibrary.wiley.com/doi/full/10.1002/wcs.1204. 
Ou seja, quando há uma discrepância entre a nossa intenção inicial e a 
resposta que a interface nos dá, acontece o que chamamos de “ruptura na 
interação”. 
Nosso trabalho como designers é fazer o máximo para garantir esse 
“encaixe” entre a intenção e a resposta da interface. Daí vem a importância de se 
observar os usuários e aprender com eles. Lembre-se:“Você não pensa como seus usuários.” 
É bom ressaltar que produtos desenhados para “apenas” atender às 
necessidades do dono do negócio tendem a fracassar no mercado. Steve Mulder, 
Golfo de execução
Formulação da 
intenção
Especificação da 
sequencia de 
ações
Execução das 
ações
Percepção do 
estado do sistema
Interpretação do 
estado do sistema
Avaliação em 
relação à intenção
Golfo de avaliação
https://onlinelibrary.wiley.com/doi/full/10.1002/wcs.1204
 
 
 Mobile Design – Página 50 de 92 
autor do livro “The User Is Always Right”, sugere que o design é que deve se moldar 
em função do usuário, e não o contrário. 
Donald Norman, talvez o principal nome quando se fala em UX em todo o 
mundo, escreveu um livro chamado O Design do Dia a Dia. Esse livro se tornou um 
dos clássicos mais importantes da área e, por isso, é uma leitura obrigatória para 
quem quiser avançar nesta área. Nesse livro estão enumerados os seis princípios 
de design que servem para qualquer produto. 
1. Visibilidade; 
2. Feedback; 
3. Restrições; 
4. Mapeamento; 
5. Consistência; 
6. Affordance. 
Figura 29 - Livro O Design do Dia a Dia (Donald Norman). 
 
 
 
 
 
 
 Mobile Design – Página 51 de 92 
A Lei de Fitts 
A Lei de Fitts descreve a facilidade (ou assertividade) com a qual um 
usuário pode acertar um alvo – no nosso caso, um elemento interativo como um 
botão, umlink, um card, entre outros. A Lei ainda apresenta uma fórmula para 
calcular essa assertividade: 
O tempo que leva para um dispositivo indicador (como o dedo ou o ponteiro 
do mouse) alcançar um alvo é proporcional ao logaritmo da distância do alvo 
dividido pelo tamanho desse alvo. 
T = k log2(D/S + 0.5) 
T = tempo para mover a mão ou ponteiro ao alvo. 
k = aproximadamente 100 milissegundos. 
D = distância entre a mão/ponteiro e o alvo. 
S = tamanho do alvo. 
Ou seja, quanto maior a distância entre ponteiro para um botão/link, por 
exemplo, maior o tempo que o usuário levará para acertá-lo. 
Além disso, quanto maior o alvo, mais fácil será acertá-lo, já que não é 
necessário ser tão preciso. 
Figura 30 - Lei de Fitts e a facilidade de acertar um alvo. 
 
 
 
 Mobile Design – Página 52 de 92 
No gráfico a seguir, temos uma descrição mais cartesiana entre a 
usabilidade e o tamanho do alvo: 
Figura 31 - Lei de Fitts. Relação entre usabilidade e o tamanho do alvo. 
 
Regra 1. Crie alvos maiores 
Alvos maiores são mais fáceis de acertar. Se você é responsável pelo front-
end, certifique-se de que a área clicável seja tão grande quanto a aparência do 
botão/link. 
Figura 32 – Lei de Fitts. Crie alvos maiores. 
 
Mesmo criando alvos maiores, você ainda pode estabelecer prioridades, 
como o exemplo a seguir extraído do Google’s Material Design. 
 
 
Difícil Fácil
 
 
 Mobile Design – Página 53 de 92 
Figura 33 - Diferentes prioridades na interface. 
 
Como podemos ver acima, os botões “add entry”, “view entry” e “learn more” 
possuem uma “importância visual” diferente, ou seja, o comando “view entry” possui 
uma prioridade maior que o botão “learn more”, assim como os botões “add entry” 
e “add to cart”. Essa prática de estabelecer prioridades na interface é uma grande 
ajuda para os usuários que precisam tomar alguma decisão no sistema, já que os 
botões mais “importantes” são mais “fáceis de acertar”. 
Regra 2. Minimize o movimento do cursor 
Quanto mais próximo um alvo, mais rápido é acertá-lo. 
Se você colocar os links e botões que os usuários têm maior probabilidade 
de acessar regularmente ao lado uns dos outros, em vez de distribuí-los pela 
interface, você acelerará a interação, reduzindo a quantidade de pixels que o cursor 
terá que percorrer. 
 
 
 Mobile Design – Página 54 de 92 
No entanto, tome cuidado para não deixar tudo junto e misturado na 
interface. Lembre-se de estabelecer relações e proporções de forma a deixar 
próximos os comandos que têm mais afinidade. 
Figura 34 – O pacote Office da Microsoft agrupa os comandos que estão 
visíveis (aba “Home”) por afinidade. Neste exemplo, podemos ver quatro 
grupos: Clipboard, Slides, Font e Paragraph. 
 
Regra 3. Evite tensão muscular 
Os benefícios de se evitar tensão muscular são mais óbvios quando se 
trabalha com dispositivos incômodos. O exemplo mais proeminente são telas de 
toque verticais, que são normalmente implantadas em ambientes profissionais para 
criar, visualizar e gerenciar grandes conjuntos de dados. 
Figura 35 - Dispositivos que exigem muita tensão muscular por causa da 
necessidade de se manter os braços sempre erguidos. 
 
 
 
 Mobile Design – Página 55 de 92 
No entanto, como toda boa regra, há exceções. Por questões de segurança, 
este pode ser um “mal necessário”. 
Figura 36 - O desbloqueio de tela exige um certo esforço, mas garante mais 
segurança. 
 
 
Regra 4. Explore os Prime Pixels (ou pixels de ouro) 
O conceito de pixels principais afirma que alguns pixels são mais rápidos de 
adquirir do que outros. Cantos e bordas da tela são especialmente rápidos para 
acessar. 
Os menus de contexto, por exemplo, podem ser uma boa aplicação do uso 
dos Prime Pixels, já que este consiste em um conjunto de opções que aparecem no 
mesmo pixel em que foi acionado, ou seja, são menus que aparecem em qualquer 
ponto da interface, sem a necessidade de ter que deslocar o dedo ou o mouse até 
um ponto distante. 
 
 
 
 
 
 
 Mobile Design – Página 56 de 92 
Figura 37 - A lei de Fitts favorece os menus radiais em vez dos menus 
lineares. 
 
Além dos menus radiais, os benefícios de colocar itens nos cantos e bordas 
da tela são que a moldura da tela guia e posiciona o cursor quando ele atinge esse 
local (um grande benefício para aplicações desktop). 
Figura 38 - Cantos e bordas são mais fáceis de acertar. 
 
Uma segunda maneira de gerenciar um grande número de opções são os 
submenus. Embora isso seja possível dentro de menus radiais, isso rapidamente 
sobrecarregará a tela e os fará parecer menos organizados do que os menus 
lineares tradicionais. Nesse quesito, os menus lineares levam vantagem, pois são 
mais fáceis de criar hierarquias. 
 
 
 
 Mobile Design – Página 57 de 92 
Figura 39 - O agrupamento de entradas é feito com mais facilidade em menus 
lineares. 
 
Os menus radiais ou lineares são elementos interativos bastante úteis para 
que possamos escolher entre várias opções. Entretanto, essa profusão de opções 
de escolha pode criar algumas rupturas de interação e, pior, causar ansiedade nos 
nossos usuários. É o assunto do próximo tópico. 
 
O paradoxo da escolha 
Ter muitas opções de escolha é sempre bom, certo? Bom, antes de 
responder esta pergunta, é melhor pensar mais sobre isso e ver o que Barry 
Schwartz diz em seu livro “O Paradoxo da Escolha”. Se preferir, você pode assistir à 
sua palestra no TED Talks que fala exatamente sobre este assunto. 
‒ https://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice 
 
https://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice
 
 
 Mobile Design – Página 58 de 92 
Em resumo, Barry Schwartz diz que uma grande variedade de escolhas 
pode causar ansiedade ou paralisia nas pessoas. Então, a pretensa “liberdade” de 
escolha acaba sendo uma armadilha que afeta nossas vidas. 
Diante desse fenômeno, nós, designers, devemos ter o cuidado de não 
fazer com que nossos usuários também sejam paralisados diante do paradoxo da 
escolha. Tomemos como exemplo a interface do excelente serviço IFTTT ou Zapier, 
que nos oferecem centenas de opções de integração de diferentes serviços. Para 
evitar o paradoxo da escolha, a interface oferece algumas opções pré-criadas, 
fazendo com que o usuário não perca tempo (ou fique paralisado) escolhendo as 
inúmeras opções. 
Figura 40 - Opções pré-configuradas do IFTTT. 
 
Podemos dizer também que o aplicativo Uber faz um bom trabalho nesse 
quesito. Imagine ter que escolher o carro, o modelo/ano/cor, o motorista,a rota? 
Certamente perderíamos muito tempo diante da quantidade enorme de opções e, 
consequentemente, ficaríamos ansiosos (alô Netflix!). 
 
 
 Mobile Design – Página 59 de 92 
Design da informação 
Projetos digitais não demandam apenas o conhecimento das sintaxes dos 
códigos e nem somente a mão de obra técnica para implementá-los. Tais projetos 
envolvem estratégia de desenvolvimento e também de aplicação no mercado. 
Afinal, nosso site precisa cumprir seu papel de sustentar o negócio para o qual ele 
se destina, certo? 
Então vamos citar algumas estratégias a fim de tornar o desenvolvimento 
mais fluido e também garantir o sucesso (comercial ou não) do nosso site. 
Conheça seu público e suas necessidades 
É muito tentador querer encher o layout com coisas supérfluas que os 
usuários não querem, apenas para impor nossa vaidade institucional. Ora, se um 
internauta está visitando seu site, trate a visita com respeito! Ofereça o que ele 
precisa. Se ele está ali é porque está procurando alguma informação ou serviço (um 
produto). 
A charge a seguir exemplifica muito bem como é visitar um site que parece 
que não foi feito para os usuários. 
Figura 41 - Uma charge do xkcd parodiando o que as pessoas querem em um 
site da universidade versus o que elas encontram. 
 
Fonte: https://xkcd.com/773/. 
https://xkcd.com/773/
 
 
 Mobile Design – Página 60 de 92 
Conteúdo é mais importante que navegação 
No desktop, é mais fácil para os usuários procurarem o que querem. Boa 
parte do conteúdo é visível sem scroll. 
Figura 42 – Eye Tracking em site desktop. 
 
Já no mobile, o pouco espaço que temos precisa ser melhor aproveitado. 
Caso não encontremos o conteúdo à primeira vista, precisaremos fazer uma série 
de scrolls e clicar em vários menus até achar o que precisamos. 
No site da Receita Federal, 50% da tela é gasto com o menu de navegação. 
Os outros 50% são gastos com propaganda e conteúdos institucionais. 
 
 
 
 
 
 
 
 
 Mobile Design – Página 61 de 92 
Figura 43 – Desperdício de espaço no site da Receita Federal. 
 
Não podemos desperdiçar o já escasso espaço de tela com outros 
elementos que não sejam o conteúdo em si. Aqui, vale a máxima do Marketing 
Digital: Conteúdo é rei! 
 
Grid é nosso amigo 
Grids (ou grades em inglês) são um recurso muito antigo no design gráfico. 
Elas são usadas para ajudar designers e desenvolvedores a diagramarem as 
páginas de jornais, revistas e cartazes há muitas décadas. 
 
 
 
 
 
 
 
 Mobile Design – Página 62 de 92 
Figura 44 – Grid usado no site da BBC. 
 
No universo do Web Design, sua aplicação é a mesma. Um grid ajuda o 
desenvolvedor a alcançar um alinhamento econsistência eficazes com pouco 
esforço. 
Segundo a definição trazida pelo UXDesign.cc: 
“Grid é uma malha que divide a tela em partes proporcionais e possibilita a 
distribuição do conteúdo de forma uniforme, proporcionando equilíbrio visual e 
estrutural.” 
Zelo com a qualidade do layout 
Dificilmente os usuários irão perceber um grid bem feito a ponto de fazer um 
elogio na sua página de contato. Entretanto, um design com problemas de 
alinhamento pode deixar uma imagem de desleixo. 
Terminologia 
Unidade 
É bloco básico de construção do grid. Várias unidades formam o grid geral. 
 
 
 Mobile Design – Página 63 de 92 
No exemplo a seguir, da BBC, podemos ver um grid de 12 unidades. Cada 
faixa roxa representa uma unidade. 
Figura 45 – Representação das 12 unidades no layout do site da BBC. Alguns 
frameworks denominam as unidades como simplesmente “colunas”. 
 
Gutter 
Do inglês, “calha” é a separação entre as unidades (mostradas em 
amarelo). No design do site/app, a calha representa uma área de respiro entre os 
elementos do layout. 
 
 
 
 Mobile Design – Página 64 de 92 
Coluna 
São os blocos formados por uma ou mais unidades. São as colunas que 
“sustentam” o conteúdo da página. 
 
Campo (linha) 
São os divisores horizontais da página. De preferência, as colunas dentro 
dos campos deveriam ter a mesma altura. 
 
 
 
 
 
 Mobile Design – Página 65 de 92 
As 12 unidades 
A esmagadora maioria dos sistemas de grid disponíveis no mercado possui 
12 unidades. Ou seja, é possível fazer um layout com até 12 colunas, obviamente, 
uma unidade por coluna. 
Doze unidades proporcionam ao desenvolvedor e ao designer uma enorme 
versatilidade, pois são mais fáceis de dividir em 2, 3, 4 e 6 colunas. 
 
Na imagem anterior, podemos ver um layout de 4 colunas, ou seja, 3 
unidades por coluna. Já na imagem a seguir temos um exemplo com 3 colunas 
assimétricas. 
 
 
 
 
 Mobile Design – Página 66 de 92 
Benefícios para o usuário 
‒ Facilita a leitura e o escaneamento dos elementos. 
‒ Melhora a experiência visual. 
‒ Menos esforço cognitivo para interpretar o conteúdo. 
‒ O olho humano percebe a distribuição proporcional dos elementos e 
associa as informações com maior facilidade. 
 
Atomic Design 
Muitas vezes chega aquele momento em que nosso produto cresceu tanto 
que já está difícil de organizar o design de elementos componentes, telas, enfim... é 
fácil se perder no meio de tantos desenhos. Além disso, as chances de nós, 
designers, criarmos inconsistências dentro no nosso próprio design aumenta 
consideravelmente. 
Sejamos francos. Foi-se o tempo em que nós éramos contratados para criar 
um sitezinho com 3 ou 4 telas. Trabalhar como designer de interface hoje em dia é 
muito mais do que fazer layouts. O designer deve pensar e organizar seu trabalho 
de forma sistêmica, organizada e escalável. 
Foi para esse fim que surgiu o Atomic Design. 
O Atomic Design é uma abordagem criada por Brad Frost e publicada como 
livro em 2016 (http://bradfrost.com/blog/post/atomic-web-design/). Sua premissa 
baseia-se na organização e documentação de componentes de interface, utilizando 
a metáfora da química – com alguns ajustes, claro – resultando nas seguintes 
divisões: Átomos, moléculas, organismos, templates e páginas. 
http://bradfrost.com/blog/post/atomic-web-design/
 
 
 Mobile Design – Página 67 de 92 
 
Átomos 
Os átomos são os blocos básicos da matéria. No Design de Interfaces, os 
átomos são nossas tags HTML, como um rótulo de formulário, uma campo de texto 
ou um botão. 
Moléculas 
São grupos de átomos ligados entre si e são as menores unidades 
fundamentais de um composto químico. Essas moléculas assumem suas próprias 
propriedades e servem como a espinha dorsal de nossos sistemas de projeto. 
Por exemplo, um rótulo de formulário, uma entrada ou um botão não são 
muito úteis sozinhos, mas ao combiná-los, como em um formulário, eles podem 
realmente fazer algo juntos. 
Figura 46 - Um conjunto de átomos formam uma molécula. 
 
 
 
 
 
 Mobile Design – Página 68 de 92 
Organismos 
Moléculas nos dão alguns blocos de construção para trabalhar, e agora 
podemos combiná-los para formar organismos. 
Organismos são grupos de moléculas unidas para formar uma seção 
relativamente complexa e distinta de uma interface. No exemplo a seguir, o 
cabeçalho é formado por “moléculas” diferentes entre si. 
Figura 47 - Organismo formado por moléculas. 
 
Templates 
Neste estágio, nós quebramos nossa analogia química para entrar em uma 
linguagem que faz mais sentido para nossos clientes. Templates (modelos) 
consistem principalmente de grupos de organismos costurados juntos para formar 
um layout. Um template pode ser um wireframe, ou um protótipo em baixa/média 
fidelidade em HTML. 
Figura 48 - Template formado por organismos. 
 
 
 
 Mobile Design – Página 69 de 92 
Páginas 
Páginas são instâncias específicas de modelos. Aqui, o conteúdo falso (o 
famoso Lorem ipsum...) é substituído pelo conteúdo real para fornecer uma 
representação precisa do que um usuário verá no final. 
É uma boa oportunidade de rever todo o sistema de design, testar os textos 
muito grandes (ou muito pequenos); um carrinho decompras com muitos ou poucos 
itens; uma busca sem resultados, a paleta de cores, entre outras coisas. 
Figura 49 - Uma página está mais próxima do layout final. 
 
Construir a partir de moléculas até organismos incentiva a criação de 
componentes reutilizáveis, portáteis e independentes. 
Vejamos a seguir o componente de lista do Material Design do Google. Nele 
podemos enxergar a utilização de três subcomponentes que formam a lista: 
1. List (um organismo mais abrangente); 
2. Row (um organismo formado pelo content e por outro elemento que 
possa aparecer como a estrela, por exemplo); 
 
 
 Mobile Design – Página 70 de 92 
3. List item content (a molécula formada pelo texto e pelo avatar). 
Figura 50 - Componente de lista do Material Design. 
 
Fonte: https://material.io/design/components/lists.html. 
Como já dito, nosso design precisa estar pronto para crescer em escala e 
complexidade. Por isso, vale o mantra: 
Não crie telas. Crie sistemas! 
Figura 51 - Exemplo de escala e modularização. 
 
https://material.io/design/components/lists.html
 
 
 Mobile Design – Página 71 de 92 
Um Design System é uma série de estilos, componentes e diretrizes 
individuais usadas para criar a interface do usuário unificada. 
Figura 52 - Mailchimp Pattern Library. 
 
Fonte: http://ux.mailchimp.com/patterns/. 
Figura 53 - Guia de estilo das plataformas web do governo americano. 
 
Fonte: https://designsystem.digital.gov/. 
 
http://ux.mailchimp.com/patterns/
https://designsystem.digital.gov/
 
 
 Mobile Design – Página 72 de 92 
Mobile Guidelines 
As duas principais plataformas Mobile do momento (Android e iOS), 
oferecem aos desenvolvedores uma extensa documentação acerca dos seus 
princípios de design, bem como os padrões estéticos e estruturais para a criação de 
suas interfaces. 
Figura 54 - Guidelines do iOS e Android. 
 
Fonte: https://developer.apple.com/design/, https://material.io/design/. 
 
 
 
 
 
 
 
 
 
https://developer.apple.com/design/
https://material.io/design/
 
 
 Mobile Design – Página 73 de 92 
Capítulo 5. Mobile First 
Esta é a maior tendência no mercado de desenvolvimento Web desde os 
anos 90. No entanto, para começarmos a situar esse conceito, vamos dividir este 
capítulo em 3 partes: A) Expansão, B) Restrições e C) Oportunidades. 
 
A grande expansão em números 
O crescimento da Web móvel superou o crescimento desktop em 8x. O 
tráfego global de dados móveis deve crescer 26x nos próximos 5 anos. 
 
Fonte: ITU, Mark Lipacis, Morgan Stanley Research. 
 
 
 Mobile Design – Página 74 de 92 
 
Segundo a Smart Insights (2017), 33% dos consumidores procuram 
produtos e serviços no site de marca, enquanto apenas 26% o fazem por meio de 
um aplicativo mobile. 
As pessoas passam, em média, 69% do tempo nas redes sociais via algum 
dispositivo móvel. Certifique-se de ter um bom site mobile antes de anunciá-lo em 
alguma rede social. Do contrário o efeito poderá ser prejudicial. 
 
Sabe o que isso significa? Uma expansão de oportunidades! 
Ter um site mobile não requer download/instalação nem atualizações. Você 
poderá fazer testes A/B para aumentar as vendas. 
Se você já é desenvolvedor Web, você já está pronto. Não precisa gastar 
rios de dinheiro aprendendo novos frameworks, linguagens, IDE’s etc. 
 
 
 Mobile Design – Página 75 de 92 
Um bom site não apenas aumenta os lucros. Proporciona uma experiência 
melhor para todos. 
A combinação da experiência móvel e desktop (quando bem executada) 
gera usuários engajados. 
 
Restrições 
Já é consenso que os dispositivos móveis dominam o tráfego na web. Mas 
essa expansão tratada no tópico anterior vem com sérios desafios. Na verdade, 
essa “nova” mídia possui restrições marcantes que podem (e devem) influenciar 
nosso fluxo de trabalho. Vamos a elas: 
▪ Primeira restrição: 80% menos espaço 
“Este site é melhor visualizado em 1024 x 768 pixels.” 
Durante anos, ficamos confortáveis no padrão dos monitores vendidos na 
última década. Bastava criar um layout que coubesse na largura de 1024 pixels e 
pronto! Mas quando os smartphones ganharam popularidade, a resolução “padrão” 
era de 320 x 480 pixels (iPhone). Ou seja, 80% de perda de espaço útil de tela. 
Figura 55 – Site da Azul Linhas aéreas em 2010. 80% menos espaço de tela. 
 
 
 
 Mobile Design – Página 76 de 92 
E quer saber? Isso foi ótimo! 
Imagine uma experiência de uso sem banners, slideshows, propagandas, 
GIF’s animados, animações em Flash, enfim... Coisas bem típicas em qualquer 
website no início dos anos 2000. 
Figura 56 – Versão Mobile dos sites da Avianca e Azul. 
 
Essa nova versão “diet” da Web foi boa não só para os usuários, mas para 
os negócios também. Nós, designers, publicitários e demais profissionais da Web 
finalmente percebemos como estávamos contribuindo para uma “obesidade” de 
informação inútil. 
E com isso, o mercado como um todo evoluiu. Agora o foco é na ação que o 
usuário precisa realizar no site. 
 
 
 
 
 
 
 
 Mobile Design – Página 77 de 92 
Figura 57 – Site Mobile da Gol. Foco na tarefa. 
 
Não há espaço para “firulas”. O designer se viu obrigado a saber o que é 
mais importante e abandonar o supérfluo. 
▪ Segunda restrição: Performance/conexão lenta 
A internet móvel ainda é considerada muito lenta, em comparação com 
outros países. Temos ainda o problema da cobertura geográfica das redes 3G e 4G. 
Figura 58 – Velocidade média de download no Brasil. 
 
 
 
 Mobile Design – Página 78 de 92 
Além disso, nossa internet móvel é vendida em pacotes de dados. Isso 
significa que há um limite de bytes a serem consumidos por mês, podendo gerar 
custos extras caso o usuário ultrapasse o limite. 
Figura 59 - Preço médio por gigabyte. 
 
Por esse motivo, um bom site mobile é aquele que respeita o tempo e o 
dinheiro do usuário. Além de nos esforçar para focar no conteúdo, devemos nos 
preocupar em não dar prejuízos financeiros aos nossos usuários. 
Por isso, se o design da sua interface requer uma grande quantidade de 
imagens carregadas, você pode estar criando um ônus para seu usuário 
(financeiro inclusive). 
Veja a seguir um simples quadro em que são listados alguns problemas e 
suas consequências para o usuário móvel. 
Problema 
Cenário 
Conexão lenta 
Pacote limitado de 
dados 
Sites com muitas 
requisições 
Aumentam muito o tempo 
de carregamento, pois 
Baixo impacto no consumo 
de dados 
 
 
 Mobile Design – Página 79 de 92 
são assíncronas. 
Sites com muitos 
scripts 
Demoram para carregar 
e podem alocar muito 
processamento e bateria 
do dispositivo. 
Médio impacto no consumo 
de dados 
Sites com imagens 
pesadas 
Demoram para carregar. 
Alto impacto no consumo de 
dados 
Use imagens com moderação. De preferência, SVG e Icon Fonts. Ou então 
reúna todas as imagens num único arquivo para fazer um Sprite de imagens. Veja 
como fazê-lo em: https://css-tricks.com/css-sprites/. 
▪ Terceira restrição: Tempo e lugar 
Os smartphones são usados em todo lugar, 
fazendo com que o usuário tenha diferentes níveis 
de atenção, mas sempre parcial. Segundo o A List 
Apart (http://bkaprt.com/mf/32): 
‒ 84% em casa; 
‒ 80% tempo livre; 
‒ 74% em filas; 
‒ 64% no trabalho; 
‒ 83% em frente à TV. 
O design deverá ser simples o bastante para ser usado com apenas um 
dedo. Uma boa forma de fazer isso é considerar o contexto de uso. 
 
 
https://css-tricks.com/css-sprites/
http://bkaprt.com/mf/32
 
 
 Mobile Design – Página 80 de 92 
Figura 60 - Melhorando a usabilidade de formulários no HTML. 
 
Use os novos recursos do HTML5 para formulários, a fim de melhorar a 
usabilidade. 
Além disso, enquanto usuários desktop são focados e fazem um uso 
concentrado, os usuários Mobile, possuem um perfil de uso mais distribuído, de 
curta duração, cheio de interrupções e com alguns horários de pico. 
Figura 61 - Padrão de uso em laptops, tablets e smartphones. 
 
Mais uma razão