(UOC / USABILITAT) PR2 - MejiasAlonso Ruben

USABILIDAD
PRÁCTICA 2
Evaluación heurística del sitio web:

www.clubfinds.com
Rubén Mejias Alonso
(CC BY-NC-SA 2.0)

Usabilidad - Práctica 2
ANALISIS HEURÍSTICO SEGÚN JACKOB NIELSEN
Cuando necesitamos valorar la usabilidad de un sitio web, la evaluación heurística se posiciona como uno de los
métodos de análisis por excelencia. Se trata de un modelo de evaluación por inspección y sin usuarios reales.
Mediante una serie de principios heurísticos, podemos medir la usabilidad de una interfaz de usuario y detectar
aquellos problemas de diseño y usabilidad que pueda presentar.
La presente PAC, presenta un análisis heurístico del sitio web www.clubfinds.com. Para realizar el análisis nos
basaremos en los diez principios heurísticos definidos en 1994 por Jackob Nielsen. Los principios descritos por
Nielsen, todavía se consideran hoy en día como los más adecuados para la evaluación heurística de un sistema
interactivo. Finalmente, para facilitar y formalizar el posterior proceso de evaluación, crearemos para cada principio
heurístico una plantilla que incorpore ciertas preguntas de control.
1. Visibilidad del estado del sistema
Se ha de mantener siempre informado al usuario de lo que ocurre cuando interactúa con la página web. Debemos
proporcionar un feedback continuo, además, la información ha de aparecer rápidamente y ofrecer respuestas en un
lapso de tiempo reducido.
Lista de revisión:
* Lista de revisión Si No Comentario

N/A
1 ¿Cada pantalla o sección de la página muestra NO No se sigue ningún estándar. Algunas

un título o encabezamiento que describa su páginas si los muestran y otras no lo
contenido? hacen.
2 ¿Es consistente el esquema de diseño de los NO El diseño de la página y algunos

iconos y la estética del sistema? iconos cambian en función del
lenguaje escogido.
3 Cuando seleccionamos un icono rodeado NO Los enlaces y los iconos se comportan

de otros iconos, ¿podemos diferenciarlo de manera diferente. Poco contraste
claramente del resto? al interactuar con los iconos.
4 Los iconos se comportan de manera

diferente. Hay botones de acción y
¿Se indica correctamente el estado actual del NO varios iconos como los checkboxes,
icono seleccionado? que permanecen inactivos al pasar el
cursor por encima.
5 Los menús de instrucciones, puntos de entrada No hay indicios de que se siga ningún
de datos y mensajes de error, ¿aparecen tipo de norma o estándar.
ubicados siempre en el mismo lugar de la NO
pantalla o en el propio menú?
6 Cuando entramos datos en pantallas múltiples, No se crean ventanas nuevas al iniciar

¿está etiquetada correctamente cada página los procesos de reserva. Tampoco
para mostrar su relación con las otras páginas? NO se indica correctamente dónde se
encuentra el usuario.
Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 2

7 ¿Se utilizan ventanas emergentes para mostrar NO Cuando el buscador no encuentra

mensajes de error de manera visible en la resultados, se muestra el error de
interface? manera textual en la misma página.
8 En caso que sea un proceso, ¿se muestran NO En los procesos de reserva no se

correctamente los pasos realizados y los pasos muestran ventanas emergentes ni
restantes? recursos visuales que muestren los
pasos.
9 ¿Hay algún tipo de feedback para cada acción u NO Cuando dejamos sin marcar campos
operación? de formulario obligatorios, no existe
feedback. Tampoco información
durante los procesos de carga.
10 ¿Existe algún tipo de recurso visual en los Sí que los hay, pero muy mal
menús o cajas de dialogo que indique en cuáles utilizados. Se utiliza el mismo recurso
de las posibles opciones se encuentra situado SI visual para seleccionar una fecha
el cursor? en el calendario que para introducir
texto en una caja.
11 Cuando seleccionamos múltiples opciones en NO Únicamente un pequeño cambio de

un menú o caja de diálogo, ¿existe un feedback color en el borde de las cajas.
que informe de los campos incompletos?
12 ¿Son adecuados los tiempos de respuesta para NO En ocasiones el sistema queda

cada acción? inactivo sin informar de la situación al
usuario.
13 ¿Son adecuados los tiempos de respuesta para SI La velocidad en la cargas es bastante

facilitar el proceso cognitivo del usuario? elevada en todas las páginas.
14 La terminología utilizada en los menús, ¿es SI En general, los títulos de los menús se
coherente con el dominio que puede tener el entienden de manera clara y simple
usuario al realizar las tareas?
15 ¿Puede el usuario comprender el estado del No hay ningún tipo de ayuda visual
sistema y las alternativas para cada acción? en los procesos de carga. Para iniciar
NO una nueva búsqueda se ha de ir
siempre al home.
Como podemos observar en el análisis, existen muchas subheurísticas incumplidas en el diseño de la página web.
Podemos concluir, que el sitio web www.clubfinds.com es mejorable en la mayoría de aspectos que facilitan la
visibilidad del estado del sistema. Entre los principales defectos podemos destacar la falta de coherencia en el
apartado gráfico, ya que cuando alternamos entre un idioma u otro, muchos de los ítems se mueven de sitio o
desaparecen y hay iconos como el de login, que cambian sus etiquetas y diseño. Además, el diseño e interacción
con los iconos, botones de acción o cajas de texto son altamente mejorables, ya que por ejemplo hay iconos como
los menús desplegables que no cambian al pasar el cursor por encima, iconos confusos como el uso del símbolo “+”
en negro o rojo, iconos sin interacción alguna como los que corresponden a la atención del cliente o los checkboxes.
Finalmente, cabe destacar la falta de procesos separados en diferentes pasos como el proceso de reserva, los cuales
aportan seguridad al usuario en procesos tan críticos como la confirmación de la reserva. Faltan elementos que
faciliten al usuario su ubicación en las páginas, como el uso de breadcrumbs. También se echa en falta algún tipo de
interacción con los elementos del calendario al efectuar una reserva. Los procesos de navegación no están apoyados
por ningún tipo de recurso como etiquetas conceptuales, mapas de menú o marcas de navegación.

2. Adecuación entre el sistema y el mundo real

La página web está adaptada a las convenciones que existen en el mundo real de los usuarios. La información debe
aparecer de forma natural siguiendo un orden lógico. Además, debe adecuarse al lenguaje y los conocimientos del
usuario, con palabras, frases y conceptos que le resulten familiares y sin tecnicismos.
Lista de revisión:

N/A
1 Hay iconos que sí cumplen con los

requisitos. Los iconos para desplegar
¿Los iconos son concretos y familiares para el NO información extra (+) son muy
usuario? confusos. Los iconos de contacto són
erróneos o confusos.
2 ¿Es comprensible y lógica la presentación de los NO Es difícil diferenciar entre ofertas

contenidos para el usuario? normales de hotel y ofertas de
eventos y fiestas.
3 Cuando existe una secuencia de opciones Aunque es mejorable y obviando

para realizar una tarea, ¿están las opciones cuestiones de diseño, los procesos
ordenadas siguiendo una lógica familiar y SI como el de rellenar campos de
natural para el usuario? formulario.
4 Los iconos y metáforas utilizados por la página, N/C No se utilizan estos recursos para
¿son comprensibles y facilitan la interacción del facilitar la interacción.
usuario con el sistema?
5 ¿Se corresponde el nivel de conocimiento SI La interacción con la página es

expuesto en la página con el nivel del usuario? relativamente sencilla.
6 Cuando nos encontramos con agrupaciones NO Los nombres de hoteles,

de ítems en un mismo espacio, ¿guardan una desplegables, precios y descripciones
correcta relación de parecido entre ellos? se encuentran mal distribuidos entre
ellos.
7 ¿Los colores seleccionados corresponden con Se hace un mal uso del color rojo,
los valores y convenciones que puede esperar tanto para indicar ofertas como para
el usuario? NO botones de acción. Ni rastro del
color verde en acciones validadas o
correctas. Tampoco se usa el color
azul para los enlaces.
8 Si la forma de los objetos de la interface N/C No se utilizan estos recursos para

se utiliza como una señal visual, ¿lo hace facilitar la interacción.
respetando los convenios culturales del
usuario?
9 Cuando una indicación o botón implica una SI La mayoría de botones utilizan

acción necesaria, ¿son adecuadas las palabras palabras adecuadas en relación con la
que emplea el mensaje en relación con la acción que desempeñan.
acción?

10 Las referencias que aparecen en los botones Si La mayoría de los nombres en

de acción, ¿coinciden con el nombre real del los botones corresponde con su
botón? significado real.
11 Los nombres de los botones de acción, ¿tienen N/C Algunos incluyen terminología
etiquetas generalistas o específicas? generalista y otros, una más
específica.
12 Los textos y enunciados, ¿siguen el mismo SI Obviando cuestiones de diseño, la

estilo gramatical? web sigue el mismo estilo gramatical,
el cual es mejorable. Además, existen
faltas de ortografía.
13 El lenguaje empleado en la página, ¿se ajusta al SI La página web está redactada de

lenguaje del usuario o es muy técnico? una forma bastante coloquial, sin
tecnicismos.
14 ¿Se han evitado las combinaciones de letras y NO Debido al diseño, hay zonas donde
palabras poco frecuentes? el texto no tiene sentido, ya que se
juntan palabras que pueden provocar
confusión.
15 Cuando existen botones con nombres similares, NO El diseño y el color de todos los
¿se ha evitado que estos botones ejecuten botones de acción son iguales,
acciones parecidas? generan confusión.
Por un lado, la lista de revisión nos muestra que existen partes de la página web que sí que se adaptan al lenguaje
y convenciones propios del mundo real. La interacción con la página es relativamente sencilla debido a las escasas
opciones que se nos dan, el lenguaje utilizado es coloquial sin llegar a ser vulgar y se adapta al lenguaje del usuario,
así mismo, el nombre de los botones y las acciones que realizan, responden a los convencionalismos del mundo real.
Por otro lado, podemos observar cómo el mal diseño de la página provoca que la información a menudo no siga un
orden lógico, en alguna ocasión podemos encontrar frases mal construidas o con errores ortográficos. Así mismo, los
botones de acción son todos iguales y sólo cambia el texto que contienen.
3. Libertad y control por parte del usuario

El sitio debe ofrecer al usuario la libertad de seleccionar y secuenciar las tareas cuando él quiera. Del mismo modo,
se debe permitir deshacer cualquier elección no deseada por parte del usuario y evitar que el sistema lo haga por el
(acciones no controladas). Además, si se selecciona por error alguna opción, siempre hay que ofrecer algún tipo de
salida.
Lista de revisión:

N/A
1 Una vez completada una tarea, ¿el sistema NO El proceso de compra se realiza
espera una señal por parte del usuario antes de todo en un paso, sólo se muestra
procesarla definitivamente? al final de la página un botón de
confirmación de reserva.

2 Cuando navegamos entre varios menús NO Sólo se puede escribir en el menú

anidados, ¿puede el usuario escribir donde se encuentre el usuario.
anticipadamente?
3 Ante acciones con consecuencias drásticas, NO Sólo se informa de las consecuencias,

negativas o destructivas, ¿se informa pero no se pide ningún tipo de
adecuadamente al usuario esperando una confirmación por parte del usuario.
confirmación por su parte?
4 ¿Se pueden deshacer las acciones simples, NO Sólo se pueden borrar los datos en la
la entrada de datos y los grupos de acciones misma página. Si retrocedemos con
completadas? el navegador perderemos todos los
datos del formulario.
5 ¿Puede el usuario cancelar operaciones en NO No existe ningún recurso o ayuda

curso? para detener los procesos una vez
clicado el botón correspondiente.
6 ¿Se permite la edición de caracteres en los NO Los campos de entrada de texto no

campos de entrada de datos? incluyen máscaras de entrada de
datos que definan la manera correcta
de cómo introducirlos.
7 Con el fin de reducir tiempo introduciendo SI Los campos de texto sí que permiten
datos en el sistema, ¿puede el usuario copiar y pegar texto copiado modificando el
modificar datos existentes? existente.
8 ¿Se inician de manera automática acciones o NO No se aprecia ninguna acción no

animaciones no controladas por el usuario? ocasionada por la propia interacción
del usuario con el sistema.
9 ¿Es posible moverse adelante y atrás entre los SI Desde el teclado es posible hacerlo
campos o cajas de diálogo? utilizando el tabulador.
10 ¿Puede el usuario configurar su propio sistema, NO Hay una gran limitación en el diseño
sesión, archivo y valores por defecto? para llevar a cabo estas acciones.
11 ¿Puede el usuario revertir de manera sencilla NO No se ofrece la opción de revertir

las acciones? procesos ni acciones.
12 ¿Existe algún tipo de vínculo que permita volver SI El logotipo de la marca permite volver
a la página inicial? a la página de inicio.
La lista de revisión nos muestra cómo el usuario tiene muy poco control sobre las acciones importantes. Esto es
debido principalmente al diseño de la página, la cual incluye en un solo paso todo el proceso de reserva, introducción
de datos personales y datos bancarios, además, solo se utiliza un botón para confirmar la reserva y no se dan
indicaciones sobre los pasos restantes. Este hecho crea una enorme incertidumbre en el usuario justamente en el
proceso más crítico que se pude llevar a cabo, no sabiendo si podrá cancelar el proceso una vez se haga clic en el
botón confirmar reserva, que es el único que aparece en todo el proceso.
4. Consistencia y estándares
La página web debe seguir las convenciones establecidas en lo referente a estándares. El usuario no debería de
plantearse dudas ante las diferentes palabras, situaciones o acciones que puedan significar lo mismo. La página debe
ser consistente internamente y cumplir con los estándares externamente.

Lista de revisión:

N/A
1 ¿Se respetan consistentemente los formatos de SI La estética del web es igual en todas
la empresa a lo largo de las diferentes páginas? las páginas.
2 Existen numerosos ejemplos donde

se utilizan mayúsculas: menú
¿Se evita el uso excesivo de mayúsculas? NO principal, encabezados, textos de
aviso…
3 ¿Se representan correctamente la disposición Los números enteros y los

de números enteros y decimales? racionales aparecen correctamente
SI representados.
4 ¿Se encuentran correctamente etiquetados los NO Muchos iconos no están etiquetados.

iconos?
5 ¿Los mismos elementos se muestran iguales en SI No se observan cambios en los

toda la página? elementos.
6 ¿Se presenta la información de una manera A pesar de no ser adecuado, el

parecida en las diferentes páginas? formato de presentación es idéntico
SI en todas las páginas.
7 Faltan títulos que describan

correctamente el contenido de las
¿Dispone cada ventana de su propio título? NO ventanas
8 ¿Es posible realizar la acción de scroll en todas SI Se permite hacer scroll tanto con el
las ventanas? ratón como con el teclado.
9 Sí que los hacen, aunque la

presencia de menús desplegables es
¿Los menús se presentan de manera vertical? SI testimonial.
10 ¿Los títulos de los menús se sitúan centrados o NO No hay una guía de estilo que defina
justificados a la izquierda? este aspecto.
11 Si la acción “salir” se encuentra disponible en N/C Esta acción no se encuentra

una lista, ¿se sitúa siempre en su parte inferior? disponible en la página.
12 ¿Se diferencia mediante el uso de estándares NO No existe ningún recurso para saber si
aquellos vínculos que hemos visitado de los que hemos visitado algún vínculo.
no?
13 Respecto al tamaño del texto, ¿se sobrepasan 4 SI Se utilizan hasta 6 tamaños

tipos diferentes de tamaño? diferentes. Además la relación entre
ellos no es adecuada.
14 Podemos detectar hasta 4 tipos

diferentes de tipografía. Además, en
¿Se utilizan más de 3 tipos de tipografías SI numerosas ocasiones se encuentran
diferentes? mezcladas en espacios pequeños.

15 ¿Se utilizan más de 4 tipos de colores SI Los colores blanco y rojo son los
diferentes? primarios. Para el texto se utilizan
negro, gris y en ocasiones azul.
16 ¿Se siguen los estándares en lo referente a las N/C No existen áreas de navegación
áreas de navegación superiores y laterales? superiores ni laterales.
17 Sólo es posible realizar búsquedas

desde la página de inicio. No existe
¿Se siguen los estándares en lo referente a NO ningún icono de búsqueda ni caja
herramientas de búsqueda y controles? donde realizarlas.
Analizando la lista podemos observar como el diseño de la página no sigue los estándares generales recomendados
y tampoco las convenciones que un usuario podría tener en mente. Hay un excesivo uso de mayúsculas, faltan
etiquetas que describan la iconografía, no hay menús desplegables que ayuden en la navegación, no hay manera
de saber qué vínculos hemos visitado y cuáles no. Tampoco se hace un buen uso del tamaño del texto, tipografía o
colores. Además, no se incluye ninguna cajetilla de búsqueda ni icono relacionado en ninguna página que no sea la
página de inicio, por lo que el usuario se ve obligado a regresar al home si desea iniciar una nueva búsqueda, y lo ha
de hacer desde el buscador general.
5. Prevención de errores
Mediante un buen diseño, es posible prevenir al usuario de posibles errores antes de que los pueda cometer. Los
mensajes de error han de ser compresibles, deben mostrar una confirmación antes de ejecutar la corrección.
Lista de revisión:

N/A
1 En los motores de búsqueda, ¿se toleran Para obtener un resultado

errores tipográficos, ortográficos y se aceptan satisfactorio es necesario introducir
palabras similares? NO correctamente el nombre del destino.
Tampoco es posible buscar por país
2 Cuando se introducen campos problemáticos NO No existe ningún tipo de ayuda,

como la fecha, ¿se especifica un formato sugerencia o máscara de entrada, que
concreto de entrada o se facilita algún ejemplo facilite la entrada correcta de datos.
de muestra?
3 Las sugerencias que se formulan, ¿lo hacen de NO Las sugerencias son muy pobres,
manera constructiva? poco visibles y no se utiliza ningún
recurso gráfico para ello.
4 Las sugerencias o indicaciones, ¿implican una NO Las sugerencias siempre se

pérdida de control por parte del usuario? indican cuando ya se ha realizado
incorrectamente una acción.
5 ¿Los mensajes son breves y claros? NO Los mensajes son breves pero muy
confusos y mal situados.

6 Cuando hay un error, ¿se redacta de modo que NO No hay un consenso claro, hay errores
sea el sistema quien asuma la culpa y no el en los que se culpa indirectamente al
usuario? usuario y otros al propio sistema.
7 Cuando sea posible, ¿el sistema previene al NO Sólo se informa del error cuando ya
usuario de cometer errores? se ha producido.
8 ¿El sistema alerta al usuario cuando está a NO Sólo se informa del error cuando ya
punto de cometer un error crítico? se ha producido.
9 Cuando se introducen datos en cajas de No existe ningún tipo de indicación

diálogo y formularios, ¿se indican el número en los campos.
de espacios en caracteres disponibles en el NO
campo?
10 Cuando se introducen datos en cajas de diálogo Siempre hay que rellenar

y formularios, ¿contienen valores por defecto manualmente cada campo. Ni
cuando corresponde? NO siquiera el selector de países lo hace
automáticamente.
Analizando la lista podemos observar como este es uno de los principios heurísticos que más se vulnera en lo que
llevamos de análisis. El diseño de la página no muestra ningún tipo de ayuda ni recurso para prevenir errores de
cualquier tipo, siempre se informa cuando éste ya se ha producido, ya sean errores menores o errores críticos. No
existen tampoco sugerencias ni ayudas para rellenar correctamente campos problemáticos en los formularios o cajas
de texto, como por ejemplo la entrada del DNI, el país de origen o la fecha de nacimiento.
6. Reconocimiento antes que recuerdo

Aunque la prevención de errores sea un buen mecanismo para evitarlos, siempre es mejor un diseño cuidadoso
que evite dichos problemas sin necesidad de recurrir a ningún mensaje. Además, los objetos deben ser visibles y las
acciones y opciones disponibles han de ayudar al usuario a reconocer la información que busca sin esfuerzo. De esta
manera evitamos que el usuario tenga que recordar demasiadas cosas para ser realmente productivo utilizando la
página web.
Lista de revisión:

N/A
1 Para las interfaces de preguntas y respuestas, NO El diseño de la página no contempla

¿existe algún tipo de pista visual para distinguir ninguna instrucción o sugerencia que
los lugares donde colocar las respuestas o no sea textual.
recibir instrucciones?
2 ¿El despliegue de información comienza por la NO La información no se despliega,

parte superior izquierda de la pantalla? simplemente se muestra toda en
pantalla.
3 ¿Se necesita previamente información de otras En principio no se necesita

páginas para interactuar con la página web? información previa para interactuar
NO con la página.

4 ¿Es fácil recuperar la información encontrada NO No existe un método para guardar

anteriormente? aquellas ofertas o destinos que
hemos localizado.
5 Las pistas visuales, ¿están posicionadas en NO No hay pistas visuales significativas

lugares donde posiblemente dirija la mirada el que guíen la atención del usuario de
usuario? una manera lógico u ordenada.
6 ¿Utiliza el sistema el color gris para aquellas NO El color gris se utiliza indistintamente
zonas inactivas como botones o áreas de texto? para texto normal, iconos o enlaces.
7 ¿Se utilizan espacios en blanco para crear SI Sí que se utilizan, pero no queda claro
simetría y así guiar el ojo del usuario en la si es de manera intencionada o no.
dirección apropiada?
8 ¿Se encuentran los objetos agrupados en zonas En muchas ocasiones nos

lógicas y se utilizan encabezamientos para encontramos ante una agrupación
distinguir entre zonas? NO de ítems sin relación entre ellos y los
encabezamientos no son claros para
distinguir entre las diferentes zonas.
9 ¿Se ha utilizado el mismo color para agrupar SI Los colores utilizados en los iconos de
elementos relacionados entre sí? redes sociales son todos iguales.
10 ¿Es consistente la codificación del color a lo SI Aunque su uso no es correcto, se

largo de las páginas? mantiene a lo largo de las páginas.
11 ¿Es adecuado el contraste de color y brillo entre SI Las imágenes tienen buen contraste
la imagen y los colores de fondo? en relación al fondo.
12 ¿Se utiliza una medida de letra, recurso Se utilizan diferentes recursos pero
enfático, subrayado, color, sombreado de manera incorrecta, provocando
o tipografía especial para diferenciar la SI cierta confusión en determinadas
importancia de los diferentes ítems? acciones como la descripción de los
servicios e instalaciones.
13 ¿Se hace uso de elementos visuales altamente NO Es realmente difícil saber en qué
llamativos para identificar qué ventana está ventana se encuentra el usuario en
abierta? todo momento.
Aunque la prevención de errores sea un buen mecanismo para evitarlos, siempre es mejor un diseño cuidadoso
que evite dichos problemas sin necesidad de recurrir a ningún mensaje. Además, los objetos deben ser visibles y las
acciones y opciones disponibles han de ayudar al usuario a reconocer la información que busca sin esfuerzo. De esta
manera evitamos que el usuario tenga que recordar demasiadas cosas para ser realmente productivo utilizando la
página web. Después del análisis, podemos observar la alarmante falta de mecanismos que faciliten al usuario tareas
como introducir datos, guardar elecciones o reconocer en que página se encuentra en todo momento. Cada vez que
el usuario accede a una página nueva, ha de esforzarse por completar las tareas mencionadas y recordar…
7. Flexibilidad y eficiencia en el uso

La web debe incluir opciones para facilitar la interacción, tanto para usuarios noveles como para los más expertos.
Podemos incluir diferentes atajos de teclado para facilitar la configuración de acciones frecuentes como por ejemplo
recordar opciones o guardar un método de pago preferido. Así mismo, también pueden resultar útiles para facilitar
la interacción a usuarios con problemas de carácter físico, cognitivo, cultural, etc.

Lista de revisión:

N/A
1 Cunado introducimos datos de entrada, ¿es SI El sistema no recuerda la entrada de

necesario volver a repetir la información datos en pasos anteriores.
solicitada en pasos anteriores?
2 Cuando la entrada de datos corresponde a un Es necesario terminar el proceso de

campo con muchos datos de entrada, ¿puede reserva en un tiempo determinado
el usuario dejar la pantalla parcialmente NO y de una sola vez, si no queremos
completa? perder los datos del formulario.
3 ¿Ofrece el sistema alguna tipo de atajo a la hora N/C No se ha encontrado ninguna

de realizar operaciones frecuentes? mención dentro de la página que
haga referencia a esta cuestión.
4 En los escasos menús que contiene la

página, es posible desplazarse por las
En los menús, ¿puede el usuario acceder a un SI opciones utilizando el teclado.
campo concreto utilizando un atajo de teclado?
5 Es necesario pasar individualmente

por todos los campos utilizando
En las cajas de dialogo, ¿puede el usuario NO el tabulador y sólo de izquierda a
acceder a un campo concreto utilizando un derecha y de arriba abajo.
atajo de teclado?
6 ¿Es posible repetir una acción ya realizada de NO Siempre se ha de volver a repetir

manera sencilla? todo.
7 Cuando accedemos a un campo de formulario, La caja cambia el color del borde y el

¿aparece parpadeando el cursor al inicio del cursor parpadea al inicio de la caja.
campo? SI
Por norma general, la página web no permite el uso de atajos de teclado que agilicen la interacción de los usuarios
expertos. Podemos pensar que la página no hace distinción alguna entre usuarios expertos y noveles, más bien, está
diseñada para estos últimos. . Así mismo, las pocas opciones que cumplen con el principio de flexibilidad y facilidad
de uso, lo hacen gracias a las funciones automáticas propias de los formularios, como desplazarse utilizando el
tabulador.
8. Diseño estético y minimalista

La página web evita la información irrelevante y sólo incluye la necesaria. Este hecho es sumamente importante, ya
que la información extra compite con la relevante disminuyendo su visibilidad.
Lista de revisión:


N/A
1 El diseño de la página hace que

prácticamente toda la información,
¿Se muestra la información esencial para poder SI la esencial incluida, se muestre en
tomar las decisiones? pantalla.
2 Se repiten elementos como los datos

de contacto, las redes sociales o el
¿Existe redundancia en la información de la SI apartado quienes somos, los cuales
página? aparecen en el menú principal y en el
pie de página.
3 ¿Se pueden distinguir visualmente los iconos SI Generalmente se respetan las

según su significado conceptual? convenciones en el diseño de la
iconografía
4 En ocasiones la estructura gramatical,

la separación, fuentes y tamaños,
¿El texto es de fácil comprensión y lectura? NO dificultan la total comprensión del
texto.
5 ¿Se utilizan en el texto demasiados adjetivos y SI Se abusa de las oraciones

oraciones subordinadas? subordinadas
6 ¿Incluye cada pantalla de entrada de datos Aunque mejorables, la descripción

un título simple, breve y suficientemente del título suele ser clara y adecuada a
distintivo? SI los campos que incluye.
7 Los títulos de los menús, ¿son breves pero Hay algunos títulos que no siguen
suficientemente largos para comunicar su esta norma, como por ejemple “ya
contenido? NO soy socio y tengo usuario”
A pesar de no incluir información irrelevante ni publicidad, la falta de menús de navegación y en general el diseño
de la página, hacen que se presenten demasiados datos en pantalla. En lo referente al texto, no encontramos con
muchos errores gramaticales, de sintaxis, un uso abusivo de oraciones sobordinadas y algunos títulos y subtítulos
de menús bastante confusos. Esto genera que en ocasiones se nos presente el texto de manera desordenada, con
títulos inadecuados, un apelotonamiento de la información y en definitiva, dificulta la comprensión del contenido al
usuario. Finalmente, podemos encontrar cierta redundancia en alguno de los datos, como por ejemplo los teléfonos
de contacto.
9. Ayuda al usuario a reconocer, diagnosticar y recuperarse de los errores

Los mensajes de error han de mostrarse de manera clara y con un lenguaje común y entendible, debe quedar claro
que ha pasado y sugerir posibles alternativas y soluciones al problema.
Lista de revisión:


N/A
1 Cuando aparece un mensaje informando de un NO Los mensajes aparecen en forma de

error, ¿lo hace de manera comprensible y en un texto, muy mal ubicados y de manera
lenguaje común? incorrecta.
2 Cuando aparece un mensaje informando de un SI A pesar de los problemas

error, ¿informa correctamente de la causa para mencionados, se suele indicar la
evitar futuras repeticiones? causa del error.
3 ¿Es posible volver a la situación anterior al SI El sistema vuelve a la ventana dónde

error? se ha cometido el error.
5 Cuando se comente un error, ¿utiliza el sistema NO No se usa ningún sonido para

algún tipo de sonido para alertar al usuario? ninguna acción.
6 No se utilizan signos de exclamación

para argumentar los errores, ya que
Los mensajes de error, ¿utilizan adecuadamente SI el usuario podría sentirse mal por
los signos de exclamación? cometer el error.
7 Cuando se comete un error introduciendo datos Aunque lo hace de manera bastante

en un campo, ¿resalta el sistema ese campo pobre, limitándose a colorear
para facilitar su detección? SI en rojo los bordes de las cajas
correspondientes.
8 ¿Se informa de la gravedad del error cometido No se informa en ningún momento

o los mensajes son heterogéneos? de si un error es más crítico que otro.
NO
9 Aunque en ocasiones el léxico y

el significado del mensaje no son
¿Indican los mensajes de error qué acciones NO adecuados, se informa de cómo
lleva a cabo para solucionarlos? solucionarlo. En otras ocasiones no se
indica nada y simplemente aparece el
campo en rojo.
Podemos afirmar que los métodos y recursos utilizados por la página web, no ayudan en absoluto a la prevención de
errores, todo lo contrario, en ocasiones el usuario puede verse más confundido si cabe, ya que en ocasiones no se
sabe el motivo por el que un campo determinado arroja un error, o, que formato hay que utilizar para que no vuelva
a suceder.
10. Ayuda y documentación

Aunque lo ideal es utilizar un sistema sin documentación externa, en ocasiones puede ser necesario proporcionar
dicha documentación en forma de ayuda. Si la web es muy compleja y es necesario proveer de ayuda al usuario,
ésta debe ser fácil de localizar y especificar los pasos necesarios para resolver las dudas, sin extenderse en exceso y
enfocándose en la tarea concreta que necesita completar el usuario.
Lista de revisión:


N/A
1 Los números de contacto para

solicitar ayuda se encuentran visibles
en el menú principal de navegación y
al pie de página. El problema es que
En caso de existir ayuda, ¿es sencillo SI no se redirige al usuario a ningún
encontrarla visualmente? sitio, sólo se facilitan los números de
teléfono de contacto. Para acceder
al formulario de contacto hemos de
realizar scroll hasta el pie de página,
el enlace “contacto” que aparece en
un tamaño muy reducido.
2 ¿Se distinguen visualmente las instrucciones en No se aprecia ningún tipo de ayuda

línea del resto de contenido? en línea a parte del formulario de
N/C contacto citado anteriormente.
3 ¿Siguen las instrucciones la secuencia de Se echa en falta asesoramiento en

acciones llevada a cabo por el usuario? todas y cada una de las acciones
NO posibles.
4 ¿La documentación de ayuda es adecuada al N/C No hay ayudas en función del

contexto donde se encuentra el usuario? contexto.
5 La función o botón de ayuda, ¿está N/C No hay botones de ayuda.

correctamente etiquetado como tal?
6 Respecto a la navegación, ¿es fácil encontrar la NO No hay ayuda que facilite la

información de ayuda? navegación.
7 ¿Dispone la página web de un apartado de Únicamente dispone del formulario

preguntas frecuentes? de contacto. Para colmo, el teléfono
NO de contacto que aparece al efectuar
una reserva es un 902.
8 Cuando se nos muestra la ayuda, ¿está Únicamente dispone del formulario

claramente organizada en pasos? de contacto y los números de
NO teléfono para solicitar ayuda.
9 Cuando se nos muestra la ayuda, ¿se utilizan No se muestran ayudas. Cuando

ejemplos comprensibles con descripciones introducimos campos de formulario
cortas? NO incorrectos sólo se nos pide volver a
introducirlos.
10 ¿Hay algún tipo de ayuda contextual? SI Sí que hay pero poca y muy mal
implementada.
11 ¿Puede el usuario intercambiar las pantallas NO Si el usuario no abre una nueva

de ayuda con las de su trabajo con total ventana para rellenar los campos de
normalidad? formulario y retrocede para volver al
trabajo, se pierden todos los datos.

Como podemos observar en el análisis, este es uno de los principios heurísticos con un mayor número de problemas
encontrados. El usuario se siente muy vulnerable a la hora de realizar acciones, ya que el sistema no muestra
ningún tipo de ayuda en función del proceso o acción que llevemos a cabo. No existe ninguna página de apoyo
con preguntas frecuentes, no es posible desplazarse entre las páginas de trabajo y ayuda sin perder los datos
introducidos. Especialmente grave resulta la disposición y ubicación de los sistema de ayuda y contacto, se utiliza
el logotipo típico de correo para indicar un número de teléfono fijo, el cual resulta ser para más inri, un número de
pago 902. Así mismo, el logotipo correspondiente a WhatsApp que indica un número de teléfono móvil también
puede llevar a confusión, además, ninguno de los dos números es interactivo y al pasar el cursor por encima se activa
la ayuda contextual sin enlazar a ningún sitio. Finalmente, la única manera de acceder al formulario de contacto es
a través del pie de página, donde encontramos un enlace contacto difícilmente reconocible debido a su reducido
tamaño y mala ubicación, ya que este se encuentra entre los enlaces “Quienes somos” y “Regala Clubfinds”.
INFORME DE USABILIDAD
Una vez evaluada cada parta de la interface de la página web www.clubfinds.com, es hora de exponer los problemas
de usabilidad detectados indicando su grado de severidad e importancia relativa. A continuación se muestra una
lista de resultados con los problemas ordenados de mayor a menor en función del grado se severidad, además,
se propondrán mejoras basadas en buenas prácticas para solucionar dichos problemas. Se han obviado aquellos
problemas con una resolución sencilla o que no afecten en exceso la experiencia del usuario.
Problema de usabilidad detectado:

Inconsistencia en el diseño de los iconos y estética del sistema.
Grado de severidad del problema: Grado 4
- Frecuencia: alta.
- Impacto: difícil de superar.
- Persistencia: aparece repetidamente.
Principio heurístico incumplido:
Visibilidad del estado del sistema.
Capturas de ejemplos:
Idioma seleccionado: castellano Idioma seleccionado: inglés

Idioma seleccionado: castellano Idioma seleccionado: inglés
Idioma seleccionado: francés Idioma seleccionado: holandés
Recomendaciones para mejorar el problema:
- Reescribir el código HTML de la página, ya que parece que el diseño no está completo, faltan traducciones.
- Contratar los servicios de un traductor profesional.
Los procesos de navegación no están apoyados por ningún tipo de recurso como etiquetas conceptuales, mapas de
menú, marcas de navegación o breadcrumbs.
- Frecuencia: alta.

No hay ayudas de ningún tipo en la navegación
- Replantearse la arquitectura de la información de todo el sitio web.
- Incluir breadcrumbs, ya que son fáciles de implementar en el diseño.
Problemas de usabilidad detectado:

Proceso de reserva en un solo paso y sin posibilidad de revertir la acción.
- Frecuencia: alta.
Libertad y control por parte del usuario.


- Separar en varios pasos el proceso de reserva.
- Añadir botones de ayuda y notificaciones para facilitar el proceso de reserva.
- Añadir un botón “atrás” en alguno de los pasos que se deben crear en el proceso de reserva.
- Separar claramente los campos de datos personales, datos de pago y resumen de datos de la reserva.
- Incluir el desglose del importe en el cuadro resumen de la reserva.
- Crear un botón específico que indique el último proceso de rellenado de datos, como por ejemplo:
“Siguiente: último paso”, o, “Ánimo, ya solo nos queda un paso más”.
- Diferenciar claramente el botón para aceptar la confirmación de reserva del resto de botones similares.

Falta de títulos o encabezados que describan correctamente el contenido
- Frecuencia: alta
- Impacto: difícil de superar
- Persistencia: aparece repetidamente
Visibilidad del estado del sistema

- Reescribir el código HTML de la página.
- Contratar los servicios de un traductor profesional.

Visibilidad y estado de los iconos
Frecuencia: alta.
Impacto: difícil de superar.
Persistencia: aparece repetidamente.
No hay interactividad en los elementos del calendario Uso indebido de la iconografía, solapamiento de información

Sugerencias formuladas por el sistema.
Frecuencia: alta.
Impacto: difícil de superar.
Persistencia: aparece repetidamente.
Prevención de errores.
Únicamente se muestra el recruadro en rojo, sin ningún tipo de sugerencia
- Utilizar mascaras de entrada para guiar al usuario en los campos que pueden presentar problemas, como el
DNI o la fecha de nacimiento.
- Utilizar recursos gráficos que validen cuando se introduce bien un campo.
- Proporcionar información de los pasos restantes mediante algún mensaje.
A continuación, mostraremos un ejemplo de buenas prácticas encontrado en la web www.booking.com, donde se

proporciona un feedback para cada campo introducido, además, nos informan mediante una ventana emergente de
los pasos restantes.

Ejemplo de buenas prácticas en booking

Los iconos no son concretos y pueden no resultarle familiares al usuario.
- Frecuencia: media
- Impacto: fácil de superar
- Persistencia: aparece repetidamente
Adecuación entre el sistema y el mundo real
Capturas de ejemplos
Utilización del mismo icono (+) con diferente color para cada función Utilización incorrecta de algunos iconos

- Rediseñar la iconografía, estudiar que iconos son los más adecuados para cada tipo de acción.

Presentación de los contenidos.
- Frecuencia: alta.
Adecuación entre el sistema y el mundo real.
Errores de diseño en la presentación de contenidos

- Es necesario revisar el código HTML y CSS de la página.
- Hay que replantearse la distribución de contenidos en general.

Combinaciones de letras y palabras poco frecuentes
- Frecuencia: media.
Adecuación entre el sistema y el mundo real.
Combinación extraña de palabras 1
Combinación extraña de palabras 2

Uso excesivo de mayúsculas
- Frecuencia: alta.
- Impacto: fácil de superar.
Consistencia y estándares.
Uso inadecuado de mayúsculas. Ejemplo 1
Uso inadecuado de mayúsculas. Ejemplo 2

- Reescribir todo el texto en mayúsculas que aparece en los títulos, subtítulos, resumen de reserva, términos y
condiciones de uso, cláusula de cancelación…

La interfaz gráfica no muestra claramente que objeto esta seleccionado y cual no.
- Frecuencia: alta.
No hay cambios en el calendario al seleccionados los días de entrada o salida

- Rediseñar la interfaz gráfica donde hayan elementos sin interactividad.
BIBLIOGRAFÍA Y RECURSOS WEB
Calvo-Fernández Rodríguez, Amaia. Ortega Santamaría, Sergio. Valls Saez, Alicia. Métodos de evaluación sin usuarios.
Material docente propiedad de la UOC.
Página web www.atrapalo.com [en línea]. Fecha de consulta 10 de Noviembre de 2017.
Página web www.booking.com [en línea]. Fecha de consulta 10 de Noviembre de 2017.
Página web www.airbnb.es [en línea]. Fecha de consulta 10 de Noviembre de 2017.
Weiss, Elaine. Nielsen, Jakob. Mack, Robert. (1995) Heuristic Evalualtion - A System Checklist. © Usability Analysis &
Design, Xerox Corporation. [en línea]. Fecha de consulta 8 de Noviembre de 2017.
http://users.polytech.unice.fr/~pinna/MODULEIHM/ANNEE2010/CEIHM/XEROX%20HE_CKLST.pdf

(UOC / USABILITAT) PR2 - MejiasAlonso Ruben

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

(UOC / USABILITAT) PR2 - MejiasAlonso Ruben

Transféré par

Droits d'auteur :

Formats disponibles

USABILIDAD

Evaluación heurística del sitio web:

Rubén Mejias Alonso

(CC BY-NC-SA 2.0)

ANALISIS HEURÍSTICO SEGÚN JACKOB NIELSEN

1. Visibilidad del estado del sistema

* Lista de revisión Si No Comentario

1 ¿Cada pantalla o sección de la página muestra NO No se sigue ningún estándar. Algunas

2 ¿Es consistente el esquema de diseño de los NO El diseño de la página y algunos

3 Cuando seleccionamos un icono rodeado NO Los enlaces y los iconos se comportan

4 Los iconos se comportan de manera

6 Cuando entramos datos en pantallas múltiples, No se crean ventanas nuevas al iniciar

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 2

7 ¿Se utilizan ventanas emergentes para mostrar NO Cuando el buscador no encuentra

8 En caso que sea un proceso, ¿se muestran NO En los procesos de reserva no se

11 Cuando seleccionamos múltiples opciones en NO Únicamente un pequeño cambio de

12 ¿Son adecuados los tiempos de respuesta para NO En ocasiones el sistema queda

13 ¿Son adecuados los tiempos de respuesta para SI La velocidad en la cargas es bastante

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 3

2. Adecuación entre el sistema y el mundo real

* Lista de revisión Si No Comentario

1 Hay iconos que sí cumplen con los

2 ¿Es comprensible y lógica la presentación de los NO Es difícil diferenciar entre ofertas

3 Cuando existe una secuencia de opciones Aunque es mejorable y obviando

5 ¿Se corresponde el nivel de conocimiento SI La interacción con la página es

6 Cuando nos encontramos con agrupaciones NO Los nombres de hoteles,

8 Si la forma de los objetos de la interface N/C No se utilizan estos recursos para

9 Cuando una indicación o botón implica una SI La mayoría de botones utilizan

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 4

10 Las referencias que aparecen en los botones Si La mayoría de los nombres en

12 Los textos y enunciados, ¿siguen el mismo SI Obviando cuestiones de diseño, la

13 El lenguaje empleado en la página, ¿se ajusta al SI La página web está redactada de

3. Libertad y control por parte del usuario

* Lista de revisión Si No Comentario

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 5

2 Cuando navegamos entre varios menús NO Sólo se puede escribir en el menú

3 Ante acciones con consecuencias drásticas, NO Sólo se informa de las consecuencias,

5 ¿Puede el usuario cancelar operaciones en NO No existe ningún recurso o ayuda

6 ¿Se permite la edición de caracteres en los NO Los campos de entrada de texto no

8 ¿Se inician de manera automática acciones o NO No se aprecia ninguna acción no

11 ¿Puede el usuario revertir de manera sencilla NO No se ofrece la opción de revertir

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 6

* Lista de revisión Si No Comentario

2 Existen numerosos ejemplos donde

3 ¿Se representan correctamente la disposición Los números enteros y los

4 ¿Se encuentran correctamente etiquetados los NO Muchos iconos no están etiquetados.

5 ¿Los mismos elementos se muestran iguales en SI No se observan cambios en los

6 ¿Se presenta la información de una manera A pesar de no ser adecuado, el

7 Faltan títulos que describan

9 Sí que los hacen, aunque la

11 Si la acción “salir” se encuentra disponible en N/C Esta acción no se encuentra

13 Respecto al tamaño del texto, ¿se sobrepasan 4 SI Se utilizan hasta 6 tamaños

14 Podemos detectar hasta 4 tipos

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 7

17 Sólo es posible realizar búsquedas

* Lista de revisión Si No Comentario

1 En los motores de búsqueda, ¿se toleran Para obtener un resultado

2 Cuando se introducen campos problemáticos NO No existe ningún tipo de ayuda,

4 Las sugerencias o indicaciones, ¿implican una NO Las sugerencias siempre se

Rubén Mejias Alonso - (CC BY-NC-SA 2.0) Pàgina 8

9 Cuando se introducen datos en cajas de No existe ningún tipo de indicación

10 Cuando se introducen datos en cajas de diálogo Siempre hay que rellenar

6. Reconocimiento antes que recuerdo