INTERGRAM, una herramienta para el desarrollo y estudio de interfaces de usuario

Begoña Losada
b.losada@ehu.es

Resumen En toda aplicación interactiva, entre ellas los sitios Web, es deseable que el usuario realice las acciones previstas por el diseñador. Un modelo formal de estas necesidades utilizando gramáticas y la recogida en tiempo real de datos mediante aplicaciones de captación de la interacción permitirán la obtención de información sobre las actuaciones de los usuarios. Esto es: objetivos alcanzados y de qué manera, objetivos prioritarios alcanzados y de qué manera, el estudio de la actuación en diferentes grupos de usuarios, la detección de las acciones erróneas, etc. Esto es un punto crucial para una adaptación correcta de la aplicación al contexto en el que se sitúa. Presentamos INTERGRAM una aplicación para diseñadores que contiene herramientas para el diseño, prototipado, elaboración de logs y evaluación posterior mediante técnicas de ingeniería de la interfaz.

Palabras clave: usabilidad, medidas de calidad, ingeniería de la interfaz, gramática

1 Introducción
El proceso de desarrollo de aplicaciones Web se ha popularizado enormemente con herramientas llamativas y sencillas de uso. La mayoría de las estrategias de procesos de desarrollo en la Web son ad-hoc [Olsina, 1999]. El proceso típico consiste en utilizar una herramienta de realización rápida que permite construir el producto directamente desde la fase inicial pero en el que se tiene un riesgo grande de perder calidad y desviar los objetivos del diseñador, el cliente y los usuarios finales. Difícilmente en estos casos es posible realizar un mantenimiento y reutilizar los productos. La calidad de un producto Web se basa en la utilización de técnicas de Ingeniería de Software específicas [Buckingham et al., 1994] [Ferre et al, 2004] [Lorés et al., 2003] [Losada et al, 1997] [Nielsen 1989, 1990] [Preece et al, 1994]. Tal y como indica Olsina en su tesis [Olsina, 1999], la utilización sistemática de métodos, modelos y técnicas de Ingeniería de Software para la evaluación, control y mejora de la calidad de los productos Web debería ser un requerimiento obligatorio en todo proyecto de mediana o gran escala. Tradicionalmente se han tenido en cuenta a la hora de diseñar y evaluar sitios Web características y atributos de calidad tales como usabilidad, navegabilidad, seguridad,

3 Descripción de Intergram Los siguientes pasos describen la actuación de Intergram: . Es habitual que usabilidad se refiera a la facilidad para encontrar. eficiente y satisfactoria. de fácil mantenimiento. Podemos observar una exigencia más en el caso de las aplicaciones interactivas: se espera que cumplan las expectativas para las que fueron realizadas. evaluación y comprobación necesarias en un desarrollo web. De forma más general. una metodología de diseño de aplicaciones interactivas que combina procesos de ingeniería de la interfaz. accesibilidad. corrección. 2 Propuesta Nuestra propuesta propone la utilización de INTERGRAM. Un objetivo alcanzado es una actuación esperada y considerada correcta por el diseñador de la aplicación. usabilidad concreta esta definición como la facilidad para que un usuario se introduzca en el sitio Web alcanzando los objetivos que persiguió el diseñador del sitio Web. así como otros aspectos de funcionalidades específicas del dominio. consistente visualmente. Esto es. el uso de aplicaciones de captación de la interactividad y aplicaciones de análisis de estos registros. B. comprensible.438 – Losada. 98]. en ISO 9241-11: 1998 la usabilidad de un producto es definida como la posibilidad que alcanza un usuario de realizar ciertos mandatos de una manera efectiva. eficiencia. partiendo del cumplimiento de los criterios de calidad expuestos en ISO 9126. Los resultados obtenidos afectarían principalmente a la usabilidad del producto. entender y usar la información de un sitio Web [Keevil. facilidad de mantenimiento. En el caso de aplicaciones Web. capacidad de búsqueda y recuperación de información. Consideramos que el éxito de una aplicación interactiva debe ser un atributo a tener en cuenta para medir la calidad de las mismas.93] concluye que un sistema usable es aquél que es accesible. se construye una gramática que describe los caminos de actuación posible y determina los desplazamientos correctos y erróneos. Las actuaciones de los usuarios que alimentan esta gramática nos permiten determinar si los recorridos efectuados son los deseados o no. prototipado. La medida de éxito se obtiene contabilizando y analizando los objetivos alcanzados. Mehlenbacher [Mehlenbacher. En el contexto de este trabajo. preciso y orientado a las tareas que los usuarios realizaran. gramáticas descriptivas de dichos procesos. se desea que tengan éxito. Para poder verificar y cuantificar el éxito o fracaso de la misma. La utilización de Intergram permite la realización en el orden adecuado de las técnicas de diseño. entendida en los términos expuestos anteriormente. que los usuarios finales “naveguen” por donde estaba previsto (en el orden previsto y con llegada a los destinos previstos).

Methods & Selection Rules) [Card et al.. Durante la puesta en marcha del artefacto. por lo que la notación HTA (Hierarchical Task Análisis) [Lorés et al. pero no se pueden detectar puntos de fracaso según los caminos de actuación prevista. Estos datos son utilizados como entrada a la gramática descrita anteriormente. Sobre esa gramática definiremos un analizador sintáctico que permitirá observar y medir los objetivos alcanzados y errados... gramáticas (regulares en un primer paso... 3. Nuestra propuesta describe un modelo de interacción propio que puede ser especificado en una traslación directa desde los modelos descritos en el punto 1 o bien. y otros [Karwowski et al. 1989]. Indican qué páginas son las más demandadas. sin embargo. Siguiendo con el mismo objetivo de uso no experto. Estas técnicas deben tener en cuenta por una parte. El resultado de estas dos fases será la obtención de una estructura formalizada y probada por los usuarios que guiará la realización del sitio web. reutilizaciones y evaluaciones de los diseños realizados. 1981][Payne. las distintas modalidades de usuarios.. Analizando los logs del servidor para un sitio Web se pueden obtener datos cuantitativos del éxito de un sitio. bien por abandono o desvío. qué versiones de navegador se utilizan más. 1998].. R. 1992. 1981][Chase. detallando todas las interacciones posibles a partir de un punto y por tanto los recorridos previstos por el diseñador. estar implícito mediante una descripción de las componentes Web con XML. 1985][Moran. diagramas de transición de diálogo y herramientas para la evaluación previa con los usuarios potenciales. Existen numerosos trabajos que documentan distintos modelos y variantes para la realización de estos tres pasos: el modelo UAN (User Action Notation) [Hartson et al. El objetivo de esta segunda fase es la descripción del sitio web con técnicas formales de lenguajes.. Se utilizan para ello aplicaciones de captación de la interacción. se recogen datos reales. optamos por el uso de diagramas de transición de diálogo basados en los diagramas de transición de estados (STD) [Parnas. El análisis sintáctico de los mismos . obtienen las interacciones detalladas de cada usuario.. 1983]. 4. una herramienta para el desarrollo y estudio de interfaces de usuario – 439 1. P. D. Operators. Un buen diseño de interfaces se focaliza en el usuario por lo que como paso previo. S. En segundo lugar y de manera automática. pero evolucionando hacia formalizaciones de espectro más amplio) y autómatas. por ejemplo. Coincidimos con Nielsen [Nielsen. deducido de la realización de los pasos anteriores y actualizado con las sucesivas evaluaciones tempranas del prototipo. los criterios y guías de diseño estipulados en normativas oficiales y por otra.INTERGRAM. 2. se formalizan los caminos de actuación por medio de una gramática. 1969] [Jacob. el modelo GOMS (Goals. 2003] nos parece la elección adecuada en nuestras aplicaciones para la realización del análisis de tareas. 1983]. Ello permite describir la navegación de manera precisa.. T. Se utilizan técnicas para el análisis de las tareas. exige la utilización de técnicas de ingeniería de software específicas que enmarcamos dentro de la ingeniería de la interfaz. Este esqueleto facilitará las modificaciones. 1993] en la conveniencia de usar métodos más intuitivos en unas herramientas que utilizaran desarrolladores y diseñadores no expertos en investigación HCI.. 1992] en el que se muestran las acciones de usuario que causan cambios de estado en la interfaz. S. Existen numerosos trabajos sobre gramáticas y HCI [Reisner. Las aplicaciones de captación utilizadas.

B. 1. sin embargo. Las fases 3 y 4 necesitan asimismo dos módulos: 1. 1983] en contraste con el uso dirigido. Estructura de INTERGRAM 5 El uso de una gramática formal El diseñador ofrece diferentes caminos en su sitio web con el mismo peso o bien. J. Este lenguaje se genera según una . B. diagramas de transiciones de diálogo que configuran la base del prototipo. La elección libre de un camino. con diferente interés. 4 Componentes de Intergram Las fases 1 y 2 descritas en el punto anterior se realizan en dos módulos: 1. 2. La aplicación gráfica DIAGRAM que permite realizar análisis de tareas. realiza automáticamente un prototipo primitivo de la navegación para la evaluación primaria por los usuarios potenciales. a partir de la gramática obtenida en el módulo anterior. y su traslación interna en forma de gramática. Una característica habitual en las interfaces de manipulación directa es la elección de interacción libre por parte del usuario justificada por [Shneiderman. destaca los fracasos en los objetivos de cada usuario y las formas de actuación de los distintos tipos de usuarios ante los objetivos previstos. La aplicación denominada LOGRAM que “logra” informes de actividad a partir de los logs o registros de actividad y de la gramática que describe un sitio web. Fig. Las actuaciones de los usuarios sobre un sitio web producen unos recorridos de nodos y eventos que forman el lenguaje web... esconde el deseo del cumplimiento de unos objetivos que cuantifican el éxito del diseño [Lorés. La recogida de datos reales mediante aplicaciones de captación de la actividad. et al. La aplicación gráfica EVALGRAM que.440 – Losada. 1993]. 2.

Fig. En el nodo de inicio presentado en la figura 1. n. por ejemplo. se pasará a una nueva situación de comienzo de la aplicación.INTERGRAM. Si definimos la semántica de los componentes de la gramática adecuadamente en correspondencia con la semántica de los componentes web. como los comentados en el punto 1 del apartado “Descripción de Intergram”. Al igual que en el caso de los nodos. Identificación a la entrada del correo electrónico . Los eventos son terminales. la semántica de los eventos en el momento de su lectura aporta su identificación. N10 será la representación del nodo inicial. que denominamos Nij. El usuario decide cuando está rellenado correctamente y en ese caso pulsará entrar. j = 1. podremos generar automáticamente una gramática que corresponda con un diseño web. el sistema avisa al usuario y vuelve a la pantalla de identificación. determina una situación i.n (una pantalla determinada) en un estado j. Veamos su aplicación en esta forma habitual de presentación de una entrada de acceso a una aplicación. distinguiremos el botón inicio. Un nodo web. Así. El cambio de un nodo a otro se produce por medio de eventos de usuario o de la aplicación. una herramienta para el desarrollo y estudio de interfaces de usuario – 441 gramática que establece el diseñador web de forma explícita o bien implícitamente mediante el uso de herramientas de modelización con conceptos de uso más generalizado en diseño web. Cada nodo nos ofrece n (n = 0. vacío de contenido. Es habitual que este nodo de inicio no exista y se comience por un nodo con valores inicializados. En caso de que la identificación sea correcta. El uso descriptivo de la gramática en nuestro modelo hace interesante la inclusión de esta información en la gramática anterior.m) posibilidades de expansión. En caso de incorrección. 2. i = 1. el elemento de la lista Abrir o el nodo introducir login. el sistema solicita la identificación de usuario en forma de dos campos que pueden rellenarse en cualquier orden y las veces que se deseen.

Proporciona las ventajas de usar herramientas de ingeniería y además. J. El recorrido mínimo hacia el mismo objetivo según la anterior especificación. Esto es: N10. sería N10. En este caso. la contraseña (N12). Esto es: Utilizamos la nomenclatura usual en lenguajes formales para indicar la iteración (*) y clausura positiva (+) [Hopcroft. ha vuelto a introducir estos campos hasta que finalmente ha pulsado entrar y el sistema ha reflejado el error en la identificación y ha vuelto al estado inicial. el recorrido mínimo deseado sería: N10. et al. . B. N11. Un recorrido posible. Los modelos de HCI complejos permanecen ocultos bajo una capa de abstracción de alto nivel. N11. ha introducido el nombre de usuario (N11). El usuario ha partido de la situación inicial. 1993]. N11.N31 . sería: Identificación ::= N10 Ciclo10 Disyuntiva10 Ciclo10 ::=tusuario N11 Ciclo10 |tcontraseña N12 Ciclo10 |ε Disyuntiva10 ::= bentrar N21 Sitio21 | bentrar N31 Identificación 6 Conclusiones y estado del trabajo • Se utilizan técnicas de ingeniería de interfaz. donde los no terminales aparecen en negrita. por lo tanto.N10 La gramática libre de contexto no determinista que modela y genera los recorridos vistos.K. N10. N11. El análisis de las tareas previa al diseño nos determina el árbol de recorridos posibles a través de los nodos. expresada en producciones BNF. N12 . • Las técnicas escogidas van destinadas a diseñadores.N10. N12.N31 . sería aquél que pulsa entrar sin introducir previamente nombre de usuario ni contraseña. por lo tanto se utiliza un lenguaje cercano a ellos en las aplicaciones.442 – Losada. N12 . N31. la atención a los tipos de usuario diferentes de un desarrollo.

).(1997). Ullman. Los Angeles. S. and Smith. (Eds.E. “Transferring HCI modelling and Design Techniques to Practitioners: A Framework and Empirical Work” Chase. ISO 9126-1991 International Standard.C. 209-222 (paper named “Most Innovative of the Refereed Materials” in the Proceedings) Moran. 1998 “Ergonomic Requirements for Office Work with Visual Display Terminals”. Designing and Using Human-Computer Interfaces and Knowledge Based Systems. Ed. P. 28-34 Keevil. Juristo.Cecsa Jacob. P. Dagorret. J. X. . (1993). T. CA.J. ISO 9241-11.(1983). NY: ACM Press. G. 15. J. B. B. Moreno.. pp 133-146 Mehlenbacher. una herramienta para el desarrollo y estudio de interfaces de usuario – 443 • Se parte de un diseño formal y evaluado que se mantendrá en el tiempo adaptándose si es necesario. “Measuring the Usability Index of Your Web Site”. • Las herramientas descritas en este artículo se encuentran en fase de desarrollo. In: Proceedings of the ComputerHumanInteraction CHI '98 Conference. pp. Nielsen. April 18-23 1998. International Journal of Man Machine Systems. (2003).. A. New York. Trabajamos en la realización de los módulos por separado y posteriormente se realizará el ensamblaje. Referencias Buckingham. ..M.(1994). NY: ACM. (1993). N. “User Interaction Models for Grammar Based Design Systems Ferre.. M. 271-277. (1981). • Se detectan los logros y los fallos con datos reales sujetos al contexto particular de cada aplicación interactiva.(1998).P.. 1981. (1989). B. “Improving Software Engineering Practice with HCI Aspects” Hopcroft. Granollers. “Information technology-Software product evaluationQuality characteristics and guidelines for their use” Lorés. “Etude de la Conception d’Applications Hypermédias” Congrès INFORSID’97.INTERGRAM. Amsterdam. “Usability engineering at a discount”.D. The command language grammar: a representation for the user interface of interactive systems. SIGDOC’93: The 11th Annual International Conference Proceedings.. S.. lenguajes y computación”.(1998).. Lopistéguy. Software Usability: Choosing Appropriate Methods for Evaluating Online Systems and Documentation. In Salvendy. T. “Introducción a la teoría de autómatas. NY. J. J. 394-401. Hammond. “La Ingeniería de la Usabilidad aplicada al diseño y desarrollo de sitios web” Losada. R. “Executable Specification for a Human-Computer Interface” ACM CHI’83 Proceedings.(2003). Elsevier Science Publishers. N.

L. Holland S. 527{532. (1983). “Formal grammar and human factors design of an interactive graphics system”.”Task-action grammars”. In Proceding 24th ACM Conference. Phd “Metodología Cuantitativa para la evaluación y comparación de la calidad de sitios web” 1998 Parnas. (1985). Rogers. 1985 Preece. S.. Benyon D. IEEE Transactions on Software Engineering. pages 379-385 Payne. pp. Big paybacks from 'discount' usability engineering. Shackel.444 – Losada.. (1981). In B.. Interact '84. “On the use of transition diagrams in the design of a user interface for an interactive computer program”. “Direct manipulation: a step beyond programming languages. Nielsen. editor.. Olsina. Human-Computer Interaction. (1990). B. P... 3 (May).. (1994). Carey T. IEEE Software 7. (1969). North-Holland. “Human-Computer Interaction”. SE-7(2):229{240. J. J. IEEEComputer. 107-108. Sharp H. 1981 Shneiderman. Y. D. B.J. 16(8):57{69 . Addison-Wesley Reisner.