Workshop: Lean UX para Mobile

Workshop: Lean UX para Mobile

6e47fc0033db69522a6fc5ca297606b3?s=128

Sergio Nouvel

May 31, 2014
Tweet

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