5/9/2018 patrones de diseño web - slidepdf.com

http://slidepdf.com/reader/full/patrones-de-diseno-web 1/3

 

1 de 1

Patrones de Interacción para el

Diseño de Interfaces WEB usables 

Ma. Elena Hernández Hdz.1, Guillermo Alvarez Carrión1, Jaime Muñoz Arteaga2 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 90300Instituto 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 deaprender, 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 variantesen la implementación. El primer intento por aplicar esteconcepto 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 deinterfaz: 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ásdestacados son Erick Gamma, Richard Helm, RalphJohnson y John Vlissides; quienes se hacen llamar “LaPandilla de los Cuatro” (GangOfFour) en el 94 publicaronsu famoso libro “Patrones de Diseño: Elementos deSoftware Reusable Orientado a Objetos” (Design Patterns:Elements of reusable Object Oriented Software). Sinembargo no fue hasta finales de los noventa en queirrumpen en escena los Patrones de Interacción[8] siendoestos más cercanos a las ideas del Arquitecto Christopher Alexander, quien propuso el paradigma de patronesteniendo en mente una cuestión de estética y confort en laconstrucción de edificios y de considerar al usuario deledificio como parte del equipo de diseño del mismo, envirtud de que es él quien conoce mejor que nadie losrequerimientos.

En años más recientes investigadores como el Martin VanWellie, Jennifer Tidwell, Jaime Muñoz han desarrollado

colecciones de Patrones de Interacción para el WEB, endichas colecciones captan la experiencia de programadoresy diseñadores expertos en el desarrollo de interfacesusables y condensan esta experiencia en una serie guías orecomendaciones, que puedan ser usadas por losdesarrolladores novatos con el propósito de que en pocotiempo adquieran la habilidad de diseñar interfaces queincidan en la satisfacción de los usuarios.

Problemática

Es muy frecuente encontrar interfaces para el WEB en lasque no se considero que el usuario no es en la mayoría delos casos un experto en computación, sino que laaplicació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 determinael éxito o fracaso de una aplicación de software. Incluir solamente características estéticas en una interfaz sinconsiderar seriamente la usabilidad de la misma provoca

un fuerte desaliento en el usuario. Lo deseable es que lasinterfaces de aplicaciones para el WEB sean fáciles deusar, fáciles de navegar, agradables al usuario, quecontengan elementos bien distribuidos, de tal forma que nose haga una saturación de la página y que la Interfazrealmente contenga la información que el usuario esperade ella además de que por supuesto, debe ser agradablevisualmente.

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]. Unainterfaz de usuario usable es fácil de aprender para losnuevos usuarios quienes sin complicaciones puedenconvertirse en expertos, es flexible porque el usuario y elsistema 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 yresponder en un tiempo razonable.

Si bien existen una gran cantidad guías, pautas, estándaresy 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

5/9/2018 patrones de diseño web - slidepdf.com

http://slidepdf.com/reader/full/patrones-de-diseno-web 2/3

 

2 de 2

conocen las consecuencias de su uso y no se tienenejemplos específicos de cómo emplearlas a diferencia delos Patrones de Interacción en donde sí se especifica

claramente como deben aplicarse, bajo que contexto y queimplicaciones tiene su uso.

Un patrón tiene un formato bien definido [3], atributosfrecuentes son: nombre del patrón, problema que resuelve,solución propuesta, contexto, ejemplos etc. Los patronesestán estrechamente relacionados unos con otros y para unmejor aprovechamiento de estos no deben aplicarse demanera aislada.

La estructura de los patrones de la colección de VanWellie 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 puntode vista del usuario.Principio de usabilidad: Describe los principios ocriterios de usabilidad en los cuales se basa el patrón.Contexto: Una descripción de la situación en la cual puedeusarse 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óna continuación se muestran algunos casos particulares

Nombre: Formatos de Datos de fechasAutor: Martijn Van WellieProblema: El usuario desea introducir datos defechas y no desea preocuparse por la sintaxis deldato.

Principio: Guiar al usuario y prevenir erroresContexto: Todos los sistemas que requieran queel usuario introduzca fechasFuerzas: Los datos de fechas tienen múltiplessintaxis.Solución: Permitir que el usuario elija la fecha deun calendario como en el mundo real.Ejemplo: para realizar la búsqueda de algúnarchivo creado a partir de una fecha el calendariole ayudará a llenar las casillas de la fecha con elformato de día/mes/año (dd/mm/aa).

Nombre: Representación visual jerárquica delestado del sistema.Autor: Jaime MuñozProblema: ¿Cómo mostrar la información delestado que tiene una estructura arborescente?Principio: Reducir la carga cognitiva y

representación coherente.Contexto: Una gran cantidad de informaciónrelacionados jerárquicamente. El usuario puedefacilitarse el acceso de la informacióndesplazándose a través forma de una jerarquía.Fuerza: Una representación jerárquica es fácil deentender y de manipular.El usuario manipula y visualiza la relación de loselementos.Solución: Mostrar los datos en forma jerárquicadonde exista un nodo de base y las nodosterminales representan datos elementales.Consecuencias: La representación jerárquicamotiva al usuario a descubrir información que le

  puede ser útil para alcanzar su objetivo. Dicharepresentación también le permite tener unaimagen mental correcta del acceso de lainformación que ofrece el sistema a un estadodado.Ejemplo: Un sistema de gestión de archivosgráfico muestra la relación de los documentosdentro de fólderes los cuales pueden abrirse(aquellos con signo +) o cerrarse (aquellos consigno -)

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 convarios niveles

5/9/2018 patrones de diseño web - slidepdf.com

http://slidepdf.com/reader/full/patrones-de-diseno-web 3/3

 

3 de 3

¿Por qué?: si se cuenta con varios niveles es  posible que el usuario se pierda al realizar lanavegación, pero si se mantiene el diseño de la

 página en todos los niveles, y además cada niveltiene 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í comotambién el tipo de letra.Ejemplo:

La colección de Martjin van Wellie se clasifica en6 niveles. El nivel Interacciones Básicas contiene los

 patrones que representan las acciones básicas que realizaun usuario al navegar en una página. El nivel de Búsqueda facilita la busqueda al usuario dandole la mayor facilidad yefectividad de los resultados obtenidos. El nivel deElementos de la página esta orientado a las páginascomerciales que son visitadas por usuarios de diferentesculturas, facilitandoles la navegación proporcionandolescaracterísticas particulares. El nivel de Patrones de

comercio electronico brinda al usuario privacidad en elacceso a sus cuentas. El nivel de Navegación provee

 patrones con los elementos básicos para proporcionar unanavegació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 nivelesde acuerdo al nivel de interacción, Léxico, Sintáctico ySemántico. A nivel Léxico, los patrones consisten en dar retroalimentación al usuario sobre el resultado de susacciones. La categoría de patrones de interacción a nivelSintáctico agrupa patrones que informan de forma visualsobre 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 delsistema.

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 excelentealternativa para desarrollar interfaces usables para elWEB, en virtud de que se definen a partir de los criteriosde usabilidad. Sin embargo, una dificultad presente almomento, 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 senormatice su producción. Un autor ampliamentereconocido por su aportación a la disciplina de Patrones deInteracción es el holandés Martijn Van Wellie. Paraautomatizar el diseño de Interfaces Usables se requiere deherramientas CASE que soporten este enfoque y asídisminuir la duración del proceso y mejorar resultados. Elmaterial aquí presentado esta siendo utilizado como

 plataforma para proyectos de investigación y desarrollo deaplicaciones basadas en Patrones de Interacción en lasinstituciones 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 parael 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, ma-elena@ingenieria.uatx.mx[7]Rossi G., Schwabe D. “User Interface patterns for hypermediaapplications”, Proceedings of the Working Conference on AdvancedVisual Interface, pp. 136-142 Series Proceeding Article(2001) ,ISBN58113 252 2[8] Martijn van Welie. “Patrones de Diseño de Interacción” Universidadde AmsterdamFacultad de informática, 2001.http://www.welie.com [9] Richard N. Griffiths y Lyn Pemberton “Enseñar usabilidad de diseñotravé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.