1 de 1

Patrones de Interaccin para el Diseo de Interfaces WEB usables

Universidad Autnoma de Tlaxcala (UAT) 1, Departamento de Ingeniera y Tecnologa, Km 2.5 Calzada Apizaquito s/n, Apizaco Tlaxcala, Mxico 90300 Instituto Nacional de Astrofsica ptica y Electrnica (INAOE) 2, Departamento de Ciencias Computacionales, Luis Enrique Erro No. 1, Sta. Mara Tonantzintla, Puebla Mxico, 72840. ma-elena@ingenieria.uatx.mx, galvarez@ingenieria.uatx.mx, jaime@inaoep.mx
Resumen La aceptacin final de una aplicacin de software por parte del usuario depende en gran manera de la percepcin que ste tenga del sistema y esta percepcin se logra mediante la interfaz del sistema. En la literatura correspondiente al diseo de interfaces de usuario se habla mucho de la importancia de disear interfaces usables, (fciles de aprender, de usar, robustas, flexibles etc.) sin embargo, la forma de incorporar esta caracterstica en los diseos es poco clara. Es este documento de propone el uso de los Patrones de Interaccin para el diseo de interfaces usables para el WEB, en virtud de que los patrones especifican claramente la forma de implementacin, el contexto en el que pueden ser aplicados e incluso las consecuencias de su uso, sin olvidar que los Patrones de Interaccin estn basados sobre principios de Usabilidad.

Ma. Elena Hernndez Hdz.1, Guillermo Alvarez Carrin1, Jaime Muoz Arteaga2

colecciones de Patrones de Interaccin para el WEB, en dichas colecciones captan la experiencia de programadores y diseadores expertos en el desarrollo de interfaces usables y condensan esta experiencia en una serie guas o recomendaciones, que puedan ser usadas por los desarrolladores novatos con el propsito de que en poco tiempo adquieran la habilidad de disear interfaces que incidan en la satisfaccin de los usuarios. Problemtica Es muy frecuente encontrar interfaces para el WEB en las que no se considero que el usuario no es en la mayora de los casos un experto en computacin, sino que la aplicacin puede ser usada por un publico diverso, que puede incluir personas con caractersticas especiales, al parecer es fcil olvidar que es el usuario quien determina el xito o fracaso de una aplicacin de software. Incluir solamente caractersticas estticas 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 fciles de usar, fciles de navegar, agradables al usuario, que contengan elementos bien distribuidos, de tal forma que no se haga una saturacin de la pgina y que la Interfaz realmente contenga la informacin que el usuario espera de ella adems 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 especficos con efectividad, eficiencia y satisfaccin en un contexto de uso particular [3]. Una interfaz de usuario usable es fcil de aprender para los nuevos usuarios quienes sin complicaciones pueden convertirse en expertos, es flexible porque el usuario y el sistema pueden intercambiar informacin de varias formas, es slido 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 guas, pautas, estndares y reglas ergonmicas para disear interfaces usables, generalmente no es fcil aplicarlas en virtud de que no se precisa el escenario bajo el cual puedan aplicarse, no se

Introduccin Un patrn partiendo de la definicin de Christopher Alexander[4], es una solucin a un problema que se usa repetidamente en contextos similares con algunas variantes en la implementacin. El primer intento por aplicar este concepto en el diseo 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 inters por aplicar este paradigma a la Ingeniera de Software se manifiesta a principios de los 90s, donde los personajes ms 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 Diseo: 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 Interaccin[8] siendo estos ms cercanos a las ideas del Arquitecto Christopher Alexander, quien propuso el paradigma de patrones teniendo en mente una cuestin de esttica y confort en la construccin de edificios y de considerar al usuario del edificio como parte del equipo de diseo del mismo, en virtud de que es l quien conoce mejor que nadie los requerimientos. En aos ms recientes investigadores como el Martin Van Wellie, Jennifer Tidwell, Jaime Muoz han desarrollado

2 de 2 conocen las consecuencias de su uso y no se tienen ejemplos especficos de cmo emplearlas a diferencia de los Patrones de Interaccin en donde s se especifica claramente como deben aplicarse, bajo que contexto y que implicaciones tiene su uso. Un patrn tiene un formato bien definido [3], atributos frecuentes son: nombre del patrn, problema que resuelve, solucin propuesta, contexto, ejemplos etc. Los patrones estn 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 coleccin de Van Wellie es en terminos generales la siguiente [8]: Nombre : El ttulo del patrn, el cual debe ser representativo, claro y conciso del concepto a comunicar. Autor: Quien propone al patrn. Problema : Una descripcin 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 patrn. Contexto: Una descripcin de la situacin en la cual puede usarse el patrn, cuales son las caractersticas del contexto, en trminos de las tareas, del usuario. Fuerza: Aspectos del contexto que necesitan ser optimizados. Solucin: Descripcin clara de la solucin propuesta (otros patrones pueden ser necesarios para completar la solucin completa del problema) Consecuencias: Describe los resultados de aplicar el patrn. Ejemplo: Un ejemplo ilustrativo de una solucin exitosa. Para mayor claridad del concepto de patrn de interaccin a continuacin 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 mltiples sintaxis. Solucin: Permitir que el usuario elija la fecha de un calendario como en el mundo real. Ejemplo: para realizar la bsqueda de algn archivo creado a partir de una fecha el calendario le ayudar a llenar las casillas de la fecha con el formato de da/mes/ao (dd/mm/aa).

Nombre: Representacin visual jerrquica del estado del sistema. Autor: Jaime Muoz Problema: Cmo mostrar la informacin del estado que tiene una estructura arborescente? Principio: Reducir la carga cognitiva y representacin coherente. Contexto: Una gran cantidad de informacin relacionados jerrquicamente. El usuario puede facilitarse el acceso de la informacin desplazndose a travs forma de una jerarqua. Fuerza: Una representacin jerrquica es fcil de entender y de manipular. El usuario manipula y visualiza la relacin de los elementos. Solucin: Mostrar los datos en forma jerrquica donde exista un nodo de base y las nodos terminales representan datos elementales. Consecuencias: La representacin jerrquica motiva al usuario a descubrir informacin que le puede ser til para alcanzar su objetivo. Dicha representacin tambin le permite tener una imagen mental correcta del acceso de la informacin que ofrece el sistema a un estado dado. Ejemplo: Un sistema de gestin de archivos grfico muestra la relacin de los documentos dentro de flderes los cuales pueden abrirse (aquellos con signo +) o cerrarse (aquellos con signo -)

El siguiente ejemplo es un patrn de Jennifer Tidwell [10] con un formato mucho ms simple Cundo utilizarlo: en el diseo de pginas con varios niveles

3 de 3 Por qu?: si se cuenta con varios niveles es posible que el usuario se pierda al realizar la navegacin, pero si se mantiene el diseo de la pgina en todos los niveles, y adems cada nivel tiene algo significativo, el usuario podr distinguir en que nivel est y como puede regresar o seguir navegando. Cmo?: se pueden emplear colores para resaltar los niveles, sin perder el diseo original, as como tambin el tipo de letra. Ejemplo: Conclusiones Los Patrones de Interaccin son soluciones efectivas a problemas repetidos, promueven la reutilizacin de los buenos diseos, acortan el tiempo en que un diseador 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 taxonoma de patrones aceptada universalmente, y la proliferacin de los patrones puede llegar a ser inmanejable en tanto no se normatice su produccin. Un autor ampliamente reconocido por su aportacin a la disciplina de Patrones de Interaccin es el holands Martijn Van Wellie. Para automatizar el diseo de Interfaces Usables se requiere de herramientas CASE que soporten este enfoque y as disminuir la duracin del proceso y mejorar resultados. El material aqu presentado esta siendo utilizado como plataforma para proyectos de investigacin y desarrollo de aplicaciones basadas en Patrones de Interaccin en las instituciones de adscripcin de los autores. Bibliografa
[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]Muoz J., Hernndez M. Patrones de Interaccin: Una Solucin para el Diseo de la Retroalimentacin Visual de Sistemas Interactivos. Instituto Nacional de Astrofsica ptica y Electrnica (INAOE), Universidad Autnoma 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 Diseo de Interaccin Universidad de Amsterdam Facultad de informtica, 2001. http://www.welie.com [9] Richard N. Griffiths y Lyn Pemberton Ensear usabilidad de diseo travs de lenguajes de patrones , Universidad de Brighton. Escuela de Computacin. Centro de Ingeniera 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 HumanComputer Interface Design.

La coleccin de Martjin van Wellie se clasifica en 6 niveles. El nivel Interacciones Bsicas contiene los patrones que representan las acciones bsicas que realiza un usuario al navegar en una pgina. El nivel de Bsqueda facilita la busqueda al usuario dandole la mayor facilidad y efectividad de los resultados obtenidos. El nivel de Elementos de la pgina esta orientado a las pginas comerciales que son visitadas por usuarios de diferentes culturas, facilitandoles la navegacin proporcionandoles caractersticas particulares. El nivel de Patrones de comercio electronico brinda al usuario privacidad en el acceso a sus cuentas. El nivel de Navegacin provee patrones con los elementos bsicos para proporcionar una navegacin fcil y accesible. Por otra parte, tal como explicamos en [6] la coleccin de patrones de Jaime Muoz puede clasificarse en 3 niveles de acuerdo al nivel de interaccin, Lxico, Sintctico y Semntico. A nivel Lxico, los patrones consisten en dar retroalimentacin al usuario sobre el resultado de sus acciones. La categora de patrones de interaccin a nivel Sintctico agrupa patrones que informan de forma visual sobre el comportamiento del sistema. La categora de patrones de interaccin a nivel Semntico agrupa los patrones que permiten la visualizacin el estado del sistema.