Palestra ministrada no MobileConf 2013, em São Paulo - abril.

1. Horácio Soares
@horaciosoares
21 9925-5404
Mobile First
Outubro de 2012 – São Paulo!

2. Mobile First

3. Mobile First
Luke Wroblewski
Livro: http://www.abookapart.com/products/mobile-first

4. Mas antes…

5. Qual é contexto do
Mobile?

6. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4

9. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6

10. Os smartphones são
indispensáveis no
cotidiano

18. “In 2013, Mobile Phone will
overtake PC’s as the most
common Web access device
world wide.”
— GARTNER

21. Slide 107
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-

22. Como o Luli disse no Digitalks no Rio:
“Nesse mundo Mobile, somos
todos daltónicos e sofremos
do Mal de Parkinson”

26. capacidades/
vantagens
do mobile

27. GPS

28. Case Toyota

30. Acelerômetro

31. Giroscópio

33. Bluetooth

34. Áudio, vídeo e imagem

35. NFC

36. Sensores multitoque

37. Em qualquer hora e local.

38. Novas maneiras de interação e apresentação

39. Boa compatibilidade entre
navegadores Mobile e HTML5

40. Atualizações frequentes...

42. limitações/restrições
do mobile

43. “fritando o peixe e olhando o gato”.

44. @lukew

45. ‘Desktop is like “diving”…

46. …while mobile is like “snorkling.”’
by Hinman at Nokia
http://www.slideshare.net/Rachel_Hinman

47. O que
todos quando
mergulham
desejam?

49. desktop
@lukew

50. tela grande
@lukew

51. tela grande
energia
@lukew

52. tela grande
energia
rede consistente
@lukew

53. tela grande
energia
rede consistente
teclado
@lukew

54. tela grande
energia
rede consistente
teclado
mouse
@lukew

55. tela grande
energia
rede consistente
teclado
mouse
cadeira
@lukew

56. tela grande
energia
rede consistente
teclado
mouse
cadeira
mesa
@lukew

57. tela grande
energia
rede consistente
teclado
mouse
cadeira
caneca de café
mesa
@lukew

59. mobile
@lukew

60. tela pequena
@lukew

61. tela pequena
bateria
@lukew

62. tela pequena
bateria
rede inconsistente
@lukew

63. tela pequena
bateria
rede inconsistente
dedo gordo
@lukew

64. tela pequena
bateria
rede inconsistente
dedo gordo
sensores
@lukew

65. Outras limitações:
● Capacidade de armazenamento e
processamento reduzido.
● Uma aplicação em HTML5 para mobile
pode ser até 100 vezes mais lenta que em
desktop.
http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf

66. perda de 80% do espaço

67. @lukew

68. e isso pode ser ótimo para o negócio...

69. te força a priorizar...
te força a manter o foco…

70. Alguém conhece algum site
que gostaria que 80% do seu
conteúdo/itens/elementos
fosse retirado da interface?

71. Flickr desktop
60 opções de menu...

72. @lukew

73. Flickr mobile
7 opções de menu...

74. Less is more...

75. @lukew

76. Restrições são boas para o
design, pois te forçam a
priorizar, a manter o foco

77. mas cuidado…

78. no ponto…

82. Os detalhes do
comprador não
podem ser
visualizados na
versão mobile.

87. Desktop
Site

89. Mobile Site

93. Ainda antes de focar
no Mobile First, como
anda a qualidade dos
nossos sites nas
versões desktop?

95. Será?

96. Uma breve avaliação
de conhecidos sites de
notícias sobre TI

110. O Mobile First
vem tirar os sites
Desktop do
CTI

112. Mobile First
Luke Wroblewski
Livro: http://www.abookapart.com/products/mobile-first

113. SIMPLICIDADE

114. Paradoxo da escolha

115. Elimine da interface itens que não
sejam extremamente
necessários...

116. Qual desses Desktops oferecia a
melhor experiência?

117. Qual desses Desktops oferecia a
melhor experiência?

118. E qual desses controles?

119. Case Extreme Booking with Hotels.com

120. http://www.youtube.com/watch?v=gcuFkiEORsE

121. Desktop first!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

125. Mobile First!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

126. Mobile First!

127. Mobile First!

128. Mobile First!

130. Mas antes do Mobile First
precisamos de
estratégia...

131. Estratégia:
”conspiração para o
sucesso”

133. X

134. Projetos UX Mobile

135. O que os
usuários
esperam?

136. felicidade

137. felicidade
X

138. felicidade

139. felicidade
X

140. experiência perfeita

141. felicidade

142. Experiência do
“ Usuário (UX) é a
qualidade da
experiência que uma
pessoa tem ao
interagir com algo
projetado.
uxnet.org ”

143. E o que as empresas
esperam?

144. o melhor osso…

145. mas como

146. com qualidade...

147. acertando
o tiro certo
no alvo certo

148. para onde vamos?
http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg

149. onde devemos mirar?

150. Causo 1
Precisamos
Construir
uma mesa.
Liv
O Tiro e o A

151. CAUSO 1
- A propósito, que mesa?
Livro: O Tiro e o Alvo

152. De sinuca?

153. Ping-pong?

154. Futebol de botão?

155. Carteado?

156. Ou seria uma mesa para computador?

157. Reunião?

158. Escritório?

159. Mesa de centro?

160. Jantar?

161. Ou seria uma mesa de cirurgia?

162. De autópsia?

163. CAUSO 1 (continuação)
- Isso não interessa,
meu filho. Depois a
gente vê. Vamos
começar logo o
trabalho. O prazo é Livro: rework
37 Signals
curto, então, mãos à
obra!
Livro: O Tiro e o Alvo

164. Conclusão?
Retrabalho, desgaste com o
cliente e diminuição do lucro.

165. Como são nossas
experiências?

168. • A maioria das experiências
ruins poderiam ser evitadas
com a identificação do alvo
certo e com avaliações com
usuários...

169. By Bernard De Luna

170. 50%
É a média do tempo gasto em
refação nos projetos de TI.
Fonte:
http://spectrum.ieee.org/computing/software/why-software-fails/0
Via Curso AI Faber Ludens:
http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013

171. 15%
Dos projetos são abandonados
depois de uma primeira entrega
inadequada.
Fonte:
http://spectrum.ieee.org/computing/software/why-software-fails/0
Via Curso AI Faber Ludens:
http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013

172. 83%
É a média da melhoria dos KPI’s em
projetos com 10% do orçamento
gasto em pesquisa de usabilidade.
Fonte:
http://spectrum.ieee.org/computing/software/why-software-fails/0
Via Curso AI Faber Ludens:
http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013

173. Aumento de KPI’s
Conversões - Tráfego no site -
Cadastros - Contatos de novos
clientes - Vendas - Fatia de mercado -
Transações - Taxa de sucesso em
tarefas - Retenção - Produtividade -
Pageviews - Uso do sistema - Visitas
key performance indicator (KPI)
http://en.wikipedia.org/wiki/Key_performance_indicator

174. Diminuição de KPI’s
Custos do projeto - Tempo de
desenvolvimento do projeto - Custo de
treinamento - Erros no uso do sistema
- Tempo do usuário - Chamadas em
help desk - Refações – Manutenção.
key performance indicator (KPI)
http://en.wikipedia.org/wiki/Key_performance_indicator

175. desafio 1:
identificar objetivos e necessidades…

176. Investigação Baseada em Perguntas
Precisamos automatizar
a Contabilidade
Preciso do Balancete dia 5
e não dia 15 como atualmente!
Por Quê?
Por Quê?
Por Quê?
Necessito da Conta X do
Balancete até o dia 5.
Preciso do valor da Conta X
para calcular até o dia 7
o valor das Reservas.
Precisamos informar o
valor das Reservas ao
Banco Central até o dia 8!
Por que se não
informarmos as Reservas
seremos multados!!

177. Uma proposta de briefing
Baseado em perguntas:
http://clearleft.s3.amazonaws.com/client-
worksheet.doc
http://bit.ly/a5tRzF

178. Desafio 2:
Como atender ao mesmo tempo
os objetivos e as necessidades?
Marte Vênus
Objetivos e metas da empresa Necessidades dos usuários

179. Objetivos
e metas
do projeto

180. • Precisa de novos clientes/usuários.
• Quer que os clientes atuais visitem seu site com
maior frequencia.
• Quer aumentar a margem de lucro.
• Você precisa aumentar sua audiência, seu público.
• Quer diferenciar sua marca.
• Gostaria de melhorar o retorno sobre o investimento
(ROI).
• Quer que seus clientes gastem mais a cada compra.
• Está à procura de novos canais de distribuição.
• Quer aumentar sua fatia do mercado (market share).
• ...

181. Reais
necessidades
dos usuários

182. • Qualidade.
• Simplicidade.
• velocidade.
• Utilidade.
• Usabilidade.
• Acessibilidade.
• Portabilidade.
• Bom custo x benefício.
• Resolver seu problema.
• ...

183. Objetivos Reais
e metas necessidades
do projeto dos usuários

185. a busca
do equilíbrio

186. empresa
Objetivos
e metas do
projeto Necessidades
dos
usuários
usuários

187. um case em equilíbrio…

188. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

189. Erico Fileno

190. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

191. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

192. Observação e identificação
de um problema...

193. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

194. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

196. CSS
HandHeld
Design
Não fazer Design
Líquido
nada… Respon-
sivo
Otimizado
para
Mobile
App
Nativa
Quais os
caminhos do App
design mobile?
Híbrida

198. Não fazer
nada…
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013

199. Não
fazer
nada!

203. CSS
HandHeld
Design
Não fazer
Líquido
nada…
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013

204. CSS
HandHeld
Design
Líquido

206. CSS
media
HANDHELD
Como era em 2004,
2005, 2006...?

207. Site
Acesso Digital
2007

208. Portabilidade - design líquido (resolução 1024x768)

209. Portabilidade - design líquido ( resolução 640x480)

210. Portabilidade – CSS (Display PRINT)

211. Portabilidade
css para dispositivo móvel
MOTO Q
Acesso Digital:
http://acessodigital.net

213. CSS
HandHeld
Design
Não fazer Design
Líquido
nada… Respon-
sivo
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013

214. Design
Responsivo

221. CSS
HandHeld
Design
Não fazer Design
Líquido
nada… Respon-
sivo
Otimizado
para
Mobile
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013

222. Otimizado
para
Mobile

225. Otimizado
para
Mobile
2 v.
Desktop
e Mobile

226. 2 v.
Desktop
e Mobile

227. 2 v.
Desktop
e Mobile

228. 2 v.
Desktop
e Mobile

229. Site otimizado para Mobile
A maioria oferece apenas duas versões:

230. Site otimizado para Mobile
Normalmente a versão Mobile é projetada
com foco nas atividades fins.

231. Otimizado
para
Mobile
3 v.
Desktop,
Tablet e
Mobile

232. Site otimizado para Mobile
Algumas empresas têm três versões diferentes:

233. Otimizado
para
Mobile
3 v.
2 v.
Desktop,
Desktop
Tablet e
e Mobile
Mobile

235. CSS
HandHeld
Design
Não fazer Design
Líquido
nada… Respon-
sivo
Otimizado
para
Mobile
App
Nativa
os caminhos
do design
mobile
@horaciosoares – Campus Party 2013

236. App
Nativa

239. App
Nativa
Blackbarry
Windows
Android IOS Phone

241. CSS
HandHeld
Design
Não fazer Design
Líquido
nada… Respon-
sivo
Otimizado
para
Mobile
App
Nativa
os caminhos
do design App
mobile Híbrida
@horaciosoares – Campus Party 2013

242. App
Híbrida

244. Via Thais Souza @tsouzamobile!

245. Qual melhor caminho?

247. Mobile First
Luke Wroblewski
Livro: http://www.abookapart.com/products/mobile-first