Mobile First: Desenhar para smartphones

Presentation by @rbarona at "Industry Sessions by EDIT" about Responsive Design. 29/Nov/2013

Transcript

1. Mobile First Desenhar para smartphones Industry Sessions by EDIT. | Responsive Design | 29 de Novembro 2013
2. Rodrigo Barona Head of creative technology & digital production @jwtlisbon, husband and father 2.0. Formerly @softwarephc, @leoburnettpt, @proodcom & @Valuelearning Born in Valencia (Spain) <3 Web Standards, Opens Source, WebApps, Apple, WordPress, UX, Snowboard... @rbarona
3. 7.000 milhões de pessoas Fonte: Wikipedia
4. 2.000 milhões de computadores Fonte: Ask.com
5. 1.500 milhões de smartphones Fonte: Business Insider
6. 45 milhões Windows Phone 3% do mercado 768 milhões Android 57% do mercado Fonte: Business Insider 294 milhões iOS 21% do mercado
7. Quando (e onde) utilizamos o smartphone?
8. 35% no Cinema Fonte: CNN
9. 33% no Jantar de namorados Fonte: CNN
10. 32% no Festa da Escola Fonte: CNN
11. 19% no Igreja Fonte: CNN
12. 12% no banho Fonte: CNN / Sony Sony Xperia Z1
13. 9% durante as relaçoes sexuais Fonte: CNN
14. Fonte: Verizon
15. Realmente, para que os utilizamos?* *Alem das Chamadas, SMS e E-mails
16. 46% “Me Time” Procurando descontrair ou entretenimento Fonte: Harvard Business Review
17. 19% Socializando Interagir com outras pessoas Fonte: Harvard Business Review
18. 12% Shopping Procurando produtos ou serviços Fonte: Harvard Business Review
19. 11% Produção Gerir finanças, saude e produtividade Fonte: Harvard Business Review
20. 7% Planificação Preparar viagens e futuros eventos Fonte: Harvard Business Review
21. 4% Descobertas Procurando noticias e informação Fonte: Harvard Business Review
22. 1% Auto-expressão Participar em passatempos e interesses Fonte: Harvard Business Review
23. O mais importante,... primeiro!
24. Mobile First ➔ CRESCIMENTO = OPORTUNIDADE ➔ RESTRIÇÕES = REALÇAR ➔ CAPACIDADES = INOVAÇÃO
25. Fonte: @Wilto
26. Organização da Informação 1. Comportamentos dos smartphones 2. Conteúdo em primeiro lugar 3. Elementos de navegação 4. Clareza e foco ?
27. Comportamentos ➔ Conhece bem quais são os pontos fortes do smartphone ➔ Ajuste a organização do site em conformidade
28. Conteúdo primeiro Primeiro o conteúdo, depois a navegação: ➔ Minima navegação, máximo conteúdo ➔ Foco onde mais importa ➔ Aos poucos, revela experiências
29. Minima navegação Máximo conteúdo
30. Minima navegação Máximo conteúdo Filtros de navegação relevantes
31. Minima navegação Conteúdo Informação Geo- localizada Filtros de navegação relevantes
32. Minima navegação Máximo conteúdo Informação Geo- localizada Informação Geo- localizada
33. Navegação Conteúdo com tamanho desproporcional Links mais pequenos que o meu dedo É para fazer click?
34. Elementos de navegação Páginas mais visitadas
35. Ícone “standard” de Pesquisa Ícone “standard” de Menu de navegação São mostrados os conteúdos coma maior numero de visitas
37. Final do site “Dead End”
39. Ícone “standard” de menu de navegação Caixa de Pesquisa Shortcut para Mail O menu aparece por encima da pagina, ocultando o conteúdo
41. Clareza e Foco Não existe menu de navegação Máximo Conteúdo Procura de conteúdo
42. Minima Navegação Máximo Conteúdo Procura de conteúdo
43. Minima Navegação Máximo Conteúdo Procura de conteúdo
45. WTF?
46. Obrigado! @rbarona