Fundamentos para una Gran Experiencia de Usuario (UX)

Para el beneficio de software y aplicaciones en general, la UX se ha convertido en un paso cada vez más importante en el ciclo de desarrollo del software. Aunque la UX es una fase ligeramente misteriosa del diseño, no es menos importante. Tal como indica su nombre, la UX define la experiencia de los usuarios. Aquella que determina si estos querrán repetir o si por el contrario les hará salir corriendo.

La UX es algo que cualquiera puede hacer. El problema es que no todo el mundo lo puede hacer bien. Yo podría realizar el diseño visual de un sitio web pero te aseguro que quedaría terrible y poco profesional.

Si no aprendes nada de la UX te pido que te quedes con estas dos cosas.

1. Conoce al usario.
2. Tú no eres el usuario (en la mayoría de los casos).

Si no conoces a tu base de usuarios, sus hábitos y tendencias, y porqué realizan o no ciertas acciones, entonces no puedes esperar diseñar una buena experiencia para ellos. Aunque seas muy parecido a tus usuarios, recuerda que tú sólo eres una persona y que eso no define las características de tu base de usuarios en su totalidad. Conoce tus usuarios y tenlos en cuenta a la hora de diseñar la experiencia. El rol del UXer es tener ese conocimiento, ampliarlo constantemente y diseñar con esos usuarios en mente, creando experiencias increibles para su deleite y regocijo.

Veamos todos los posibles pasos que un UXer puede tomar a la hora de definir la UX de un producto. Estos pasos forman el proceso ideal. No siempre es posible completar todos estos pasos en el mundo real, pero tenemos que cubrir todos ellos para que aprendas a ser consciente de cuando puedes omitir algunos de ellos y porqué. A veces no se omite neceseriamente un paso, sino que se funde con otro paso, o se sustituye por una combinación de experiencia, conocimiento e intuición.

Requerimientos

La Recopilación de Requerimientos es uno de los primeros pasos en el diseño de la UX. Durante esta fase necesitas realizar muchas preguntas. Muchas de esas preguntas puede que no sean respondidas de inmediato, pero toma nota de ellas e insiste. Existen varios tipos de requerimientos:

1. Requerimientos Comerciales: Las metas y necesidades de otras partes de tu compañía o qué es necesario para rentabilizar el producto. Desafortunadamente, a menudo esto te hará renunciar a cosas que querrías hacer. Es un mal necesario si quieres que tu producto vaya más allá de un proyecto por pura satisfacción.
2. Requerimientos de Diseño: A veces pueden existir consideraciones especiales de diseño o necesidades que deben ser cubiertas.
3. Requerimientos Tecnológicos: Podría haber necesidades tecnológicas específicas (plataforma, lenguaje de programación,etc.) que tengas que considerar en el diseño. ¿Cúales son tus limitaciones?
4. Requerimientos de Usuario: ¿Para quién es el producto? ¿Quién es la audiencia principal? ¿Existe una audiencia marginal? Y si la hay, ¿Quienes son? ¿Abarca toda tu base de usuarios o sólo da soporte a una parte?

Bloques de construcción en Photodune

Todos estos requirimientos serán la base que dará forma a tu diseño. Sin ellos tu diseño será inconcreto

Análisis de Usuario

Debemos conocer a nuestros usuarios antes de poder diseñar para ellos. A veces tendremos mucha información preexistente acerca de ellos. A veces sólo un puñado de suposiciones. Si desconoces a tus usuarios entonces tu diseño será como mucho una conjetura fundamentada. El análisis del usuario es necesario para entender sus necesidades y tendencias.

Pequeños usuarios en Photodune

Necesitarás como mínimo, realizarte las siguientes preguntas para poder comprender a tu base de usuario.

1. ¿Para quién es? ¿Contexto demográfico? ¿Gustos/Aversiones? ¿Aficiones? ¿Profesión?
2. ¿Qué requisitos especiales representan? ¿Representan un problema concreto que necesita ser resuelto? ¿Se corresponden con una necesidad comercial concreta?
3. ¿Qué modelos mentales de la base de usuario necesitas considerar? ¿Existen variaciones significativas dentro de posibles subgrupos?
4. ¿Cuándo, por qué o cómo usarán los usuarios este producto?
5. ¿La accesibilidad tiene que estar incluida en el diseño?

Análisis de Usuario

Después de que hayamos completado el análisis de usuario pasaremos al análisis de tareas. ¿Cuál es la acción primaria que los usuarios van a realizar? Pueden haber muchas cosas que se pueden hacer en tu sitio web o aplicación,pero siempre hay una tarea principal. Tienes que averiguar cual es esa tarea y optimizar la UX para esa tarea para la base de usuario concreta para la cual está diseñada. Aún no hemos llegado a la fase de diseño, pero ahora sabemos qué vamos a diseñar y para quién lo estamos diseñando.

Notas recordatorias en Photodune

También necesitamos determinar cuales son las tareas secundarias. Existen muy pocos sitios/aplicaciones donde sólo se puede hacer una cosa. Normalmente hay varias tareas relacionadas que tienen que ser realizadas. Averiguas todas ellas para conocer la envergadura de lo que estas diseñando.

Otras cosas que hay que determinar en el análisis de tareas:

• ¿Qué clase de Ayuda/FAQ necesitas?
• ¿Qué errores de estado son necesarios?
• ¿Qué casos extremos podrían presentar tus usuarios?
• ¿Existen diferentes formas en que tus usuarios podrían intentar realizar una tarea?

Asignación de Funciones

La Asignación de Funciones consiste en averiguar cómo gestionar todas las funciones que has determinado tienen que suceder. Esto tiene lugar en varios niveles.

• ¿Tienes múltiples sistemas y/o servidores? ¿Cuál ó cuales gestionará mejor una función?
• ¿Qué tiene que tener lugar en el back-end? ¿Y en el front-end?
• ¿Qué páginas son las más adecuadas para gestionar una función concreta? (El método de clasificación de tarjetas funciona muy bien en este caso)
• ¿Qué es automatizado (gestionado por el ordenador)? ¿Qué es manual (controlado/gestionado por el usuario)?

Tenedor, cuchara y cuchillo en Photodune

Las respuestas a estas preguntas pueden afectar dramáticamente a la eficiencia y usabilidad de tu producto

Bosquejos

Bosqueja, haz muchos bosquejos. Es rápido, es barato y es efectivo

Hacer bosquejos te permite llevar rápidamente ideas de tu cabeza al papel. Te ayuda a dar forma a las buenas ideas y elimina las malas. Puedes iterar rápidamente entre bosquejos. La inversión es pequeña para el beneficio que obtienes.

Bosquejo de una casa en Photodune

La creatividad es también clave en este paso. Haz cosas que sean disparatadas o descabelladas. Puede que no funcionen pero pueden favorecer otras ideas. Prueba a variar tus bosquejos significativamente para ver cuan lejos puede llegar una idea.

Papel + Lapiz = Un depósito de donde sacar para cuando empieces a realmente definir tus diseños.

Plantillas de Diseño de Nivel Medio

Llegados a este punto deberías al menos tener una idea de hacia donde quieres orientar tu diseño. El primer set de plantillas debería ser una iteracción sobre tus bosquejos para poder empezar a producir más definición. La arquitectura de la información debería empezar a tener lugar. Aquí es donde las cosas empiezan a ir de un montón de conceptos inconexos, y pedazos de información, a un documento màs coherente sobre como funciona y se ve, el producto.

Prototipos

Existen un montón de diferentes prototipos que puedes hacer. Estos pueden ir desde un simple PDF clicable hasta un sitio casi completamente funcional (HTML/CSS). Realmente depende de lo que necesites para tu proyecto así como cuan lejos quieres llegar con él. Hay abundancia de herramientas que te permitirán poner en marcha tus prototipos rápidamente. Una pequeña muestra incluye:

• Adobe Edge Tools
• Omnigraffle
• Adobe Fireworks
• Foundation
• Bootstrap
• Adobe Flash
• Cualquier editor de texto (iA Writer es estupendo)
• Axure
• iRise

Encuentra la herramienta que mejor se ajusta tu proceso de trabajo y conocimientos para poder prototipar de una manera rápida y efectiva. Los prototipos no te deberían llevar mucho tiempo, pero deben poder comunicar de manera efectiva tu diseño e interacciones.

Los prototipos te ayudan a encontrar interacciones extrañas y a ver como se siente el producto cuando éste está realmente en marcha. También permitirán descubrir aspectos que las plantillas de diseño estáticas no son capaces de revelar.

Plantillas de Diseño de Alta Fidelidad

En este punto es donde vas hacia atrás y empiezas a convertir las plantillas a alta fidelidad. Añade toda la definición que necesites. Cubre tantos detalles como puedas sobre la estructura e interacciones. Todo lo que dejes abierto a la interpretación puede ser entendido en la forma que tú no querrías. No asumas nada.

Mejor calidad visual puede ser o no necesaria. La mayoría de las veces deberías haberte ocupado de eso en la fase de diseño visual. He descubierto que a menudo es mejor recurrir a más plantillas visuales de cara a evitar confusión con colores finales y especificaciones de diseño visual. No obstante, uso el color si éste está relacionado con la funcionalidad (ej. rojo para mensajes de error).

Evaluación de Usabilidad

Este paso puede tener lugar donde lo necesites durante el proceso de diseño. A veces viene bien al final y a veces más hacia el principio del proyecto. No obstante, es aquí donde obtienes feedback actual de los usuarios: pueden confirmar tus sospechas o pueden volver tus pensamientos del revés. Sin embargo esto es crucial para saber lo que piensan y dónde encuentran problemas.

Anciano usando ordenador en Photodune

Estás diseñando para el usuario. Este feedback debería dirigir tu diseño o rediseño para poder solventar los problemas que puedan surgir durante esta evaluación. Descartar o ignorar este feedback sin razón justificada es desaconsejable y un auténtico pecado en el UX.

Diseño Visual

He visto muchos procesos de UX considerar éste el punto en el que se entrega la documentación y se cruzan los dedos esperando lo mejor. ¡Esto no debería ser así! Trabajo de manera muy colaborativa incluso después de haber terminado con la UX propiamente dicha.

De igual manera tus diseñadores visuales también deberían pensar en la UX. Si no lo hacen se podría afirmar que no están realizando completamente su trabajo. Hacer que tus plantillas de diseño se vean mejor es estupendo pero si los diseñadores tienen una idea que puede mejorar la UX estáte dispuesto a escuchar e incluir esa idea. A menudo los diseñadores piensan de forma lo suficientemente diferente como para generar buenas ideas y mejoras.

Desarrollo

Del mismo modo, también deberias trabajar con los desarrolladores. Esto puede no ser tan colaborativo, pero a menudo durante esta fase surgen problemas por los cuales tendrás que ajustar la UX. Esto también te ayudará a obtener una mejor comprensión de las limitaciones técnicas para futuros proyectos. Tus desarrolladores estarán más que contentos si adquieren esos conocimientos antes que estar diseñando soluciones imposibles.

Código HTML en Photodune

Asimismo, contrasta tu UX con el diseño final. En este punto es donde vuelves a las plantillas de diseño y te aseguras de que lo que va a llegar a tus clientes es lo que has diseñado. No es infrecuente que algo no coincida y deberías sentirte lo suficientemente cómodo con tus colaboradores como para poder señalar esas cuestiones. En última instancia tú eres el responsable de la experiencia de tus usuarios, asi que asegurate de que reciben el producto que tu diseñaste.

Conclusión

Estos son sólo los conceptos básicos para montar una gran UX. Puede que no sea posible realizar todos estos pasos, pero tienes que ser consciente de todos ellos que así puedas saber cuando omitir alguno de ellos.

Personalmente creo que UX no es una fórmula. Varía de proyecto a proyecto y se basa en una fusión de conocimientos, experiencia, investigación e intuición. Profundizaremos en áreas más específicas en futuros articulos, pero lo primero que necesitabamos era una base de lo que un UXer hace un día cualquiera de trabajo. Los pasos descritos anteriormente te iniciarán en el proceso de aprender como preparar una gran UX para productos que encantarán a tus usuarios.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!