Post on 18-Jun-2015
UX no es lo mismo que UINARANYA*LABS, MAYO 2014
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
- Estratega UX !- Founder en Karmashop !- Ex Oracle (UX Fusion apps) !- Egresada de UDEM (LDG, EME) !- He trabajado para clientes como Infonavit, Alen, Frisa, Grainger, Gobierno N.L, Tec de Monterrey... !- Amo el té y leer
QUIEN SOY
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
TEMA 1. Que es User Experience (UX)
TEMA 2. Los 10 errores comunes en UX
TEMA3. Los 10 errores comunes de UI en móviles
Preguntas
TEMARIO
Que es User Experience (UX)
TEMA 1.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Si pudieran elegir dónde sentarse
ahora...¿Cuál de las dos elegirían?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
vs.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Cierto?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
FUNCIONALIDAD + ESTÉTICA
UX es la filosofía de creación de un
producto o servicio.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
No depende solo de factores de diseño,
sino en las emociones y sentimientos que crea una marca...
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
en lo más importante:
sus USUARIOS.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
EJEMPLO
YOUTUBE: FAST LANE - THE SLIDE
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
EJEMPLO
YOUTUBE: MAQUINA DE LA AMISTAD COCA-COLA
¿Qué emociones les causaron las marcas?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Entonces, ¿Qué es experiencia?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Usos inesperados
EXPERIENCIA
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Detalles
Subjetiva
Memorias
AprendizajesSabiduría
Sorpresas
UX
EXPERIENCIA
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
DESEABLE
USABLE
ÚTIL
NNGROUP 2008
La usabilidad es UN atributo de la
experiencia de usuario
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
y se refiere a la facilidad de uso… pero
OJO no es = a UX
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Es la percepción de que tan consistente, organizado, eficiente, productivo, fácil de usar e intuitivo es el proceso de completar una tarea en particular dentro de un sistema.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
USABILIDAD
Pero frecuentemente nos quedamos aquí…
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
UX
EXPERIENCIA
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
DESEABLE
USABLE
ÚTIL
NNGROUP 2008
UX no es una etapa más al desarrollar un
producto…
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Es entender: LA SITUACIÓN
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Es entender: EL CONTEXTO
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Es entender: LOS HÁBITOS DE USO
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
…de un determinado grupo de personas
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Centrado en el diseñador
Centrado en el USUARIO
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
UI: USER INTERFACE CON LO QUE INTERACTÚA
UX: USER EXPERIENCE, QUE SIENTE MIENTRAS INTERACTÚA
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
TOMADO DE WWW.UXISNOTUI.COM
• Investigación etnográfica • Entrevistas 1-1 • Creación de test con usuarios • Recolección y organización de estadísticas • Creación de personas • Diseño de producto • Escritura de funcionalidades • Artes gráficas • Diseño de interacción • Arquitectura de información • Usabilidad • Prototipado • Diseño de interfaz • Diseño visual • Creación de taxonomía • Creación de terminología • Copywriting • Presentar y hablar • Trabajo en conjunto con programadores • Coordinación de brainstorming • Evangelización de cultura de diseño
Lo que es UX
• Investigación etnográfica • Entrevistas 1-1 • Creación de test con usuarios • Recolección y organización de estadísticas • Creación de personas • Diseño de producto • Escritura de funcionalidades • Artes gráficas • Diseño de interacción • Arquitectura de información • Usabilidad • Prototipado • Diseño de interfaz • Diseño visual • Creación de taxonomía • Creación de terminología • Copywriting • Presentar y hablar • Trabajo en conjunto con programadores • Coordinación de brainstorming • Evangelización de cultura de diseño
Lo que la gente cree
Los 10 errores comunes en UX
TEMA 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
No establecer objetivos del negocio
ERROR 1.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Qué quiero lograr?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Aumentar las ventas un 10%? ¿Mayor alcance?
¿Canal de soporte?
Establecer objetivos del negocio
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 1.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Ofrecer personalización
NIKE:
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
12
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
Desconocer a mis usuarios
ERROR 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Quiénes son mis usuarios?
Crear “PERSONAS” con sus hábitos de uso
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Servicio de Taxi a domicilio
UBER:
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Cliente / Conductor
UBER:
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
12
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
3 4 ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
12
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
No establecer escenarios de uso
ERROR 3.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Dónde y cómo se usará mi producto?
Crear escenarios de uso
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 3.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Se mueve en una grúa
WMS:
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
3 4 ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
12
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
Dar excesiva funcionalidad
ERROR 4.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Cuáles son los usos comunes?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Puedo dar funcionalidad avanzada, pero darle
prioridad a la más usada
Establecer los usos comunes
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 4.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Identificar música
SHAZAM:
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
3 4 ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
12
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
No dar importancia a los contenidos
ERROR 5.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Qué voy a comunicar?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Y no sólo es texto, sino: imágenes, audio,
video, etc…
Definir elementos de comunicación
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 5.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
VirtualAudioFotos Texto
Call to Action
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
3 4 ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
12
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
No hacer arquitectura de información
ERROR 6.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Cómo se va a navegar?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Por producto Por solución
Por categoría, etc…
Hacer wireframes con flujos de navegación
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 6.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
5 6 ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información
1
3 4
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
Pedir cosas innecesarias
ERROR 7.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Qué necesito realmente?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Lo puedo pedir más tarde? ¿Edad?
¿Género? ¿Compañía?
Establecer los campos indispensables
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 7.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Registro MUY sencillo
MAILCHIMP:
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
5 6 ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información
1
3 4
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
Hacer zoom out de mi sitio web para móvil
ERROR 8.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
LEGIBILIDAD
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Los objetivos desde móvil son los mismos
que desde web?
Establecer objetivos para móvil
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 8.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Scan & GoWALMART:http://www.jslpublishing.com/wal-mart-app-user-leaves-mobile-author-in-her-dust/
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
7 89
ESQUELETO7. Diseño de la interfaz 8. Diseño de navegación 9. Diseño de información
12
3 4
5 6
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información
No diseñar la información
ERROR 9.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Cómo puedo simplificar?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Necesito todos esos datos? ¿Puedo esconder algunos? ¿Puedo mostrar gráficas?
Planear el diseño de información
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 9.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Dashboard con analytics
COUNTLY:
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
7 89
ESQUELETO7. Diseño de la interfaz 8. Diseño de navegación 9. Diseño de información
12
3 4
5 6
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información
No medir o probar con usuarios reales
ERROR 10.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de tener claro:
¿Fue fácil de usar?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿La experiencia fue buena? ¿Hubo frustración?
¿Completaron las tareas?
Hacer pruebas de usabilidad reales
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 10.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Pruebas con usuarios REALES
Los 10 errores comunes de UI en móviles
TEMA 3.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
12
3 4
5 6
7 89
10
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información
ESQUELETO7. Diseño de la interfaz 8. Diseño de navegación 9. Diseño de información
SUPERFICIE 10. Diseño visual
Botones pequeños !
ERROR 1.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
No dar feedback visual !
ERROR 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
Excesivas notificaciones (push)
ERROR 3.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
Tener un mal affordance !
ERROR 4.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
INCONSISTENCIA !
ERROR 5.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
Textos miniatura o ilegibles
ERROR 6.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
Mal diseño de formularios
ERROR 7.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
IGNORAR PATRONES !
ERROR 8.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
Querer “innovar” en símbolos predefinidos
ERROR 9.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
Uso incorrecto del color
ERROR 10.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
12
3 4
5 6
7 89
10
ESTRATEGIA 1. Necesidades del usuario 2. Objetivos del negocio
ALCANCE 3. Especificaciones funcionales 4. Requerimientos de contenido
ESTRUCTURA 5. Diseño de interacción 6. Arquitectura de información
ESQUELETO7. Diseño de la interfaz 8. Diseño de navegación 9. Diseño de información
SUPERFICIE 10. Diseño visual
¿Preguntas? !
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Gracias :)¿QUIERES APLICAR LO QUE VIMOS? > UXSTARTUPS.COM
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR