TALLER UX / UI

UX Check

Prototipado
Testeo del Prototipado
Principios de usabilidad y
heurística (UX Check)

Isamar Bonilla Martínez

¡Universidad del Pueblo y para el Pueblo! 1

Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 Análisis heurístico para UX en un sitio
web
Un análisis heurístico es una técnica para evaluar la usabilidad de un sistema
de interfaces y procesos a cargo de un experto, a partir de los principios de
la disciplina de Interacción Persona-Ordenador.

El análisis consiste en una serie de comprobaciones que velan por la

usabilidad y la consecución de los objetivos de negocio de la aplicación,
obteniendo conclusiones y propuestas de mejora, de qué se debería
implementar.

Los 10 principios heurísticos

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium
de Jakob
doloremque Nielsen
laudantium, totam rem aperiam eaque ipsa, quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi
nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad
minima veniam.

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam
voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam
est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia
non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam
quaerat voluptatem. ut enim ad minima veniam.

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium
Los principios
doloremque heurísticos
laudantium, totam son las bases
rem aperiam eaqueen ipsa,
las que
quae seab apoyan los
illo inventore
diseñadores
veritatis et quasia architecto
la hora debea realizar
inventore la evaluación
veritatis et quasi de usabilidad
architecto beataede un
vitae
sitio web,
dicta unaratione
eos, qui aplicación móvil, un
voluptatem software
sequi o cualquier
nesciunt, neque porroproducto
quisquamdigital.
est, qui
dolorem inventore veritatis et quasi architecto beatae vitae dicta eos, qui ratione
Se llaman sequi
voluptatem “heurísticos”
nesciunt, porque son reglas
neque porro quisquam generales y no directrices
est, qui dolorem inventore
de usabilidad
veritatis et quasiespecíficas. Teniendo
architecto beatae en cuenta
vitae dicta eos, quiestas reglas
ratione generales
voluptatem no
sequi
nesciunt, neque porro quisquam est, qui dolorem
solo se puede diseñar sino también analizar lo diseñ[Link] vitae dicta eos, qui ratione
voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia
dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem ut enim
ad minima veniam. 2
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 Los 10 principios de
heurística de Jakob Nielsen
1. Visibilidad del estado del sistema: el sistema siempre debe
mantener informados a los usuarios sobre lo que está sucediendo, a
través de comentarios apropiados dentro de un tiempo razonable.

2. Relación entre el sistema y el mundo real: el sistema debe

hablar el idioma de los usuarios, con palabras, frases y conceptos
familiares para el usuario, en lugar de términos orientados al
sistema. Siga las convenciones del mundo real, haciendo que la
información aparezca en un orden natural y lógico.

3. Libertad y control por parte del usuario: hay ocasiones en

que los usuarios elegirán las funciones del sistema por error y
necesitarán una “salida de emergencia” claramente marcada para
dejar el estado no deseado al que accedieron, sin tener que pasar
por una serie de pasos. Se deben apoyar las funciones de deshacer
y rehacer.

4. Consistencia y estándares: los usuarios no deberían

cuestionarse si acciones, situaciones o palabras diferentes significan
en realidad la misma cosa; siga las convenciones establecidas.

3
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 Los 10 principios de
heurística de Jakob Nielsen
5. Prevención de errores: mucho mejor que un buen diseño de
mensajes de error es realizar un diseño cuidadoso que prevenga la
ocurrencia de problemas.

6. Reconocimiento antes que recuerdo: se deben hacer visibles

los objetos, acciones y opciones, El usuario no tendría que recordar
la información que se le da en una parte del proceso, para seguir
adelante. Las instrucciones para el uso del sistema deben estar a la
vista o ser fácilmente recuperables cuando sea necesario.

7. Flexibilidad y eficiencia de uso: la presencia de aceleradores,

que no son vistos por los usuarios novatos, puede ofrecer una
interacción más rápida a los usuarios expertos que la que el sistema
puede proveer a los usuarios de todo tipo. Se debe permitir que los
usuarios adapten el sistema para usos frecuentes.

8. Estética y diseño minimalista: los diálogos no deben contener

información que es irrelevante o poco usada. Cada unidad extra de
información en un diálogo, compite con las unidades de información
relevante y disminuye su visibilidad relativa.

4
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 Los 10 principios de
heurística de Jakob Nielsen
9. Ayudar a los usuarios a reconocer: diagnosticar y recuperarse de
errores: los mensajes de error se deben entregar en un lenguaje claro
y simple, indicando en forma precisa el problema y sugerir una solución
constructiva al problema.

10. Ayuda y documentación: incluso en los casos en que el sistema

pueda ser usado sin documentación, podría ser necesario ofrecer ayuda
y documentación. Dicha información debería ser fácil de buscar, estar
enfocada en las tareas del usuario, con una lista concreta de pasos a
desarrollar y no ser demasiado extensa.

Un conjunto específico de heurísticos contiene reglas

empíricas, mejores prácticas, normas, reglas y convenciones
que se han probado o observado durante largos períodos de
tiempo. Apegarse a estos estándares heurísticos
produce diseños de UX que simplemente funcionan mejor.

5
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 Práctica / UX Check

UX Check es una extensión de Chrome muy útil para la

realización de evaluaciones heurísticas o evaluaciones de
accesibilidad de un sitio web, o simplemente para tomar
notas sobre una interfaz.

Las utilidades que tiene son:

• Escribir anotaciones sobre los elementos de la interfaz de la

web que se visita, tanto del problema encontrado como de
las recomendaciones que se proponen.

• Asociar a cada nota una heurística concreta y un nivel de

gravedad.

• Personalizar el listado de heurísticas a analizar.

• Asociar automáticamente a cada nota un pantallazo de la

página, en el cual, el elemento analizado se muestra
resaltado.

• Consultar el listado de todas las notas y generar un informe

en Word.

• Realizar las anotaciones en diferentes sesiones, de modo

que las notas no se pierden, aunque cierres el navegador.

6
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 UX Check / Práctica de Análisis
heurístico de sitio web
Para la siguiente práctica, se analizará el sitio web de la
Facultad: [Link]

1. Agregar la extensión a Google Chrome.

2. Al instalar UX Check en Chrome se añadirá un ícono a la barra de

herramientas del navegador. Posteriormente reiniciar el navegador.

3. Configurar la herramienta:

4. Por defecto, las 10

heurísticas
seleccionadas son las
de Nielsen, pero se
puede personalizar
en “Settings”.

7
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 5. Cuando se pulsa el ícono de UX Check, se muestra en el lateral
izquierdo el listado de heurísticas y las opciones de la herramienta.

6. Cuando la herramienta está activa y pasamos el puntero, se marcan

los distintos objetos del sitio web, cerramos la herramienta y damos
clic en el Portal del Estudiante para ver el formulario de acceso.

7. Se muestra la siguiente interfaz, para el

inicio de sesión del usuario estudiante, se
puede observar que en el campo
contraseña no está el botón para verificar
la correcta introducción de la clave por
parte del usuario.

8
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 8. Activamos la herramienta nuevamente y realizaremos las pruebas
utilizando la heurística n° 5 Prevención de errores. Se llena la siguiente
información: agregando una nota, recomendaciones y seleccionando
la severidad, que es la clasificación de la gravedad del problema de
usabilidad identificado y guardamos.

9. Ir al menú de la herramienta y seleccionar el View progress

9
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 10. Se muestra el progreso de las observaciones que el crítico experto
realiza durante el análisis heurístico de las pruebas de usabilidad del
sitio web o del producto digital evaluado. Donde también está la opción
de eliminarlas.

11. Se tiene la opción en el menú de la herramienta de exportar el

informe en un documento de Word.

10
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez
 12. El informe es un documento de Word que contendrá los resultados
de la evaluación.

“Los productos bien diseñados tienen una gran

facilidad de uso. La gran usabilidad es un
contribuyente significativo a la calidad del producto
y una experiencia de usuario sin fisuras.”

TALLER UX / UI
UX Check

11
Departamento de Ciencias Tecnológicas y Salud //
Isamar Bonilla Martínez