Diseño de carrusel horizontal

El carrusel horizontal presenta cada sección como una fila de tarjetas que los clientes deslizan de lado. Se adapta bien a secciones seleccionadas con fotografía cuidada, y es el diseño que más se asemeja a un escaparate.

Cómo se ve

  • Una fila horizontal por categoría, con el nombre de la categoría encima.
  • Cada elemento es una tarjeta con su imagen, nombre y precio.
  • Los clientes deslizan de lado dentro de una sección y se desplazan hacia abajo entre secciones.
  • La navegación entre categorías salta entre filas.

Cuándo funciona

  • Secciones con un puñado de elementos: de cinco a quince por fila.
  • Fotografía completa y coherente.
  • Menús donde las secciones son la historia: cócteles de autor, postres, una selección del chef.
  • Sitios que quieren que el menú parezca seleccionado y no exhaustivo.

Cuándo no funciona

  • Secciones largas. Una fila de cuarenta tarjetas es una mala manera de leer cuarenta elementos: los clientes no deslizarán tanto.
  • Fotografía incompleta. Las tarjetas tienen el mismo tamaño haya imagen o no.
  • Menús que se consultan para buscar un elemento concreto.
  • Comparar precios a lo largo de toda una sección.

La regla de la fila

Un cliente desliza dos o tres tarjetas y luego se desplaza. Todo lo que quede más allá de la cuarta o quinta tarjeta de una fila queda, en la práctica, oculto.

Esto tiene una consecuencia directa sobre cómo construyes el menú: pon primero en cada sección el elemento que más quieres que se pida, y divide las secciones largas en dos categorías en lugar de una única fila larga.

Fotografía

Las tarjetas son visuales por naturaleza:

  • una imagen por elemento;
  • una sola orientación en todo el carrusel: mezclar retrato y apaisado arruina una fila;
  • encuadre y distancia coherentes, para que las tarjetas parezcan un conjunto;
  • evita imágenes donde el plato ocupe una parte pequeña del encuadre.

Las secciones como unidad de diseño

Este es el diseño donde más importa la estructura de categorías. Como cada categoría es una fila, el número y el orden de las categorías dan forma al menú.

Busca:

  • de cinco a ocho categorías;
  • de cinco a quince elementos cada una;
  • la sección más comercial primero.

Cargar menús largos

Las filas se cargan progresivamente a medida que los clientes avanzan por el menú, de modo que un menú grande no tiene que llegar entero de golpe. Aun así, pruébalo con una conexión de móvil real: un carrusel de imágenes grandes es el más pesado de los cinco diseños.

Compruébalo en un móvil

  • [ ] El deslizamiento es fluido y se detiene limpiamente en una tarjeta.
  • [ ] El texto de la tarjeta se lee bien sobre la imagen.
  • [ ] Los precios se ven en la tarjeta sin abrir el elemento.
  • [ ] Cada fila tiene suficientes elementos para justificar ser una fila.
  • [ ] Ninguna fila es tan larga que su final resulte inalcanzable en la práctica.
  • [ ] Las imágenes son coherentes en orientación en todas las filas.
  • [ ] La navegación entre categorías llega a todas las filas.
  • [ ] Las imágenes cargan con la suficiente rapidez en una mesa.