Gestaltungskonzept für «Stöber- und Entdeckerformate» für VINCENT&VOLTAIRE


Marko Kalaburda & Florian Regnery

Kontext
VINCENT&VOLTAIRE
Modul
Screendesign
Semester
Wintersemester 2021/22
Studiengang
Medieninformatik Ba.

In diesem Projekt haben wir den Webauftritt der Online-Buchhandlung Vincent & Voltaire um eine Stöberfunktion erweitert.

Zuerst wählen die potentiellen Nutzer*innnen ihre Lieblingsgenres aus. Danach werden den Nutzer*innen nacheinander Bücher vorgeschlagen, welche sie entweder zu der Stöberliste hinzufügen oder wieder ins “Bücherregal zurücklegen” können. Mit jeder Auswahl der Kund*innen lernt der Algorithmus über ihre Präferenzen und schlägt auf die User*innen abgestimmte Bücher vor. Wenn die Kund*innen genug gestöbert haben, können sie sich ihre Stöberliste anzeigen lassen, um weitere Informationen zu den Büchern zu erhalten. Die Stöberliste bleibt auch beim weiteren browsen erhalten und erlaubt es den Kund*innen zu einem späteren Zeitpunkt weiter zu stöbern.

Im Header wurde der Button “Stöbern” hinzugefügt, um auf die Stöberliste und die Anwendung zuzugreifen. In Versionen für kleinere Bildschirme, wurde die Aktion beim Ausklappen des Menüs hinzugefügt. Falls ein*e Nutzer*in zu einem früheren Zeitpunkt bereits eine Liste erstellt hatte, ist es möglich durch ein Pop-Up, welches beim Start der Stöberanwendung erscheint, auf diese vorherige Stöberliste zuzugreifen. Zusätzlich werden beim Hovern über ein Genre jeweils zwei Beispielbücher angezeigt. Mit dem Betätigen des Weiter-Buttons kommen die Kund*innen auf ihre Stöberliste.

Die Stöberfunktion soll die “Bookstore-Experience” für die Nutzer*innen auf den Bildschirm bringen, das heißt, sie sollen sich wie in einem richtigen Buchladen fühlen, in dem sie sich Bücher der persönlichen Lieblingsgenres einzeln auswählen und anschauen, für eine genauere Betrachtung bei Seite legen oder zurück ins Regal stellen können.

Bei der Hauptanwendung kann man das Buch anklicken um die Buchrückseite zu lesen, um so einen ersten Eindruck zu bekommen – ähnlich der ersten Aktion beim Betrachten eines echten Buches im Geschäft. In der erstellten Anwendung können die Nutzer*innen über das Betätigen von zwei verschiedenen Buttons unterhalb des Buches, dieses entwerder auf die Stöberliste legen (Button 1) oder wieder weglegen (Button 2). Bei Touch-Devices gibt es zusätzlich die Möglichkeit, diese beiden Aktionen durch das Wischen nach links oder rechts zu tun.

Für das Design dieser Anwendung wurden die Regeln der Layout-Gestaltung der bestehenden Website übernommen und weiter darauf aufgebaut. Dabei wurde beispielsweise darauf geachtet, dass Aspekte wie Abstände und Typographie gleich der Webseite gehalten werden. Dies ermöglicht es, die Anwendung nahtlos in das bestehende Design einzubinden.

Style-Guide

Styleguide für das Projekt von Marko Kalaburda & Florian Regnery