miércoles, 28 de marzo de 2012

Descripción extensa de una imagen: accesible con lector de pantalla y visible sin imágenes activas

El objetivo de este artículo es explicar cómo podemos tener una descripción extensa de una imagen en la propia página, de tal manera que:

  • sea accesible para los lectores de pantalla
  • se visualice cuando la imagen no esté cargada (bien porque tenemos las imágenes desactivadas, bien porque ya no se encuentra disponible, etc.)

Todo ello sin depender del atributo longdesc, que no siempre es soportado, ni de los típicos enlaces [D] junto a la imagen (conocidos como D-Link); y asegurando que no dé problemas cuando se deshabilita el javascript o las CSS.

Este artículo se me ocurrió después de leer el artículo de Steve Faulkner Detecting if images are disabled in browsers, en el cual explicaba cómo podemos detectar por javascript si las imágenes están deshabilitadas o no se han cargado.

Ver la página de ejemplo

Descargar el ejemplo (RAR, 13Kb)

La descarga y uso del ejemplo es completamente libre, pero os agradecería mucho que compartierais mejoras que se os ocurran o problemas que detectéis.

He probado su funcionamiento con NVDA, Explorer 7, Explorer 8, Explorer 9, Firefox 1.5, Firefox 2, Firefox 3, Firefox 11, Chrome 17, Opera 11, Safari 5 (para Windows) y desde una BlackBerry y una iPad. En Explorer 6 no hay problema para visualizar la descripción, pero se ve siempre presente como si el javascript estuviera deshabilitado.

HTML

El código HTML es XHTML 1.0 Strict válido y es el siguiente. En primer lugar tenemos la cabecera:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Ejemplo descripción extensa accesible de imágenes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Olga Carreras" />
<meta name="description" content="Descripciones extensas de imágenes accesibles con lectores de pantalla y sin imágenes activas" />

<link href="estilos.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="utils.js"></script>
</head>

Como se ve, estoy llamando a una CSS y a un JS que explico más adelante.

A continuación tenemos el cuerpo de la página:


<body>
<h1>Ejemplo de descripción extensa de una imagen: accesible con lector de pantalla y sin imágenes activas</h1>
<p>Olga Carreras. Ejemplo del artículo <a href="http://olgacarreras.blogspot.com">"Descripción extensa de una imagen: accesible con lector de pantalla y sin imágenes activas"</a></p>

Después de lo que es el título de la página y el enlace al artículo tenemos ya la imagen:


<div>
<img src="razones_uso_tecnologia_accesible.gif" alt="Razones de uso de la tecnología accesible" id="image1" class="images" />
<p><a href="#descripcion" title="Mostrar la descripción de la imagen Razones de uso de la tecnología accesible" id="linkDescripcion" class="oculto">Ver descripción de la imagen</a></p>
</div>

La imagen es un gráfico, por tanto el atributo ALT no es suficiente, necesitamos una descripción detallada la imagen.

Imagen compleja de un gráfico con un enlace bajo la misma Mostrar descripción de la imagen

Os preguntaréis la razón por la cuál he incluido a continuación de la imagen un enlace "Ver descripción de la imagen".

Ese enlace no es necesario puesto que si la imagen no está cargada se verá la descripción detallada y los lectores de pantalla no van a tener problemas para acceder a dicha descripción.

Sin embargo, puede darse el caso de usuarios con vista cansada o que accedan desde un dispositivo móvil y el tamaño de letra de la imagen les resulte pequeño (y no sepan o no puedan hacer zoom de la imagen)

En ese caso les puede ser de utilidad pulsar el enlace para ver la descripción.

El enlace es un ancla al comienzo de la descripción, después veremos que mediante javascript no intrusivo se le ha asignado una función que permite mostrar/ocultar la descripción detallada y personalizar el texto y el TITLE del enlace en función de si se visualiza o no la descripción.


<div id="descripcion" class="visible">
<h2><abbr title="Flechas que señalan a la imagen">< <</abbr> Descripción de la imagen: Razones de uso de la tecnología accesible</h2>
<h3>Por entorno laboral</h3>
<ul>
<li>Con discapacidad severa: 4%</li>
<li>Con discapacidad moderada: 3%</li>
<li>Sin discapacidad: 6%</li>
</ul>
[el resto de la descripción larga, no la pongo aquí toda]
</div>

Como vemos, a continuación se incluye la descripción detallada correctamente maquetada. Esta descripción se oculta una vez cargada la página mediante javascript no intrusivo, por tanto estará disponible tanto sin javascript activo como sin CSS activas.

Con CSS activas, tanto si pulsas el enlace como si no se carga la imagen, la descripción se posiciona a la derecha de la imagen.

Imagen compleja de un gráfico, con un enlace bajo la misma Ocultar descripción de la imagen y la descripción detallada de la imagen al lado de la misma

Por otro lado veremos que la descripción extensa se está ocultando de forma accesible, así que los usuarios que usan un lector de pantalla (podéis probarlo con NVDA) escuchan la descripción a continuación de la imagen y el enlace.


<div class="pie">
<p>Probad a deshabilitar javascript, css o imágenes. Para ver sin imágenes cargadas o sin javascript activo acordaros de recargar la página una vez que los desactivéis.</p>
<p>Para facilitaros verla sin la imagen cargada os dejo una copia de la misma página pero donde se ha escrito mal el nombre de la imagen y por tanto no la encuentra: <a href="descripcion_imagenes_accesibles_sinimg.html">Probar esta página cuando no se encuentra la imagen.</a></p>
</div>
</body>
</html>

En el pie de la página os recuerdo que si deshabilitáis el javascript, las CSS o las imágenes mientras visualizáis la página deberéis recargarla. Para facilitaros comprobar que, efectivamente, cuando no se carga la imagen se muestra por defecto la descripción a su lado, os pongo un enlace a una copia de la página donde he escrito mal el nombre de la imagen para comprobar cómo se ve la página sin la imagen cargada.

Hueco donde debería estar la imagen con un texto en su interior. A su derecha la descripción detalla de la imagen

Como se observa, cuando la imagen no se ha podido mostrar, se ve en el hueco que ocuparía la imagen su ALT, y junto a la imagen aparece por defecto la descripción detallada. Ya no se muestra el enlace "Ver descripción de la imagen" porque no es necesario.

Me parece importante destacar que se ha separado:

  • el contenido: eso es únicamente lo que vemos en la página HTML
  • la presentación: no se especifica ningún estilo en la página, todos están recogidos en la CSS
  • el código javascript: no hay ningún evento, ninguna función, nada que haga sospechar que esta página incluye javascript (salvo la llamada al JS en el HEAD). Todo el javascript, incluso las funciones que se llaman en el onLoad de la página, están definidas de forma no intrusiva.

CSS

La CSS es CSS 2.1 válida. No pongo toda la CSS, sólo aquello que es relevante para el ejemplo.


.oculto{
position:absolute;
left:-999em;
}

Con esta clase general "oculto" oculto aquellos elementos que me interesa:

  • al cargarse la página compruebo si la imagen se ha cargado, en cuyo caso oculto por javascript la descripción. Sin javascript activo, por tanto, la descripción se verá.
  • el enlace "Ver descripción de la imagen" tiene esta clase "oculto" por defecto y una vez cargada la página lo hago visible. De esta manera, sin javascript activo, el enlace no se muestra puesto que ya no es necesario.

La forma de ocultar (mediante posicionamiento fuera de pantalla) permite que los lectores de pantalla sí puedan acceder al contenido oculto, algo que no ocurre con display:none. Más detalles en "Ocultar contenido sin comprometer la accesibilidad ni el posicionamiento de la página"

Otros estilos que me interesa comentar son los de la imagen:


.images{
width:auto;
height:auto;
}
.widthImage1{
width:393px;
height:363px;
}

Por defecto indico que el ancho de las imágenes sea "auto". No puedo poner por defecto el tamaño real de la imagen porque el script se basa en comprobar si el ancho de la imagen es diferente del ancho que debería tener, en cuyo caso es que la imagen no está cargada.

Sin embargo tengo una clase con el tamaño real de la imagen porque en Safari y Chrome, si la imagen no tiene especificado su ancho y alto real, no se muestra su atributo ALT. Así que veremos que en el script, tras comprobar el ancho de la imagen para saber si la imagen está cargada, le aplico la clase "widthImage1", y de este modo en Safari y Chrome vemos su ALT.

JS


function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

La función "addLoadEvent" es la que nos permite llamar a funciones en el onLoad de la página de forma no intrusiva.

¿Qué funciones estamos llamando? Primero a addLoadEvent(noimage)


var Image1Width=393;
function noimage(){
var objImagen = document.getElementById('image1');
var objDescripcion = document.getElementById('descripcion');
var linkDescripcion = document.getElementById( 'linkDescripcion' );
objDescripcion.className = 'oculto';
linkDescripcion.className = 'visible';
if (objImagen.offsetWidth != Image1Width)
{
objDescripcion.className = 'visible';
objImagen.className = 'widthImage1';
linkDescripcion.className = 'oculto';
}
}

Lo primero que hago, como ya he comentado, es ocultar la descripción larga de la imagen y mostrar el enlace "Ver descripción de la imagen".

A continuación compruebo si el ancho de la imagen es diferente del ancho que debería tener, en cuyo caso es que la imagen no se ha cargado.

En la propuesta de S.Faulkner se comparaba si era igual a 1, pero esto no me funcionaba en todos los navegadores. Por eso lo comparo con el ancho real "393". Es más "sucio" porque no me sirve para todas las imágenes como el compararlo con 1, sino que he de personalizarlo para cada una, pero funciona en todos los navegadores.

Nota: Faulkner lo comparaba con 1 porque no le ponía ALT a las imágenes. Entonces el hueco de la imagen no se adaptaba al ALT y por eso su ancho era 1 cuando no estaba cargada. Como se debe poner ALT tenemos que hacerlo comparándolo con su ancho real. Por otro lado, indicar el ancho y alto de la imagen ayuda a las personas que ven la página sin la imagen cargada a hacerse una idea del tamaño que esta tenía.

En el caso de que la imagen no se haya cargado muestro la descripción, cambio la clase de la CSS aplicada a la imagen (ya he explicado en la CSS que es para que en Chrome y Safari se vea el atributo ALT dentro de la zona de la imagen) y oculto el enlace "Ver descripción de la imagen" porque el enlace ya no es necesario.

La otra función que llamo en el onLoad de la página es la siguiente:


addLoadEvent (function(){
var linkDescripcion = document.getElementById( 'linkDescripcion' );
var objDescripcion = document.getElementById('descripcion');
linkDescripcion.onclick = function(){
if (objDescripcion.className == 'oculto')
{
objDescripcion.className = 'visible';
linkDescripcion.innerHTML="Ocultar descripción de la imagen";
linkDescripcion.title="Ocultar la descripción de la imagen Razones de uso de la tecnología accesible"
}else{
objDescripcion.className = 'oculto';
linkDescripcion.innerHTML="Ver descripción de la imagen";
linkDescripcion.title="Mostrar la descripción de la imagen Razones de uso de la tecnología accesible"
}
}
}
)

Esta función añade al evento "onClick" del enlace "Ver descripción de la imagen" una función que:

  • Si la descripción de la imagen está oculta, al pulsar el enlace la mostraremos. Y a continuación cambiaremos el texto del enlace por su nueva acción "Ocultar descripción de la imagen" y cambiaremos también el TITLE de la imagen para que esté acorde con su nueva función de ocultar la descripción.
  • Si la descripción de la imagen está visible, al pulsar el enlace la ocultaremos. Y a continuación cambiaremos en texto del enlace por su nueva acción "Ver descripción de la imagen" y cambiaremos también el TITLE de la imagen para que esté acorde con su nueva función de mostrar la descripción.

Algo que no he hecho para que se viera más claro lo que hacían las funciones y que se debería hacer para separar el código javascript del texto concreto que queremos personalizar, sería definir esos literales en un fichero diferente de variables para que nos sean más sencillos de modificar. Así en el código sólo incluiriamos variables y no texto concreto.


Os animo ha que dejéis en los comentarios cualquier sugerencia de mejora o problema que detectéis.



Artículos relacionados:

lunes, 26 de marzo de 2012

Entrevista a Olga Carreras por Límit nord-est

Os dejo el enlace a la entrevista que me han hecho en Límit nord-est.

Entrevista amb Olga Carreras

jueves, 22 de marzo de 2012

Web Usability Guidelines–Directrices de usabilidad web

Artículo anterior: Qué teclas de acceso rápido (accesskey) utilizar

Última actualización: 26/03/2012

En el artículo Estándares formales de usabilidad y su aplicación práctica en una evaluación heurística definí qué es un estándar y la diferencia entre estándares oficiales (o “de jure” o formales) y estándares “de facto” (o no formales)

En dicho artículo traté los estándares oficiales, repasando las diferentes normas ISO existentes, donde destaca la norma ISO 9241-151 que presenta una checklist de validación.

Asimismo repasé diferentes propuestas basadas en estas normas ISO que incluían formas prácticas de aplicarlas en una evaluación heurística, en especial WUEP (Web Usability Evaluation Process)

Por ello incluí la descarga de una excel con las subcaracterísticas (y descripción), atributos (y su descripción) y métricas, a modo de herramienta de ayuda, para la elaboración de una evaluación de usabilidad de una web de acuerdo a la ISO 25000 (SQUARE), según el modelo propuesto por WUEP (Web Usability Evaluation Process)

En este artículo repaso, fuera ya de los que son los estándares formales, diferentes propuestas de directrices de usabilidad web, - algunas de las cuáles se pueden considerar estándares “de facto”-, con listas de verificación (checklist) asociadas, que permitan la evaluación heurística de los sitios en base a dichas directrices.

No está de más recordar que las directrices de usabilidad no pueden considerarse nunca reglas fijas ni pueden ser aplicadas por igual en todos los sitios web, siempre habrá que tener en cuenta y reflexionar sobre el tipo de sitio, su audiencia, sus objetivos o su contexto.

He seleccionado las que me parecen más relevantes, incluyendo al final un listado con otros enlaces de interés. Os animo a que dejéis en los comentarios aquellas que no he incluido pero os parecen relevantes.

Índice

HHS Guidelines

Las "HHS Guidelines" son las directrices de diseño web y usabilidad del Gobierno de EEEUU. Fueron desarrolladas por el U.S. Department of Health and Human Services (HHS) en 2004, de ahí que se las conozca como las HHS Guidelines.

Están disponibles en formato PDF en el documento Research-Based Web Design and Usability Guidelines (PDF 20.64 MB)

Fueron realizadas y revisadas por diseñadores y expertos de usabilidad basándose en la investigación de diferentes campos (citan en concreto: cognitive psychology, computer science, human factors, technical communication y usability)

En la actualidad cuenta con 209 directrices (en la primera edición eran 187) que, tras un estudio de cardsorting, se agruparon en 18 temas:

  1. Proceso de diseño y evaluación (11 directrices)
  2. Optimizando la experiencia de usuario (16 directrices)
  3. Accesibilidad (13 directrices)
  4. Hardware y software (5 directrices)
  5. La página de inicio (9 directrices)
  6. Esquema de la página (layout) (13 directrices)
  7. Navegación (12 directrices)
  8. Desplazamiento (scrolling) y paginado (5 directrices)
  9. Encabezados, títulos y etiquetas (8 directrices)
  10. Enlaces (14 directrices)
  11. Apariencia del texto (11 directrices)
  12. Listas (9 directrices)
  13. Controles y Widgets (25 directrices)
  14. Gráficos, imágenes y multimedia (16 directrices)
  15. Escribiendo contenido web (11 directrices)
  16. Organización del contenido (9 directrices)
  17. Búsqueda (9 directrices)
  18. Test de usabilidad (13 directrices)

Se puede consultar de forma individual cada uno de estos capítulos en la página Guidelines de la web usability.gov Esta web del Gobierno de EEUU recoge la metodología que se debe aplicar en la construcción de un sitio web bajo una metodología de Diseño Centrado en el Usuario, dentro de la cuál cumplir con estas directrices sólo es un paso más. Traté en profundidad esta web y su metodología propuesta en el artículo La usabilidad como metodología para el desarrollo de una aplicación

Dentro de cada capítulo las directrices están ordenadas de más a menos importantes. La estructura de cada directriz es la siguiente:

1:1 Provide Useful Content. Con tres apartados: guideline, comments y sources. Relative Importance: 5;Strength of evidence: 5

Como se aprecia consta de:

  • Numeración y título de la directriz ("1:1 Provide Useful Content")
  • Guideline, título extendido de la directriz;
  • Comments, descripción de la directriz indicando en qué consiste y por qué hay que cumplirla;
  • Sources, referencias sobre esta directriz;
  • Ejemplos, solo disponibles en algunas directrices.
  • Relativa Importance, importancia de la directriz que están clasificadas de 1 a 5 (5 las más importantes, 1 las menos importantes) La clasificación fue llevada a cabo por una encuesta a numerosos expertos en usabilidad.

  • Strength of Evidence, indica la "medida de confianza" clasificada de 1 a 5 (5 las que mayor nivel de confianza ofrecen y 1 las que menos) La medida de confianza está basada en la calificación dada por numerosos expertos en usabilidad (y en la que, según se indica, hubo alto grado de coincidencia) que buscaron evidencias de esa directriz en investigaciones, estudios, resultados de experimentos, etc.




La medida de confianza se define de la siguiente manera:

  • 5 – Strong Research Support

    • Cumulative and compelling, supporting research-based evidence
    • At least one formal, rigorous study with contextual validity
    • No known conflicting research-based findings
    • Expert opinion agrees with the research
  • 4 – Moderate Research Support

    • Cumulative research-based evidence
    • There may or may not be conflicting research-based findings
    • Expert opinion
    • Tends to agree with the research, and
    • A consensus seems to be building
  • 3 – Weak Research Support

    • Limited research-based evidence
    • Conflicting research-based findings may exist
    • - and/or -
    • There is mixed agreement of expert opinions
  • 2 – Strong Expert Opinion Support

    • No research-based evidence
    • Experts tend to agree, although there may not be a consensus
    • Multiple supporting expert opinions in textbooks, style guides, etc.
    • Generally accepted as a ’best practice’ or reflects ’state of practice’
  • 1 – Weak Expert Opinion Support

    • No research-based evidence
    • Limited or conflicting expert opinion

En el apéndice de la guía encontramos lo que puede servirnos de checklist (PDF 20.64 MB), que es el listado de todas las directrices agrupadas por su importancia.

Se puede consultar una comparativa entre la ISO 9241-151 y las HHS Guidelines en BEVAN, N. , SPINHOF, L. (2007): "Are guidelines and standards for web usability comprehensive?" (PDF)

247 directrices de usabilidad web de Userfocus

Userfocus propone 247 directrices de usabilidad que distribuye en 9 heurísticos:

  • Usabilidad de la página de inicio (20 directrices)
  • Orientado a tareas (44 directrices)
  • Navegación y Arquitectura de Información (29 directrices)
  • Formularios y entrada de datos (23 directrices)
  • Confianza y credibilidad (13 directrices)
  • Escritura y calidad de los contenidos (23 directrices)
  • Esquema de la página (layout) y diseño visual (38 directrices)
  • Usabilidad en la búsqueda (20 directrices)
  • Ayuda, feedback y tolerancia a errores (37 directrices)

Una gran ventaja es que ofrece gratuitamente una excel de trabajo con las 247 directrices (traducida al español) que facilita la valoración y la inclusión de comentarios.

Nielsen Norman Group Guidelines

Posiblemente los 10 heurísticos de Jakob Nielsen sean los más conocidos:

  1. Visibilidad del estado del sistema.
  2. Utilizar el lenguaje de los usuarios.
  3. Control y libertad para el usuario.
  4. Consistencia y estándares.
  5. Prevención de errores.
  6. Minimizar la carga de la memoria del usuario.
  7. Flexibilidad y eficiencia de uso.
  8. Los diálogos estéticos y diseño minimalista.
  9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores.
  10. Ayuda y documentación.

Según el propio Jakob Nielsen dispone de 2397 directrices de usabilidad repartidas en múltiples informes que lista en "Publications" de nngroup.com

Swedish National Guidelines for Public Sector Websites

La guía del Gobierno de Suecia Swedish National Guidelines for Public Sector Websites es especialmente completa. Las directrices están agrupadas por capítulos, dentro de los cuales se listan los heurísticos y las directrices asociadas.

Aunque no incluye checklists asociadas, las directrices están muy bien explicadas y tienen asociadas un nivel de prioridad (1, 2 y 3, siendo las de nivel 1 las más críticas)

En el capítulo "3. Website standards" se incluyen 58 directrices agrupadas en:

  • Estructura y navegación (9 directrices)
  • Color, contraste y tipografía (3 directrices)
  • Diseño (22 directrices)
  • Tablas de datos (5 directrices)
  • Formularios (11 directrices)
  • Aplicaciones web (3 directrices)
  • Manejo de errores (3 directrices)
  • Eventos del sistema (2 directrices)

En el capítulo Contenidos y servicios se incluyen 29 directrices agrupadas en:

  • Acerca de la autoridad (5 directrices)
  • Información básica (8 directrices)
  • Otros lenguajes (3 directrices)
  • Búsqueda (4 directrices)
  • Distribución de servicios y contenidos del sitio web (4 directrices)
  • Participación y transparencia (5 directrices)

En el capítulo Actualización del sitio web (o mantener el sitio al día) se incluyen 43 directrices agrupadas en:

  • Administración (1 directrices)
  • Seguimiento del uso y el contenido (6 directrices)
  • Información de "emergencia" en el sitio (6 directrices)
  • Escribir para la web (9 directrices)
  • Formato de la web (marcado HTML) (9 directrices)
  • Imágenes y gráficos (4 directrices)
  • Enlaces y documentos (8 directrices)

Hay otros capítulos como "Servicio mejor y más eficiente", "Proceso de desarrollo", "Contenido para dispositivos móviles", "Herramientas de publicación" o "Productos de apoyo para usar el sitio web".

Sirius

La propuesta de Mª del Carmen Suarez en su tesis Sirius: Sistema de Evaluación de la Usabilidad Web Orientado al Usuario y basado en la Determinación de Tareas Críticas (PDF, 3.39 MB) son 83 directrices dividas en:

  • Aspectos generales (10 directrices)
  • Identidad e información (7 directrices)
  • Estructura y navegación (14 directrices)
  • Rotulado (6 directrices)
  • Layout de la página (10 directrices)
  • Entendibilidad y facilidad en la interacción (7 directrices)
  • Control y retroalimentación (10 directrices)
  • Elementos multimedia (6 directrices)
  • Búsqueda (8 directrices)
  • Ayuda (5 directrices)

Hablé de su sistema en profundidad en Sirius. Nuevo sistema para la evaluación de la usabilidad web. Su método presenta numerosas ventajas, por ejemplo que la relevancia de los errores tienen en cuenta el tipo de sitio evaluado.

Permite elaborar una herramienta de evaluación que dé soporte al sistema planteado y facilite la validación empírica de la propuesta de evaluación. Proporcioné esta herramienta en formato excel: Checklist para la evaluación de la usabilidad web según la metodología Sirius. Versión 3 (XLSX)

Australia Government Usability Checklist

La Australia Government Usability Checklist es la más sencilla de todas las vistas hasta ahora. Está incluida dentro del conjunto de publicaciones "User Profiling and Testing Tollkit" del Gobierno de Australia.

Son 43 directrices clasificadas en 6 temas:

  • Arquitectura y navegación
  • Layout y diseño
  • Contenidos
  • Formularios
  • Plataforma e implementación
  • Accesibilidad (prioridad 1)

Guía para el Desarrollo de Sitios Web del Gobierno de Chile

Al igual que la del Gobierno de Australia, presenta una checklist de usabilidad bastante reducida.

Son 30 directrices divididas en los siguientes heurísticos:

  • Identidad corporativa
  • Utilidad del sitio web
  • Navegación
  • Visibilidad del estado del sistema
  • Consistencia y cumplimiento de estándares
  • Atención a errores
  • Estética y diseño
  • Ayuda a errores
  • Retroalimentacion (feedback)

Usability Guidelines del MIT (Massachusetts Institute of Technology)

En la web IST (Information Services & Technology) del MIT (Massachusetts Institute of Technology) encontramos el apartado "Usability at MIT" con numerosos recursos de interés.

Uno de estos recursos son las "Usability Guidelines", 62 directrices agrupadas en:

  • Navegación (5 directrices)
  • Funcionalidad (4 directrices)
  • Control del usuario (5 directrices)
  • Lenguaje y contenido (7 directrices)
  • Ayuda en línea y guías de usuario (2 directrices)
  • Feedback (7 directrices)
  • Accesibilidad (14 directrices)
  • Consistencia (2 directrices)
  • Prevención y correción de errores (8 directrices)
  • Claridad arquitectual y visual (8 directrices)

Directrices de usabilidad para sitios web del Estado colombiano

En 2010 M. Carvajal y J. Saab (2010) publicaban un documento muy interesante: “Documento de análisis de prácticas y recomendaciones mundiales en Usabilidad (PDF)” para el Ministerio de Tecnologías de la Información y las Comunicaciones de la República de Colombia. En él se repasan diferentes propuestas de diferentes países para concluir cuál sería la mejor forma de redactar unas recomendaciones de usabilidad para el Gobierno de Colombia.

Actualmente encontramos una versión 1.0.4 candidata a oficial (del 26 de agosto de 2010) en Directrices de usabilidad para sitios web del Estado colombiano (PDF, 4.1 MB).

Las directrices están organizadas así:

  • 1. Arquitectura de información

    • 1.1 Objetivos del portal web
    • 1.2 Personajes y escenarios
    • 1.3 Necesidades de los usuarios
    • 1.4 Evaluación constante
    • 1.5 Evaluación de la Arquitectura de Información
    • 1.6 Navegación global consistente
    • 1.7 Navegación de contexto
    • 1.8 Ruta de migas
    • 1.9 URL limpios
    • 1.10 Ubicación del usuario
    • 1.11 Tagline
    • 1.12 Enlaces bien formulados
    • 1.13 Memoria a corto plazo
  • 2. Diseño de Interfaz de Usuario

    • 2.1 Ubicación del logotipo
    • 2.2 Diseño ordenado y limpio
    • 2.3 Interfaces en movimiento
    • 2.4 Contenido que parece publicidad
    • 2.5 Contraste en brillo y color
    • 2.6 Información transmitida a través de color
    • 2.7 Justificación del texto
    • 2.8 Ancho del cuerpo de texto
    • 2.9 Fuentes tipográficas comunes
    • 2.10 Texto subrayado
    • 2.11 Uso adecuado del espacio en blanco
    • 2.12 Desplazamiento horizontal
    • 2.13 Vínculo a la página de inicio
    • 2.14 Tareas clave en la página de inicio
    • 2.15 Contenidos de ejemplo en la página de inicio
    • 2.16 Hojas de estilo para diferentes formatos
    • 2.17 Independencia de navegador
    • 2.18 Vínculos visitados
    • 2.19 Calidad del código
  • 3. Diseño de Interacción

    • 3.1 Campos obligatorios
    • 3.2 Asociación de etiquetas y campos
    • 3.3 Validación dinámica de datos
    • 3.4 Error de página no encontrada
    • 3.5 Ventanas emergentes
    • 3.6 Botón atrás
    • 3.7 Tiempo de carga de las páginas
    • 3.8 Ejemplos en los campos de formulario
    • 3.9 Páginas de confirmación

  • 4. Búsqueda

    • 4.1 Motor de búsqueda y ubicación
    • 4.2 Búsquedas con términos familiares y errores de digitación
    • 4.3 Sugerencias de búsqueda
    • 4.4 Ubicación en los 10 primeros resultados

  • 5. Pruebas de usabilidad

    • 5.1 Evaluación heurística
    • 5.2 Test de Usuario
    • 5.3 Diseño y evaluación iterativos

  • 6. Contenido

    • 6.1 Contenido útil
    • 6.2 Pirámide invertida
    • 6.3 Títulos y encabezados
    • 6.4 Listas
    • 6.5 Escaneado de contenido
    • 6.6 Vínculos rotos
    • 6.7 Contenido encontrable

Otro documento recomendable de M. Carvajal es La Guía Web 1.0 de Proexport (PDF) donde se aplican las directrices.

Otros enlaces de interés

En Index of Government Guidelines for Web Sites de Peter Krantz se puede encontrar las guías web de los diferentes gobiernos en el mundo. Algunas de interés que no he nombrado son:

El artículo "Official Usability, User Experience & User Interface Guidelines From Companies" de usabilitygeek.com, repasa las diferentes guías de directrices de compañías concretas (Adobe, Apple, IBM, Microsoft, etc.) aunque la que más me gusta es la de SUN, pero la de 1995: Sun Guide to Web Style

¿Añadirías alguna más?

Artículos anteriores

miércoles, 21 de marzo de 2012

Qué teclas de acceso rápido (accesskey) utilizar

Artículo anterior:
Estándares formales de usabilidad y su aplicación práctica en una evaluación heurística


El punto de verificación 9.5 de las WCAG 1.0 de nivel AAA indica Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario. [Prioridad 3] Por ejemplo, en HTML, especifique los atajos a través del atributo "accesskey"

En las WCAG 2.0 deja de ser un criterio de conformidad y pasa a ser una técnica adicional del criterio 2.4.1 de nivel A Evitar bloques: Existe un mecanismo para evitar los bloques de contenido que se repiten en múltiples páginas web".

Aunque no es obligatorio, yo sí que recomiendo incluir atajos de teclado. La duda que surge entonces es ¿qué accesskey incluir de forma que no entren en conflicto con las teclas de atajo de los menús del navegador? ¿hay algún estándar?

UK Government accesskeys standard

El Gobierno del Reino Unido estableció en 2002 las siguientes teclas de acceso rápido para sus portales web:

  • S - Skip navigation
  • 1 - Home page
  • 2 - What’s new
  • 3 - Site map
  • 4 - Search
  • 5 - Frequently Asked Questions (FAQ)
  • 6 - Help
  • 7 - Complaints procedure
  • 8 - Terms and conditions
  • 9 - Feedback form
  • 0 - Access key details

Consultar en: Uk Guidelines for government websites (PDF) (capítulo 2 "Content of websites". Apartado 2.4 "Building in universal accessibility + checklist". Subapartado 2.4.4 "UK Government accesskeys standard".

Estas accesskey se siguen utilizando como se observa por ejemplo en la web Directgov (UK government's digital service for people in England and Wales)

Swedish Government accesskeys standard

En Suecia, en las Swedish National Guidelines for Public Sector Websites (2008) (PDF), que establecen las normas a seguir por los portales de la Administración Pública, se definen también las teclas de acceso rápido que se han de utilizar.

Según se indica, están basadas en las del Reino Unido (The choices of access keys are inspired by the UK Government access keys):

  • S - Skip navigation, go directly to text content
  • 0 - “About the website”, accessibility information. Provided details on access keys
  • 1 - “Home” page
  • 2 - News. Collection of news
  • 3 - Content outline. A site map, or perhaps A-Z
  • 4 - Search. Should be connected to the search field that searches the entire website
  • 5 - Frequently Asked Questions (FAQ)
  • 6 - Help. For example, about a specific service.
  • 7 - Contact us. Page with contact details to important functions within the government agency.
  • 8 - Legal information. Page that describe the website’s privacy policy and how legal information such as cookies are handled.

Según se especifica, en la página "About the website" se deben indicar las teclas utilizadas y explicar su uso en diferentes navegadores y sistemas operativos.

Ninguna de estas teclas colisiona con los atajos de menú de los navegadores. La "S" no genera conflicto en los navegadores en castellano, aunque indican que en la versión sueca de IE6 sí colisiona con un menú.

Mi recomendación es que no reinventemos la rueda y usemos las accesskey propuestas por los gobiernos de Reino Unido y Suecia. Tienen la ventaja de no colisionar con el navegador y que son lo más cercano a un estándar "de facto" que existe, de modo que, si se generalizan, el usuario no deberá reaprenderlas de una web a otra.

Así que os animo a aplicar y difundir este estándar de accesskey.

Un ejemplo de uso y adaptación de estas accesskey lo implementamos en la web de la Clínica Universidad de Navarra.

Otros enlaces de interés


Artículos anteriores

jueves, 15 de marzo de 2012

Estándares formales de usabilidad y su aplicación práctica en una evaluación heurística

Este artículo incluye: Descarga de excel para ayudar en una evaluación de usabilidad según WUEP (Web Usability Evaluation Process), proceso explicado en el artículo y que se basa en la ISO 25000 (SQUARE) (más sobre WUEP (Web Usability Evaluation Process))

Índice

Qué es un estándar

“Estándar” es definido por la ISO (Organización Internacional de Estandarización) como:

documento establecido por consenso y aprobado por una institución reconocida, que prevé, para uso común y repetido, reglas, directrices y características para actividades o sus resultados, encaminada a la consecución del grado óptimo de definición en un contexto dado. Nota: las normas deben basarse en los resultados consolidados de la ciencia, la tecnología y la experiencia, y tener por finalidad promover beneficios óptimos.

[ISO/IEC Guide 2:2004, definición 3.2]

Tipos de estándares

Existen tres tipos de estándares:

  • los oficiales o “de jure”. Los estándares oficiales son aquellos que han sido aprobados y sancionados por un organismo oficial de estandarización.

    Como organismos oficiales de estandarización podemos destacar:

    Los estándares oficiales son a veces de obligado cumplimiento. De hecho en España no se puede hacer referencia en la legislación a estándares que no provengan de un organismo oficial de estandarización. Por ejemplo en España es obligatorio por ley que determinados tipos de sitios web cumplan con la Norma UNE 139803  que asegure su accesibilidad.

  • los “de facto”. Son aquellos que son promulgados por comités guiados por una entidad, organismo o compañía, se usan por voluntad propia o conveniencia y tienen una amplia aceptación, aunque no hayan sido sancionados por un organismo de estandarización.

    El caso más claro es el W3C (World Wide Web Consortium)  que crea estándares ampliamente aceptados y que a veces pasan a ser reconocidos como estándares oficiales (por ejemplo la Norma UNE 139803 se basa en las WCAG del W3C; y hay muchos países que en su legislación establecen que los sitios web cumplan con las WCAG)

  • Estándares propietarios de una corporación o entidad.

En el caso de la accesibilidad web son muy conocidos los estándares existentes, posiblemente porque son de obligado cumplimiento en muchos países.

Sin embargo los estándares de usabilidad no son tan conocidos. En el siguiente apartado se explica de manera sencilla y comprensible cuáles son los estándares oficiales de usabilidad. En el último apartado se abordará cómo se pueden aplicar en la práctica dichos estándares para realizar evaluaciones heurísticas de usabilidad.

Estándares formales de usabilidad

Orientados al proceso: ISO 9241 e ISO 13407

ISO 9241 Ergonomics of Human System Interaction

Está compuesta por 17 partes. La 1 y 2 es una introducción y guías para el empleo del estándar. De la 3 a la 9 tratan los requisitos y guías relacionadas con el hardware que impactan en el funcionamiento del software. De la 10 a la 11 se centran en los aspectos del software.

En realidad la norma se llamaba Ergonomic requirements for office work with visual display terminals (VDTs) pero en 2006 se le simplificó el nombre; y además se renumeraron sus partes para poder cubrir más temas como la interacción táctil (ISO 9241-920:2009) , la interacción con formularios (ISO 9241-143:2012)  o interfaces web (ISO 9241-151:2008)

La ISO 9241-11:1998 “Guidance on usability”, define la usabilidad como:

La medida con la que un producto se puede usar por usuarios determinados para conseguir objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso concreto.

Por tanto, los tres factores, los tres atributos de calidad son:

  • Efectividad: exactitud e integridad con la que los usuarios alcanzan los objetivos especificados, y por tanto implica la facilidad de aprendizaje, la ausencia de errores del sistema o la facilidad del mismo para ser recordado. Las métricas definidas son:
    • Número de tareas importantes realizadas
    • Porcentaje de funciones relevantes utilizadas
    • Porcentaje de tareas completadas con éxito al primer intento
    • Número de referencias a la documentación
    • Número de llamadas para soporte
    • Número de accesos a la ayuda
    • Número de funciones aprendidas
    • Porcentaje de usuarios capaces de aprender sus características
    • Porcentaje de errores corregidos o reportados por el sistema
    • Número de errores de los usuarios tolerados
    • Porcentaje de palabras leídas correctamente a una distancia de visualización normal
  • Eficiencia: recursos empleados (esfuerzo, tiempo, etc.) en relación con la exactitud e integridad con la que los usuarios alcanzan los objetivos especificados. Las métricas definidas son:
    • Eficiencia relativa en comparación con un usuario experto
    • Tiempo empleado en el primer intento
    • Eficiencia relativa en el primer intento
    • Tiempo empleado en reaprender funciones
    • Número de errores persistentes
    • Tiempo productivo
    • Tiempo para aprender características
    • Tiempo para reaprender características
    • Eficiencia relativa durante el aprendizaje
    • Tiempo empleado en la corrección de errores
  • Satisfacción: un factor subjetivo que implica una actitud positiva en el uso del producto. Las métricas definidas son:
    • Calificación (por parte del usuario) de su satisfacción con las características importantes
    • Tasa de uso voluntario del producto
    • Frecuencia de reutilización del producto
    • Calificación (por parte del usuario) de la facilidad de aprendizaje
    • Calificación (por parte del usuario) del tratamiento de errores

La ISO 9241‐11 recomienda un enfoque basado en procesos para evaluar la usabilidad, a través del Diseño Centrado en el Usuario (DCU). Por ello la ISO 9241 debe aplicarse en conjunto con la ISO 13407.

La ISO 9241-151:2008 “Guidance on World Wide Web user interfaces” referencia a la 9241-11 para la evaluación de criterios y a la ISO 13407 como guía de Diseño Centrado en el Usuario, puesto que señala que el diseño de interfaces web debe seguir un proceso de DCU.

Se pueden consultar comparativas de la 9241-151 con HHS Guidelines [USABILITY.GOB] en [BEVAN, 2005] y actualizado en [BEVAN, 2007]

Dentro de la ISO 9241-151 podemos destacar las siguientes directrices (viene cada una explicada y con ejemplos, y se puede encontrar una checklist para la evaluación al final del documento de la ISO):

  • 6. High-level design decisions and design strategy (11 directrices evaluables)
  • 7. Content design
    • 7.1 Conceptual content model (5 directrices evaluables)
    • 7.2 Content objects and functionality (19 directrices evaluables, 5 de las cuales referentes al 7.2.8 Privacy and business policies; y 7 al punto 7.2.9 Indivudualisation and user adaptation)
  • 8. Navigation and search
    • 8.1 General
    • 8.2 General guidance on navigation (5 directrices evaluables)
    • 8.3 Navigation structure (11 directrices evaluables, varias de ellas relativas a Splash screens)
    • 8.4 Navigation components (16 directrices evaluables)
    • 8.5 Search (22 directrices evaluables)
  • 9. Content presentation
    • 9.1 General
    • 9.2 Observing principles of human perception (1 directrices evaluables)
    • 9.3 Page design issues functions (17 directrices evaluables)
    • 9.4 Link design (15 directrices evaluables)
    • 9.5 Interaction objects (3 directrices evaluables)
    • 9.6 Text design (6 directrices evaluables)
  • 10. General design aspects
    • 10.1 Designing for cultural diversity and multilingual use (5 directrices evaluables)
    • 10.2 Providing help (1 directrices evaluable)
    • 10.3 Making Web user interfaces error-tolerant(2 directrices evaluables)
    • 10.4 URL names (1 directrices evaluable)
    • 10.5 Acceptable download times (1 directrices evaluable)
    • 10.6 Using generally accepted technologies and standards(1 directrices evaluable)
    • 10.7 Supporting common technologies(1 directrices evaluable)
    • 10.8 Making Web user interfaces robust(1 directrices evaluable)
    • 10.9 Designing for input device independence(1 directrices evaluable)
    • 10.10 Making the user interface of embedded objects usable and accessible


ISO 13407:1999. Human centred design processes for interactive systems

La ISO 13407:1999  ha sido revisada por la ISO 9241-210:2010 Ergonomics of human-system interaction – Part 210: Human-centred design for interactive systems.

La ISO 13407 proporciona una guía para alcanzar la calidad en el uso mediante la incorporación de actividades de naturaleza iterativa involucradas en el Diseño Centrado en el Usuario (DCU).

El Diseño Centrado en el Usuario (DCU) lo describe como una actividad multidisciplinar, que incluye factores humanos y conocimientos y técnicas de ergonomía con el objetico de mejorar la efectividad y eficiencia, las condiciones de trabajo y contrarrestar los posibles efectos adversos de su uso.

Describe los cuatro principios del Diseño Centrado en el Usuario:

  • Involucrar activamente a los usuarios
  • Asignación adecuada de funciones al sistema y el usuario
  • Soluciones de diseño iterativas
  • Diseño multidisciplinar

Y las cuatro actividades del Diseño Centrado en el Usuario:

  • Entender y especificar el contexto de uso
  • Especificar los requisitos del usuario y de la organización
  • Producir más de una solución de diseño candidata
  • Contrastar los diseños con los requisitos

Estándar ISO 13407. Se muestran las cuatro características enunciadas alrededor del texto El sistema satisface los requisitos del usuario y de la organización

Figura 1. Imagen tomada de [MONTERO, 2008, pág.6]

Como he dicho, la ISO 13407 ha sido revisada por la ISO 9241-210:2010 Ergonomics of human-system interaction – Part 210: Human-centred design for interactive systems que describe seis principios clave que caracterizan al Diseño Centrado en el Usuario [TRAVIS, 2011]:

  • El diseño está basado en una comprensión explícita de usuarios, tareas y entornos.
  • Los usuarios están involucrados durante el diseño y el desarrollo.
  • El diseño está dirigido y refinado por evaluaciones centradas en usuarios.
  • El proceso es iterativo.
  • El diseño está dirigido a toda la experiencia del usuario.
  • El equipo de diseño incluye habilidades y perspectivas multidisciplinares


Orientados al producto: ISO 9126 e ISO 14598

ISO 9126 Software engineering — Product quality

Es un estándar para evaluar la calidad del software. Esta dividida en cuatro partes:

  • ISO/IEC 9126‐1: 2001 : presenta el modelo de calidad que clasifica la calidad del software en un conjunto estructurado de características: funcionalidad, fiabilidad, usabilidad, eficiencia, mantenibilidad y portabilidad.

    Define la usabilidad como la capacidad que tiene un producto software para ser entendido, aprendido, operable, atractivo para el usuario y conforme a estándares/guías, cuando es utilizado bajo unas condiciones específicas.

    Por ello la usabilidad se divide en las siguientes subcaracterísticas:

    • Fácil de aprender: capacidad para ser aprendido en su manejo
    • Fácil de entender: capacidad del producto de ser entendido por nuevos usuarios en términos de su propósito y cómo puede ser usado en tareas específicas.
    • Fácil de operar: capacidad del producto de ser operado y controlado en cualquier momento.
    • Atractivo: capacidad del producto de ser atractivo para sus usuarios.
    • Conformidad: capacidad del producto para adherirse a estándares, convenciones, guías de estilo o regulaciones relacionadas con la usabilidad.

    External and Internal Quality: Functionality (Suitability, Accuracy, Interoperability, Security, Funcionality compliance), Reliability (Maturity, Fault Tolerance, Recoverability, Reliability compliance), Usability (Understand-ability, Learnability, Operability, Attractiveness), Efficiency (Time Behaviour, Resource Utilisation, Efficiency compliance), Maintainability (Analysability, Changeability, Stability, Testability, Maintainability compliance), Portability (Adaptability, Installability, Co-existence, Replaceability, Portability compliance)

    Figura 2. Modelo de calidad ISO/IEC 9126-1

  • ISO/IEC 9126‐2:2003 : describe las métricas externas que se pueden utilizar para evaluar el comportamiento del software cuando es operado por el usuario.
  • ISO/IEC 9126‐3:2003 : describe las métricas internas que se pueden utilizar para describir propiedades estáticas de la interfaz, que puede ser evaluadas por la inspección sin poner en funcionamiento el software.
  • ISO/IEC 9126‐4:2004 : describe las métricas de calidad que se pueden utilizar para evaluar el efecto del producto software cuando son operados por el usuario en determinados contextos de uso. Las métricas definidas son:

    • Efectividad (el método de aplicación definido para las tres es el test con usuarios)
      • Efectividad de las tareas: ¿qué proporción de objetivos de las tareas son logrados correctamente?
      • Tareas completadas, ¿qué proporción de tareas son completadas?
      • Frecuencia de los errores
    • Productividad (el método de aplicación definido para todas es el test con usuarios)
      • Tiempo de las tareas, ¿cuánto tiempo lleva completar una tarea?
      • Efectividad de las tareas, ¿cuán eficientes son los usuarios?
      • Productividad económica, ¿cómo de rentable es el usuario?
      • Porcentaje de producción, ¿qué proporción de tiempo dedica el usuario a acciones productivas?
      • Eficiencia relativa de los usuarios, ¿cómo de eficiente es el usuario comparado con un experto?
    • Seguridad (el método de aplicación definido para todos es el uso de estadísticas)
      • Salud y seguridad del usuario, ¿cuál es la frecuencia de problemas de salud entre usuarios del producto?
      • Seguridad de las personas afectadas por el uso del sistema, ¿cuál es la frecuencia de peligro para las personas afectadas por el uso del sistema?
      • Daños ergonómicos, ¿cuál es la frecuencia de daños ergonómicos?
      • Daños del software, ¿cuál es la frecuencia de la corrupción del software?
    • Satisfacción
      • Escala de satisfacción, ¿cómo de satisfecho está el usuario?
      • Cuestionario de satisfacción, ¿cómo de satisfecho esta el usuario con características específicas del software?
      • Uso discrecional, ¿qué proporción de potenciales usuarios eligen el uso del sistema? El método de aplicación definido es la observación del uso.

Puesto que la ISO 9126 se limita a la especificación de un modelo de calidad general, esta se debe aplicar en conjunto con la ISO 14598.



ISO 14598 Information technology — Software product evaluation

La ISO 14598  es un estándar que proporciona un marco de trabajo para evaluar la calidad de todo tipo de producto software e indica los requisitos para los métodos de medición y el proceso de evaluación. Consta de seis partes:

  • ISO/IEC 14598‐1: 1999 : provee una visión general de las otras cinco partes y explica la relación entre la evaluación del producto software y el modelo de calidad definido en la ISO/IEC 9126

    Proceso de evaluación de la ISO 14598 en conjunto con la ISO 9126. La 9126-1 se aplica al especificar el modelo de calidad, y el resto de partes de la 9126 y la 14598 se aplican en la selección de métricas.

    Figura 3. Imagen de [Férnandez-Martinez, 2009]

  • ISO/IEC 14598‐2: 2000 : contiene requisitos y guías para las funciones de soporte tales como la planificación y gestión de la evaluación del producto del software.
  • ISO/IEC 14598‐3: 2000 : provee los requisitos y guías para la evaluación del producto software cuando la evaluación es llevada a cabo en paralelo con el desarrollo por parte del desarrollador.
  • ISO/IEC 14598‐4:1999 : provee los requisitos y guías para que la evaluación del producto software sea llevada a cabo en función a los compradores que planean adquirir o reutilizar un producto de software existente o predesarrollado.
  • ISO/IEC 14598‐5: 1998 : provee los requisitos y guías para la evaluación del producto software cuando la evaluación es llevada a cabo por evaluadores independientes.
  • ISO/IEC 14598‐6:2001 : provee las guías para la documentación del módulo de evaluación.

Ventajas y desventajas de la definición de usabilidad como proceso y como producto

[Férnandez-Martinez, 2009] explica las ventajas y desventajas de la definición de la usabilidad como proceso o como producto vistas en el conjunto de normas anteriores:

Ventajas de la definición usabilidad como proceso:

  • Se identifican aspectos de usabilidad y componentes del contexto de uso que deben tenerse en cuenta en las fases de especificación de requisitos, diseño y evaluación de usabilidad.
  • El rendimiento y la satisfacción del usuario proporcionan medidas directas de usabilidad en un contexto específico.
  • Las medidas obtenidas proporcionan una base para comparar la usabilidad de varios diseños en un mismo contexto.

Desventajas de la definición usabilidad como proceso:

  • La usabilidad está estrictamente tratada desde una perspectiva de proceso, no centrada en el producto.
  • No tiene en cuenta la característica de “facilidad de aprendizaje”, siendo esta recomendada por otros estándares y expertos en usabilidad.
  • No tiene en cuenta aspectos de seguridad, considerados importantes por expertos del dominio.

Las ventajas de la definición de usabilidad como producto:

  • Existe un marco claramente definido y acordado en el modelo, que aclara la
  • Definición de usabilidad, y propone métricas para proporcionar evidencia objetiva de los logros.
  • Se puede utilizar como una referencia para los acuerdos contractuales entre un comprador y un proveedor de software, pudiendo ser utilizados además, para eliminar una serie de malentendidos entre el comprador y el proveedor.
  • Se propone un proceso de evaluación que puede ser adaptado a compradores, desarrolladores y evaluadores externos.

Desventajas de la definición de usabilidad como producto:

  • El conjunto de métricas se proporciona para sub‐características que a su vez engloban conceptos difícilmente medibles si no se descomponen en atributos
  • Existe superposición de conceptos, al definir usabilidad como una característica de calidad interna‐externa, y llamar calidad en uso a otras características también vinculadas a la usabilidad.
  • El tener por separado dos normas que se aplican conjuntamente produce inconsistencias en los ciclos de vida de ambas dificultando su uso.

ISO 25000 (SQUARE): unificación y revisión de los estándares ISO/IEC 9126 e ISO/IEC 14598

La ISO 25000:2005  se conoce como SQUARE (Software Quality Requirement Evaluation) y básicamente se trata de una unificación y revisión de los estándares ISO/IEC 9126 e ISO/IEC 14598.

Su objetivo principal es guiar el desarrollo de los productos de software con la especificación y evaluación de requisitos de calidad.

Calidad interna/externa: funcionalidad, portabilidad, mantenibilidad, eficiencia, usabilidad, fiabilidad

Figura 4. Imagen de [ISO25000.com]

La norma está formada por las siguientes divisiones [ISO25000.com, b]:

  • División de gestión de calidad (ISO/IEC 2500n): los estándares que forman esta división definen todos los modelos comunes, términos y referencias a los que se alude en las demás divisiones de SQuaRE.
  • División del modelo de calidad (ISO/IEC 25001n): el estándar que conforma esta división presenta un modelo de calidad detallado, incluyendo características para la calidad interna, externa y en uso. 
  • División de mediciones de calidad (ISO/IEC 25002n): los estándares pertenecientes a esta división incluyen un modelo de referencia de calidad del producto software, definiciones matemáticas de las métricas de calidad y una guía práctica para su aplicación. Presenta aplicaciones de métricas para la calidad de software interna, externa y en uso.
  • División de requisitos de calidad (ISO/IEC 25003n): los estándares que forman parte de esta división ayudan a especificar los requisitos de calidad. Estos requisitos pueden ser usados en el proceso de especificación de requisitos de calidad para un producto software que va a ser desarrollado ó como entrada para un proceso de evaluación.
  • División de evaluación de la calidad (ISO/IEC 25004n): estos estándares proporcionan requisitos, recomendaciones y guías para la evaluación de un producto software, tanto si la llevan a cabo evaluadores, como clientes o desarrolladores.

En el modelo de calidad hay tres vistas del modelo según el contexto: modelo de calidad de software, modelo de calidad de datos y modelo de calidad en uso, que puede tener distintas vistas según la parte beneficiaria que consideremos (usuario final, organización y soporte técnico)

Considerando la vista del usuario final tendríamos una definición de usabilidad más cercana a la planteada en la ISO 9241‐11.

Vistas de la calidad en uso según las partes beneficiarias: usuario final (efectividad del usuario, productividad del usuario, riesgos para el usuario, satisfacción del usuario); organización (efectividad de las tareas, coste-eficiencia, riesgo comercial, satisfacción en la gestión); soporte técnico (efectividad del mantenimiento, coste del mantenimiento, corrupción o fallos del software, satisfacción del mantenimiento)

Figura 5. Imagen [Férnandez-Martinez, 2009]

En el modelo de calidad de software la usabilidad se mantiene como una característica más del producto, pero que se llama operabilidad, y tiene alguna diferencia respecto a la ISO 9126, siendo sus subcaracterísticas:

  • Fácil de aprender: capacidad para ser aprendido en su manejo
  • Fácil de entender: capacidad del producto de ser entendida por nuevos usuarios en términos de su propósito y cómo puede ser usado en tareas específicas.
  • Fácil de usar: capacidad del producto de ser operado y controlado en cualquier momento.
  • Atractivo: capacidad del producto de ser atractivo para sus usuarios.
  • Conformidad: capacidad del producto para adherirse a estándares, convenciones, guías de estilo o regulaciones relacionadas con la usabilidad.
  • Facilidad de ayuda: hace referencia al grado con el que el producto ofrece ayuda a los usuarios cuando la necesitan, algo que en la ISO 9126 se consideraba implícita en la facilidad de aprender.
  • Accesibilidad técnica: hace referencia a cómo el producto software puede ser usado por personas con discapacidad.

Tanto [Férnandez-Martinez, 2009, pp. 48 y ss] como [RUIZ MORILLA, 2009] comparan y enumeran las ventajas y desventajas de la ISO 25000 frente a sus predecesoras ISO/IEC 9126 y ISO/IEC 14598.

Aplicación práctica de los estándares formales en la evaluación heurística de la web

Hemos visto que la ISO 9126 es un estándar oficial de usabilidad orientado al producto que ha sido revisado en la ISO 25000.

Por otra parte, hemos visto que en estas normas se definen una serie de características y subcaracterísticas de la usabilidad.

¿Cómo podemos aplicarlo de forma práctica en la evaluación heurística de una web?

Una buena respuesta es mediante WUEP (Web Usability Evaluation Process), la tesina de Adrián Fernández Martínez [FERNANDEZ-MARTINEZ, 2009]

WUEP (Web Usability Evaluation Process)

La WUEP define un proceso genérico de usabilidad para metodologías de desarrollo Web basadas en modelos. Presenta una guía detallada para realizar evaluaciones de usabilidad integrando todos los atributos de usabilidad posibles desde la perspectiva del concepto de usabilidad que ofrece la ISO 25000 (SQUARE)

El modelo de usabilidad web tiene en cuenta la división en subcaracterísticas y el modelo de calidad propuesto por SQuaRE. Como están subcaracterísticas son muy genéricas y están a un alto nivel de abstracción, descompone dichas subcaracterísticas en atributos cercanos al dominio Web, intentando que las definiciones de las atributos se solapen lo mínimo posible entre ellas, con el objetivo de obtener un modelo de usabilidad lo más amplio posible centrado en el ámbito de las aplicaciones Web.

En esa extensión del modelo hacia productos Web se tienen en cuenta los criterios ergonómicos de [BASTIEN y SCAPIN, 1993], las pautas de usabilidad del Gobierno de EEUU [USABILITY.GOB] (conocidas como las HHS Guidelines), y otras métricas generalmente aceptadas con el objetivo de proveer un conjunto de métricas genéricas que puedan ser operacionalizadas en distintos niveles de abstracción y en distintos métodos de desarrollo Web.

Cada métrica tiene asociada un único atributo, pudiendo pertenecer este a cualquier vista del modelo, con el objetivo de descubrir problemas de usabilidad en base a los valores obtenidos de la métrica, pudiendo además cuantificar cómo dicho atributo afecta al nivel de usabilidad de la aplicación Web.

En este modelo hay dos tipos de evaluaciones uno sería el equivalente a una evaluación heurística, que a su vez puede ser de tres tipos: PIM o independiente de la plataforma, PSM o específico de una plataforma y CM o informe de usabilidad de la aplicación final; el segundo tipo de evaluación sería el de la evaluación de calidad en uso con test de usuarios.

Integración de evaluaciones de usabilidad en el contexto DSDM. Se asocia cada fase de desarrollo con un tipo de evaluación. Evaluación PIM en el análisis y desarrollo; evaluación PSM en la transformación en modelos; la evaluación CM en la generación de código; y la evaluación en uso en la aplicación final

Por otra parte, señalar que WUEP extiende y adapta el método de evaluación de calidad de la ISO 25004n para su integración en evaluaciones de usabilidad:

Proceso de evaluación de usabilidad WUEP en SPEM 2

Otras propuestas

Mplu+a

En el año 2004, Toni Granollers i Saltiveri [GRANOLLERS, 2004], profesor de la Universidad de Lleida, presentaba su tesis doctoral: "MPIu+a. Una metodología que integra la Ingeniería del Software, la Interacción Persona-Ordenador y la Accesibilidad en el contexto de equipos de desarrollo multidisplinares", una metodología que emplea los estándares ISO/IEC 9126 e ISO/IEC 9241, así como las guías de accesibilidad propuestas por el World Wide Web Consortium (W3C). La trate con detenimiento en [CARRERAS, 2008]

WebQEM

[OLSINA y ROSSI, 2002] especifican características y atributos basados en la norma ISO/IEC 9126-1, aplicando métricas para cuantificar los atributos.

WQM (Web Quality Model)

[CALERO et al.] establece características de calidad basadas en la ISO/IEC 9126-1 y los procesos del ciclo de vida de un sitio Web basándose en la ISO/IEC 12207. Incorpora un total de 326 métricas Web que han sido validadas teórica y/o empíricamente, indicando cuáles de ellas se prestan mejor a automatizar su cálculo. Ver la clasificación de sus métricas

QUIM (Quality in Use Integrated Measurement)

[Seffah et al.] se basa en la ISO 9241-11 y establece 10 subcaracterísticas que se descomponen en 26 atributos o criterios medibles. En el tercer nivel encontramos 127 métricas de usabilidad asociadas a los atributos. Posee una herramienta de gestión llamada QUIM Editor [STRIKE, 2003]

Referencias

AENOR (Asociación Española de Normalización y Certificación)

BASTIEN, J. M.; SCAPIN, D. L. (1993): “Ergonomic Criteria for the Evaluation of Human-Computer Interfaces”, version 2.1

BEVAN, N. (2005): "Guidelines and Standards for Web Usability"

- (2006): “International Standards for HCI” , mayo 2006

- BEVAN, N. , SPINHOF, L. (2007): “Are guidelines and standards for web usability comprehensive?”

- Nivel Began Published Papers: http://www.nigelbevan.com/cart.htm

CALERO, C.; RUIZ, J.; PIATTINI, M. (2005): “Classifying Web metrics using the Web Quality Model”. Emerald Group Publishing Limited. ISSN: 1468‐4527. Vol.29, nº 3, pp. 227‐248,

CARRERAS MONTOTO, O. (2008), “Metodología DCU MPlu+a”, marzo 2008

Comité Europeo de Normalización (CEN)

FERNANDEZ MARTINEZ, A. (2009): “WUEP: Un Proceso de Evaluación de Usabilidad Web Integrado en el Desarrollo de Software Dirigido por Modelos”

GRANOLLERS, T. (2004): “MPIu+a. Una metodología que integra la Ingeniería del Software, la Interacción Persona‐Ordenador y la Accesibiiad en el contexto de equipos de desarrollo multidisciplinares”. Tesis Doctoral, Departament de Llenguatges i Sistemas Informàtics. Universitat de Lleida

ISO25000.com: “Calidad del Producto Software y la norma ISO/IEC 25000”,

- [ISO25000.com, b]: “La Norma ISO/IEC 25000:2005”,

MONTERO SIMARRO, F. (2008): “Tema 2. El diseño centrado en el usuario

OLSINA, L.; ROSSI, G. (2002): “Measuring Web Application Quality with WebQEM”. IEEE Multimedia, Vol. 9, nº 4, pp. 20‐29.

Organización Internacional de Estandarización (ISO)

RUIZ MORILLA, J.J. (2009): “ISO 9126 vs. SQuaRE

SCALONE, F. (2006): “Estudio comparativo de los modelos y estándares de calidad del software”, junio de 2006

TRAVIS, D. (2011): “ISO 13407 is dead. Long live ISO 9241-210!”, Userfocus, 6/6/2011

TRAVIS, D. (2014): “Bluffers’ Guide to ISO 9241”, Userfocus, 9th Edition, October 2014

SEFFAH, A.; Donyaee, M.; Kline, R.B.; Padda, H.K. (2006): Usability measurement and metrics: A consolidated model . Software Quality Journal 14(2), pp. 159-178.

STRIKE, J. (2003): “QUIM Editor: a Tool for Quality in Use Measurement

USABILITY.GOB: “Research-Based Web Design & Usability Guidelines

USABILITYNET (2006): “International standards for HCI and usability

Normas ISO referenciadas: