O documento discute princípios e boas práticas de design para experiências mobile, como acessibilidade, usabilidade, simplicidade, interatividade e velocidade. Também aborda desafios como equilibrar objetivos da empresa com necessidades dos usuários e como testar interfaces mobile. Recomenda seguir abordagens como "mobile first" e focar na experiência do usuário.

1. front<in>bh
Belo Horizonte
Julho 2012

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

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

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. Estamos falando de pessoas,
não de dispositivos...

9. “design for mobile people,...
...not for mobile device” Foto: Rosenfield Media

11. O que as pessoas esperam em uma
experiência MOBILE?

12. felicidade

13. felicidade

14. experiência perfeita

15. felicidade

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

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

18. Um caminho,
principalmente em Mobile,
vem da busca pelas melhores
IDADES

19. IDADES?

20. Acessibil
IDADE

24. Acessibil
Usabil
IDADE

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

28. Acessibil
Usabil
Simplic
IDADE

29. ESPN Brasil– abril 2010

30. ESPN Brasil– abril 2010

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

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

35. Acessibil
Usabil
Simplic
Interativ
IDADE

39. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE

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

50. Um caminho:
seguir
as dicas de otimização
indicadas na apresentação
do Sérgio, mas cuidado
com acessibilidade…
sergiolopes.org

52. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil

55. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ

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

59. Acessibil
Usabil
Simplic
Interativ
Veloc IDADE
Encontrabil
Atrativ
Util

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

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

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

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

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

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

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

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

69. Acessibil
Usabil
Simplic

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

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

74. By Erico Fileno

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

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

77. E o que as empresas esperam?

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

80. mas como

81. com qualidade...

82. acertando
o tiro certo
no alvo certo

83. com estratégia

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

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

86. onde devemos mirar?

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

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

89. De sinuca?

90. Ping-pong?

91. Futebol de botão?

92. Carteado?

93. Ou seria uma mesa para computador?

94. Reunião?

95. Escritório?

96. Mesa de centro?

97. Jantar?

98. Ou seria uma mesa de cirurgia?

99. De autópsia?

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

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

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

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

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

107. Equilíbrio?

108. a busca
do equilíbrio

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

110. Um caminho: modelagem participativa

111. Sitemap
Antes de prototipar, crie coletivamente
(designers, arquitetos de informação,
desenvolvedores front/back, analista de
negócios, gerentes, etc.)
fluxos com os principais passos dos
clientes em seu site/sistema.

112. Um Vocabulário Visual para AI e Design de Interação
http://iainstitute.org/pt/translations/000332.html
http://migre.me/wI0X

113. Protótipos
Depois, crie
“coletivamente" protótipos
em papel, em computador...

114. Prototipação

116. Por que Mobile?

117. crescimento = oportunidade

118. no Brasil

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

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

123. 2
Os smartphones
transformaram o
comportamento
do consumidor

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

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

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

134. Estatísticas no Brasil

135. GIF
animado...

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

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

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

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

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

144. No mundo

145. Vários GIFs
animados...

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

147. capacidades/va
ntagens
do mobile

148. GPS

149. Acelerômetro

150. Giroscópio

151. Bluetooth

152. Áudio, vídeo e imagem

153. NFC

154. Sensores multitoque

155. Em qualquer hora e local.

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

157. Boa compatibilidade entre
navegadores Mobile e HTML5

158. Atualizações frequentes...

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

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

163. @lukew

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

165. desktop
@lukew

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

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

169. mobile
@lukew

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

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

173. perda de 80% do espaço

174. @lukew

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

176. te força a priorizar...
te força a manter o foco…
@lukew

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

178. Flickr desktop
60 opções de menu...
@lukew

179. @lukew

180. Flickr mobile
7 opções de menu...
@lukew

181. Less is more...

182. @lukew

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

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

185. Mobile First
Luke Wroblewski

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

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

188. Paradoxo da escolha

190. mundo Mobile...

191. Qual contexto?
By Thais @tsouzamobile

192. By Thais @tsouzamobile

193. É sobre pessoas e não plataformas…

194. Paixão
By Thais @tsouzamobile

195. vaidade
By Thais @tsouzamobile

196. aiva

197. alegria

198. frustração

199. Otimização de tempo

200. Útil para esportes….
By Thais @tsouzamobile

201. Funcionais…
By Thais @tsouzamobile

202. Para comprar…
By Thais @tsouzamobile

203. Inovador

204. Conhecimento….
By Thais @tsouzamobile

205. Para novos gênios….
By Thais @tsouzamobile

206. Para todos….
By Thais @tsouzamobile

208. mitos

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

210. não vão comprar via mobile

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

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

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

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

215. Algumas recomendações

216. - INPUTS
(entrada de dados)

217. 1- LABELS no topo

226. 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
vertical

229. 2 – Confirmação de dados

230. Confirmação
de senha?

231. Confirmação
de e-mail?

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

234. 4 – Cadastro obrigatório

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

236. - Navegação

237. Content First

250. - Botões de voltar...

251. By @lukew

253. - Espaços em branco...

254. - Web Standards

255. Toque...

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

257. Toque seguro...

258. Recomendação Apple
Deixe espaço
suficiente para
toque
acidentais
By Thais @tsouzamobile

259. Mas…a Microsoft pede 34px e a Nokia 28px?
By Thais @tsouzamobile

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

261. Quantos dedos você usa
em um smartphone?
By Thais @tsouzamobile

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

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

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

277. -Como testar aqui?

278. Foto: Rosenfield Media

279. Momento debate
Qual caminho meu website deve seguir?
Separar URL‟s para mobile e desktop com conteúdos diferentes?
Separar URL‟s para mobile e desktop copiando o conteúdo?
Uma única URL que se adapta a todas as telas?
By Thais @tsouzamobile

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