Clínica de UX
para apps móviles
Mauricio Angulo S.
@mauricioangulo
mauricio.angulo@ingenia.com
Clìnica de UX para móviles
Clínica de UX
para apps móviles
Basado en el artículo:
'Appropriating and Assessing Heuristics for Mobile
Computing' por B...
Experiencia del Usuario
http://blackberrydeveloper.mx
http://blackberrydeveloper.mx
Nativa:
Cascades
C++
HTML 5 Adobe AIR Android
http://amzn.to/1m2DaAE
Experiencia del Usuario
función belleza afinidad historia+ + + =
1 2 3 4
gozo confianza+ =
A B
Usabilidad
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...
#1 Se visual
Tu app siempre debe informar a su usuario sobre qué es lo que está
pasando. Piensa cuidadosamente qué informa...
Mejora los asistentes
• Mejora la visibilidad en los asistentes:
Un título para el asistente ayuda al
usuario a entender q...
Indicando progreso
• Indicadores de progreso y carga;
usa un indicator si la acción
disparada necesita más de un
segundo p...
#2 Se lógico
En el contexto cambiante de la movilidad, los usuarios necesitan poder
entender rápidamente la información en...
Enfatiza la función de la vista
• La principal función de esta vista para
un usuario es registrarse para un
servicio; esta...
Usa imágenes familiares
• Usa iconos familiares. No siempre hay
que reinventar la rueda.
• Actualiza tus iconos si lo dese...
iOS 7 Android 4 BlackBerry 10 Windows Phone 8
Cada plataforma tiene su estilo
iOS 7 Android 4 BlackBerry 10 Windows Phone
iOS Android BlackBerry
#3 Se predecible
Consistencia es que una app y sus controles se comporten
como su usuario espera que se comporten, todo el...
Cada control tiene su lugar
Navegar
Seleccionar
Escribir
• Barra de status; en la parte
superior
• Barra de opciones: en la parte
superior, debajo de la barra de
estatus
• Toolbar...
Controles predecibles
• Los botones se presionan; cuando el
usuario toca un botón en la pantalla,
se “hunde” un poco como ...
#4 Haz cosas
Grandes y Claras
Un vistazo a la pantalla debería ser suficiente para entender la
información en ella.
Colores y contraste
• Contrasta los colores; los
elementos de la UI y el fondo
deben contrastar lo suficiente para
poder d...
Texto claro
• Tamaño; usa una tipografía
suficientemente grande para leerla
cómodamente.
• Tipografía; usa fuentes que sea...
#5 Ayuda a tu
usuario
Aún es complicado escribir en un dispositivo pequeño. La app debería
minimizar la cantidad de texto ...
Reduce la necesidad de escribir
• Evita campos de entrada de
texto. Escribir en dispositivos
móviles es complicado.
• Util...
Muestra resultados rápido
• Usa búsqueda progresiva; facilita al
usuario teclear nombres o direcciones.
• Si es posible, m...
#6 Se flexible y
eficiente
Todos los usuarios son diferentes: algunos quieren una interfase simple y
sencilla; otros quier...
La Experiencia de Usuario no es un trabajo para el usuario
¡Investiga!
Entre menos te parezcas a tu usuario
deberás investigar más sobre él.
Investigación
del usuarios
tu = tu usuar...
Haz que tu app sea personal
• Personalización opcional: tus usuarios
tal vez quieran ‘hacer suya’ tu
aplicación personaliz...
Resalta las acciones importantes
• Coloca las funciones más
importantes en el toolbar.
• La función de un control debe
pod...
#7 Genera gozo
Los móviles son compañeros de sus usuarios: ¡siempre están con
ellos! La interfase debería diseñarse para q...
Pequeño es mejor
Si tu aplicación utiliza imágenes, asegurate
que:
o La aplicación funciona en ambas
orientaciones: vertic...
#8 Se claro
Aunque preferimos evitar los mensajes de error,
eventualmente los errores ocurren. Los buenos mensajes
de erro...
Habla como humano
• Utiliza lenguaje humano para
explicar el error y sus posibles
soluciones. El usuario estará más
dispue...
Inhabilita acciones
• Inhabilita el botón de enviar en una
forma hasta que el usuario haya
completado todos los campos
obl...
#9 Colabora
Una buena experiencia de usuario es el resultado del trabajo
colaborativo de un equipo inter- disciplinario do...
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ó...
Desarrollo
DiseñoNegocio
la experiencia es el producto
Clínica de UX
para apps móviles
• Mauricio Angulo S.
@mauricioangulo
mauricio.angulo@ingenia.com
Clìnica de UX para móviles
Clinica de UX para apps móviles
Clinica de UX para apps móviles
Upcoming SlideShare
Loading in...5
×

Clinica de UX para apps móviles

393

Published on

Mi presentación sobre User Experience (UX) en el #MobileCampMX, con un poco sobre la plataforma de desarrollo de BlackBerry 10

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
393
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Usability is a big part of the overall user experience: an application with poor usability is not likely to be rated with five stars in reviews! You should consider different kinds of users, the various environments they use the application in, and simplified ways of completing the tasks your application is meant to help them with.
  • Clinica de UX para apps móviles

    1. 1. Clínica de UX para apps móviles Mauricio Angulo S. @mauricioangulo mauricio.angulo@ingenia.com Clìnica de UX para móviles
    2. 2. Clínica de UX para apps móviles Basado en el artículo: 'Appropriating and Assessing Heuristics for Mobile Computing' por Bertini, Gabrielli y Giman http://dl.acm.org/citation.cfm?id=1133291
    3. 3. Experiencia del Usuario
    4. 4. http://blackberrydeveloper.mx
    5. 5. http://blackberrydeveloper.mx Nativa: Cascades C++ HTML 5 Adobe AIR Android
    6. 6. http://amzn.to/1m2DaAE
    7. 7. Experiencia del Usuario
    8. 8. función belleza afinidad historia+ + + = 1 2 3 4
    9. 9. gozo confianza+ = A B
    10. 10. Usabilidad
    11. 11. 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
    12. 12. #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 vital para tus usuarios y cual es necesaria para que puedan guiarse puedan guiarse solos.
    13. 13. 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.
    14. 14. 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.
    15. 15. #2 Se lógico En el contexto cambiante de la movilidad, los usuarios necesitan poder entender rápidamente la información en su pantalla.
    16. 16. 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.
    17. 17. 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.
    18. 18. iOS 7 Android 4 BlackBerry 10 Windows Phone 8 Cada plataforma tiene su estilo
    19. 19. iOS 7 Android 4 BlackBerry 10 Windows Phone
    20. 20. iOS Android BlackBerry
    21. 21. #3 Se predecible Consistencia es que una app y sus controles se comporten como su usuario espera que se comporten, todo el tiempo.
    22. 22. Cada control tiene su lugar Navegar Seleccionar Escribir
    23. 23. • 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
    24. 24. 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.
    25. 25. #4 Haz cosas Grandes y Claras Un vistazo a la pantalla debería ser suficiente para entender la información en ella.
    26. 26. 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.
    27. 27. 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.
    28. 28. #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.
    29. 29. 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.
    30. 30. 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.
    31. 31. #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.
    32. 32. La Experiencia de Usuario no es un trabajo para el usuario
    33. 33. ¡Investiga! Entre menos te parezcas a tu usuario deberás investigar más sobre él. Investigación del usuarios tu = tu usuario
    34. 34. 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.
    35. 35. 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.
    36. 36. #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.
    37. 37. 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.
    38. 38. #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.
    39. 39. 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.
    40. 40. 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.
    41. 41. #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.
    42. 42. 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
    43. 43. Desarrollo DiseñoNegocio
    44. 44. la experiencia es el producto
    45. 45. Clínica de UX para apps móviles • Mauricio Angulo S. @mauricioangulo mauricio.angulo@ingenia.com Clìnica de UX para móviles
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×