no solo usabilidad: revista sobre personas, diseño y tecnología
menú
menúEn cualquier proyecto la comunicación - tanto con el cliente como entre los miembros del equipo- resulta fundamental en la consecución de los objetivos fijados. Como diseñadores, además de ser capaces de extraer de los usuarios y el cliente toda aquella información relevante para nuestro trabajo, debemos también ser capaces de comunicar de forma efectiva y precisa los resultados de análisis e investigación, así como las decisiones de diseño que se deriven.
La comunicación y el flujo de información en el proyecto pueden realizarse de muy diversas formas, aunque sin duda su documentación es el medio más estable, efectivo y fácilmente reutilizable. Documentar consiste en registrar ideas y conceptos de diseño, no sólo con el fin de posibilitar su comunicación, sino también de preservar ese conocimiento – es común que los miembros de un equipo cambien a lo largo del proyecto -. Estos documentos, en el contexto del diseño de interacción, suelen denominarse “entregables” (del inglés ‘deliverables’).
La elección del tipo de documentación a emplear debe realizarse a partir de su eficacia comunicativa, algo que podemos deducir de nuestra experiencia como diseñadores. Como vimos en el capítulo sobre la cognición, a las personas les cuesta interiorizar nuevas ideas y conocimiento, por lo que suelen buscar reglas o patrones que sinteticen o resuman esa información. Una de las herramientas que podemos usar para facilitar esta comunicación es la narrativa, es decir, estructurar una serie de hechos en un marco temporal, de tal modo que la sucesión lógica facilite su comprensión y asimilación. Como es sabido, las “anécdotas”, las historias personales, son más fáciles de recordar que los datos; la historia de cómo un usuario intenta afrontar un proceso interactivo y los problemas con los que se encuentra, puede tener más poder comunicativo que una gran cantidad de datos estadísticos sobre el uso del sitio web.
Otra herramienta – no excluyente – es el pensamiento visual. Con este concepto nos referimos a nuestra capacidad de traducción y representación de nuestros modelos mentales a formas visuales - un tema que ya revisábamos en el capítulo sobre modelos mentales-. A partir de estos modelos visuales otros podrán abstraer y construir su propio modelo mental acerca del problema. Pero estos modelos visuales no sólo debemos entenderlos como un medio para comunicar ideas, sino más allá, como uno para compartir visualmente, pensar y resolver problemas de diseño cooperativamente.
Aunque no existe normalización o estandarización en lo que a tipos de entregables - ni su proceso de desarrollo- se refiere, sí existen ciertas convenciones o estándares ‘de facto’. Partiendo de los trabajos de Brown (2007) y Morville (2009), a continuación exponemos algunos de los tipos de documentos más comúnmente usados por diseñadores y arquitectos de información, clasificados en tres categorías: documentos de proyecto, de investigación con usuarios y de diseño.
Un proyecto puede contar con suficientes recursos económicos, humanos y tecnológicos, y no obstante fracasar debido a una mala gestión. La gestión de proyectos es, precisamente, el nombre que recibe la disciplina dedicada a la planificación, coordinación y organización de los recursos con el fin de alcanzar los objetivos del proyecto, dentro de los límites temporales y económicos definidos.
El presente trabajo asume que no es tarea del diseñador llevar a cabo la gestión del proyecto, pero sí que participará activamente en la toma de decisiones sobre las estrategias que contextualizarán, condicionarán y guiarán el trabajo de diseño.
Los diagramas de Gantt reciben su nombre de Henry Gantt, considerado uno de los “padres” de la gestión de proyectos como disciplina. Estos diagramas son un tipo de gráfico de barras, donde cada barra representa un elemento -como por ejemplo la actividad o tarea a desarrollar-, y sus fechas programadas de inicio y fin. Por tanto, la función de este tipo de diagramas no es otra que representar la planificación o programación temporal de un proyecto. Para su elaboración se pueden usar desde aplicaciones específicas hasta aplicaciones de hojas de cálculo (coloreando celdas).
Un medio que nos puede facilitar la tarea de programar actividades en el contexto de proyectos bajo la filosofía del DCU, es partir de diagramas de Gantt "marco". En estos diagramas de referencia no se detallan los tiempos y fechas de cada actividad, pues no responden a ningún proyecto concreto, pero sí nos ofrecen una visión general del orden cronológico que debe ocupar cada actividad, así como su duración relativa al resto de actividades. Como ejemplo podemos analizar el "diagrama del proceso de diseño" (Spencer, Warfel; 2007) de la figura 3.10.
Nuestro proyecto web, una vez online, tendrá que competir inevitablemente por la atención de los usuarios con otros sitios web de naturaleza similar. Una de las formas que tenemos para afrontar este reto es precisamente investigar a la competencia y detectar las mejores prácticas (en nuestro caso, de diseño), para obtener con su aplicación una ventaja competitiva. Esta forma de innovación aditiva está condicionada por nuestra capacidad para detectar qué es lo que otros hacen mejor que nosotros, y no terminar empeorando nuestra solución tomando por válidas decisiones de diseño menos eficaces. Además, debemos recordar que es una técnica poco adecuada en contextos donde las mejores prácticas se concentran en un único competidor.
El análisis competitivo tiene dos dimensiones principales: competidores y criterios de análisis (Brown; 2007). Ya que el número de competidores a los que se enfrente nuestro proyecto puede ser muy elevado, elegiremos para el análisis un grupo reducido, lógicamente los de mayor éxito. A continuación debemos determinar cuáles serán los criterios de comparación, es decir, qué tipo de soluciones de diseño vamos a analizar y comparar entre los competidores.
La forma de medir los criterios depende en gran medida de la naturaleza de los mismos. En ocasiones podremos usar valores binarios para indicar si los competidores cumplen o no el criterio (ej.: “¿se utiliza en la home una nube de etiquetas?”); en otras ocasiones se podrán utilizar puntuaciones, indicando el grado en que se cumple el criterio (ej.: “cantidad de publicidad”); en otras ocasiones valores numéricos exactos (ej.: “peso en Kb de la página de inicio”); y en otras descripciones textuales del resultado de comprobar el criterio en cada competidor.
La forma de documentar el resultado del análisis competitivo puede variar enormemente, dependiendo, una vez más, de los criterios elegidos para el análisis. En el caso de valores binarios se pueden representar mediante una simple hoja de cálculo coloreando celdas, en forma de matriz “competidores x criterios”. Cuando los valores son cualitativos o cuantitativos se recomienda el uso de gráficas que sinteticen visualmente los datos como, por ejemplo, en la propuesta de Hawley (2009).
Para determinados criterios, como aquellos que pretenden comparar el ‘layout’ o distribución de contenidos en las páginas de los competidores, se pueden emplear ilustraciones esquemáticas como la de la figura 3.11 (Brown; 2007):
Cuando nos enfrentamos a la tarea de definición o reestructuración de una arquitectura de información, el primero de los problemas que debemos resolver es determinar el volumen de información a organizar, su naturaleza, audiencia, granularidad, relevancia y localización. La forma tradicional de documentar los inventarios de contenido es a través de hojas de cálculo, ubicando en filas cada pieza de información, y en columnas los diferentes campos o metadatos a registrar.
En Usability.gov (https://www.usability.gov/design/inventory.html) proponen los siguientes campos a incluir en el inventario:
Veen (2002) propone un conjunto de campos que presenta algunas diferencias, además de ofrecer una plantilla en Excel para la elaboración de estos inventarios:
La elaboración de inventarios de contenido es una de las tareas más complejas, meticulosas y probablemente aburridas que deben acometer los arquitectos de información. Además, algunos autores defienden que su elaboración puede resultar incluso contraproducente.
Reichelt (2006) opina que la creación de inventarios detallados es una de las peores decisiones que se puede tomar si se pretende lograr una buena arquitectura de información, ya que al hacerlo perdemos la perspectiva sobre cómo estos contenidos deberían estructurarse y relacionarse en la nueva arquitectura de información. Maurer (2006) opina lo contrario, argumentando que no es posible crear arquitecturas de información desconociendo la naturaleza en detalle de los contenidos. Por otro lado Rosenfeld (2006) afirma que el problema (de este debate) se encuentra en la visión tradicional que se tiene de los inventarios de contenidos, en la que se entienden como un documento estático – una instantánea del contenido – en vez de como un proceso.
La filosofía del diseño centrado en el usuario determina que, con el objetivo de que el resultado final sea usable, el proceso de diseño debe estar dirigido por los usuarios; sus necesidades, habilidades, conocimientos, modelos mentales, objetivos, experiencia y contexto. Además, esta filosofía también nos indica que son precisamente los propios usuarios la mejor fuente de información acerca de la usabilidad de cualquier diseño.
Toda esta información, como vimos en el anterior capítulo, puede extraerse por diferentes técnicas de investigación, como encuestas, entrevistas, analítica web, card sorting, test de usuarios, etc.
Con el objetivo de que la información que extraemos de la investigación con usuarios resulte útil y posibilite la toma de decisiones de diseño acertadas, debemos representarla, sintetizarla y estructurarla en documentos.
La técnica ‘Persona-Scenario’ (Copper; 1999) (Cooper, Reimann, Cronin; 2007) - que traducimos como ‘personaje-escenario’- pretende sintetizar la información extraída en etapas de indagación de la audiencia a una serie de documentos (o fichas) que representarían arquetipos de usuarios. Mientras que la identidad de estos personajes es inventada (nombre, fotografía, etc.), la información sobre sus necesidades, motivaciones, actitudes y comportamientos debe esta basada en datos reales extraídos de usuarios potenciales o reales del sitio web a diseñar. Es decir, se trata de arquetipos de usuarios, no de estereotipos. Los personajes suelen contextualizarse con escenarios o descripciones de situaciones de uso concretas.
La función de estos documentos es potenciar en el diseñador la empatía con el usuario final, facilitando la toma de decisiones de diseño centradas en los usuarios representados, y no en suposiciones o ideas vagas acerca del público al que nos dirigimos en el sitio web. Además, facilitan la toma de decisiones de diseño cooperativas, ya que con ellos los diferentes miembros del equipo pueden compartir un mismo modelo mental acerca del usuario final.
En la elección de los personajes nos enfrentamos a la problemática de la diversidad de la audiencia, que describíamos en el capítulo sobre la Experiencia del Usuario. Deberemos conseguir que los personajes creados (que no deben superar los 7 u 8), representen al mayor porcentaje posible de la audiencia, y que sus características no se solapen entre sí (de poco sirve tener dos personajes que comparten demasiadas propiedades, y por tanto representan arquetipos de usuarios muy similares).
La información de estos documentos puede estar representada de diversas formas, aunque la forma más común suele ser mediante el uso de la narrativa, tal y como Wiggins (2009) demuestra en su artículo. La ficha de cada personaje suele incluir además una fotografía (algo que ayuda a humanizarlo), datos personales, palabras clave, e incluso representaciones gráficas que sinteticen visualmente su perfil (conocimientos, intereses, motivaciones…), tal y como podemos observar en el ejemplo de la figura 3.12.
Diseñar es un proceso que parte de lo general a lo específico, de la idea a su materialización, de lo abstracto a lo concreto. Los primeros pasos son investigar a la audiencia, analizar el entorno competitivo, o analizar la naturaleza del contenido que pretendemos comunicar. Sobre esta información comenzamos la propuesta de soluciones de diseño, tomando decisiones acerca de cómo estructurar el contenido, cómo presentar la información en las diferentes páginas, o cuáles serán las posibilidades interactivas del sitio web.
A continuación se describen algunos documentos dirigidos a registrar este tipo de decisiones.
Los wireframes son esquematizaciones de la interfaz, documentos en los que se representa cómo deberá ser la distribución, ordenación y relación de los diferentes elementos en cada una de las páginas (o tipos de páginas) del sitio web.
Quién deba llevar a cabo la elaboración de los wireframes no deja de ser una cuestión controvertida. Como señala Brown (2007), estos documentos desdibujan la línea que separa la arquitectura de la información del diseño gráfico.
Se suele diferenciar entre wireframes de “baja fidelidad” y de “alta fidelidad”, aunque no se trate de dos categorías con límites definidos. En los primeros se representa el esqueleto de la interfaz, la distribución de los diferentes bloques de contenido y, en algunos casos, el rotulado. Los de alta fidelidad incluyen mayor detalle visual, como imágenes, colores, tipografías… Las ventajas de unos y otros son obvias. Los primeros son más fácilmente elaborables y modificables, mientras que los segundos ofrecen una imagen más fiel y realista del diseño final de las páginas.
En la figura 3.13 podemos observar un wireframe de baja fidelidad, extraído del trabajo de Candamil-Llano y Guevara-Hurtado (2009b), quienes describen detalladamente un caso práctico de elaboración de wireframes.
Entre las herramientas que pueden utilizarse en la elaboración de wireframes, podemos destacar (Ronda-León; 2007) (Barber; 2009):
Otros recursos de interés son el artículo de Howard (2009), en el que se ofrecen 20 consejos prácticos para la elaboración de wireframes, o el de Olsen (2006), pequeño tutorial sobre el uso de Microsoft Visio en la documentación mediante wireframes.
Documentar el diseño de interacción consiste en representar el comportamiento interactivo de la aplicación o sitio web, es decir, cómo la aplicación responderá a las acciones del usuario. La diferencia principal de los diagramas de interacción frente a otros documentos de diseño, es que estos describen la dimensión dinámica, temporal, en movimiento e interactiva del diseño.
La diagramación de la interacción puede hacerse a través de dos tipos de documentos. Por un lado se pueden usar secuencias del estado de la interfaz (mezcla entre un wireframe y un storyboard), tal y como podemos ver en la figura 3.14, extraída del trabajo de Scott (2005).
El segundo tipo de documento es el conocido como diagramas de flujo de interacción. En estos documentos las posibles acciones del usuario y las respuestas del sistema se representan en forma de diagramas, mediante elementos (nodos) y conectores. El significado de cada elemento, así como de la relación definida por los conectores, suele codificarse mediante su forma gráfica, y explicitarse mediante leyendas descriptivas.
Aunque puede usarse el vocabulario gráfico que se desee (una vez más, no existe normalización), uno de los vocabularios gráficos más extendidos y populares es el propuesto por Garrett (2002), del que podemos ver un ejemplo de aplicación en la figura 3.15.
Los patrones de diseño fueron originalmente propuestos por el arquitecto Christopher Alexander en el contexto del diseño y construcción urbanística, quien los definió como soluciones a problemas que se usan repetidamente en contextos similares con algunas variantes en la implementación. Esta idea ha sido importada al mundo del diseño de interacción.
Un patrón de diseño responde qué hay que hacer, pero integrando un contexto y objetivos concretos (Welie, Veer, Eliëns; 2000). Los patrones de diseño son, por tanto, específicos, sólo aplicables a contextos determinados, y suelen incluir ejemplos concretos de aplicación (Henninger; 2000)(Henninger, Oltman; 2002). Su naturaleza específica es lo que los diferencia de las directrices de usabilidad o heurísticas, ya que los patrones de diseño incorporan además el resultado deseado (Spool; 2003) (Henninger; 2001).
Aunque los patrones de diseño pueden estructurarse de muy diversas formas (no existe normalización), suelen compartir los siguientes campos (Moreno, Sánchez-Segura; 2003) (Hernández-Hernández et al.; 1998) (Malone et al.; 2005) (Varela-Tabuyo; 2005):
Actualmente existen numerosas librerías o repositorios de patrones de diseño accesibles online, entre los que cabe destacar:
Los patrones de diseño de interacción suponen una valiosa herramienta como soporte a la toma de decisiones de diseño acertadas, sustentadas en base al conocimiento compartido y derivado de soluciones alcanzadas previamente para problemas y contextos similares. Por ello, son un medio muy recomendable para registrar el conocimiento del equipo de diseño, permitiendo su reutilización posterior.
Esto no significa que debamos acatar cualquier patrón de diseño como una solución universal e inamovible para el problema descrito. Un patrón de diseño no debe considerarse una respuesta a un problema, sino el punto de partida en el proceso de toma de decisiones de diseño. Una vez analizamos la solución que plantea un patrón de diseño, debemos preguntarnos: ¿podemos aportar una solución que mejore la experiencia del usuario?.
Como ejemplo de innovación, podemos tomar la propuesta de Mac Funamizu, quien nos descubre una nueva manera de indicar a los pasajeros del metro su situación exacta y el recorrido de estaciones para la línea que han tomado, redimensionando el espacio y superando límites que en realidad no existían.
Mientras que los diferentes documentos de diseño expuestos hasta el momento registran diferentes facetas o dimensiones del diseño (por ejemplo, los wireframes registran la organización de los contenidos dentro de cada página, mientras que los patrones de diseño registran soluciones corroboradas a problemas recurrentes), los mapas del sitio web lo que persiguen es ofrecer una visión global del producto, su estructura general.
En estos documentos lo que se representan son las diferentes piezas de contenido (o grupos de piezas), y su relación. Ya que las piezas (y grupos) de contenido pueden tener muy diversos tipos de relaciones entre sí, normalmente las relaciones representadas suelen reducirse a las más relevantes, es decir, las jerárquicas.
Representar una jerarquía de elementos puede hacerse de muy diversas formas. Se puede simplemente crear un índice, donde cada ítem hijo se encuentre tabulado respecto al ítem padre, o se pueden usar diagramas en forma de árbol, donde las relaciones entre unidades se representen como conectores, los ítems como nodos, y el nivel jerárquico venga determinado por su ubicación vertical (figura 3.17).
Los mapas de sitio web, como documentos de diseño, tienen la peculiaridad de que suelen dar pie a sistemas de navegación que responden al mismo nombre, englobados por Rosenfeld y Morville (2002) bajo la categoría de sistemas de navegación suplementarios. El objetivo de los mapas de sitios web como sistemas de navegación es permitir al usuario obtener una visión global del sitio web, y servir de vía directa de acceso a las principales secciones o grupos de contenido del sitio web (véase ejemplo de la figura 3.18).
No obstante, la popularidad de estos mapas de navegación ha ido variando a lo largo de los años. Uno de los objetivos principales que motivaban la inclusión de estos mapas era que facilitaban la tarea de los robots de los buscadores, mejorando la indización del sitio y por tanto su posicionamiento en los resultados de búsqueda. Sin embargo, desde que Google introdujo el concepto de mapa de sitio web en XML - ficheros cuya función es indicar la ubicación de cada pieza de contenido al robot de forma directa- los mapas de sitio web tradicionales han perdido popularidad entre las tácticas de optimización para buscadores.
Sin embargo, aún persisten como sistema de navegación suplementario, aunque como demuestra La (2009) a través de numerosos ejemplos, lo que se está produciendo es un cambio en su presentación y ubicación. Si tradicionalmente los mapas se ubicaban tras un enlace de acceso (que recibía el nombre de ‘mapa del sitio’ o ‘site map’) ubicado en zonas superiores de la página, actualmente se percibe la tendencia de presentarlos directamente ubicados en el pie de todas las páginas del sitio. En el ejemplo de la figura 3.19 vemos cómo se presenta una versión reducida del mapa del sitio web a pie de página, incluyendo además un enlace al mapa completo.
Informe APEI de Usabilidad
Yusef Hassan Montero y
Sergio Ortega Santamaría
1.1. La experiencia del usuario
2.4. El sujeto como ser social
3. Diseño centrado en el usuario (DCU)
3.2. Metodologías y técnicas de DCU
3.3. Documentación del diseño
Citación recomendada:
Hassan-Montero, Y.; Ortega-Santamaría, S. (2009). Informe APEI sobre Usabilidad. Gijón: Asociación Profesional de Especialistas en Información, 2009, 73pp. ISBN: 978-84-692-3782-3.
