Revisión responsive

Cada menú de Fenómenus se lee en un teléfono, en una mesa, con la iluminación de esa sala. Esta es la revisión que decide si el diseño funciona — y no puede hacerse en un ordenador de sobremesa.

Prepara la prueba correctamente

  1. Usa un teléfono real, no la vista previa de dispositivo de un navegador de escritorio.
  2. Usa una ventana de navegación privada, para que estés sin sesión iniciada y ninguna lista de filtros o de favoritos anterior distorsione lo que ves.
  3. Usa la red propia del restaurante y después los datos móviles, para que veas ambas situaciones.
  4. Ponte de pie o siéntate donde se sientan los comensales, con la iluminación real de la sala.
  5. Prueba en un teléfono pequeño y en uno grande si puedes.

La prueba de lectura

Abre el menú y compórtate como un comensal:

  • [ ] El menú se abre con la rapidez suficiente como para que no dejes el teléfono.
  • [ ] Puedes leer los nombres de los platos y los precios sin hacer zoom.
  • [ ] Puedes encontrar un plato concreto en menos de quince segundos.
  • [ ] Puedes comparar dos precios sin perder el sitio.
  • [ ] Puedes llegar a cada sección desde la navegación de categorías.
  • [ ] Puedes llegar a otro menú desde la barra de contacto.
  • [ ] Puedes volver a donde estabas.

Cualquier «no» es un problema de diseño, no un problema del comensal.

Comprobaciones específicas de cada diseño

Diseño Qué mirar
Vertical Texto legible sobre cada imagen; precio visible sin necesidad de desplazarse más
Price list Columna de precio sin chocar con nombres largos; precios en varios formatos distinguibles
Horizontal carousel Filas no tan largas que su final resulte inalcanzable; tarjetas que se detengan limpiamente
Masonry Alturas de tarjeta razonablemente uniformes; sin imágenes de sustitución
Swipe Un plato concreto aún localizable con un número razonable de deslizamientos
Menu design 1 / 2 El menú completo legible de un solo desplazamiento; bloques claramente separados

Controles e interacción

  • [ ] La barra de contacto no tapa la parte inferior del contenido.
  • [ ] La barra es alcanzable con una sola mano.
  • [ ] La navegación de categorías se desplaza con fluidez cuando hay muchas secciones.
  • [ ] El filtro de alérgenos se abre, se aplica y se puede borrar.
  • [ ] Los favoritos se pueden guardar y revisar, si están activados.
  • [ ] El selector de idioma llega a todos los idiomas y vuelve, si está activado.
  • [ ] Nada importante queda debajo de las barras del propio navegador del teléfono.

Legibilidad

  • [ ] El contraste es suficiente con la iluminación real de la sala, no en una oficina.
  • [ ] Los iconos de alérgenos se pueden descifrar a su tamaño real.
  • [ ] Los iconos de precio se distinguen entre sí.
  • [ ] La marca de destacado es visible sin resultar estridente.
  • [ ] Los nombres largos de los platos se ajustan de forma sensata en lugar de truncarse creando ambigüedad.

Rendimiento

  • [ ] La primera pantalla aparece rápido con datos móviles.
  • [ ] Las imágenes no van apareciendo una a una después del texto.
  • [ ] El desplazamiento es fluido a través de una sección larga.
  • [ ] Los vídeos no se reproducen automáticamente con sonido.

Idiomas

Repite las comprobaciones esenciales en cada idioma publicado. El texto traducido tiene una longitud diferente, y los nombres de platos en alemán o en ruso romperán un diseño que solo ha visto nombres en español.

Después revisa el escritorio

Los comensales leen a veces el menú en un portátil antes de reservar. Basta con una pasada rápida:

  • [ ] El contenido no se estira hasta una longitud de línea ilegible.
  • [ ] Las imágenes no se escalan más allá de su calidad.
  • [ ] La navegación y la barra siguen teniendo sentido con un ratón.

Cuándo realizar esta revisión

  • Antes del lanzamiento, en cada tipo de menú.
  • Después de cambiar un diseño, una paleta o un conjunto de iconos.
  • Después de añadir un idioma.
  • Después de cualquier importación masiva, que puede cambiar sustancialmente la longitud de las secciones.
  • Periódicamente, porque los menús crecen y un diseño que funcionaba con veinte elementos puede no hacerlo con ochenta.