Experiencia de lectura

Diseñar un catálogo digital fácil de leer en el móvil

Planificar la jerarquía de productos, densidad de página y botones, a continuación, probar un catálogo digital en los teléfonos sin requerir aumento constante.

En este artículo
  1. Elija la tarea principal
  2. Reducir la densidad sin perder detalles útiles
  3. Establecer una jerarquía visual coherente
  4. No dependa de diseños de dos páginas
  5. Ensayo con tareas específicas
  6. Compruebe la página de conexión y los alrededores
  7. Ofrecer una ruta alternativa

Un catálogo puede encajar en una ventana sin sentirse cómodo para leer. Reducir una página fija a la anchura de la pantalla también reduce sus letras. El zoom es útil, pero la ampliación repetida de cada precio o descripción hace que la comparación sea más lenta. Por lo tanto, el diseño móvil comienza con la jerarquía de la información, no sólo con la presencia de un control de zoom.

Considere una colección de accesorios para el hogar cuyo folleto original coloca cuatro productos en cada página, con fotografías, descripciones y variantes. Una edición telefónica no necesita necesariamente una identidad visual diferente. Se necesita una decisión clara sobre qué elementos pertenecen y cuáles deben separarse para facilitar la elección.

Ejemplo de diseño: una prioridad clara reduce la densidad en comparación con una página de escritorio simplemente reducida.
Ejemplo de diseño: una prioridad clara reduce la densidad en comparación con una página de escritorio simplemente reducida. Ampliar el esquema

Elija la tarea principal

Pregunte qué lectores deben lograr en los primeros treinta segundos. ¿Están explorando una colección, buscando un artículo visto previamente o comprobando un precio? Cada objetivo sugiere una ruta diferente. Una apertura fotográfica puede fomentar la exploración; nombres reconocibles de categorías y una página de contenido ayudan a las personas que buscan algo específico.

No pida una sola página para contar la historia de la empresa, listar cada variante y recoger una consulta de ventas a la vez. Dar a cada sección un propósito primario. Para la colección de accesorios, una fotografía interior podría introducir la gama, las familias de productos la organizan, y las entradas individuales proporcionan los detalles necesarios para la comparación.

Reducir la densidad sin perder detalles útiles

Si cuatro entradas se vuelven ilegibles, pruebe dos o una por página. Más páginas pueden ser aceptables cuando cada paso se hace más claro. Esta no es una regla automática: una secuencia excesivamente larga puede dificultar el retorno a un elemento. Equilibrar el ritmo con una página de contenido utilizable y nombres de productos reconocibles.

Retire la repetición y la decoración antes de eliminar la información necesaria para una decisión. Un mensaje promocional compartido por cada artículo puede pasar a la introducción. Las dimensiones, los materiales y las diferencias de variantes deben mantenerse cerca de la fotografía pertinente. Esto ahorra espacio sin obligar a los lectores a buscar en otro lugar lo que importa.

Establecer una jerarquía visual coherente

Use una secuencia predecible en cada entrada: nombre, imagen, características, precio cuando corresponda y siguiente acción. Mantenga las etiquetas cerca de sus valores y deje claro qué descripción pertenece a qué producto. La alineación y el espacio entre grupos a menudo ayudan más que una colección de bordes de estilo diferente.

Hacer etiquetas de botones explican sus destinos

"Detalles de jarrón cerámico" es más claro que varios botones indistinguibles de "Clic aquí". Deje espacio entre objetivos interactivos y confirme que el área activa coincide con el botón visible. En una publicación importada de PDF, el botón impreso puede ser sólo obras de arte. Pon a prueba su comportamiento real en el visor final de documentos en lugar de asumir que su apariencia demuestra que funciona.

No dependa de diseños de dos páginas

Una composición de dos páginas puede trabajar en un monitor. Un teléfono puede mostrar una página a la vez o un diseño de dos páginas muy reducido, dependiendo del visor de documentos. Evite dividir oraciones entre páginas, separando los precios de sus fotografías o usando referencias comprensibles sólo cuando el diseño completo de dos páginas es visible.

Dele a cada página suficiente contexto para estar solos. Si una imagen panorámica se extiende a través de dos páginas, no la convierta en la única fuente de información esencial. Proporcione un título comprensible en cualquiera de las páginas y compruebe cómo se comporta la transición con el teléfono mantenido verticalmente.

Ensayo con tareas específicas

Preguntar si a alguien le gusta el diseño produce una opinión estética, no evidencia de usabilidad. En su lugar, pídales que encuentren un artículo por debajo de un tamaño particular, comparen dos materiales o abra una página del producto. Observen dónde se detienen y qué gestos deben repetir.

Para una comprobación inicial, confirme que:

  • Los nombres y descripciones de productos no requieren un aumento constante.
  • Los lectores entienden cómo avanzar y volver a los contenidos.
  • Los botones se distinguen de la decoración.
  • Los destinos externos son predecibles.
  • Los lectores pueden regresar a su lugar después de seguir un enlace.

Anote los obstáculos observados antes de revisar el diseño. Un nuevo esquema de color no resolverá un problema causado por las letras que es demasiado pequeño. Los cambios deben abordar la dificultad específica observada.

Compruebe la página de conexión y los alrededores

Un catálogo puede abrirse directamente o dentro de una página web. Pon a prueba ambos arreglos. Un iframe corto puede dejar poco espacio para los controles, y elementos superpuestos pueden cubrir la navegación. Pruebe las orientaciones verticales y horizontales, recordando que muchas personas no rotarán sus teléfonos a menos que la razón sea clara.

También pruebe una visita inicial que no dependa únicamente de recursos en caché. No es necesario inventar una promesa de carga universal; establecer si la ruta prevista es utilizable bajo las condiciones normales del público. Si las imágenes son pesadas, siga la Guía de reducción de tamaño de archivo antes de comprimir todo indiscriminadamente.

Ofrecer una ruta alternativa

Un enlace de tienda, una página HTML con los detalles principales o un documento descargable cuidadosamente preparado pueden ayudar a los lectores que luchan con el visor de documentos. No todo el mundo quiere navegar por las páginas, y no todo el mundo puede utilizar cómodamente la misma interfaz. Etiquetar las alternativas claramente en lugar de ocultarlas en un menú desconocido.

FLIPBOOKPRO proporciona herramientas de previsualización y publicación, pero todavía necesita probar la publicación exportada. Un modo de vista previa no es un sustituto para comprobar la salida pública en un teléfono. La lista de verificación de la publicación ayuda a organizar esa revisión final. Una edición móvil exitosa preserva información importante al tiempo que reduce las acciones necesarias para entenderla, en lugar de simplemente reducir un diseño de escritorio.

Documentación adicional

¿Has encontrado un error o un pasaje poco claro? Contacta con FLIPBOOKPRO, indicando la dirección del artículo y el pasaje correspondiente.

Criterios editoriales · Quién gestiona el proyecto