03. Heurísticas de Nielsen
Detectar puntos de dolor que ayuden a mejorar la usabilidad y la experiencia de usuario, eficiencia y conversión final de la web Immune Techology Institute
Las 10 heurísticas de Jakob Nielsen
A continuación vamos a realizar un análisis sobre la web de "immune.institue". El análisis consiste en viajar por los 10 conceptos básicos que una web debe contener o respetar para llegar a la usabilidad según Nielsen.
1. Mostrar el Estado del Sistema
El sistema siempre debe mantener a los usuarios informados sobre lo que está pasando, a través de un feedback apropiado en un tiempo razonable.
Feedback constante. Generamos credibilidad.
1.1 | Falta de interacción en algunos botones. Encontramos botones o links que no tienen ninguna interacción cuando hacemos hover sobre ellos. No modifican su estado y, en algún caso el botón además, tiene el mismo estilo que elementos no clickables en el mismo contenedor (ver imagen 1.3 footer).
Recomendación | Comprobar los botones de la web, comprobar si tienen algún tipo de interacción cuando hacemos hover.
1.2 | Mejora en la percepción del tiempo de espera. Cuando realizamos la carga de la página en modo lento (inspeccionador | Network | slow), podemos apreciar que no hay ningún tipo de Skeleton ni de Spinner que indiquen al usuario que la carga es lenta pero que se resolverá.
En la imagen podemos ver el inspeccionador de google que, tiene una herramienta en "Network" donde puedes jugar con los tiempos de carga para poder detectar este tipo de fallos y comprobar, qué pasa cuando la carga es especialmente lenta.
Recomendación | Añadir un Skeleton o un Spinner para evitar la sensación de incertidumbre en el usuario de si la web está rota cuando tarda en cargar.
1.3 | Falta de reconocimiento en botón y falta de interacción. Este botón del menú en el footer, tiene el mismo estilo que otro elemento que no es link (en el footer). Además al hacer hover sobre este elemento, no modifica su estilo.
Recomendación | Guardar homogeneidad con los elementos que son link y darles un efecto al hacer hover sobre estos con el fin de indicar que son clickables.
4. Consistencia y estándares
Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Se debe seguir un estándar y ser consistentes con las decisiones que tomamos a lo largo de toda la plataforma.
4.1 | Formularios distintos. Los formularios alrededor de la página no guardan consistencia y muchos son distintos sin guardar similitudes en los elementos principales como pueden ser los inputs. También son distintos los botones de "Enviar" que no comparten ni "padding", ni "border-radius", ni "font-family" ni "background-color".
Recomendación | Diseñaría y construiría todos los formularios con el mismo estilo, mismo número de campos y mismos botones. También eliminarías los labels que hay encima de los inputs y los incorporaría dentro de estos mediante placeholders.
4.2 | Desplegables. He encontrado varios tipos de desplegables que no tienen nada que ver el uno con el otro. No solo en el desplegable en sí, sino también en las tipografías, espaciados de línea, tamaños de fuente...
Recomendación | Diseñaría y construiría todos los desplegables con el mismo estilo y efecto.
4.3 | Falta de coherencia repitiendo elementos. La web promociona los "partners" en distintas páginas de la web. En cada una lo hace una forma distinta y en alguna página, incluso aparece repetido de dos formas distintas (ver Home).
Recomendación | Presentaría a los partners de la escuela de la misma forma, en concreto, usaría la primera del ejemplo que aparece en la imagen, como un loop infinito. Los logotipos no pueden tener fondo blanco siendo png.
4.4 | Falta de coherencia en tipografías, interlineados,... Según dónde, se una tipografía determinada para los títulos y otra para otros títulos. La que se ha utilizado para un título la usan en otros apartados como subtítulo. No hay coherencia alguna.
Recomendación | Procuraría crear unos estándares de diseño para asignar a los distintos elementos de un texto o párrafo unas clases, tipografías e interlineados específicos y crear así una sensación de orden visual.
4.5 | Padding. Según las distintas partes de una misma página, algunos bloques/contenedores tienen "padding" y otros no.
Recomendación | Todos los contenedores deben tener el mismo padding para evitar este tipo de fallos.
4.6 | Cards no tiene coherencia en usos similares. A lo largo de las distintas páginas, hay varias cards que se utilizan para mostrar a mentores y partners. En vez de homogeneizar su uso, cada una es distinta. O bien tiene border, o no lo tiene, o la imagen y la distribución de la información es distinta.
Recomendación | Diseñaría y construiría todos las cards de éste tipo para presentar a miembros o partners con la misma estructura (Imagen nombre, descripción y logo).
4.7.1 | Form bottons. Los botones de los formularios o de los inputs no tienen el mismo estilo. Tiene distinto tamaño de fuente, tipografia y color de fondo. También tienen distinto "border-radius". Lo mismo pasa con los inputs.
Recomendación | Diseñaría los botones con el mismo formato. No tiene por qué ser el mismo, pero sí seguir un estilo similar y decidir dónde utilizar uno y otros. Utilizar la mismo tipografía y padding.
4.7.2 | General bottons. Además de los botones de "Enviar", podemos encontrar más botones que no tienen nada que ver los estilos los unos con los otros.
Recomendación | Unificar el estilo del botón.
4.8 | Carousel. A lo largo de la página encontramos distintos carousel que ninguno tiene que ver con el anterior. Como recomendación haría que todos tuvieran el mismo estilo.
Recomendación | Utilizaría siempre el mismo estilo de carousel. De lo contrario, con los ejemplos que vemos en la imagen puede generar confusión y no detectar algunos como carousel.
5. Prevenir errores
Mejor que comunicar correctamente un error, es ayudar a los usuarios a no cometer errores.
Una buena UX anticipa un error y ayuda a los usuarios con la prevención.
Prevenir pérdida de datos, errores en el ingreso de datos, salidas de un flujo.
5.1 | Información en los inputs del form. He insertado información en los inputs del form que, al enviar, no debería considerar como válida. Los tipos de los inputs no han sido asignados correctamente y falta detallar mejor qué es válido y qué no.
Recomendación | Se debe asignar el tipo "text" al campo "nombre". Lo mismo para "Nombre de empresa". Para evitar que el formulario permita ser enviado con el tipo de correo introducido, se debería de proteger con el servicio de "reCaptcha" de google.
Respecto al "Número de teléfono" se debería de limitar el nombre de caracteres y poner el formato válido en el "placeholder" para que el usuario tenga como referencia un formato permitido.
6. Reconocer mejor que recordar
Minimizar la carga cognitiva haciendo visible objetos, acciones y opciones.
El usuario no debería tener que recordar información de una parte a otra.
Las interfaces que promueven el reconocimiento reducen la cantidad de esfuerzo cognitivo requerido por los usuarios.
6.1 | Menú principal. Falta dar pistas en la navegación del menú principal. No podemos registrar lo que ha sido visto recientemente. Es un menú extenso y con ruido ya que hay 6 secciones en 4 columnas. Es fácil perderte o no recordar qué elementos he visitado y qué elementos no.
Recomendación | Si hay 6 categorías crearía 6 columnas. Aquél elemento o link seleccionado::visited debería de tener una clase que permitiera al usuario tener claro qué páginas de la web ha visitado, evitar perderse y evitar también la frustración de ir al mismo sitio una y otra vez.
8. Estética y minimalismo
Las imágenes son esenciales para establecer buenas impresiones.
La percepción de la experiencia puede ser más memorable que la experiencia misma.
Establece y refuerza la identidad de marca.
Un diseño minimalista es el que limita la cantidad de “ruido” para enfatizar la información necesaria.
Busca simplificar las interfaces eliminando elementos innecesarios que no apoyan las tareas del usuario.
8.1 | Mucho ruido. En la imagen resalto 5 puntos. Ésta sección es un ejemplo de "mucho ruido". La imagen del slider, la imagen del flotador, los 4 tipos de tipografías distintas,...
Hay muchos fallos en una simple captura de pantalla con tan poca información.
El título principal, tiene una tipografía distinta al resto del contenido con un color oscuro sobre una imagen. Ésta imagen tiene además, mucho ruido también oscura que no aporta nada.
Txto con distinta tipografía y con color diferente.
El tamaño del texto del input (correo) es distinto al texto del placeholder y de la aceptación de la política de privacidad.
El botón tiene una tipografía distinta y tamaño distinto.
La imagen no aporta nada y, además está cortada.
Recomendación | Crear elementos de diseño con sentido. No utilizar texto de color negro sobre fondo oscuro ya que no permite que se lea. Homogeneizar las tipografía y usar los tamaños adecuados. Si insertamos imágenes asegurarnos que está correctamente editadas.
8.2 | Fallos de diseño. Hay muchos fallos a destacar en cada imagen. Esto puede ser tanto error de diseño como de coherencia en elementos. Antes de destacar los 3 puntos, me gustaría incluir como algo negativo de la imagen, las combinaciones de color del punto 2 y 3.
1. Texto blanco sobre gris claro.
2. Mismo espacio de línea entre título y texto.
3. Botones de cards a distinta altura.
Recomendación | Evitar texto blanco sobre fondo oscuro. Mantener unos estándares de espacios de línea entre elementos de distinta jerarquía en el texto (título, subtítulo, párrafo, link).
En las cards procurar que los botones siempre estén a la misma altura respecto al bottom sin importar la longitud del texto que les precede.
8.3 | Imágenes .png con fondo blanco. Han insertado imágenes .png (sin fondo), en éste caso para mostrar logos de los partners, con fondo blanco. Unos logos sin fondo y otros con.
Recomendación | Si optamos por utilizar imágenes en formato .png para evitar los fondos blancos en un fondo de otro color y para que los logotipos destaquen más en este caso, no podemos incluir la imagen con fondo. Da una sensación poco profesional.
8.4 | Falta de padding en secciones de la web. Éste mismo fallo ha sido resaltado en el punto 4 por falta de coherencia y consistencia, pero también es un fallo muy grave de diseño y de estética.
Recomendación | No se puede permitir que en el mismo contenedor, no haya padding entre elementos y estos se muestren pegados sin espaciado.
8.5 | Botones difuminados. Aquí hay varios elementos que analizar y que hemos mencionado previamente, pero repetimos...
El alto de línea entre título y párrafo es el mismo
El fondo de imagen de cada botón se compone de tonos difuminados. Cada uno distinto al otro.
El botón tiene fondo negro sobre un elemento (botón) con background de color oscuro.
Otros elementos (botones) tienen fondo claro con texto blanco, lo que hace que no sea lea bien.
La altura de unos botones y otros es distinta.
Recomendación | Homogeneidad en los botones. Evitar usar como fondo colores degradados y, una vez más, evitar texto blanco sobre fondos de color claro.
9. Comunicar errores con claridad
Que sean fáciles de reconocer visualmente.
Explicar el problema con claridad.
Proveer una solución o camino a seguir.
9.1 | Error duplicado. El formulario es el único elemento que comunica errores. No hay más elementos que interactúen con el usuario. En éste caso, hauy un fallo y es que muestra un error duplicado.
Recomendación | Vigilar éste tipo de fallo en formularios y en cualquier elemento en el que interactuemos. Puede generar desconfianza en el usuario.
10. Ayuda y documentación
El usuario necesitará en ocasiones, ayuda y documentación.
Cualquier información de este tipo debe ser: 1. Fácil de buscar, 2. Estar centrada en la tarea del usuario, 3. Enumerar los pasos, 4. No ser demasiado extensa
10.1 | Ausencia de "Buscador". En la web no hay ningún buscador. Suele encontrarse en el menú superior, pero tampoco lo vemos aquí.
10.2 | Ausencia de contacto. Falta una página de contacto a la que la gente suele recurrir para contactar con una persona que pueda asistirle, a través de un formulario.
10.3 | Botón flotante de ayuda. Para una escuela como Immune, en la que captar leads es el objetivo principal. No hay un botón que se visualice para contactar y preguntar de forma inmediata inquietudes sobre un servicio, en éste caso, cualquier curso que ofrece la escuela.
Hay un botón de whatsapp en el menú superior que, al hacer click en él, en versión web, no te lleva a otra página sino que te saca de immune.institue para llevarte a la plataforma web de la app para comunicarte. No es inmediato y te saca de la web.
Recomendación | En una web cuya finalidad es generar leads y contactos de calidad, hay que hacer estos recursos de una manera más visible y crear así, mayor número de elementos CTA.
El usuario debe obtener, no una respuesta rápida, sino inmediata a cualquier tipo de consulta que tenga tanto a nivel del servicio, como de precios, horarios,...
Last updated
