Mobile First
Desenhar para smartphones

Industry Sessions by EDIT. | Responsive Design | 29 de Novembro 2013
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...
7.000 milhões de pessoas

Fonte: Wikipedia
2.000 milhões de computadores

Fonte: Ask.com
1.500 milhões de smartphones

Fonte: Business Insider
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
Quando (e onde) utilizamos o smartphone?
35% no Cinema

Fonte: CNN
33% no Jantar de namorados

Fonte: CNN
32% no Festa da Escola

Fonte: CNN
19% no Igreja

Fonte: CNN
Sony Xperia Z1

12% no banho

Fonte: CNN / Sony
9% durante as relaçoes sexuais

Fonte: CNN
Fonte: Verizon
Realmente, para que os utilizamos?*

*Alem das Chamadas, SMS e E-mails
46% “Me Time”

Fonte: Harvard Business Review

Procurando descontrair ou entretenimento
19% Socializando

Fonte: Harvard Business Review

Interagir com outras pessoas
12% Shopping

Fonte: Harvard Business Review

Procurando produtos ou serviços
11% Produção

Fonte: Harvard Business Review

Gerir finanças, saude e produtividade
7% Planificação

Fonte: Harvard Business Review

Preparar viagens e futuros eventos
4% Descobertas

Fonte: Harvard Business Review

Procurando noticias e informação
1% Auto-expressão

Fonte: Harvard Business Review

Participar em passatempos e interesses
O mais importante,... primeiro!
Mobile First
➔ CRESCIMENTO = OPORTUNIDADE
➔ RESTRIÇÕES = REALÇAR
➔ CAPACIDADES = INOVAÇÃO
Fonte: @Wilto
Organização da Informação
1. Comportamentos dos smartphones
2. Conteúdo em primeiro lugar
3. Elementos de navegação
4. Clareza e foco

?
Comportamentos
➔ Conhece bem quais são os pontos fortes do
smartphone
➔ Ajuste a organização do site em conformidade
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
Minima navegação

Máximo conteúdo
Minima navegação

Máximo conteúdo

Filtros de navegação
relevantes
Minima navegação

Conteúdo

Informação Geolocalizada
Filtros de navegação
relevantes
Minima navegação

Informação Geolocalizada
Máximo conteúdo

Informação Geolocalizada
Navegação

Links mais pequenos
que o meu dedo

Conteúdo com tamanho
desproporcional

É para fazer click?
Elementos de navegação
Páginas mais visitadas
Ícone “standard” de
Menu de navegação

Ícone “standard” de
Pesquisa

São mostrados os
conteúdos coma maior
numero de visitas
Final do site
“Dead End”
Ícone “standard” de
menu de navegação

Shortcut para Mail
Caixa de Pesquisa

O menu aparece por
encima da pagina,
ocultando o conteúdo
Clareza e Foco
Não existe menu
de navegação
Procura de conteúdo

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

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

Máximo Conteúdo
WTF?
Obrigado!

@rbarona

Mobile First