Apresentação realizada no 14o Encontro Locaweb no Rio de Janeiro - 26/06/2012

1. Encontro
LOCAWEB
Rio de Janeiro
Junho 2012

2. ?

3. Horácio Soares
horacio@digitalacesso.com
horacio.soares@internativa.com.br
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares

5. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

6. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

7. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

8. O que as pessoas esperam em uma
experiência em dispositivos móveis?

9. felicidade

10. felicidade

11. experiência perfeita

12. A experiência
perfeita

13. felicidade

14. Entretanto, a experiência
pertence as pessoas.
O designer não projeta a
experiência…
Projeta para a
experiência do usuário.

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

16. Um caminho para uma
experiência perfeita vem da
busca pelas melhores
IDADES

17. IDADES?

18. Acessibil
IDADE

22. Acessibil
Usabil
IDADE

25. Comercial
Mercado Livre
“Eu compro o
que quiser, 2011
senão quiser,
não compro”
Comercial do Mercado
Livre 2011

26. Acessibil
Usabil
Simplic
IDADE

27. ESPN Brasil– abril 2010

28. ESPN Brasil– abril 2010

30. 10 princípios de UX do Google
Princípio 3. O simples é poderoso.

32. Em uma interface perfeita para
as pessoas, elas nunca deveriam
errar, principalmente no mundo
mobile…

33. Acessibil
Usabil
Simplic
Interativ
IDADE

37. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE

44. 10 princípios de UX do Google
Princípio 2 - cada milisegundo importa.
Melhor definição de milisegundo?

46. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil

49. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ

52. 10 princípios de UX do Google
Princípio 8 – agrade aos olhos sem
distrair a mente

53. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ
Util

54. 10 princípios de UX do Google
Princípio 1 – foque nas pessoas: suas
vidas, trabalho, sonhos.

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

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

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

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

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

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

62. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ
Util
Facil

63. Acessibil
Usabil
Simplic

65. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ
Util
Facil
Portabil
…

68. A melhor idade vem da:
Investigação
Observação
Colaboração
Análise
Avaliação
Validação

69. Erico Fileno

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

71. Por isso, em projetos
mobile, precisamos
estratégia,
IDADE(n)(e design de verdade

72. E o que as empresas esperam?

74. Mulher com notebook em sinal de ok
o melhor osso…

75. mas como

76. com qualidade...

77. acertando
o tiro certo
no alvo certo

78. com estratégia

79. “uma conspiração
para o sucesso”

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

81. onde devemos mirar?

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

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

84. De sinuca?

85. Ping-pong?

86. Futebol de botão?

87. Carteado?

88. Ou seria uma mesa para computador?

89. Reunião?

90. Escritório?

91. Mesa de centro?

92. Jantar?

93. Ou seria uma mesa de cirurgia?

94. De autópsia?

95. 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

96. CAUSO 1 (continuação)
Para uma mesa pode parecer
exagero, mas não para
sistemas e sites...
Livro: O Tiro e o Alvo

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

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

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

101. Um caminho: modelagem participativa

102. a busca
do equilíbrio

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

104. Por que Mobile?

105. crescimento = oportunidade

106. no Brasil

107. http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf

108. 1
Os smartphones são
indispensáveis no
cotidiano

111. 2
Os smartphones
transformaram o
comportamento
do consumidor

115. 3
Os smartphones ajudam
os usuários a navegar
pelo mundo

116. 4
Os smartphones mudam o modo
como os consumidores
fazem compras

120. 5
Os smartphones
ajudam os
anunciantes a
entrarem em
contato com os
clientes

122. Estatísticas

123. Maio de 2012
http://www.mobiletime.com.br/29/05/2012/brasil-tem-52-milhoes-de-acessos-de-banda-larga-movel-diz-estudo/280718/news.aspx

124. TIC Domicílios 2011
outubro de 2011 – janeiro 2012
http://cetic.br/usuarios/tic/2011-total-brasil/

129. http://www1.folha.uol.com.br/tec/1098360-uso-de-internet-no-celular-cresce-340-em-um-ano.shtml

130. Maio 2012
http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

131. Maio 2012
http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

132. Maio 2012
http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

133. Maio 2012
http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html

134. No mundo

135. O ecosistema do Mobile.
http://econsultancy.com/us/reports/mobile-ecosystem

136. Fevereiro 2012
http://blog.nielsen.com/nielsenwire/online_mobile/smartphones-account-for-half-of-all-mobile-phones-dominate-new-phone-purchases-in-the-us/

137. Maio de 2012
http://blog.nielsen.com/nielsenwire/online_mobile/how-us-smartphone-and-tablet-owners-use-their-devices-for-shopping/

138. comScore – dezembro de 2011

139. capacidades/va
ntagens
do mobile

140. GPS

141. Acelerômetro

142. Giroscópio

143. Bluetooth

144. Áudio, vídeo e imagem

145. NFC

146. Sensores multitoque

147. Em qualquer hora e local.

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

149. Boa compatibilidade entre
navegadores Mobile e HTML5

150. Atualizações frequentes...

151. Contexto:
By: Thais Souza @_tsouza_

152. By: Thais Souza @_tsouza_

153. É sobre pessoas e não plataformas…

154. Paixão
By: Thais Souza @_tsouza_

155. vaidade
By: Thais Souza @_tsouza_

156. raiva

157. alegria

158. frustração

159. Otimização de tempo

160. Útil para esportes….
By: Thais Souza @_tsouza_

161. Funcionais…
By: Thais Souza @_tsouza_

162. Para comprar…
By: Thais Souza @_tsouza_

163. Inovador

164. Conhecimento….
By: Thais Souza @_tsouza_

165. Para novos gênios….

166. Para todos….
By: Thais Souza @_tsouza_

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

168. Muitas vezes, ao interagir com
mobile, as pessoas estão em
modo: “fritando o peixe e
olhando o gato” e com
apenas um dos dedos...

169. @lukew

171. „Desktop is like “diving”
while mobile is
“snorkling.”‟ by Rachel
Hinman
at Nokia

172. desktop
@lukew

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

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

176. mobile
@lukew

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

180. Outras limitações:
● Capacidade de processamento reduzida.
● 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

181. perda de 80% do espaço

182. @lukew

183. Pode parecer uma tragédia, mas isso pode
ser ótimo para o negócio...

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

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

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

187. @lukew

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

189. Less is more...

190. @lukew

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

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

193. Mobile First
Luke Wroblewski

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

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

196. Paradoxo da escolha

197. mitos

198. as pessoas não vão
se registrar via mobile

199. não vão comprar via mobile

200. não vão criar conteúdo, fazer
reviews, dar opinião, etc.

201. sempre seremos surpreendidos
pelo que as pessoas fazem na
experiência mobile

202. http://midiaria.wordpress.com/2012/02/21/10pesquisa-sms-mavam-acision-brasil/

203. se as perguntas fizerem sentido e a
interface tiver um bom design, as
pessoas vão responder...

204. Algumas recomendações

205. - INPUTS
(entrada de dados)

206. 1- LABELS no topo

215. LABEL no topo
• Miniminiza o tempo para
entrada de dados
• Mais fácil de codificar:
sem floats e tabelas
• Acessibilidade:
label, campos na ordem
certa
• Melhor formato para
mobile
• Suporte diferentes
resoluções
• Requer mais espaço

218. 2 – Confirmação de dados

219. Confirmação
de senha?

220. Confirmação
de e-mail?

221. 3 – Opção de senha sem
mascara.

223. 4 – Cadastro obrigatório

224. Será que é mesmo necessário
me cadastrar em um site de
e-commerce para fazer uma
compra?

225. - Navegação

226. Content First

239. - Botões de voltar...

242. - Espaços em branco...

243. - Web Standards

244. Toque...

245. Se o dispositivo é
pequeno, por que não
tornar toda área
interativa?

246. Toque seguro...

247. Recomendação Apple
Deixe espaço
suficiente para
toque
acidentais
By: Thais Souza @_tsouza_

248. Mas…a Microsoft pede 34px e a Nokia 28px?
By: Thais Souza @_tsouza_

249. Mas…o dedo de um adulto vai de 45 a 57px
E o dedão pode chegar até 72px
By: Thais Souza @_tsouza_

250. Quantos dedos você usa
em um smartphone?
By: Thais Souza @_tsouza_

252. By: Thais Souza @_tsouza_

253. -Performance

254. -Performance
-http://gtmetrix.com

265. Qual caminho mobile meu site deve seguir?

266. -Avaliação e validação

267. How To Conduct
A Usability Test
On A Mobile Device
http://www.measuringusability.com/blo
g/mobile-usability-test.php

270. -Como testar aqui?

271. Foto: Rosenfield Media

272. Prototipação

273. Obrigado!
Horácio Soares
Workshop Design Mobile
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares