## Usabilidad: 8 Reglas de Oro de SHNEIDERMAN ## & ## 10 PRINCIPIOS HEURÍSTICOS DE NIELSEN Created by <i class="fab fa-telegram"></i> [edme88]("https://t.me/edme88") --- <!-- .slide: style="font-size: 0.60em" --> <style> .grid-container2 { display: grid; grid-template-columns: auto auto; font-size: 0.8em; text-align: left !important; } .grid-item { border: 3px solid rgba(121, 177, 217, 0.8); padding: 20px; text-align: left !important; } </style> ## Temario <div class="grid-container2"> <div class="grid-item"> ### Usabilidad * **8 reglas de oro de Schneiderman** 1. Consistencia 2. Permitir que lo usuarios frecuentes usen atajos 3. Retroalimentación informativa 4. Diseñar textos de diálogo para cerrar procesos 5. Manejo de errores 6. Permitir deshacer operaciones 7. Fomentar la sensación de control 8. Reducir la carga de memoria a corto plazo </div> <div class="grid-item"> * **10 Principios Heurísticos de Nielsen** 1. Visibilidad del estado del sistema 2. Consistencia entre el sistema y el mundo real 3. Control y libertad del usuario 4. Consistencia y estándares 5. Prevención de errores 6. Reconocer es mejor que recordar 7. Flexibilidad y eficiencia de uso 8. Diseño estético y minimalista 9. Ayudar a reconocer, diagnosticar y recuperarse de errores 10. Ayuda y documentación </div> --- ### 8 Reglas de oro de Scheneiderman 1. Consistencia 2. Permitir que lo usuarios frecuentes usen atajos 3. Retroalimentación informativa 4. Diseñar textos de diálogo para cerrar procesos 5. Manejo de errores 6. Permitir deshacer operaciones 7. Fomentar la sensación de control 8. Reducir la carga de memoria a corto plazo --- ### 1. Consistencia Es importante el uso de iconos, colores, botones, etc. que sean familiares aprovechando el conocimiento previo que tiene el usuario. Los usuarios se usa algo nuevo. Esto ayuda a que los usuarios puedan realizar lo que desean más rápidamente. --- ### 2. Permitir que lo usuarios frecuentes usen atajos Con el constante uso de un producto o servicio, se demandan formas más rápidas para realizar las tareas. Como ejemplo, secuencias del teclado para copiar, pegar, etc. mientras el usuario va adquiriendo experiencia, pueden navegar y utilizar la interfaz más rápido y sin esfuerzo. --- ### 3. Retroalimentación informativa Los usuarios deben saber en donde están y que es lo que está pasando todo el tiempo. Cada acción, debe tener una retroalimentación legible y razonable. Un mal ejemplo son los mensajes de alerta que muestran códigos de error incomprensibles para el usuario. --- ### 4. Diseñar textos de diálogo para cerrar procesos Los usuario deben saber cual ha sido el resultado de sus acciones o actos. Por ejemplo, los cuando se completa una transacción en línea es necesario que sea informado todo lo relativo a la operación apenas concluida. --- ### 5. Manejo de errores Ofrecer una forma sencilla de corregir errores. Los sistemas deben diseñarse para evitar que los usuarios comentan de errores, pero, cuando esto suceda, deben recibir una solución simple para resolverlo. Por ejemplo, si hay campos obligatorios en un formulario, pueden resaltarse para mejorar la identificacion. --- ### 6. Permitir deshacer operaciones Se deben ofrecer formas obvias y sencillas de retroceder o revertir acciones. Esto debe de permitirse en varios puntos, ya sea después de una acción, una captura de datos o una secuencias de acciones. “Esta función libera ansiedad, como el usuario se da cuenta que el error puede corregirse, le da el valor para explorar opciones, funciones o características desconocidas”. --- ### 7. Fomentar la sensación de control Permitir que el usuario sea el que inicia las cosas. Es importante que tenga la sensación de que están en completo control de los eventos que ocurren en el espacio digital. --- ### 8. Reducir la carga de memoria a corto plazo La atención humana es limitada. La interfaz debe ser lo más sencilla posible y con una jerarquía de información evidente. Eligir reconocimiento en vez de recuerdo. Reconocer es más fácil que recordar, el reconocimiento incluye claves que ayudan a recordar objetos almacenados en la memoria. --- ### 10 PRINCIPIOS HEURÍSTICOS DE NIELSEN 1. Visibilidad del estado del sistema 2. Consistencia entre el sistema y el mundo real 3. Control y libertad del usuario 4. Consistencia y estándares 5. Prevención de errores 6. Reconocer es mejor que recordar 7. Flexibilidad y eficiencia de uso 8. Diseño estético y minimalista 9. Ayudar a reconocer, diagnosticar y recuperarse de errores 10. Ayuda y documentación ---- **Principios heurísticos:** constituyen sugerencias para encontrar la idea de solución. Se conoce como **heurística** al conjunto de técnicas o métodos para resolver un problema. --- ### 1. Visibilidad del estado del sistema El sistema siempre debe mantener a los usuarios informados sobre lo que ocurre, a través de una retroalimentación apropiada en un tiempo razonable. ---- #### Ejemplo: * Los usuarios deben estar permanentemente informados sobre que está pasando cuando interactúa en un sitio web. * Proporcionar al usuario un feedback constante: 1. **Barras de proceso:** Indican cómo avanza la subida de un archivo. 2. **Mensajes:** Confirman que "el formulario se ha enviado correctamente". 3. **Animaciones:** Indican que algo está siendo procesado sin incidencias. 4. **Breadcrums:** Muestran dónde nos encontramos dentro de la web. ----  --- ### 2. Consistencia entre el sistema y el mundo real El sistema debe hablar en el lenguaje del usuario, con palabras, frases y conceptos familiares para él. Utilizar convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico. ---- ### Ejemplo: Relación entre el sistema y el mundo real: * El sistema tiene que "hablar" al usuario en su mismo lenguaje, lenguaje natural. * Se refiere no sólo al texto, también a los elementos como: * Imágenes * Orden en que se hacen las cosas * Forma en que se presenta la información --- ### 3. Control y libertad del usuario Es frecuente que los usuarios elijan funcionalidades por error y necesitan un modo fácil para resolver la situación. Es importante ofrecer soporte para deshacer y rehacer acciones. ---- ### Ejemplo: Control y libertad del usuario: * Los usuarios elegirán las funciones del sistema por error y necesitarán una "salida de emergencia o rutas alternativas" claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. * Apoyar las funciones de deshacer y rehacer. * Evitar "callejones sin salida". --- ### 4. Consistencia y estándares Los usuarios no deben tener que preguntarse si las diversas palabras, situaciones, o acciones significan las misma cosa. Que se sigan las normas y convenciones de la plataforma sobre la que está implementando el sistema. ---- <!-- .slide: style="font-size: 0.85em" --> ### Ejemplo: Consistencia y estándares: * Los usuarios no deberían cuestionarse las acciones, situaciones o palabras diferentes significan en realidad la misma cosa. * Ejemplos: * Un menú que funciona de manera diferente en distintas partes de la web. * Usar distintos diseños para la misma cosa en distintos apartados (forma, color). * Tienda online: El carrito se llama "Cesta" en otras páginas "Carro". * Los botones en el mismo lugar, en cada página un botón: Home, Inicio. --- ### 5. Prevención de errores Antes que diseñar buenos mensajes de error, es mejor evitar que el problema ocurra. ---- <!-- .slide: style="font-size: 0.85em" --> ### Ejemplo: Prevención de errores: * Realizar un diseño cuidadoso que prevenga la ocurrencia de problemas: * Incluyendo información contextual preventiva en el punto problemático. * Pidiendo confirmación al usuario. * Haciendo comprobaciones en tiempo real. * Ejemplos típicos de formulario: * Un campo que cambia de color para recordar que se ha dejado en blanco. * Una comprobación en tiempo real que muestra un mensaje: "la segunda contraseña no coincide con la primera", antes de dar al botón enviar. --- ### 6. Reconocer es mejor que recordar Minimizar la carga de memoria del usuario haciendo que los objetos, las acciones y las opciones estén visibles. El usuario no debería tener que recordar la información de una parte del diálogo a otra. ---- ### Ejemplo: Reconocer es mejor que recordar: * El usuario no debe verse obligado a usar su memoria para seguir el hilo de la interacción. * Ejemplo: ¿Cómo volver a la página anterior? ¿Cómo encontrar aquel producto que ya ha visto y le interesaba? --- ### 7. Flexibilidad y eficiencia de uso Los aceleradores, no vistos por el usuario principiante, mejoran la interacción para el usuario experto de tal manera que el sistema puede servir para usuarios inexpertos y experimentados. Es importante que el sistema permita personalizar acciones frecuentes. ---- ### Ejemplo: Buscador de Google * *Usuario poco experimentado:* Escribe lo que quieres buscar y listo. * *Usuario experimentado:* Puede usar operadores dentro del buscador. No es necesario conocer los operadores de Google para poder cumplir el objetivo de buscar. Pero si se emplean las búsquedas son más eficientes y el tiempo de encontrar información útil es menor. --- ### 8. Diseño estético y minimalista Los diálogos no deberían contener información irrelevante. Cada unidad extra de información en un diálogo compite con la información importante, disminuyendo su visibilidad relativa. ---- ### A tener en cuenta: * Si un contenido no es necesario no debería colocarse en la página. * El diseño del sistema no debe "recargarse". * El usuario busca sites limpios y que carguen rápido. * Se deben eliminar todo lo que se considere innecesario y que no aporta valor a lo que se quiere decir. * La mejor forma de recordar este principio de usabilidad es con el acrónimo *KISS, Keep It Simple Stupid.* --- ### 9. Ayudar a reconocer, diagnosticar y recuperarse de errores Los mensajes de error deben estar expresados en lenguaje simple (sin códigos), indicando con precisión el problema y sugiriendo una solución. ---- ### Ejemplo: El error 404 quizás no sea entendido por todos los usuarios. Es amigable emplear un mensaje como: Lo siento, página no encontrada y darle al usuario una posible salida añadiendo páginas relacionadas o un buscador interno para que pueda buscar y no se vaya de la web. --- ### 10. Ayuda y documentación Aunque es mejor que se pueda usar el sistema sin documentación, es necesario proveer al usuario de ayuda y documentación. Esta tiene que ser fácil de buscar y entender, centrada en la tareas del usuario, con información de las etapas a realizar y no muy extensa. ---- ### Ejemplos: Algunas páginas incluyen: * FAQs, Frequently Asked Questions, preguntas frecuentes * El icono de la interrogación cerca de algunas opciones --- ### Agregados por PIEROTTI 11. Habilidades 12. Interacción placentera respetuosa 13. Privacidad --- ### 11. Habilidades El sistema debe tener en cuenta, extender, suplementar e incentivar las habilidades del usuario, sus conocimientos y su experiencia. --- ### 12. Interacción placentera respetuosa Las interacciones de los usuario con el sistema deben favorecer su calidad de vida, presentando un diseño estético, en donde los valores artísticos se igualen a los funcionales. --- ### 13. Privacidad El sistema debe ayudar al usuario a proteger la información personal o privada, tanto la del propio usuario como la que pertenece a los clientes del usuario. --- ## ¿Dudas, Preguntas, Comentarios?  <!--VER https://www.saraclip.com/recursos-sobre-evaluacion-heuristica/ -->