{
 "id": 36980,
 "slug": "2020-05-01_progettare-un-interfaccia-per-una-pagina-di-ordinazione-di-cibo",
 "url": "https://agents.willem.com/it/posts/2020-05-01_progettare-un-interfaccia-per-una-pagina-di-ordinazione-di-cibo/",
 "source_url": "https://willem.com/it/2020-05-01_progettare-un-interfaccia-per-una-pagina-di-ordinazione-di-cibo/",
 "language": "it",
 "date": "2020-05-01",
 "published": "2020-05-01T00:00:00+02:00",
 "created": "2025-06-26T22:10:00.066000+02:00",
 "updated": "2026-10-20T09:19:34.357000+02:00",
 "title": "Progettare un'interfaccia per una pagina di ordinazione di cibo",
 "subtitle": "Trovare l'equilibrio tra opzioni potenti e usabilità su mobile",
 "summary": "Le pagine di ordinazione online sono più importanti che mai. Il virus COVID-19, i lockdown che ne sono seguiti e le regole di distanziamento sociale hanno messo in evidenza il bisogno di un'interfaccia ben progettata per i negozi online. Farla bene è sorprendentemente difficile!",
 "topics": [
  "creating",
  "design",
  "lemmid-store",
  "programming",
  "smartphone",
  "web",
  "webdesign",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "it",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Designing an interface for a food ordering page",
   "url": "https://agents.willem.com/en/posts/2020-05-01_designing-an-interface-for-a-food-ordering-page/",
   "source_url": "https://willem.com/en/2020-05-01_designing-an-interface-for-a-food-ordering-page/"
  },
  {
   "language": "nl",
   "title": "Een interface ontwerpen voor een bestelpagina voor eten",
   "url": "https://agents.willem.com/nl/posts/2020-05-01_een-interface-ontwerpen-voor-een-bestelpagina-voor-eten/",
   "source_url": "https://willem.com/nl/2020-05-01_een-interface-ontwerpen-voor-een-bestelpagina-voor-eten/"
  },
  {
   "language": "de",
   "title": "Gestaltung einer Benutzeroberfläche für eine Bestellseite (Essen)",
   "url": "https://agents.willem.com/de/posts/2020-05-01_gestaltung-einer-benutzeroberflache-fur-eine-bestellseite-essen/",
   "source_url": "https://willem.com/de/2020-05-01_gestaltung-einer-benutzeroberflache-fur-eine-bestellseite-essen/"
  },
  {
   "language": "es",
   "title": "Diseñando una interfaz para una página de pedidos de comida",
   "url": "https://agents.willem.com/es/posts/2020-05-01_disenando-una-interfaz-para-una-pagina-de-pedidos-de-comida/",
   "source_url": "https://willem.com/es/2020-05-01_disenando-una-interfaz-para-una-pagina-de-pedidos-de-comida/"
  },
  {
   "language": "fr",
   "title": "Concevoir l'interface d'une page de commande de repas",
   "url": "https://agents.willem.com/fr/posts/2020-05-01_concevoir-l-interface-d-une-page-de-commande-de-repas/",
   "source_url": "https://willem.com/fr/2020-05-01_concevoir-l-interface-d-une-page-de-commande-de-repas/"
  },
  {
   "language": "pt",
   "title": "Desenhar uma interface para uma página de pedidos de comida",
   "url": "https://agents.willem.com/pt/posts/2020-05-01_desenhar-uma-interface-para-uma-pagina-de-pedidos-de-comida/",
   "source_url": "https://willem.com/pt/2020-05-01_desenhar-uma-interface-para-uma-pagina-de-pedidos-de-comida/"
  },
  {
   "language": "pap",
   "title": "Desèñá un interface pa un página pa pidi kuminda",
   "url": "https://agents.willem.com/pap/posts/2020-05-01_desena-un-interface-pa-un-pagina-pa-pidi-kuminda/",
   "source_url": "https://willem.com/pap/2020-05-01_desena-un-interface-pa-un-pagina-pa-pidi-kuminda/"
  },
  {
   "language": "fy",
   "title": "In ynterface ûntwerpe foar in bestelside foar iten",
   "url": "https://agents.willem.com/fy/posts/2020-05-01_in-ynterface-untwerpe-foar-in-bestelside-foar-iten/",
   "source_url": "https://willem.com/fy/2020-05-01_in-ynterface-untwerpe-foar-in-bestelside-foar-iten/"
  }
 ],
 "image": "https://willem.com/global/images/649de8a48c1c.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/46615fdc8e0d.webp",
   "description": "Schizzo iniziale dell'interfaccia di ordinazione del cibo",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-1.png"
  },
  {
   "url": "https://willem.com/global/images/92caf81f6d3a.webp",
   "description": "Disegnare nel contesto: prova a inquadrare il tuo design in uno spazio più piccolo",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-2.png"
  },
  {
   "url": "https://willem.com/global/images/4fcb33754a9f.webp",
   "description": "Schizzo di un'interazione in due passaggi: distinguere tra modalità elenco e dettaglio",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-3.png"
  },
  {
   "url": "https://willem.com/global/images/2eb5b8a8f3a5.webp",
   "description": "Ordinare il cibo in tre passaggi: elenco, dettaglio, riepilogo",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-4.png"
  },
  {
   "url": "https://willem.com/global/images/c80a12452033.webp",
   "description": "Ingannevolmente semplice: la pagina di ordinazione di cibo finale",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-5.jpg"
  }
 ],
 "text": "La sfida: gli ordini di cibo online\nForse non te ne accorgi quando scegli la pizza o le patatine fritte nel tuo take away preferito, ma ordinare il cibo è in realtà piuttosto difficile dal punto di vista del design dell'interfaccia. Devi considerare:\n- la personalizzazione dei prodotti: per esempio offrire salse, contorni, condimenti e dimensioni diversi\n- la validazione delle personalizzazioni: alcune personalizzazioni richiedono una risposta (come vuoi la bistecca, al sangue, media o ben cotta?), mentre altre ammettono più varianza nella risposta (come scegliere \"massimo 5 condimenti per la pizza\")\n- le varianti multiple: qualcuno dovrebbe poter ordinare due pizze uguali, ma con condimenti diversi\nA tutto questo si aggiunge che circa l'80% di questa interazione avviene su uno schermo molto piccolo. Questo limita lo spazio disponibile per pulsanti, interruttori e selettori. È difficile farlo bene e non mi ha sorpreso vedere che molte app e pagine di ordinazione esistenti non affrontano il problema in modo elegante.\nAffronta le sfide complesse disegnando schizzi!\nQuando mi trovo davanti a una sfida di design complessa, spesso comincio con degli schizzi. Uso_un_tablet_come_computer_principale (https://willem.com/en/building-a-tablet-os-what-happens-when-you-reject-the-mainstream/) che mi permette di esplorare le idee disegnandole. Ovviamente puoi usare anche la vecchia carta. L'importante è visualizzare il tuo pensiero, perché rivela le possibilità e i limiti del tuo concetto.\nLo schizzo qui sopra mostra la mia idea iniziale per l'interfaccia. Si vedono un'immagine, un titolo, la descrizione del prodotto, il prezzo, i pulsanti più e meno e un riquadro con il numero dei prodotti acquistati. Può sembrare un inizio buono (e semplice), ma questo design ha dei difetti perché:\n- alcuni prodotti non avranno un'immagine, e il testo si allinea in modo strano se hai questa interfaccia in un elenco\n- alcuni prodotti hanno titoli e descrizioni lunghi, quindi il design deve prevedere il testo che va a capo\n- questo design ignora del tutto le personalizzazioni dei prodotti (come scegliere un condimento o una salsa)\nDisegna nel contesto di uno smartphone e vedrai subito dove il tuo design sbaglia. Nel secondo schizzo (qui sopra) vedi solo due prodotti elencati nella pagina di ordinazione, eppure il numero di pulsanti visibili (più / meno) è già il doppio. Mostrare sempre più pulsanti per ogni prodotto è chiaramente una cattiva idea, soprattutto se hai a che fare con tanti prodotti.\nPensare come nel mondo reale: l'interazione in due passaggi\nPer trovare qualcosa di più elegante ho provato a immaginare di ordinare la cena in un vero ristorante. Ho scoperto che il cameriere in realtà risolve una parte importante del puzzle: risponde alla tua scelta facendoti domande specifiche sul prodotto. Per esempio, quando ordino una bistecca, il cameriere mi chiede come la voglio cotta.\nIl trucco è che vengono fatte solo le domande rilevanti per la tua scelta. Aiuta quando due persone (allo stesso tavolo) ordinano lo stesso prodotto: l'approccio personale permette personalizzazioni diverse per ciascuna persona.\nSe provi a catturare questa interazione in due passaggi in un'interfaccia, puoi progettare una modalità elenco/dettaglio. Rispondere alle domande specifiche sul prodotto avviene nella \"modalità dettaglio\", mentre la \"modalità elenco\" offre una panoramica compatta (ma informativa) dei diversi prodotti.\nCompletare il design: ordinare il cibo in 3 passaggi\nSpesso il cameriere di un ristorante conclude la presa dell'ordine offrendo un riepilogo di ciò che è stato ordinato da tutte le persone di un dato tavolo. Questo riepilogo è un ultimo passaggio molto importante prima che l'ordine venga mandato in cucina.\nAnche nella pagina di ordinazione online questo ultimo passaggio funzionerebbe. Servirebbe da ultimo controllo prima di confermare l'ordine. Seguendo l'analogia con il mondo reale si arriva quindi a una semplice interfaccia di ordinazione di cibo in 3 passaggi:\nConclusione\nProgettare una pagina di ordinazione di cibo è una sfida a causa delle tante variabili che devi far stare su uno schermo molto piccolo. Un ottimo design prende questa complessità e la rende semplice.\nSe progetti un'interfaccia, può essere molto utile applicare un po' di pensiero da mondo reale. Trova un'analogia o una metafora diversa. Vedere la pagina di ordinazione come un \"cameriere virtuale\" mi ha aiutato a trovare un design semplice in tre passaggi. Alla fine ho realizzato_questo_design (https://lemmid-store.com) e funziona benissimo!",
 "word_count": 690,
 "markdown_url": "https://agents.willem.com/it/posts/2020-05-01_progettare-un-interfaccia-per-una-pagina-di-ordinazione-di-cibo/post.md"
}