Workshop: Lean UX para Mobile

Transcript

1. UX PARA MOBILE
2. Sergio Nouvel @shesho
5. 3 Razones para Mobile-first
6. 1 ! TE OBLIGA A LA SIMPLICIDAD.
7. 2 ! TE CONECTA CON TU USUARIO Y SU ENTORNO.
8. 3 ! DE TODAS FORMAS TENDRÁS QUE HACERLO.
9. 4 Ideas para entender mobile
10. Mobile empieza donde termina el dispositivo. 1
13. la diferencia entre mobile y desktop no es el tamaño de pantalla: es el contexto.
14. Ubicación G PS D atos m óviles Aceleróm etro Brújula Triangulación W i-Fi Cám ara
15. esta diferencia incluso existe entre dispositivos mobile. "¡DÓNDE QUEDA! ¡HASTA QUÉ HORA ABREN! RÁPIDO!”
16. OCIO ! INMEDIATEZ
17. DESARROLLAS MOBILE? TESTEA MOVIÉNDOTE.
18. No TODO tiene por qué ser responsivo. 2
19. RESPONSIVO: EL MISMO CONTENIDO, SIEMPRE.
20. INFORMACIÓN ENTRETENCIÓN PRODUCTIVIDAD SOCIAL
21. RESPONSIVO ESTÁ BIEN CUANDO EL USO ES INDEPENDIENTE DEL CONTEXTO.
22. BLOG-DE-PEPITO.COM "QUIERO LEERLO" "QUIERO LEERLO" RESPONSIVO = ✔
23. RESTORAN-JAPONES.COM "MMM, ¿QUÉ TENDRÁN DE RICO?" "¡DÓNDE QUEDA! ¡HASTA QUÉ HORA ABREN! RÁPIDO!” RESPONSIVO = ✖
24. MEMES-GRACIOSOS.COM "JAJAJA LOL" "JIJIJI XD" RESPONSIVO = ✔
25. CAJA-DE-PAGOS.COM "VOY A PAGAR MIS CUENTAS" "NECESITO ENCONTRAR LA SUCURSAL MÁS CERCANA" RESPONSIVO = ✖
26. La gente (todavía) le teme a los gestos. 3
28. ...really?
29. LA FALACIA DE LO "INTUITIVO"
30. ¿Intuitivo?
31. ¿Intuitivo?
32. ✍ NO DIGA "INTUITIVO" DIGA "MANIPULACIÓN DIRECTA" MANIPULACIÓN DIRECTA
33. ✁MANIPULACIÓN DIRECTA
34. NO SEA "INTUITIVO", SEA EXPLÍCITO. (...AL REVÉS DE LA CONQUISTA)
35. ...Y PIENSE EN LOS DEDOS.
36. NO ALCANZO!
37. Mobile no significa menos. 4
38. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ! ! ! Cras est est, condimentum a vulputate ut, imperdiet nec elit. Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentesque ! ! ! nulla in suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus nisl, vulputate vitae pretiu Lorem ipsum dolor sit amet, consectetur a. DESKTOP :) ...MOBILE :( Lorem ipsum dolor Lorem ipsum
39. MOBILE EN REALIDAD ES MÁS
40. Más funcionalidad Más simplicidad Más potencial Más inmediatez
41. Ubicación G PS D atos m óviles Aceleróm etro Brújula Triangulación W i-Fi Cám ara I WIN.
42. No ofrezca “menos” en mobile. Use mobile para priorizar y simplificar TODO su producto.
43. EQUILIBRIO
44. VER MÁS COSAS AL MISMO TIEMPO MEJOR MULTITASKING PODER DE PROCESAMIENTO RIQUEZA DE FEATURES TIPEAR ES MÁS FÁCIL DISPOSITIVOS MÁS CAPACES MOVILIDAD APPS MÁS FÁCILES DE CONSUMIR MOBILE-FIRST GESTOS TOUCH
45. 4 Capas de Lean UX para construir prototipos
46. APORTA VALOR CUMPLE SU FUNCIÓN ES FÁCIL DE USAR ATRAE VALIDATION ONION
47. 4 FASES DE LEAN UX 1. Scope El producto agrega valor, merece existir y tiene claros quiénes son sus usuarios. 2. Contenido El producto es fácil de navegar, tiene una personalidad atractiva y una estrategia de contenido que genera engagement. 3. Interacción El producto es agradable, fácil y novedoso de usar. 4. Look & Feel El producto es atractivo y comunica la marca en una forma innovadora.
48. Hazlo sencillo No temas dibujar Empatiza con el personaje Piensa en sus prioridades y problemas DEFINIENDO PERSONAJES
49. 4 viñetas: • Contexto • Problema • Solución • Desenlace CONSTRUYENDO LA HISTORIA
51. Ahora relata la historia a través de 4 pantallas de tu aplicación. FLUJOS DE USUARIO
52. Detalla y dale forma a cada una de estas 4 pantallas. Mockups
54. Cuéntale la historia y muéstrale los mockups a alguien que no conozca tu producto. ! Toma nota de cómo reacciona, si lo entiende, si le gusta, si lo usaría. Dale espacio para sugerir ideas. Testea
56. GRACIAS. @shesho @continuumhq