Roles UX

• UX Research:
  • Encargado de investigar si el producto es rentable
  • Si es factible la tecnología
  • Investigar mercado meta
• UX Content:
  • Microcopies
  • Copies
  • Encargados de la correción de estilo
  • Redacción y ortografía
• UX Strategist:
  • Encargado de coordinar/guiar
  • Atender problemáticas
• UX Visual & UI:
  • Habilidad estética
  • Entender la funcionalidad
  • Que convivan la estética y la funcionalidad
• Interaction Design: (Compartido)
  • Prototipos

UI

Diseñando lo invisible

• Retomar emociones
• Llenar un vacío emocional
• Apelar a la nostalgia

User Experience (Alma)

¿Cómo los usuarios se sienten?

• Ver + Sentir + Usabilidad = UX

"Una experiencia de usuario s el efecto general creado por las interacciones y percepciones que añguien tiene cuando usa un producto o servicio".

L Buley(2013)

Factores que generan un buen UX

Usabilidad: Sitio web o APP eficiente Utilidad: Elementos con propósito Confianza: Información en cada paso Deseo: Diseño, estética y contenido deseable Facilidad de búsqueda: Encontrar en seg Seguridad: Datos personales Creación de valor: Más allá de lo económico

User Interface (Cuerpo)

Lo que los ojos ven

• Arquitectura de la inf + Patrones de interacción + Elementos visuales = UI

• Marca + Guía de Estilo + Librería de Patrones + DS(Design Sistem) + Mockups = UI

  • Guía de Estilo: Colores, fuentes, etc.
  • Librería de patrones: Íconos, formularios, etc.
  • DS = Guía de estilo + Librería de patrones + Buenas prácticas
  • Mockups: Pantallas

Accesibilidad y Usabilidad

Lo que te permite alcanzar tus objetivos con un mínimo esfuerzo.

Los usuarios pueden alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos: deben de tener el control del sitio.

Blog de Arsys(2017)

Factores que generan una buena USABILIDAD

• Tiempos de carga rápidos
• Diseño limpio y claro
• Coherencia (Adaptarse a las posibles respuestas)
• Claridad (Empatía con el usuario evitando conceptos complejos y aportan valor sobre tus productos y servicios)
• Intuititva
• Legibilidad (Contraste de textos con el fondo, tamaño de fuente, jerarquía de informacián)
• Información (Contenido resumido, lectura amena y concisa)
• Percepción de colores

Accesibilidad

Acceso universal independientemente del software o hardware, la localización geográfica o la infraestructura de red.

Blog de Arsys(2017)

Leyes UX (19 leyes)

1. Efecto de usabilidad estética: Los usuarios a menudo perciben el diseño estéticamente agradable como un diseño que es más útil
2. Umbral Doherty: La productividad se dispara cuando una computadora y sus usuarios interactúan a un ritmo(<400 milisegundos) que garantiza que ninguno de los dos tiene que esperar en el otro
3. Ley de Fitts: El tiempo para adquirir un objetivo es una función de la distancia y el tamaño del objetivo
4. Ley de Hick: El tiempo que toma tomar una decisión aumenta con el número y la complejidad de las opciones
5. Ley Jacob: Los usuarios pasan la mayor parte de su tiempo en otros sitios. Esto significa que los usuarios prefieren que su sitio funcione de la misma manera que todos los demás sitios que ya conocen
6. Ley de la región común: Los elementos tienden a percibirse en grupos si comparten el área con un límite claramente definido
7. Ley de Prägnanz: Las personas percibirán e interpretarán las imágenes ambiguas o complejas como la forma más simple posible
8. Ley de proximidad: Los objetos que están cerca, o próximos entre sí, tienden a agruparse
9. Ley de similitud: El ojo humano tiende a percibir elementos similares en un diseño como una imagen, forma o grupo completo, incluso si esos elementos están separados
10. Ley de conexión uniforme: Los elementos que están conectados visualmente se perciben como más relacionados que los elementos sin conexión
11. Ley de Miller: La persona promedio solo puede mantener 7 (más o menos 2) elementos en su memoria de trabajo, el ideal es 5
12. Ley de Occam: Entre las hipótesis en competencia que predicen igualmente bien, debe seleccionarse la que tenga menos suposiciones.
13. Principio de Pareto: El principio de Pareto establece que, para ,muchos eventos, aproximadamente el 80% de los efectos provienen del 20% de las causas
14. Ley de Parkinson: Cualquier tarea se inflará hasta que se gaste todo el tiempo disponible
15. Ley de Postel: Sé liberal en lo que aceptas y conservador en lo que envíes
16. Efecto de posición serial: Los usuarios tienen la prospensión de recordar mejor los principios y últimos elementos de una serie
17. Ley de Tesler: Establece que para cualquier sistema existe una cierta complejidad que no se puede reducir
18. Efecto Von Restorff: Predice que cuando hay varios objetos similares presentes, es más probable que se recuerde el que difiere del resto
19. Efecto Zeiganik: Las personas recuerdan las tareas incompletas o interrumpidas mejor que las tareas completadas

Heurísticas de Nielsen

Jkob Nielsen Gurú de la usabilidad

1. Visibilidad del Estado: El sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de un tiempo razonable.
2. Relación entre sistema y mundo real: El sistema debería hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, más que con términos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
3. Control y libertad de usuario: Al equivocarse el usuario necesitará una "salida de emergencia" claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer.
4. Consistencia y estándares: Los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.
5. Prevención de errores: Buen diseño de mensajes de error, realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.
6. Reconocimiento antes que recuerdo: Se deben hacer visibles los objeros, acciones y opciones. El usuario no tendría que recordar la información que se de da en una parte del proceso, para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario.
7. Flexibilidad y eficiencia de uso: La resencia de aceleradores, que no son vistos por los usuario novatos, pueden ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapte el sistema para usos frecuentes.
8. Estética y diseño minimalista: Los diálogos no deben contener información que es irrelevante o poco usada. Cada unidad extra de información en un diálogo, compite con las unidades de información relevante y disminuye su visibilidad.
9. Ayudar a los usuarios a reconocer: Diagnosticar y recuperrarse de errores: Los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.
10. Ayuda y documentación: Dicha información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.

Design Sprint (Google Ventures)

1. Entender
2. Definir
3. Bocetar
4. Decidir
5. Prototipar
6. Validar

Roles UX

Se dividen en 3 enfoques:

• Diseño único

  • User Research

    1. Entender
    2. Definir

  • Visual Designer

    3. Bocetar
    4. Decidir

  • Interaction Designer

    4. Decidir
    5. Prototipar

  • Front-End

    6. Validar

• Diseño disciplinario

  • User Research

    1. Entender
    2. Definir
    3. Bocetar
    4. Decidir
    5. Prototipar
    6. Validar

  • UI Designer

    2. Definir
    3. Bocetar
    4. Decidir
    5. Prototipar

  • Web Designer

    3. Bocetar
    4. Decidir
    5. Prototipar
    6. Validar

• Diseño multidisciplinario

  • UX One Team

    1. Entender
    2. Definir
    3. Bocetar
    4. Decidir
    5. Prototipar

  • UX Enginner

    2. Definir
    3. Bocetar
    4. Decidir
    5. Prototipar
    6. Validar

  • UX Unicorn

    1. Entender
    2. Definir
    3. Bocetar
    4. Decidir
    5. Prototipar
    6. Validar

Diseño de la organización

Fases:

1. Etapa (El par inicial)

2. Etapa (Un equipo completo)

3. Etapa (Una org. completa)

4. Etapa (Organizar la complejidad)

5. Etapa (Liderazgo distribuido)

UX Strategist

"Define la visión y la misión de la solución"

• Descripción

  1. Es la intersección entre UX y negocio
  2. Es el proceso que debe empezar antes de diseñar o desarrollar (Plan de juego)
  3. Va más allá de un solo producto digital

• Herramientas

  1. Roadmap: Hoja de ruta que define que objetivos debemos alcanzar.
  2. Release plan: Define las funcionalidades y tiempo de entrega en Eìcas o Historias de usuario y estas se agrupan en "Releases"

UX Manager

"Comprende dos dimensiones: Estratégico y Táctico"

• Descripción

  1. Gestiona las actividades con UX
  2. Define el lenguaje y estrategia
  3. Se centra en el usuario (DCU)

• Dimensiones

  • Estratégico

    1. Enfoca a planes a largo plazo
    2. Alineación de la estrategia UX + Org

  • Táctico

    1. Habilidades de coaching
    2. Dirige el esfuerzo colectivo

UX Research

"Este rol necesita una mirada multidisciplinar"

• Descripción

  1. Se enfoca en la inv. de usuario para entender sus comportamientos, necesidades, motivaciones a través de técnicas de observación y otras metodologías

• Mirada multidisciplinar

  • Conocimientos antropocénctricos de

investigación.

• Conocimientos tecnológicos

• Conocimientos de negocio

• Se divide en dos tipos de actividades

  1. **User research (Investigación con Usuarios) **
  • Técnicas que permiten la inmersión en la problematica del usuario y su contexto, permitiendo crear una oferta de valor
  2. **Usability Testing (Pruebas de Usabilidad) **
  • Es la etapa donde ya esta materializada la idea y nuestro objetivo es comprender la efciencia de ese producto digital

• Técnica generativas (partir de cero, hacer discovery)

  • Estudio de campo
  • Protopersonas (una persona que imaginas puede ocupar la aplicación, pero no existe) y User Persona (utilizar una persona para ocupar la aplicación)
  • Un día en la vida (de la Protopersona o User Persona)
  • Experience sampling
  • Guerrilla User Research (Otorgar carta de privacidad a personas cercanas)
  • Encuesta
  • Focus Groups
  • Entrevistas

• Técnica evaluativas (ya existe un producto digital)

  • Análisis Heurístico (propia y de la competencia)
  • Assessment (evaluación interna del producto) y Benchmark (tu evaluación en relación a como lo hacen los demás)
  • Test de usabilidad
  • Test A/B (comparar flujos)
  • Test de los 5 segundos (enfocada a la parte de UI)

Análisis Heurístico

• 0 : No es un problema de usabilidad
• 1 : Problema cosm&eacute:tico (Prioridad baja)
• 2 : Problema menor de usabilidad (Prioridad media)
• 3 : Problema mayor de usabilidad (Prioridad alta)
• 4 : CATÁSTROFE DE USABILIDAD ¡DEBE SER ARREGLADO ANTES DE LANZAR!

Benchmark

Comparar productos, servicios y procesos para detectar mejores prácticas y su aplicación

• Análisis Competitivo

  1. General
  2. Arquitectura y categirías
  3. Funcionalidades
  4. Usabilidad
  5. Accesibilidad

Assessment

Comparar tu propio producto. Evaluación interna

Funcional

Requerimientos funcionales del producto digital

• FASE 1 (Entender)

  • Métodos de Descubrimiento

    1. Cuestionario UX :¿Qué sabe sobre su producto y la experiencia de usuario que pretende proporcionar y qué necesita saber?
    2. Plan de Proyecto :¿Qué prácticas de UX emplearás para diseñar una gran experiencia de usuario?
    3. Tour para escuchar :¿Cuáles son las prioridades del equipo y cuánta conciencia y apoyo existe para UX actualmente?
    4. Oportunity workshop :¿Qué áreas del producto necesitan más mejoras desde una perspectiva de UX?
    5. Project Brief :¿Cuáles son los resultados esperados para este proyecto de diseño centrado en el usuario?
    6. Strategy Workshop :¿Cuál es la visión de su equipo para la experiencia de usuario ideal y en qué necesita centrarse para dar vida a esa experiencia única?

  • Momento de comenzar...

    1. El producto soluciona el problema
    2. ¿Pagarán por él?
    3. ¿Cuál es la razón?

  • Conoce a tus usuarios (Ellos te dicen como lo solucionarían)

    1. ¿Qué dicen?
    2. ¿Qué hacen?
    3. ¿Como te hablan del problema?

  • Es momento de crear personas

    • Características
    • Objetivos
    • Puntos de dolor
    • Necesidades
    • Escenarios
    • *Dot voting

  • Un día en la vida de…

    • Describe nombre, edad, ocupación, donde vive, transporte y trayecto al trabajo, hora de comida, salida de trabajo, actividades en casa

  • Empatía

    • ¿Cómo y por qué tu usuario utiliza la tecnología?
    • ¿Que razones tendrían para utilizar tu producto y no el de alguien más?
    • ¿Cómo la aplicación va a solucionar problemas y ahorrar tiempo a los usuarios?
    • ¿Que otros productos similares utilizan?

  • Cardsorting

    • Funcionalidades *Ideas
    • Arquitectura de la Información

• FASE 2 (Definir)

Visual Designer

• Descripción

  1. Son los solucionadores de problemas del diseño.
  2. Desempeñan un papel clave en la defnición (estilo y voz únicos de la marca)
  3. Comprender de UX, UI y diseño webs

• Herramientas

• UI Designer

• Descripción

  1. Son los responsables de la apariencia y el pixel perfect.
  2. Selección de colores, emparejamiento de fuentes.
  3. Busca un UX estético y agradable

• Herramientas

• Arquitectura de la información

  • Cómo se organiza el sistema, incluida las principales organizaciones, categorías y secciones
  • Estructuras de información

• FASE 3 (BOCETAR)

• UX sketching

  • Es una forma muy efectiva de comunicar el diseño, permite a los diseñadores probar varias ideas e iterarlas, antes de escoger una

• Microwireframes

  • Son versiones reducidas de los wireframes. Al minimizar el esfuerzo, maximizar la velocidad y disminuir la fidelidad, las microframes amplifcan los benefcios de la estructura eliminan la mayoría de las defciencias

• Wireframes

  • Esquema o plano de pantalla, es una guía visual que representa el esqueleto de la pantalla o estructura visual de la interfaz

• Mockups

  • Muestra como debería verse cuando se implementa, incluyendo elementos visuales como paletas de colores, fotografía, tipografía y otros elementos gráfcos

• FASE 4 (DECIDIR)

Enlaces

• F8
• Sady Paulson
• Ejemplo de Design System
• Ejemplo de Design System
• Awwwards
• Ejemplo de anomalía
• CollectUI
• [24a11y]https://www.24a11y.com/
• leyes de Gestalt
• Eventos UX
• Google Ventures
• https://invis.io/VESB3CEP5H6
• Zeplin(wireframe, SPECS): https://app.zeplin.io/projects
• Figma: https://www.figma.com/
• Slack: https://slack.com/intl/es-mx/
• Figma + Zeplin: https://blog.zeplin.io/zeplin-figma-integration-its-here-9d6f6e8781d3