{
 "id": 36980,
 "slug": "2020-05-01_gestaltung-einer-benutzeroberflache-fur-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": "de",
 "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": "Gestaltung einer Benutzeroberfläche für eine Bestellseite (Essen)",
 "subtitle": "Die Balance zwischen starken Optionen und Bedienbarkeit auf dem Handy finden",
 "summary": "Online-Bestellseiten sind wichtiger denn je. Das COVID-19-Virus, die Lockdowns und die Abstandsregeln haben gezeigt, wie nötig eine gut gestaltete Oberfläche für Webshops ist. Und sie richtig hinzubekommen, ist überraschend schwer!",
 "topics": [
  "creating",
  "design",
  "lemmid-store",
  "programming",
  "smartphone",
  "web",
  "webdesign",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Gemini translation (2025), reviewed and corrected by Claude Sonnet (20 Oct 2026) against a glossary and hunspell",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "de",
  "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": "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": "it",
   "title": "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": "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": "Erste Skizze für die Bestelloberfläche",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-1.png"
  },
  {
   "url": "https://willem.com/global/images/92caf81f6d3a.webp",
   "description": "Im Kontext skizzieren: Probiere dein Design in einem kleineren Fenster aus",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-2.png"
  },
  {
   "url": "https://willem.com/global/images/4fcb33754a9f.webp",
   "description": "Skizze einer Interaktion in zwei Schritten: Unterschied zwischen Listen- und Detailmodus",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-3.png"
  },
  {
   "url": "https://willem.com/global/images/2eb5b8a8f3a5.webp",
   "description": "Essen in drei Schritten bestellen: Liste, Detail, Zusammenfassung",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-4.png"
  },
  {
   "url": "https://willem.com/global/images/c80a12452033.webp",
   "description": "Trügerisch einfach: die fertige Bestellseite",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-5.jpg"
  }
 ],
 "text": "Die Herausforderung: Essen online bestellen\nVielleicht merkst du es nicht, wenn du deine Pizza oder Pommes bei deinem Lieblingsrestaurant zum Mitnehmen auswählst, aber Essen zu bestellen ist aus Sicht des Interface-Designs ziemlich schwierig. Du musst Folgendes bedenken:\n- Produktanpassung: zum Beispiel verschiedene Soßen, Beilagen, Toppings und Größen anbieten\n- Prüfen der Anpassungen: Manche Anpassungen verlangen eine Antwort (etwa wie du dein Steak möchtest: rare, medium oder well done?), andere lassen mehr Spielraum (etwa \"maximal 5 Pizzabeläge\" wählen)\n- Mehrere Varianten: Man sollte zwei gleiche Pizzen bestellen können, aber mit unterschiedlichen Belägen\nHinzu kommt, dass etwa 80 % dieser Interaktion auf einem sehr kleinen Bildschirm stattfinden. Für Schaltflächen, Toggles und Schalter bleibt dadurch wenig Platz. Das ist schwer richtig zu machen, und es hat mich nicht überrascht, dass viele bestehende Apps und Bestellseiten das nicht elegant lösen.\nKomplexe Aufgaben löst man durch Skizzieren!\nVor einer komplexen Designaufgabe beginne ich oft mit Skizzieren. Ich benutze_ein_Tablet_als_Hauptcomputer (https://willem.com/en/building-a-tablet-os-what-happens-when-you-reject-the-mainstream/), und damit kann ich Ideen zeichnend ausprobieren. Natürlich geht auch gutes altes Papier. Wichtig ist, dass du dein Denken sichtbar machst, denn so erkennst du die Möglichkeiten und Grenzen deines Konzepts.\nDie Skizze oben zeigt meine erste Idee für die Oberfläche. Du siehst ein Bild, einen Titel, eine Produktbeschreibung, den Preis, Plus- und Minus-Schaltflächen und ein Feld mit der Anzahl der Produkte, die du gewählt hast. Das scheint ein guter (und einfacher) Anfang zu sein, aber der Entwurf hat Schwächen:\n- Manche Produkte haben kein Bild, dann sitzt der Text in einer Liste seltsam schief\n- Manche Produkte haben lange Titel und Beschreibungen, das Design muss Zeilenumbrüche vertragen\n- Der Entwurf ignoriert die Produktanpassungen völlig (etwa die Wahl eines Belags oder einer Soße)\nSkizziere im Kontext eines Smartphones, und du siehst schnell, wo dein Entwurf nicht stimmt. In der zweiten Skizze (oben) stehen nur zwei Produkte auf der Bestellseite, aber die Zahl der sichtbaren Schaltflächen (Plus / Minus) ist schon doppelt so hoch. Mehrere Schaltflächen pro Produkt dauerhaft anzuzeigen ist eindeutig eine schlechte Idee, besonders bei vielen Produkten.\nWie im echten Leben: Interaktion in zwei Schritten\nUm etwas Eleganteres zu finden, habe ich mir vorgestellt, wie ich in einem echten Restaurant esse. Dabei ist mir aufgefallen, dass der Kellner ein wichtiges Puzzleteil liefert: Er oder sie reagiert auf deine Wahl mit produktspezifischen Fragen. Bestelle ich zum Beispiel ein Steak, fragt der Kellner, wie ich es gebraten haben möchte.\nDer Trick: Es werden nur die Fragen gestellt, die zu deiner Wahl passen. Das hilft, wenn zwei Personen (am selben Tisch) dasselbe Produkt bestellen, denn durch die persönliche Nachfrage kann jeder es anders anpassen.\nWenn du diese Interaktion in zwei Schritten in einer Oberfläche abbilden willst, kannst du einen Listen-/Detailmodus entwerfen. Die produktspezifischen Fragen beantwortest du im \"Detailmodus\", während der \"Listenmodus\" einen kompakten (aber informativen) Überblick über die Produkte gibt.\nDas Design abrunden: Essen in 3 Schritten bestellen\nOft schließt der Kellner die Bestellung ab, indem er zusammenfasst, was alle am Tisch bestellt haben. Diese Zusammenfassung ist ein sehr wichtiger (letzter) Schritt, bevor die Bestellung an den Koch geht.\nAuch auf der Online-Bestellseite funktioniert dieser letzte Schritt. Er dient als letzte Kontrolle, bevor du die Bestellung abschickst. Folgt man diesem Vorbild aus dem echten Leben, kommt man zu einer einfachen Bestelloberfläche in 3 Schritten:\nFazit\nEine Bestellseite für Essen zu gestalten ist eine Herausforderung, weil auf einem sehr kleinen Bildschirm so viele Variablen Platz finden müssen. Gutes Design nimmt diese Komplexität und macht sie einfach.\nWenn du eine Oberfläche entwirfst, kann es sehr nützlich sein, wie im echten Leben zu denken. Such dir eine andere Analogie oder Metapher. Die Bestellseite als \"virtuellen Restaurantkellner\" zu sehen, hat mir geholfen, ein einfaches Design in drei Schritten zu finden. Ich habe_dieses_Design (https://lemmid-store.com) schließlich umgesetzt, und es funktioniert fantastisch!",
 "word_count": 617,
 "markdown_url": "https://agents.willem.com/de/posts/2020-05-01_gestaltung-einer-benutzeroberflache-fur-eine-bestellseite-essen/post.md"
}