Talk - Rodrigo Barona - Industry Sessions #1 - Responsive Design - Powered By EDIT.

1. Mobile First
Desenhar para smartphones
Industry Sessions by EDIT. | Responsive Design | 29 de Novembro 2013

2. Rodrigo Barona
@rbarona
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...

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. 768 milhões Android
294 milhões iOS
57% do mercado
21% do mercado
45 milhões Windows Phone
3% do mercado
Fonte: Business Insider

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. Sony Xperia Z1
12% no banho
Fonte: CNN / Sony

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”
Fonte: Harvard Business Review
Procurando descontrair ou entretenimento

17. 19% Socializando
Fonte: Harvard Business Review
Interagir com outras pessoas

18. 12% Shopping
Fonte: Harvard Business Review
Procurando produtos ou serviços

19. 11% Produção
Fonte: Harvard Business Review
Gerir finanças, saude e produtividade

20. 7% Planificação
Fonte: Harvard Business Review
Preparar viagens e futuros eventos

21. 4% Descobertas
Fonte: Harvard Business Review
Procurando noticias e informação

22. 1% Auto-expressão
Fonte: Harvard Business Review
Participar em passatempos e interesses

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 Geolocalizada
Filtros de navegação
relevantes

32. Minima navegação
Informação Geolocalizada
Máximo conteúdo
Informação Geolocalizada

33. Navegação
Links mais pequenos
que o meu dedo
Conteúdo com tamanho
desproporcional
É para fazer click?

34. Elementos de navegação
Páginas mais visitadas

35. Ícone “standard” de
Menu de navegação
Ícone “standard” de
Pesquisa
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
Shortcut para Mail
Caixa de Pesquisa
O menu aparece por
encima da pagina,
ocultando o conteúdo

41. Clareza e Foco
Não existe menu
de navegação
Procura de conteúdo
Máximo Conteúdo

42. Minima Navegação
Procura de conteúdo
Máximo Conteúdo

43. Minima Navegação
Procura de conteúdo
Máximo Conteúdo

45. WTF?

46. Obrigado!
@rbarona