Você está na página 1de 89

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 89


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

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

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

A diversidade no ecossistema mobile ................................................................... 18

Tamanhos e densidades de telas ......................................................................... 20

Como o dp funciona? ........................................................................................ 22

E quanto às imagens? ...................................................................................... 23

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

Briefing de projetos mobile.................................................................................... 25

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

Elementos do briefing ....................................................................................... 26

Processo orientado a UX ...................................................................................... 32

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

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

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

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

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

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

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

Mobile Design – Página 3 de 89


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

Relembrando a Arquitetura da Informação ........................................................... 38

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

1 - Hierarquia .................................................................................................... 39

2 - Hub & spoke ................................................................................................ 40

3 - Nested doll ................................................................................................... 40

4 - Tabbed view................................................................................................. 41

5 - Dashboard ................................................................................................... 41

6 - Filtered view ................................................................................................. 42

Algumas considerações .................................................................................... 43

Relembrando o que prendemos sobre prototipagem ............................................ 43

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

A Lei de Fitts ......................................................................................................... 48

Regra 1. Crie alvos maiores .............................................................................. 50

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

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

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

O paradoxo da escolha ......................................................................................... 55

Design da informação ........................................................................................... 56

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

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

Grid é nosso amigo ............................................................................................... 59

Zelo com a qualidade do layout ........................................................................ 60

Terminologia ..................................................................................................... 60

As 12 unidades ................................................................................................. 62

Mobile Design – Página 4 de 89


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

Atomic Design ....................................................................................................... 63

Átomos .............................................................................................................. 64

Moléculas .......................................................................................................... 64

Organismos ....................................................................................................... 65

Templates ......................................................................................................... 65

Páginas ............................................................................................................. 66

Mobile Guidelines.............................................................................................. 70

Capítulo 5. Mobile First ........................................................................................ 71

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

Restrições ............................................................................................................. 73

Oportunidades ...................................................................................................... 79

Capacidades dos smartphones ......................................................................... 85

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

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

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

Referências………….. .............................................................................................. 89

Mobile Design – Página 5 de 89


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.

Mobile Design – Página 6 de 89


 Entender as restrições e as 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 (terminais burros como eram conhecidos
aqui).

Nessa altura você deve estar imaginando que a resposta foi “seta para baixo”.
Exato! Afinal é o padrão usado até hoje.

Figura 1 - No desktop, nós movemos a tela em direção ao conteúdo.

No desktop, nós movemos a tela em direção ao conteúdo. Recentemente 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 Windows. Em mobile, o
paradigma é o oposto, ou seja, é o conteúdo que se move dentro da tela (como no
Magic Mouse da Apple).

Mobile Design – Página 7 de 89


E quando se fala em mobile, devemos entender que não se trata apenas de
smartphones, mas também tablets, games consoles, totens 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.

Mobile Design – Página 8 de 89


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

Symbiam, BlackBerry, Firefox OS, Windows 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.

Mobile Design – Página 9 de 89


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

 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

Mobile Design – Página 10 de 89


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 outro
qualquer que afete a sua experiência de uso. Por isso, tome cuidado em fazer uma
interface que seja agradável, e com uma experiência rica.

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:


http://info.cern.ch/hypertext/WWW/TheProject.html.

Mobile Design – Página 11 de 89


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". – Tim Benners-Lee.

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

Mobile Design – Página 12 de 89


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 o mercado para saber que os dispositivos


móveis já dominam o mercado há alguns anos.

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 13 de 89


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.

Mas como podemos ver acima, é inegável que ficamos mais tempo na Web
via Mobile do que em outra plataforma.

Mobile Design – Página 14 de 89


É 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 acesso
e compra) no Desktop é muito superior ao Mobile.

Figura 7 – Tendência de conversão por dispositivo.

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.

Mobile Design – Página 15 de 89


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:

Mobile Design – Página 16 de 89


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.

Mobile Design – Página 17 de 89


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.

O principal efeito da portabilidade é que as pessoas usam esses dispositivos


nos mais variados lugares e contextos.

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

Mas essa diversidade é muito maior do que pensamos. Veja os exemplos a


seguir.

Mobile Design – Página 18 de 89


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 19 de 89


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.

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.

Mobile Design – Página 20 de 89


Em 2010 a Apple anuncia O iPhone 4. O primeiro smartphone da “Maçã” com
tela de alta densidade. Mas 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 seja totalmente substituído pelo padrão 4K que chega a ter 4 vezes
mais resolução que o anterior.

Mobile Design – Página 21 de 89


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 botão amarelo possui a mesma medida em pixels (4 x 2), mas aparece em


tamanhos diferentes, em telas com outras 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, é 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 botão mostrado anteriormente, só que dessa vez, com as medidas
em dp e não mais em pixels.

Mobile Design – Página 22 de 89


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.

Mobile Design – Página 23 de 89


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 24 de 89


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 ao prejuízo.

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 abrangente, 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, 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.

Mobile Design – Página 25 de 89


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

Mobile Design – Página 26 de 89


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 e d)


oportunos.

Isso irá ajudar o planejamento de marketing quando do 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.

Mobile Design – Página 27 de 89


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.


E, por incrível que pareça, usuários gostam de perceber que o aplicativo está em
evolução e com novas funcionalidades sempre surgindo. Mas é 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 2 motivos:

a. Quaisquer problemas que surgiram desde o desenvolvimento da


primeira plataforma serão evitados para o segundo.

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

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

Mobile Design – Página 28 de 89


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

Considerar iOS6 e acima ou você vai apenas iOS7? Essas considerações


são importantes e afetam custos e prazos. Lembre-se que a partir de 01 de fevereiro
de 2014, todos os aplicativos iOS devem ser otimizados para iOS7.

6 - Conteúdo

Este é outro fator muitas vezes negligenciado. Em caso de um web app, 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.

Mobile Design – Página 29 de 89


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:

Mobile Design – Página 30 de 89


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.

Mobile Design – Página 31 de 89


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. Mas os frutos dessa
“filosofia” vão além da facilidade de uso. Podemos dizer que um bom UX é também
um ótimo negócio, pois visa garantir consumidores/usuários 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.

Mobile Design – Página 32 de 89


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

Mobile Design – Página 33 de 89


Figura 19 - Mapa de empatia (xplane.com).

No centro do mapa, fica a persona, identificada pelo nome;

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

Mobile Design – Página 34 de 89


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.

Mobile Design – Página 35 de 89


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.

Mobile Design – Página 36 de 89


Os wireframes são uma espécie de planta-baixa de uma casa. Mas aqui, 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. Mas 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.

Mobile Design – Página 37 de 89


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 está 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 38 de 89


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 39 de 89


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.

Mobile Design – Página 40 de 89


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.

Mobile Design – Página 41 de 89


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.

Mobile Design – Página 42 de 89


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. Mas 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, 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.

Mobile Design – Página 43 de 89


Mas antes, 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
micro-ideias no papel e gerar bastante discussão.

Mas nada impede que façamos essa atividade remotamente, usando alguns
recursos tecnológicos para isso, ou, ainda melhor, aproveitar o melhor dos dois

Mobile Design – Página 44 de 89


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. Mas até aqui, 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).

Mobile Design – Página 45 de 89


O objetivo principal durante a criação do wireframe, além de simular o fluxo
de operação, é elaborar a estrutura e 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.

Mobile Design – Página 46 de 89


Capítulo 4. Design de interface

No 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 praticamente qualquer
objeto, desde uma escova de dentes, ao interruptor da luz do seu quarto, o 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.

Mobile Design – Página 47 de 89


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

Mobile Design – Página 48 de 89


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:

Mobile Design – Página 49 de 89


Figura 31 - Kei 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.

Mobile Design – Página 50 de 89


Figura 33 - Diferentes prioridades na interface.

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.

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

Mobile Design – Página 51 de 89


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 34 - Dispositivos que exigem muita tensão muscular por causa da


necessidade de se manter os braços sempre erguidos.

Mas, como toda boa regra, há exceções. Por questões de segurança, este
pode ser um “mal necessário”.

Mobile Design – Página 52 de 89


Figura 35 - 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 36 - A lei de Fitts favorece os menus radiais em vez dos menus


lineares.

Mobile Design – Página 53 de 89


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 37 - 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 38 - 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.

Mobile Design – Página 54 de 89


O paradoxo da escolha

Ter opções de escolha é sempre bom, certo? Bom, 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.

Mobile Design – Página 55 de 89


Figura 39 - Opções pré-configuradas do IFTTT.

Podemos dizer também que o 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 (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.

Mobile Design – Página 56 de 89


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

Mobile Design – Página 57 de 89


Figura 41 – Eye Tracking em site desktop.

Mas 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 42 – Desperdício de espaço no site da Receita Federal.

Mobile Design – Página 58 de 89


Não podemos desperdiça-lo com outros elementos que não sejam o conteúdo
direto. 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 os designers a diagramarem as páginas de jornais,
revistas e cartazes há muitas décadas.

Figura 43 – 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.”

Mobile Design – Página 59 de 89


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.

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 60 de 89


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 61 de 89


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.

Mobile Design – Página 62 de 89


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.

Mobile Design – Página 63 de 89


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, entrada ou botão não são muito úteis
sozinhos, mas os combinam como um formulário e agora eles podem realmente fazer
algo juntos.

Mobile Design – Página 64 de 89


Figura 44 - 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 45 - 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.

Mobile Design – Página 65 de 89


Figura 46 - 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.

Mobile Design – Página 66 de 89


Figura 47 - Uma página está mais próxima do layout final.

Construir a partir de moléculas para 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).

Mobile Design – Página 67 de 89


Figura 48 - 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 49 - Exemplo de escala e modularização.

Mobile Design – Página 68 de 89


Um Design System é uma série de estilos, componentes e diretrizes
individuais usados para criar a interface do usuário unificada.

Figura 50 - Mailchimp Pattern Library.

Fonte: http://ux.mailchimp.com/patterns/.

Figura 51 - Guia de estilo das plataformas web do governo americano.

Fonte: https://designsystem.digital.gov/.

Mobile Design – Página 69 de 89


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 52 - Guidelines do iOS e Android.

Fonte: https://developer.apple.com/design/, https://material.io/design/.

Mobile Design – Página 70 de 89


Capítulo 5. Mobile First

Esta é a maior tendência no mercado de desenvolvimento Web desde os


anos 90. Mas 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 71 de 89


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.

Mobile Design – Página 72 de 89


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 53 – 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.

Mobile Design – Página 73 de 89


Figura 54 – 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 55 – Site Mobile da Gol. Foco na tarefa.

Mobile Design – Página 74 de 89


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 56 – 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 57 - Preço médio por gigabyte.

Mobile Design – Página 75 de 89


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
Conexão lenta Pacote limitado de dados
Aumentam muito o tempo
Sites com muitas Baixo impacto no consumo de
de carregamento, pois são
requisições dados
assíncronas.
Demoram para carregar e
podem alocar muito Médio impacto no consumo
Sites com muitos scripts
processamento e bateria do de dados
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/.

Mobile Design – Página 76 de 89


 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 58 - 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.

Mobile Design – Página 77 de 89


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


desenvolver um bom site mobile é um desafio técnico e também de postura. O fato é
que essas limitações forçaram nossa criatividade e o senso de importância 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 os sites carregarem mais rápido.

Restrições de tempo e espaço: Fizeram com que nos preocupemos com o


contexto de uso.

Mobile Design – Página 78 de 89


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

Mobile Design – Página 79 de 89


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.

Mobile Design – Página 80 de 89


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.

Mobile Design – Página 81 de 89


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/

Mobile Design – Página 82 de 89


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

Mobile Design – Página 83 de 89


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

Mobile Design – Página 84 de 89


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.

Mobile Design – Página 85 de 89


‒ Á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 60 - 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 Design – Página 86 de 89


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 site e o


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

Mobile Design – Página 87 de 89


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 no 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!

Mobile Design – Página 88 de 89


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: 18 set. 2017.

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.

Mobile Design – Página 89 de 89