Tips para mejorar la Experiencia de Usuario

Retomando los temas que sobre los que hemos escrito, Experiencia de Usuario (o UX) es una disciplina relativamente nueva, a diferencia con otras. El término “Experiencia de Usuario” fue acuñado por el Dr. Donald Norman, un investigador de la ciencia cognitiva que también fue el primero en describir la importancia del Diseño Centrado en el Usuario: 

El Diseño Centrado en el Usuario (o DCU) es la idea de que las decisiones de diseño deben basarse en las necesidades y deseos de los usuarios.

El énfasis en el Diseño Centrado en el Usuario (o UCD) para describir o justificar la importancia de diseñar para mejorar la experiencia de usuario parece casi innecesaria, pero no lo es. En el diseño de las interfaces vemos que “es importante porque se ocupa de las necesidades de nuestros usuarios y así todo el mundo probablemente estará satisfecho”.

El diseño centrado en el usuario va más allá de “sólo” pensar en el usuario. Debemos reiterar en que el diseño sea centrado en el usuario al crear sitios web, sistemas, apps, o cualquier otro sistema. Si tomamos decisiones de diseño en base a 1) lo que pensamos que es creíble y, 2) lo que el cliente quiere ver, caemos en un círculo vicioso.

POSSIMPIBLE

Para salirnos de esta trampa dejo a continuación algunos tips para hacer diseño de UX centrados en el usuario. Claro que no debemos usarlos al pie de la letra; y como decimos en el medio: todo proyecto que involucra diseño de experiencia de usuario, depende de:

  • Construir una interacción basada en pensar en “qué funciona” y diseñar para nosotros mismos.
  • Centrar la atención en la estética y en la marca, con poca o ninguna idea de cómo la gente utilizará el sitio o cómo se sentirá mientras lo hace.

Debemos tomar en cuenta que en el diseño centrado en el usuario es importante:

  1. Ayudar al cliente para prestar atención en el mejoramiento de los contenidos de su sitio.
  2. Apoyar, generar y promover los procesos de atención del usuario hacia el sistema y especialmente en la distribución de los contenidos.
  3. Ofrecer una buena jerarquía, modular y la opción de configuración en la arquitectura de los contenidos, ya sea por producto y/o servicio.
  4. Reducir la carga de trabajo cognitivo del usuario.
  5. Promover la interacción con los contenidos para que sea sencilla, eficaz y útil, con una mejor comunicación con el usuario.
  6. Facilitar la participación digital y móvil de los usuarios.
  7. Acelerar la entrada de usuario en el diseño de producto y la retroalimentación posterior a la implementación.
  8. Mantener una comunicación constante con el usuario, por distintos medios y canales.

Para evitar el círculo vicioso es necesario quitarse las “malas costumbres” poco a poco, ustedes tendrán la oportunidad de vivir en carne propia cómo generar mejoras en el diseño de la Experiencia de Usuario en algún proyecto, basta tomar la decisión de comenzar a aplicar estos sencillos consejos.

Seguro hay más tips y ustedes tendrán otros. ¡Compártanlos para enriquecer esta lista!

Diseñadora gráfica y psicóloga especializada en diseño editorial e hipermedios, ha sido investigadora y consultora en usabilidad, user experience y diseño emocional desde 2007.

Creación de wireframes

Los wireframes son herramientas muy importantes en el proceso de creación centrada en el usuario. Con las herramientas adecuadas se pueden crear fácil y rápidamente.

Ya he escrito respecto del proceso de arquitectura de un proyecto digital sobre la producción de mapas mentales y flujos de usuario; el siguiente paso en el proceso de diseño centrado en el usuario corresponde a los wireframes, que nos ayudan a definir cuáles serán los elementos en la interfaz y en los sistemas de navegación, así como la forma en que trabajarán juntos.

Wireframe en papel
Wireframe en papel

Los wireframes no son parte del proceso de diseño visual, por lo que no incluiremos en este proceso la definición de colores, gráficos o la tipografía a utilizar en el diseño final.

Wireframe low-fi con Balsamiq
Wireframe low-fi con Balsamiq

Se pueden construir dos tipos de wireframes: los de baja calidad y los de alta calidad. Los wireframes low-fi son esquemas donde sólo vamos a colocar cuadros abstractos con una etiqueta simple que explique su rol en la maqueta. Los wireframes low-fi pueden crearse usando sólo lápiz y papel, en un pizarrón o con una herramienta que no aporte mucho detalle como Balsamiq Mockups.

Los wireframes high-fi son aproximaciones más complejas y detalladas donde todas las opciones de navegación, como las opciones para aceptar términos o condiciones, o para recuperar una contraseña sí están presentes. Los wireframes high-fi pueden servir incluso para desarrollar un prototipo interactivo.

Una buena herramienta para desarrollar wireframes detallados es Axure RT, aunque aplicaciones como Adobe Illustrator también son muy recurridas por su flexibilidad.

Wireframes high-fi en Axure
Wireframe high-fi en Axure

La ventaja de herramientas como Axure o Balsamiq es que fueron creadas desde el principio para crear wireframes de manera muy sencilla, basando su interfaz en un modelo de interacción de arrastrar-y-soltar (drag and drop).

Axure incluye además herramientas de personalización e interacción poderosas donde un  wireframe simple puede llegar a verse y a funcionar casi como el producto final con poco esfuerzo, porque los archivos del wireframe se exportan como HTML, lo que permite realizar trucos muy interesantes mediante CSS y JavaScript sin necesidad de tener escribir código desde cero.

En futuros artículos escribiré más a fondo sobre Axure como herramienta de prototipado, desde sus funciones más básicas hasta algunos trucos para conseguir prototipos interactivos avanzados.

UX Specialist en Foo Studio. Creador de geekoteca.com. Fan de LEGO