clínica de experiencia de usuario para aplicaciones móviles
DESCRIPTION
Presentación sobre recomendaciones para mejorar y optimizar el diseño, usabilidad y experiencia de usuario de aplicaciones para dispositivos móviles (aplica a cualquier plataforma)TRANSCRIPT
![Page 1: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/1.jpg)
Clínica de Experiencia de
Usuariopara aplicaciones
móvilesBasado en el artículo: 'Appropriating and Assessing Heuristics for Mobile Computing' por Bertini, Gabrielli y Gimani.
http://dl.acm.org/citation.cfm?id=1133291@mauricioangulo
![Page 2: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/2.jpg)
Experiencia del Usuario
![Page 3: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/3.jpg)
EXperiencia del usuario (UX) es acerca de cómo se siente una
persona sobre el uso de un sistema o tecnología
![Page 4: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/4.jpg)
La Experiencia de Usuario resalta los aspectos vivenciales,
afectivos, significativos y valiosos de la interacción
humano-máquina y de propiedad de producto
![Page 5: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/5.jpg)
También cubre las percepciones de una persona de los aspectos prácticos, como la utilidad, la facilidad de uso y la eficiencia
de un sistema
![Page 6: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/6.jpg)
La experiencia del usuario es subjetiva en la naturaleza,
porque se trata del desempeño, sentimientos y pensamientos de un individuo acerca de un
sistema.
![Page 7: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/7.jpg)
La experiencia del usuario es dinámica, ya que cambia con
el tiempo a medida que cambian las circunstancias
![Page 8: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/8.jpg)
![Page 9: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/9.jpg)
función belleza afinidad historia+ + + =1 2 3 4
![Page 10: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/10.jpg)
gozo confianza+ =A B
![Page 11: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/11.jpg)
![Page 12: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/12.jpg)
Se visual
1
Se lógico
2
Se predecible
3
Haz cosas grandes y
claras
4
Ayuda a tu usuario
5
Se flexible y eficiente
6
Genera gozo
7
Se claro
8
Colabora
9
![Page 13: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/13.jpg)
#1 Se visualTu app siempre debe informar a su usuario sobre qué es lo que está pasando. Piensa cuidadosamente qué información es vital para tus usuarios y cual es necesaria para que puedan guiarse solos.
![Page 14: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/14.jpg)
Mejora los asistentes
• Mejora la visibilidad en los asistentes:Un título 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 partir del paso 2 y en adelante, una opción para regresar siempre está disponible para regresar al paso anterior.
![Page 15: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/15.jpg)
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á sucediendo trás bambalinas.
• Incluso cuando se muestre un indicador de carga, el usuario debería poder seguir usando la aplicación.
![Page 16: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/16.jpg)
#2 Se lógicoEn el contexto cambiante de la movilidad, los usuarios necesitan poder entender rápidamente la información en su pantalla.
![Page 17: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/17.jpg)
Enfatiza la función de la 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áticamente o dejar la sesión abierta por un tiempo determinado.
• La acción que el usuario solo hace una vez es abrir una cuenta nueva, por eso es la última opción en la pantalla.
![Page 18: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/18.jpg)
Usa imágenes 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 reutiliza los que ya existen.
![Page 19: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/19.jpg)
iOS 7 Android 4 BlackBerry 10 Windows Phone 8
Cada plataforma tiene su estilo
![Page 20: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/20.jpg)
iOS 7 Android 4 BlackBerry 10 Windows Phone
![Page 21: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/21.jpg)
iOS Android BlackBerry
![Page 22: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/22.jpg)
#3 Se predecibleConsistencia es que una app y sus controles se comporten como su usuario espera que se comporten, todo el tiempo.
![Page 23: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/23.jpg)
Cada control tiene su lugar
Navegar
Seleccionar
Escribir
![Page 24: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/24.jpg)
• 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
Cada control tiene su lugar
![Page 25: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/25.jpg)
Controles predecibles
• Los botones 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 físico.
• Las barras se mueven; cuando el usuario arrastra una barra esta se mueve en la pantalla
• Cuando el usuario hace flick o arrastra el contenido, este sigue la dirección del dedo moviéndose en la misma dirección.
![Page 26: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/26.jpg)
#4 Haz cosas Grandes y Claras
Un vistazo a la pantalla debería ser suficiente para entender la información en ella.
![Page 27: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/27.jpg)
Colores y contraste
• Contrasta los colores; los elementos de la UI y el fondo deben contrastar lo suficiente para poder distinguirlos. Esto aplica a botones y a texto.
• Agrupa elementos similares, los que tengan funciones similares con formas y colores similares para evidenciar que tienen algo en común.
• Considera a usuarios daltónicos.• Blanco y negro siguen teniendo el
contraste más fuerte.
![Page 28: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/28.jpg)
Texto claro
• Tamaño; usa una tipografía suficientemente grande para leerla cómodamente.
• Tipografía; usa fuentes que sean fáciles de leer. Una fuente muy decorativa 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 títulos; cuando tengas textos largos considera romperlos en párrafos para hacer más fácil su lectura.
![Page 29: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/29.jpg)
Texto claro en
![Page 30: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/30.jpg)
#5 Ayuda a tu usuario
Aún es complicado escribir en un dispositivo pequeño. La app debería minimizar la cantidad de texto a escribir y los campos deberían ser solo del tipo correcto.
![Page 31: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/31.jpg)
Reduce la necesidad de escribir• Evita campos de entrada de
texto. Escribir en dispositivos móviles es complicado.
• Utiliza selectores o pickers con valores predeterminados, porque:
o Aceleran la interacción al reducir la escritura por teclado.
o Muestra valores aceptados, facilitando la toma de decisiones al usuario.
o Reduce los errores evita rutinas de corrección.
o Aumenta la comodidad de usar una app.
![Page 32: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/32.jpg)
Muestra resultados rápido
• 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:
o Calificación.o Relevancia a otros.o Frecuencia de uso.o Distancia.o Alfabéticamente es el default.
![Page 33: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/33.jpg)
#6 Se flexible y eficiente
Todos los usuarios son diferentes: algunos quieren una interfase simple y sencilla; otros quieren opciones para uso rápido. Permite a tus usuarios personalizar la app cuando sea posible.
![Page 34: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/34.jpg)
La Experiencia de Usuario no es un trabajo para el usuario
![Page 35: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/35.jpg)
¡Investiga!
Entre menos te parezcas a tu usuariodeberás investigar más sobre él.
Investigación del usuarios
tu = tu usuario
![Page 36: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/36.jpg)
Haz que tu app sea 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ática: por uso, por vista, por fecha o categoría.
• Ayuda a tus usuarios a administrar el contenido de tu aplicación.
• Vista de favoritos: permite a los usuarios filtrar solo el contenido que quieren ver.
![Page 37: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/37.jpg)
Resalta las acciones importantes
• Coloca las funciones más importantes en el toolbar.
• La función de un control debe poder expresarse como un verbo.
• Reduce las opciones en el toolbar al mínimo
• El toolbar siempre está presente y no debe desaparecer con el scroll de contenido.
![Page 38: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/38.jpg)
#7 Genera gozoLos móviles son compañeros de sus usuarios: ¡siempre están con ellos! La interfase debería diseñarse para que su uso sea agradable. Debe verse y funcionar con belleza.
![Page 39: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/39.jpg)
Pequeño es mejor
Si tu aplicación utiliza imágenes, asegurate que:
o La aplicación funciona en ambas orientaciones: vertical y horizontal.
o Utilice thumbnails en las listas e imágenes más grandes en las vistas de contenido.
o El backend y la conexión deben de ser capaces de soportar tráfico pesado cuando envíen imágenes.
o La descarga de imágenes no bloquee la aplicación.
![Page 40: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/40.jpg)
#8 Se claroAunque preferimos evitar los mensajes de error, eventualmente los errores ocurren. Los buenos mensajes de error deben ayudar al usuario a reconocer, diagnosticar, y a veces, a recuperarse de un error.
![Page 41: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/41.jpg)
Habla como humano
• Utiliza lenguaje humano para explicar el error y sus posibles soluciones. El usuario estará más dispuesto a resolver el problema y a continuar trabajando con tu app.
• El lenguaje técnico tiende a asustar a los usuarios.
• Nunca es culpa del usuario. Nunca.
![Page 42: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/42.jpg)
Inhabilita 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.
• Etiqueta los campos obligatorios.
![Page 43: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/43.jpg)
#9 ColaboraUna buena experiencia de usuario es el resultado del trabajo colaborativo de un equipo inter- disciplinario donde el foco del proyecto es el usuario.
![Page 44: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/44.jpg)
Cómo lo explicó el cliente
Cómo lo entendió el líder de proyecto
Cómo lo diseñó el analista
Cómo lo hizo el programador
Cómo lo describió el de ventas
Cómo fue documentado
Cómo lo ejecutó operaciones
Cómo fue cobrado al cliente
Cómo fue el soporte técnico
Lo que el cliente necesitaba
![Page 45: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/45.jpg)
Desarrollo
DiseñoNegocio
![Page 46: Clínica de experiencia de usuario para aplicaciones móviles](https://reader031.vdocuments.mx/reader031/viewer/2022012918/5584e419d8b42a25468b513c/html5/thumbnails/46.jpg)
la experiencia es el producto