Patrones de Interacción para el Diseño de Interfaces ... - Willy .Net

Patrones de Interacción para el
Diseño de Interfaces WEB usables
Ma. Elena Hernández Hdz. 1 , Guillermo Alvarez Carrión 1 , Jaime Muñoz Arteaga 2
Universidad Autónoma de Tlaxcala (UAT) 1 , Departamento de Ingeniería y Tecnología,
Km 2.5 Calzada Apizaquito s/n, Apizaco Tlaxcala, México 90300
Instituto Nacional de Astrofísica Óptica y Electrónica (INAOE) 2 , Departamento de Ciencias Computacionales, Luis Enrique
Erro No. 1, Sta. María Tonantzintla, Puebla México, 72840.
ma-elena@ingenieria.uatx.mx, galvarez@ingenieria.uatx.mx, jaime@inaoep.mx
Resumen
La aceptación final de una aplicación de software por parte
del usuario depende en gran manera de la percepción que
éste tenga del sistema y esta percepción se logra mediante la
interfaz del sistema. En la literatura correspondiente al
diseño de interfaces de usuario se habla mucho de la
importancia de diseñar interfaces usables, (fáciles de
aprender, de usar, robustas, flexibles etc.) sin embargo, la
forma de incorporar esta característica en los diseños es poco
clara. Es este documento de propone el uso de los Patrones
de Interacción para el diseño de interfaces usables para el
WEB, en virtud de que los patrones especifican claramente la
forma de implementación, el contexto en el que pueden ser
aplicados e incluso las consecuencias de su uso, sin olvidar
que los Patrones de Interacción están basados sobre
principios de Usabilidad.
Introducción
Un patrón partiendo de la definición de Christopher
Alexander[4], es una solución a un problema que se usa
repetidamente en contextos similares con algunas variantes
en la implementación. El primer intento por aplicar este
concepto en el diseño de las interfaces de usuario se dio
por Ward Cummingham y Kent Beck quienes adaptaron la
propuesta de C. Alexander y crearon cinco patrones de
interfaz: Window per task, Few panes, Standard panes,
Nouns and verbs, y Short Menu. El interés por aplicar este
paradigma a la Ingeniería de Software se manifiesta a
principios de los 90’s, donde los personajes más
destacados son Erick Gamma, Richard Helm, Ralph
Johnson y John Vlissides; quienes se hacen llamar “La
Pandilla de los Cuatro” (GangOfFour) en el 94 publicaron
su famoso libro “Patrones de Diseño: Elementos de
Software Reusable Orientado a Objetos” (Design Patterns:
Elements of reusable Object Oriented Software). Sin
embargo no fue hasta finales de los noventa en que
irrumpen en escena los Patrones de Interacción[8] siendo
estos más cercanos a las ideas del Arquitecto Christopher
Alexander, quien propuso el paradigma de patrones
teniendo en mente una cuestión de estética y confort en la
construcción de edificios y de considerar al usuario del
edificio como parte del equipo de diseño del mismo, en
virtud de que es él quien conoce mejor que nadie los
requerimientos.
En años más recientes investigadores como el Martin Van
Wellie, Jennifer Tidwell, Jaime Muñoz han desarrollado
1 de 1
colecciones de Patrones de Interacción para el WEB, en
dichas colecciones captan la experiencia de programadores
y diseñadores expertos en el desarrollo de interfaces
usables y condensan esta experiencia en una serie guías o
recomendaciones, que puedan ser usadas por los
desarrolladores novatos con el propósito de que en poco
tiempo adquieran la habilidad de diseñar interfaces que
incidan en la satisfacción de los usuarios.
Problemática
Es muy frecuente encontrar interfaces para el WEB en las
que no se considero que el usuario no es en la mayoría de
los casos un experto en computación, sino que la
aplicación puede ser usada por un publico diverso, que
puede incluir personas con características especiales, al
parecer es fácil olvidar que es el usuario quien determina
el éxito o fracaso de una aplicación de software. Incluir
solamente características estéticas en una interfaz sin
considerar seriamente la usabilidad de la misma provoca
un fuerte desaliento en el usuario. Lo deseable es que las
interfaces de aplicaciones para el WEB sean fáciles de
usar, fáciles de navegar, agradables al usuario, que
contengan elementos bien distribuidos, de tal forma que no
se haga una saturación de la página y que la Interfaz
realmente contenga la información que el usuario espera
de ella además de que por supuesto, debe ser agradable
visualmente.
Propuesta
La usabilidad es “La medida en la que un producto se
puede usar por determinados usuarios para conseguir
objetivos específicos con efectividad, eficiencia y
satisfacción en un contexto de uso particular” [3]. Una
interfaz de usuario usable es fácil de aprender para los
nuevos usuarios quienes sin complicaciones pueden
convertirse en expertos, es flexible porque el usuario y el
sistema pueden intercambiar información de varias formas,
es sólido porque es posible utilizar el sistema sin
problemas ya que puede recuperarse de los errores y
responder en un tiempo razonable.
Si bien existen una gran cantidad guías, pautas, estándares
y reglas ergonómicas para diseñar interfaces usables,
generalmente no es fácil aplicarlas en virtud de que no se
precisa el escenario bajo el cual puedan aplicarse, no se

conocen las consecuencias de su uso y no se tienen
ejemplos específicos de cómo emplearlas a diferencia de
los Patrones de Interacción en donde sí se especifica
claramente como deben aplicarse, bajo que contexto y que
implicaciones tiene su uso.
Un patrón tiene un formato bien definido [3], atributos
frecuentes son: nombre del patrón, problema que resuelve,
solución propuesta, contexto, ejemplos etc. Los patrones
están estrechamente relacionados unos con otros y para un
mejor aprovechamiento de estos no deben aplicarse de
manera aislada.
La estructura de los patrones de la colección de Van
Wellie es en terminos generales la siguiente [8]:
Nombre : El título del patrón, el cual debe ser
representativo, claro y conciso del concepto a comunicar.
Autor: Quien propone al patrón.
Problema : Una descripción del problema desde el punto
de vista del usuario.
Principio de usabilidad: Describe los principios o
criterios de usabilidad en los cuales se basa el patrón.
Contexto: Una descripción de la situación en la cual puede
usarse el patrón, cuales son las características del contexto,
en términos de las tareas, del usuario.
Fuerza: Aspectos del contexto que necesitan ser
optimizados.
Solución: Descripción clara de la solución propuesta
(otros patrones pueden ser necesarios para completar la
solución completa del problema)
Consecuencias: Describe los resultados de aplicar el
patrón.
Ejemplo: Un ejemplo ilustrativo de una solución exitosa.
Para mayor claridad del concepto de patrón de interacción
a continuación se muestran algunos casos particulares
Nombre: Formatos de Datos de fechas
Autor: Martijn Van Wellie
Problema: El usuario desea introducir datos de
fechas y no desea preocuparse por la sintaxis del
dato.
Principio: Guiar al usuario y prevenir errores
Contexto: Todos los sistemas que requieran que
el usuario introduzca fechas
Fuerzas: Los datos de fechas tienen múltiples
sintaxis.
Solución: Permitir que el usuario elija la fecha de
un calendario como en el mundo real.
Ejemplo: para realizar la búsqueda de algún
archivo creado a partir de una fecha el calendario
le ayudará a llenar las casillas de la fecha con el
formato de día/mes/año (dd/mm/aa).
2 de 2
Nombre: Representación visual jerárquica del
estado del sistema.
Autor: Jaime Muñoz
Problema: ¿Cómo mostrar la información del
estado que tiene una estructura arborescente?
Principio: Reducir la carga cognitiva y
representación coherente.
Contexto: Una gran cantidad de información
relacionados jerárquicamente. El usuario puede
facilitarse el acceso de la información
desplazándose a través forma de una jerarquía.
Fuerza: Una representación jerárquica es fácil de
entender y de manipular.
El usuario manipula y visualiza la relación de los
elementos.
Solución: Mostrar los datos en forma jerárquica
donde exista un nodo de base y las nodos
terminales representan datos elementales.
Consecuencias: La representación jerárquica
motiva al usuario a descubrir información que le
puede ser útil para alcanzar su objetivo. Dicha
representación también le permite tener una
imagen mental correcta del acceso de la
información que ofrece el sistema a un estado
dado.
Ejemplo: Un sistema de gestión de archivos
gráfico muestra la relación de los documentos
dentro de fólderes los cuales pueden abrirse
(aquellos con signo +) o cerrarse (aquellos con
signo -)
El siguiente ejemplo es un patrón de Jennifer Tidwell [10]
con un formato mucho más simple
Cuándo utilizarlo: en el diseño de páginas con
varios niveles

¿Por qué?: si se cuenta con varios niveles es
posible que el usuario se pierda al realizar la
navegación, pero si se mantiene el diseño de la
página en todos los niveles, y además cada nivel
tiene algo significativo, el usuario podrá
distinguir en que nivel está y como puede regresar
o seguir navegando.
¿Cómo?: se pueden emplear colores para resaltar
los niveles, sin perder el diseño original, así como
también el tipo de letra.
Ejemplo:
La colección de Martjin van Wellie se clasifica en
6 niveles. El nivel Interacciones Básicas contiene los
patrones que representan las acciones básicas que realiza
un usuario al navegar en una página. El nivel de Búsqueda
facilita la busqueda al usuario dandole la mayor facilidad y
efectividad de los resultados obtenidos. El nivel de
Elementos de la página esta orientado a las páginas
comerciales que son visitadas por usuarios de diferentes
culturas, facilitandoles la navegación proporcionandoles
características particulares. El nivel de Patrones de
comercio electronico brinda al usuario privacidad en el
acceso a sus cuentas. El nivel de Navegación provee
patrones con los elementos básicos para proporcionar una
navegación fácil y accesible.
Por otra parte, tal como explicamos en [6] la colección de
patrones de Jaime Muñoz puede clasificarse en 3 niveles
de acuerdo al nivel de interacción, Léxico, Sintáctico y
Semántico. A nivel Léxico, los patrones consisten en dar
retroalimentación al usuario sobre el resultado de sus
acciones. La categoría de patrones de interacción a nivel
Sintáctico agrupa patrones que informan de forma visual
sobre el comportamiento del sistema. La categoría de
patrones de interacción a nivel Semántico agrupa los
patrones que permiten la visualización el estado del
sistema.
3 de 3
Conclusiones
Los Patrones de Interacción son soluciones efectivas a
problemas repetidos, promueven la reutilización de
los buenos diseños, acortan el tiempo en que un diseñador
novato adquiere experiencia para, son una excelente
alternativa para desarrollar interfaces usables para el
WEB, en virtud de que se definen a partir de los criterios
de usabilidad. Sin embargo, una dificultad presente al
momento, es que no se cuenta con una taxonomía de
patrones aceptada universalmente, y la proliferación de los
patrones puede llegar a ser inmanejable en tanto no se
normatice su producción. Un autor ampliamente
reconocido por su aportación a la disciplina de Patrones de
Interacción es el holandés Martijn Van Wellie. Para
automatizar el diseño de Interfaces Usables se requiere de
herramientas CASE que soporten este enfoque y así
disminuir la duración del proceso y mejorar resultados. El
material aquí presentado esta siendo utilizado como
plataforma para proyectos de investigación y desarrollo de
aplicaciones basadas en Patrones de Interacción en las
instituciones de adscripción de los autores.
Bibliografía
[1] Bayle, E., "Putting it All Together: Towards a Pattern Language for
Interaction Design," SIGCHI Bulletin, Vol. 30, No. 1, , pp. pp.17-24.
[2] Borchers, J., . A Pattern Approach to Interaction Design. Wiley 2001.
[3] Dix A, Finlay J., Abowd G., Beale R. Human – Computer Interaction,
2º Ed. Prentice Hall, (1997).
[4]Gamma et Al. Design Patterns,.USA: Addison Wesley, (1995)
[5]Gould J. “How to Design Usable Systems (Excerpt)”, IBM Research
Center Howthorne Yorktown Heights, New York 10598, North-Holland:
Elsevier, (1988) pp 757-789.
[6]Muñoz J., Hernández M. “Patrones de Interacción: Una Solución para
el Diseño de la Retroalimentación Visual de Sistemas Interactivos”.
Instituto Nacional de Astrofísica Óptica y Electrónica (INAOE),
Universidad Autónoma de Tlaxcala jaime@inaoep.mx, maelena@ingenieria.uatx.mx
[7]Rossi G., Schwabe D. “User Interface patterns for hypermedia
applications”, Proceedings of the Working Conference on Advanced
Visual Interface, pp. 136-142 Series Proceeding Article(2001) ,ISBN
58113 252 2
[8] Martijn van Welie. “Patrones de Diseño de Interacción” Universidad
de Amsterdam
Facultad de informática, 2001.
http://www.welie.com
[9] Richard N. Griffiths y Lyn Pemberton “Enseñar usabilidad de diseño
través de lenguajes de patrones” , Universidad de Brighton. Escuela de
Computación. Centro de Ingeniería de Software y Sistemas (ISYS), 2001.
http://www.it.bton.ac.uk/staff/1p22/CHIpaper.html
[10] Tidwell, J., Common Ground: A Pattern Language for Human-
Computer Interface Design.