Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Projetando Experiências Mobile

446 views

Published on

Cesar Barizon (UX Supervisor na Agência Mirum do Brasil) e Alfredo Schaitza (Visual Designer na Agência MIrum do Brasil) descrevem o processo de criação, boas práticas e checklists no desenvolvimento de projetos para mobile, considerando o crescimento e relevância desses dispositivos nos dias atuais.

Published in: Mobile
  • Login to see the comments

Projetando Experiências Mobile

  1. 1. 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
  2. 2. 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
  3. 3. C R E S C I M E N T O
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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.
  8. 8. P R O B L E M A S 
 E N E C E S S I D A D E S
  9. 9. 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.
  10. 10. 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
  11. 11. 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.
  12. 12. C O N T E X T O 
 D E U S O
  13. 13. C O N T E X T O S D E U S O _ FAT F I N G E R F R I E N D LY Considere suas áreas de toque
 para necessidades diferentes.
  14. 14. 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.
  15. 15. 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.
  16. 16. 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.
  17. 17. C O M P O R TA M E N T O S
  18. 18. 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. Morning 7 a.m. Commute 10 a.m. Work 11 a.m. Lunch 12 a.m. Meeting 4 p.m. Dinner 8 p.m. Movie 10 p.m.
  19. 19. 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.
  20. 20. 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
  21. 21. 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
  22. 22. 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.
  23. 23. 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).
  24. 24. C A M I N H O S 
 PA R A O 
 M O B I L E M 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 VA N TA M E N T O D E D A D O S
  25. 25. M O B I L E 
 F I R S T
  26. 26. 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
  27. 27. 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
  28. 28. 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.
  29. 29. 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 ?
  30. 30. 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.
  31. 31. 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.
  32. 32. L E VA N TA M E N T O 
 D E D A D O S
  33. 33. L E VA 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.
  34. 34. C R I A N D O 
 E X P E R I Ê N C I A S 
 M O B I L E C H E C K L I S T B O A S P R ÁT I C A S
  35. 35. A F F O R D A N C E
  36. 36. 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
  37. 37. 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 L Um 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...
  38. 38. C H E C K L I S T _ A F F O R D A N C E TA P PA 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
  39. 39. 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
  40. 40. P R O P O R Ç Õ E S
  41. 41. 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.
  42. 42. F E AT U R E S 
 N AT I VA S
  43. 43. C H E C K L I S T _ F E AT U R E S N AT I VA 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
  44. 44. C H E C K L I S T _ F E AT U R E S N AT I VA 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.
  45. 45. I N P U T C E R T O 
 N A H O R A C E R TA
  46. 46. 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
  47. 47. 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
  48. 48. 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.
  49. 49. D I R E T R I Z E S 
 G O O G L E
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. B O A S 
 P R Á T I C A S
  54. 54. 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 Preview Skala Preview
 InVison
 POP Ferramentas: xMind Sketches
 Axure

×