Mobile First (ou boas razões para investir em Mobile)

5.175 visualizações

Publicada em

Palestra sobre Mobile First apresentada por Edu Agni para os funcionários do Banco do Brasil, no dia 30 de julho de 2015 em Brasília. O conteúdo da palestra foi dividido em duas partes: a primeira fazendo uma contextualização sobre o universo mobile, e a segunda parte tratando mais especificamente de design e Mobile First.

Assista ao vídeo em https://www.youtube.com/watch?v=XGV55AHTDa4

Publicada em: Design
0 comentários
26 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
5.175
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3.472
Ações
Compartilhamentos
0
Downloads
54
Comentários
0
Gostaram
26
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mobile First (ou boas razões para investir em Mobile)

  1. 1. Mobile First ou boas razões para investir em Mobile.
  2. 2. Edu Agni é consultor especialista em Experiência do Usuário. Possui 12 anos de experiência nas áreas de design e usabilidade, e criador do UX.BLOG.
  3. 3. Tim Berners-Lee “The primary design principle underlying the Web’s usefulness and growth is universality... it should be accessible from any kind of hardware that connect to the Internet: stationary or mobile, small screen or large.”
  4. 4. Não. http://www.youtube.com/watch?v=ndkIP7ec3O8
  5. 5. Existem 5 vezes mais telefones celulares no mundo do que PCs.
  6. 6. Há 6,8 bilhões de pessoas no planeta. 4 bilhões delas usam telefone celular. 3,5 bilhões delas usam uma escova de dentes.
  7. 7. O número total de pessoas acessando a web através de dispositivos móveis irá superar o acesso via desktop em 2015.
  8. 8. Bem-vindo a 2015, 
 o ano em que o mobile ultrapassa o desktop.
  9. 9. Segundo uma pesquisa recente da Mary Meeker, nós olhamos nossos celulares mais de 150 vezes por dia.
  10. 10. É um dos poucos objetos que é tão pessoal que tem senha. Nós mal lembramos como era a vida antes dele. Ligar pra casa de alguém e perguntar se o fulano está. Ficar na chuva tentando pegar um táxi. Passar horas na fila do banco.
  11. 11. Interface de linha de comando • Textual • Abstrata • Teclado QWERTY Interface Gráfica do Usuário • Gráfica • Indireta • Mouse / Ponteiro Interface Natural do Usuário • Física • Direta • Gestual Projetando Interfaces Naturais
  12. 12. Interface Gráfica do Usuário Interface Natural do Usuário 1. Controle mediado; 2. Maior precisão, menor imersão; 3. Aproveita a familiaridade e experiência computacional; 4. Associações emocionais com o trabalho; 5. Perfeito para produtividade e eficiência nas tarefas; 6. A interface é visível e gráfica. 1. Manipulação direta; 2. Menor precisão, maior imersão; 3. Aproveita as suposições do usuário e conclusões lógicas; 4. Associações emocionais com o entretenimento; 5. Perfeito para tarefas sociais e colaborativas; 6. A interface é física e invisível. Projetando Interfaces Naturais
  13. 13. Don Norman que cunhou o termo User Experience, quando trabalhava na Apple no início de 1990, e renomeou o seu cargo para User Experience Architect Group: “I invented the term because I thought human Interface and usability was too narrow; I wanted to cover all aspects of a person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual. Since then, the term has spread widely, so much so that it is starting to lose its meaning.”
  14. 14. O Design é Cognitivo
  15. 15. O Design é Emocional
  16. 16. Design Emocional: porque adoramos (ou detestamos) os objetos do dia-a-dia Nível Viceral Nível Comportamental Nível Reflexivo
  17. 17. Projetar para pessoas Compartilhar boas histórias Estimular os sentidos < usabilidade > < desejo > < utilidade >
  18. 18. Mobile expande suas capacidades técnicas: GPS, user orientation, multi-touch, acelerômetro, etc.
  19. 19. Razões para fazer Mobile
  20. 20. 6 em cada 10 espectadores
 usam o Mobile ao mesmo
 tempo que assistem TV E desses, 7 em 10 prestam 
 mais atenção no mobile.
  21. 21. 86% dos usuários
 de Smartphone fazem pesquisas
 de compra no mobile O site mobile é o principal canal 
 para atividades comerciais no celular.
  22. 22. Apenas 28% do tempo
 é gasto com redes sociais
 e entretenimento Os outros 72%: Fotos, bancos, 
 mapas, apps de empresas, 
 buscas, e-mail, comparação 
 de preços, compras...
  23. 23. Micro-momentos: 
 momentos espontâneos de tomada de decisão que ditam resultados ao longo de toda a jornada de consumo.
  24. 24. 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ô. 91% dos usuários de smartphone buscam por informação em seus aparelhos enquanto estão no meio de alguma outra tarefa.
  25. 25. 82% dos usuários de smartphone consultam seus aparelhos enquanto estão na loja decidindo o que comprar. E desses, um em cada dez acaba mudando sua decisão de compra. 69% dos consumidores online concordam que a qualidade, o timing ou a relevância das mensagens de uma empresa afetam sua percepção da marca.
  26. 26. https://www.youtube.com/watch?v=ZConFVUKm3s
  27. 27. As marcas bem-sucedidas de amanhã vão ser as que têm uma estratégia para entender e suprir as demandas dos consumidores nesses micro-momentos.
  28. 28. Compreender o
 contexto de uso
  29. 29. Contexto de uso Desktop 1. Atenção elevada 2. Tela grande 3. Conexão rápida 4. Posição estática
  30. 30. Contexto de uso Mobile 1. Pouca atenção 2. Tela pequena 3. Conexão lenta 4. Posição dinâmica
  31. 31. Quem é seu consumidor? O que ele quer? Ele conseguiu? Ele navegou com facilidade? A experiência foi prazerosa? Ele usaria seu produto ou serviço novamente?
  32. 32. Mais do que tecnologia: 
 entender o contexto é a chave para criar boas experiências.
  33. 33. Pesquisa Quantitativa: bases de dados, web analytics, observação, questionários, relatórios de marketing, mídias sociais, etc. Pesquisa Qualitativa: entrevistas + coleta de dados. Criação de Personas Mapa de Jornada do Consumidor Testes de Usabilidade
  34. 34. Mobile First
  35. 35. O excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo na versão desktop.
  36. 36. Bullshit Bullshit Bullshit Bullshit Bullshit Bullshit Bullshit Bullshit Bullshit
  37. 37. Validando o Mobile First
  38. 38. O mobile não deixa espaço para nenhum conteúdo de relevância duvidosa. Você precisa saber o que realmente importa. Para fazer isso você precisa conhecer bem os seus usuários e o seu mercado.
  39. 39. Uma coisa é certa: quando seu consumidor procura sua marca no mobile, ele precisa encontrá-la.
  40. 40. Brad Frost “Repeat after me: Mobile Users will do anything and everything desktop users will do, provided it's presented in a usable way.”
  41. 41. Não dá pra pegar seu site desktop, jogar no mobile e achar que a experiência vai ser boa.
  42. 42. https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
  43. 43. https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
  44. 44. https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
  45. 45. https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
  46. 46. Faça testes: o site mobile precisa funcionar em todos os dispositivos e navegadores disponíveis, celulares e tablets, com telas de tamanhos diferentes.
  47. 47. O que funcionava no desktop, com o usuário sentado na frente do computador, tem boas chances de não funcionar nos vários contextos que o mobile oferece.
  48. 48. Empatia é a capacidade de compreender o sentimento ou reação da outra pessoa imaginando-se nas mesmas circunstâncias.
  49. 49. Colaboração significa agir com outrem para a obtenção de determinado resultado, ou ter participação em obra coletiva.
  50. 50. Experimentação é o ato de analisar 
 uma hipótese em um contexto, levando a nossa criatividade do papel para a prática do mundo real.
  51. 51. Desenhe sua solução primeiro para mobile, depois para desktop.
  52. 52. http://www.uxdesign.blog.br http://www.slideshare.net/HubSpot/50- mobilefactsdeck62812 http://60secondmarketer.com/blog/2011/10/18/ more-mobile-phones-than-toothbrushes/ http://www.eweek.com/c/a/Mobile-and-Wireless/ Mobile-Internet-Usage-to-Top-Wireline-Surfing- by-2015-IDC-Report-617848 https://vimeo.com/4420794 http://www.jnd.org/books/emotional-design-why- we-love-or-hate-everyday-things.html http://darmano.typepad.com/logic_emotion/ 2006/06/holy_trinity_of.html http://www.lukew.com/ff/entry.asp?1117 https://www.thinkwithgoogle.com/intl/pt-br/articles/ por-que-mobile.html https://www.thinkwithgoogle.com/intl/pt-br/articles/ ux-user-experience.html https://www.thinkwithgoogle.com/intl/pt-br/articles/ site-ou-app.html https://www.thinkwithgoogle.com/intl/pt-br/articles/ nove-segredos-site-mobile.html https://www.youtube.com/watch?v=ZConFVUKm3s http://www.uxmatters.com/mt/archives/2013/02/ how-do-users-really-hold-mobile-devices.php http://scotthurff.com/posts/facebook-paper-gestures Referências
  53. 53. Obrigado! @eduagni

×