--- title: "Gestaltung einer Benutzeroberfläche für eine Bestellseite (Essen)" date: 2020-05-01 language: de topics: ["creating", "design", "lemmid-store", "programming", "smartphone", "web", "webdesign", "work"] source_url: https://willem.com/de/2020-05-01_gestaltung-einer-benutzeroberflache-fur-eine-bestellseite-essen/ --- # Gestaltung einer Benutzeroberfläche für eine Bestellseite (Essen) *Die Balance zwischen starken Optionen und Bedienbarkeit auf dem Handy finden* > 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! ## Die Herausforderung: Essen online bestellen Vielleicht 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: - **Produktanpassung**: zum Beispiel verschiedene Soßen, Beilagen, Toppings und Größen anbieten - **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) - **Mehrere Varianten**: Man sollte zwei gleiche Pizzen bestellen können, aber mit unterschiedlichen Belägen Hinzu 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. ## Komplexe Aufgaben löst man durch Skizzieren! Vor 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. ![Erste Skizze für die Bestelloberfläche](https://willem.com/global/images/46615fdc8e0d.webp) Die 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: - Manche Produkte haben kein Bild, dann sitzt der Text in einer Liste seltsam schief - Manche Produkte haben lange Titel und Beschreibungen, das Design muss Zeilenumbrüche vertragen - Der Entwurf ignoriert die Produktanpassungen völlig (etwa die Wahl eines Belags oder einer Soße) ![Im Kontext skizzieren: Probiere dein Design in einem kleineren Fenster aus](https://willem.com/global/images/92caf81f6d3a.webp) Skizziere 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. ## Wie im echten Leben: Interaktion in zwei Schritten Um 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. Der 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. ![Skizze einer Interaktion in zwei Schritten: Unterschied zwischen Listen- und Detailmodus](https://willem.com/global/images/4fcb33754a9f.webp) Wenn 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. ## Das Design abrunden: Essen in 3 Schritten bestellen Oft 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. Auch 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: ![Essen in drei Schritten bestellen: Liste, Detail, Zusammenfassung](https://willem.com/global/images/2eb5b8a8f3a5.webp) ## Fazit Eine 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. Wenn 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! ![Trügerisch einfach: die fertige Bestellseite](https://willem.com/global/images/c80a12452033.webp)