O documento discute a importância da experiência do usuário (UX) em produtos digitais, destacando que uma experiência ruim resulta em resultados insatisfatórios. Apresenta exemplos de testes de usabilidade e a necessidade de entender o contexto e as necessidades dos usuários ao desenvolver soluções. Além disso, enfatiza a importância de testar com usuários reais para melhorar a eficácia do design e das interações.

1. UX MOBILE
TESTANDO COM USUÁRIOS

2. LEONARDO CAETANO HORÁCIO SOARES
Mobile Product OwnerMobile UX Designer
Hotel UrbanoHotel Urbano
@horaciosoares@leocaetano

3. !
UX

4. User eXperience

5. ExU

6. Experiências
!

7. São uma nova oferta econômica.

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

9. Experiências que surpreendem

10. Como foi essa experiência?

11. E essa? O Simples é poderoso...

13. X

14. Vídeo disponível em: https://youtu.be/eZRWesh1CQE

15. Mas afinal, o que é eXperiência
do Usuário (UX) ?

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

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

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

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

26. X

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

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

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

36. Mas como os usuários
são vistos?

38. Resumo da ópera

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

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

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

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

47. Selfie

48. Selfie

51. Mas o que funciona para uma
empresa, pode não funcionar
para outra.

56. Por exemplo:

58.
CAPTCHA

59. Ou ainda as mais recentes
modinhas como paralax,

61. http://erikrunyon.com/2013/01/carousel-stats/
Carousel Interaction Stats - ND.edu
(3 meses - 2012/13)

62. http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites/
An Exploration Of Carousel Usage On
Mobile E-Commerce Websites (2014)
(several mid-sized to large e-commerce websites over a period of 11 months )
!

63. Hamburger or not?

64. Hamburger or not? @lukew
https://www.youtube.com/watch?v=Nl3OYHo2_b8

65. 22.4%

66. +12.9%

67. +5.7%

68. -22,7%

69. Affordance
http://www.peachpit.com/articles/article.aspx?p=2209309
Steve Krug on Things that Make Us Think

70. The dangers of FLAT design - @Lukew
https://twitter.com/lukew/status/505461084182953984/photo/1

71. The dangers of FLAT design - @Lukew
https://twitter.com/lukew/status/505461084182953984/photo/1

72. The dangers of FLAT design - @Lukew
https://twitter.com/lukew/status/505461084182953984/photo/1

73. http://blog.booking.com/hamburger-menu.html
Mas cuidado…
O teste A/B do Booking.com Hamburger x Menu
não apresentou diferenças significativas.

74. made with keynote by andrew haskin
Uma BREVE ANÁLISE de
SITES de E-COMMERCE

75. made with keynote by andrew haskin
HAMBURGUER MOBILE

77. Sem Hamburguer

78. Hamburguer

79. Hamburguer a direita

80. made with keynote by andrew haskin
VERSÃO MOBILE

82. Em março de 2015, das 49 lojas
avaliadas, 14 lojas não possuíam
versão mobile

83. Em maio/junho, apenas 6…

84. made with keynote by andrew haskin
HEADER FIXO

86. made with keynote by andrew haskin
HEADER FIXO

87. made with keynote by andrew haskin
HEADER FIXO MOBILE

89. Header Fixo Mobile

90. made with keynote by andrew haskin
CARROSSEL

92. Em março, sem CARROSSEL automático

93. made with keynote by andrew haskin
CARROSSEL MOBILE

96. simplicidade

97. Paradoxo da escolha

99. made with keynote by andrew haskin
PERFORMANCE

100. milésimo de segundo

101. Acelera Ayrton…

102. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36
dos usuários Web dizem que esperam
que um site mobile carregue em três
segundos ou menos.60%

103. made with keynote by andrew haskin
PERFORMANCE
PageSpeed
35/100

104. made with keynote by andrew haskin
PERFORMANCE
PageSpeed
36/100

105. made with keynote by andrew haskin
PERFORMANCE
PageSpeed
44/100

106. made with keynote by andrew haskin
PERFORMANCE Mobile
PageSpeed
42/100

107. made with keynote by andrew haskin
PERFORMANCE Mobile
PageSpeed
45/100

108. made with keynote by andrew haskin
PERFORMANCE
PageSpeed
85/100

109. made with keynote by andrew haskin
PERFORMANCE
PageSpeed
81/100

110. made with keynote by andrew haskin
PERFORMANCE
PageSpeed
74/100

111. made with keynote by andrew haskin
PERFORMANCE Mobile
PageSpeed
74/100

112. Mas por quê?

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

114. Uma regra de ouro
para os usuários

116. DESAFIO 1:
Você está no meio
de um site e quer ir
para a página inicial,
o que você faz?

117. DESAFIO 2:
O botão de confirmar fica
na esquerda ou é o botão
de cancelar que é
posicionado à esquerda?

118. Santander 2014

119. Homebanking CAIXA 2014

120. Pagamento pela CIELO 2014

122. EntrarCancelarx

123. Uma regra de ouro
para quem cria

125. CONTEXTO MOBILE

126. made with keynote by andrew haskin
CONTEXTO MOBILE
TELA PEQUENA
LUZ DIRETA
LIMITE DE BANDA
MULTITAREFA
SOBRE PRESSÃO
(restrição de tempo)
CONFUSO e BARULHENTO

127. made with keynote by andrew haskin
More Than 80% Of Facebook's
Daily Users Are Mobile
http://www.businessinsider.com/facebook-daily-active-users-q4-2014-2015-1

128. made with keynote by andrew haskin
http://www.webvenda.com/wp-content/uploads/2015/02/31_webshoppers.pdf

129. made with keynote by andrew haskin
http://www.emarketer.com/Article/Brazil-Mobile-Continues-Expand-Share-of-Ecommerce-Transactions/1012487/6

130. made with keynote by andrew haskin
http://www.webvenda.com/wp-content/uploads/2015/02/31_webshoppers.pdf

131. made with keynote by andrew haskin

132. CONTEXTO BRASIL

133. 23,9% da população brasileira possui pelo
menos uma das deficiências investigadas
ACESSIBILIDADE

134. Idosos: 19 milhões (10%) - IBGE 2010

135. Analfabeto funcional
!
Um em cada cinco
brasileiros (38 milhões -
20,4%) é analfabeto
funcional,
Pnad 2009 - IBGE.

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

137. Quer uma boa interface?
Teste com pessoas…

138. TESTES

139. POR QUE
TESTAR COM PESSOAS?

140. OBJETIVO

141. https://www.youtube.com/watch?v=uOHDkIxyu2A&list=PL45D56B9F8C601073&index=5

142. PERSONAS

144. FOCO NO USUÁRIO
E NA TAREFA

145. MENOS CONVERSÃO,
MAIS MULTICANAL

146. POR QUE
TESTAR COM PESSOAS?

147. TESTE DE
USABILIDADE
Processo de teste de UX iterativo
eMarketing 5th edition,
Rob Stokes and The Minds of Quirk

148. IDENTIFICAR
MELHORIAS

149. CRIAR
NOVA VERSÃO

150. TESTAR COM
USUÁRIO

151. ANALISAR
RESULTADOS

152. TESTE DE USABILIDADE
TRADICIONAL
Solicita-se que os usuários realizem
tarefas no produto pensando em voz alta.

153. EXEMPLO DE
CENÁRIO
Imagine que sua bela e inocente sobrinha está prestes a
se casar. Porém, a família descobre que o noivo é
membro do submundo. Pior - ele é um matador de
aluguel! E mais - sua vida inteira é uma fraude e ele já
é casado! Você é o único que possui essas evidências e
precisa comprar uma passagem para Bangalore para ela
e também para a esposa do noivo. O tempo é essencial!
Frederick van Amstel
http://usabilidoido.com.br

154. EXEMPLO DE
TAREFA
Compre duas passagens aéreas no próximo voo para a
cidade de Bangalore.
Frederick van Amstel
http://usabilidoido.com.br

155. REALIZANDO
TESTES
PASSO 0
Planejamento

156. QUAL O
PROPÓSITO?

157. O QUE
TESTAR?

158. QUEM
VAI PARTICIPAR?

159. COMO
SERÁ O TESTE?

160. ONDE
SERÁ O TESTE?

161. TESTE EM
LABORATÓRIO?

162. TESTE DE
CAMPO?

163. TESTE
REMOTO?

164. PARTICIPANTES
CHAVE
Facilitador
Ajudante
Participante(s)
Observador(es)

165. QUANDO
TESTAR
O mais cedo
possível!

166. PROTOTIPAÇÃO
EM PAPEL

167. É UMA VARIAÇÃO
DO TESTE DE USABILIDADE
Permite avaliar soluções parciais.

168. POSSIBILITA REFLEXÕES
MAIS CONCEITUAIS
Usuários ficam mais à
vontade para criticar,
comentar e sugerir.

169. US$ 1
Prototype

170. Pesquisa
de Guerrilha

171. FERRAMENTAS

172. PROTOTIPAÇÃO
DIGITAL

177. Product Owner Mobile
horacio.soares@hotelurbano.com.br
(21) 9 9925-5404 - @horaciosoares
Skype: horacio.soares
slideshare.net/horacio.soares
Horácio Soares

178. Product Owner Mobile
horacio.soares@hotelurbano.com.br
(21) 9 9925-5404 - @horaciosoares
Skype: horacio.soares
slideshare.net/horacio.soares
Horácio Soares
Mobile UX Designer
leonardo.caetano@hotelurbano.com.br
(21) 98153-2023 - @leocaetano
Skype: leocaetanorj
Leonardo Caetano