Apostila - Módulo 2 - Bootcamps UX Design

Mobile Design
Alan Vasconcelos
2020
Mobile Design
Alan Vasconcelos
© Copyright do Instituto de Gestão e Tecnologia da Informação.
Todos os direitos reservados.
Mobile Design – Página 2 de 95

Sumário
Capítulo 1. Introdução ao Mobile Design ............................................................... 6
O paradigma anterior: desktop................................................................................ 7
Principais diferenças entre desktop e mobile ...................................................... 8
Mobile Web. Ou melhor dizendo... Web ............................................................... 11
Então qual é, de fato, a diferença entre Mobile e Desktop? .............................. 13
É aí que aparece nossa oportunidade .............................................................. 15
Padrões de interação mobile ................................................................................ 17
A diversidade no ecossistema mobile ................................................................... 20
Tamanhos e densidades de telas ......................................................................... 22
Como o dp funciona? ........................................................................................ 24
E quanto às imagens? ...................................................................................... 25
Capítulo 2. Conduzindo um projeto mobile .......................................................... 27
Briefing de projetos mobile.................................................................................... 27
Etapas típicas de um projeto mobile ................................................................. 27
Elementos do briefing ....................................................................................... 29
Processo orientado a UX ...................................................................................... 34
Investigação - User research ............................................................................ 35
Investigação - User research ............................................................................ 36
Ideação - Requisitos de uso .............................................................................. 37
Ideação - Mínimo Produto Viável (MVP) ........................................................... 38
Prototipagem - Materializando as histórias de usuários .................................... 38
Prototipagem - Evoluindo os protótipos em papel ............................................. 39
Teste - Colocando nossa ideia à prova ............................................................. 39
Capítulo 3. Projetando a experiência do usuário ................................................. 41

Relembrando a Arquitetura da Informação ........................................................... 41
Esquemas típicos de navegação mobile ............................................................... 41
1 - Hierarquia .................................................................................................... 42
2 - Hub & spoke ................................................................................................ 43
3 - Nested doll ................................................................................................... 43
4 - Tabbed view................................................................................................. 44
5 - Dashboard ................................................................................................... 45
6 - Filtered view ................................................................................................. 45
Algumas considerações .................................................................................... 46
Relembrando o que prendemos sobre prototipagem ............................................ 47
Capítulo 4. Design de interface ........................................................................... 51
A Lei de Fitts ......................................................................................................... 52
Regra 1. Crie alvos maiores .............................................................................. 54
Regra 2. Minimize o movimento do cursor ........................................................ 55
Regra 3. Evite tensão muscular ........................................................................ 56
Regra 4. Explore os Prime Pixels (ou pixels de ouro) ....................................... 57
O paradoxo da escolha ......................................................................................... 59
Design da informação ........................................................................................... 61
Conheça seu público e suas necessidades ...................................................... 61
Conteúdo é mais importante que navegação .................................................... 62
Grid é nosso amigo ............................................................................................... 63
Zelo com a qualidade do layout ........................................................................ 65
Terminologia ..................................................................................................... 65
As 12 unidades ................................................................................................. 67
Benefícios para o usuário ................................................................................. 68

Atomic Design ....................................................................................................... 68
Átomos .............................................................................................................. 69
Moléculas .......................................................................................................... 69
Organismos ....................................................................................................... 70
Templates ......................................................................................................... 70
Páginas ............................................................................................................. 71
Mobile Guidelines.............................................................................................. 75
Capítulo 5. Mobile First ........................................................................................ 76
A grande expansão em números .......................................................................... 76
Restrições ............................................................................................................. 78
Oportunidades ...................................................................................................... 84
Capacidades dos smartphones ......................................................................... 91
O que já podemos fazer com HTML5 hoje? ...................................................... 91
Mobile First numa casca de noz:....................................................................... 93
Capítulo 6. Conclusão ......................................................................................... 94
Referências………… ................................................................................................ 95

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 smartphones venderam 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 abre 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.
 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/.
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.
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.
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.
 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 iPad o
quadrado terá quase a metade do tamanho que no Galaxy.
 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.
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.
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,
1 Tim Brenners Lee.

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:
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.
É 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 levam 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.
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:
Figura 9 - Alguns gestos (gestures) ilustrados por Luke Wrobleswski.
Pinch para zoom out, dragging para mover, Press and hold para abrir um Flick para próxima tela
spread para zoom in ajustar, rolar e posicionar item ou menu de contexto ou rolagem rápida
 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 descarta-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.

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.

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.

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.

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.

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.
Tela de densidade baixa Tela de densidade média Tela de densidade alta
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.
Figura 16 - 1dp corresponde a 1px em uma tela de 160ppi.
Tela de densidade baixa. Tela de densidade média. Tela de densidade alta.

O botão foi reajustado em É usada como a base de O botão foi reajustado em
seu tamanho “físico”. cálculo. (160 ppi) seu tamanho “físico”.
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.
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.

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 se 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ê 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.

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.

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.

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?
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.

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.

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.
Com isso, a fim de se aproximar ao máximo desses objetivos, o mercado

adota uma postura como a descrita no diagrama a seguir.

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.
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).
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’s The New User Story Backlog Is a Map - AgileProductDesign.com.

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.
Apesar dessa 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
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.

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.

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.

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ções ou 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.
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.
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.
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, “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;
‒ 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 e a 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:
‒ 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.

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 dentes ao interruptor da luz do seu quarto, ou mesmo
um aplicativo no seu smartphone.
Figura 28 - Psicologia das ações.
Especificação da
Formulação da Execução das
sequencia de
intenção ações
ações
Golfo de execução
Golfo de avaliação
Avaliação em Interpretação do Percepção do
relação à intenção estado do sistema estado do sistema
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,
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).
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, um

link, 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.
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.
Difícil Fácil
Mesmo criando alvos maiores, você ainda pode estabelecer prioridades,

como o exemplo a seguir extraído do Google’s Material Design.

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.

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.

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.

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.

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

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!).

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/.

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.

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.

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 e consistê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.
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.

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.

As 12 unidades
A esmagadora maioria dos sistemas de grid disponíveis no mercado possuem

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.

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.
Á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.
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.
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 de compras 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);
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.

Um Design System é uma série de estilos, componentes e diretrizes
individuais usados 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/.

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/.

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.

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.
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.
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.
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.
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.
Cenário
Problema
Pacote limitado de
Conexão lenta dados
Aumentam muito o tempo

Sites com muitas Baixo impacto no consumo
de carregamento, pois
requisições de dados
são assíncronas.
Demoram para carregar

Sites com muitos e podem alocar muito Médio impacto no consumo
scripts processamento e bateria de dados
do dispositivo.
Sites com imagens Alto impacto no consumo de

Demoram para carregar.
pesadas 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.
Figura 60 - Melhorando a usabilidade de formulários no HTML.
<input type=“text”> <input type=“email”> <input type=“tel”>
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 para forcarmos em tarefas, conteúdo e entregar aquilo que o
usuário quer e precisa. Por isso:
Não resista, abrace as restrições!
Telas pequenas, conexão lenta e limitada, restrição de tempo e lugar, enfim,

criar e desenvolver uma boa aplicação mobile é um desafio técnico e também de
postura. O fato é que essas limitações forçaram nossa criatividade e o senso de
prioridade para criar interfaces mais otimizadas.
Telas pequenas: Nos forçaram a exibir o que realmente importa para o

usuário e para o negócio, retirando o que era inútil.
Conexão lenta e limitada: Nos tornaram vigilantes com a performance e com

os custos da conexão móvel, fazendo com que os sites e aplicativos carregarem mais
rápido.
Restrições de tempo e espaço: Fizeram com que nos preocupemos com o

contexto de uso.

Oportunidades
É certo que os dispositivos móveis possuem restrições que nos forçaram a

uma mudança de atitude, mas com eles vieram possibilidades nem imaginadas há
uma década atrás. Os smartphones, principalmente, trouxeram incríveis capacidades
de hardware como sensores, GPS, magnetômetros, entre outros.
 Primeira oportunidade: Geolocalização
De acordo com mais um estudo do Think With Google, as buscas realizadas

para produtos e serviços locais aumentaram 75% no último ano.
Fonte: https://www.thinkwithgoogle.com/consumer-insights/how-digital-connects-
shoppers-to-local-stores/.
Se num site desktop era fácil descobrir de qual país era o visitante, agora,
com um smartphone médio, é possível saber em qual esquina ele se encontra. E isso
é um grande avanço, pois podemos proporcionar uma interação focada na sua
localização, criando interfaces preditivas e conteúdos mais direcionados

Figura 62 – Ao procurar uma passagem aérea, o campo “Origem” foi
preenchido automaticamente, pois o site da empresa já conhece a localização
do aparelho.
Usabilidade melhorada
A geolocalização pode ajudar no preenchimento de campos como local de

partida, endereço residencial, rotas etc. Você pode ainda colocar um botão do tipo
“como chegar” para abrir o GPS padrão do aparelho com a rota já traçada.

A Realidade Aumentada (Augmented Reality), a junção do geolocalização e
da câmera, proporcionam uma experiência mais rica para encontrar produtos e
serviços na região em que o usuário está.
 Segunda oportunidade: Tela multitoque.
A interação indireta, aquela feita com teclado e mouse, pode até trazer mais
precisão ao clicar em objetos pequenos ou mesmo mais conforto para digitar textos,
certo?
Correto. Mas quem precisa de teclado e mouse para buscar imóveis numa
região da cidade? Em vez de digitar nome do bairro ou da região, você poderá buscar
imóveis apenas “circulando” a área onde quer morar.

O resultado da busca aparece dentro do círculo desenhado.

Assinatura via touchscreen:
Até mesmo as grandes empresas de finanças já usam a assinatura via

touchscreen. Se você tem experiência com Java script, neste link você pode baixar a
biblioteca para implementar esta solução no seu site.
‒ http://szimek.github.io/signature_pad/
 Terceira oportunidade: Câmera e microfone
Com HTML5, você pode usar a câmera do celular para escanear código de
barras e QRCodes.

É possível ainda acessar o microfone do celular para reconhecimento de voz.
Imagine preencher formulários apenas com a voz?
 Quarta oportunidade: Push notification
Usando HTML5, notifique seus potenciais consumidores sobre a

disponibilidade de algum item, mesmo que eles não estejam com o site aberto.
 Quinta oportunidade: Sensores diversos
Melhore drasticamente a usabilidade da sua tela de login, permitindo a seus

usuários usarem o recurso da impressão digital.

Ainda é possível usar uma vasta gama de sensores disponíveis.
Sensores de movimento:
‒ Acelerômetro;
‒ Giroscópio;
‒ Aceleração linear;
‒ Orientação absoluta;
‒ Orientação relativa.
Sensores de ambiente:
‒ Luz ambiente;
‒ Magnetômetro.

Exemplos explicativos com código para baixar:
‒ https://developers.google.com/web/updates/2017/09/sensors-for-the-
web
Capacidades dos smartphones
‒ Posicionamento e movimento do dispositivo: a partir de um

acelerômetro;
‒ Giroscópio: 360 graus de movimento;
‒ Detecção de localização;
‒ Sensores multitoque;
‒ Orientação: direção de uma bússola digital;
‒ Vídeo e imagem: captura/entrada de uma câmera;
‒ Câmeras duplas: frente e verso.
‒ Áudio: entrada de um microfone, reconhecimento de voz;
‒ Conexões de dispositivos: através de Bluetooth entre dispositivos;
‒ Proximidade: proximidade do dispositivo a objetos físicos;
‒ Luz ambiente: consciência do ambiente claro/escuro;
‒ NFC: Near Field Communications através de leitores RFID.
O que já podemos fazer com HTML5 hoje?
Existe um site cuja única missão é responder essa pergunta.

Figura 63 - whatwebcando.today.
Acessando o site acima do seu smartphone, você verá os recursos de

hardware, sensores e demais funcionalidades que já funcionam no seu navegador.

Mobile First numa casca de noz:
 A grande expansão
Aproveite o enorme crescimento da internet móvel, o que aumentará o volume

de acesso.
 Restrições
Abrace as restrições do mobile para focar e priorizar os serviços que estamos

projetando e construindo.
 Oportunidades
Use os diversos recursos móveis de hardware para inovar na experiência de

uso.
É hora de repensar como nossos usuários interagem como nosso produto e

o com mundo à sua volta. O que antes era exclusivo nos aplicativos nativos, agora
está disponível no browser do smartphone.

Capítulo 6. Conclusão
Embora tenhamos coberto várias técnicas e métodos aqui, devemos pensar

que ainda há muito mais por vir. Até mesmo a definição do que é chamado de
“dispositivo móvel” pode mudar em poucos anos. O que nós aqui do IGTI sempre
enfatizamos é que devemos buscar a excelência no que fazemos, não só no aspecto
técnico, mas também na nossa missão. Nós, designers, devemos ser os agentes que
farão o mercado evoluir como um todo.
Como já dito, nossa ideia é dar uma abordagem mais estratégica sobre UX.
Com esse conhecimento, esperamos que você já esteja apto para propor a melhor
abordagem ou estratégia para a sua equipe – não apenas no Mobile – mas
contemplando todos os dispositivos e tamanhos disponíveis. O mais importante é criar
uma experiência rica para o usuário independentemente da plataforma.
E já que começamos a prototipar nosso app no módulo anterior, que tal subir
mais o nível? Vamos transformar o nosso protótipo de baixa fidelidade em um
wireframe funcional para, em seguida, subirmos o nível mais uma vez e criarmos uma
User Interface (UI) com os padrões estéticos já definidos.
Pensando nisso, recomendo que você já comece a se familiarizar com essas

ferramentas de prototipagem e design que citamos aqui (Mockflow, Figma, Adobe XD,
UXPin etc.) para que, quando chegar o momento, você não fique gastando tempo em
aprender a ferramenta, mas sim, gerando e materializando suas ideias da melhor
maneira.
Como dito no início, nossa ideia é que você saia do Bootcamp com um
material suficientemente rico e completo para, finalmente, ter um portfólio para
chamar de seu! E mesmo se você já possui um portfólio, vai ser uma ótima
oportunidade de enriquecê-lo ainda mais.
Muito obrigado!

Referências
COOPER, A. The Inmates are Running the Asylum. Sams, 1999.
FERGUSON, K. Everything is a Remix (2012). Disponível em:

<http://everythingisaremix.info/watch-the-series/>. Acesso em: 12 de nov. 2020.
GARRETT, J. J. The Elements of User Experience: User-centered Design for the Web.
New Riders, 2003.
KRUG, S. Não me faça pensar – Atualizado. 1 ed. São Paulo: Alta Books, 2015.
MORVILLE, P.; ROSENFELD, L. Information Architecture for the World Wide Web:
Designing Large-Scale Web Sites. O’Reilly Media, 2006.
NIELSEN, Jakob; BUDIU, Raluca. Usabilidade móvel. 1. ed. Campus, 2013.
MARCOTTE, Ethan. Responsive Web Design (nº 4). A Book Apart. 2011.
WROBLEWSKI, Luke. Mobile First (nº 6). A Book Apart. 2009.

Apostila - Módulo 2 - Bootcamps UX Design

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila - Módulo 2 - Bootcamps UX Design

Enviado por

Direitos autorais:

Formatos disponíveis

Mobile Design

Mobile Design – Página 2 de 95

Capítulo 1. Introdução ao Mobile Design ............................................................... 6

O paradigma anterior: desktop................................................................................ 7

Principais diferenças entre desktop e mobile ...................................................... 8

Mobile Web. Ou melhor dizendo... Web ............................................................... 11

Então qual é, de fato, a diferença entre Mobile e Desktop? .............................. 13

É aí que aparece nossa oportunidade .............................................................. 15

Padrões de interação mobile ................................................................................ 17

A diversidade no ecossistema mobile ................................................................... 20

Tamanhos e densidades de telas ......................................................................... 22

Como o dp funciona? ........................................................................................ 24

E quanto às imagens? ...................................................................................... 25

Capítulo 2. Conduzindo um projeto mobile .......................................................... 27

Briefing de projetos mobile.................................................................................... 27

Etapas típicas de um projeto mobile ................................................................. 27

Elementos do briefing ....................................................................................... 29

Processo orientado a UX ...................................................................................... 34

Investigação - User research ............................................................................ 35

Investigação - User research ............................................................................ 36

Ideação - Requisitos de uso .............................................................................. 37

Ideação - Mínimo Produto Viável (MVP) ........................................................... 38

Prototipagem - Materializando as histórias de usuários .................................... 38

Prototipagem - Evoluindo os protótipos em papel ............................................. 39

Teste - Colocando nossa ideia à prova ............................................................. 39

Capítulo 3. Projetando a experiência do usuário ................................................. 41

Mobile Design – Página 3 de 95

Esquemas típicos de navegação mobile ............................................................... 41

2 - Hub & spoke ................................................................................................ 43

3 - Nested doll ................................................................................................... 43

6 - Filtered view ................................................................................................. 45

Algumas considerações .................................................................................... 46

Relembrando o que prendemos sobre prototipagem ............................................ 47

Capítulo 4. Design de interface ........................................................................... 51

A Lei de Fitts ......................................................................................................... 52

Regra 1. Crie alvos maiores .............................................................................. 54

Regra 2. Minimize o movimento do cursor ........................................................ 55

Regra 3. Evite tensão muscular ........................................................................ 56

Regra 4. Explore os Prime Pixels (ou pixels de ouro) ....................................... 57

O paradoxo da escolha ......................................................................................... 59

Design da informação ........................................................................................... 61

Conheça seu público e suas necessidades ...................................................... 61

Conteúdo é mais importante que navegação .................................................... 62

Grid é nosso amigo ............................................................................................... 63

Zelo com a qualidade do layout ........................................................................ 65

Benefícios para o usuário ................................................................................. 68

Mobile Design – Página 4 de 95

Capítulo 5. Mobile First ........................................................................................ 76

A grande expansão em números .......................................................................... 76

Capacidades dos smartphones ......................................................................... 91

O que já podemos fazer com HTML5 hoje? ...................................................... 91

Mobile First numa casca de noz:....................................................................... 93

Capítulo 6. Conclusão ......................................................................................... 94

Mobile Design – Página 5 de 95

O crescimento vertiginoso da adoção dos dispositivos móveis pelas pessoas

Esse é o cenário que nos espera!

A preocupação com usabilidade e experiência de uso deixou de ser um luxo

 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,

 Entender as restrições e oportunidades que os dispositivos móveis nos

Mobile Design – Página 6 de 95

O paradigma anterior: desktop