Consejos útiles para un buen UX. Parte 2

Hace unas semanas les estuve contando un poco del proceso de investigación y arquitectura de la información, hoy les voy a hablar de la ejecución de las ideas y como llevar estas a feliz término.

Diseño UI

6. Wireframes Baja densidad

Inicio de la fase de diseño, en este ejercicio vamos a usar papel y lápiz para empezar a bocetar las pantallas. La idea es no demorarnos mucho por pantalla y antes que buscar la perfección y el detalle hay que lograr la funcionalidad, para ello es importante explorar diferentes acercamientos para una misma pantalla. De esta manera se trabaja más rápido y se logra desechar lo que no está funcionando.

7. Wireframes de Media o alta densidad

Este ejercicio lo trabajo cuando quiero o necesito mostrarle algo mas prolijo al cliente. Consiste básicamente en digitalizar los bocetos hechos en papel para revisar lo que escogimos y como están estructurados.

8. Mockups

Los Mockups son el diseño final. En esta parte ya lo que queda es aplicar los estilos seleccionados en la identidad corporativa. Se trata básicamente de embellecer todo el proceso que se hizo anteriormente, es donde escogemos la tipografía que vamos a usar, el uso de los colores, los tamaños, los espacios, etc…

Dentro del diseño UI, hay una serie de elementos que debemos tener en cuenta para que el usuario entienda exactamente que debe hacer, porque lo debe hacer y como lo debe hacer. Para lograr este objetivo la plataforma le debe hablar al usuario, debe haber pequeñas interacciones y feedback que le permitan saber como moverse dentro de la página, algunos de estos elementos son:

IxD (Interaction design)

Blank Slates: Son todas esas pantallas a las que llegamos que están vacías, ya sea porque no se ha puesto “x” información o porque es un error.

Diálogos: Son esas conversaciones que aparecen mientras se usa una plataforma, esas que nos indican si vamos por buen o mal camino, esas que nos preguntan si estamos seguros de ejecutar “x” o “y” acción.

Micro-interacciones: Son esas pequeñas reacciones que tiene una página cuando interactuamos con ella, como cuando pasamos por encima de un botón o le damos click a este, y lo que pasa después de que le damos click que le dice al usuario que la siguiente pantalla se esta cargando.

Siempre que haya una acción por parte del usuario debe haber una reacción por parte de la página.

Prototipado

Pantalla de flujo en Invision

9. Prototipo

Este es el paso anterior a entregar el diseño a desarrollo, es la rectificación final, donde se revisa que el flujo que se hizo sea el adecuado y que cada pieza del diseño se comporta como queremos; si algo falla es más fácil, en este punto, hacer ajustes que cuando enviamos a desarrollo. El prototipo es simplemente una versión demo que conecta las pantallas para analizar los flujos.

10. Testeo de usuarios

En este punto no entraré mucho en detalle ya que hay numerosos artículos por ahí en la web que explican bien como se debe hacer el proceso. Es simplemente invitar entre 5 y 7 amigos, conocidos, objetivos específicos del nicho, a probar el prototipo a través de una serie de tareas que estos van a ejecutar en voz alta mientras nosotros tomamos nota y grabamos tanto la pantalla como su cara , para ver las expresiones que estos tienen al interactuar con la plataforma. Es importante hacerle entender a estos usuarios que si no logran realizar alguna tarea no es problema de ellos si no de nosotros. Pedir la retroalimentación es de suma importancia. La primera y última impresión de la plataforma también son importantes, ¿usable? ¿entendible? ¿amigable?.

Esto es apenas un vistazo a una de las cientos de formas que hay para abordar el diseño UX. Mi recomendación es que lean todos los días y estén en constante contacto con blogs y newsletters, que hablen del tema. La única forma de convertirse en un gran diseñador UX es a través del estudio constante y la lectura diaria.

Algunos de los libros que recomiendo para esto son:


Cualquier duda o comentario es bienvenido, y si les gusto no duden en compartirlo con sus colegas y amigos.

Si quieren tener más acceso a post de este tipo pueden seguirme en Facebook y Twitter

Like what you read? Give Santiago Ortiz a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.