xeral[arroba]galinus.com

Artículos de Galinus >

Patrones de diseño de interacción: ejemplo práctico

Introducción

Los patrones de diseño e interacción nos ofrecen soluciones probadas a problemas comunes. Utilizándolos en nuestros diseños nos ahorraremos mucho trabajo.

En este ejemplo queremos ilustrar el uso de patrones para mejorar un proceso. Hay que señalas que hay otros patrones que fomentan valores más abstractos, como la credibilidad.

Escogimos como ejemplo el proceso de compra de billetes de Iberia.es por nuestras experiencias en su web. Esto no es razón suficiente y habría que justificar cualquier cambio con pruebas de usuario, estadísticas del sitio o llamadas a atención al cliente.

Nos guiamos por el libro The Design of Sites. Cuando encontremos patrones similares el la web, los enlazamos. Si no los encontramos, hacemos una descripción sencilla del patrón.

Aplicando patrones a proceso de compra de billetes en Iberia

Estos son algunos de los patrones que podríamos utilizar para una experiencia de usuario más satisfactoria. Entre paréntesis indicamos el patrón utilizado (patrones que contiene el libro).

1° Sesiones de usuario (H5-Persistent customer sessions).

Utilizamos sesiones cuando necesitamos guardar temporalmente datos del usuario (procesos de registro o pago, por ejemplo) u ofrecer contenido personalizado.

En Iberia comienzas una sesión nada más entrar en la web, antes incluso de introducir datos que necesiten guardarse temporalemente.

Problema: si la persona abandona la web (por una llamada de teléfono, por ejemplo), al volver se puede encontrar con que su sesión ha caducado. Esto pasa aunque no haya comenzado ningún proceso en el que se tengan que introducir datos.

La sesión caducada se notifica con un mensaje de error que nos lleva a los siguientes patrones.

2° Mensajes de error amables y explicativos (K13-meaningful error messages), lenguaje comprensible (K11-Familiar language)

La web debe informar de errores de una forma clara e poco alarmante. Debemos evitar términos confusos y hacer que el usuario siga adelante de forma sencilla.

¿Por qué quiere este menú que me vaya a la página de Iberia en Alemania?

Una enorme señal de atención, texto apelotonado y varios menús desplegables no informan claramenente ni tranquilizan al usuario. Además, el error debería decirnos por qué nuestra sesión caduca y cómo evitarlo.

Los menús desplegables en distintos idiomas y sus distintas opciones por defecto no ayudan a seguir adelante .

3° Proceso en tunel: Ayudar al usuario completar tareas ( capítulo de ejemplo del libro The Design of Site. PDF, 264 KB).

Tenemos que evitar que una persona abandone por accidente un proceso que necesita varios pasos para completarse.

Quitamos todos los enlaces ajenos al proceso. Los enlaces de ayuda deben abrirse en una nueva ventana, para que el usuario no se salga de contexto.

Tenemos que indicar claramente cuántos pasos lleva y cuántos quedan para terminar. Los botones de acción son la mejora manera de saber cómo seguir adelante con el proceso.

 

El menú superior sigue presente mientras completamos la compra de billetes.

En Iberia siempre están visibles muchos enlaces ajenos al proceso de compra. Cualquier clic puede llevarnos a otra sección, con el problema de que la vuelta atrás es lenta y suele dar problemas por la cantidad de Javascript que utiliza.

Una implementación impecable de un proceso en tunel son las compras en Amazon. Una vez comenzamos la compra es casi imposible salir por accidente.

Botones de acción (K4-Action Buttons), botones con visibilidad alta (K5-High-visibility action buttons). Puedes ver un patrón similar en Web Design Patterns:Action Buttons.

Los enlaces de texto son adecuados para moverse de una página a otra. Pero cuando el usuario tiene que dar pasos par completar una tarea, conviene utilizar botones.

Usar botones de aspecto tridimiensional, que se parezcan a un botón real, y con etiquetas con verbos que indiquen la acción que realizamos cuando pulsamos el botón.

Botón "Tarifa" para seguir adelante con el proceso de compra.

En Iberia los botones son planos y a veces están etiquetados con sustantivos en vez de verbos. Hay casos en los que es necesario aclarar su función con textos explicativos.

Conclusión

Hemos aplicado unos pocos patrones a un proceso muy concreto. No hemos tocado diseño de interacción para situaciones más complejas como los procesos de registro o cuentas de invitados. Creemos, sin embargo, que estos patrones sirven para ilustrar las ventajas de utilizar soluciones ya probadas.

Artículos relacionados

Patrones de diseño e interacción

Enlaces

Patrones de diseño En Grancomo puedes encontrar muchos enlaces de interés para profundizar en el uso de patrones.

www.welie.com Patrones de interacción para la Web, aplicaciones móviles y de escritorio. Utiliza hipertexto para enlazar patrones relacionados.

UI Patterns and Techniques

Implementing a Pattern Library in the Real World: A Yahoo! Case Study Caso práctico de cómo crear un lenguaje común para la comunicación entre miembros de la compañía.

Bibliografía

The Design of Sites. Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience. Douglas K. Van Duyne, James A. Landay e Jason I, Hong.

Ver más artículos

Licencia de Creative Commons

Artículo bajo licencia de Creative Commons.


En Galinus somos profesionales de la comunicación en internet.

Si quieres aprovechar al máximo las posibilidades de las tecnologías de la comunicación, contacta con nosotros.