No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

4D
17H
44M
47S

Principios de Usabilidad y Heur铆stica

6/29
Recursos

Los principios de usabilidad y heur铆stica son diez principios que fueron creados por Jakob Nielsen y que ayudan a crear interfaces intuitivas.

1. Visibilidad del estado del sistema

Cuando un usuario est谩 realizando un proceso dentro de una interfaz, hay que darle retroalimentaci贸n de lo que sucede en cada estado, a trav茅s de gr谩ficos, animaciones o mensajes.

2. Relaci贸n entre el sistema y el mundo real

Siempre que se haga referencia a alg煤n objeto del mundo real, proporcionar al usuario alguna referencia descriptiva que le indique m谩s detalles sobre lo que se requiere del mismo. Un ejemplo, ser铆a mostrar una tarjeta de cr茅dito e indicar la ubicaci贸n de los datos que deber铆a contener para su eventual uso.

3. Control y libertad del usuario

El usuario debe mantener en todo momento la capacidad de cancelar un proceso, salir de un flujo o deshacer alguna acci贸n, esto para que se sienta libre y sin la sensaci贸n de una experiencia negativa.

4. Consistencia

Adaptar los elementos de la interfaz a una l铆nea de estilo uniforme, ya que si se usan muchos, esto puede generar una interacci贸n inc贸moda que puede confundir al usuario.

5. Prevenci贸n de errores

Hay que darle al usuario instrucciones claras de c贸mo manejar el sistema o de la acci贸n que tienen que hacer. As铆 se pueden evitar errores y disgustos en los procesos.

6. Reconocer antes que recordar

Esto se refiere a la ventaja que representa para el usuario contar en todo momento con la informaci贸n que le interesa, por ejemplo, en un e-commerce. Aqu铆 un usuario encuentra muy 煤til poder contar con una lista de lo que est谩 por comprar y la suma total de su compra. As铆 puede tomar decisiones m谩s r谩pido sin tener que consultar saliendo de su flujo.

7. Flexibilidad y eficiencia de uso

Un ejemplo excelente es el buscador de Google. En este, una b煤squeda puede ser realizada por cualquier tipo de usuario, tanto principiante como avanzado, otorgando las herramientas y las opciones a cada uno de estos tipos para resolver mejor su prop贸sito.

8. Dise帽o est茅tico y minimalista

Es importante no saturar la interfaz con demasiado contenido a la vez. Es mejor mostrarle al usuario solo la informaci贸n que va a necesitar en ese momento, de una manera amigable y atractiva par no perder la continuidad de su interacci贸n.

9. Ayudar a los usuarios a corregir y resolver errores

En caso de errores, la manera de decirle al usuario c贸mo debe solucionarlo o si no es posible hacerlo, es fundamental. La interfaz debe mostrar siempre un tono amigable y comprensivo, en el que se planteen pasos concretos como soluci贸n si es que la hay, y mensajes complementarios que le ayuden a seguir con un flujo tomando otro camino que le pueda ser 煤til dentro de la plataforma.

10. Ayuda y documentaci贸n

Poner a disposici贸n del usuario una secci贸n donde pueda hallar respuesta a sus preguntas, como la secci贸n de preguntas frecuentes (FAQ). As铆 como una documentaci贸n m谩s detallada sobre los procedimientos que lo requieran.

Contribuci贸n creada con aportes de: Luis Enrique Herrera.

Aportes 208

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Principios de usabilidad y Heur铆stica:

1- Visibilidad del estado del sistema: el usuario deber铆a saber que est谩 pasando en cada interacci贸n con el producto (cargando, guardando, errores). Debe recibir un feedback del estado del producto.
2- Relaci贸n producto y mundo real: El usuario no deber铆a tener dudas al momento de interactuar con el sistema, se le debe brindar toda la informaci贸n para que pueda operar el sistema.
3- Control y libertad del usuario: El usuario debe poder cancelar o salir de un proceso, sin finalizarlo y sin compromisos.
4- Consistencia: En el dise帽o de los bloques visuales del flujo del sistema, tratar de llevar un patr贸n en todos los elementos del sistema.
5- Prevenci贸n de errores: Proveer instrucciones claras de lo que se espera que el usuario realice dentro de nuestro producto.
6- Reconocer antes de recordar: Entregar informaci贸n valiosa al usuario y ademas proveer una forma en que el usuario pueda revisarla cuando la necesite sin acudir a su memoria.
7- Flexibilidad y eficiencia de uso: Entregar una interfaz capaz de satisfacer a usuarios avanzados y no avanzados. Permitir el uso del producto sin necesidad de conocimientos especializados.
8- Dise帽o est茅tico y minimalista: no saturar de contenido al usuario, mostrar 煤nicamente el contenido relevante para cada vista o cada acci贸n que el usuario ha decidido acceder. No poner elementos que distraigan al usuario del objetivo de la vista.
9- ayudar al usuario a reconocer y corregir errores: Dar informaci贸n al usuario de lo que esta generando errores o inconsistencias en el sistema.
10- Ayuda y documentaci贸n: Detectar las dudas mas comunes de los usuarios a la hora de usar nuestro producto y proveer informaci贸n que pueda resolverlas de manera inmediata.

  1. Visibilidad del estado del sistema, pantalla de carga

  2. Relaci贸n entre el sistema y el mundo real

  3. Control y libertad del usuario

  4. Consistencia

  5. Prevenci贸n de errores

  6. Reconocer antes que recordar

  7. Flexibilidad y eficiencia de uso

  8. t茅tico y minimalista

  9. Ayudar a los usuarios a corregir y reconocer errores

  10. Ayuda y documentaci贸n

PLATZI
De acuerdo a los principios de usabilidad y he煤ristica, analic茅 lagunas cosas que tiene Platzi. Me encantar铆a saber si est谩n de acuerdo con mi an谩lisis, o no lo est谩n. D茅jenme saber si encuentran m谩s principios aplicados en nuestra escuela favorita C:

  1. Puedo reconocer que en el estado de la clase estoy a punto de agregar un aporte, usando un highlight bottom azul en la pesta帽a de aportes, adem谩s, al dar clic en 鈥渆scribe aqu铆 tu pregunta鈥 sabemos de primeras que nos toca escribir por el text box con header azul que aparece enseguida.
  2. Los men煤s son abstracciones del mundo real que son super comunes en el mundo digital. En cada clase tenemos a la izquierda un men煤 desplegable.
  3. Un aporte puede ser agregado, editado y eliminado, dando control para el usuario en sus aportes.
  4. Todas las pantallas de los cursos usan colores y contrastes muy consistentes, dando realce en los botones y apartados azules que indican acciones importantes dentro del control del usuario.
  5. Al ingresar una b煤squeda en Platzi, puede que cuando no logra encontrar un resultado destacado nos lo hace saber antes de hacer realmente la b煤squeda.
  6. En todo momento Platzi nos indica en qu茅 apartado de su sitio nos encontramos, por ejemplo, si estamos en una clase, en el men煤 de cursos, en un blog, aporte, etc.
  7. Al crear un aporte podemos simplemente hacer un texto plano, o si deseamos indagar m谩s en el estilo hay opciones para estilizar de mejor manera el aporte. De igual manera en la edici贸n de nuestro perfil tenemos este principio aplicado.
  8. Personalmente creo que Platzi usa dise帽os muy minimalistas, con colores claros que hacen un buen realce en un entorno de pocos elementos, siempre tratan de mostrar menos, qued谩ndose con s贸lo lo importante en un momento dado.
  9. Cuando hacemos una b煤squeda demasiado especifica es probable que nos arroje a un sitio que nos indica que hay 0 resultados, y nos sugiere que hagamos una b煤squeda diferente.
  10. En el footer de la p谩gina principal, encontramos varios apartados interesantes de documentaci贸n, como preguntas frecuentes, contacto, etc. Adem谩s el 煤ltimo feature del chat 鈥淢essage Us鈥 nos ayuda a tener una documentaci贸n much铆simo m谩s personalizada.

Me encanto esta grafica para ver los principios de usabilidad.
![](

**Principios de usabilidad y heur铆stica: Jacob Nielsen. **
1.Visibilidad del estado del sistema: Indicar c贸mo va el proceso.
2.Relaci贸n entre el sistema y el mundo real
3. Control y libertad del usuario: El usuario debe tener el control y decidir cuando quiere salir.
4.Consistencia: mismo tama帽o y color
5.Prevenci贸n de errores: Hay que dar instrucciones claras, esto nos ayuda a evitar la frustraci贸n.
6.Reconocer: Darle la informaci贸n al usuario.
7.sencillez: Que usuarios novatos puedan acceder
8.Dise帽o est茅tico y minimalista: no saturar al usuario
9.Permitir corregir los usuarios.
10.Ayudas y documentaci贸n: resoluci贸n de problemas.

10 Principios de Usabilidad y Heur铆stica (Jacob Nielsen)

1- Visibilidad del estado del sistema: Dar retro de lo que est谩 pasando al hacer un proceso de un producto.
2- Relaci贸n sistema - mundo real: Utilizar elementos del mundo real para explicar procesos.
3- Control y libertad del usuario: Siempre poder cancelar proceso, salirse de flujo o deshacer acci贸n.
4-** Consistencia:** Cuidar la consistencia de dentro de los estilos de los elementos de la interfaz.
5- Prevenci贸n de errores: Dar instrucciones claras de como manejar el sistema o acciones.
6- Reconocer antes que recordar: siempre hacer recordar el recorrido y elementos de navegaci贸n.
7- Flexibilidad y eficiencia: Abarcar tipo de usuario al dise帽ar un producto.
8- Dise帽o est茅tico y minimalista: No saturar de informaci贸n y mostrar lo que se usar谩 en ese momento.
9- Ayudar a corregir y reconocer errores: Explicar el error y dar soluciones para ello.
10- Ayuda y documentaci贸n: Ayudar a los usuarios a encontrar soluciones de manera f谩cil y r谩pida.

NOTAS:
10 Principios de Jakob Nielsen
Nos ayudan a crear interfases intuitivas.
1.- Visibilidad del estado del sistema
Indicar al usuario los procesos que se est谩n llevando acabo o el inicio/termino del mismo.

2.- Relaci贸n entre el sistema y el mundo real
Guiar (mediante imagen) al usuario para colocar la informaci贸n correcta y de donde puede obtenerla.

3.- Control y libertad del usuario
El usuario es libre de elegir continuar o no una accion de programa.

4.- Consistencia
El dise帽o (tama帽o, color, letra) debe ser similar cuando se trata de un mismo item

5.- Prevenci贸n de errores
Dar indicaciones claras al usuarios de como manejar el sistema.

6.- Reconocer antes que recordar
Resumir los datos que el usuario debe acatar antes de aceptar la funci贸n o actividad, asegur谩ndonos que el usuario lo sabe.

7.- Flexibilidad y eficiencia de uso
Dise帽ar el producto para que pueda ser usado por cualquier usuario: principiante o experto

8.- Dise帽o est茅tico o minimalista
Dise帽o simple sin estar saturado. Solo contenido indispensable.

9.- Ayudar al usuario a corregir y reconocer errores
Dar indicaciones o posibles soluciones a trabas que el usuario encuentre.

10.- Ayuda y documentaci贸n
Brindar al usuario ayuda con las dudas mas frecuentes que se generan

1.- Visibilidad del estado del sistema

2.- Relaci贸n entre el sistema y el mundo real

3.- Control y libertad del usuario

4.- Consistencia

5.- Prevenci贸n de errores

6.- Reconocer antes que recordar

7.- Flexibilidad y eficiencia de uso

8.- Dise帽o est茅tico y minimalista

9.- Ayudar a los usuarios a reconocer y corregir errores

10.- Ayuda y documentaci贸n

Les comparto un art铆culo que escrib铆 en LinkedIn, acerca de las 10 Heur铆sticas de usabilidad de Jakob Nielsen en un formato visual (Posters)

https://www.linkedin.com/pulse/10-heur铆sticas-de-usabilidad-jakob-nielsen-posters-francisco-mujica-/

++Los 10 principios heur铆sticos de Jacob 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 鈥渟alida 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.

**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 adapte 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.

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.

Fuente: [](https://medium.com/pildorasux/10-heuristicos-nielsen-abc9c6ad04c0

PRINCIPIOS DE USABILIDAD Y HEURISTICA

1- Visibilidad del estado del sistema
ej. Barras de progreso, pantallas de error.
2- Relaci贸n entre el sistema y el mundo real
3- control y libertad del usuario
4- Consistencia
ej. Si usamos una tipograf铆a y un espaciado especifico hay que seguir us谩ndolo en todo el sistema
5-Prevenci贸n de errores
Dar instrucciones claras al usuario de como manejar el sistema (aunque sin ser densos)
6-Reconocer antes que recordar
Siempre darle la informaci贸n al usuario y que no dependa de su memoria
7-flexibilidad y eficiencia de uso
El sistema tiene que ser intuitivo de usar para los nuevos usuarios pero a la vez tener 鈥渁tajos鈥 y formas de aplicarse mas eficientemente para los users mas avanzados.
8-Dise帽o est茅tico y minimal
No saturar de info al user y darle a este lo que realmente necesite.
9-Ayudar a los user a corregir y reconocer errores
10-Ayuda y documentaci贸n

Segu铆 utilizando la pagina de Netflix para estos ejercicios y encontr茅 todas las leyes de usabilidad y heur铆sticas aplicadas a la pagina, realizar estos ejercicios es muy interesante, ya que nos da la capacidad de identificar donde se aplican cada una de estas leyes

1.- Visibilidad del estado del sistema

2.- Relaci贸n entre el sistema y el mundo real

3.- Control y libertad del usuario

4.- Consistencia

5.- Prevenci贸n de errores

6.- Reconocer antes que recordar

7.- Flexibilidad y eficiencia de uso

8.- Dise帽o est茅tico o minimalista

9.- Ayudar al usuario a corregir y reconocer errores

10.- Ayuda y documentaci贸n

Les comparto esa captura, les va a servir mucho para recordar f谩cilmente los 10 principios.

Les mostrar茅 Ada, una app de salud que me gusta mucho.

  1. Barra de Progreso.
  2. Preguntas como en el doctor.
  3. Al dar click all铆, te permite devolverte con facilidad.
  4. Los botones y elecciones en s铆 tienen el mismo formato y dise帽o.
    5-6. Te muestran lo que acabas de colocar.
  5. Preguntas sencillas y claras.
  6. TODO.
  7. Se puede ver en el buscador de s铆ntomas.
  8. Puedes acceder a un men煤 en cualquier momento o dar feedback.

Me parece que Instagram cumple con todos los principios

Van 6 videos del curso, y. definitivamente. arrojan mucho valiosa info. Me gustaria tener. en las descripciones de los videos, sintetizado de manera textual todo lo que dice. La parte de la transcripcion ayuda, pero algun recurso extra. para. todo lo que. la maestra dice ser铆a genial.

Acabo de hacer una lista explicando cada uno de los
10 PRINCIPIOS DE USABILIDAD POR JACOB NELSON

Enlace aqu铆

*Te recomiendo rehacerlo, as铆 podr谩s asimilarlo con tus propias palabras y entenderlo correctamente.

Dios mio! creo que primero me pasare por el curso de usabilidad 馃槢

Gmail y Outlook me parece que no hacen un trabajo tan bueno como WeTransfer a la hora de enviar un archivo y retroalimentar lo que est谩 ocurriendo.

Heur铆stica procede del t茅rmino griego 蔚峤懴佄兾何滴刮, que significa encontrar, hallar, descubrir, comprender
Heur铆stica: es la estrategia sist茅mica, para que, inmediata o gradualmente se generen alternativas que son innovaciones positivas. La facultad heur铆stica es un rasgo caracter铆stico de los visionarios, se define como el arte y la ciencia del descubrimiento, de la creaci贸n, as铆 como resolver problemas a trav茅s del pensamiento lateral, la intuici贸n, la inspiraci贸n, el pensamiento divergente, los cuales conforman y estructuran el complejo proceso conocido como creatividad, que refiere al pensar y hacer diferente. Los principios de Usabilidad y Heur铆stica son una de las bases del Dise帽o UI / UX, como vimos en esta clase.

Principios de usabilidad y heuristica:

1- Visibilidad del estado del sistema:
el usuario deber铆a saber que est谩 pasando en cada interacci贸n
Debe recibir un feedback del estado del producto. (barras o signos de carga\avance, etc)

2- Relaci贸n producto y mundo real:
El usuario no deber铆a tener dudas al momento de interactuar con el sistema,
se le debe brindar informaci贸n descriptiva como instrucciones, imagenes y/o dise帽os

3- Control y libertad del usuario:
El usuario debe poder cancelar o salir de un proceso, sin finalizarlo y sin compromisos.

4- Consistencia:
tratar de llevar un patr贸n de dise帽o en los bloques visuales de un proceso
para optimizar del flujo del sistema o proceso

5- Prevenci贸n de errores:
Proveer instrucciones claras de lo que se espera que el usuario
realice dentro de nuestro producto.

6- Reconocer antes de recordar:
Entregar informaci贸n que el usuario pueda revisarla cuando la necesite sin acudir a su memoria.
Ejemplo, carro de compras.

7- Flexibilidad y eficiencia de uso:
Entregar una interfaz capaz de satisfacer a usuarios avanzados y no avanzados.
Permitir el uso del producto sin necesidad de conocimientos especializados.

8- Dise帽o est茅tico y minimalista:
Mostrar 煤nicamente el contenido relevante para cada acci贸n
No poner elementos que distraigan al usuario del objetivo de la vista.

9- ayudar al usuario a reconocer y corregir errores:
Dar informaci贸n al usuario de lo que esta generando errores o inconsistencias en el sistema.

10- Ayuda y documentaci贸n:
Detectar las dudas mas comunes de los usuarios a la hora de usar nuestro producto
y proveer informaci贸n que pueda resolverlas de manera inmediata.

Principios de usabilidad y Heur铆stica
鈥 Visibilidad del estado del sistema, es la retroalimentaci贸n del sistema. Mostrar al usuario como se da el proceso de su acci贸n.
鈥 Relaci贸n del sistema y el mundo real, una simulaci贸n real de la acci贸n del usuario.
鈥 Control y libertad del usuario, donde el usuario puede o no realizar una acci贸n.
鈥 Consistencia, mantener una misma diagramaci贸n de color, icono, gr谩ficos etc.
鈥 Prevenci贸n de errores, instrucciones claras de lo que tiene que hacer el usuario.
鈥 Reconocer antes que recordar, que tenga la informaci贸n en su momento y no depender de usar su memoria.
鈥 Flexibilidad y eficiencia de uso, emplear una interfaz sencilla, adem谩s de abarcar todo tipo de usuario.
鈥 Dise帽o est茅tico y minimalista, mostrar solo lo esencial.
鈥 Ayudar a los usuario a corregir y reconocer errores, mostrarle recomendaciones para evitar errores.
鈥 Ayuda y recomendaci贸n, para que los usuarios sepan como reconocer sus problemas que puedan encontrar.

Se llaman 鈥渉eur铆sticos鈥 porque son reglas generales y no directrices de usabilidad espec铆ficas.
Con estas reglas generales podemos no solo dise帽ar sino tambi茅n analizar lo dise帽ado.
Recomendado: Shneiderman鈥檚 鈥淓ight Golden Rules of Interface Design鈥

Los 10 principios de usabilidad y heur矛stica son siempre a tener en consideraci貌n para el correcto desarrollo de cualquier proyecto

Pareceria que son un poco obvios, pero al momento de meterse en la ingenieria del producto a veces se pasa por alto algunos de estos principios, excelente contenido.

Para garantizar una buena UX y una buena usabilidad dentro de nuestro desarrollo, solemos seguir varios principios que nos ayudaran a mejorar la experiencia de cada persona con nuestro desarrollo, siendo los mas importantes a mi parecer, la correccionalmente de las acciones que ha realizado un usuario, para permitirle conocer en todo momento en que estado se encuentra y que acciones podr谩 tomar despu茅s de la realizada al principio.

Para un dise帽o eficiente de interfaz de usuario es necesario tener en cuenta los 10 principios de usabilidad y heur铆stica

El checkout de Mercado Libre es un ejemplo muy claro de la aplicaci贸n de estos principios

1- Visibilidad del estado del sistema
Estado de Log-in

2- Relacion de sistema
Aliexpres
Comentarios y fotografias de los compradores.

3- Control y libertad del usuario
Aliexpres
Poder cancelar pedido en cualquier momento de la compra

4- Consistencia

Behance, mantiene sus colores en las diferentes pantallas del sistema, aun en la app, su estructura es uniforme.

5- Prevencion de errores

Aliexpres, muestra diferentes facilidades de log, que puede obtener el usuario.

6- Reconocer antes que recordar

Junto con los datos de pago y direcci贸n de env铆o el ultimo paso para hacer una compra siempre es confirmada por el usuario.

7- Flexibilidad y eficiencia

En el Upload de Youtube hay 2 facilidades

  • Subir videos normalmente sin configuraci贸n
  • Con una configuraci贸n avanzada.

8- Dise帽o estetico y minimalista

9- Ayuda a corregir y reconocer errores

**10- Ayuda y documentaci贸n
**
Aliexpres permite abrir disputa por alguna inconformidad con alguno de sus vendedores.

Es un conjunto de peque帽os comportamientos que como usuarios aveces nisiquiera notamos a conciencia pero nos vuelve mucho mas comoda nuestra experiencia, el simple hecho de retroalimentar que el usuario esta haciendo lo correcto ya lo hace sentir comodo. Buen contenido!

![](

Consistencia: formas, colores y tipograf铆a
Est茅tico y minimalista: no saturar de informaci贸n


1.Relaci贸n producto y mundo real
2.Control y libertad del usuario.
3.Prevenci贸n de errores.

Dise帽o est茅tico y minimalista

Ayuda y documentaci贸n
Ayuda y documentaci贸n

Aqu铆 podr谩s encontrar los principios de usabilidad web de Jakob Nielsen con sus respectivos ejemplos.

Ejemplos de los principios de Usabilidad y Heur铆stica

  • Visibilidad del estado del sistema: La barra de progreso de lectura en el blog.

  • Relaci贸n entre sistema y mundo real: Uso de 铆conos similares a los iPhones.

  • Control y libertad del usuario: Posibilidad en Notion de borrar el texto redactado.

  • Consistencia: Dise帽o de botones, estilo gr谩fico de los 铆conos y tipograf铆a de Twitter.

  • Prevenci贸n de errores: Aviso en Gmail al no escribir el destinatario correctamente.

  • Reconocer antes que recordar: Checkout de Mercado Libre

  • Flexibilidad y eficiencia de uso: El buscador de Youtube permite agregar filtros.

  • Dise帽o est茅tico y minimalista: Dise帽o de landing page de Linear, con un texto breve y un CTA.

  • Ayudar a los usuarios a corregir y reconocer errores:

  • Ayuda y documentaci贸n: Secci贸n de preguntas frecuentes.

  1. Visibilidad del estado del sistema
  2. Relaci贸n entre el sistema y el mundo real
  3. Control y libertad del usuario
  4. Consistencia
  5. Prevenci贸n de errores
  6. Reconocer antes que recordar
  7. Flexibilidad y eficiencia de uso
  8. Dise帽o est茅tico y minimalista
  9. Ayudar a los usuarios a corregir y resolver errores
  10. Ayuda y documentaci贸n
  1. visibilidad estado del sistema.
  2. Relacion sistema y mundo
  3. Control y libertad usuario.
  4. Consistencia.
  5. Prevencion de errores.
  6. Reconocer antes de recordar.
  7. Flexibilidad y eficiencia
  8. Dise帽o est茅tico y minimalista
  9. Ayudar y corregir errores a los usuarios
  10. Ayuda y documentacion

No es mi sitio favorito, pero suelo entrar mucho para llevar el registro de mis lecturas y descubrir libros. Ac谩 vi estos ejemplos:

  • Consistencia

  • Visibilidad del Estado del Sistema

  • Ayuda y Documentaci贸n

  • Relaci贸n entre el sistema y el mundo real (se me ocurre porque cada portada del libro se asemeja a c贸mo se ver铆a el libro en la realidad, pero no estoy segura)

En en mi caso hice el an谩lisis con el sitio de paqueteria DHL, la primera imagen que comparto es la que se muestra actualmente como pagina principal en el sitio web, se puede observar que se cumplen las siguientes principios de Nielsen:

  1. Relaci贸n entre el sistema y el mundo real, al ingresar al sitio y ver la pantalla de la pagina principal podemos observar que como actividad principal esta la opci贸n de rastrero de un envi贸 con ingresar el numero de gu铆a, no es necesario crear un usuario ni logearse con una cuenta para poder hacer esta actividad, tambi茅n se muestran las otras actividades que pueden hacerse en el sitio, resaltando la opci贸n DHL para EMPRESAS, que por la naturaleza del servicio es posible que el perfil principal de cliente sean las empresas que realizan muchos env铆os como tipo amazon.
  2. Consistencia, 7. Flexibilidad y eficiencia de uso, 8. Dise帽o est茅tico y Minimalista y por ultimo el punto 10, Ayuda y documentacion.
    Como lo mencione antes, los elementos tanto de las actividades que se pueden hacer dentro del sitio como los servicios con los que cuenta DHL quedan claramente identificados, los menu de la parte superior est谩n ordenados, tambi茅n queda establecido que el sitio cuenta con mas informaci贸n en la parte de abajo cuando desde la pagina principal se ve el texto ACTUALIZACIONES IMPORTANTES DEL SERVICIO, por lo que el usuario identifica que hay mas elementos y que para acceder a ellos debe dar scroll al sitio.

En cuanto al punto 1 Visibilidad del estado del sistema, cuando el usuario ingresa el numero de rastreo y le da clic al bot贸n RASTREAR el sistema muestra una animaci贸n de un circulo que indica que se esta realizado la b煤squeda y al termina muestra la informaci贸n perteneciente, identificada claramente dentro de una tabla dividida seg煤n los procesos o status que haya tenido el paquete desde que el usuario inicial comenz贸 con el proceso.
Para el punto 9 Ayudar a los usuarios a corregir y resolver errores, cuando el usuario ingresa el numero de rastreo incorrecto, el sitio indica que el c贸digo es incorrecto y le invita a hacerlo de nuevo, agregado a eso, le muestra una secci贸n de preguntas frecuentes en la cual vienen algunas posibles dudas que pueda tener en el usuario en el momento de la consulta. Esto tambi茅n aplica para el punto 10. Ayuda y Documentaci贸n

Aqu铆 mi analisis.

Adjunto mi trabajo sobre lo aprendido en clase.

visibilidad del estado del sistema

relaci贸n producto mundo real

consistencia en el dise帽o de los bloques

prevenci贸n de errores
!IMG_0296.png](https://static.platzi.com/media/user_upload/IMG_0296-f87b4da9-3f81-42db-a7f9-049df44b3b24.jpg)

reconocer antes de recordar

dise帽o est茅tico y minimalista

posee todos los principios de usabilidad heur铆stica

Basado en los conceptos de la clase, este es mi ejercicio:

Hola! revisnado las paginas me di cuenta que hay varias leyes o principios que se repiten. Adjunto mis ejemplos.

Principios de usabilidad

Visivilidad del sistema

Relaci贸n sistema/mundo real

Control del usuario

Consistencia

Prevenci贸n de errores

Reconocer antes que recordar

Flexibilidad y eficiencia de uso

Est茅tico y minimalista

Ayudar a corregir errores

Ayuda y documentaci贸n

Flexibilidad y uso: Cualquier usuario puede usar la interfaz de ML en Venezuela. Es sencilla y no es compleja.

  1. Visibilidad y estado del sistema.
  2. Relacion entre el sistema y el mundo real.
  3. Control y libertad del usuario.
  4. Consistencia.
  5. Prevencion de errores.
  6. Reconocer antes de recordar.
  7. Flexibilidad y eficiencia de uso.
  8. Dise帽o estetico y minimalista.
  9. Ayudar a los usuarios a corregir y resolver errores.
  10. Ayuda y documentacion.

Yo eleg铆 analizar la p谩gina de Mercadolibre.

Los reecursos visuales ayudan bastante a entender cada principio.

  1. Visibilidad del estado del sistema:

  2. Relaci贸n entre el sistema y el mundo real:

  3. Control y libertad del usuario:

  4. Consistencia:

  5. Prevenci贸n de errores:

  6. Reconocer antes que recordar:

  7. Flexibilidad y eficiencia de uso:

  8. Dise帽o est茅tico y minimalista:

  9. Ayudar a los usuarios a corregir y resolver errores:

  10. Ayuda y documentaci贸n:

Aqu铆 un ejemplo de los 10 principios de Usabilidad y Heur铆stica, usando la app de Rappi.

ejemplos de apps que estan bien armados paypal por ejemplo

Consistencia

Control y libertad de usuario

Flexibilidad y eficiencia de uso


Relaci贸n entre el sistema y el mundo real

Wetransfer tambi茅n es un buen ejemplo para una interfaz del punto 8, dise帽o est茅tico y minimalista.

Visibilidad del sistema: Estado de la canci贸n, cu谩nto lleva cu谩nto le falta
Control y libertad del usuario: salir o logearte
Consistencia: todos los rect谩ngulos son iguales para podcast,recomendaciones, escucha reciente, descubre.
Prevenci贸n de errores
Reconocer antes de recordar: da informaci贸n relevante de que he escuchado recientemente y as铆 no dependo de mi memoria para volver a escucharlo.
Flexibilidad y satisfacci贸n: crear una playlist con minuciosidad o ir a la radio entre m谩s cosas.
Dise帽o est茅tico y minimalista: 2 columnas, la principal solo 6 opciones, la columna de la derecha sobria nada titila ni llama la atenci贸n.
ayuda al usuario a reconocer y corregir: segundo texto aclarando dudas.
Ayuda y documentaci贸n

Principio de consistencia:

Principio de consistencia:

  1. Visibilidad del estado del sistema.

2.Relaci贸n producto y mundo real.

  1. Control y libertad.

  2. Conistencia. (botones, marcador de favoritos y visualizaci贸n)

  3. Prevenci贸n de errores.

  4. Reconocer antes que recordar.

  1. Flexibilidad y eficiencia de uso. (filtros para hacer m谩s especif铆ca la busqueda)
  1. Dise帽o est茅tico y minimalista.

  2. Ayudar al usuario a corregir y reconocer errores

  3. Ayuda y Documentaci贸n

Hice el ejercicio en mi p谩g. personal hecha con No Code
Encontr茅 consistencia, por los colores, tama帽o y tipo de letra

Prevenci贸n de errores, porque indica que hacer.

6- Reconocer antes de recordar: al momento de realizar una compra el sistema te muestra y detalla los productos agregaste al carrito de compras

隆Hola compa帽eros!
Este es un buen ejemplo de manejo tipogr谩fico, contraste, de la ley de Miller (conjuntos) y de la ley de Jakob (est谩ndares).

Y este mini-formulario me parece muy 煤til y f谩cil de diligenciar (ley de Fitt y ley de Hick)

Saludos.

  • Visibilidad, Reconocer, Dise帽o minimalista, Consistencia, Sencillez.
  • Corregir a los usuarios, prevenci贸n de errores, ayuda y documentaci贸n


Ayuda y documentacion


Ayudar a los usuarios a corregir y reconocer errores


Consistencia


Control y libertad de un usuario


Dise帽o estetico y minimalista


Flexibilidad y eficiencia de uso


Prevencion de errores


Reconocer antes que recordar


Relacion entre el sistema y el mundo real


Visibilidad del estado del sistema

Estan enumerados segun el orden de los principios


la pantalla de web, se visualiza de forma directa lo que el usuario va realizar dentro de la pagina web.

Un ejemplo de casi todas las caracteristicas de principios de usabilidad es platzi

Principios de Usabilidad y Heur铆stica

Estos principios nos ayudan a crear interfaces intuitivas

  1. Visibilidad del estado del sistema: Se debe dar informaci贸n al usuario del proceso que se esta realizando.
  2. Relaci贸n producto y mundo real: Si se interact煤a con algo del mundo real en la aplicaci贸n se le debe mostrar al usuario en donde encontrarlo.
  3. Control y libertad del usuario: El usuario siempre debe tener la capacidad de cancelar un proceso.
  4. Consistencia: Mantener los colores, tama帽os, etc en todas las interfaces.
  5. Prevenci贸n de errores: Se deben dar instrucciones claras de que se debe usar.
  6. Reconocer antes que recordar: Mostrar la informaci贸n a la cual el usuario esta accediendo, no hacer que la recuerde.
  7. Flexibilidad y eficiencia de uso: Cualquier tipo de usuario debe poder utilizar el sistema.
  8. Dise帽o est茅tico y minimalista: No saturar de informaci贸n al usuario, solo mostrar informaci贸n que se va a utilizar.
  9. Ayudar a los usuarios a buscar y corregir errores: Dar soluci贸n a los usuarios respecto a errores.
  10. Ayuda y documentaci贸n: Tener un apartado de ayuda sobre los errores m谩s com煤nes.
  1. Visibilidad del estado del sistema
  1. Relaci贸n producto y mundo real
  1. Control y libertad del usuario
  1. Consistencia
  1. Prevenci贸n de errores
  1. Reconocer antes de recordar
  1. Flexibilidad y eficiencia de uso
  1. Dise帽o est茅tico y minimalista
  1. ayudar al usuario a reconocer y corregir errores
  1. Ayuda y documentaci贸n
  1. Visibilidad del estado del estado del sistema.
    Te muestra si el usuario se logro ingresar o tuvo alg煤n error.

  2. Control y libertad del usuario
    Tienes la opci贸n de volver a la pasarela de pago.

  3. Consistencia
    Se logra interpretar que manejan la misma gama colores oscuros.

  4. Prevenci贸n de errores.
    El loguin de Amazon en el campo de contrase帽a te advierte que m铆nimo debes haber 6 caracteres.

  5. Reconocer antes de recordar
    Lineo te hace un resumen detallado del producto y su valor al finalizar la compra.

  6. Dise帽o est茅tico.

RETO 02: identificar qu茅 principios de usabilidad | heur铆stica se aplican en:
https://intelligence.weforum.org/

  1. Cuando se pasa mouse por encima de un bot贸n (una posible acci贸n), se hace un acercamiento en la imagen que est谩n en el fondo y se modifica el tama帽o y la cantidad de texto asociada al mismo.

  2. Cuando se hace una selecci贸n en un tema de un mapa, se resaltan las opciones asociadas a cada uno (el nodo y los enlaces entre los diferentes nodos).

  3. Cuando se hace click en una opci贸n que modifica el mapa, aparece un texto que le informa al usuario que est谩 en proceso (鈥漧oading鈥︹). Una vez se termina el proceso, se modifica la imagen que est谩 en el centro del mapa y var铆an los enlaces entre los nodos relacionados con el tema.

  4. En la esquina superior derecha aparecen opciones para apoyar al usuario en el manejo del mapa (tutoriales, configuraci贸n de opciones, novedades, detalles de cuenta personal, opci贸n de b煤squeda, etc).

  5. Cantidad de texto asociada a cada nodo es de m谩ximo 4-5 palabras, de tal manera q puedan verse muchas opciones al mismo tiempo.

  6. Dependiendo del nivel de jerarqu铆a, aumenta o disminuye el tama帽o del texto, cuidando q siempre sea legible (alto contraste ayuda a q esto se logre, as铆 como fuente elegida).

Dise帽o est茅tico y minimalista: te permite ver diversidades de manera sencilla con palabras claves

1.Visibilidad del Estado del sistema

3.Control y Libertad de usuario

4.Consistencia / 7. Flexibilidad

5.Prevencion de Errores / 8.Dise帽o Estetico y minimalista

9.Ayuda a Corregir errores

10.Ayuda y Documentaci贸n

1-Visibilidad del estado del sistema: Indicar c贸mo va el proceso.

2-Relaci贸n entre el sistema y el mundo real

3-Control y libertad del usuario:

4-Consistencia: mismo tama帽o y color

5-Reconocer

6-Sencillez

7-Dise帽o est茅tico

8-Ayudas y documentaci贸n: resoluci贸n de problemas

Muy interesantes estos principios. Deber铆an convertirse en un Checklist para cuando dise帽amos cualquier tipo de interfaz.