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)

1. Clínica de
Experiencia de Usuario
para aplicaciones móviles
Basado 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

2. Experiencia del Usuario

3. EXperiencia del usuario (UX) es
acerca de cómo se siente una
persona sobre el uso de un
sistema o tecnología

4. La Experiencia de Usuario
resalta los aspectos
vivenciales, afectivos, significati
vos y valiosos de la interacción
humano-máquina y de
propiedad de producto

5. 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

6. 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.

7. La experiencia del usuario
es dinámica, ya que cambia con
el tiempo a medida que
cambian las circunstancias

9. función belleza afinidad historia+ + + =
1 2 3 4

10. gozo confianza+ =
A B

12. 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

13. #1 Se visual
Tu 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.

14. 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.

15. 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.

16. #2 Se lógico
En el contexto cambiante de la movilidad, los usuarios necesitan
poder entender rápidamente la información en su pantalla.

17. 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.

18. 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.

19. iOS 7 Android 4 BlackBerry 10 Windows Phone 8
Cada plataforma tiene su estilo

20. iOS 7 Android 4 BlackBerry 10 Windows Phone

21. iOS Android BlackBerry

22. #3 Se predecible
Consistencia es que una app y sus controles se
comporten como su usuario espera que se
comporten, todo el tiempo.

23. Cada control tiene su lugar
Navegar
Seleccionar
Escribir

24. • 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

25. 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.

26. #4 Haz cosas
Grandes y Claras
Un vistazo a la pantalla debería ser suficiente para
entender la información en ella.

27. 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.

28. 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.

29. Texto claro en

30. #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.

31. 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.

32. 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.

33. #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.

34. La Experiencia de Usuario no es un trabajo para el usuario

35. ¡Investiga!
Entre menos te parezcas a tu usuario
deberás investigar más sobre él.
Investigación
del usuarios
tu = tu usuario

36. 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.

37. 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.

38. #7 Genera gozo
Los 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.

39. 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.

40. #8 Se claro
Aunque 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.

41. 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.

42. 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.

43. #9 Colabora
Una buena experiencia de usuario es el resultado
del trabajo colaborativo de un equipo inter-
disciplinario donde el foco del proyecto es el
usuario.

44. 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

45. Desarrollo
DiseñoNegocio

46. la experiencia es el producto