Informe APEI sobre Usabilidad

La APEI (Asociación Profesional de Especialistas en Información) ha editado el “Informe APEI sobre Usabilidad” desarrollado por Yusef Hassan Montero y Sergio Ortega Santamaría (ver los créditos al final de este post).

El informe tiene por objetivo introducir al lector en el amplio tema de la usabilidad. Además de tratar conceptos relacionados como accesibilidad, experiencia de usuario, simplicidad o arquitectura de información, el trabajo describe los principios clave para comprender el factor humano en procesos interactivos, y analiza las metodologías y técnicas más relevantes en la práctica del diseño de productos interactivos usables.

En el documento se tratan temas sobre los factores humanos relativos a la usabilidad tales como la experiencia del usuario, la simplicidad, la percepción visual y la cognición. Pero, desde nuestro punto de vista, lo más interesante del informe es el tema dedicado al diseño centrado en el usuario (DCU).

En este post incluimos un resumen con lo que nos ha parecido más relevante en términos de usabilidad en diseño web. Añadimos textos capturados directamente del informe, así como imágenes y diagramas incluidos en el documento original que nos parecen útiles para ilustrar estos conceptos.

Usabilidad

El Diseño Centrado en el Usuario (DCU), o User Centered Design (UCD), es definido por la Usability Professionals Association (UPA) como un enfoque de diseño cuyo proceso está dirigido por información sobre las personas que van a hacer uso del producto. El DCU es un proceso cíclico en el que las decisiones de diseño están dirigidas por el usuario y los objetivos que pretende satisfacer el producto, y donde la usabilidad del diseño es evaluada de forma iterativa y mejorada incrementalmente.

De acuerdo a la norma ISO 13407, podemos desgranar este proceso en cuatro fases:

• Entender y especificar el contexto de uso: Identificar a las personas a las que se dirige el producto, para qué lo usarán y en qué condiciones.
• Especificar requisitos: Identificar los objetivos del usuario y del proveedor del producto deberán satisfacerse.
• Producir soluciones de diseño: Esta fase se puede subdividir en diferentes etapas secuenciales, desde las primeras soluciones conceptuales hasta la solución final de diseño.
• Evaluación: Es la fase más importante del proceso, en la que se validan las soluciones de diseño (el sistema satisface los requisitos) o por el contrario se detectan problemas de usabilidad, normalmente a través de test con usuarios.

El informe incluye un capítulo sobre Metodologías y técnicas de DCU que pretende servir de guía metodológica, respondiendo a preguntas fundamentales sobre cada técnica: su descripción (qué), su procedimiento (cómo), su ubicación en el ciclo del producto (cuándo), y qué limitaciones o problemas pueden presentar. En esta sección se describen, entre otros, métodos como el Test de Usuarios, la Evaluación Heurística, el Card Sorting, el Eye-Tracking y la Etnografía.

Usabilidad Web

En lo referente a la usabilidad web, el informe hace incapie en temas como:

Inventarios de Contenido de las páginas:

En cuanto al inventariado de los contenidos de las páginas web, los autores del estudio comentan la disyuntiva entre la conveniencia o no de realizarlo. Por una parte incluyen las referencias a Usability.gov, Maurer y Veen donde se habla de las bondades de este proceso y se incluyen los campos que debería tener un inventario de contenidos y, por otra, la opinión de Reichelt que es totalmente opuesta a la realización de un inventario.

“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 (http://www.usability.gov/design/inventory.html) proponen los siguientes campos a incluir en el inventario:

• La temática general del contenido.
• El título.
• URL (o nombre del fichero).
• Breve descripción del contenido.
• Fecha de creación.
• Fecha de la última revisión o modificación.
• Autor o creador (si se conoce).
• Responsable actual del contenido.
• Fecha en la que debe ser revisado el contenido.
• Fecha de caducidad del contenido.
• Páginas enlazadas en el contenido.
• El “estatus” del contenido. Es decir, qué acciones hay programadas o se están realizando sobre éste (ej.: revisión, eliminación, adaptación…).

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:

• Identificador del contenido (facilitándonos su gestión).
• Nombre (título o descripción).
• URL o localización.
• Tipo de documento. En este caso no se refiere a su formato (html, pdf, etc…), sino al tipo documental (notas de prensa, información legal, ficha de producto, etc…).
• Palabras clave que describan la temática del contenido.
• Responsable o Autor del contenido.
• ROT. Acrónimo que se refiere a Redundante, Obsoleto o Trivial. Con este campo se pretende identificar los contenidos que pueden ser candidatos a eliminación.
• Notas: cualquier información adicional que pueda resultar de utilidad sobre el contenido.

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.”

Documentación en diseño centrado en el usuario:

• Documentos de investigación con usuarios

“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. 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 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.“

Sobre el tema de la documentación de los datos obtenidos del proceso de interacción con los usuarios, los autores del artículo comentan la técnica ‘Persona-Scenario’ (Copper; 1999) (Cooper, Reimann, Cronin; 2007), que 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.

• Documentos de diseño

Wireframes

“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.

Entre las herramientas que pueden utilizarse en la elaboración de wireframes, podemos destacar (Ronda-León; 2007) (Barber; 2009):

• Herramientas generales de diagramación:

• Microsoft Visio: Fink (2005) y Abbett (2008) ofrecen ‘stencils’ de Visio específicamente ideados para la elaboración de wireframes.
• OmniGraffle: En graffletopia.com podemos encontrar ‘stencils’ para elaborar wireframes para esta aplicación

• Herramientas específicas:

• Balsamiq (http://www.balsamiq.com)
• Axure (http://www.axure.com)
• The Pencil Project (http://www.evolus.vn/Pencil/) (Gratuita)

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.“

Ejemplo de wireframe

• Diagramas de interacción

“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: documento de secuencias del estado de la interfaz (mezcla entre un wireframe y un storyboard) y documentos con los diagramas de flujo de interacción (documentan las posibles acciones del usuario y las respuestas del sistema se representan en forma de diagramas, mediante elementos (nodos) y conectores).

Secuencia de estado de interfaz

Diagrama de flujo de interacción

• Patrones de 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):

• 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, capturas de interfaz,…).
• 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: Posibilitan que otros puedan aportar información, experiencias y opiniones sobre el patrón.
• Autor: Persona que propone el patrón.
• Palabras clave: Describen los conceptos principales tratados en el patrón.
• Copyright: Información sobre los derechos de autor del patrón.

Actualmente existen numerosas librerías o repositorios de patrones de diseño accesibles online, entre los que cabe destacar:

• Yahoo! Pattern Library (http://developer.yahoo.com/ypatterns)
• Welie.com, Patterns in Interaction Design (www.welie.com)”

• Mapas del sitio

“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.

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.“

Mapa del sitio web: jerarquía de elementos

Bibliografía:

En el informe se añade una extensa bibliografía sobre usabilidad web a la que podéis acceder en este enlace.

Fuente: Informe APEI sobre Usabilidad.

Creditos del artículo original:

Titulo: Informe APEI sobre usabilidad

Autores:  Yusef Hassan Montero y Sergio Ortega Santamaría

Gijón: Asociación Profesional de Especialistas en Información, 2009

D. L.: AS-06633-2008
ISBN: 978-84-692-3782-3

Dirección editorial: Raquel Lavandera Fernández

The Informe APEI sobre Usabilidad by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.