Workshop: Lean UX para Mobile

Transcript

1. UX PARA MOBILE

2. Sergio Nouvel @shesho

3. None
4. None

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

11. None
12. None

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

27. None

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

50. 50

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

53. 53

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

55. 55

56. GRACIAS. @shesho @continuumhq