Patrones de diseño de interacción

9 noviembre, 2012

Recupero este artículo publicado en 2005 en la desaparecida bitácora de usabilidad de Sidar.

Introducción

La disciplina de la Interacción Persona-Ordenador es el área de conocimiento científico encargada de estudiar el fenómeno de uso de productos interactivos, con el objetivo de definir técnicas y metodologías que aseguren empíricamente que estos productos cumplen con los niveles de usabilidad requeridos; es decir, que puedan ser usados de forma efectiva, eficiente, segura y satisfactoria.

Bajo la filosofía del Diseño Centrado en el Usuario (DCU) se aglutinan gran cantidad de métodos y técnicas ideadas con este objetivo, y que podríamos clasificar en cuatro grupos principales: Indagación, Diseño, Prototipado y Evaluación. (Hassan et al.; 2004)

Mientras que son numerosas las diferentes técnicas existentes para indagar en las necesidades y objetivos de la audiencia potencial del producto, para validar y evaluar la usabilidad de decisiones de diseño, así como aquellas orientadas al prototipado de estas decisiones; resulta más difícil encontrar métodos y técnicas que faciliten y sostengan la misma toma de decisiones en la etapa de diseño.

Una de las ‘reglas de oro’ del DCU es la de evaluar cualquier decisión de diseño desde las primeras etapas del ciclo de desarrollo, con el objetivo de reducir costes, puesto que siempre será más económico reconducir un diseño que rediseñar por completo. En base a esta regla, podemos deducir la importancia económica de tomar decisiones de diseño previsiblemente acertadas, que en la posterior evaluación no se demuestren como erróneas o desafortunadas.

Una herramienta para facilitar la elección de soluciones a problemas concretos de diseño son los denominados ‘patrones de diseño’, originalmente propuestos por el arquitecto Christopher Alexander en el contexto del diseño y construcción urbanística. Partiendo de la definición original de Alexander, un patrón de diseño es una solución a un problema que se usa repetidamente en contextos similares con algunas variantes en la implementación.

La forma de obtener esta solución es a partir de la abstracción de ejemplos específicos de diseño. Para que una solución pueda ser considerada un patrón de diseño debe ser eficaz – que se haya demostrado resuelve satisfactoriamente el problema – y reutilizable – que pueda ser aplicada en diferentes casos -.

La primera importación de este modelo de diseño desde el campo de la Arquitectura para su aplicación en el diseño de productos informáticos se produce en el área de la Ingeniería del Software y programación orientada a objetos a principios de los 90 (Hernández Hernández et al.; 2003) (Lea; 1993) , y se conoce como Patrones de Diseño de Software.

Es posteriormente cuando este mismo modelo empieza a ser estudiado y aplicado en el área del Diseño de Interfaces de Usuario e Interacción Persona-Ordenador. Mientras que los Patrones de Diseño de Software estaban destinados a solucionar problemas de funcionalidad; los Patrones de Diseño de Interacción tienen el objetivo de resolver problemas de usabilidad. Como se puede comprobar en el trabajo de Muñoz Arteaga et al. (2004) , estos dos modelos de diseño basados en patrones se complementan y pueden ser usados conjuntamente con resultados exitosos en el diseño de aplicaciones interactivas.

Aunque ambos tipos de patrones están destinados a solucionar problemas claramente diferentes, la usabilidad y funcionalidad no pueden ser tratadas como aspectos independientes de una aplicación interactiva. La usabilidad no sólo depende del diseño del interfaz sino, como indican Folmer y Bosch (2004), también del diseño a nivel de arquitectura de la aplicación. Esto quiere decir que una decisión de diseño a nivel de funcionalidad afectará a la usabilidad, y viceversa.

En este sentido Moreno y Sánchez-Segura (2003) proponen un tercer tipo de patrón, los Patrones Arquitectónicos de Usabilidad, destinados precisamente a resolver el problema de incorporación de un patrón de usabilidad concreto en el diseño de un software y sus efectos en los componentes de la arquitectura del sistema. Por otro lado Folmer, Gurp y Bosch (2003) definen una serie de “Patrones de Usabilidad Arquitectónicamente Sensibles” como patrones de diseño propios del nivel estructural de una aplicación software que previsiblemente mejorarán la usabilidad final de dicha aplicación.

Un concepto estrechamente vinculado al de patrones de diseño es el de los anti-patrones. Éstos parten de la premisa de que tomar una decisión de diseño es más fácil descartando aquellas soluciones que con anterioridad y en contextos similares se han demostrado como erróneas o sin utilidad. A pesar de que estos anti-patrones pueden servir para prevenir una mala decisión de diseño, como indican Welie, Veer y Eliëns (2000) no significan una ayuda directa para la resolución de problemas, por lo que resultan de menos utilidad que los patrones.

Estructura y características

Los Patrones de Diseño pueden estructurarse de diversa forma, aunque es posible identificar a través de la literatura sobre el tema una serie de los elementos o partes en los que comúnmente se componen (Moreno, Sánchez-Segura; 2003) (Hernández Hernández et al.; 1998) (Malone, Leacock, Wheeler; 2005)(Varela Tabuyo; 2005).

• Título o nombre del patrón : Debería ser claro, conciso, significativo y sugestivo respecto al problema abordado.
• Problema : Descripción del problema de interacción abordado.
• Principio/s de usabilidad : Determina sobre qué principios o criterios de usabilidad se sustenta el patrón.
• Contexto : Descripción del contexto o situación de interacción para la que puede ser aplicado el patrón.
• Representación visual : Se trata de un elemento opcional, en el que se representa visualmente la esencia o resumen del patrón (diagramas, esquemas, fotografía,…).
• Solución : Este es el elemento principal de un patrón, donde se describe de forma clara y precisa qué decisión de diseño será la más adecuada para solucionar el problema de interacción.
• Consecuencias : Impacto de la decisión de diseño sobre otros elementos y atributos del producto.
• Beneficios : Se argumentan las ventajas y beneficios en términos de usabilidad que implica la aplicación del patrón.
• Ejemplo : Se muestra un ejemplo de aplicación con éxito del patrón, normalmente de forma gráfica.
• Patrones relacionados : Relación del patrón con otros patrones similares, como aquellos destinados a solucionar el mismo problema en contextos diferentes.
• Bibliografía : Fuentes de información sobre los que se fundamenta el patrón o a través de las cuales poder ampliar información.
• Comentarios : Aquellos patrones publicados en medios de comunicación interactiva (como la web) pueden admitir que por ejemplo otros desarrolladores comenten y aporten información, enriqueciendo el patrón.

Los patrones además pueden contener elementos con metadatos acerca del patrón:

• Autor : Persona que propone el patrón.
• Palabras clave : Describen los conceptos principales tratados en el patrón.
• Copyright : Mención de reserva de derechos de autor.

Diferencia entre patrones de diseño y las guías de usabilidad

Una de las diferencias es referente a su enfoque o perspectiva. Mientras que las directrices de usabilidad describen reglas a seguir, los patrones además especifican el resultado deseado (Spool; 2003). Es decir, una directriz de usabilidad representa una regla que si se cumple el diseño “estará bien”, y si no “estará mal”, mientras que un patrón especifica qué hacer para conseguir un objetivo concreto en un contexto determinado. Como indica Henninger (2001) los patrones de interacción están destinados a la solución de problemas concretos, frente al enfoque más generalista de las directrices. El enfoque de los patrones es más constructivo, en vez de especificar reglas del tipo “qué se debe hacer” o “qué no se debe hacer”, describen “qué se debe hacer para conseguir determinado objetivo” (Welie, Veer, Eliëns; 2000).

Otra diferencia es en cuanto a la representación de la información. Si bien mucha de la información de los patrones es replicada de la existente en guías y directrices de usabilidad, en los patrones además se describe el contexto en el que el patrón es aplicable, y ejemplos concretos de aplicación (Henninger; 2000)(Henninger, Oltman; 2002). Es decir, especifican cuándo, cómo y por qué la solución puede aplicarse (Welie, Veer y Eliëns; 2000).

Griffiths y Pemberton (2000) señalan otra serie de diferencias en forma de ventajas frente a las directrices, como es el carácter cooperativo de su elaboración y evolución.

Colecciones y lenguajes de patrones

Los patrones de diseño ofrecen soluciones a problemas específicos de interacción, por lo que de forma aislada resultan de escaso valor para el trabajo diario de un desarrollador. Por tanto, lo normal es encontrar estos patrones agrupados en colecciones de patrones – conjuntos de patrones de ámbito similar, clasificados temáticamente -.

Podemos hablar de un lenguaje de patrones cuando los patrones que forman la colección se encuentran conectados, cuando poseen relaciones asociativas entre sí (Welie, Veer; 2003) que además posibiliten el uso de combinaciones de patrones para la solución de problemas complejos de diseño (Todd, Kemp, Philips; 2004). Estas relaciones se definen a través elementos como ‘Patrones relacionados’ que veíamos en Estructura y Características.

Respecto a las colecciones y lenguajes de patrones existe un problema grave de normalización. Para empezar, aunque tienen elementos estructurales más o menos comunes, estos no se encuentran estandarizados. Tampoco existe ningún lenguaje de etiquetado asociado con el que definir lenguajes de patrones, que facilitaría compartir patrones, interrelacionar colecciones, difundir y localizar patrones por el usuario. Para estos propósitos, una buena opción sería la elaboración de un lenguaje basado en XML (Montero et al.; 2003), para lo que ya se han hecho algunas propuestas, como la de Gaffar, Seffah, Poll (2005).

Si nos ceñimos a aquellas colecciones de patrones publicadas en la Web, además de la falta de normalización, el principal problema es la dispersión de las colecciones existentes, lo que hace bastante complicada la tarea de recuperar o localizar patrones. Una propuesta para solucionar estos problemas fue MOUDIL (Montreal Online Usability Patterns Digital Library), aunque el proyecto parece estar bastante abandonado.

Relación de Colecciones de Patrones

Título: Design for Quality
Administrador: Elkee Folmer
URL: http://www.designforquality.com/ (Inactivo)
Descripción: Relación de patrones de usabilidad arquitectónicamente sensibles para aplicaciones software, es decir, propios del nivel estructural de la aplicación.
Idioma: Inglés

Título: User Interface Design Patterns
Administrador: Sari A. Laakso
URL: http://www.cs.helsinki.fi/u/salaakso/patterns/
Descripción: Patrones de interacción para el diseño de interfaces gráficas de usuario (GUIs).
Idioma: Inglés

Título: Patterns in Interaction Design
Administrador: Martijn van Welie
URL: http://www.welie.com/
Descripción: El sitio web recoge patrones de interacción para el Diseño Web, Interfaces Gráficas de Usuario (GUIs), e Interfaces de Dispositivos Móviles.
Idioma: Inglés

Título: UI Patterns and Techniques
Administrador: Jenifer Tidwell
URL: http://time-tripper.com/uipatterns/
Descripción: Patrones para Diseño de Interfaz. Muy completa.
Idioma: Inglés

Bibliografía

Folmer, E.; Gurp, J.; Bosch, J. (2003). A framework for capturing the relationship between usability and software architecture. En: Software Process: Improvement and Practice, Vol. 8, n 2. pp. 67-87. April/June 2003.

Folmer, E.; Bosch, J. (2004). Architecting for usability: a survey. En: Journal of Systems and Software. Febrero 2004, v. 70, n. 1-2. pp. 61-78. Disponible en:
http://is.ls.fi.upm.es/status/results/survey.pdf [Consultado 16-08-2005]

Gaffar, A.; Seffah, A.; Poll, J.A. (2005). HCI pattern semantics in XML: a pragmatic approa. Proceedings of the 2005 workshop on Human and social factors of software engineering, pp.1-7.

Griffiths, R.N.; Pemberton, L. (2000). Don’t Write Guidelines ­ Write Patterns!. Disponible en:
http://www.it.bton.ac.uk/staff/lp22/guidelinesdraft.html

Hernández Hernández, MªE.; Álvarez Carrión, G.; Muñoz Arteaga, J.; (2003). Patrones de Interacción para el Diseño de Interfaces Web Usables. CIECE 2003, Zacatepec, Morelos, México, Abril 9, 2003.

Hassan, Y.; Martín Fernández, F.J.; Iazza, G. (2004). Diseño Web Centrado en el Usuario: Usabilidad y Arquitectura de la Información. «Hipertext.net», núm. 2, 2004. Disponible en: http://www.hipertext.net/web/pag206.htm

Henninger, S. (2000). A methodology and tools for applying context-specific usability guidelines to interface design. Interacting with Computers 12 (2000) pp. 225–243.

Henninger, S. (2001). Supporting Design through Usability Guidelines and Patterns. CHI2001 Workshop on Tools, Conceptual Frameworks, and Empirical Studies for Early Stages of Design, 10-13, April 2001.

Henninger, S.; Oltman, R. (2002). Tools Supporting the Delivery and Application of Usability Patterns. CHI 2002 Usability Patterns Workshop, April 2002, pp 18-20.

Hernández Hernández, MªE.; Álvarez Carrión, G.; Muñoz Arteaga, J.; (2003). Patrones de Interacción para el Diseño de Interfaces Web Usables. CIECE 2003, Zacatepec, Morelos, México, Abril 9, 2003.

Lea, D. (1993). Christopher Alexander: An Introduction for Object-Oriented Designers. Software Engineering Notes. Disponible en:
http://g.oswego.edu/dl/ca/ca/ca.html

Malone, E.; Leacock, M.; Wheeler, C. (2005). Implementing a Pattern Library in the Real World: A Yahoo! Case Study. Boxes and Arrows. 29 Abril, 2005. Disponible en:
http://www.boxesandarrows.com/view/implementing_a_pattern_library_in_the_real_world_a_yahoo_case_study

Montero, F. et al (2003). Improving e-Shops Environments by Using Usability Patterns. 2nd Workshop on Software and Usability Cross-Pollination: The Role of Usability Patterns, September 1-2, 2003, Zürich, Switzerland. Disponible en:
http://wwwswt.informatik.uni-rostock.de/deutsch/Interact/01MonteroLopez.pdf

Moreno, A.M.; Sánchez-Segura, M. (2003).Patrones de Usabilidad: Mejora de la Usabilidad del Software desde el momento de Arquitectónico. VIII Jornadas de Ingeniería del Software y Bases de Datos (JISBD’03). Alicante, Noviembre 2003.

Muñoz Arteaga, J.; González Calleros, J.M.; Aguilar Cisneros, J. (2004). Diseño de Aplicaciones Interactivas utilizando el Paradigma de Patrones. ENC 2004, Taller de Interacción Humano-Computadora, Colima (México).

Spool, J.M. (2003). Design Patterns: An Evolutionary Step to Managing Complex Sites. Disponible en:
http://www.uie.com/articles/design_patterns/

Todd, E.; Kemp, E.; Phillips, C. (2004). What makes a good user interface pattern language?. In: Proceedings of the fifth conference on Australasian user interface. Dunedin, New Zealand, 2004, pp. 91-100. Disponible en:
http://crpit.com/confpapers/CRPITV28Todd.pdf

Varela Tabuyo, R. (2005). Patrones de Diseño Web e Interacción. Galinus.com.

Welie, M.; Veer, G.C.; Eliëns, A. (2000). Patterns as Tools for User Interface Design. In: International Workshop on Tools for Working with Guidelines, pp. 313-324, 7-8 October 2000, Biarritz, France.

Welie, M.; Veer, G.C. (2003). Pattern Languages in Interaction Design: Structure and Organization. In: Proceedings of Interact ’03, 1-5 September, Zürich, Switserland, Eds: Rauterberg, Menozzi, Wesson, p527-534, ISBN 1-58603-363-8, IOS Press, Amsterdam, The Netherlands. Disponible en:
http://www.welie.com/papers/Welie-Interact2003.pdf