Arquitectura de la Información - Aula 1

Pública

¡Buenas a todos! Os presento las dos referencias que he elegido, sus diagramas de flujo y su análisis crítico. Tras eso los insights claves y recomendaciones para aplicar a nuestra app de la biblioteca de Catalunya.

Las dos páginas que he analizado son la web de La Biblioteca Nacional de España (BNE) y la app de la New York Public Library.

Biblioteca Nacional de España

La Biblioteca Nacional de España (BNE) ofrece un fondo documental impresionante y acceso a catálogos, bases de datos y colecciones digitalizadas a través de su web www.bne.es. Pero… ¿qué tal es la experiencia para el usuario que intenta navegarla?

Flujo de navegación principal:

El recorrido más común para consultar documentos digitalizados sigue esta secuencia:

1. Acceder al menú “Catálogo”.
2. Seleccionar “Biblioteca Digital Hispánica”.
3. Introducir términos de búsqueda.
4. Aplicar filtros (tema, fecha, tipo de documento).
5. Revisar los resultados.
6. Abrir el visor digital.
7. Descargar el documento (si está disponible).

Diagrama de flujo:

Puntos fuertes

• Búsqueda avanzada: potente y con múltiples filtros.
• Visor digital: funcional y bien integrado.
• Fondo documental: rico en contenido académico y patrimonial.

Principales limitaciones

1. Arquitectura de la información confusa

Separar “Catálogo” y “Biblioteca Digital Hispánica” genera confusión. Los usuarios deben navegar por secciones que no comparten diseño ni lógica estructural, rompiendo la coherencia esperada.

2. Sin área personal

La web no ofrece una biblioteca o perfil personal donde guardar documentos, seguir autores o crear colecciones. Esto penaliza al usuario frecuente que necesita trabajar con varios recursos.

3. Experiencia fragmentada

Los buscadores de distintas secciones funcionan de forma diferente, lo que aumenta la carga cognitiva y dificulta la navegación, especialmente para usuarios no expertos.

4. Móvil poco optimizado

Aunque es “responsive”, la experiencia móvil no está bien resuelta: filtros pequeños, clics excesivos y ausencia de navegación táctil fluida.

5. Visibilidad limitada del sistema

Los resultados no informan claramente si los documentos están disponibles en digital o si tienen restricciones, lo que genera incertidumbre y frustra al usuario.

6. Carga cognitiva elevada

Demasiadas opciones, sin jerarquización clara. El lenguaje técnico y la falta de rutas guiadas pueden alejar a usuarios casuales o nuevos.

Conclusión

La BNE tiene un enorme valor patrimonial, pero su interfaz necesita adaptarse mejor a los principios UX. Con una estructura más clara, navegación coherente y optimización móvil real, podría ofrecer una experiencia tan valiosa como su contenido.

New York Public Library

La New York Public Library (NYPL) ofrece una de las aplicaciones móviles más completas y reconocidas en el entorno bibliotecario. Disponible para iOS y Android, su enfoque está centrado en el usuario móvil, lo que la convierte en un referente frente a otras bibliotecas con presencia más institucional o limitada al entorno web.

Flujo de navegación principal: ¿Cómo interactúa un usuario típico en la app?

1. Accede a la app desde su dispositivo móvil.
2. En el dashboard principal, el usuario puede:
   • Usar la barra de búsqueda (siempre visible).
   • Navegar por colecciones destacadas.
3. Introduce un término en el buscador → aparecen resultados filtrables.
4. Aplica filtros: autor, género, idioma, disponibilidad digital.
5. En la ficha del libro puede consultar:
   • Descripción
   • Estado de disponibilidad
   • Opciones: “Guardar”, “Prestar”, “Leer ahora”
6. Puede guardar el libro para después o descargarlo si está disponible.
7. Desde el menú principal accede a:
   • Su biblioteca personal
   • Libros en préstamo
   • Historial de lecturas

Diagrama de flujo:

Puntos fuertes

1. Diseño centrado en tareas reales

La app no replica la estructura interna de la biblioteca: está diseñada para que el usuario actúe. Buscar, leer, guardar… todo en pocos pasos. Ideal para contextos rápidos y móviles.

2. Visibilidad clara de funciones clave

Desde el primer momento, el usuario ve qué puede hacer y cómo. El panel muestra accesos directos a funcionalidades como “Mis libros” o “Reservas”, en línea con las heurísticas de Nielsen.

3. Consistencia visual y usabilidad

Botones, colores, tipografías y flujos siguen un patrón claro. Esto reduce la curva de aprendizaje y genera confianza. Ideal tanto para usuarios casuales como frecuentes.

4. Personalización y biblioteca propia

El usuario puede:

• Guardar libros
• Crear listas
• Consultar historial
• Recibir sugerencias personalizadas

Función muy útil para usuarios como Marc, que consultan documentos frecuentemente y necesitan organización.

5. Accesibilidad optimizada

Diseño adaptado a uso táctil:

• Botones accesibles con el pulgar
• Menús sin sobrecarga
• Compatibilidad con tecnologías de asistencia

Ideal para contextos como el de Laia, que accede desde la calle, transporte o cafetería.

Principales limitaciones

• Algunas funciones más avanzadas están poco visibles, como la gestión de etiquetas o filtros académicos.
• Está pensada más para lectura general que para investigación profunda o especializada, lo que puede limitar a usuarios expertos.

Conclusión

La app de la NYPL demuestra cómo una biblioteca puede ofrecer una experiencia digital intuitiva, moderna y centrada en el usuario, especialmente en entorno móvil. Aunque tiene margen de mejora en funciones académicas, su diseño funcional y su enfoque claro en la tarea la convierten en un referente UX para bibliotecas públicas del siglo XXI.

Tabla comparativa

Insights claves y recomendaciones

Tras comparar la web de la Biblioteca Nacional de España y la app de la New York Public Library, extraemos una conclusión clara: No importa cuánto contenido tenga una biblioteca, sino cómo lo presenta, organiza y facilita el acceso.

1. Diseñar para tareas, no para estructuras

La NYPL triunfa porque responde a acciones concretas del usuario: Buscar, leer, guardar, asistir a eventos. En cambio, la BNE sigue una lógica institucional que puede dificultar la experiencia.

Aplicación al proyecto:
La Biblioteca de Catalunya debería guiar al usuario por flujos como:

• “Buscar manuscritos”
• “Ver agenda cultural”
• “Recibir alertas de eventos”

2. Mobile-first, sin excusas

La mayoría de usuarios (como Laia y Marc) acceden desde el móvil. La NYPL lo entiende: botones grandes, filtros simples, navegación fluida. La BNE aún no.

Aplicación al proyecto:

• Pantallas limpias
• Navegación con el pulgar
• Visores táctiles
• Filtros desplegables cómodos

3. Personalización y espacio privado

La NYPL permite crear listas, guardar favoritos y recibir recomendaciones. La BNE no ofrece funciones para personalizar la experiencia.

Aplicación al proyecto:

• “Mi biblioteca” para Marc
• “Recordatorios culturales” para Laia
• Favoritos, etiquetas, historial

4. Coherencia visual y navegación predecible

La app de NYPL mantiene un diseño estable. La BNE salta entre interfaces sin unidad visual.

Aplicación al proyecto:

• Menús consistentes
• Iconos claros
• Filtros que se comporten igual en todas las secciones

5. Comunicación proactiva y feedback inmediato

La NYPL informa al usuario: notificaciones, mensajes claros, recordatorios.
En la BNE, muchas acciones no generan respuestas visibles.

Aplicación al proyecto:

• Alertas de nuevos eventos
• Confirmaciones visuales
• Animaciones suaves para guiar

Conclusión

Una biblioteca digital no debe limitarse a mostrar información. Debe ser una experiencia cultural viva y accesible. Para lograrlo, la Biblioteca de Catalunya necesita:

• Navegación centrada en tareas reales
• Diseño móvil optimizado
• Espacio personal para el usuario
• Coherencia visual
• Comunicación clara y activa

Muchas gracias por leerme.

Un saludo.

Jessica Valdés Gallego.

Arquitectura de la Información - Aula 1

Pública

¡Buenos días a todos! Os comparto un resumen del cardsorting realizado y del árbol de contenidos:

Como parte del proceso de optimización de la estructura de contenidos y su nomenclatura, se ha llevado a cabo una prueba de Card Sorting con usuarios reales. Esta técnica de diseño centrado en el usuario nos ha permitido comprender cómo los usuarios agrupan y etiquetan la información, facilitando una arquitectura de la información más intuitiva y funcional.

Se seleccionaron 8 usuarios representativos del público objetivo del proyecto, con perfiles variados en cuanto a edad, experiencia digital y conocimiento del sector, con el fin de obtener una visión diversa.

Se realizo un card sorting abierto, permitiendo a los usuarios crear sus propios grupos y etiquetarlos libremente. Esto ofrece mayor flexibilidad y revela el lenguaje natural que usan los usuarios. Se incluyeron un total de 20 tarjetas, cada una con un contenido único del inventario. Las sesiones se realizaron de forma individual.

• Las sesiones se realizaron entre los días 18 de abril y 21 de abril.
• Cada usuario completó la prueba de forma individual, en sesiones de aproximadamente 20 minutos.
• Los datos se registraron automáticamente en la plataforma utilizada.

1.  Unificar etiquetas repetidas bajo nombres intuitivos y validados:

   1. Configuración” como paraguas para accesibilidad, seguridad, personalización.

   2. “Documentos” o “Visor” como espacio único para gestión documental.

   3. “Eventos” como agrupación clara para todas las funcionalidades temporales.

2. Tratar funciones transversales (búsqueda, favoritos, notificaciones) como elementos de la interfaz persistente, no como categorías en sí mismas.
3. Diseñar una navegación basada en tareas, no en estructuras técnicas: los usuarios piensan en lo que quieren hacer, no en cómo se implementa internamente.
4. Revisar etiquetas: algunas confusiones pueden venir del lenguaje. ¿Qué entienden los usuarios por “Centro de notificaciones”? ¿Es un histórico, una alerta, un panel?
5. Validar la arquitectura propuesta mediante un tree test, midiendo tareas concretas para asegurar que los usuarios navegan de forma eficiente con la nueva estructura

¡Espero que os guste!

Muchas gracias, un saludo.

Diseño de Interacción: Procesos, Métodos y Técnicas - Aula 1

Pública

Como parte del ejercicio de prototipado, presento a continuación el wireframe de una de las páginas de marca.com.

Esta herramienta permite visualizar cómo se distribuyen los elementos en pantalla y cómo se estructura la interacción del usuario con el contenido.

En este caso, he trabajado sobre  la página principal, destacando los componentes clave y su jerarquía dentro del diseño actual del sitio. Se trata de un prototipo de baja fidelidad.

Adjunto el enlace al wireframe

Evaluación de la Usabilidad - Aula 1

Pública

1. Introducción

En este post realizaremos un análisis heurístico de la interfaz de la página web de Twitch. Twitch es una plataforma de transmisión en vivo y video bajo demanda, conocida principalmente por sus transmisiones de videojuegos, pero también por otros tipos de contenido como música, arte y charlas. Debido a su naturaleza interactiva y dinámica, la usabilidad de la interfaz es fundamental para garantizar una experiencia fluida para los usuarios. Aplicaremos los principios heurísticos de Jakob Nielsen para evaluar su usabilidad.

2. Metodología

Para realizar este análisis, hemos seguido los siguientes pasos:

1. Exploración de la interfaz: Navegación por las secciones principales de la página web, explorando tanto la parte de transmisión en vivo como las secciones de contenido bajo demanda.
2. Aplicación de los 10 principios heurísticos de Nielsen: Evaluación detallada de la interfaz de Twitch bajo cada uno de los principios de usabilidad.
3. Documentación de hallazgos: Identificación de errores y aciertos visuales y funcionales mediante captura de pantallas.
4. Priorización de problemas: Evaluación de la gravedad de los problemas encontrados en relación con la experiencia del usuario.
5. Propuestas de mejora: Sugerencias para mejorar la experiencia del usuario.

3. Análisis Heurístico según los Principios de Nielsen

1. Visibilidad del estado del sistema

Ejemplo positivo: Cuando se está transmitiendo un video en vivo, Twitch muestra un indicador claro de que el video está en directo, y una barra de progreso con la duración de la transmisión.

Ejemplo negativo: A veces, al cambiar de calidad de video, no se muestra claramente que la calidad se ha actualizado hasta que el video comienza a cargarse de nuevo.

Propuesta de mejora: Implementar una confirmación visual inmediata (como un pequeño icono o mensaje) que indique que la calidad de video ha sido cambiada.

2. Correspondencia entre el sistema y el mundo real

Ejemplo positivo: Los menús y las categorías en Twitch están claramente etiquetados con nombres familiares y fáciles de entender, como «Juegos», «Música» y «Charlas».

Ejemplo negativo:Twitch utiliza una moneda virtual llamada «Bits» para que los espectadores puedan donar a los streamers. Sin embargo, la plataforma no deja clara la equivalencia entre Bits y dinero real en todo momento. Los usuarios deben buscar información externa o hacer cálculos manuales para entender cuánto están realmente donando.

Propuesta de mejora: Mostrar de manera clara y visible la conversión de Bits a dinero real en la interfaz antes de la compra o al realizar una donación, para que los usuarios comprendan exactamente cuánto están gastando y cuánto recibe el streamer.

3. Control y libertad del usuario

Ejemplo positivo: Twitch permite a los usuarios pausar, adelantar y retroceder en los videos de transmisión bajo demanda, lo que les da total control sobre su experiencia de visualización.

Ejemplo negativo: En la plataforma de Twitch, cuando un usuario se encuentra navegando por contenido en vivo, no hay una forma sencilla de retroceder o saltar hacia el inicio de una transmisión en vivo si se ha perdido el comienzo, lo que limita la libertad de navegar. No hay una barra para iniciar la transmisión desde el principio.

Propuesta de mejora: Ofrecer una opción de retroceso en transmisiones en vivo o una función de «retransmisión» para que los usuarios puedan acceder al contenido desde el inicio si lo desean.

4. Consistencia y estándares

Ejemplo positivo: El diseño de la barra lateral y el reproductor de video sigue convenciones de plataformas de video, como YouTube, lo que facilita la adaptación del usuario.

Ejemplo negativo: Las opciones de configuración del perfil están distribuidas de manera inconsistente en el menú de usuario. A veces se encuentran en un lugar diferente dependiendo de si el usuario está en su canal, en el menú de «ajustes» o en la página principal.

Propuesta de mejora: Unificar el acceso a las configuraciones de usuario en un solo menú para que los usuarios no se pierdan buscando las opciones de personalización.

5. Prevención de errores

Ejemplo positivo: Twitch muestra advertencias claras cuando un usuario intenta realizar una acción no permitida, como interactuar con un canal restringido.

Ejemplo negativo: Al hacer clic en el chat de un canal sin estar conectado, no siempre hay un mensaje claro que informe al usuario de que debe iniciar sesión para participar.

Propuesta de mejora: Incluir un mensaje emergente o un texto en el chat para informar al usuario de que debe iniciar sesión para interactuar.

6. Reconocimiento en lugar de recuerdo

Ejemplo positivo: Los videos que el usuario ha visto recientemente están fácilmente accesibles desde su página de inicio, lo que permite un acceso rápido sin tener que recordarlos.

Ejemplo negativo: Cuando un usuario visita un canal que sigue, no siempre es evidente si está en vivo o si hay nuevos videos disponibles, lo que puede generar confusión.

Propuesta de mejora: Colocar un indicador visual más destacado que indique si un canal está transmitiendo en vivo o si hay nuevo contenido en el canal.

7. Flexibilidad y eficiencia de uso

Ejemplo positivo: Twitch ofrece varias opciones de interacción para usuarios avanzados, como atajos de teclado para controlar el reproductor, y ajustes rápidos para cambiar la calidad del video.

Ejemplo negativo: En muchos casos, los espectadores solo pueden ver un stream en la calidad que el streamer ha configurado (por ejemplo, 1080p), sin opciones para reducir la resolución si tienen una conexión lenta. Esto limita la accesibilidad y la experiencia del usuario, ya que algunos pueden experimentar lag o buffering constante sin una alternativa para ajustar la calidad manualmente.

Propuesta de mejora: Permitir que todos los usuarios puedan elegir entre varias opciones de calidad de video, independientemente de si el streamer es afiliado o partner, asegurando una mejor experiencia para aquellos con conexiones más lentas.

8. Estética y diseño minimalista

Ejemplo positivo: El diseño de la interfaz es limpio y visualmente agradable, con un fondo oscuro que facilita la visualización del contenido sin distracciones.

Ejemplo negativo: En Twitch, los anuncios aparecen de forma automática durante los streams sin previo aviso, lo que interrumpe el contenido en momentos clave. A diferencia de otras plataformas que permiten «picture-in-picture» o pausas estratégicas, en Twitch el usuario pierde completamente lo que está ocurriendo en el stream durante la duración del anuncio. Esto puede ser especialmente frustrante en transmisiones de eSports o momentos importantes en los juegos.

Propuesta de mejora: Implementar un sistema de previsualización del anuncio donde los usuarios sean informados de cuándo se reproducirá un anuncio, permitir que los anuncios sean menos intrusivos, como una opción de «picture-in-picture», donde el stream continúe en una esquina mientras se muestra la publicidad, dar más control a los streamers para decidir cuándo insertar anuncios sin afectar la experiencia del espectador.

9. Ayudar a los usuarios a reconocer, diagnosticar y corregir errores

Ejemplo positivo: Si la transmisión no se carga correctamente, Twitch proporciona mensajes claros que explican que el video no está disponible o que hay un problema con la conexión.

Ejemplo negativo: Cuando un error de conexión o buffering ocurre, no siempre se ofrece información sobre la causa del problema, lo que puede dejar a los usuarios confundidos.

Propuesta de mejora: Proveer mensajes de error detallados, como información sobre la calidad de la conexión o la disponibilidad del servidor, y pasos sugeridos para corregir el problema.

10. Ayuda y documentación

Ejemplo positivo: Twitch tiene una sección de preguntas frecuentes y soporte técnico accesible desde su página de ayuda.

Ejemplo negativo: La ayuda no está fácilmente accesible desde todas las páginas de la plataforma. Por ejemplo, al ver una transmisión en vivo o cuando se navega por el chat, no hay un acceso rápido a la sección de ayuda..

Propuesta de mejora: Incluir un acceso rápido a la documentación de ayuda desde todas las páginas de Twitch, tal vez en el menú de usuario o en la barra lateral.

4. Priorización de Hallazgos según Gravedad

1. Falta de retroceso o reemisión en transmisiones en vivo: Limita la libertad del usuario al no poder acceder fácilmente a lo que se ha perdido en una transmisión en vivo.
   • Propuesta de solución: Implementar una función de «retransmisión» o retroceso en transmisiones en vivo.
2. Configuración inconsistente de opciones de perfil y ajustes: Frustra a los usuarios al tener que buscar configuraciones en diferentes lugares.
   • Propuesta de solución: Consolidar todas las configuraciones del perfil en un solo menú.
3. Mensajes de error poco claros cuando no hay conexión o hay buffering: Los usuarios no entienden siempre la causa de los problemas.
   • Propuesta de solución: Ofrecer mensajes de error más detallados con sugerencias para resolver el problema.
4. Aparición de anuncios de forma automática: Esto dificulta al espectador a seguir con el contenido, puesto que el contenido que se ofrece durante el anuncio se pierde.
   • Propuesta de solución: Dar la opción al creador de contenido a implantar el anuncio cuando considere oportuno y no crear contenido durante el anuncio para que el espectador no se pierda nada.
5. Interacciones no visibles para usuarios no registrados en el chat: Puede generar frustración en los usuarios que desean participar en el chat pero no están logueados.
   • Propuesta de solución: Mostrar un mensaje claro cuando un usuario no esté logueado y quiera interactuar en el chat.

5.  Conclusión

El análisis heurístico de Twitch ha revelado tanto puntos fuertes como áreas de mejora. La plataforma ya ofrece una gran experiencia para la mayoría de los usuarios, pero algunos aspectos, como la falta de retroceso en transmisiones en vivo y la configuración dispersa, pueden mejorar significativamente la usabilidad. Implementando las propuestas de mejora, Twitch podría ofrecer una experiencia aún más fluida y accesible para su gran base de usuarios.

Arquitectura de la Información - Aula 1

Pública

Escenario y User Journey para app

Hola a todos, os presento un escenario del usuario Marc y su user journey. He elegido este escenario porque considero que es una situación cotidiana para una investigador y profesor de universidad, y pone en gran valor la usabilidad de la aplicación para móvil de la Biblioteca de Catalunya.

Escenario: Acceso rápido a documentos digitalizados durante un viaje en tren.

• Planteamiento : Marc viaja en tren hacia otra ciudad para asistir como oyente a un congreso de historia medieval. La tarde transcurre tranquila, y mientras observa el paisaje por la ventana, recibe un correo inesperado de los organizadores del evento. Le preguntan si podría hacer una breve intervención sobre su última investigación, ya que varios asistentes están interesados en su trabajo. El congreso es a primera hora de la mañana, y aunque conoce bien su investigación, necesita reforzar algunos puntos con fuentes documentales para estructurar su intervención. Como no lleva consigo todos sus apuntes, decide aprovechar el trayecto para acceder a los archivos digitalizados de la Biblioteca de Catalunya.
• Acción: Saca su móvil y abre la app de la biblioteca. Utiliza la búsqueda avanzada, aplicando filtros por tema y fecha, y en pocos segundos encuentra un manuscrito medieval clave que respalda su teoría. Lo abre en el visor digital y extrae una cita relevante. Para asegurarse de que no perderá el acceso, guarda el documento en su biblioteca personal dentro de la app. Mientras el tren sigue su recorrido, Marc estructura su intervención con base en la documentación obtenida. Sabe que, sin la app, encontrar esta información le habría llevado demasiado tiempo o habría tenido que esperar hasta llegar a su despacho.
• Desenlace: Ahora, con su presentación lista, puede relajarse y prepararse para el congreso con total tranquilidad.

A continuación presento el user journey asociado al escenario:

User journey: Acceso rápido a documentos digitalizados durante un viaje en tren.

Espero que os guste, un saludo.

Jessica Valdés.