Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Smart Cart – Der clevere Einkaufswagen

Smart Cart – Der clevere Einkaufswagen

logo_schwarz.pnglogo_schwarz.png

Smart Cart ist ein am Einkaufswagen installierter Touchscreen, mit dessen Hilfe der alltägliche Einkauf im Supermarkt erleichtert wird. Die Applikation ermöglicht dem Nutzer ein transparenteres, schnelleres und stressfreieres Einkaufen, indem detaillierte Informationen zu einzelnen Produkten zu Verfügung gestellt und Produkte anhand von Suchfunktion und Navigation schneller oder strukturierter gefunden werden.

Smart Cart soll dem Nutzer vorallem folgende Mehrwerte bieten:

Information Zu sämtlichen Produkten können weiterführende Informationen abgefragt werden: Detaillierte Informationen werden zu aller im Supermarkt befindlichen Produkte bereitgestellt, die besonders Allergikern und sich bewusst ernährenden Menschen das Einkaufen erleichtert: Welche Inhaltsstoffe und Zutaten besitzt ein Produkt? Woher stammt es? Wie gesund ist es für mich und vertrage ich es überhaupt? Am Ende eines jeden Einkaufes könnte eine Auswertung und ein Vergleich aller getätigten Einkäufe nach bestimmten Kriterien stattfinden, sodass man z.B. einen Überblick erhält, wie gesund sämtliche Lebensmittel im Warenkorb sind.

Suchen & Finden Spezielle Produkte können in der Masse des Angebotes eines großen Supermarktes mittels einer Produktsuche und -navigation schnell gefunden werden.

Einkaufszettel Mit dem Smartphone und einer dazugehörigen App besteht die Möglichkeit, Einkaufslisten zu erstellen, welche problemlos mit dem Touchscreen synchronisiert werden. Die Applikation sortiert die Produkte und erstellt eine ideale Route durch den Supermarkt, sodass man schnellstmöglich seinen Einkaufszettel abarbeiten kann.

Angebote Aktuelle Angebote und gezielt platzierte Werbung machen die Applikation auch aus Unternehmenssicht interessant.

Rezeptvorschläge Smart Cart bietet eine Reihe an Rezeptideen an, die auch als Ausgangslage für einen Einkauf dienen können.

Einsatz

Smart Cart ist hauptsächlich für sehr große Supermärkte mit einem großen Sortiment gedacht, die ihren Kunden einen besonderen Service bieten wollen.

ZIELGRUPPE

Die Hauptzielgruppe von Smart Cart lässt sich im Alter zwischen ca 16 und 50 Jahren ansiedeln. Darüber hinaus sollen ältere, Technik-affine Personen, die begeistert mit der Zeit gehen, angesprochen werden. Sie möchten (oder müssen) vor allem bewusster und ausgewählter einkaufen, sodass die Applikation besonders für Vegetarier, Veganer oder Menschen mit Unverträglichkeiten von Bedeutung sein kann. Aufgrund der Such-, Navigations- und Einkaufszettel-Funktion ist Smart Cart ideal für Menschen, die ihre Zeit im Supermarkt effektiver nutzen möchten.

Menschen, die ihren Stamm-Supermarkt wie ihre eigene Westentasche kennen, und Menschen, die den Einkauf im Supermarkt und das damit verbundenen „Bummeln“ genießen, können weitestgehend aus der Zielgruppe ausgeschlossen werden.

FORMALER AUFBAU

Die Applikation ist ein am Einkaufswagen installierter Touchscreen mit den Maßen 27cm x 10,5cm, der zwischen den Griffen am Einkaufswagen platziert ist. Direkt unter dem Screen befindet sich ein Barcode-Scanner, mit dem sich Produkte erfassen lassen.

SZENARIEN & PERSONAS

titel_motivation.pngtitel_motivation.png

titel-personas.pngtitel-personas.png

Harald Nollau

50 Jahre, Berufsschullehrer, geschieden

Hobbies • Technik • Löten • Modellbau

Einstellung • Mag es gemütlich und rustikal

EinkaufsverHalten • Liebt Fleisch • Isst kaum Obst und Gemüse • Achtet nicht sonderlich auf seine Gesundheit • Kauft billig und auf Vorrat ein • Findet Einkaufen anstrengend • Ist in großen Supermärkten überfordert

Technik Besitzt ein Smartphone und hat gerne das Gefühl technisch immer auf dem neuesten Stand zu sein. Hat die CONNECT abonniert.

Szenario Wie fast jeden Freitag macht Harald seinen ungeliebten Wocheneinkauf im Supermarkt fünf Minuten von seiner Wohnung entfernt. Obwohl er mindestens ein Mal die Woche mit seinem vollgeschriebenen Einkaufszettel dort einkaufen geht, hat er noch immer keinen Überblick im Laden und bittet die Angestellten oft um Hilfe. Harald ist leidenschaftlicher Fleischesser und daher ist das Fleischregal sein Lieblingsort im ganzen Laden, denn da kennt er sich aus und findet sich zu recht ...

Monique Tézli

30 Jahre, Redakteurin, ledig

Hobbies • Malen • Fotografieren • Freunde treffen • Reisen

Einstellung • Möchte ihre Ziele ohne fremde Hilfe erreichen • Strebsam

Einkaufsverhalten • Bevorzugt Bio-Produkte • Bevorzugt regionale Produkte • Achtet auf den Preis

Technik Hat großes technisches Verständnis und surft mehrere Stunden täglich im Internet. Besitzt außerdem ein iPad-Mini und ein Smart Phone.

Szenario Heute geht Monique mal schnell in der Mittagspause einkaufen. Viel Zeit hat sie nicht, denn im Büro ist momentan sehr viel zu tun und der Chef ruft auch schon den ganzen Tag an um ständig neue Aufgaben zu verteilen. Leider ist Morgen Feiertag und der Laden sehr voll. Die Supermarkteigenen Bioprodukte sind heute irgendwie besonders beliebt und fast ausverkauft. Wegen ihrer Laktose-Intoleranz muss Sie sich immer die Zutatenliste durchlesen und das dauert ...!

Lenni Burmeister

33 Jahre, Designer, ledig, hat einen Sohn (wenig Kontakt)

Hobbies • Fährt Skateboard • Macht Kurzfilme

Einstellung • Risikoreich • Hat viel Spaß • Lässt sich ungern etwas sagen • „Vegan for life“ • Lebt „Straight Edge“ (kein Alkohol, kein Tabak, keine tierischen Produkte)

Einkaufsverhalten • Kauft nur vegane Produkte • Kauft Gemüse nur am Stand und immer bei Bedarf frisch • kauft wenige, aber hochwertige Produkte

Technik Hat viel technisches Verständnis und besitzt iPhone, iPad, Mac. Ist so gut wie immer online, auch um Bilder auf Instagram hoch zu laden.

Szenario Wieder mal hat Lenni weibliche Bekanntschaft gemacht und möchte der Dame nun ein veganes indisches Gericht kochen. Leider ist er, wie immer, zu spät dran um all seine Lieblings-Geschäfte abzuklappern. Es bleibt ihm nichts anderes übrig als im Supermarkt einzukaufen. Dabei ist er relativ entspannt und nimmt sich viel Zeit um die passenden Produkte auszuwählen. Normalerweise bevorzugt er Fachläden wie Gemüsehändler oder Weinhändler. Trotzdem genießt er die große Vielfalt und tänzelt durch die Gänge ...

SCRIBBLES

titelbild.pngtitelbild.png

1.png1.png
2.png2.png
3.png3.png
4.png4.png
5.png5.png

PAPIER-PROTOTYP & USABILITY-TEST

suche_allgemein_close.pngsuche_allgemein_close.png

Nach Erstellung des ersten Papier-Prototypen führten wir einen Usability-Test durch.

Wir erhielten unterschiedlichstes Feedback, welches uns sehr dabei half, die Raumaufteilung der Applikation zu optimieren, da manche Elemente doch als irreführend bewertet wurden.

1. START

start_wide.pngstart_wide.png
start_close.pngstart_close.png

Auf dem Home-Screen fiel besonders auf, dass die links platzierte Filterfunktion missinterpretiert wurde. Deshalb entschlossen wir uns dazu, dieser wichtigen Funktion einen separaten Screen zu geben.

Während des Tests und der Besprechung im Kurs kam außerdem der Wunsch, auf dem Home-Screen Werbung in Form von aktuellen Angeboten zu platzieren.

2. SUCHE

suche_allgemein_wide.pngsuche_allgemein_wide.png
suche_allgemein_close.pngsuche_allgemein_close.png

Das Feedback zur Suchfunktion ergab, dass wir zum einen bei der Gestaltung des Suchfeldes darauf achten müssen, dieses eindeutig als Eingabefeld zu kennzeichnen. Zum anderen hielten wir es für weniger sinnvoll, dass der Nutzer spezielle Produkte nach Kategorien suchen sollte. So entschlossen wir uns, die Kategoriesuche zwar beizubehalten, sie jedoch wesentlich zu verkleinern und der Volltext-Suche mehr Raum zu geben.

3. SUCHE AM BEISPIEL VON COLA

cola_wide.pngcola_wide.png
cola_close.pngcola_close.png

Bei einem allgemein formulierten Suchbegriff wie „Cola“ muss berücksichtigt werden, dass manche Produkte verschieden angeboten werden. So wird Cola zum Beispiel als Einzelflasche, im Kasten oder gekühlt angeboten.

4. NAVIGATION + PLATZIERUNG VON WERBUNG

cola_nav.pngcola_nav.png
navi_cola_angebot.pngnavi_cola_angebot.png

In der Navigationsansicht kam lediglich noch der Gedanke, die Entfernungen zum gesuchten Produkt nicht nur typografisch, sondern auch visuell darzustellen.

5. PRODUKTSCAN + INFOSCREEN

produkt-scannen.pngprodukt-scannen.png
produktinfo_ritter-sport2.pngproduktinfo_ritter-sport2.png
produktinfo_ritter-sport.pngproduktinfo_ritter-sport.png

Bei den Produktinformationen erhielten wir positives Feedback und optimierten im nächsten Schritt lediglich visuelle Kleinigkeiten.

GESTALTUNG

Unser Ziel war es, mit der Gestaltung eine freundliche und positive Atmosphäre zu erzeugen, die ein angenehmes Einkaufsgefühl untermalt. So ist der Hintergrund aus einem weichgezeichneten Bild von Früchten entstanden, woraus sich ein farbenfrohes und leichtes Interface ergibt. Die Typografie ist zudem dem Zweck entsprechend groß und deutlich gewählt, sodass Inhalte auch beim schnellen Überfliegen leicht zu erfassen sind.

Da sich die Nutzer unter Umständen in einer stressigen Situation befinden können, hielten wir es für besonders sinnvoll, das Interface simpel, großflächig und aufgeräumt zu gestalten.

Der gesamte Prototyp kann hier auch als PDF angesehen werden.

Startseite

Smart-Cart_HCI_Prototyp-01.pngSmart-Cart_HCI_Prototyp-01.png

Filter

Smart-Cart_HCI_Prototyp-02.pngSmart-Cart_HCI_Prototyp-02.png

Smart-Cart_HCI_Prototyp-03.pngSmart-Cart_HCI_Prototyp-03.png

Die Filterfunktion dient zur Eingrenzung der Produkte, die in der Suche gefunden werden. So werden nur vegetarische Produkte angezeigt, wenn ich dies zu Beginn auswähle.

Home

Smart-Cart_HCI_Prototyp-04.pngSmart-Cart_HCI_Prototyp-04.png

Der Home-Bildschirm bietet eine Übersicht aller Funktionen und zeigt die Angebote der Woche in einer Galerie.

Produkt scannen

Smart-Cart_HCI_Prototyp-05.pngSmart-Cart_HCI_Prototyp-05.png

Produktinformationen

Smart-Cart_HCI_Prototyp-06.pngSmart-Cart_HCI_Prototyp-06.png

Nach dem Scannen eines Produktes, hier Haribo Goldbären, gelangt man zur Informationsübersicht. Hier werden die vier wichtigen Informationen wie Preis, Zutaten & Inhaltsstoffe, Herkunft & Produktion sowie Gesundheit in Form der Lebensmittelampel angezeigt. Untergeordnet findet man in den letzten drei Punkten detailliertere Angaben. Außerdem gibt es die Möglichkeit, alternative Empfehlungen zu erhalten, die z.B. vegan oder preiswerter sein können.

Mit dem „In den Warenkorb“-Button wird das gewählte Produkt in den digitalen Warenkorb gelegt und zum Gesamtpreis addiert.

Zurück zum Home-Screen

Smart-Cart_HCI_Prototyp-08.pngSmart-Cart_HCI_Prototyp-08.png

Produktsuche

Smart-Cart_HCI_Prototyp-11.pngSmart-Cart_HCI_Prototyp-11.png

Hier erfolgt die Suche mittels Eingabe in das Textfeld. Angedacht ist außerdem eine Anzeige von Vorschlägen wie man dies z.B. von Google kennt.

Suchergebnisse

Smart-Cart_HCI_Prototyp-12.pngSmart-Cart_HCI_Prototyp-12.png

Entsprechend des Usability-Tests wurden die Suchergebnisse angepasst, sodass man die verschiedenen Kaufmöglichkeiten (Flasche, Kasten, gekühlte Flasche o.ä.) wählen kann. Falls man ein speziellen Produkt sucht, findet man dies in der darunter liegenden Galerie, die sich nach verschiedenen Kriterien sortieren lässt.

Navigation zum Produkt

Smart-Cart_HCI_Prototyp-13.pngSmart-Cart_HCI_Prototyp-13.png

Nach der Auswahl gelangt man zur Navigation des Produktes (hier gekühlte Coca Cola). Der Pfeil färbt sich, je näher man dem nächsten Schritt in der Navigation kommt. Gleiches gilt für den Balken unten rechts, der die Gesamtentfernung zum Produkt anzeigt.

ZWEITER USABILITY TEST

Nach der Gestaltung des Interfaces führten wir einen erneuten Usability-Test durch. Das Design wurde durchweg als positiv und freundlich wahrgenommen. Jedoch kamen hinsichtlich Navigation und Raumaufteilung erneut neue Ideen und Kritiken auf. So sollte eventuell die Summe des Warenkorbes und die Uhrzeit deutlich größer dargestellt werden. Außerdem sollte in Erwägung gezogen werden, ob man nicht eine statische Tab-basierte Navigation benutzt, sodass diese einfacher zu handhaben ist und Zeit spart.

Ein Ansatz, um diese Kritikpunkte zu berücksichtigen, könnte der Aufbau des folgenden Beispielscreens sein:

Smart-Cart_HCI_Prototyp-14-.pngSmart-Cart_HCI_Prototyp-14-.png

FAZIT

Der Kurs zeigte uns die spannenden und nötigen Tätigkeiten und Methoden auf, die vor dem eigentlich Design-Prozess stattfinden sollten. Aufgrund des gewählten Themas erhielten wir außerdem einen Einblick in den Bereich des Service-Design.

Letztendlich schränkte uns das Thema aufgrund seiner Komplexität aber auch ein, da es oft schwierig war, den Überblick zu bewahren und sich auf wesentliche Aspekte zu konzentrieren. So wählten wir lediglich die beiden elementaren Funktionen von Smart Cart, um uns in in diesen Bereich eingängig mit Methodik, Nutzerfreundlichkeit und User-Testings zu beschäftigen. Im Nachhinein hätten wir nicht allzu viel Zeit in den Papierprototypen stecken sollen. Während des eigentlichen Gestaltungsprozesses fielen uns oft Ungereimtheiten auf; z.B. wurden Größenverhältnisse falsch eingeschätzt wurden, sodass wir sogar den erneut Wireframe infrage stellen mussten.

Deshalb stellt uns das nun vorliegende Ergebnis auch nur insofern zufrieden, da es lediglich als Zwischenergebnis angesehen werden kann. Es wäre also spannend, das Projekt Smart Cart in einem weiteren Semester zu bearbeiten.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Dr. Frank Heidmann

Entstehungszeitraum

Sommersemester 2013

zusätzliches Material