En este post vamos ha realizar un análisis heurístico de una interfaz de inspiración visual: Pinterest.

---

¿Qué es Pinterest?

Se trata de una plataforma digital y red social donde la inspiración visual es la base sobre la que se construye. Es una herramienta que permite organizar contenidos mediante tableros temáticos tanto públicos como privados, añadiendo aquellas imágenes que resultan atractivas o interesantes, conocidas como pins. Existen una infinidad de temáticas dentro de la plataforma.

 

 

 

Tiene sede en San Francisco, se lanzó en 2010 y cuenta con más de 500 millones de usuarios mensuales activos en todo el mundo.

¿Por qué Pinterest?

¿Quién no ha utilizado Pinterest alguna vez? No puedo afirmar exactamente los años que llevo utilizando esta plataforma, pero me arriesgo a decir que mínimo 12 años. En todo este tiempo, no tenía los conocimientos para analizar el funcionamiento de la plataforma ni cómo es la experiencia de los usuarios, por eso me ha parecido interesante escoger este motor de búsqueda visual para realizar un análisis heurístico y ser consciente de qué ofrece esta plataforma a nivel de usabilidad.

En este post vas a encontrar…

(2)

 

1.  Metodología empleada para realizar el análisis heurístico de Pinterest.
2. Un análisis heurístico con los 10 principios de Nielsen:
   • Visibilidad del estado del sistema.
   • Adecuación entre el sistema y el mundo real.
   • Libertad y control por parte de la persona usuaria.
   • Consistencia y estándares.
   • Prevención de errores.
   • Reconocimiento antes que recuerdo.
   • Flexibilidad y eficiencia en el uso.
   • Diseño estético y minimalista.
   • Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse.
   • Ayuda y documentación.
3. Un ranking de los hallazgos ordenados según la gravedad de la experiencia de usuario y sus propuestas de mejora

 

---

1. Metodología

 

Para llevar a cabo el an´alisis heurístico de Pinterest realizamos tres tareas principales: Inspección, documentación, priorización.

• • En la primera tarea, realizaremos una inspección por la navegación de la interfaz realizando las principales funciones de la plataforma. Como registrarse, iniciar sesión, página de inicio, realizar una búsqueda, crear un tablero, guardar un pin, perfil de usuario…
  • En la segunda tarea, realizaremos una documentación de los 10 principios de Nielsen en un informe detallado con los hallazgos de la plataforma.
  • Por último, priorizamos qué hallazgos son más graves respecto a la experiencia del usuario y propondremos mejoras.

 

(3)

---

2. Análisis heurístico

Los 10 principios de Nielsen

En esta segunda parte encontramos el objetivo principal de esta entrada: realizar un análisis heurístico de la plataforma de Pinterest siguiendo los 10 principios de Nielsen. Para ello, presentaremos en qué se basa el principio, cómo se encuentra en la plataforma de Pinterest, si se hace un buen o mal uso del principio y justificaremos la decisión tomada.

2. 1. Visibilidad del estado del sistema

El sistema debe avisar al usuario de lo que está pasando en todo momento, ya sea cargado el contenido, mientras se realiza la acción o si existe algún error.

 

• • • Ejemplo: Guardar un Pin.
    • Evaluación: Buen uso ✅
    • Justificación: Al guardar un Pin, el sistema ofrece una retroalimentación que le indica al usuario que se ha completado la acción. Lo hace cambiando el botón que estaba en rojo e indicaba «Guardar» a pasar a un color gris e indicar «Guardado», además de indicar el lugar donde se encuentra, en este caso «Guardado en el perfil».

 

 

2. 2. Adecuación entre el sistema y el mundo real

La interfaz debe utilizar un lenguaje que sea reconocible para el usuario y que utilice metáforas y conceptos que sean familiares
para este.

 

• • • Ejemplo: Metáfora de Pin y Tablero.
    • Evaluación: Buen uso ✅
    • Justificación: Pinterest se basa en la idea de utilizar pins (chinchetas) para añadir ideas a un tablero (un corcho). Por lo que realiza una analogía que es sencilla de comprender por nuevos usuarios.

 

2. 3. Libertad y control por parte de la persona usuaria

Los usuarios deben poder deshacer las acciones y salir fácilmente, teniendo el control sobre la interfaz.

 

• • • Ejemplo: Deshacer acciones en bloque.
    • Evaluación: Mal uso ❌
    • Justificación: Cuando organizamos un tablero, nos permite seleccionar todos los elementos para organizarlos y mover también cada pin de manera individual, pero como vemos en el ejemplo, una vez movemos los pins a otro tablero, no podemos deshacer la acción, lo que hace que el usuario no tenga el control sobre el sistema.

 

2. 4. Consistencia y estándares

Los elementos y acciones que signifiquen lo mismo se deben presentar en la interfaz de la misma forma, guardando coherencia.

 

• • • Ejemplo: Uso de elementos distintos.
    • Evaluación: Mal uso ❌
    • Justificación: Al añadir un Pin desde un tablero ya existente varía el botón para realizar la acción de guardar. En el ejemplo del primer principio podemos observar que se emplea un botón para guardar y en este caso es reemplazado por una chincheta, lo que puede causar confusión y no guarda la consistencia a lo largo de la interfaz.

 

2. 5. Prevención de errores

Diseñar interfaces que eviten que los usuarios cometan errores en lugar de gestionar bien los errores ya existentes. 

 

• • • Ejemplo: Modificaciones en un tablero.
    • Evaluación: Mixto ✅ ❌
    • Justificación: Existen varias formas de editar un tablero, y entre ellas encontramos «archivar» que aparece un diálogo en el que nos avisa de cómo va a afectar esta acción, ya que dejará de estar disponible. ✅ Anticipando el error de que el usuario archive un tablero y después no lo encuentre. Pero sin embargo, cuando la opción que seleccionamos es la de «fusionar» directamente nos deja realizar la acción,  lo que lleva al error al usuario ya que no hay forma de restaurarlo. ❌

 

2. 6. Reconocimiento antes que recuerdo

Hacer que el usuario no deba memorizar las opciones o información relevantes, si no que estén disponibles visiblemente y pueda identificarlas. 

 

• • • Ejemplo: Sugerencia de tableros al guardar un Pin.
    • Evaluación: Buen uso ✅
    • Justificación: Cuando el usuario quiere guardar un Pin, la interfaz asigna el tablero que cree que puede encajar con ese contenido, y además permite desplegar los distintos tableros que ha creado el usuario, colocando los utilizados más recientes en la parte superior. Lo que hace que el usuario no deba acordarse de todos los nombres de los tableros que tiene creados.

 

2. 7. Flexibilidad y eficiencia en el uso

La interfaz debe ser eficiente para nuevos usuarios y para expertos, aportando atajos a los últimos para realizar las funciones.

 

• • • Ejemplo: Copiar /guardar imagen.
    • Evaluación: Mal uso ❌
    • Justificación: Cuando los usuarios se enfrentan ante la acción de guardar o copiar la imagen, deben hacerlo mediante el menú de tres puntos o con el botón derecho del ratón. Sin embargo, para usuarios más experimentados, deberían permitirse los atajos del teclado como cmd+c/cntrl+c (dependiendo del sistema operativo) para copiar la imagen una vez seleccionada.

 

 

2. 8. Diseño estético y minimalista

El diseño de la interfaz tiene que ser claro y estético, para que no afecte al contenido principal y puedan realizarse las acciones sin interferencias. 

 

 

• • • Ejemplo: Home de Pinterest.
    • Evaluación: Buen uso ✅
    • Justificación: La página de inicio se muestra organizada con las imágenes y vídeos que son el contenido principal de la plataforma. Ocupando este la mayor parte de la pantalla. Los botones e iconos tienen una estética minimalista y aparecen, en muchos casos, cuando se pasa el cursor por encima. Optimizando de esta forma que el usuario tenga acceso a la parte visual sin saturar con información.

 

2. 9. Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse

Los mensajes de error deben ser claros, explicar el problema para que sea comprensible por el usuario y aportar una solución.

 

• • • Ejemplo: Sin conexión a Internet.
    • Evaluación: Mal uso ❌
    • Justificación: Cuando no existe conexión a internet deja de cargarse el contenido y no aparece ningún mensaje. Lo que puede generar frustración por parte del usuario esperando a que cargue de nuevo el sistema. Podría solventarse mediante un mensaje que indicase la falta de conexión y que recargue la página.

 

2. 10. Ayuda y documentación

La ayuda debe ser de fácil acceso y concisa, ayudando al usuario a realizar la tarea correspondiente.

 

• • • Ejemplo: Acceso y búsqueda en el Centro de Ayuda
    • Evaluación: Uso mixto ✅ ❌
    • Justificación: El Centro de Ayuda esta disponible en todas las pantallas y está bien estructurado, se abre en una pestaña nueva, lo que permite poder volver a realizar la acción una vez resuelta la duda sin volver atrás. ✅
      Sin embargo, solo puedes acceder a ella desplazándote por el menú de la parte izquierda y accediendo a configuración. Se podría solventar añadiendo un icono de un interrogante justo encima del engranaje que identificamos como ajustes, para que visiblemente fuese más perceptible y de fácil acceso para nuevos usuarios. ❌

 

---

3. Ranking de hallazgos

 

Puesto que no todos los errores son igual de graves y el impacto en el usuario es distinto, realizamos un ranking desde los menos graves a los más graves, respectivamente. También aportamos posibles soluciones de mejora.

(4)

Top 5 de errores de usabilidad en Pinterest

El quinto puesto es para…

(5)

Acceso poco intuitivo al Centro de Ayuda

10. Ayuda y documentación

• Justificación: Es el problema más leve, puesto que puede accederse al Centro de Ayuda mediante la configuración del menú lateral, pero dificulta la tarea a aquellos usuarios nuevos puesto que no se encuentra a simple vista.
• Propuesta de mejora: Extraer la función de la configuración y trasladarla a la parte superior inmediata a la tuerca mediante un icono de interrogante. De esta forma sería visible y podrían acceder todos los usuarios sin navegar en el sistema hasta encontrar esta opción.

 

El cuarto puesto es para…

(6)

Falta de estado en cargas largas

1. Visibilidad de estado del sistema

• Justificación: Cuando realizamos scroll durante un tiempo y el sistema tarda en cargar el contenido más de lo esperado no aparece ningún icono, simplemente se queda en blanco las imágenes.
• Propuesta de mejora: Añadir un icono de carga o un mensaje de «Cargando más resultados» para indicar al usuario el estado del sistema.

 

El tercer puesto es para…

(7)

Incoherencia en la interfaz

4. Consistencia y estándares

• Justificación: Existen dos botones/iconos para guardar un Pin: el botón con el texto «Guardar» y su respectivo «Guardado» al completar la acción; y una chincheta que se convierte en un check al completarla.
• Propuesta de mejora: Unificar el sistema estandarizando uno de los dos formatos empleados para no generar confusión entre los nuevos usuarios, y que sea más sencilla de aprender la interfaz por reconocimiento.

 

El segundo puesto es para…

(8)

Deshacer acciones en bloque

5. Prevención de errores

• Justificación: Este problema puede causar que se pierdan horas de trabajo, ya que por una confusión pueden fusionarse tableros erróneos o pasar Pins de un tablero a otro en masa sin opción de restaurar el valor original de estos.
• Propuesta de mejora: Al igual que cuando se guarda un Pin, aparece una retoacción de que se ha guardado, debería existir un botón donde poder deshacer inmediatamente la acción. Además de incluir el funcionamiento de atajos (cmnd + z / contrl + z) para deshacer las acciones.

 

El primer puesto es para…

(9)

Mensajes de error

9. Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse

• Justificación: Es el problema más grave ya que al no informar al usuario del problema puede sentir frustración e impotencia. Esto puede causar que la persona abandone el proceso y afecta directamente a la experiencia de usuario.
• Propuesta de mejora: Sistema de mensajes que diagnostiquen el problema y guíen al usuario hacia la solución. Por ejemplo, diagnosticar el problema: «No podemos conectar con Pinterest. Revisa tu conexión.» Ofrecer una solución: añadir al mensaje un botón de «Reintentar». Comprobar el estado: icono de carga.

 

---

Bibliografía

Webgrafía

Membrives, J. [Judith]. (2021).
Cuaderno de Evaluación de la usablilidad. [recurso de aprendizaje textual]. https://quadern-usabilitat.recursos.uoc.edu/es/

Design Toolkit  (n.d.). https://design-toolkit.recursos.uoc.edu/es/

Recursos visuales

1 Portátil realista | Vector gratuito. (n.d.). Freepik. https://www.freepik.es/vector-gratis/portatil-realista_35202486.htm#fromView=keyword&page=1&position=0&uuid=14ccd113-d948-43f3-9dbd-8b83934ab0ba&query=Mockup+ordenador

2 Aqilahtries. (2024, July 23). Eyes Eye Search Sticker – Eyes Eye search Aqilahtries – Descubrir y compartir GIFs. Tenor. https://tenor.com/es/view/eyes-eye-search-aqilahtries-gif-5948550037347295490

3 Morrison, N. (2017, July 31). MacBook Pro near white open book. Unsplash. https://unsplash.com/es/fotos/macbook-pro-near-white-open-book-FHnnjk1Yj7Y

4 BearishAF. (2025, August 5). School College Sticker – School College Teacher – Descubrir y compartir GIFs. Tenor. https://tenor.com/es/view/school-college-teacher-score-f-gif-15148442590092176477

5 Dasoertliche. (2022, September 7). Anzeigetafel Fünf Sticker – Anzeigetafel Fünf Fünf Minuten – Descubrir y compartir GIFs. Tenor. https://tenor.com/es/view/anzeigetafel-f%C3%BCnf-f%C3%BCnf-minuten-five-five-minutes-gif-26659689

6 Dasoertliche. (2022, September 9). Soccer Bundesliga Sticker – Soccer Bundesliga Fussball – Descubrir y compartir GIFs. Tenor. https://tenor.com/es/view/soccer-bundesliga-fussball-referee-dfb-gif-26676528

7 Dasoertliche. (2022, September 7). Anzeigetafel Drei GIF – Anzeigetafel Drei Nachspielzeit – Descubrir y compartir GIFs. Tenor. https://tenor.com/es/view/anzeigetafel-drei-nachspielzeit-drei-minuten-three-minutes-gif-26659878

8 Dasoertliche. (2024, January 3). Das örtliche Schiri GIF – Das örtliche Schiri Schiedsrichter – Descubrir y compartir GIFs. Tenor. https://tenor.com/es/view/das-%C3%B6rtliche-schiri-schiedsrichter-schiedsrichterinnen-fussball-gif-7487206721150257002

9 Dasoertliche. (2024, January 3). Das örtliche Schiri GIF – Das örtliche Schiri Schiedsrichter – Descubrir y compartir GIFs. Tenor. https://tenor.com/es/view/das-%C3%B6rtliche-schiri-schiedsrichter-schiedsrichterinnen-fussball-gif-15787429217074698036