projetando experiências mobile

55
PROJETANDO EXPERIÊNCIAS MOBILE CESAR BARIZON ALFREDO SCHAITZA

Upload: cesar-barizon

Post on 12-Apr-2017

331 views

Category:

Mobile


0 download

TRANSCRIPT

P R O J E TA N D O E X P E R I Ê N C I A S M O B I L E

C E S A R B A R I Z O N A L F R E D O S C H A I T Z A

P O R Q U E M O B I L E I M P O R TA ?C R E S C I M E N T O

P R O B L E M A S E N E C E S S I D A D E S

C O N T E X T O D E U S O

C O M P O R TA M E N T O S

C R E S C I M E N T O

C R E S C I M E N T O _ V E N D A S

As previsões eram de que a venda de smartphones ultrapassaria o comércio global de desktops, laptops e notebooks em 2012.Isso aconteceu dois anos antes, no último quarto de 2010.

2010

2012

C R E S C I M E N T O _ V E N D A S

Previa-se que 1 bilhão de smartphones seriam despachados em 2016.

Isso já acontece agora.

Smartphones

PCs

Tablets

C R E S C I M E N T O _ P R I O R I Z A Ç Ã O D O G O O G L E PA R A S I T E S M O B I L E F R I E N D LY

A partir de abril de 2015, o Google prioriza sites mobile friendly como resultados de busca feita em smartphones.

http://googlewebmastercentral.blogspot.com.br/2015/02/finding-more-mobile-friendly-search.html

C R E S C I M E N T O _ U S O

6 em cada 10 espectadores usam o mobile ao mesmo tempo que assistem TV.

62% dos usuários têm mais de 25 anos

47% dos usuários de smartphones são da classe C, totalizando mais de 48,3 milhões de pessoas.

A classe C movimenta 495 bilhões de reais em renda própria por ano.

P R O B L E M A S E N E C E S S I D A D E S

P R O B L E M A S E N E C E S S I D A D E S _ P O N T O S D E C O N TAT O

O mobile muitas vezes é o único ponto de contato do usuário com a internet.

P R O B L E M A S E N E C E S S I D A D E S _ I N Ú M E R A S T E L A S

Mais de 34 resoluções diferentes são comuns no mercado.

http://stats.areppim.com/stats/stats_mobiresxtime.htm

P R O B L E M A S E N E C E S S I D A D E S _ I N Ú M E R A S T E L A S

Além de wearables.

C O N T E X T O D E U S O

C O N T E X T O S D E U S O _ F AT F I N G E R F R I E N D LY

Considere suas áreas de toque para necessidades diferentes.

C O N T E X T O S D E U S O _ AT E N Ç Ã O R E D U Z I D A

Seu usuário pode estar em qualquer lugar, fazendo qualquer outra coisa.

C O N T E X T O S D E U S O _ L I M I TA Ç Ã O D E E S PA Ç O

Seja direto, não há lugar para excessos.

C O N T E X T O S D E U S O _ C O N E X Ã O

Smartphones nem sempre contam com uma conexão de dados estável.

C O M P O R TA M E N T O S

C O M P O R TA M E N T O S _ A M B I E N T E S E H O R Á R I O S D E U S O

Se antes a navegação acontecia em momentos específicos do dia, em um determinado ambiente e contexto apropriados, hoje ela é muito mais constante, fluida e feita em vários dispositivos e espaços ao mesmo tempo: o usuário pode começar no smartphone e terminar na televisão.

Morning7 a.m.

Commute10 a.m.

Work11 a.m.

Lunch12 a.m.

Meeting4 p.m.

Dinner8 p.m.

Movie10 p.m.

C O M P O R TA M E N T O S _ P R O X I M I D A D E E P E R S O N A L I Z A Ç Ã O

O smartphone tornou-se um pertence muito próximo, sendo altamente personalizável, fortalecendo um laço emocional entre o gadget e o usuário.Assim como o smartphone fica com a cara do dono, este acaba esperando que apps e sites o "entendam" tão bem quanto seu aparelho o faz.

C O M P O R TA M E N T O S _ M I C R O M O M E N T O

Eles acontecem a todo momento, fazendo uso de um gadget (na maioria das vezes o smartphone) que uma pessoa precisa descobrir, aprender, comparar, encontrar, comprar algo.

"Como chego lá?" "Onde encontro isso?" "Quanto custa o que quero?"

https://www.thinkwithgoogle.com/intl/pt-br/articles/how-micromoments-are-changing-rules.html

C O M P O R TA M E N T O S _ M I C R O M O M E N T O

Os consumidores mudaram. Seu jeito de percorrer uma jornada de consumo também mudou. Não se está mais on-line. Vive-se on-line.

69% das pessoas que viajam a lazer e têm um smartphone buscam por ideias de viagem em momentos livres, como numa fila ou esperando o metrô.

82% dos usuários de smartphone consultam seus aparelhos enquanto estão na loja decidindo o que comprar.

69% dos consumidores on-line concordam que a qualidade, o timing ou a relevância das mensagens de uma empresa afetam sua percepção da marca.

https://www.thinkwithgoogle.com/intl/pt-br/articles/por-que-mobile.html

C O M P O R TA M E N T O S _ M I C R O M O M E N T O

Pensar em micromomentos é uma maneira mais eficiente do que se basear apenas em dados demográficos para atingirmos nossos usuários nos momentos certos.

C O M P O R TA M E N T O S _ M I C R O C O N V E R S Õ E S

Microconversões são métricas valiosas que consideram engajamento de um público ainda em fase de consideração.

O sucesso do mobile não pode ser atrelado apenas à conversão final (último clique).

C A M I N H O S P A R A O M O B I L EM O B I L E F I R S T

E S E J Á H O U V E R U M A V E R S Ã O D E S K T O P ?

L E V A N TA M E N T O D E D A D O S

M O B I L E F I R S T

M O B I L E F I R S T

P R O C E S S O C O N V E N C I O N A L

Desenvolvimento focado em desktop e notebooks Adaptação para tablets e smartphones

M O B I L E F I R S T

P R O C E S S O M O B I L E F I R S T

Desenvolvimento focado em smartphones e tablets

Adaptação de funcionalidades e conteúdos para notebook e desktop

M O B I L E F I R S T

O Q U E É ?Metodologia de desenvolvimento de projetos com o conceito de desenvolver primeiramente pensando em mobile.

P O R Q U Ê ?As restrições de contextos de uso forçam manter o foco.

E S E J Á H O U V E R U M A V E R S Ã O D E S K T O P ?

E S E J Á H O U V E R U M A V E R S Ã O D E S K T O P ?

Não, não é apenas reduzir tamanhos. Muito pelo contrário, para garantir legibilidade e áreas de toque, é necessário aumentar muitos elementos.

E S E J Á H O U V E R U M A V E R S Ã O D E S K T O P ?

O importante é criar, não apenas transpor.

Considere contextos de uso, papel do mobile na tarefa desejada, micromomentos, como se diferenciar como um ponto de contato.

Defina uma personalidade para esses canal.

L E V A N TA M E N T O D E D A D O S

L E V A N TA M E N T O D E D A D O S

Use dados, qualitativos e/ou quantitativos, para guiar decisões sobre o papel do mobile na sua estratégia, como, quando e o que comunicar aos usuários, determinar relevâncias de conteúdo, etc.

C R I A N D O E X P E R I Ê N C I A S M O B I L EC H E C K L I S T

B O A S P R ÁT I C A S

A F F O R D A N C E

C H E C K L I S T _ A F F O R D A N C E

Affordance é a qualidade de um objeto ser utilizado da maneira como foi projetado para ser.

Projetos digitais necessitam transmitir com clareza como os usuários podem interagir com elementos e quais elementos são realmente interativos.

APERTE

C H E C K L I S T _ A F F O R D A N C E

L O O K A N D F E E LUm elemento interativo deve parecer interativo.

Um elemento clicável deve parecer clicável.

Um elemento ajustável deve parecer ajustável.

Um elemento arrastável deve parecer arrastável.

Já deu pra entender...

C H E C K L I S T _ A F F O R D A N C E

TA P P A B L E R O L A G E M S W I P E

N E W Y O R K

I N P U T

C H E C K L I S T _ A F F O R D A N C E

A N I M A Ç Õ E S"Animações podem efetivamente guiar a atenção do usuário, tanto para informar quanto para agradar."

Meaningful Transitions - Google Material Design

P R O P O R Ç Õ E S

C H E C K L I S T _ P R O P O R Ç Õ E S

Atente-se para a proporção dos elementos em relação ao todo.

F E AT U R E S N AT I V A S

C H E C K L I S T _ F E AT U R E S N AT I V A S

Faça uso das features nativas dos dispositivos móveis.

Localização (GPS, Wi-Fi, IP, Triangulação)

Gyroscope 360 (Movimentação)

Áudio (Input de áudio)

Vídeo e imagem (Captura de imagens e vídeos)

Conexões (Bluetooth, NFC)

Algumas features são acessíveis apenas através de aplicativos nativos

C H E C K L I S T _ F E AT U R E S N AT I V A S

O Google Maps, em seu modo de navegação, muda a interface para o modo noturno quando detecta que há pouca luz no ambiente. Por exemplo, ao passar por dentro de um túnel.

Versão mobile da Kayak possibilita a busca de hotéis próximos utilizando sua localização.

Com o Tilt Scrolling, o Instapaper permite que o usuário troque de artigo sem tocar o aparelho.

I N P U T C E R T O N A H O R A C E R TA

C H E C K L I S T _ I N P U T C E R T O N A H O R A C E R TA

C A L L T O A C T I O N N O M O M E N T O C E R T O

C H E C K L I S T _ C A L L T O A C T I O N N O M O M E N T O C E R T O

Mito: usuários não realizam scroll. Portanto, devemos deixar todos os calls to action importantes acima da "dobra".

Luke W aponta que, em uma amostra com 25 milhões de sessões, 75% das pessoas realizam scroll antes da página ser completamente carregada.

https://www.youtube.com/watch?v=Y-FMTPsgy_Y&feature=youtu.be&t=27m55s

Portanto, esteja pronto para identificar quando seu usuário está pronto para tomar uma ação e qual é a hora de posicionar seus calls to action.

D I R E T R I Z E S G O O G L E

C H E C K L I S T _ D I R E T R I Z E S - G O O G L E

O Google criou 25 regras: um checklist de boas práticas que devem se ter em mente quando o assunto é mobile. Algumas importantes:

https://www.thinkwithgoogle.com/intl/pt-br/research-studies/25-tecnicas-site-mobile.html

D E S TA Q U E S E U S C TA S

C H E C K L I S T _ D I R E T R I Z E S - G O O G L E

B U S C A E M E V I D Ê N C I A M E N U S C U R T O S

C H E C K L I S T _ D I R E T R I Z E S - G O O G L E

P E R M I T I R C O M P R A C O M O V I S I TA N T E

P R O J E T E F O R M U L Á R I O S E F I C I E N T E S

B O A S P R Á T I C A S

B O A S P R ÁT I C A S

Pesquisa, Observação,Hipóteses, Ideação, etc.

Layout,Prototipação OnGoing

Estruturação, Concepção

Testes Testes

Ferramentas:Adobe PreviewSkala Preview InVison POP

Ferramentas:xMindSketches Axure