Gua de Evaluacin Heurstica de Sitios Web

Yusef Hassan Montero [Web Personal] Francisco Jess Martn Fernndez [Web Personal] 30 de Marzo, 2003 Introduccin Este documento tiene por objeto servir de gua general para la evaluacin de la usabilidad de sitios web. Es una versin resumida de la gua que nosotros utilizamos en nuestra actividad profesional, aunque lo suficientemente extensa y especfica como para resultar de utilidad a aquellos profesionales que requieran de un documento base (que poder extender segn sus propias necesidades) con el que empezar a trabajar en evaluacin heurstica. La Gua est estructurada en forma de checklist, para facilitar la prctica de la evaluacin. Como se puede observar, todas las puntos estn formulados como preguntas, dnde la respuesta afirmativa implica que que no existe un problema de usabilidad, y la negativa que si. Los diferentes criterios en los que estn clasificados todos los puntos a evaluar son: GENERALES IDENTIDAD E INFORMACIN LENGUAJE Y REDACCIN ROTULADO ESTRUCTURA Y NAVEGACIN LAY-OUT DE LA PGINA BSQUEDA ELEMENTOS MULTIMEDIA AYUDA ACCESIBILIDAD CONTROL y RETROALIMENTACIN Generales Cules son los objetivos del sitio web? Son concretos y bien definidos? Los contenidos y servicios que ofrece se corresponden con esos objetivos? Tiene una URL correcta, clara y fcil de recordar? Y las URL de sus pginas internas? Son claras y permanentes?

Muestra de forma precisa y completa qu contenidos o servicios ofrece realmente el sitio web? Esto est relacionado directamente con el diseo de la pgina de inicio, que debe ser diferente al resto de pginas y cumplir la funcin de 'escaparate' del sitio. La estructura general del sitio web est orientada al usuario? Los sitios web deben estructurarse pensando en el usuario, sus objetivos y necesidades. No se debe calcar la estructura interna de la empresa u organizacin, al usuario no le interesa cmo funciona o se organiza la empresa. El look & feel general se corresponde con los objetivos, caractersticas, contenidos y servicios del sitio web? Por ejemplo, los colores empleados. Aunque el significado que comunica un determinado color es muy subjetivo y dependiente de la cultura y el entorno, y por lo tanto diferente para cada usuario, ciertas combinaciones de colores ofrecen una imagen ms o menos formal, seria o profesional, como pueden ser los tonos de azules con el blanco, que trasmiten una imagen corporativista. Es coherente el diseo general del sitio web? Se debe mantener una coherencia y uniformidad en las estructuras y colores de todas las pginas. Esto sirve para que el usuario no se desoriente en su navegacin. Es reconocible el diseo general del sitio web? Cunto ms se parezca el sitio web al resto de sitios web, ms fcil ser de usar. El sitio web se actualiza peridicamente? Indica cundo se actualiza? Las fechas que se muestren en la pgina deben corresponderse con actualizaciones, noticias, eventos...no con la fecha del sistema del usuario. Identidad e Informacin Se muestra claramente la identidad de la empresa-sitio a travs de todas las pginas? El Logotipo, es significativo, identificable y suficientemente visible? El eslogan o tagline, expresa realmente qu es la empresa y qu servicios ofrece? Se ofrece algn enlace con informacin sobre la empresa, sitio web, 'webmaster',...? Se proporciona mecanismos para ponerse en contacto con la empresa? (email, telfono, direccin postal, fax...)

Se proporciona informacin sobre la proteccin de datos de carcter personal de los clientes o los derechos de autor de los contenidos del sitio web? En artculos, noticias, informes...Se muestra claramente informacin sobre el autor, fuentes y fechas de creacin y revisin del documento? Lenguaje y Redaccin El sitio web habla el mismo lenguaje que sus usuarios? Se debe evitar usar un lenguaje corporativista. As mismo, hay que prestarle especial atencin al idioma, y ofrecer versiones del sitio en diferentes idiomas cuando sea necesario. Emplea un lenguaje claro y conciso? Es amigable, familiar y cercano? Es decir, lo contrario a utilizar un lenguaje constantemente imperativo, mensajes crpticos, o tratar con "desprecio" al usuario. 1 prrafo = 1 idea? Cada prrafo es un objeto informativo. Trasmita ideas, mensajes...Se deben evitar prrafos vacos o varios mensajes en un mismo prrafo. Rotulado Los rtulos, son significativos? Ejemplo: evitar rtulos del tipo "haga clic aqu". Usa rtulos estndar? Siempre que exista un "estndar" comnmente aceptado para el caso concreto, como "Mapa del Sitio" o "Acerca de...". Usa un nico sistema de organizacin, bien definido y claro? No se deben mezclar sistemas de organizacin diferentes. Los diferentes sistemas de organizacin son bsicamente: alfabtico, geogrfico, cronolgico, temtico, orientado a tareas, orientado al pblico y orientado a metforas. Utiliza un sistema de rotulado controlado y preciso? Por ejemplo, si un enlace tiene el rtulo "Quines somos", no puede dirigir a una pgina cuyo encabezamiento sea "Acerca de", o un enlace con el rtulo "Ayuda" no puede dirigir a una pgina encabezada con "FAQs". El ttulo de las pginas, Es correcto? Ha sido planificado? Relacionado con la 'findability' del sitio web.

Estructura y Navegacin La estructura de organizacin y navegacin, Es la ms adecuada? Hay varios tipos de estructuras: jerrquicas, hipertextual, facetada,... En el caso de estructura jerrquica, Mantiene un equilibrio entre Profundidad y Anchura? En el caso de ser puramente hipertextual, Estn todos los clusters de nodos comunicados? Aqu se mide la distancia entre nodos. Los enlaces son fcilmente reconocibles como tales? su caracterizacin indica su estado (visitados, activos,...)? Los enlaces no slo deben reconocerse como tales, sino que su caracterizacin debe indicar su estado (para orientar al usuario), y ser reconocidos como una unidad (enlaces que ocupan ms de una lnea). En mens de navegacin, Se ha controlado el nmero de elementos y de trminos por elemento para no producir sobrecarga memorstica? No se deben superar los 72 elementos, ni los 2 o, como mucho, 3 trminos por elemento. Es predecible la respuesta del sistema antes de hacer clic sobre el enlace? Esto est relacionado con el nivel de significacin del rtulo del enlace, aunque tambin con: el uso de globos de texto, informacin contextual (indicar formato y tamao del documento o recurso con el que vincula el enlace), la barra de estado del navegador,... Se ha controlado que no haya enlaces que no llevan a ningn sitio? Enlaces que no llevan a ningn sitio: Los enlaces rotos, y los que enlazan con la misma pgina que se est visualizando (por ejemplo enlaces a la "home" desde la misma pgina de inicio) Existen elementos de navegacin que orienten al usuario acerca de dnde est y cmo deshacer su navegacin? ...como breadcrumbs, enlaces a la pgina de inicio,...recuerde que el logo tambin es recomendable que enlace con la pgina de inicio. Las imgenes enlace, se reconocen como clicables? incluyen un atributo 'title' describiendo la pgina de destino? En este sentido, tambin hay que cuidar que no haya imgenes que parezcan enlaces y en realidad no lo sean.

Se ha evitado la redundancia de enlaces? Se ha controlado que no haya pginas "hurfanas"? Pginas hurfanas: que an siendo enlazadas desde otras pginas, stas no enlacen con ninguna. Lay-Out de la Pgina Se aprovechan las zonas de alta jerarqua informativa de la pgina para contenidos de mayor relevancia? (como por ejemplo la zona central) Se ha evitado la sobrecarga informativa? Esto se consigue haciendo un uso correcto de colores, efectos tipogrficos y agrupaciones para discriminar informacin. Al igual que en los elementos de un men de navegacin, los grupos diferentes de objetos informativos de una pgina, no debern superar el nmero 72. Es una interfaz limpia, sin ruido visual? Existen zonas en "blanco" entre los objetos informativos de la pgina para poder descansar la vista? Se hace un uso correcto del espacio visual de la pgina? Es decir, que no se desaproveche demasiado espacio con elementos de decoracin, o grandes zonas en "blanco", y que no se adjudique demasiado espacio a elementos de menor importancia. Se utiliza correctamente la jerarqua visual para expresar las relaciones del tipo "parte de" entre los elementos de la pgina? (La jerarqua visual se utiliza para orientar al usuario) Se ha controlado la longitud de pgina? Se debe evitar en la medida de lo posible el scrolling. Si la pgina es muy extensa, se debe fraccionar. Bsqueda (siempre que fuera necesario, por la extensin del sitio web, la incorporacin de un buscador interno) Se encuentra fcilmente accesible? Es decir: directamente desde la home, y a ser posible desde todas las pginas del sitio, y colocado en la zona superior de la pgina. Es fcilmente reconocible como tal?

Permite la bsqueda avanzada? (siempre y cuando, por las caractersticas del sitio web, fuera de utilidad que la ofreciera) Muestra los resultados de la bsqueda de forma comprensible para el usuario? La caja de texto es lo suficientemente ancha? Asiste al usuario en caso de no poder ofrecer resultados para una consultada dada? Elementos Multimedia Las fotografas estn bien recortadas? son comprensibles? se ha cuidado su resolucin? Las metforas visuales son reconocibles y comprensibles por cualquier usuario? (prestar especial atencin a usuarios de otros pases y culturas) El uso de imgenes o animaciones proporciona algn tipo de valor aadido? Se ha evitado el uso de animaciones cclicas? Ayuda Si posee una seccin de Ayuda, Es verdaderamente necesaria? Siempre que se pueda prescindir de ella simplificando los elementos de navegacin e interaccin, debe omitirse esta seccin. En enlace a la seccin de Ayuda, Est colocado en una zona visible y "estndar"? La zona de la pgina ms normal para incluir el enlace a la seccin de Ayuda, es la superior derecha. Se ofrece ayuda contextual en tareas complejas? (transferencias bancarias, formularios de registro...) Si posee FAQs, es correcta tanto la eleccin como la redaccin de las preguntas? y las respuestas? Accesibilidad El tamao de fuente se ha definido de forma relativa, o por lo menos, la fuente es lo suficientemente grande como para no dificultar la legibilidad del texto? El tipo de fuente, efectos tipogrficos, ancho de lnea y alineacin empleados facilitan la lectura? Existe un alto contraste entre el color de fuente y el fondo? Incluyen las imgenes atributos 'alt' que describan su contenido?

Es compatible el sitio web con los diferentes navegadores? Se visualiza correctamente con diferentes resoluciones de pantalla? Se debe prestar atencin a: JScript, CSS, tablas, fuentes... Puede el usuario disfrutar de todos los contenidos del sitio web sin necesidad de tener que descargar e instalar plugins adicionales? Se ha controlado el peso de la pgina? Se deben optimizar las imgenes, controlar el tamao del cdigo JScript... Se puede imprimir la pgina sin problemas? Leer en pantalla es molesto, por lo que muchos usuarios preferirn imprimir las pginas para leerlas. Se debe asegurar que se puede imprimir la pgina (no salen partes cortadas), y que el resultado es legible. Control y Retroalimentacin Tiene el usuario todo el control sobre el interfaz? Se debe evitar el uso de ventanas pop-up, ventanas que se abren a pantalla completa, banners intrusivos... Se informa constantemente al usuario acerca de lo que est pasando? Por ejemplo, si el usuario tiene que esperar hasta que se termine una operacin, la pgina debe mostrar un mensaje indicndole lo que est ocurriendo y que debe esperar. Aadir en el mensaje el tiempo estimado que tendr que esperar el usuario, o una barra de progreso, ayudar al usuario en este sentido. Se informa al usuario de lo que ha pasado? Por ejemplo, cuando un usuario valora un artculo o responde a una encuesta, se le debe informar de que su voto ha sido procesado correctamente. Cuando se produce un error, se informa de forma clara y no alarmista al usuario de lo ocurrido y de cmo solucionar el problema? Siempre es mejor intentar evitar que se produzcan errores a tener que informar al usuario del error. Posee el usuario libertad para actuar? Se debe evitar restringir la libertad del usuario: Evite el uso de animaciones que no pueden ser "saltadas", pginas en las que desaparecen los botones de navegacin del browser, no impida al usuario poder usar el botn derecho de su ratn... Se ha controlado el tiempo de respuesta?

Aunque esto tiene que ver con el peso de cada pgina (accesibilidad) tambin tiene relacin con el tiempo que tarda el servidor en finalizar una tarea y responder al usuario. El tiempo mximo que esperar un usuario son 10 segundos. Aclaraciones La orientacin del usuario (dnde estoy, cmo volver, qu he visitado, qu va a pasar...) se puede evaluar a travs de varios criterios: elementos de navegacin orientativos, caracterizacin de los enlaces e informacin contextual en elementos de interaccin (estructura y navegacin); distribucin visual de la pgina (lay-out); coherencia del diseo (generales); nivel de significacin de los rtulos (rotulado) y retroalimentacin del usuarios (control y retroalimentacin). Respecto a la publicidad (normalmente en forma de banners), si bien no se le hace una mencin explcita en la Gua, se puede evaluar desde varios criterios: lenguaje (lenguaje y redaccin), nivel de significacin de los rtulos (rotulado), jerarqua informativa y ruido visual (lay-out de la pgina), pop-ups y banners intrusivos (control y retroalimentacin)...
Enlaces relacionados

Ten Usability Heuristics. Jakob Nielsen. Gua para evaluacin experta (PDF). Joaqun Mrquez Correa.