Concevoir l'interface d'une page de commande de repas
Trouver l'équilibre entre options puissantes et confort sur mobile
- Publié
- Mis à jour
- (créé )
- Écrit par
- Willem L. Middelkoop
- Sujets
- créer · design · lemmid-store · programmation · smartphone · web · webdesign · travail
- Version humaine de cet article
- https://willem.com/fr/2020-05-01_concevoir-l-interface-d-une-page-de-commande-de-repas/
- 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)
- Español
- Diseñando una interfaz para una página de pedidos de comida
- 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
- Langues
- Traduit de l’original anglais par un modèle de langage en deux passes (traduction et relecture) avec un glossaire et un correcteur orthographique ; pas encore relu par un lecteur de langue maternelle.
Résumé
Les pages de commande en ligne sont plus importantes que jamais. Le virus COVID-19, les confinements qui ont suivi et les règles de distanciation sociale ont montré à quel point une interface de boutique en ligne bien conçue est nécessaire. Étonnamment, c'est très difficile à réussir !
Texte intégral
Le défi : les commandes de repas en ligne
Tu ne t'en rends peut-être pas compte quand tu choisis ta pizza ou tes frites dans ton restaurant à emporter préféré, mais commander à manger est en fait assez difficile du point de vue de la conception d'interface. Il faut tenir compte de :
- la personnalisation des produits : par exemple proposer différentes sauces, accompagnements, suppléments et tailles
- la validation des personnalisations : certaines exigent une réponse (comme la cuisson de ton steak : saignant, à point ou bien cuit ?), d'autres laissent plus de latitude (comme choisir « 5 suppléments de pizza au maximum »)
- les variantes multiples : on doit pouvoir commander deux fois la même pizza, mais avec des suppléments différents
En plus, environ 80 % de toute cette interaction se fait sur un très petit écran. Cela limite la place disponible pour les boutons, bascules et interrupteurs. C'est difficile à réussir et je n'ai pas été surpris de voir que beaucoup d'applis et de pages de commande existantes n'y répondent pas de façon élégante.
Affronte les défis complexes en dessinant !
Quand je me heurte à un défi de conception complexe, je commence souvent par dessiner. J'utilise une tablette comme ordinateur principal, ce qui me permet d'explorer des idées en les dessinant. Bien sûr, tu peux aussi utiliser du bon vieux papier. L'important, c'est de visualiser ta réflexion, car cela révèle les possibilités et les limites de ton concept.
Le croquis ci-dessus montre ma première idée pour l'interface. On voit une image, un titre, une description du produit, le prix, des boutons plus et moins, et une case avec le nombre de produits commandés. Ça peut sembler un bon départ (et simple), mais cette conception a des défauts :
- certains produits n'auront pas d'image, ce qui aligne bizarrement le texte si cette interface est dans une liste
- certains produits ont de longs titres et descriptions, il faut que la conception gère le retour à la ligne
- cette conception ignore totalement les personnalisations de produit (comme choisir un supplément ou une sauce)
Dessine dans le contexte d'un smartphone et tu verras vite où ta conception cloche. Sur le deuxième croquis (ci-dessus), la page de commande n'affiche que deux produits, et pourtant le nombre de boutons visibles (plus / moins) est déjà le double. Afficher en permanence plusieurs boutons par produit est clairement une mauvaise idée, surtout avec beaucoup de produits.
Penser comme dans la vraie vie : une interaction en deux étapes
Pour trouver quelque chose de plus élégant, j'ai essayé d'imaginer que je commandais mon dîner dans un vrai restaurant. J'ai découvert que le serveur détient en fait une pièce importante du puzzle : il ou elle réagit à ton choix en posant des questions propres au produit. Par exemple, quand je commande un steak, le serveur me demande comment je le veux cuit.
L'astuce, c'est qu'on ne pose que les questions pertinentes pour ton choix. C'est utile quand deux personnes (à la même table) commandent le même produit : l'approche personnelle permet des personnalisations différentes pour chacune.
Si tu voulais capturer cette interaction en deux étapes dans une interface, tu pourrais concevoir un mode liste/détail. On répond aux questions propres au produit en « mode détail », tandis que le « mode liste » offre un aperçu compact (mais informatif) des différents produits.
Finaliser la conception : commander à manger en 3 étapes
Souvent, le serveur d'un restaurant termine la prise de commande en récapitulant ce qu'ont commandé toutes les personnes d'une table. Ce récapitulatif est une dernière étape très importante avant que la commande parte au chef.
Sur la page de commande en ligne, cette dernière étape fonctionnerait aussi. Elle servirait de dernière vérification avant de passer commande. En suivant l'analogie avec la vraie vie, on arrive à une interface simple de commande de repas en 3 étapes :
Conclusion
Concevoir une page de commande de repas est un défi, à cause des nombreuses variables à faire tenir sur un très petit écran. Un excellent design prend cette complexité et la rend simple.
Quand tu conçois une interface, il peut être très utile de penser comme dans la vraie vie. Trouve une autre analogie ou une métaphore. Voir la page de commande comme un « serveur de restaurant virtuel » m'a aidé à imaginer une conception simple en trois étapes. J'ai fini par implémenter cette conception et elle marche fantastiquement bien !
