EVALUACIÓN HEURÍSTICA

Clase 15. DISEÑO UX/UI

LO MÁS RELEVANTE DE LA CLASE 15

Márgenes: Son el espacio negativo (o espacio en blanco) entre el borde del formato y el borde exterior del contenido.

​

Columnas y Calles: Son los dos componentes principales. Las columnas son los bloques que se repiten y el espacio entre estas columnas se conoce como calles.

​

GLOSARIO:

Clase 15

Módulos: Los módulos son unidades individuales creados a partir de la intersección de columnas y filas. Las calles son las que separan cada módulo.

​

​

Sistema de Grilla / Columnas: Cuando elijas una grilla, seleccioná una con el número de columnas que realmente necesitas. No tiene sentido usar una cuadrícula de 12 columnas si tu diseño solo necesita 8 columnas (lo mismo en mobile)

​

GLOSARIO:

Clase 15

Sistema de Grilla / Cuadrícula: Nos ayuda a generar un ritmo vertical de los elementos. Dependiendo el sistema operativo deberás utilizar un mínimo de 11 y 8 dp.

CRONOGRAMA DEL CURSO

Clase 16

Estándares y Guidelines

​

Clase 14

Sistema de Grilla

GRILLA Y LAYOUT

INCORPORANDO

GRILLA AL PROTOTIPO

Clase 15

Evaluación Heurística

EVALUACIÓN�HEURISTICA PROPIA

ENTREGA PROYECTO 4

WIREFRAMES CON GUIDELINES

• Aplicar reglas de Heurística
• Evidenciar los 10 principios de heurística como una validación del prototipo

OBJETIVOS DE LA CLASE

MAPA DE CONCEPTOS CLASE 16

ITERAR

Analizar

Diseñar

Validar

Prototipar

Evaluar

PRUEBAS DE USABILIDAD

EVALUACIÓN HEURÍSTICA

¿ARRANCAMOS?

PRINCIPIOS DE HEURÍSTICA

LOS 10 MANDAMIENTOS DE JAKOB NIELSEN

En 1990, el experto en usabilidad y diseño web Jakob Nielsen definió 10 principios de diseño basados en el usuario que nos acercan a cumplir con el concepto de Usabilidad (Facilidad de Uso).

¿QUÉ ES?

VISIBILIDAD DEL ESTADO DEL SISTEMA

CONSISTENCIA ENTRE EL SISTEMA Y EL MUNDO REAL

CONTROL Y LIBERTAD PARA EL USUARIO

CONSISTENCIA Y ESTÁNDARES

PREVENCIÓN DE ERRORES

MINIMIZAR EL USO DE LA MEMORIA

FLEXIBILIDAD Y EFICIENCIA DE USO

DISEÑO MINIMALISTA

RECONOCER, DIAGNOSTICAR Y RECUPERARSE DE LOS ERRORES

AYUDA Y DOCUMENTACIÓN

1

2

3

4

5

6

7

8

9

10

VEAMOS CADA UNO DE ELLOS

1. VISIBILIDAD DEL ESTADO DEL SISTEMA

El sistema debe informar a los usuarios del estado de la plataforma o software, dando una retroalimentación apropiada en un tiempo razonable

EJEMPLOS

Ej: Al subir un archivo a Drive, el sistema nos avisa el tiempo restante de carga.

Ej: Al acceder al correo de Gmail el sistema nos avisa que se están cargando los correos.

Ej: Cuando colocamos el número de un vuelo, el sistema nos avisa cuando falta para llegar.

Ej: esperamos una respuesta visual del sistema al hacer click en un botón o cuando descargamos algún archivo.

• Cada acción u operación debería generar una respuesta perceptible por el usuario, desde el posicionamiento del cursor sobre un ícono al envío de datos mediante formularios.

QUÉ HACER

2. CONSISTENCIA ENTRE EL SISTEMA Y EL MUNDO REAL

El sistema debe utilizar el lenguaje de los usuarios, con metáforas, palabras o frases que le sean conocidas, en lugar de los términos que se utilizan en el sistema.

EJEMPLOS

Ej: la manera en la que en el mundo real marcamos en un libro una frase o palabra importante, debe ser utilizada en el mundo digital.

Ej: la manera en la que en el mundo real tiramos un papel o documento a la basura, debe ser utilizada en el mundo digital.

Ej: en el mundo real usamos tarjetas físicas para pagar, en el mundo digital lo hacemos de la misma manera, en este caso una tarjeta virtual.

• Una buena práctica es utilizar formas de objetos de la interfaz como pistas visuales basándose siempre en las convenciones culturales del usuario.
• Preguntas e instrucciones que acompañen formularios y operaciones han de escribirse siguiendo la jerga del usuario con la mayor simpleza y claridad posible.

QUÉ HACER

3. CONTROL Y LIBERTAD PARA EL USUARIO

Los usuarios a menudo eligen las funciones del sistema por error y necesitarán una "salida de emergencia" claramente marcada para salir del estado no deseado sin tener que pasar por un diálogo extendido.

EJEMPLOS

Ej: el usuario debe tener el control de borrar cualquier archivo.

Ej: el usuario debe tener el control de deshacer cualquier acción que haya realizado.

Ej: en el navegador, el usuario debe tener el control de volver atrás o actualizar cualquier página.

• Los usuarios deberían ser capaces de cancelar acciones en progreso.
• Se debe solicitar confirmación al usuario ante acciones que tendrán consecuencias drásticas, negativas o destructivas.
• El usuario siempre ha de saber dónde se encuentra y hacia dónde puede ir, es importante apoyar la navegación con etiquetas conceptuales, mapas o marcas.

QUE HACER

4. CONSISTENCIA Y ESTÁNDARES

El usuario debe seguir las normas y convenciones de la plataforma sobre la que está implementando el sistema, para que no se tenga que preguntar el significado de las palabras, situaciones o acciones del sistema.

EJEMPLOS

Ej: existen algunos estándares de íconos que representan cosas. El carrito para comprar y el avatar para perfil.

Ej: Los distintos programas que componen la suite de Office mantienen la misma consistencia en la barra de herramientas y el mismo menú primario de opciones: Home, Insert, Page Layout.

• Cada parte de la interfaz debe comenzar con un título o encabezamiento que describa el contenido de la pantalla.
• Las instrucciones deben aparecer en un lugar semejante a lo largo de las diferentes pantallas, formularios o menús.
• Los diferentes componentes de la interfaz deben ser consistentes y mantener un mismo comportamiento a través de las distintas pantallas del sistema.

QUÉ HACER

5. PREVENCIÓN DE ERRORES

Es más importante prevenir la aparición de errores que generar buenos mensajes de error. Hay que eliminar acciones predispuestas al error o, en todo caso, localizarlas y preguntar al usuario si está seguro de realizarlas.

EJEMPLOS

Ej: Gmail da un aviso y previene errores cuando en el cuerpo del correo esta la palabra “adjuntar”.

Ej: Google da un aviso y previene de errores cuando una palabra está mal escrita.

Ej: Al crear una cuenta se puede dar aviso y prevenir errores si el password no cumple con las condiciones de seguridad.

• Resulta válida tanto la eliminación de condiciones propensas a errores como su detección y presentación ante los usuarios con una opción de confirmación antes de ejecutar la acción.

QUÉ HACER

6. MINIMIZAR EL USO DE LA MEMORIA

El sistema debe minimizar la información que el usuario debe recordar, mostrándola a través de objetos, acciones u opciones. El usuario no tiene por qué recordar la información que recibió anteriormente.

EJEMPLOS

Ej: Cuando se realiza una búsqueda para minimizar el uso de la memoria se utiliza el “autocompletar”.

Ej: Para minimizar el uso de la memoria se puede mostrar el historial.

• Las instrucciones de uso del sistema deben ser visibles o fácilmente recuperables cuando sea apropiado.
• Para facilitar el reconocimiento de la importancia de cada ítem en pantalla se pueden usar variaciones al tamaño de letra, realce de fuente, subrayado, color, sombreado o tipografía especial.

QUÉ HACER

7. FLEXIBILIDAD Y EFICIENCIA DE USO

Los aceleradores permiten aumentar la velocidad de interacción para el usuario experto de modo tal que el sistema pueda atraer a usuarios principiantes y experimentados. El sistema debe permitir personalizar acciones frecuentes para acelerar su uso.

Ej: Un acelerador muy conocido es la función de copiar y pegar, tenemos distintos niveles de dificultad para usarlo.

Ej: Un acelerador muy conocido es que en Instagram al hacer doble tap sobre una foto puedes dejar tu like sin necesidad de hacer click en el corazón.

Ej: Un acelerador muy conocido es cuando hacemos una búsqueda de imagen en Google; tenemos la posibilidad de ser más específicos en la busqueda (tamaño, tipo de archivo, etc).

• Los usuarios deberían tener la opción tanto de hacer clic en una lista de ítems como de utilizar atajos usando el teclado.
• Es útil definir atajos de teclado para las tareas más frecuentes y permitir a los usuarios cierto grado de personalización de ellas. De existir estos atajos se deben presentar a los usuarios.

QUÉ HACER

8. DIÁLOGOS ESTÉTICOS Y DISEÑO MINIMALISTA

La interfaz no debe contener información que no sea relevante o se utilice raramente, pues cada unidad adicional de información en un diálogo compite con las unidades relevantes de la información y disminuye su visibilidad relativa.

EJEMPLOS

Ej: el inicio de sesión de Gmail tiene un diseño minimalista, cuenta los con los elementos necesarios sin exagerar en su diseño.

• Solo la información esencial para tomar decisiones (y solo esta información) debe ser mostrada en la pantalla.
• Los íconos deben ser visualmente distinguibles de acuerdo a su significado conceptual. Los objetos extensos, las líneas resaltadas y las áreas simples de la pantalla, se han de distinguir de los íconos: cada ícono debe estar resaltado con respecto a su fondo.

QUÉ HACER

9. RECONOCER, DIAGNOSTICAR Y RECUPERARSE DE LOS ERRORES

Los mensajes de error deben expresarse en un lenguaje claro, indicar exactamente el problema y ser constructivos.

EJEMPLOS

Ej: al completar un formulario, nos podemos recuperar de los errores sabiendo dónde estaba el problema.

Ej: al llegar a una página de error es posible reconocer y diagnosticar qué fue lo que pasó.

• Los mensajes de error deben estar expresados de manera tal que es el sistema, y no el usuario, quien se hace cargo de los errores. Sin embargo, los mensajes deben colocar al sistema bajo el control del usuario.
• Los mensajes de error deberían informar a los usuarios sobre la severidad del error cometido, sugerir la causa del problema que los ha ocasionado e indicar qué acción debe realizar el usuario para corregirlo.

QUÉ HACER

10. AYUDA Y DOCUMENTACIÓN

La documentación tiene que ser fácil de encontrar, estar centrada en las tareas del usuario, tener información de las etapas a realizar y no ser muy extensa.

EJEMPLOS

Ej: Mercado Libre tiene una sección de ayuda con información sobre cada una de las funcionalidades principales.

Ej: Mercado Libre tiene un apartado de búsqueda de posibles soluciones y ayuda.

Ej: el onboarding (pantallas previo al inicio de sesión de la app) nos ayuda a entender qué funcionalidades principales tiene.

• Las instrucciones deben seguir la secuencia de acciones del usuario. Si las opciones de los menús son ambiguas, el sistema ha de proveer información aclaratoria adicional cuando un ítem sea seleccionado.
• Deben existir ayudas-memoria para los comandos y atajos de teclado, por ejemplo, a través de referencias rápidas.

QUÉ HACER

EVALUACIÓN HEURÍSTICA

Es un método de inspección de la usabilidad sin usuarios. Este consiste en examinar la calidad del uso de una interfaz por parte de varios evaluadores, a partir del cumplimiento de unos reconocidos principios de usabilidad: los heurísticos

¿QUÉ ES?

La evaluación heurística es una técnica crucial y muy útil a la hora de encontrar errores de usabilidad, sobre todo en fases muy tempranas de un proyecto de diseño. Pero en ningún caso sustituye a las evaluaciones de usabilidad con usuarios reales.

Vamos a realizar una evaluación cualitativa, ya que nos centraremos en propuestas de solución a la heurística que no se cumpla. Para hacer la evaluación hay que completar cada uno de los 10 principios colocando si se cumple o no. En caso de no cumplirlo, colocar en el detalle cómo se incorporará.

EVALUACIÓN HEURÍSTICA

​

¡PARA PENSAR!

La siguiente imagen ¿cumple o no con el principio de “Ayudar a reconocer, diagnosticar y recuperarse de errores”?

​

SI O NO

​

EVALUACIÓN HEURÍSTICA

Validación del prototipo

�TIEMPO: 45 MINUTOS

​

DESCARGAR DOCUMENTO

VALIDANDO EL PROTOTIPO CON UNA EVALUACIÓN HEURÍSTICA

PRIMERA PARTE

Consigna DOCENTE: Deberá enunciar cada uno de los 10 principios repasando los ejemplos vistos en la clase.

​

​

Consigna ESTUDIANTE: Con el documento de la carpeta de la clase, deberá ir colocando si su prototipo cumple o no el principio enunciado por el docente.

VALIDANDO EL PROTOTIPO CON UNA EVALUACIÓN HEURÍSTICA

SEGUNDA PARTE

Consigna: Los estudiantes compartirán con sus compañeros aquellos principios que no cumple, para que entre todos encuentren soluciones. En este punto el estudiante deberá anotarlo en la columna “detalle”.

​

ACUERDOS

Presencia

Escucha Activa

Apertura al aprendizaje

Todas las voces

¡MUCHAS GRACIAS!

Resumen de lo visto en clase hoy:

• Aplicar reglas de Heurística
• Evidenciar los 10 principios de heurísticas como una validación del prototipo.