Análisis Heurístico en Usabilidad de Interfaz
Contenido del curso
Es un método de inspección de la usabilidad sin usuarios que consiste en examinar la calidad de uso de una interfaz por parte de uno o varios evaluadores expertos, a partir del cumplimiento de unos principios reconocidos de usabilidad. Estos principios que sirven de base para la evaluación se denominan heurísticos.También puede ser conocido como auditoría de UX.
El análisis heurístico es un método de ingeniería de usabilidad para encontrar los problemas que pueden surgir en el diseño de una interfaz de forma que puedan ser atendidos como parte de un proceso de diseño iterativo. En general, la evaluación heurística es recomendable que sea realizada por diferentes evaluadores, ya que para una sola persona será complicado encontrar todos los problemas de usabilidad en una interfaz.
Para llevar a cabo este análisis sólo será necesaria una herramienta digital o física que nos permita tomar notas. También nos podemos apoyar en una herramienta para la realización de evaluaciones heurísticas o evaluaciones de accesibilidad de un sitio web, como por ejemplo UX Check. Cuando se lleva a cabo se deberá preparar o seleccionar el checklist de base, evaluar el diseño y analizar los resultados para preparar las recomendaciones de diseño.
Como expertos, los evaluadores deben revisar una lista de verificación de criterios para encontrar fallas que los equipos de diseño pasaron por alto. La heurística de Nielsen-Molich establece que un sistema debe:
Por ejemplo, el mensaje "¿Está seguro de que desea hacer esto?", no deja claro el problema al que se puede enfrentar el usuario al seleccionar esta opción.
CONCLUSIÓN:
En esta clase hemos conocido el significado de Análisis Heurístico o auditoría UX. También hemos aprendido las 10 consideraciones que incluye la lista de verificación de la usabilidad que utilizan las personas que realizan estos análisis.
RETO:
Selecciona un producto digital y realiza una Evaluación Heurística comprobando las consideraciones que debe cumplir un sistema utilizando como referencia la lista de verificación de criterios de Nielsen-Molich que hemos visto en la clase.
Guadalupe Lucía Fernández
Pedro Isaac Aguilar
Jimena Haran
Meverly Torrealba
Oscar David Torres C.
Miguel Angel Reyes Moreno
Daniel Steven Carrera Osorno
Juan Pablo Sinarahua Terrones
Marcela Rios
Marcos Alejandro
Lizeth De La Espriella
Yurif Francia Coronado Calderon
Juan Diego Paredes Hoyos
Julian Monroy
Walkiria Arteaga
Fabián Téllez
Sandra Patricia Novoa Enciso
Vanessa Marulanda Ballesteros
Marco Rodrigo Polo Silva
Marcela Rios
Ejemplo: Gmail
++Mostrar información de manera que los usuarios entiendan cómo funciona el producto y comprendan el idioma en el que el producto comunica la información:++ para escribir un mail hay un botón grande que indica "Redactar".
++Mantener informados a los usuarios sobre su estado de manera adecuada y oportuna:++ Cuando se empieza a redactar, presenta una barra que parpadea indicando dónde se está escribiendo. (I)
++Ofrecer control a los usuarios y permitir deshacer errores fácilmente:++ permite deshacer el envío de un mail unos segundos luego de haber apretado el botón de enviar (estos segundos son configurables).
++Ser coherente para que los usuarios no se confundan con el significado de las diferentes palabras, íconos, etc:++ posee los iconos estandarizados, como el clip que simboliza "adjuntar", la cara sonriente que simmboliza "emojis" o una lapicera que simboliza el "insertar firma"
++Prevenir errores. Un sistema debe evitar las condiciones en las que surgen errores o advertir a los usuarios antes de que realicen acciones riesgosas:++ al escribir "archivo adjunto" en el cuerpo del mail, Gmail advierte con un mensaje que dice "Parece que olvidaste de adjuntar un archivo, escribiste archivo adjunto en el mensaje, pero no hay archivos adjuntos. ¿Quieres enviarlo de todas formas? " en el caso de que no haya nada adjuntado.
++Tener información visible e indicaciones para permitir que los usuarios reconozcan opciones y acciones que pueden realizar en lugar de obligarlos a confiar en la memoria.++ cuando se pasa el cursos sobre los iconos, te dice en palabras lo que significan.
++Ser flexible para que los usuarios experimentados encuentren formas más rápidas de alcanzar sus objetivos:++ permite programar envío de mails, armar respuestas automáticas e insertar firma automaticamente.
++No tener información desordenada, solo incluir información relevante para las tareas actuales:++ cuando se redacta un mail abre un recuadro para ingresar texto e imagenes, dejando en claro que no se puede seguir leyendo la bandeja de entrada.
++Proporcionar ayuda en un lenguaje sencillo con respecto a errores y soluciones:++ en cuanto a edición de texto, cuando una palabra está mal escrita agrega un subrayado debajo de ella.
++Enumerar pasos concisos en documentación sencilla y con capacidad de búsqueda para superar problemas:++ cuando se ingresa por primera vez, brinda un paso a paso de como utilizar la página.
Para hacer auditoría UX ... ¿Hay algún parámetro o formación específica para poder ser considerado un evaluador experto? ¿Debes ser forzosamente un Product Manager o Product Owner, o sólo con que tengas varios años de experiencia como UX Designer?
Eejemplo: Discord
Mantener informados : Al entrar a un canal donde se puede escribir aparece una barra que parpadea para indicarnos en dónde se va a escribir en caso que lo hicieramos.
Mostrar información de manera que los usuarios entiendan: siguiendo hablando del ejemplo anterior si en ese canal no se puede escribir ese mismo espacio se ve bloqueado, hay un mensaje que nos indica que ahí no se puede escribir.
Ofrecer control : los mensjes enviados se pueden eliminar (sin dejar rastro de que ese mensaje fue enviado alguna vez) y también se puede editar.
Prevenir errores: Al querer bloquear a alguien sale un cartelque te pregunta si estás seguro de quererehacerlo, a su vez cuando entrás a un enlace de invitación también te pregunta si queres unirte
Tener información visible e indicaciones:Al pasar el cursor sobre los servidores a los que pertenecés te muestra el nombre y también cuenta con una opción en el mismo chat individual donde podés elegir si querés ver lo que está haciendo esa persona, qué servidores comparten en común, cuándo se unió a discord, etc
Ser flexible: en la parte del chat cuenta con íconos para elegir si querés enviar un sticker, un emoji o si querés regalar un mes de Discord Nitro ( que es una versión paga del mismo)
No tener información desordenada: cuando se entra a un chat dejas de ver el inicio donde está la lista de amigos y qué está haciendo cada uno, lo mismo sucede en el caso de que esté en un servidor , dejo de ver la lista de amigos y de otros servidores, a su vez si estoy dentro de un canal de un servidor, dejo de ver los otros canales para ver el que yo elegí
Proporcionar ayuda: hay una barra similar tanto cuando estás en un chat privado como cuando estás dentro de un servidor y el mismo logo de Ayuda se mantiene en la misma esquina superior derecha
Enumerar pasos cuando se ingresa por primera vez te explica que podés usar esa aplicación tanto web como descargandola y de ahí te va guiando, paso 1 poner tu nick, paso 2 tu fecha de nacimiento, paso 3 ingresar correo, que de todas formas de no ingresar correo podés ingresar igual pero arriba aparece un cuadro destacado por sobre los demás que dice que si no querés perder la cuenta que ingreses un mail, al lado un botón para hacerlo.
En el caso de Facebook podría mencionar:
Mantienen informados a los usuarios colocando los avisos de notificaciones pendientes (El puntito rojo) o mensaje pendiente sobre los iconos.
Muestran información sobre como funcionan ciertos procesos al mostrar el aviso de que "alguien está escribiendo" en las secciones de comentarios.
Ofrecen el control al permitir editar publicaciones o comentarios propios.
Son coherentes al emplear iconos parecidos pero diferenciables para secciones como Amigos y Grupos.
Previenen errores al preguntar si realmente deseas eliminar a alguien de tus amigos. Y te ofrecen opciones como silenciarlo o tomar un descanso.
Tienen indicaciones como por ejemplo justo en el inicio para postear algo en el muro, te preguntan "¿Qué estas pensando?" En la zona donde se debe escribir. Mientras que junto a los iconos de imagen, video o GIF, te indican que desde ahí puedes agregar eso a tu post.
Son flexibles al haber agregado una sección en la cuenta para personalizar la pantalla en vez de necesitar buscarla dentro de la configuración. Agilizando así el trabajo de activar el modo oscuro.
Mantienen la información ordenada al colocar las opciones de compartir algo, dentro del botón compartir. De modo que no sobrecarga ni confunde.
Proporcionan ayuda al preguntarte si has olvidado tu contraseña y ofrecerte múltiples soluciones para recuperar tu cuenta.
Enumeran los pasos en el apartado de soporte cuando es necesario hacer un procedimiento más largo. Suele ocurrir al incursionar en Facebook Business.
Producto digital: Bancolombia
Pienso en Youtube:
1- En la parte superior, en el centro, tienes una barra de búsqueda para buscar vídeos. Presionas enter o das click en la lupa y te mostrará resultados
2- Cuando estás viendo un vídeo, te muestra cuánto tiempo dura el vídeo y en qué parte de él estás con una barra roja de progreso
3- Puedes darle like o dislike, así como quitarlo. Puedes escribir uno o varios comentarios y borrarlos si lo deseas.
Play Store de Google
La evaluación heurística es más efectiva durante las fases de diseño y pruebas del ciclo de desarrollo de software. Es preferible realizarla antes de que el producto pase al equipo de desarrollo, al momento de diseñar historias de usuario, para identificar problemas de usabilidad desde el inicio. Sin embargo, también es valiosa en el sprint review, al final del desarrollo, para detectar fallas que podrían haberse pasado por alto. Usarla en ambos momentos maximiza la calidad del producto final.
Hola mi aporte no es sobre el curso, les paso que al llegar a la clase 12 y dar siguiente con la flecha saltaba a la clase 16?
🔍 Evaluación Heurística de Zoom 🧩 Basada en los 10 principios de Nielsen-Molich
1. Visibilidad del estado del sistema ✔️ Zoom mantiene informado al usuario sobre lo que está pasando: si está conectando, si espera al anfitrión o si la reunión aún no comenzó.
2. Correspondencia entre el sistema y el mundo real ✔️ Usa un lenguaje claro y familiar: “código de acceso”, “reunión”, “esperando al anfitrión”, etc.
3. Control y libertad del usuario ✔️ Permite salir de reuniones, volver a la pantalla anterior o cambiar datos antes de entrar (como nombre o ID). Buen nivel de control.
4. Consistencia y estándares ✔️ Íconos e instrucciones coherentes en todas las versiones. Usa convenciones comunes (micrófono, cámara, compartir pantalla).
5. Prevención de errores ✔️ Cuando se escribe mal el ID, aparece el mensaje: “ID no válido, inténtelo de nuevo”. Ayuda a prevenir confusión.
6. Reconocimiento antes que recuerdo ✔️ Frases como “Si recibió un enlace de invitación, púlselo para entrar” o “Introducir código de acceso a la reunión” guían bien al usuario.
7. Flexibilidad y eficiencia de uso ✔️ Usuarios frecuentes pueden usar atajos, ingresar directamente con enlaces o repetir reuniones previas fácilmente.
8. Diseño estético y minimalista ✔️ Interfaz clara, sin elementos innecesarios. Todo lo importante está a la vista y organizado.
9. Ayuda a reconocer, diagnosticar y recuperarse de errores ✔️ Los mensajes de error son simples y directos. El usuario sabe qué pasó y cómo solucionarlo.
10. Ayuda y documentación ✔️ Dispone de un centro de ayuda con contenido fácil de buscar y entender, incluyendo videos y tutoriales.
✅ Conclusión: Zoom es un producto digital que cumple con los principios heurísticos. Ofrece una experiencia clara, predecible y segura para usuarios de todos los niveles. Los errores se previenen y comunican con claridad, y el diseño se mantiene simple y coherente.
Ejemplo: Aplicación móvil X:
1. Visibilidad del estado del sistema: cumple con esta heurística al mostrar información en tiempo real, como notificaciones, menciones, y actualizaciones en la línea de tiempo. Los usuarios pueden ver el estado de sus acciones (como un tweet enviado o la actualización del feed).
Mejora potencial: En algunos casos, la retroalimentación podría mejorarse, como cuando se cargan imágenes o videos, ya que puede ser poco clara si el archivo ha sido subido con éxito.
2. Correspondencia entre el sistema y el mundo real: usa un lenguaje accesible y comprensible, con términos como "Retweet", "Me gusta" o "Responder", que son claros para el usuario promedio.
Mejora potencial: Algunos iconos, como el de "Retweet", pueden no ser intuitivos para nuevos usuarios, por lo que una breve descripción o tutorial inicial podría mejorar la comprensión.
3. Control y libertad del usuario: La aplicación permite a los usuarios deshacer acciones como eliminar un tweet o un retweet, lo que facilita la corrección de errores.
Mejora potencial: No hay una función directa para "deshacer" un "me gusta", lo que a veces puede generar confusión sobre si la acción se ha revertido correctamente.
4. Consistencia y estándares: La consistencia en los términos y la disposición de las opciones es clara a lo largo de la plataforma. X sigue los estándares de diseño habituales, con iconos y elementos familiares.
Mejora potencial: En algunas versiones, la ubicación de ciertas funciones ha cambiado, lo que puede ser desconcertante para los usuarios.
5. Prevención de errores: ofrece confirmaciones para ciertas acciones importantes, como eliminar un tweet o cerrar sesión.
Mejora potencial: Sin embargo, al hacer clic en ciertos enlaces o iniciar acciones como seguir o dejar de seguir a alguien, no siempre hay una confirmación, lo que podría causar errores no deseados.
6. Reconocimiento antes que recuerdo: Los iconos están bien ubicados y son fáciles de reconocer, lo que reduce la necesidad de que los usuarios recuerden funciones específicas. Las opciones y acciones son visibles en todo momento.
Mejora potencial: Algunas opciones menos utilizadas, como "Listas" o "Espacios", podrían ser más visibles o estar mejor explicadas para los nuevos usuarios.
7. Flexibilidad y eficiencia de uso: permite a los usuarios más avanzados utilizar atajos de teclado en la versión web y filtrar contenido personalizado.
Mejora potencial: La eficiencia en el móvil podría optimizarse con más gestos o atajos, especialmente para usuarios experimentados que gestionan varias cuentas.
8. Estética y diseño minimalista: mantiene un diseño simple, evitando el exceso de información en las pantallas principales.
Mejora potencial: En ciertos casos, la sobrecarga de opciones en los perfiles o menús secundarios puede ser confusa, lo que afecta la simplicidad.
9. Ayuda para reconocer, diagnosticar y recuperar errores: Los mensajes de error son generalmente claros, como cuando una conexión falla o un tweet no se publica correctamente.
Mejora potencial: Algunos mensajes de error podrían ser más descriptivos y proporcionar pasos claros para solucionar el problema (por ejemplo, especificar si el error es por una mala conexión).
10. Ayuda y documentación: ofrece ayuda en su sitio web, con documentación accesible para resolver problemas comunes.
Mejora potencial: La aplicación móvil podría beneficiarse de una integración de ayuda más directa dentro de la plataforma, especialmente para usuarios que experimentan problemas técnicos o necesitan orientación sobre nuevas característica
Banco Virtual Brubank
-Mantener informados a los usuarios sobre su estado: al momento de ingresar si hay algún problema o actualización lo indica con un msj de intentar mas tarde
-Cómo funciona el producto y cmprendan el idoma, es basatnte intuitivo, esta en español en un pais de habla hispana
-Es coherente
-Antes de hacer cualquier transacción pide verificar datos
-es flexible
-Proporciona ayuda sobre errores
Elegi Youtube:
-La página se mantiene mostrando información mientras haya conexión a internet. -Youtube se basa en un menú y mostrar miniaturas que llevan a sus respectivos videos, fácil de entender. -Permite avanzar y retroceder, acelerar o desacelerar la reproducción, mutear, controlar el volumen poner subtítulos, etc. Variedad de controles. -Usa lenguaje simple palabras clave. -Como ejemplo de prevenir errores al borrar un comentario muestra una ventana donde vuelve a preguntar. -Ofrece opciones como “guardar para más tarde” para no tener que recordar un contenido. -Tambien tiene atajos para usuarios más experimentados. -En el feed se muestran videos de todo tipo pero tiene botones donde se puede encontrar contenido con un tema en común. -Suele presentar información clara cuando hay algún error o limitación, por ej. de localización. -Tiene algunos tutoriales pero no son tan útiles en búsqueda mas si en subida de contenido.
Notion
Mantener informado
Se ve en la variación que tienen los botones (componentes) cuando pasa el cursor sobre ellos o como al inicio de eso que pudieran ser las líneas cuando pasa el mouse se activan iconos y aparte si estas en diferentes teams te hace notificaciones de avances que te muestra en un boton izquierdo en la parte superior
Mostrar información
Al hacer enter aparece la opción “Press space…” para seguir escribiendo, además hacen una gran introducción o tutorial cuando empiezas a usarlo ya sea en destok o app y tiene su boton ? para preguntar en la esquina inferior izquierda
Ofrecer control
Cuando se borra algo como una carpeta aparece un mensaje para deshacer la opción.
Coherencia
No hay iconos confusos aunque siento que falta una opción para listas de números.
Prevenir errores
No tiene mensajes de ¿Estás seguro que deseas borrar cierto archivo? pero cuando se borra algo como una carpeta aparece un mensaje para deshacer la opción inmediatamente
Información visible
Si me quedo detenida con el mouse en algun botón se activa un mensaje con aquello de lo que se trata ese boton al igual que cuando selecciono un texto y aparecen opciones de que puedo hacer con ese texto.
Flexiblidad
No sé que tan diferente puede ser Notion cuando se es experto en él, manejo lo básico, pero sí sé que no es fácil borrar o rehacer sino sabes los comandos Ctrl + z y Ctrl + y
No tener información desordenada
Sí es muy ordenado Notion
Proporciona ayuda
Con su boton de ? para preguntas y además cambiar el idioma es sencillo en configuración
Enumerar pasos
Su sección de ayuda tiene artículos con los pasos a seguir enumerados
El producto digital seleccionado: El Tiempo.
Para realizar la evaluación heurística, utilizaré la lista de verificación de criterios de Nielsen-Molich:
Mantener informados
Mostrar información
Ofrecer control
Ser coherente
Prevenir errores
"Tener información visible e indicaciones"
Ser flexible
No tener información desordenada
Proporcionar ayuda
Enumerar pasos
En general, la aplicación cumple con la mayoría de los criterios de Nielsen-Molich.
En el caso de Netflix podría mencionar:
Mantienen informados a los usuarios resaltando cada acción que se está haciendo, ubican en qué categoría están (Películas > Acción y aventuras). Esto puede ayudar a los usuarios a ubicarse dentro de nuestra propia navegación.
Muestran información Tanto en las fichas de las películas y series como en la barra de navegación podemos ver que la iconografía es muy representativa, se puede ver claramente como los iconos con dedos pulgares hacia arriba o hacia abajo indican si ha gustado o no el contenido.
Ofrecen el control El menú de Netflix se encuentra en la parte superior de la pantalla, y esta nos ofrece opciones muy básicas: Series TV y Películas, además de los estrenos o nuestras listas.
Son coherentes contiene algunos íconos de los cuales los usuarios no están muy familiarizados con su función, la plataforma lo solventa mostrando al pasar por encima, lo que hace que se evite navegar por zonas indeseadas.
Previenen errores al intentar entrar con nuestra cuenta nos dice que la contraseña es incorrecta, y nos ofrece restablecerla para poder recuperarla. También nos provee de seguridad en cuanto a la verificación de acceso a la cuenta y de su origen.
Tienen indicaciones al utilizar siempre imágenes de las obras bajo el título de estas. Además, mejora muchísimo la experiencia al pasar el ratón por encima, ya que esta diapositiva aumenta de tamaño, muestra más información y además se muestran automáticamente escenas del contenido, pudiendo tener una idea mucho más clara y precisa del producto.
Son flexibles En el buscador de Netflix, al escribir una palabra nos muestra sin tener que apretar al enter un listado completo de las películas que tiene la plataforma del estudio de animación, lo que hace que la experiencia sea muy fluida y eficiente.
Mantienen la información ordenada, Netflix utiliza un diseño muy limpio y simple, la tipografía es coherente y se mantiene con diferentes jerarquías, por otro lado los iconos y elementos gráficos se mantienen planos.
Proporcionan ayuda al preguntarte si has olvidado tu contraseña y ofrecerte múltiples soluciones para recuperar tu cuenta. También ofrece un botón en el menú de reproducción en el que el usuario puede reportar aquellos problemas que pueda tener.
Enumeran los pasos en el apartado de soporte, netflix ofrece desde el menú principal acceso al centro de ayuda. En este espacio el usuario puede buscar soluciones a los problemas mediante una estructura bien categorizada y de problemas frecuentes.
Página de Drogas La rebaja:
Wattpad: Mantener informado
Mostrar información.
Ofrecer control
Ser coherente:
Prevenir errores:
Tener información visible e indicaciones
Ser flexible:
No tener información desordenada:
Proporcionar ayuda:
Enumerar pasos:
Nequi (App Banco digital): Mantener informado al usuario: En la pantalla incial, luego de ingresar usuario y contraseña, se muestra el dinero disponible en un primer plano.
Mostrar información: El menú de acciones es bastante claro al mostrar al usuario las diferentes opciones de transacciones.
Ofrecer control: El usuario tiene la autonomia de organizar sus finanzas y otorgar topes transaccionales; al igual que personalizar en monto y nombre los bolsillos que cree en su perfil.
Prevenir errores: Cuando se lleva a cabo una transacción, la app antes de realizar un desembolso, arroja un pantallazo donde aparecen los datos de la cuenta receptora antes de dar aceptar.