Diseñando una interfaz para una página de pedidos de comida
Cómo equilibrar opciones potentes y usabilidad en el móvil
- Publicado
- Actualizado
- (creado )
- Escrito por
- Willem L. Middelkoop
- Temas
- crear · diseño · lemmid-store · programación · smartphone · web · diseño web · trabajo
- Versión humana de este artículo
- https://willem.com/es/2020-05-01_disenando-una-interfaz-para-una-pagina-de-pedidos-de-comida/
- English
- Designing an interface for a food ordering page
- Nederlands
- Een interface ontwerpen voor een bestelpagina voor eten
- Deutsch
- Gestaltung einer Benutzeroberfläche für eine Bestellseite (Essen)
- Français
- Concevoir l'interface d'une page de commande de repas
- Italiano
- Progettare un'interfaccia per una pagina di ordinazione di cibo
- Português
- Desenhar uma interface para uma página de pedidos de comida
- Papiamentu
- Desèñá un interface pa un página pa pidi kuminda
- Frysk
- In ynterface ûntwerpe foar in bestelside foar iten
- Idiomas
- Traducido del original en inglés por un modelo de lenguaje en dos pasadas (traducción y corrección) con un glosario y un corrector ortográfico; aún no revisado por un hablante nativo.
Resumen
Las páginas de pedidos online son más importantes que nunca. El COVID-19, los confinamientos que trajo y las normas de distanciamiento social han dejado clara la necesidad de una buena interfaz de usuario en las tiendas online. ¡Y es sorprendentemente difícil acertar!
Texto completo
El reto: pedidos de comida online
Quizá no lo pienses cuando eliges tu pizza o tus patatas fritas en tu restaurante de comida para llevar favorito, pero pedir comida es bastante difícil desde el punto de vista del diseño de la interfaz de usuario. Hay que tener en cuenta:
- la personalización del producto: por ejemplo, ofrecer distintas salsas, guarniciones, ingredientes extra y tamaños
- la validación de las personalizaciones: algunas exigen una respuesta (como ¿cómo quieres el filete: poco hecho, al punto o muy hecho?), mientras que otras admiten más variación (como elegir "un máximo de 5 ingredientes para la pizza")
- las variantes múltiples: alguien debería poder pedir dos pizzas iguales, pero con ingredientes distintos
Además, hay que tener en cuenta que alrededor del 80% de toda esta interacción se hace en una pantalla muy pequeña. Eso limita el espacio para botones, conmutadores e interruptores. Es difícil acertar, y no me sorprendió ver que muchas apps y páginas de pedidos existentes no lo resuelven con elegancia.
¡Los retos complejos se abordan con bocetos!
Cuando me enfrento a un reto de diseño complejo, suelo empezar haciendo bocetos. Uso una tableta como ordenador principal, que me permite explorar ideas dibujándolas. Por supuesto, también puedes usar papel de toda la vida. Lo importante es poner tu pensamiento en imágenes, porque así salen a la luz las posibilidades y las limitaciones de tu idea.
El boceto de arriba muestra mi idea inicial para la interfaz. Hay una imagen, un título, la descripción del producto, el precio, botones de más y menos y un recuadro con el número de unidades que llevas. Puede parecer un buen comienzo (y sencillo), pero el diseño tiene fallos:
- algunos productos no tendrán imagen, y si la interfaz es una lista, el texto quedará alineado de forma rara
- algunos productos tienen títulos y descripciones largos, y el diseño tiene que admitir que el texto ocupe varias líneas
- este diseño ignora por completo las personalizaciones del producto (como elegir un ingrediente o una salsa)
Haz el boceto en el contexto de un smartphone y enseguida verás dónde falla tu diseño. En el segundo boceto (arriba) solo hay dos productos en la página de pedido, y aun así el número de botones visibles (más y menos) ya es el doble. Mostrar siempre varios botones por producto es claramente una mala idea, sobre todo si hay muchos productos.
Pensar como en el mundo real: interacción en dos pasos
Para dar con algo más elegante, intenté imaginar cómo pido la cena en un restaurante de verdad. Descubrí que el camarero resuelve una parte importante del puzle: responde a tu elección con preguntas específicas del producto. Por ejemplo, cuando pido un filete, el camarero me pregunta cómo lo quiero.
La clave es que solo se hacen las preguntas relevantes para lo que has elegido. Esto ayuda cuando dos personas (en la misma mesa) piden el mismo producto: el trato personal permite personalizaciones distintas para cada una.
Si intentas trasladar esta interacción en dos pasos a una interfaz de usuario, puedes diseñar un modo lista/detalle. Las preguntas específicas del producto se responden en el "modo detalle", mientras que el "modo lista" ofrece una vista general compacta (pero informativa) de los distintos productos.
Completar el diseño: pedir comida en 3 pasos
A menudo el camarero termina de tomar la comanda con un resumen de lo que han pedido todas las personas de la mesa. Este resumen es un último paso muy importante antes de que el pedido llegue al cocinero.
En la página de pedidos online este último paso también funcionaría. Serviría como comprobación final antes de hacer el pedido. Si seguimos la analogía del mundo real, llegamos a una interfaz de pedidos de comida sencilla, de 3 pasos:
Conclusión
Diseñar una página de pedidos de comida es un reto por las muchas variables que hay que acomodar en una pantalla muy pequeña. Un buen diseño toma esa complejidad y la hace simple.
Cuando diseñas una interfaz, puede ser muy útil pensar como en el mundo real. Busca otra analogía o metáfora. Ver la página de pedidos como un "camarero virtual" me ayudó a llegar a un diseño sencillo de tres pasos. Al final implementé este diseño y ¡funciona de maravilla!
