Mobile UX: a experiência como vantagem competitiva. Apresentação utilizada na palestra realizada no dia 31 de maio de 2014, no MobileConf no Rio de Janeiro.

1. !
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
Mobile UX
A experiência como
vantagem competitiva

2. @horaciosoares
!
Especialista em experiência do usuário, usabilidade,
Design e acessibilidade, é consultor da Acesso
Digital e da Soyuz e possui 16 anos de experiência
no desenvolvimento de soluções Web. Palestrante,
professor e editor de artigos, faz parte do Conselho
Consultivo do Instituto Intranet Portal e do GT de
Acessibilidade na Web do W3C Brasil.
Horacio Soares

3. horacio@mestr.es
facebook.com/mestresbrasil
(21) 9 9925-5404 - @horaciosoares
Skype: horacio.soares
Horácio Soares

4. Projetos UX Mobile

5. Nunca esquecer de duas
palavras mágicas no
mundo móvel:

6. Uma delas te rouba tempo:

7. A outra te faz ganhar tempo

8. Entretenimento

9. Utilidade

10. Como são as
experiências
dos seus clientes?

12. O que os
clientes
esperam?

13. felicidade

14. felicidade
X

15. felicidade
X

16. Isso é felicidade

17. Felicidade…

18. experiência perfeita

19. felicidade

20. e o que as empresas
esperam?

22. Mulher com notebook em sinal de ok
Todos querem o melhor osso…
Cachorrinho caregando um enorme osso.

23. mas como?

24. com qualidade...

25. com uma
experiência de
qualidade...

26. Acertando
o tiro certo
no alvo certo

27. Realidade nos
projetos digitais:

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

29. Livro: O Tiro e o Alvo
Causo 1!
Precisamos
Construir
uma mesa.

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

31. De sinuca?

32. Ping-pong?

33. Futebol de botão?

34. Carteado?

35. Ou seria uma mesa para computador?

36. Reunião?

37. Escritório?

38. Mesa de centro?

39. Jantar?

40. Ou seria uma mesa de cirurgia?

41. De autópsia?

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

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

44. É 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
50%

45. Mais caro fazer alterações em um
projeto finalizado.
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
100x

46. 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
15%

47. É 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
83%

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

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

51. Afinal, o que é eXperiência
do Usuário (UX) ?

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

57. Experiências são uma
!
!
!
!
!
nova oferta econômica.

58. Experiências que fazem
esquecer o mundo a sua volta

59. http://semanticstudios.com/publications/semantics/000029.php
Colmeia da
experiência
do usuário?
!
!
!
!
HoneyComb User Experience

64. http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg

69. X

74. http://semanticstudios.com/publications/semantics/000029.php

77. http://semanticstudios.com/publications/semantics/000029.php

81. Mas como são
nossas experiências
no mundo digital?

84. Como os usuários
são vistos?

89. Para alguns
desenvolvedores e
designers, é assim
que os usuários
deveriam ser
tratados…

90. Usuário bom é usuário m…

91. Usuário bom é usuário m…

92. Resumo da ópera

98. E o resultado não
poderia ser diferente:
experiência ruim
=
resultado pior ainda

99. Estratégia
=
“uma conspiração
para o sucesso”

100. Como, na maioria das
vezes, os projetos Web são
desenvolvidos?

101.
Cliente
Atendimento

102.
Cliente ?
?
?
? ?
?
Atendimento

103. v
Cliente
Atendimento
Designer/Arquiteto
?? ?
?

104. v
Cliente
Atendimento
Designer/Arquiteto

105. v
Cliente
Atendimento
Designer/Arquiteto
?
?
?

106. v
Cliente
Atendimento
Designer/Arquiteto
OK
OK

107. v
Cliente
Designer gráfico
Atendimento
Designer/Arquiteto
?
?
?
#%$&*@#$%$#

108. v
Cliente
Designer gráfico
Atendimento
Designer/Arquiteto
??
?

109. v
Cliente
Designer gráfico
Atendimento
Designer/Arquiteto
??
?

110. v
Cliente
Designer gráfico
Atendimento
Designer/Arquiteto
??
?

111. v
Cliente
Designer gráfico
Atendimento
Designer/Arquiteto
??
?

112. v
Cliente
Designer gráfico
Atendimento
Designer/ArquitetoOK
OK

113. v
Cliente
Designer gráfico
Front End
Atendimento
Designer/Arquiteto
? ?
Backend
?

114. v
Cliente
Designer gráfico
Front End
Atendimento
Designer/Arquiteto
??
Backend
?
#%$&*@#$%$#

115. v
Cliente
Designer gráfico
Front End
Atendimento
Designer/Arquiteto
<html> <style>
<script>
Backend
?
?

116. v
Cliente
Designer gráfico
Front End
Atendimento
Designer/Arquiteto
Backend
?
?
?
<% - - %>
#%$&*@#$%$#

117. v
Cliente
Designer gráfico
Front End
Atendimento
Designer/Arquiteto
<html> <style>
<script>
Backend
<% - - %>

118. v
Cliente
Designer gráfico
Front End
Atendimento
Designer/Arquiteto
<html> <style>
<script>
Backend
<% - - %>
#%$&*@#$%$#
??
?

119. Além dos problemas de
comunicação, um outro grande
problema é:

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

121. Objetivos
e metas
do projeto

122. • 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).
• ...

123. Reais
necessidades
dos usuários

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

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

127. a busca
do equilíbrio

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

129. um case em equilíbrio…

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

131. Erico Fileno

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

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

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

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

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

137. Observação = Descoberta

139. desafio 1:
identificar objetivos e necessidades…

140. Por Quê?Por Quê?Por Quê?Por Quê?Por Quê?
Precisamos automatizar
a Contabilidade
Preciso do Balancete dia 5
e não dia 15 como atualmente!
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!!
Investigação Baseada em Perguntas

141. Por que um
Novo Sistema
de Materiais ?
LUCRO!
Diretor
Presidente
ROUBO!
Chefe do
Almoxarifado
JUROS!
Diretor
Financeiro
PARADAS!
Diretor de
Produção
Modelagem Participativa

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

143. Work is never finished,
only abandoned.
Paul Valéry

145. Mas, na busca por soluções
para os problemas, o que
maioria dos sites faz?

146. Ctrl + C à Ctrl + V para quase tudo...

147. Resultado:
replicamos tudo sem
questionamentos...
!

148. Código de barras

150. X

151.
CAPTCHA

152. Artigo
CAPTCHA: herói ou vilão?
!
http://acessodigital.net/art_captcha-heroi-ou-vilao.html

153. Captcha http://sam.zoy.org/pwntcha/

154. Captcha http://sam.zoy.org/pwntcha/
X

155. Captcha
(solução inacessível e insegura)
(http://www.webvisum.com/en/main/download)

156. Menu DropDown

158. X

159. Clique aqui!

160. Clique aqui!

161. “Clique aqui”, “Saiba mais”, “veja
Mais”… 41.700.000 respostas
para “clique aqui” no Google.

162. Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)

163. Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)
X

164. Ou ainda as mais recentes
modinhas como paralax,
modal, one single page , etc…

165. http://conversionxl.com/dont-use-automatic-image-
sliders-or-carousels-ignore-the-fad/

166. http://conversionxl.com/dont-use-automatic-image-
sliders-or-carousels-ignore-the-fad/

167. Should I use carousel?
http://shouldiuseacarousel.com
!
Exemplo:
!
King Host
http://www.kinghost.com.br/

169. Hamburger or not?

170. http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
Kill The Hamburger Button

171. http://exisweb.net/mobile-menu-abtest
Mobile Menu AB Tested:
Hamburger Not the Best
Choice?

172. http://www.newfangled.com/
user_experience_mobile_menus_and_nav_burgers
Mobile Navigation Menus and
Great User Experience

176. Mas por quê?

177. Porque está na moda, todo mundo
usa, porque não temos tempo e
somos reativos...
!
REWORK: Business book from 37signals

178. E porque somos preguiçosos…

180. Qual é o contexto
do Mobile?

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

182. crescimento = oportunidade

183. http://blog.i2fly.com/wp-content/uploads/2011/04/its-not-about-people-not-device_4.jpg

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

187. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36

188. no Brasil

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

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

195. 2
!
Os smartphones
transformaram o
comportamento
do consumidor

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

199. Mas cuidado...

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

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

206. http://blog.i2fly.com/wp-content/uploads/2011/04/its-not-about-people-not-device_4.jpg

207. Estatísticas Brasil

208. GIF
animado...

215. No mundo

216. Vários GIFs
animados...

217. http://pt.slideshare.net/wearesocialsg/social-digital-mobile-around-the-world-january-2014

222.
mitos = verdades

224. X

225. mitos

226. mitos
X

227. mitos

228. mitos

229. mitos
V

230. mitos do mundo mobile

231. difícil

232. é caro

233. limitador

234. é demorado

235. Não atende as pessoas idosas

237. Muito menos as pessoas com deficiência

238. é irrelevante

239. Será?

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

241. não vão comprar via mobile

242. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18

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

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

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

246. MOBILE TO THE FUTURE http://www.zeldman.com/2012/07/09/mobile-to-the-future-luke-wroblewski/
• People are 2x more likely to
buy on mobile;
• 2.5x more likely to subscribe;
• 3x more likely to be engaged.

248. capacidades/
vantagens
do mobile

249. !
GPS

250. Acelerômetro

251. Giroscópio

252. Bluetooth

253. Bluetooth

254. !
Áudio, vídeo e imagem

255. NFC

256. Sensores multitoque

257. Em qualquer hora e local.

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

259. Integração com dispositivos externos…

260. Novos clientes…

261. https://www.youtube.com/watch?v=4UoE-87I-Hg

262. Boa compatibilidade entre navegadores
Mobile e HTML5

263. Atualizações frequentes...

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

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

266. @lukew

267. ‘Desktop is like “diving”…

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

269. O que
todos quando
mergulham
desejam?

270. @lukew
desktop

271. @lukew
tela grande

272. @lukew
tela grande
energia

273. @lukew
tela grande
energia
rede consistente

274. @lukew
tela grande
energia
rede consistente
teclado

275. @lukew
tela grande
energia
rede consistente
teclado
mouse

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

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

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

279. @lukew
mobile

280. tela pequena
@lukew

281. tela pequena
bateria
@lukew

282. tela pequena
bateria
rede inconsistente
@lukew

283. tela pequena
bateria
rede inconsistente
dedo gordo
@lukew

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

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

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

287. https://twitter.com/lukew/media

288. https://twitter.com/lukew/media

289. Mobile And Accessibility: Why
You Should Care And What You
Can Do About It
http://www.smashingmagazine.com/2014/05/21/mobile-
accessibility-why-care-what-can-you-do/

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

293. perda de 80% do espaço

294. @lukew

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

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

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

298. @lukew

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

300. Less is more...

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

302. mas cuidado…
No ponto.

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

310. Como anda a
qualidade dos
nossos sites nas
versões desktop?

311. Será?

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

326. Independente do
caminho escolhido
deve-se…

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

328. O Mobile First
veio para tirar
os sites Desktop
do CTI

329. SIMPLICIDADE

330. Paradoxo da escolha

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

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

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

335. UX
Alguns problemas

336. UX Designer torna-se especialista na criação de
docs como Wireframes, site maps, diagramas de
fluxo, inventários de conteúdos, taxonomias,
mockups e documentos com especificações, ao
invés de projetarem experiências.

337. Inventário de Conteúdo

338. Taxonomia

339. Personas

340. Storyboard

341. Casos de Uso

342. Caso de uso

343. Benthmarking

344. Fluxos

345.
protótipo

346.
protótipo navegável…

347. Quando combinado com
metodologias de
desenvolvimento, os entregáveis
produzidos pelos designers
podem gerar um grande
desperdício de tempo.

348. LEAN
UX

349. http://www.slideshare.net/uxconsulting/iaxil-lunch-talk-lean-ux

350. http://www.slideshare.net/uxconsulting/iaxil-lunch-talk-lean-ux
Não é uma UX preguiçosa,
mas é sobre minimizar
desperdícios.

351. !
Dev.!
Prod.
Processos
!
Design
Pesquisa
Pessoas
!
!
!
!
!
Startup
Negócios
!
UX
!
Agile
!
Lean

352. LEAN

353. Vem da
Lean Startup (Eric Ries)

354. Só uma bala na agulha…

355. Lean Starput (Eric Ries)

356. Quer uma boa interface?
Teste…

357. First clic test.
(um tipo de teste rápido)

358.
First clic test.
Se o usuário não clicar certo a primeira vez, a chance de
clicar certo depois será muito baixa.
A técnica muito boa e rápida para testar se os seus links/
botões/arquitetura estão funcionando.
Chame o usuário e crie alguns cenários para testar a
homepage, como, por exemplo:
“Sua senha foi clonada e você precisa mudá-la com
urgência... Onde você clicaria para mudar a senha?”
E observe o usuário.

359. ESPN Brasil– abril 2010
X

360. • Nada de (re)design, o
caminho é o co-design

361. Parallel Design
!
Estudo: Improving System Usability
Through Parallel Design By JAKOB NIELSEN
http://www.nngroup.com/articles/parallel-design/
"In a case study o a screen-based telephone interface, measured
usability when going from version 1 to version 2 was improved by
18% when using traditional iterative design and by 70% when using
parallel design. In the case study, parallel design was about 73%
more expensive than iterative design, so it cannot be recommended
for all development projects, but it seems a promising usability
engineering method for speeding up time-to-market”.
Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficac
https://www.cs.cmu.edu/~spdow/files/PrototypingParallel-TOCHI10.pdf

362.
$ # @ %
^&* @ $ *
( ) ^+! ˜
% ˆ & $ # @ $
% ˆ Y )@ Y % ˆ
& *
&*ˆ%$ˆ&(&%
%%$#%#$ %
$#%$ˆ$%ˆ$ ˆ
% ˆ & $ #
@ $ % ˆ
Y )@ Y % ˆ
& *
fkdsjkfl jdskf jsdkl fjsdlk fjsdlk fjsdl
fksjfklsfj klsjf lksdjk fljsdk fjsdklj fklsdj
klfjsdlkjfklsd flksd jklfjksldjflks jdfklj
sdklfj sdkljf lksjd fkljsdlkf jsdkl fjskdlj
flksdj flkjsd kfjslk fjskdl jfklds jfklsj flkjsd
flkjsdkl fjskl fjklsjfklsj flkjsd
klgjkldfjglidjoisufd ikzdjfhdkf dhkkj
hkudz fhku hzkd khf kh kjzhkjfhz
jkdhfkzd jkfhsdiuf howshfjkw hrjkweh fk
kjhd kjhkfdh kshf kjhd kjzhf kzhf kjdhfk
hkz fhkz hfjk

366.
-
—
$%ˆ*W&E&
%*@ˆ@#ˆ*$

367. Google X:
- Gere 8 versões
para resolver
o problema
em 5 minutos

368. horacio@mestr.es
facebook.com/mestresbrasil
(21) 9 9925-5404 - @horaciosoares
Skype: horacio.soares
Horácio Soares
Obrigado!