Investigación con usuarios

18 mayo, 2013
Yusef Hassan

La investigación con usuarios es la más poderosa herramienta para comprender el problema y validar hipótesis, pero no aporta la solución al problema.

Hace algunos meses, desde la revista hipertext, me pidieron muy amablemente que escribiera una pequeña editorial/tribuna para un número especial sobre investigación con usuarios, que se acaba de publicar.

El número que se publica incluye los siguientes artículos:

Simplicidad en la visualización de datos

26 abril, 2013
Yusef Hassan

Gráficas con diferentes niveles de esquematización

En diseño no creo que exista la simplicidad como un concepto en sí mismo significativo. Lo que existe es la simplicidad en relación a diferentes aspectos del diseño, un atributo que no siempre debe valorarse positivamente.

Si hablamos específicamente de diseño de información, podemos distinguir entre:

Simplicidad de uso

Lo que podríamos llamar la usabilidad de la visualización. Se trata de la facilidad con la que podemos decodificar o extraer la información representada, y por tanto se refiere a la simplicidad con la que este proceso cognitivo y perceptual puede realizarse. No se trata de un atributo universal, ya que debe considerarse en relación a la audiencia a la que se dirige.

Simplicidad de la función

El valor de uso de una visualización de datos está en directa relación con la relevancia y cantidad de los datos representados, o en otras palabras, de la complejidad de su función.

Simplicidad de la forma

Es la simplicidad de la forma la responsable de transformar la complejidad de la función en simplicidad de uso. Esto se puede lograr mediante la organización gráfica e interactiva, pero también mediante la reducción de la representación.

El problema surge cuando afrontamos esta reducción desde un enfoque minimalista, en el que más allá de eliminar lo superfluo e insignificante, terminamos dificultando el uso.

Un ejemplo de esto es el famoso ratio data-ink de Tufte (1983), considerado prácticamente un mantra en visualización de información. Este principio sugiere eliminar toda tinta (o píxeles) que no se utilicen para codificar datos, así como de la utilizada para codificar datos, eliminar aquella que sea redundante.

El problema de este enfoque es que sólo considera funcionalmente relevante la representación de datos, y entiende esta representación desde una perspectiva completamente minimalista.

El trabajo de Inbar, Tractinsky y Meyer (2007) pone de manifiesto la baja preferencia o aceptación de las personas respecto a estas representaciones minimalistas. Uno de los motivos puede ser que este minimalismo resta familiaridad a la representación.

Por otro lado, Spence (1990) sugiere que en determinadas circunstancias el uso de tinta redundante facilita que las gráficas se puedan procesar más rápidamente, por lo que su reducción sería contraproducente.

Además, Bateman et al. (2010) detectan que el contenido de gráficos altamente decorados (ChartJunk), tras 2 o 3 semanas es significativamente más recordado que cuando se utilizan representaciones más esquemáticas.

Esto no significa que la simplicidad por reducción en la forma no sea una buena práctica, sino que a la hora de podar, esquematizar o prescindir de elementos gráficos, debemos hacerlo sobre la base razonable de su escasa o nula aportación para facilitar la comprensión de los datos, y teniendo en consideración el contexto y la audiencia objetiva.

Referencias

Bateman, S. et al. (2010). Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts. CHI 2010, April 10–15, 2010, Atlanta, Georgia, USA.

Inbar, O.; Tractinsky, N.; Meyer, J. (2007). Minimalism in Information Visualization –
Attitudes towards Maximizing the Data-Ink Ratio. Proceedings of the ECCE 2007 Conference, 28-31 August 2007, London, UK.

Spence, I. (1990). Visual Psychophysics of Simple Graphical Elements. Journal of Experimental Psychology: Human Perception and Performance. 1990, vol. 16, n. 4, 683-692.

Tufte, E.R. (1983). The Visual Display of Quantitative Information.

Diferentes resoluciones de pantalla

7 marzo, 2013
Yusef Hassan

Tomando como fuente la wikipedia, he elaborado esta simple representación interactiva con la que se pueden explorar las diferentes resoluciones de pantalla más comunes (requiere un navegador con soporte SVG).
resoluciones

Innovación y Experiencia de Usuario

21 enero, 2013
Yusef Hassan

A mediados del año pasado, Michael Schrage, investigador docente del MIT, publicó su exitoso libro Who Do You Want Your Customers to Become?, que personalmente he encontrado bastante inspirador.

Schrage parte de la tesis que ya anticipa el título del libro. La innovación no consiste en la búsqueda de soluciones que simplemente agraden o den respuesta a las necesidades de los clientes. De lo que se trata es de preguntarte quién quieres que tus clientes lleguen a ser, preguntarte cómo tu producto o servicio transformará a tus clientes, cómo los hará mejores. Hablamos de invertir en tu mayor activo: el capital humano, el que forman tus clientes. No se trata de crear pensado en cómo son actualmente los clientes, sino en cómo serán y deberían llegar a ser.

El autor utiliza varios ejemplos a lo largo de su argumentación. Google no es una herramienta de búsqueda, sino una herramienta que convierte a sus usuarios en buscadores instantáneos, capaces de encontrar aquella información que necesitan de forma tremendamente rápida y sencilla. Starbucks no vende café, sino que busca transformar a sus clientes en sofisticados entendidos acerca del café. El Toyota Prius no es un vehículo que utiliza una tecnología novedosa, sino uno que hace a sus conductores tan ecológicos como lo es el propio vehículo.

También utiliza un ejemplo de innovación que, al principio, fue rechazada por los clientes porque les convertía en algo que no querían ser. Es el caso de los carritos de la compra, inventados por Sylvan Goldman en los años 30. Las mujeres los rechazaban porque sentían que empujaban un carrito de bebé, y los hombres lo veían como un insulto a su masculinidad.

Además de ejemplos que sostienen, con más o menos fuerza, su tesis, el autor ofrece algunas claves para la concepción de productos o servicios innovadores. A continuación mezclo algunas de estas claves con reflexiones personales.

Pasión y fidelidad

Un fenómeno que siempre me ha llamado la atención es cómo las personas creamos vínculos de fidelidad visceral con determinadas marcas, haciéndolas parte de nuestra propia identidad.

Entiendo que hasta cierto grado esto puede ser producto de la tesis que defiende el libro. Por ejemplo, como defiende el autor, la obsesión de Apple por la excelencia en el diseño hace que no sea una empresa que simplemente venda tecnología, sino una cuyos productos educan a los clientes transformándolos en entendidos sobre diseño.

Bueno, cuando menos podemos decir que son productos que educan el gusto.

Por otro lado, resulta más atractivo identificarse con una marca exclusiva que con una más inclusiva. De hecho, este es el pilar del modelo de negocio de las marcas de lujo. Como afirma Schrage, “los clientes se convierten en lo que su reloj ostensiblemente representa”.

A esta ecuación yo personalmente creo que le falta una pieza básica: el mismo hecho de consumir. Vivimos en una sociedad de consumo que nos hace creer que somos aquello que consumimos. Esto no significa que estos fenómenos no se produzcan con productos o servicios gratuitos, pero sí creo que el mismo hecho de pagar por ellos refuerza la probabilidad de hacerlos parte de nuestra propia identidad.

El diseño de experiencias de usuario transformadoras

La usabilidad ha tenido como objetivo inherente desde sus orígenes no hacer sentir estúpidos a los usuarios. Prevenir el error humano, o permitirle y facilitarle la reformulación de sus acciones, son principios básicos encaminados a evitar esta frustración. El diseño de experiencias de usuario debería llevar el objetivo un paso más allá.

Una de las claves que aporta Schrage en su libro reza lo siguiente:

La innovación es acerca de diseñar clientes, no sólo nuevos productos, nuevos servicios o nuevas experiencias de usuario.

Entiendo el sentido figurado de “diseñar clientes”, pero personalmente veo más interesante como concepto el de diseñar experiencias de usuario transformadoras, experiencias que no sólo resulten satisfactorias, sino que en cierto grado transformen al usuario, lo hagan mejor, eduquen o capaciten.

Aquí llegamos a un punto que Schrage trata de forma muy ambigua a lo largo del libro. ¿Estamos hablando de mejorar realmente al usuario, o simplemente de hacerle sentir que es mejor?

Hacer sentir al usuario que es mejor ya es un logro, aunque en muchas ocasiones se alcance a través de una falsa apariencia de complejidad. Me viene a la cabeza el famoso caso del terminal Bloomberg (Leca; 2010) (Ortega Santamaría; 2011).

Pero la verdadera diferenciación creo que está en la función instructiva del diseño, en su capacidad para, además de permitirnos realizar tareas de forma sencilla, mejorar nuestras habilidades y capacitación para la propia tarea. Una función, se entiende, que no debe interferir en la eficiencia de la ejecución de la tarea.

Pensemos, por ejemplo, en las aplicaciones que usamos diariamente para elaborar gráficas (retomando así una de las temáticas típicas de este blog). Una de las razones por las que es tan común encontrar gráficas tan horriblemente diseñadas es Excel. Es una herramienta que hace que sus usuarios sean peores, que en lugar de capacitarlos para la representación gráfica de datos cuantitativos, consigue todo lo contrario. Como decía Noah Iliinsky:

“Todas las opciones por defecto en Excel son incorrectas: los ejes, el hecho de que le aplique a todo un efecto 3D, los colores por defecto, las etiquetas, los estilos gráficos por defecto. La mayoría de las cosas en Excel están mal. Claro que puedes hacer buenos gráficos con Excel, pero necesitas saber qué estás haciendo.”

Ahora pensemos en la revolución que supuso la introducción de los correctores ortográficos y gramaticales en los procesadores de texto. No sólo son herramientas que ayudan a mejorar el resultado final, sino que mejoran al usuario, enseñándole a escribir de forma más correcta. Aún con ello, ¿sería posible mejorar este tipo de herramientas para hacer más eficaz su función instructiva?

Bibliografía

Carmichael, S. (2012). Noah Iliinsky – Telling the Right Story with Data Visualizations. Disponible en: http://www.uie.com/brainsparks/2012/03/16/noah-iliinsky-telling-the-right-story/

Hassan Montero, Y.; Martín Fernández, F.J. (2005). La Experiencia del Usuario. Disponible en: http://www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm

Leca, D. (2010). The Impossible Bloomberg Makeover. UX Magazine. Disponible en: http://uxmag.com/articles/the-impossible-bloomberg-makeover

Ortega Santamaría, S. (2011). Introducción a la Usabilidad y su evaluación. UOC. Disponible en: http://cvapp.uoc.edu/autors/MostraPDFMaterialAction.do?id=176612

Schrage, M. (2012). Who Do You Want Your Customers to Become?. Harvard Business Press Books, 76 pages.

Patrones de diseño de interacción

9 noviembre, 2012
Yusef Hassan

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

¿Quién liderará la producción científica en 2018?

22 octubre, 2012
Yusef Hassan

Esta gráfica la he elaborado a partir de los datos publicados por scimago lab. Como cualquier predicción está condenada a no acertar (al menos no de forma precisa), y más si consideramos los efectos que tendrán los recortes en I+D que algunos países están aplicando. No obstante, lo que los datos ponen de relieve es la desigual tasa de crecimiento de los diferentes países en estos últimos años.
How World Scientific Output will be in 2018

Mejorando un gráfico de burbujas

19 septiembre, 2012
Yusef Hassan

En Junk Charts (blog que recomiendo) publican una entrada titulada Insufficiency and illusions, a raíz de la gráfica de un artículo del Wall Street Journal en su edición en papel. La gráfica intenta representar la revalorización en los últimos 12 años de algunos objetos autografiados por famosos.

gráfica de burbujas

Se trata de una gráfica muy poco eficaz por usar áreas circulares para codificar los datos, un recurso gráfico generalmente poco recomendable por nuestra incapacidad para estimar relaciones de proporción entre áreas con un mínimo de precisión. A esto hay que añadir ciertas ilusiones ópticas que su uso puede provocar, como señalan en la misma entrada:

ilusiones ópticas relacionadas con las áreas circulares

La cuestión es que el autor del blog propone una gráfica alternativa, que si bien resulta más eficaz, sigue presentando varios problemas:

Gráfica de barras

No resulta sencillo relacionar cada personaje con su gráfica correspondiente (leyes de la Gestalt), ni comparar barras ubicadas en diferentes filas o comparar incrementos. Además se repiten ejes innecesariamente.

Al margen de que los datos en cuestión no son especialmente reveladores o interesantes, como ejercicio personal aprovecho para proponer una solución gráfica alternativa:

gráfica de líneas

ACTUALIZACIÓN (20/09/2012):

Me comenta Sergio Álvarez Leiva por twitter que mi propuesta provoca la primera impresión de utilizar el eje horizontal como variable temporal, cuando lo que realmente se codifica en ese eje es el valor de los autógrafos. No le falta razón, ya que la gráfica tiene cierta apariencia de timeline, y esto puede resultar confuso.

Además Sergio propone dos interesantes alternativas, ambas perfectamente válidas. La primera en forma de gráfica de barras:
gráfica de barras

La segunda al estilo de slopegraph:
slopegraph

Yo aprovecho para reformular mi primera propuesta, intentando minimizar el efecto timeline:

gráfica de puntos

Y también para proponer una alternativa más:

gráfica de líneas

Presupuestos de la Casa Real

11 septiembre, 2012
Yusef Hassan

Visito la nueva página casareal.es, y la primera gráfica que me encuentro es la referida a los presupuestos anuales:

gráfica de barras

La primera en la frente: utilización de medidas poco intuitivas y barras cuya base no comienzan en cero. Rehago la gráfica, esta vez sin exagerar diferencias entre cantidades asignadas:

gráfico de barras

Si lo que se pretendía era enfatizar la variación o tendencia, en lugar de las diferencias entre años, se debería haber utilizado una gráfica de líneas, donde sí es posible cortar el eje (siempre denotando este hecho). Lo primero que hacemos al mirar una gráfica de barras es comparar longitudes de las barras, mientras que en las de líneas recorremos visualmente el camino que forman.

gráfico de líneas

Pero en este caso, para poder observar cierta evolución habría al menos que ampliar el periodo representado.

gráfico de líneas

De la gráfica que utilizan para representar la distribución del presupuesto, mejor ni hablamos.

Gráfica de tarta 3D con degradado de color. Lo tiene todo.

Emigración

28 julio, 2012
Yusef Hassan

La siguiente gráfica publicada por rtve.es representa el número de emigrantes españoles en los últimos años. Un claro ejemplo de cómo desatendiendo los principios básicos de visualización y percepción visual obtenemos una representación gráfica de la que difícilmente se puede sacar algún provecho.

Gráfica de la emigración en España (2009-2012)

Esta es una gráfica tradicional que he elaborado sobre los mismos datos, y que al contrario que la anterior nos permite realizar tareas básicas como comparar valores o identificar tendencias.

Gráfica de la emigración en España (2009-2012)

Artículos relacionados:

Visualización de distribuciones mediante líneas de calor

10 julio, 2012
Yusef Hassan

Un problema recurrente en visualización cuantitativa es la necesidad de representar gráficamente conjuntos de valores numéricos. La mayoría de veces recurrimos a resumir esos conjuntos en forma de medias, pero esta simplificación conlleva que perdamos la posibilidad de analizar la distribución de los datos, y por tanto una gran parte de su mensaje.

A continuación describo algunos de los modelos tradicionales de representación de distribuciones, para después introducir un modelo alternativo, que podríamos denominar líneas de calor (o mapas de calor lineales).

Nota: Como conjunto de datos para los ejemplos se ha utilizado el proporcionado por Chandoo. Todas las gráficas han sido generadas mediante un framework de visualización propio de Scimago Lab.

Representaciones tradicionales

La forma más sencilla de representar gráficamente distribuciones de valores es mediante strip plots, donde cada punto representa un valor individual. Aunque puede ser una representación útil cuando se manejan pocos valores, conforme aumenta su número también lo hace el solapamiento visual, disminuyendo drásticamente su efectividad.

strip plot

Otra forma muy común de representación es mediante histogramas, una especie de gráfica de barras en la que se divide el rango de valores en intervalos, y por cada intervalo la altura de la barra señala la frecuencia o el número de valores del mismo. A diferencia de las gráficas de barras comunes, en los histogramas las barras se representan contiguas, para denotar la secuencialidad de los intervalos. El problema de los histogramas es que no dejan ver realmente la distribución, además de que su expresividad es muy dependiente del número de intervalos que se utilicen.

histogram

Una gráfica muy popular es la conocida como caja y bigotes. En esta no se representan los valores ni sus frecuencias, sino medidas que resumen la distribución: el valor mínimo, el cuartil Q1, el cuartil Q2 (mediana), el cuartil Q3 y el valor máximo. No se trata de una gráfica demasiado intuitiva ya que requiere de cierto conocimiento previo para su correcta interpretación.

box-and-whisker

Líneas de calor

Aunque me encantaría atribuirme la invención de este tipo de gráfica, la verdad es que no es más que una reutilización o aplicación combinada de conceptos existentes. Por un lado podría verse como un mapa de calor reducido a una dimensión, y en el que además de utilizar el color para codificar concentraciones de valores, se utiliza el tamaño. Por otro lado podría verse como una especie de Bean Plot (Kampstra; 2008) pero que aprovecha el color para reforzar la codificación.

linear heat map

Comparando los diferentes ejemplos, las líneas de calor no parecen una mala alternativa.

Bibliografía

Few, S. (2009). Now You See It. Analytics Press, 1st edition.

Kampstra, P. (2008). Beanplot: A Boxplot Alternative for Visual Comparison of Distributions. Journal of Statistical Software, vol. 28.

Yau, N. (2012). How to visualize and compare distributions. Flowingdata.

¡Hola! Este blog se aloja en Dinahosting y se gestiona con Wordpress (rss)