UX EN 30
MINUTOS
laBITconf Hackathon
2 Diciembre 2016
Hola!
• 15+ años Product Manager
de productos digitales
(Argentina, Australia, USA)
• Directora de Estrategia de
Producto en Kambrica
SOMOS UNA CONSULTORA
DE UX, DISEÑO E
INNOVACIÓN
Algunos de nuestros Clientes
Asociaciones Profesionales
Retail & Consumer
Telecomunicaciones
Ingeniería y Tecnología
Banca y finanzas
Incubadoras y Aceleradoras
E-commerce
Educación
Gobierno y servicios públicos
Medios
QUÉ ES UX?
QUÉ ES UX?
Es el proceso de
diseñar
productos útiles
y fáciles de usar,
que crean valor
para el usuario
y ventajas
competitivas
para la empresa
Diseño centrado en el usuario
Proceso de diseño que consiste en:
• Conocer a fondo a los usuarios finales
reales.
• Diseñar un producto que resuelva sus
necesidades y se ajuste a sus capacidades,
expectativas y motivaciones.
• Poner a prueba lo diseñado.
POR QUÉ UX ES
IMPORTANTE?
Es un factor de éxito
Impacta en el uso y adopción
del producto
Crea
valor
Genera ventajas
competitivas
Conversion, ventas,
loyalty
Fuente de diferenciación
e innovación
Para el usuario y la
empresa
La usabilidad es un factor de éxito
Hello Ideas
Por eso…
… esta presentación no tiene tips de
diseño visual, sino tips de diseño de
producto que los va a ayudar a
diseñar un producto usable y por lo
tanto, con más chances de éxito.
TRES ACLARACIONES
IMPORTANTES
UX Y USABILIDAD
UX: orientado a
experiencias
Lo que el usuario
siente al
interactuar con
un producto
USABILIDAD:
orientado a
tareas
La facilidad para
operar un
producto*
* Es una medida
objetiva de efectividad,
eficiencia y satisfacción
La usabilidad no es una
opinión.
Es una medida objetiva de la
eficiencia, eficacia y
satisfacción que genera un
producto para sus usuarios
“La medida en que un producto
puede ser utilizado por un grupo
específico de usuarios para
alcanzar ciertos objetivos de
forma eficiente, efectiva y
satisfactoria, en un contexto
determinado de uso”
ISO 9241-11 [6]
Ergonomics of Human System Interaction
UX, UI, IxD
Diseño de Experiencias (UX)
Define la forma en que queremos que se sienta el usuario
en contacto con el producto, sistema o servicio.
Diseño de Interacción (IxD)
Define el modelo de operación.
Diseño de Interfaces (UI)
Define los elementos concretos empleados en la
interacción. También las decisiones estéticas y de layout.
NIVEL ESTRATÉGICO
NIVEL TÉCNICO
Hello Ideas
UX
IxD
UI
UI
IxD
UX
POR QUÉ LA MAYORÍA DE LOS
PRODUCTOS TIENEN BAJO
NIVEL DE USABILIDAD?
En general los usuarios no forman
parte del proceso de diseño del
producto
Idea Desarrollo Validación
Criterios de diseño usuales
Costo/Esfuerzo
Empatía con el usuarioSin intención
Autorreferencial
Basado en:
• tecnología
• requerimientos
• competencia
Basado
en tareas
Basado en
la experiencia
Centrado
en el usuario
Start-ups Empresas Innovación
COMO HACEMOS UN
PRODUCTO USABLE?
Hablando con usuarios para…
1. Entender modelos mentales
2. Entender modelo natural de
operación
3. Validar nuestras ideas
1. Modelos mentales
2. Modelo natural de
operación
3. Validar nuestras ideas
Modelos mentales
Es la representación mental que tiene el
usuario sobre el producto: para qué sirve,
cómo se usa.
Si el producto no respeta el modelo mental
de los usuarios, el sistema va a ser difícil de
usar, afectando el uso, adopción, compra y
satisfacción.
Cómo descubrimos los
modelos mentales?
Hablando con los usuarios para entender…
• Qué expectativas tiene?
• Qué valor espera recibir?
• Cómo resuelve hoy ese problema (que
nuestro producto resuelve)?
• Qué es importante, qué es secundario?
Si quisiéramos comprar
entradas para el cine on-line…
1. Modelos mentales
2. Modelo natural de
operación
3. Validar nuestras ideas
Modelos natural de operación
Es la secuencia natural de pasos para
completar una tarea.
Si el producto no respeta el modelo natural
de operación el usuario va a tener dificultad
para completar la tarea, afectando el uso,
adopción y satisfacción con el sistema.
Modelos natural de operación
Hablar con los usuarios para entender…
• Cuál es el mapa conceptual del proceso?
• Cuál es la secuencia natural de pasos?
• Cuál es la lógica del usuario?
Si quisiéramos hacer una
transferencia bancaria…
Modelo natural de operación
Transferir
$100
A Joaquín
De la
Cuenta
Corriente
Modelo natural vs modelo de datos
De la Cuenta
Corriente
A Joaquín
Transferir
$100
1. Modelos mentales
2. Modelo natural de
operación
3. Validar nuestras ideas
Prototipos en papel
Foto: http://www.johnhrogers.com/project/ridebuddy/
• Tiene las características
básicas del producto
• Sirven para comunicar la
idea general y testear el
concepto
• Permiten descubrir
problemas de operación
de alto nivel
• Ponen el foco en el uso vs.
el diseño
• Permiten hacer cambios
rápidamente
Prototipos en papel
Prototipos en papel
Prototipo del producto
Foto: http://www.johnhrogers.com/project/ridebuddy/https://www.nngroup.com/articles/mozilla-paper-prototype/
Prototipo del producto
Foto: http://www.johnhrogers.com/project/ridebuddy/https://www.nngroup.com/articles/mozilla-paper-prototype/
https://www.nngroup.com/articles/mozilla-paper-prototype/
Cuántos usuarios son
suficientes para testear?
Con 5 usuarios se releva el 80% de
los problemas de usabilidad
http://www.kambrica.com/blog/cuantas-personas-se-necesitan-para-validar-una-idea/
Y ahora?
1. Diseñar prototipos en papel
• Home
• 1 o 2 tareas principales del producto
• Ej. Buscador:
– pantalla de búsqueda
– Pantalla de resultados
• Ej. Compra on-line:
– Home o catálogo
– Página de producto
• Ej. Compra on-line:
– Página de producto
– Carrito
– Pago
– Confirmación
2. Validar los prototipos
Consigan 3 - 5 usuarios para validar:
• Modelos mentales:
– “mirando la home, para qué pensás que sirve el
producto?”
– Cómo resolvés hoy este problema?
• Modelo de operación:
– pedir que realice la/s tarea/s críticas del producto
(ej. compra, búsqueda, pago)
– Ver dónde se traban, qué preguntas hacen
• Ajustar el diseño en función de lo aprendido
MUCHAS SUERTE!
Sol Mesz
Sol@kambrica.com

UX en 30 Minutos

  • 1.
    UX EN 30 MINUTOS laBITconfHackathon 2 Diciembre 2016
  • 2.
    Hola! • 15+ añosProduct Manager de productos digitales (Argentina, Australia, USA) • Directora de Estrategia de Producto en Kambrica
  • 3.
    SOMOS UNA CONSULTORA DEUX, DISEÑO E INNOVACIÓN
  • 4.
    Algunos de nuestrosClientes Asociaciones Profesionales Retail & Consumer Telecomunicaciones Ingeniería y Tecnología Banca y finanzas Incubadoras y Aceleradoras E-commerce Educación Gobierno y servicios públicos Medios
  • 5.
  • 6.
    QUÉ ES UX? Esel proceso de diseñar productos útiles y fáciles de usar, que crean valor para el usuario y ventajas competitivas para la empresa
  • 7.
    Diseño centrado enel usuario Proceso de diseño que consiste en: • Conocer a fondo a los usuarios finales reales. • Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones. • Poner a prueba lo diseñado.
  • 8.
    POR QUÉ UXES IMPORTANTE?
  • 9.
    Es un factorde éxito Impacta en el uso y adopción del producto Crea valor Genera ventajas competitivas Conversion, ventas, loyalty Fuente de diferenciación e innovación Para el usuario y la empresa
  • 10.
    La usabilidad esun factor de éxito Hello Ideas
  • 11.
    Por eso… … estapresentación no tiene tips de diseño visual, sino tips de diseño de producto que los va a ayudar a diseñar un producto usable y por lo tanto, con más chances de éxito.
  • 12.
  • 13.
    UX Y USABILIDAD UX:orientado a experiencias Lo que el usuario siente al interactuar con un producto USABILIDAD: orientado a tareas La facilidad para operar un producto* * Es una medida objetiva de efectividad, eficiencia y satisfacción
  • 14.
    La usabilidad noes una opinión. Es una medida objetiva de la eficiencia, eficacia y satisfacción que genera un producto para sus usuarios
  • 15.
    “La medida enque un producto puede ser utilizado por un grupo específico de usuarios para alcanzar ciertos objetivos de forma eficiente, efectiva y satisfactoria, en un contexto determinado de uso” ISO 9241-11 [6] Ergonomics of Human System Interaction
  • 16.
    UX, UI, IxD Diseñode Experiencias (UX) Define la forma en que queremos que se sienta el usuario en contacto con el producto, sistema o servicio. Diseño de Interacción (IxD) Define el modelo de operación. Diseño de Interfaces (UI) Define los elementos concretos empleados en la interacción. También las decisiones estéticas y de layout. NIVEL ESTRATÉGICO NIVEL TÉCNICO
  • 17.
  • 18.
    POR QUÉ LAMAYORÍA DE LOS PRODUCTOS TIENEN BAJO NIVEL DE USABILIDAD?
  • 19.
    En general losusuarios no forman parte del proceso de diseño del producto Idea Desarrollo Validación
  • 20.
    Criterios de diseñousuales Costo/Esfuerzo Empatía con el usuarioSin intención Autorreferencial Basado en: • tecnología • requerimientos • competencia Basado en tareas Basado en la experiencia Centrado en el usuario Start-ups Empresas Innovación
  • 21.
  • 22.
    Hablando con usuariospara… 1. Entender modelos mentales 2. Entender modelo natural de operación 3. Validar nuestras ideas
  • 23.
    1. Modelos mentales 2.Modelo natural de operación 3. Validar nuestras ideas
  • 24.
    Modelos mentales Es larepresentación mental que tiene el usuario sobre el producto: para qué sirve, cómo se usa. Si el producto no respeta el modelo mental de los usuarios, el sistema va a ser difícil de usar, afectando el uso, adopción, compra y satisfacción.
  • 25.
    Cómo descubrimos los modelosmentales? Hablando con los usuarios para entender… • Qué expectativas tiene? • Qué valor espera recibir? • Cómo resuelve hoy ese problema (que nuestro producto resuelve)? • Qué es importante, qué es secundario?
  • 26.
    Si quisiéramos comprar entradaspara el cine on-line…
  • 28.
    1. Modelos mentales 2.Modelo natural de operación 3. Validar nuestras ideas
  • 29.
    Modelos natural deoperación Es la secuencia natural de pasos para completar una tarea. Si el producto no respeta el modelo natural de operación el usuario va a tener dificultad para completar la tarea, afectando el uso, adopción y satisfacción con el sistema.
  • 30.
    Modelos natural deoperación Hablar con los usuarios para entender… • Cuál es el mapa conceptual del proceso? • Cuál es la secuencia natural de pasos? • Cuál es la lógica del usuario?
  • 31.
    Si quisiéramos haceruna transferencia bancaria…
  • 32.
    Modelo natural deoperación Transferir $100 A Joaquín De la Cuenta Corriente
  • 33.
    Modelo natural vsmodelo de datos De la Cuenta Corriente A Joaquín Transferir $100
  • 34.
    1. Modelos mentales 2.Modelo natural de operación 3. Validar nuestras ideas
  • 35.
    Prototipos en papel Foto:http://www.johnhrogers.com/project/ridebuddy/ • Tiene las características básicas del producto • Sirven para comunicar la idea general y testear el concepto • Permiten descubrir problemas de operación de alto nivel • Ponen el foco en el uso vs. el diseño • Permiten hacer cambios rápidamente
  • 36.
  • 37.
  • 38.
    Prototipo del producto Foto:http://www.johnhrogers.com/project/ridebuddy/https://www.nngroup.com/articles/mozilla-paper-prototype/
  • 39.
    Prototipo del producto Foto:http://www.johnhrogers.com/project/ridebuddy/https://www.nngroup.com/articles/mozilla-paper-prototype/
  • 40.
  • 41.
  • 42.
    Con 5 usuariosse releva el 80% de los problemas de usabilidad http://www.kambrica.com/blog/cuantas-personas-se-necesitan-para-validar-una-idea/
  • 43.
  • 44.
    1. Diseñar prototiposen papel • Home • 1 o 2 tareas principales del producto • Ej. Buscador: – pantalla de búsqueda – Pantalla de resultados • Ej. Compra on-line: – Home o catálogo – Página de producto • Ej. Compra on-line: – Página de producto – Carrito – Pago – Confirmación
  • 45.
    2. Validar losprototipos Consigan 3 - 5 usuarios para validar: • Modelos mentales: – “mirando la home, para qué pensás que sirve el producto?” – Cómo resolvés hoy este problema? • Modelo de operación: – pedir que realice la/s tarea/s críticas del producto (ej. compra, búsqueda, pago) – Ver dónde se traban, qué preguntas hacen • Ajustar el diseño en función de lo aprendido
  • 46.

Notas del editor

  • #11 USO: si el producto no se puede usar nadie lo va a comprar COMODITIZACION: diferenciacion
  • #12 USO: si el producto no se puede usar nadie lo va a comprar COMODITIZACION: diferenciacion
  • #13 NO quiere decir que el diseño visual no sea importante, simplemente es secundario frente a la usabilidad
  • #15 Siente: frustracion, placer. Piensen en la pagina de AFIP.
  • #17 La usabilidad no es una opinión ni una sensación. Es un atributo medible de un producto definido según normas ISO.
  • #18 UX está en un continuo de diferentes disciplinas, desde el diseño gráfico (UI) hasta el diseño de productos
  • #19 UX está en un continuo de diferentes disciplinas, desde el diseño gráfico (UI) hasta el diseño de productos
  • #20 UI: la foto de fondo, que la barra esté flotando, la forma de mostrar la fecha IxD: la forma de seleccionar la ciudad: desplegable vs. Texto predictivo; “more options” para mantener la pantalla limpia, usar desplegable para online checkin UX: informar de forma visible cambios en la política de equipaje
  • #23 Sin intención: una aplicación que hicieron en el trabajo para simplificar cosas Basado en tareas: bancos
  • #27 El modelo mental se forma a través de experiencias previas, factores culturales
  • #28 Si quisieran comprar entradas de cine… qué eligen primero?
  • #32 Modelo de datos vs modelo mental Esto es muy típico de los perfiles técnicos. Suelen seguir una lógica del sistema que es diferente de la lógica de uso de los usuarios.
  • #35 Si quisieran comprar entradas de cine… qué eligen primero?
  • #40 En general, el primer prototipo lo hacemos en papel para validar las cuestiones mas gruesas
  • #43 Proyecto: rediseño landing help de Mozilla para que facilitar el acceso a la información más importante Objetivos: reducir preguntas de soporte Testeo: se quería testear uso por tarea o por tipo de dispositivo, accesos directos
  • #44 Proyecto: rediseño landing help de Mozilla Objetivos: reducir preguntas de soporte Testeo: se quería testear uso por tarea o por tipo de dispositivo, accesos directos
  • #45 Proyecto: rediseño landing help de Mozilla Objetivos: reducir preguntas de soporte Testeo: se quería testear uso por tarea o por tipo de dispositivo, accesos directos