Copia de Clase 16 Evaluación Heuristica

Vista previa del material en texto

EVALUACIÓN HEURÍSTICA
 Clase 16. DISEÑO UX/UI
Obligatoria siempre. Lleva el ícono y el color del curso (provisto por CH).
RECORDÁ PONER A GRABAR LA CLASE
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 17
Estándares y Guidelines
Clase 15
Sistema de Grilla
GRILLA Y LAYOUT
INCORPORANDO 
GRILLA AL PROTOTIPO
Clase 16
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
No va, es para guiar el uso del plantilla.
MAPA DE CONCEPTOS CLASE 16
ITERAR
Analizar
Diseñar
Validar
Prototipar
Evaluar
PRUEBAS DE USABILIDAD
EVALUACIÓN HEURÍSTICA
¿ARRANCAMOS?
PRINCIPIOS DE HEURÍSTICA
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
LOS 10 MANDAMIENTOS DE JAKOB NIELSEN
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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
1
CONSISTENCIA ENTRE EL SISTEMA Y EL MUNDO REAL
2
CONTROL Y LIBERTAD PARA EL USUARIO
3
CONSISTENCIA Y ESTÁNDARES
4
PREVENCIÓN DE ERRORES
5
MINIMIZAR EL USO DE LA MEMORIA
6
FLEXIBILIDAD Y EFICIENCIA DE USO
7
DISEÑO MINIMALISTA
8
RECONOCER, DIAGNOSTICAR Y RECUPERARSE DE LOS ERRORES
9
AYUDA Y DOCUMENTACIÓN
10
VEAMOS CADA UNO DE ELLOS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
VISIBILIDAD DEL ESTADO DEL SISTEMA
El sistema debe informar a los usuarios del estado del sistema, dando una retroalimentación apropiada en un tiempo razonable
EJEMPLOS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Ej: Al subir un archivo a Drive, el sistema nos avisa el tiempo restante de carga.
Usar para slides de texto con imagen.
Ej: Al acceder al correo de Gmail el sistema nos avisa que se están cargando los correos.
Usar para slides de texto con imagen.
Ej: Cuando colocamos el número de un vuelo, el sistema nos avisa cuando falta para llegar.
Usar para slides de texto con imagen.
Ej: esperamos una respuesta visual del sistema al hacer click en un botón o cuando descargamos algún archivo.
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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.
Usar para slides de texto con imagen.
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.
Usar para slides de texto con imagen.
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.
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Ej: el usuario debe tener el control de borrar cualquier archivo.
Usar para slides de texto con imagen.
Ej: el usuario debe tener el control de deshacer cualquier acción que haya realizado.
Usar para slides de texto con imagen.
Ej: en el navegador, el usuario debe tener el control de volver atrás o actualizar cualquier página.
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Ej: existen algunos estándares de íconos que representan cosas. El carrito para comprar y el avatar para perfil.
Usar para slides de texto con imagen.
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.
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.Ej: Gmail da un aviso y previene errores cuando en el cuerpo del correo esta la palabra “adjuntar”.
Usar para slides de texto con imagen.
Ej: Google da un aviso y previene de errores cuando una palabra esta mal escrita.
Usar para slides de texto con imagen.
Ej: Al crear una cuenta se puede dar aviso y prevenir errores si el password no cumple con las condiciones de seguridad.
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Ej: Cuando se realiza una búsqueda para minimizar el uso de la memoria se utiliza el “autocompletar”.
Usar para slides de texto con imagen.
Ej: Para minimizar el uso de la memoria se puede mostrar el historial.
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
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.
Usar para slides de texto con imagen.
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.
Usar para slides de texto con imagen.
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).
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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.
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Ej: al completar un formulario, nos podemos recuperar de los errores sabiendo dónde estaba el problema.
Usar para slides de texto con imagen.
Ej: al llegar a una página de error es posible reconocer y diagnosticar qué fue lo que pasó.
Usar para slides de texto con imagen.
Los mensajes de error deben estar expresados de manera tal que es el sistema, y no el usuario, sea 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
Usar para slides de sólo texto con bullets.
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Ej: Mercado Libre tiene una sección de ayuda con información sobre cada una de las funcionalidades principales.
Usar para slides de texto con imagen.
Ej: Mercado Libre tiene un apartado de búsqueda de posibles soluciones y ayuda.
Usar para slides de texto con imagen.
Ej: el onboarding (pantallas previo al inicio de sesión de la app) nos ayuda a entender qué funcionalidades principales tiene.
Usar para slides de texto con imagen.
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
Usar para slides de sólo texto con bullets.
EVALUACIÓN HEURÍSTICA
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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?
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
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.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
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
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¡PARA PENSAR!
La siguiente imagen ¿cumple o no con el principio de “Ayudar a reconocer, diagnosticar y recuperarse de errores”?
SI O NO
CONTESTA LA ENCUESTA DE ZOOM
SI O NO
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto esuna actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break. 
Pregunta: La siguiente imagen ¿cumple o no con el principio de “Ayudar a reconocer, diagnosticar y recuperarse de errores”?
Opciones:
SI
NO
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
 EVALUACIÓN HEURÍSTICA
Validación del prototipo
TIEMPO: 45 MINUTOS
Evaluación Heurística
Tiempo estimado: 45 minutos
Espacio: Breakout Rooms
PARTE 1
Consigna para el docente: Deberá enunciar cada uno de los 10 principios repasando los ejemplos vistos en la clase.
Consigna para el estudiante: Con el documento de la carpeta de la clase, deberá ir colocando si su prototipo cumple o no cumple el principio enunciado por el docente.
PARTE 2
Consigna para el docente: El tutor solicitará a cada alumno que comparta 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”.
NOTA: La segunda parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar conversación entre los estudiantes.
¿Cómo llevar adelante la actividad?
Paso 1: El/la docente dividirá la clase en Zoom en varias salas/rooms, distribuyendo a los estudiantes de manera equitativa para hacer las pruebas.
Paso 2: En cada sala, quedará a cargo un tutor o el docente, quien moderará la actividad y organizará los turnos de habla.
Paso 3: Un estudiante activará el micrófono y enunciar los principios que no haya cumplido. Entre todos buscaremos soluciones al mismo.
Paso 4: Repetir la actividad hasta que todos los alumnos hayan realizado la actividad.
Paso 5: Hacer un cierre de la actividad. El docente y/o tutor/a puede hacer una reflexión de los relevante de su sala.
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: El tutor solicitará a cada estudiante que comparta 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”.
NOTA: esta parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar conversación entre los estudiantes.
ACUERDOS
Presencia
Escucha Activa
Apertura al aprendizaje
Todas las voces
ACUERDOS
Presencia
Participar y “estar” en la clase, que tu alrededor no te distraiga.
Escucha Activa
No es lo mismo escuchar que “escuchar”, escuchar más allá de lo que la persona está expresando directamente.
Apertura al aprendizaje
Siempre, pero siempre puedes seguir aprendiendo. Compartir el conocimiento es válido, la construcción colaborativa es la propuesta.
Todas las voces
Escuchar a todos, todos podemos reflexionar. Dejar el espacio para que todos podamos participar.
CUARTA ENTREGA DEL PROYECTO FINAL 
Deberás entregar el prototipo en fidelidad media visual, de contenido y funcionalidad. Este prototipo debe incluir: sistema de grilla, contenidos y los ajustes propuestos luego de las pruebas de usabilidad.
¿CUÁNDO?
	CUARTA ENTREGA	1. Prototipo - Fidelidad Media :
Visual: Sistema de Grilla y Atomic Design
Contenido: UX writing
Funcionalidad: recorrido completo de, al menos, la main feature (userflow). 
Incluir los resultados más relevantes de las Pruebas de Usabilidad.	Clase 16
			
			
¡IMPORTANTE!
Las entregas del proyecto final tienen fecha de entrega 7 días después de finalizada la clase. Te sugerimos llevar las entregas al día. 
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
	ENTREGA	REQUISITO	FECHA
	1° entrega	Idea para el prototipo + Arquetipo de Persona	Clase 4
	2° entrega	Userflow + Arquitectura de la Información (Cardsorting)+MVP y POV	Clase 8
	3° entrega	Wireframes/Prototipo en baja + Evolución del prototipo (Sketch+Patrones+WB)	Clase 12
	4° entrega	Wireframe/Prototipado en media fidelidad	Clase 16
	5° entrega	Prototipo en media/alta fidelidad 
+ UI KIT +Moodboard	Clase 19
	Proyecto Final 	Unificación de todas las entregas anteriores	Clase 24
	CUARTA ENTREGA DEL PROYECTO FINAL		
	Clase 4	Formato: Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre “ProyectoFinal+Entrega4+Apellido”. Se puede entregar un google slide también.
Sugerencia: habilitar la opción de comentarios.
Objetivos Generales:
Integrar todos los desafíos entregables del proyecto. 
Chequear y revisar el proyecto.
Generar, en forma de presentación, el detalle de los desafíos anteriores.
Objetivos Específicos:
Presentar el prototipo en fidelidad media visual, contenido y funcionalidad. El objetivo es poder recorrer el prototipo completo y completar la tarea principal propuesta en el userflow. 
Evidenciar lo importante de completar un ciclo de DCU (Analizar, Diseñar y Evaluar).
Se debe entregar:
URL al Figma o Adobe XD con el Prototipo funcional. El prototipo debe evidenciar correctamente la incorporación de grilla y atomic design.
Incluir los resultados más relevantes de las Pruebas de Usabilidad.
	
	PROTOTIPO - FIDELIDAD MEDIA VISUAL, DE CONTENIDOS Y DE FUNCIONALIDAD						
	Aspectos a incluir en el entregable:
Botones con texto real (ej: botón "Continuar")
Títulos y bajadas con texto real.
Ser ordenados con los nombres de los componentes y elementos de cada frame.
Sin color, trabajar en escala de Grises.
Incorporar los conceptos de sistema de grilla, componente al diseño de interfaz de la app. Los componentes deben estar ordenados y organizados en grilla.
Poner en práctica el concepto de Atomic design en cada uno de los componentes (definir elementos mínimos, agrupar y relacionar).
Presentar un documento que detalle los puntos más relevantes que fueron iterados en el prototipo a partir de las pruebas de usabilidad. 
						
EJEMPLO DE PRESENTACIÓN
Objetivo: Generar, en forma de presentación, el detalle de los desafíos anteriores. 
PROTOTIPO FIDELIDAD MEDIA
NOTA: La imagen y el GIF es a modo ilustrativo, se debe presentar un botón con el acceso al prototipo de figma o adobe xd. El mismo debe tener:
Identifica la grilla de columnas y/o cuadrícula.
Detallado los componentes (ordenado según Atomic Design)
Layers con nombres claros y ordenados.
CONCLUSIONES PRUEBAS DE USABILIDAD
CONCLUSIONES PRUEBAS DE USABILIDAD
¿PREGUNTAS?
Obligatoria siempre.
¡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.
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINA Y VALORA ESTA CLASE
Obligatoria siempre.