View
96
Download
0
Category
Preview:
DESCRIPTION
Buenas prácticas y elementos a tener en cuenta a la hora de trabajar la experiencia de usuario en móviles y tabletas
Citation preview
M Ó V I L , P E R S O N A L E I N T E R M I T E N T E
UX dispositivos móviles
2014
1
gemafuentesanchez@gmail.com
No disponible en la App Store
2014gemafuentesanchez@gmail.com
2
In
2014gemafuentesanchez@gmail.com
3
El smartphone es el centro de la vida digital.
España esta por encima de la media europea
P A R A Q U É
gemafuentesanchez@gmail.com 2014
4
Objetivos
Funciones básicas
2014gemafuentesanchez@gmail.com
5
Nuestro Smartphone es:
2014gemafuentesanchez@gmail.com
6
• Teléfono• Calendario• Reloj / despertador• Agenda• Libreta• Cámara de fotos• Álbum de fotos• Reproductor música (walkman)• GPS• Video juego• Solucionador de dudas• Linterna• Chat
Entretenimiento
2014gemafuentesanchez@gmail.com
7
Entretenimiento
2014gemafuentesanchez@gmail.com
8
• Llenar los tiempos muertos
• Leer, charlar, jugar
Estatus y pertenencia
2014gemafuentesanchez@gmail.com
9
Estatus y pertenencia
2014gemafuentesanchez@gmail.com
10
• Estar siempre disponible en RRSS
• No estar desfasado
Ayuda a la compra
2014gemafuentesanchez@gmail.com
11
Ayuda a la compra
2014gemafuentesanchez@gmail.com
12
• Encontrar donde comprar
• Comprar precios
• Conocer características
• Compartir
Pago desde un APP
2014gemafuentesanchez@gmail.com
13
Pago con el móvil
2014gemafuentesanchez@gmail.com
14
Móvil como TPV
2014gemafuentesanchez@gmail.com
15
Realidad aumentada
2014gemafuentesanchez@gmail.com
16
Móvil como llave
2014gemafuentesanchez@gmail.com
17
Q U I E N Y C O M O
gemafuentesanchez@gmail.com 2014
18
Usuarios
Intuitivo
2014gemafuentesanchez@gmail.com
19
Intuitivo
2014gemafuentesanchez@gmail.com
20
• Interacción con las manos es más natural que con el ratón
• Crecimiento mucho mas rápido y popular
• Más atractivo para personas poco expertas en tecnología
Nuevos inputs
2014gemafuentesanchez@gmail.com
21
Nuevos inputs
2014gemafuentesanchez@gmail.com
22
• Sin intermediarios (ratón)
• Más naturales
• Implicando más elementos del cuerpo
• Inconscientes
• Tridimensionales
• Voz
Inmediatez
2014gemafuentesanchez@gmail.com
23
Inmediatez
2014gemafuentesanchez@gmail.com
24
• Siempre encima
• Siempre localizado
• Comunicación instantánea
• Información instantánea
Conciso y frecuente
2014gemafuentesanchez@gmail.com
25
Conciso y frecuente
2014gemafuentesanchez@gmail.com
26
• Entre 1 y 10 min por sesión
• Muchas veces al día
• Navegación más dirigida
Local
2014gemafuentesanchez@gmail.com
27
Local
2014gemafuentesanchez@gmail.com
28
• GPS
• Encontrar un lugar
• Acompaña al usuario
D O N D E Y C U A N D O
gemafuentesanchez@gmail.com 2014
29
Contexto
Donde
2014gemafuentesanchez@gmail.com
30
Movimiento
2014gemafuentesanchez@gmail.com
31
Relax
2014gemafuentesanchez@gmail.com
32
Intimidad
2014gemafuentesanchez@gmail.com
33
Atención dividida
2014gemafuentesanchez@gmail.com
34
Donde y cuando
2014gemafuentesanchez@gmail.com
35
• Contextos polarizados
• Atención dividida o interrumpida
• Interacción física limitada
W E B M O V I L O A P P
gemafuentesanchez@gmail.com 2014
36
Tecnología
Sitios web móviles v.s Aplicaciones nativas
2014gemafuentesanchez@gmail.com
37
Sitios web móviles v.s Aplicaciones nativas
2014gemafuentesanchez@gmail.com
38
Web móvil
2014gemafuentesanchez@gmail.com
39
• Mismo desarrollo para todos los sistemas operativos: .
• Inmediato (no es necesario descargar ni actualizar)
• Sencillo, rápido y barato desarrollar
• No acceso a componente nativos (cámara)
• Problemas compatibilidad navegadores
• No funcionan offline
App nativa
2014gemafuentesanchez@gmail.com
40
• Acceso a componentes nativos
• Mejor rendimiento
• Modo offline
• Mercado
• Costoso de desarrollar
• Actualizaciones
• Distintas versiones para distintos sistemas operativos
Híbridas (Mashup)
2014gemafuentesanchez@gmail.com
41
Híbridas
2014gemafuentesanchez@gmail.com
42
• Utilizan un sistema u otro en función del contenido/funcionalidades a mostrar
D I S P O S I T I V O S P E Q U E Ñ O S
E L E M E N T O S G R A N D E S
gemafuentesanchez@gmail.com 2014
43
Diseño
Escribir es difícil
2014gemafuentesanchez@gmail.com
44
Elementos grandes
2014gemafuentesanchez@gmail.com
45
• Botones grandes
• Letra grande
• Espacio grandes para hacer scroll
• Mejor elegir que escribir
Posiciones de las manos
2014gemafuentesanchez@gmail.com
46
Donde tocar
2014gemafuentesanchez@gmail.com
47
Posiciones de las manos
2014gemafuentesanchez@gmail.com
48
Donde tocar
2014gemafuentesanchez@gmail.com
49
Responsive
2014gemafuentesanchez@gmail.com
50
Responsive
2014gemafuentesanchez@gmail.com
51
• Mismo contenido adaptado a distintos dispositivos
• Simplificar mantenimiento
Mobile First
2014gemafuentesanchez@gmail.com
52
Mobile First
2014gemafuentesanchez@gmail.com
53
• Dispositivo más usado
• Reducir tiempos de carga
• Ayuda a poner el foco en lo importante
gemafuentesanchez@gmail.com 2014
54
Herramientas
Software
2014gemafuentesanchez@gmail.com
55
• Aplicaciones híbridashttp://phonegap.com/https://trigger.io/
• Emuladorhttps://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc
• Accesibilidad para móvileshttp://www.w3.org/Mobile/
• Responsivehttp://niravigad.com/responsive_man/http://quirktools.com/screenfly/http://www.responsinator.com/
gemafuentesanchez@gmail.com 2014
56
Bibliografía
L I B R O S
W W W
Bibliografia
2014gemafuentesanchez@gmail.com
57
• Mobile First Luke Wroblewski
• http://www.slideshare.net/shoobe01/40min-how-peopleholdtouchconveys-30874671
• http://www.slideshare.net/mobile/Fate/dia-de-la-usabillidad-2013-clnica-de-ux-para-apps
• http://www.ideup.com/blog/interaccion-en-dispositivos-moviles-i
• http://www.uxabilidad.com/inspiracion/sitios-web-moviles-v-s-aplicaciones-nativas.html
• http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/es//events/thinkmobile2011/files/preso-laura.pdf
• http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/es//events/thinkmobile2011/files/alberto-knapp.pdf
• http://mobiforge.com/files/dotMobi%20Mobile%20Web%20Developers%20Guide.pdf
• http://www.slideshare.net/slashmobility/sesion-1-slash-mobility-mobile-apps-testing
• http://www.acens.com/blog/videografia-sie13.html
• http://www.uxed.org/2014/02/interaccion-en-dispositivos-moviles-mas-alla-de-pulsar-botones/
Recommended