Cómo mejorar una página web de libros: análisis y propuesta del rediseño de la Editorial Akal

Me he propuesto rediseñar la ficha de los libros de la editorial Akal. El punto de partida fue un tuit de Ediciones IPS que afirmaba que las búsquedas del Manifiesto comunista en redes habían aumentado un 5000 %. Sin entrar a valorar esa cifra, acabé en la web de Akal y me encontré con una ficha que, a los que ya tenemos cierta presbicia, nos hace sufrir un poco.

Va por delante que se trata de una propuesta independiente. La intención es hacer un ejercicio práctico: ver qué se puede mejorar en la ficha de un libro de una editorial española y qué merece quedarse como está. Porque rediseñar páginas web también implica reconocer lo que funciona.

Voy a repasar cómo se aprovecha el espacio, cómo se presenta el contenido y qué información recibe el lector antes de decidir si compra el libro. A partir de ese análisis, propondré un rediseño que facilite la lectura, ayude a encontrar los datos importantes y permita comprar con menos dudas.

Aunque el ejemplo sea un libro (sí, he utilizado un libro que ahora, por la situación social, tiene más alcance…), muchas de estas mejoras se pueden aplicar a otras tiendas online. La necesidad de presentar bien un producto y resolver las dudas del cliente es común a muchos sectores.

Qué debe resolver una ficha de libro o producto

Una ficha de libro debe responder varias preguntas sin obligar al lector a recorrer toda la página buscando los datos:

• ¿Qué voy a encontrar dentro del libro?
• ¿Qué edición estoy mirando?
• ¿Cuánto cuesta el libro?
• ¿Dónde y cómo puedo comprar este ejemplar?

En un libro como el Manifiesto comunista, tan conocido y publicado por distintas editoriales, el título y el autor no bastan para decidir. El lector tiene múltiples opciones disponibles a un par de clics. Así que debemos mostrar qué aporta nuestra edición para que pueda elegirla frente a las demás.

Deberíamos resaltar, por ejemplo, quién firma la traducción. En obras antiguas podemos encontrar versiones con un lenguaje que hoy resulta anticuado y otras con errores de traducción. Son cuestiones que pueden influir en la elección de una edición u otra. Por eso, en un libro como este, considero importante identificar al traductor.

Además de lo indicado, también sería necesario indicar si el libro incluye un prólogo o notas, cuántas páginas tiene y en qué formatos está disponible. La ficha debe permitir identificar la edición y valorar si es la que buscamos.

Otra posibilidad es ayudar a explorar el libro antes de comprarlo. Ofrecer una muestra permite que el lector valore si la obra responde a lo que busca.

La sinopsis ofrece una primera orientación. Podemos complementarla con un índice, un fragmento de lectura o imágenes del interior, recursos que ayudan a resolver dudas que el texto comercial deja abiertas.

Si esos recursos están disponibles, conviene destacarlos para que el lector los encuentre fácilmente.

Por último, el lector necesita saber cuánto cuesta el formato elegido, si está disponible y cuáles son las condiciones de envío. El botón de compra debe verse con claridad. Las opciones para comprar el libro deben distinguir claramente entre libro impreso y ebook. Si también se ofrece la posibilidad de encontrarlo en librerías, esa alternativa debe ser fácil de localizar.

Estas serán las referencias para analizar la ficha de Akal y valorar el rediseño: identificar la edición, explorar su contenido y facilitar la compra.

El punto de partida: la ficha original de Akal

El punto de partida es la ficha del Manifiesto comunista en la web de Akal, cuya captura aparece a continuación. Encontrarás el enlace al final del artículo, junto con las demás fuentes.

La web actual de la Editorial Akal puedes observarla en la imagen.

La captura permite estudiar cómo se presenta el libro: qué elementos destacan, cómo se distribuye la información, qué tamaño tiene el texto y dónde aparecen las opciones de compra. También permite detectar posibles problemas de contenido, como erratas o datos que no encajan entre sí.

También habría que revisar la cabecera y la navegación por el espacio que ocupan y su relación con el contenido.

Otras cuestiones necesitan una comprobación directa en la web: si los enlaces funcionan, cómo se cambia de formato, qué ocurre al añadir el libro al carrito o cómo se adapta la ficha a una pantalla móvil. Para revisar estos aspectos no hace falta acceder a datos internos. Comprobar si el rediseño de la página web facilita las tareas requiere pruebas con usuarios; evaluar su efecto en las ventas exige además datos de navegación y compra. La experiencia diseñando páginas web ayuda a detectar problemas y proponer soluciones que después habrá que comprobar.

Los aciertos que merece la pena conservar

La ficha de Akal contiene información y recursos que merece la pena conservar. Parte del trabajo será dar más visibilidad a lo que ya ofrece y organizarlo para que resulte más fácil de consultar.

La identidad de la editorial es uno de esos elementos. El logotipo, los colores y la portada sitúan al lector en el catálogo de Akal. Se puede mejorar la distribución de la página manteniendo ese carácter reconocible.

También destaca la cantidad de información bibliográfica: ISBN, número de páginas, dimensiones, fecha de publicación, idioma y formato. Son datos útiles para distinguir una edición de otra y conocer las características del ejemplar. Merece la pena conservar esa información y mejorar su presentación.

Los enlaces a autores, traductor, colección y materias permiten seguir explorando el catálogo. Las biografías incluidas en la propia ficha aportan contexto sin obligar al lector a buscarlo fuera de la página.

Otro acierto son los recursos del libro: la descarga de la portada en alta calidad, el índice y las imágenes interiores. Sirven a distintos públicos, desde quien quiere examinar el libro antes de comprarlo hasta quien necesita material para una reseña.

Por último, la ficha ofrece compra directa y una vía para encontrar el libro en librerías. Ambas opciones merecen conservarse. El recuadro de compra ya diferencia el precio y el botón de añadir al carrito; habrá que revisar su posición y cómo presenta los formatos disponibles.

Dónde aparecen las dificultades

La ficha reúne mucha información útil, pero el tamaño del texto, el reparto del espacio y la posición de algunos elementos dificultan su consulta. De hecho, el tamaño de letra al navegar con un teléfono móvil ha sido lo que ha generado la necesidad de elaborar este análisis de la página web de la Editorial Akal.

Estos son los puntos que revisaría

La cabecera ocupa demasiado espacio. Hay dos barras de navegación y el logotipo aparece repetido. Mientras tanto, el buscador queda relegado a un campo pequeño y poco destacado. En una web editorial, buscar un título o un autor debería ser una de las acciones más fáciles de localizar.

En la imagen siguiente tienes la propuesta con el mismo tamaño. Como puedes comprar, cabe mucho más  contenido en el mismo espacio. Luego compararemos cada una de ellas.

Al reducir el tamaño, permitimos que en dispositivos móviles se vea mejor la información sin tener que desplazar la pantalla. Esto es algo importantísimo en pantallas pequeñas.

Los tamaños del texto están desequilibrados. Encabezados como «Comprar en librerías» o «Sobre Karl Marx» tienen mucho peso visual, mientras que la sinopsis y los datos bibliográficos se presentan con una letra pequeña. Algunos textos grises también resultan poco legibles sobre el fondo blanco.

Para determinar si el contraste es suficiente habría que medirlo. El criterio de contraste mínimo de las WCAG 2.2 ofrece una referencia para esa comprobación. La captura permite señalar el problema de lectura, pero no acreditar un incumplimiento.

La distribución agrava ese desequilibrio. Hay valores de la ficha técnica que se parten en varias líneas dentro de una columna estrecha, mientras queda espacio libre en otras zonas. También aparece un hueco amplio entre la sinopsis y los datos bibliográficos. El espacio disponible podría aprovecharse para dar más anchura y claridad al contenido.

La compra queda por debajo de la sinopsis. El recuadro se distingue visualmente, pero su posición retrasa el acceso al precio y al botón. En la captura no se ve información sobre disponibilidad, plazos o gastos de envío junto a ellos. Esto no permite concluir que la web carezca de esa información; la observación se limita a cómo se presenta en la pantalla analizada.

Los formatos tampoco se presentan de forma equivalente: «Rústica» encabeza el recuadro y el ebook aparece como una opción secundaria con su precio. Una presentación conjunta ayudaría a comparar ambas alternativas. El precio sin IVA añade otra cifra que compite con el importe que debe pagar el comprador.

El contenido también necesita una revisión. En la sinopsis aparece «1848,es», sin espacio después de la coma. Se repiten etiquetas y datos en la ficha técnica, y en la captura sigue apareciendo un botón de Google+ que lleva años desaparecida. Son detalles pequeños por separado, pero visibles en una página cuya función es presentar y vender una edición cuidada.

La propuesta de rediseño, decisión por decisión

El rediseño empieza por reorganizar la página: reunir la información necesaria para elegir y comprar la edición, dar espacio a la lectura y ordenar los recursos complementarios.

Una cabecera más compacta y un buscador visible

Propongo agrupar el logotipo, la navegación principal, el buscador y el carrito en una sola cabecera. Los enlaces institucionales, como los destinados a manuscritos o distribuidores, pueden trasladarse al pie, donde seguirían siendo accesibles.

El buscador ganaría espacio y una identificación clara. Quien llegue con un título o un autor en mente debería encontrarlo sin tener que examinar toda la navegación.

Debajo incorporo una ruta de navegación con esta secuencia: Inicio / Catálogo / Autor / Título del libro. En una navegación jerarquizada, correspondiendo a las categorías existentes reales.

Portada, edición y compra en un mismo bloque

La portada conservaría una posición destacada, junto al título, los autores y los responsables de la edición. El tamaño de la imagen debe permitir reconocer el libro sin desplazar excesivamente el resto de la información.

En ese mismo bloque situaría la elección de formato, el precio y las opciones de compra. Rústica y ebook se presentarían como alternativas comparables, con una indicación clara de cuál está seleccionada. Al cambiar de formato, tendrían que actualizarse el precio y los datos que correspondan a cada versión.

El precio final sería la cifra principal. La información fiscal adicional, si resulta necesaria para otros compradores, tendría una presencia secundaria.

Junto al botón de compra reservaría espacio para la disponibilidad y las condiciones de envío. Estos datos tendrían que proceder de la tienda: una maqueta puede mostrar dónde irían, pero no debe inventar existencias ni prometer entregas.

La investigación de Baymard Institute sobre gastos de envío en fichas de producto respalda que el comprador pueda consultar ese coste desde la propia ficha, antes de iniciar el proceso de compra.

El enlace para encontrar el libro en librerías permanecería cerca de la compra directa, como una alternativa fácil de localizar.

Una sinopsis que se pueda leer con comodidad

La sinopsis ocuparía un bloque propio debajo de la presentación del libro. Aumentaría el tamaño del texto y el interlineado, ajustando también la anchura de la columna para evitar líneas excesivamente largas.

Aumentar la letra exige revisar el espacio que la contiene. Si se mantiene una columna demasiado estrecha, el texto se fragmenta y la página se alarga innecesariamente.

También corregiría las erratas y revisaría la presentación de cursivas, siglos y signos especiales. El contenido editorial merece el mismo cuidado en la web que en el libro.

Datos bibliográficos completos y mejor ordenados

Mantendría la ficha técnica, agrupada bajo un encabezado claro como «Detalles de esta edición». Las etiquetas y los valores tendrían suficiente contraste y espacio para leerse sin saltos de línea innecesarios.

Reuniría a los dos escritores bajo «Autores» y revisaría las aparentes duplicidades entre colección y serie antes de eliminar ningún dato. Dos campos que coinciden en este libro podrían tener funciones distintas en otros títulos del catálogo.

Los enlaces a autores, traductor, colección y materias se conservarían.

Recursos con nombres que expliquen qué ofrecen

La consulta del interior estaría cerca de la portada. La descarga de imágenes en alta calidad podría agruparse en una zona de recursos para prensa y reseñas.

El enlace «Ver contenido» abre un PDF con el índice de esta edición. Lo cambiaría por «Ver índice» para que el lector sepa qué va a consultar antes de pulsar. El nombre debe anticipar lo que encontrará el lector.

Las biografías quedarían después de la información del libro, con encabezados proporcionados al resto de la página. Retiraría los elementos obsoletos y revisaría la utilidad de los botones de compartir antes de reservarles espacio.

El antes y el después: qué cambia en la ficha

El cambio principal está en la organización de la información. En la ficha original, la sinopsis precede al bloque de compra. En la propuesta, el título, los autores, la traducción, los formatos y el precio se reúnen junto a la portada. La descripción del libro queda debajo, con un espacio propio.

La cabecera también se simplifica. El logotipo aparece una sola vez en la parte superior y el buscador ocupa una posición central. Los enlaces institucionales pasan al pie, mientras que la navegación principal se concentra en el catálogo, los autores y las secciones editoriales.

Rústica y ebook aparecen al mismo nivel, cada uno con su precio y con una indicación del formato seleccionado. La compra directa y la búsqueda en librerías quedan juntas. También se incorporan accesos a disponibilidad, entrega, gastos de envío y devoluciones; la maqueta muestra su ubicación, aunque no permite consultar esas condiciones.

Debajo, «Sobre el libro» y «Detalles de esta edición» separan la descripción de los datos bibliográficos. La ficha técnica presenta etiquetas y valores en dos columnas, evitando que algunos datos queden partidos en varias líneas como en la original.

Los recursos se distribuyen según su función: la exploración del libro y las imágenes interiores acompañan a la portada; la descarga en alta calidad queda en «Recursos de prensa». Los autores mantienen su espacio y los enlaces para consultar sus libros.

La maqueta también deja un punto pendiente: conservar toda la información útil de la ficha original. La sinopsis, las biografías y los datos bibliográficos aparecen resumidos. Esa simplificación ayuda a mostrar la distribución propuesta, pero una versión definitiva tendría que permitir acceder al contenido completo.

7. Lo que una maqueta no demuestra

Una maqueta permite valorar la distribución y la presentación del contenido. No demuestra por sí sola que la página funcione mejor ni que vaya a vender más.

La adaptación móvil necesita su propia revisión. Hay que comprobar el orden de los bloques, la legibilidad, la selección de formatos y la facilidad para comprar en una pantalla estrecha. Reducir el diseño de escritorio no resuelve esas decisiones. Así que aquí está la propuesta para dispositivos móviles.

La accesibilidad también requiere comprobaciones sobre la página implementada: contraste, navegación con teclado, identificación de controles, ampliación del texto y lectura mediante tecnologías de apoyo.

El rendimiento y el funcionamiento real quedan igualmente fuera de una imagen. Habría que probar la carga de portadas y recursos, el buscador, los enlaces, el cambio de formato y el carrito.

Para comprobar la facilidad de uso, plantearía tareas concretas a varios lectores: identificar al traductor, encontrar el índice, consultar el precio de otro formato o averiguar las condiciones de envío. Observar dónde dudan y qué errores cometen permitiría ajustar la propuesta.

Cualquier afirmación sobre un aumento de las ventas necesitaría datos de uso y compra, además de una comparación que tuviera en cuenta otros factores, como el tráfico o las promociones, obteniendo datos de Google Analytics, Bing y medición de herramientas de analítica web.

Por dónde empezaría una editorial o librería

Empezaría por corregir el contenido y resolver las dificultades más próximas a la lectura y la compra. Son cambios que pueden abordarse antes de renovar toda la web.

El orden sería este:

1. Revisar textos, datos y enlaces: corregir erratas, retirar elementos obsoletos y comprobar etiquetas, recursos y posibles duplicidades. Hoy en día, la revisión ortográfica se puede realizar de manera bastante sencilla con IA. Si queremos revisar los enlaces rotos y similares, podríamos usar, por ejemplo, Screaming Frog.
2. Mejorar la legibilidad: revisar tamaño tipográfico, contraste, interlineado y anchura de los bloques de texto conforme a criterios de legibilidad y accesibilidad. Como referencia, utilizar cuerpos de 16–18 px, un interlineado de al menos 1,5 y líneas de no más de 80 caracteres, evitando bloques excesivamente anchos, especialmente en la sinopsis y la ficha técnica.
3. Aclarar la compra: presentar los formatos de forma coherente y reunir precio, disponibilidad y condiciones relevantes junto a la acción de compra.
4. Reorganizar la estructura: simplificar la cabecera, destacar el buscador y redistribuir los bloques cuando los cambios requieran intervenir en la plantilla.
5. Comprobar el resultado: revisar móvil, accesibilidad y funcionamiento, y observar si los lectores completan las tareas con menos dificultades.

Si la ficha se utiliza como plantilla para todo el catálogo, cada cambio debe probarse con libros distintos: títulos largos, varios autores, ediciones con muchos recursos y productos disponibles en diferentes formatos. Una solución que encaja con el Manifiesto comunista también tiene que funcionar con el resto del catálogo.

¿Qué opinas? ¿Te gusta el rediseño? ¿Estarías dispuesto a cambiar tu web por una de mis propuestas? Contáctame y lo hablamos.

Fuentes

• Editorial Akal: ficha del Manifiesto comunista. Página analizada, información bibliográfica y recursos de la edición.
• Editorial Akal: índice del Manifiesto comunista. Documento enlazado desde la ficha mediante «Ver contenido».
• W3C: Understanding Success Criterion 1.4.3 — Contrast (Minimum). Referencia para evaluar el contraste entre el texto y su fondo.
• Baymard Institute: Product Pages Need to Show “Estimated Shipping Costs”. Investigación sobre la consulta de los gastos de envío desde la ficha de producto.
• Ediciones IPS: publicación que dio origen al artículo. Se incluye como contexto inicial; la cifra del 5000 % no se ha verificado en este análisis.

El tuit de Ediciones IPS que motivó este ejercicio promociona su propia edición del libro. La ficha analizada en el artículo corresponde a la edición de Akal.