Análisis heurístico de la interfaz de Medium

1. Introducción

En este análisis vamos a examinar la plataforma Medium, una conocida interfaz de lectura y publicación de artículos por parte de la comunidad. A lo largo de esta entrada, se presentará una evaluación basada en los 10 principios heurísticos de Nielsen, identificando ejemplos positivos y negativos de cada uno de ellos.
El objetivo es detectar problemas de usabilidad si los hay y justificar por qué lo son. Finalmente priorizaremos estos hallazgos según su gravedad, proponiendo mejoras concretas para optimizar la experiencia de usuario.

2. Metodología

La evaluación se ha realizado mediante un análisis heurístico, un método que consiste en examinar la interfaz comparándola con los 10 principios de usabilidad establecidos por Jakob Nielsen.

El proceso seguido ha sido:

• Navegar por Medium por distintas pantallas: artículos, configuración de usuario, creación de cuenta, interacciones sociales…
• Identificar comportamientos, patrones visuales y flujos que cumplieran o incumplieran los heurísticos.
• Documentar buenas prácticas como malas implementaciones.
• Clasificar los problemas hallados según su impacto en la experiencia, su frecuencia y la dificultad que generan para el usuario.
• Redactar propuestas de mejora concretas.

3. Análisis según los 10 principios heurísticos de Nielsen

1º Visibilidad del estado del sistema

El sistema debe mantener informados a los usuarios sobre lo que está ocurriendo, mediante retroalimentación apropiada en un tiempo razonable.

✅ Buen ejemplo:

Cuando entras en la página y está cargando los elementos, inmediatamente hacen uso del
efecto skeleton con una mini animación en estos elementos que te dan ese feedback de carga
de contenido.

Otro ejemplo que encontramos es en la confirmación de acciones, como en el ejemplo que vemos a continuación dónde la interfaz nos confirma que se ha copiado al portapapeles.

 

❌ Mal uso | Severidad Baja

En cambio, no siempre hay retroalimentación, en este caso por ejemplo hemos hecho una acción y a diferencia del ejemplo anterior no nos sale el toast de confirmación rompiendo la consistencia y por ende esta confirmación que esperamos por parte del sistema de que la acción se ha ejecutado con éxito. Dado que al hacer click si que hay algo de feedback aunque poco visible y luego puedes ver que el cambio está realizado, estaríamos hablando de una severidad baja.

 

Propuesta de mejora

Para solventar esta pequeña inconsistencia, se podría incluir este toast para cualquier acción que el usuario haga, creando así un estándar de feedback para el usuario en el que se le va comunicando en todo momento la información del sistema a su acción.

 

2º Coincidencia entre el sistema y el mundo real

El sistema debe hablar el lenguaje del usuario, usando palabras, frases y conceptos familiares, siguiendo convenciones del mundo real.

✅ Buen ejemplo:

Medium usa lenguaje comprensible y metáforas conocidas:

“Clap” para dar me gusta, etiquetas para categorías, marcador de libro, etc…

Otro elemento para mi que nos recuerda al medio físico, es el de subrayados tipo marcador cómo cuando estudiamos y nos marcamos lo importante a recordar, me ha parecido muy interesante.

3º Control y libertad del usuario

El sistema debe mantener informados a los usuarios sobre lo que está ocurriendo, mediante retroalimentación apropiada en un tiempo razonable.

✅ Buen ejemplo:

El usuario puede cancelar la escritura de un comentario fácilmente.

❌ Mal ejemplo | Severidad alta

Los “claps” no permiten revertir el número con precisión: si tocas accidentalmente, el aplauso solo aumenta y no puedes restar uno a uno.

Propuesta de mejora

El usuario debe poder deshacer acciones no deseadas de forma clara y directa. Este tipo de acciones, que no deja de ser un like de Facebook, Instagram o este tipo de redes sociales, activa y desactiva un click para mantener patrones que el usuario ya conoce.

 

4º Consistencia y estándares

Los usuarios no deberían preguntarse si diferentes palabras, situaciones o acciones significan lo mismo

✅ Buen ejemplo:

Medium es bastante consistente: los botones, tipografía y menús se mantienen iguales en todas las páginas, y se respetan estándares web. En estos ejemplos vemos como siempre que te situas encima de un elemento muestra un tooltip indicando que es clicable, y por otro lado tenemos el layout estándar de todas las páginas estandarizado siempre mantienen la misma estructura y constancia.

 

❌ Mal ejemplo | Severidad baja

Entre la vista general y la del detalle hay inconsistencia en los iconos de clap y comentarios.

Propuesta de mejora

Mantener la consistencia visual para reducir la carga cognitiva del usuario.

 

5º Prevención de errores

Mejor que buenos mensajes de error, es un diseño cuidadoso que evite que ocurran problemas y se anticipie a ellos.

❌ Mal ejemplo:

En este caso en Medium no he encontrado muchos ejemplos que se pueda aplicar este principio puesto que es más de lectura que de acciones, solo lo he podido encontrar un ejemplo durante el proceso de creación de cuenta. En este caso, no tiene ninguna prevención de error al introducir el email validando el formato hasta que no se hace clic en «crear cuenta».

Propuesta de mejora

Lo ideal es que el sistema antes de que el usuario intente enviar dicha información alerte que el formato no es correcto por y ayude a entender que formato se espera.

 

6º Lrem

Reconocer antes que recordar

✅ Buen ejemplo:

Por lo general, toda la interfaz me parece que sigue patrones mentales muy estandarizados que fomentan este principio. Algunos ejemplos muy simples pero ilustrativos son: menús, iconos y sugerencias basadas en hábitos permiten al usuario reconocer acciones sin memorizar procesos.

 

7º Flexibilidad y eficiencia de uso

El diseño debe servir tanto a usuarios novatos como a expertos, para que los usuarios avanzados interactúen más rápido y al mismo tiempo proporcionando una experiencia sencilla para los principiantes

✅ Buen ejemplo:

Algunas funciones avanzadas como modo oscuro, settings para configurar tu experiencia, tabulación para navegar, selección de temas de interés, etc…En este caso mostrada la pantalla de configuración como ejemplo de personalización de la experiencia para cada usuario. Al mismo tiempo por defecto Medium te guía para hacer una preconfiguración inicial que si eres usuario avanzado puede acabar de configurar al gusto.

 

8º Estética y diseño minimalista

No sobrecargar la interfaz con información irrelevante; cada elemento extra compite con la información relevante

✅ Buen ejemplo:

Medium es un ejemplo perfecto: limpieza, pocos elementos distractores, buena tipografía y jerarquía visual. Aquí tenemos dos ejemplos de pantallas diferentes con un diseño limpio, perfecto.

 

9º Ayuda a reconocer, diagnosticar y recuperarse de errores

El sistema debe hablar el lenguaje del usuario, usando palabras, frases y conceptos familiares, siguiendo convenciones del mundo real.

❌ Mal ejemplo | Severidad Media

Aunque sí que nos muestra el error con un lenguaje comprensible, no es suficientemente claro para que el usuario sepa qué formato es el esperado. En este caso es un email que todos estamos acosumbrados y ya conocemos el formato pero eso no implica que el mensaje sea ambiguo.

10º Ayuda y documentación

Aunque el sistema debería ser usable sin ayuda, puede ser necesario proporcionar documentación clara y fácil de buscar.

✅ Buen ejemplo:

Además de los literales que van acompañando para dar ayuda contextual de ese elemento, Medium ofrece una sección de «Help», esta te lleva a una web donde puedes buscar aquello que necesites.

 

 

4. Ranking

 

Hallazgo	Heurístico afectado	Severidad	Motivo	Propuesta
Los claps no pueden revertirse de forma precisa	3. Control y libertad del usuario	Alta	Es una acción central; un error accidental no puede corregirse fácilmente. Genera frustración y pérdida de control.	Permitir retirar claps con un solo clic y seguir patrones conocidos (like on/off).
Mensajes de error del email durante el regsitro es ambiguo	9. Ayuda a reconocer, diagnosticar y recuperarse de errores	Media	El mensaje no indica el formato esperado; aunque común, puede confundir y frena un flujo crítico como la creación de cuenta.	Añadir un ejemplo de formato y emplear mensajes más claros y específicos.
Falta de feedback consistente (no siempre aparece toast)	1. Visibilidad del estado del sistema	Baja–Media	Rompe la consistencia del sistema; el usuario no siempre sabe si su acción se ha completado correctamente.	Mostrar siempre un toast o microinteracción uniforme para todas las acciones.
Inconsistencia visual entre iconos en vista general y detalle	4. Consistencia y estándares	Baja	Genera microconfusión y rompe patrones visuales esperados aunque no afecta a la funcionalidad.	Unificar iconos y estilos entre ambas vistas.
Validación tardía del email (no preventiva)	5. Prevención de errores	Baja	El usuario solo detecta el error tras enviar; podría evitarse antes mediante validación inmediata.	Implementar validación en tiempo real mientras se escribe.
Feedback poco visible al hacer clic en algunos elementos	1. Visibilidad del estado del sistema	Baja	La microinteracción es tan sutil que puede parecer que la acción no se ejecutó.	Aumentar la visibilidad de la interacción: color, animación o microfeedback más claro.

 

Universitat Oberta de Catalunya (UOC). Evaluación heurística. Cuaderno de Usabilidad. Enlace: https://quadern-usabilitat.recursos.uoc.edu/es/4-2-evaluacion-heuristica/
Nielsen, J. (1994, 24 de abril). 10 Usability Heuristics for User Interface Design. Nielsen Norman Group.Enlace: https://www.nngroup.com/articles/ten-usability-heuristics/