clínica de experiencia de usuario para aplicaciones móviles
DESCRIPTION
Estudiaremos cómo hacer el análisis y diagnóstico de experiencia de usuario de una aplicación móvil. También presentaremos herramientas, enfoques y métodos relacionados con la correcta implementación de experiencia de usuario así como la técnica de "sketching" para diseño y desarrollo ágil enfocado al usuario.TRANSCRIPT
Experiencia del Usuario
Experiencia del Usuario: un ejemplo
Video: SNL Rescue Dogs
Experiencia del Usuario
EXperiencia del usuario (UX) es acerca de cómo se siente una persona sobre el uso de un
sistema o tecnología
La Experiencia de Usuario resalta los aspectos vivenciales,
afec5vos, significa5vos y valiosos de la interacción humano-‐máquina y de propiedad de producto
También cubre las percepciones de una persona de los aspectos prácMcos, como la u5lidad, la facilidad de uso y la eficiencia
de un sistema
La experiencia del usuario es subje5va en la naturaleza,
porque se trata del desempeño, sen5mientos y pensamientos de un individuo acerca de un
sistema.
La experiencia del usuario es dinámica, ya que cambia con
el Mempo a medida que cambian las circunstancias
función belleza afinidad historia + + + = 1 2 3 4
Gozo Confianza + = 1 2 3 4
Clínica de Experiencia de Usuario
para aplicaciones móviles
Basado en el arQculo: 'Appropria(ng and Assessing Heuris(cs for Mobile Compu(ng' por BerMni, Gabrielli y Gimani. h?p://dl.acm.org/cita5on.cfm?id=1133291
www.jjg.net/elements
www.jjg.net/elements
#1 Se visual Tu app siempre debe informar a su usuario sobre qué es lo que está pasando. Piensa cuidadosamente sobre qué información es vital para tus usuarios y qué información es necesaria para que ellos puedan guiarse solos en la UI.
Se visual Mejorando los asistentes • Mejora la visibilidad en los asistentes:
Un Otulo para el asistente ayuda al usuario a entender qué tarea está realizando.
• Paginación: para cada asistente agrega un indicador que muestre el progreso del usuario.
• Salir del asistente: siempre debería haber una manera de 'abortar la misión'.
• Regresar: a parMr del paso 2 y en adelante, una opción para regresar siempre está disponible para regresar al paso anterior.
Se visual Indicando progreso • Indicadores de progreso y carga; usa
un indicator si la acción disparada necesita más de un segundo para completarse.
• El indicator, además de dar retroalimentación visual al usuario, le dice que algo está sucediente trás bambalinas.
• Incluso cuando se muestre un indicador de carga, el usuario debería poder seguir usando la aplicación.
#2 Se lógico En el cambiante contexto de la movilidad, los usuarios necesitan poder leer y entender la información en la pantalla muy rápidamente.
Se lógico Enfa5zando la principal función de una vista. • La principal función de esta vista para
un usuario es registrarse para un servicio; esta debería ser la opción más visible para el usuario.
• Si el usuario ha olvidado su password, dale una opción para recuperarlo.
• Podrías ayudar al usuario a saltar el login, llenarlo automáMcamente o dejar la sesión abierta por un Mempo determinado.
• La acción que el usuario solo hace una vez es abrir una cuenta nueva, por eso es la úlMma opción en la pantalla.
Se lógico Aprovecha imágenes que son familiares.
• Usa iconos familiares. No siempre hay que reinventar la rueda.
• Actualiza tus iconos si lo deseas, pero respeta su fundamento, ya que los usuarios se han acostumbrado a ellos.
• Considera diferencias culturales ; los iconos localizados pueden evitar que ofendas a alguien.
• Revisa los iconos en tu plataforma de desarrollo y reuMliza los que ya existen.
#3 Se predecible Consistencia. Una app y sus controles deben comportarse como el usuario espera que se comporten.
Se predecible Los controles deben estar en su lugar. • Barra de status; en la parte superior • Barra de opciones: en la parte
superior, debajo de la barra de estatus • Toolbar: en la parte inferior con
acciones específicas
Se predecible Los controles deben comportarse como se espera • Los butones se presionan; cuando el
usuario toca un botón en la pantalla, se “hunde” un poco como en un botón lo haría en el mundo `sico.
• Las barras se mueven; cuando el usuario arrastra una barra esta se mueve en la pantalla
• Flicking/dragging; cuando el usuario hace flick o arrastra el contenido, este sigue la dirección del dedo moviendose en la misma dirección.
#4 Haz cosas GRANDES y
Claras Ergonomia. Las pantallas en los disposiMvos móviles se están haciendo más grandes, pero siguen siendo di`ciles de usar en condiciones reales, como en plena luz del sol. Un vistazo a la pantalla debería ser suficiente para entender la información en ella.
Grande y claro Colores. • Contrasta los colores; los elementos
de la UI y el fondo deben contrastar lo suficiente para poder disMnguirlos. Esto aplica a botones y a texto.
• Agrupa elementos similares, los que tengan funciones similares con formas y colores similares para evidenciar que Menen algo en común.
• Considera a usuarios daltónicos. • Blanco y negro siguen teniendo el
contraste más fuerte.
Grande y claro Texto. • Tamaño; usa una Mpogra`a
suficientemente grande para leerla cómodamente.
• Tipogra`a; usa fuentes que sean fáciles de leer. Una fuente muy decoraMva dificulta la lectura. La fuente default de tu plataforma debería ser tu primera opción.
• Márgenes; asegurate que tu texto no comience justo en la orilla.
• Párrafos y Otulos; cuando tengas textos largos considera romperlos en párrafos para hacer más fácil su lectura.
#5 Ayuda a tu usuario
Facilidad de Interacción. Aunque algunos disposiMvos Menen métodos avanzados de escritura, aún es complicado escribir en un disposiMvo pequeño. La UI debería reducir la canMdad de texto a escribir y los campos deberán ser siempre del Mpo correcto: texto, numérico o cualquier otro.
Ayuda a tu usuario Reduce la necesidad de escribir • Evita campos de entrada de texto. Escribir
en disposiMvos móviles es complicado.
• U5liza selectores o pickers con valores predeterminados, porque:
• Aceleran la interacción al reducir la escritura por teclado.
• Muestra valores aceptados, facilitando la toma de decisiones al usuario.
• Reduce los errores evita ruMnas de corrección.
• Aumenta la comodidad de usar una app.
Ayuda a tu usuario Mostrando resultados tan pronto como se pueda. • Usa búsqueda progresiva; facilita al usuario
teclear nombres o direcciones.
• Si es posible, muestra el número de resultados mientras el usuario escribe.
• Muestra la manera en que los resultados están ordenados, por ejemplo:
• Calificación. • Relevancia a otros. • Frecuencia de uso. • Distancia. • AlfabéMcamente es el default.
#6 Se flexible y eficiente
Eficiencia y personalización. Todos los usuarios son diferentes: algunos quieren una UI simple y sencilla; otros quieren muchas opciones para un uso rápido. Permite a tus usuarios personalizar su UI y dale a tus usuarios avanzados shortcuts cuando sea posible.
Se flexible y eficiente
Usa “Personas”
Se flexible y eficiente
Video: meet Anna
Se flexible y eficiente Haciendo que tu app se sienta personal • Personalización opcional: tus usuarios tal
vez quieran ‘hacer suya’ tu aplicación personalizando el contenido de acuerdo a sus preferencias.
• Ordena el contenido de manera automá5ca: por uso, por vista, por fecha o categoría.
• Tagging/ra5ng/favoritos/bookmarks: ayuda a tus usuarios a administrar el contenido de tu applicaMon.
• Vista de favoritos view: permite a los usuarios filtrar solo el contenido que quieren ver.
Se flexible y eficiente Reserva el toolbar para acciones importantes • Coloca las funciones más importantes en el
toolbar. • El toolbar siempre está presente y no debe
desaparecer con el scroll de contenido.
#7 Genera gozo
Esté5ca, privacidad y convenciones sociales. Los teléfonos son compañeros de sus usuarios: ¡siempre están con ellos! Por lo tanto, la UI de una app debería estar diseñada para que su uso sea agradable. Debe verse y funcionar con belleza. Los datos del usuarios siempre deben mantenerse seguros.
Genera gozo Las imágenes son buenas – si son pequeñas. • Muchas aplicaciones se benefician al usar
imágenes. • Si tu aplicación uMliza imágenes, asegurate
que: • La aplicación funciona en ambas
orientaciones: verMcal y horizontal. • En una estructura jerárquica uMliza
thumbnails en las listas e imágenes más grandes en las vistas de contenido.
• El backend y la conexión deben de ser capaces de soportar tráfico pesado cuando envien imágenes.
• La descarga de imágenes no debe bloquear la aplicación.
#8 Se claro Manejo de errores realista. Aunque preferimos evitar situaciones donde los usuarios reciben mensajes de error, eventualmente los errores ocurren. Buenos mensajes de error pueden ayudar a los usuarios a reconocer, diagnosMcar y, a veces, a recuperarse del error.
Se claro U5liza un lenguaje humano en situaciones de error. • UMliza lenguaje humano para explicar el
error y sus posibles soluciones. El usuario estará más dispuesto a resolver el problema y a conMnuar trabajando con tu app.
• El lenguaje técnico Mende a asustar a los usuarios.
• Nunca es culpa del usuario. Nunca.
Se claro Evita los errores inhabilitando acciones. • Inhabilita el botón de enviar en una forma
hasta que el usuario haya completado todos los campos obligatorios.
• Esto ayuda a reducir el número de casos de error. No hay necesidad de que el usuario tenga que regresar a llenar un campo olvidado o de enviar un formulario incompleto.
• Hace la interacción más rápido si no es posible avanzar o regresar debido a información faltante.
• Campos obligatorios: eMqueta los campos obligatorios.
#9 No se trata de tener ‘La Gran Idea’
Una buena experiencia de usuario es la suma de muchas pequeñas ideas centradas en el beneficio del usuario
Sketching: protoMpado
Video: sketching your first app
h?p://bit.ly/M5tpDT
#9 Colabora Una buena experiencia de usuario es el resultado del trabajo colaboraMvo de un equipo interdisciplinario donde el foco del desarrollo es el usuario.
Desarrollo
Diseño Mercadotecnia
Midiendo la Experiencia de Usuario
Basado en el libro: ‘Undercover User Experience' por Cennydd Bowles y James Box. h?p://amzn.to/ME6Gx0
Creando buen UX
Hecho para seres humanos: • ¿es la app relevante y úMl? • ¿es diverMda usarlo? • ¿se ajusta a los patrones mentales de sus visitantes –es decir, ellos enMenden cómo debería funcionar la app?
• ¿la app uMliza un lenguaje amigable para sus usuarios?
• ¿la app ofrece el nivel correcto de control al usuario?
Creando buen UX
Amigable: • ¿la app ayuda a sus usuarios cuando cometen algún error?
• cuando ocurre un error, ¿este es claramente explicado para que el usuario pueda superarlo y no repeMrlo?
• ¿la app minimiza el trabajo mental del usuario?
Creando buen UX
Accesible: • ¿el texto es legible? • ¿ofrece alguna opción para débiles visuales? • ¿qué tal para usuarios invidentes? • ¿Mene alguna animación innecesaria? • ¿cuenta con soporte para accesibilidad?
Creando buen UX
Evidente: • ¿está claro para qué y para quién está dirigida la app?
• ¿es fácil de navegar? • ¿el diseño es lógico con la información más importante colocada al frente?
• ¿los íconos y la idenMdad gráfica hacen senMdo?
Creando buen UX
Predecible: • ¿es la app consistente? • ¿uMliza convenciones conocidas de diseño y uso?
• ¿hay buenas opciones de default para el usuario que empieza?
• ¿la app recuerda las preferencias de sus usuarios?
Creando buen UX
Eficiente: • ¿el texto, las imágenes y la estructura son concisos?
• ¿la app Mene un buen desempeño y ofrece retroalimentación valiosa a sus usuarios?
• ¿prioriza las tareas más importantes?
Creando buen UX
Confiable: • ¿la app conMene información veraz de fuentes comprobables?
• ¿el contenido está actualizado? • ¿hay algún error o problema? • ¿la app cumple lo que promete?
Midiendo, comparando, mejorando h?p://sdrv.ms/PozZnK
Midiendo, comparando, mejorando
la experiencia es el producto
h?p://sdrv.ms/MLhTZk
Mauricio Angulo S. [email protected]
@mauricioangulo
5G: ¡Presentacion Terminada! ACHIVEMENT UNLOCKED