Flaschenpost vs. Durst

Getränkekisten schleppen zählt sicherlich nicht zu den liebsten Beschäftigungen eines jeden Konsumenten. Seit gut zwei Jahren bieten verschiedene Online-Getränkelieferdienste hier Abhilfe: Einfache online Bestellung,  kostenfreie Lieferung und einfache Pfandrückgabe sind die zentralen Argumente, um dem Kunden den Bestell- und Einkaufsprozess für die Kiste Wasser, Cola oder Bier einfacher zu machen. Mit Durst.de und Flaschenpost.de bieten zwei Anbieter für die Bestellung auch eine eigene App an – für eine zeitgemäße Bestellung mit dem Smartphone.

In der ersten Ausgabe unseres Usability App Matches haben wir im Rahmen des MORE Mobile MeetUps am 11. Februar 2020 in Köln, die beiden Apps unter die Lupe genommen. Hier sind unsere Eindrücke vom digitalen App-Wettbewerb der beiden Lieferdienste:

Round 1:  Download & Onboarding

Die Präsenz der beiden Apps im AppStore ist jeweils ausbaufähig: Ein Video für den Einstieg in die App fehlt, Texte und Screenshots sind vorhanden, bei Durst.de hübsch illustriert, Flaschenpost.de hält es etwas nüchterner.

Ist die App installiert, muss der Anwender bei Flaschenpost.de zunächst ein kurzes Intro durchklicken; die wichtigsten Funktionen der App werden erklärt. Es folgen die Zustimmung zu der – recht langen – Datenschutzerklärung sowie die Eingabe der PLZ, um das Liefergebiet zu definieren. Durst.de beschränkt sich in seinem Prozess auf die Eingabe der PLZ – anschließend kann die Bestellung beginnen.

Der Eindruck bei Flaschenpost.de: Der Einstieg ist sehr textlastig und teilweise etwas sperrig. Durst.de macht es dem Kunden hier einfacher, da ein Intro bei der geringen Komplexität des App eigentlich nicht notwendig ist:

Round 2: Farben, Schriften und Kontraste

Nach der PLZ-Eingabe begrüßt die Durst-App den Nutzer mit einem bunten Home-Screen: Kategorien sind mit Bildern illustriert, eine Tab-Bar ermöglicht die Navigation in der App.

Das Design ist einfach, entspricht aber den gängigen Usability-Standards. Positiv ist festzuhalten:

  • Einfache, klare Kennzeichnung von Buttons, Navigationselementen und deren Status
  • Deutliche Kontraste zwischen Schrift und Hintergrund
  • Klare, eindeutige Symbole in der Tab-Bar samt Bezeichnung

Verbesserungsfähig sind in der Durst.de App folgende Punkte:

  • Keine Icons für Produktkategorien
  • Schriften teilweise zu klein

Der Home-Bereich von Flaschenpost.de empfängt den Anwender mit großflächigem Platz für Aktionen, einer Liste von Kategorien und ebenfalls einer Tab-Bar zur Navigation. Insgesamt wirkt die App aber deutlich dunkler, obwohl noch ein zusätzlicher Dark-Mode unterstützt wird.

Was uns gut gefallen hat ist:

  • Einheitliche Nutzung einer gut lesbaren Schrift
  • Überwiegend verständliche Icons samt Bezeichnung

Verbesserungspotential sehen wir allerdings noch in einigen Bereichen:

  • Kontraste teilweise sehr gering (z.B. Sucheingabe, aktive Buttons in der Tab-Bar)
  • Varianz der Schriftarten erzeugt eine Unordnung; Abstufung nicht immer klar
  • Großschreibung von Navigations- und Formular-Elementen ist nicht optimal für der Lesbarkeit

Round 3:  Navigation und Nutzerführung

Dank der geringen Produkt- und Sortimentstiefe (im Vergleich zu beispielsweise REWE, Picnic oder Fashion-Apps wie About You und Zalando), ist die Navigation recht simpel: Die Auswahl der Kategorie erfolgt bei Flaschenpost.de in zwei Schritten. Von der Hauptkategorie (z.B. Wasser, Bier, Softdrinks…) gelangt der Anwender in die Subkategorie (Pils, Kölsch, Alt, Weizen, …). Dort kann die entsprechende Produktübersicht navigiert werden.

Flaschenpost.de stellt in seiner App eine Filter-Funktion für Marke und Verpackung sowie eine Sortierung nach Beliebtheit zur Verfügung. Eine Möglichkeit nach Preis zu sortieren fehlt allerdings.

Die Durst.de App ist in Punkto Navigation sehr simpel gehalten: Über die Hauptkategorien gelangt der Anwender auf die entsprechende Produktliste; die Auswahl einer Subkategorie ist nicht notwendig – dafür kann die Liste nach Schlagworten (Alt, Alkoholfrei, Ale, …) gefiltert werden.

Schön gelöst ist die Möglichkeit zwischen den Kategorien durch Wischen nach rechts oder links zu navigieren. So ist ein Zugriff auf die im oberen Bereich positionierte Kategorie-Navigation nicht unbedingt notwendig.

Round 4: Suche

Die Produktsuche ist ein Must-Have in jeder E-Commerce App: Während Flaschenpost.de die Funktion im oberen Bereich der App positioniert, ist die Suche bei Durst.de Bestandteil der Tap-Bar und somit etwas leichter zu erreichen.

Funktional bieten beide Suchen eine Vorschlags- und Auto-Complete-Funktion. Flaschenpost springt nach der Eingabe eines Suchbegriffs entweder auf eine markenspezifische Liste (z.B. bei der Suche nach Bitburger werden alle Produkte von Bitburger angezeigt – auch Produkte weiterer Kategorien wie Apfelschorle bei der Suche nach Gerolsteiner). Durst.de nutzt ebenfalls den Suchbegriff für eine Suche nach dem Herstellernamen – so werden bei der Suche nach Coca-Cola auch Fanta & Co. in den Treffen aufgelistet.

Bei beiden Apps leider noch nicht integriert ist eine direkte Sprachsteuerung der Suche: Per Sprachbefehle würden sich Getränke-Bestellungen sicher noch einfacher gestalten lassen, da die Sortimente überschaubar sind.

Round 5: Erreichbarkeit

Die Herausforderung bei der Gestaltung von Apps ist es, die wichtigen und relevanten Funktionen möglichst einfach erreichbar zu machen. Durch die Bedienung mit einer Hand und die Steuerung mit dem Daumen, sind gewisse Bereiche des Screens nur schwer erreichbar. Durst.de und Flaschenpost.de positionieren alle relevanten Elemente im gut erreichbaren Bereich. Einzige Ausnahme: Der Zurück-Button ist oben links nur schwer zugänglich und bei Flaschenpost.de ist das Suchfeld im Header-Bereich zu finden, was den Einstieg in die Suche – insbesondere bei größeren Displays – erschwert.

Innerhalb von scrollbaren Produktlisten, bieten beide Apps in der Mitte des Screens einen geschützten Bereich zum Scrollen: Hier sind keine klickbaren Funktionen untergebracht, was eine versehentliches Klicken von Buttons oder Links verhindert:  

Die Erreichbarkeit und Bedienbarkeit beider Apps ist gut gelöst; einzig die Suchfunktion von Flaschenpost sollte über einen anderen Weg wie z.B. die Tab-Bar erreichbar gemacht werden.

Round 6: Checkout-Prozess

Hat der Anwender seine Bestellung zusammengestellt, kommt es zum kritischsten Teil der mobilen Customer Journey: Dem Checkout. Hier sollte der Kunde nicht mehr verloren gehen – einfache Bedienung, Absicherung der Entscheidung sowie Unterstützung bei der Eingabe der relevanten Daten ist hier essentiell.

Flaschenpost.de integriert den Checkout-Prozess auf Basis seiner mobilen, responsiven Webseiten. Daher springt der Anwender aus dem Warenkorb heraus in den webbasierten Checkout-Prozess des Webshops. Dies führt leider zu einem Bruch in Design und der User Experience. Schriften, Buttons und Aufbau weichen dann leicht von der App ab und sind teilweise nicht optimal gestaltet: 

Die Eingabe aller notwendigen Informationen erfolgt über ein Formular. Dieses ist teilweise verschachtelt, um die unterschiedlichen Daten – zum Beispiel für Firmenkunden oder Privatkunden – zu erfassen. Ist man bereits Kunde bei Flaschenpost.de so kann man sich mit seinem Benutzernamen und Passwort einloggen. Dies ermöglicht dann Zugriff auf bereits erfasste Rechnungs- und Lieferadressen.

Die App von Durst.de bietet einen voll integrierten Checkout-Prozess. Dieser ist in logischen Schritten aufgebaut: Zunächst wählt der Anwender sein Lieferzeitfenster. Dieses wird nach Tagen aufgeteilt dargestellt. Sind bereits Rechnungs- und Lieferadressen in der App erfasst, können diese ausgewählt werden. Ein Login mit Benutzerkonto wird nicht angeboten.

Bei der Wahl der Zahlungsmethoden stehen hilfreiche Assistenten zur Verfügung. Die erfassten Kreditkartendaten werden beispielsweise über eine Vorschau visualisiert. Auch passt sich das Keyboard dem Kontext der Eingabe an: Für die Eingabe einer Telefonnummer werden beispielsweise nur Zahlen angeboten.   

Der Checkout-Prozess der Durst.de App wirkt etwas durchdachter als bei Flaschenpost.de. Dies liegt vor allem an der vollständigen Integration in die App: So entsteht kein Bruch und die bekannten Bedienelemente der App werden wiederverwendet.

Flaschenpost.de bietet im Checkout mit dem Login ein nützliches Hilfsmittel, um auf bereits erfasste Lieferadressen zurückzugreifen. Dies ist insbesondere hilfreich, wenn man als Kunde bereits per Webshop bestellt hat.

Round 7: Little big details

Zu einer begeisternden Customer Experience gehört auch die Liebe zum Detail: Hier haben beide Apps ein paar kleine Extras zu bieten, die dem Anwender die Bedienung erleichtern und im Bestellprozess hängen bleiben.

Flaschenpost.de löst das hinzufügen in den Warenkorb sehr nutzerfreundlich: Nach Klick auf das “Zum Warenkorb” Icon, erscheint im oberen Bereich der App eine Erfolgsmeldung. Zudem verändert sich der Button in eine Mengen-Angabe, die anschließend durch + und – Buttons verändert werden kann.

Im Warenkorb ist eine kleine Motivation für den Kunden versteckt: Je nach Anzahl der ausgewählten Getränke, wird das entsprechende Gewicht berechnet und dem Kunden angezeigt, wie viele Kilo er oder sie weniger schleppen müssen. Hier stellt sich nur die Frage, ab welcher Angabe der Nutzer Mitleid mit dem Flaschenpost-Fahrer bekommt…

Weiteres Detail ist die Sortier- und Filterfunktion in den Produktlisten: Wer nur Glas- oder PET-Flaschen bestellen möchte, kann hier seine Auswahl eingrenzen. Die Produkte lassen sich zudem nach Beliebtheit sortieren. Leider fehlt eine Möglichkeit, nach Preis pro Liter zu sortieren. 

Bei der Durst.de App liegen die Details in der Usability: Die Navigation innerhalb der Produktdetailseite ist elegant gelöst: Das Produktbild wird nur angeschnitten, kann dann über eine Detailansicht dargestellt und verschiedene Produktabbildungen aufgerufen werden.

Bei der Hinterlegung von Rechnungs- und Lieferadressen werden unterschiedliche Icons – je nachdem ob es sich um eine Firmen- oder Privatanschrift handelt – dargestellt. Und bei der Eingabe der Kreditkarte erhält der Nutzer eine virtuelle Karte angezeigt, die sich der Eingabe anpasst (z.B. das Mastercard- oder Visa-Icon darstellt) und die Stelle des Sicherheitscodes anzeigt.

And the winner is…

Im Rahmen des MORE Mobile MeetUps wurden die Teilnahme zur Abstimmung aufgefordert, welche der beiden Apps sie mehr überzeugt hat. Das Ergebnis: 80% stimmten für die App von Durst.

Unser Fazit: Die Durst.de App bietet eine ausgereiftere Usability mit mehr Liebe zum Detail. Bei der Flaschenpost.de App überzeugen funktionale Mehrwerte, wie eine Filter-Funktion und eine Merkliste für bereits bestellte Produkte. Beide Apps haben aber in funktionaler Sicht noch Luft nach oben.

Quellenangaben:
Das Bildmaterial stammt von Flaschenpost SE und sowie Durststrecke GmbH