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


Jonas Notzon & Robert Klein

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

Vincent und Voltaire ist eine Bücherei, die ausschließlich online betrieben wird. Das Unternehmen hat sich auf schöne Bücher mit aktuellen Themen spezialisiert. Durch die große Darstellung und großformatige Fotografien sollen diese für den Kunden fühlbar werden.

Im Rahmen des Screendesign Projekts, sollte die aktuelle Seite um eine Stöberfunktion ergänzt werden. Dabei sollte der Charakter der Seite unverändert bleiben.

Das Design wurde grundliegend für Smartphones (iPhone) erstellt und dann auf größere Geräte wie Tablet (iPad) und WIMP (Web 1920) übernommen und ausgebaut um dem Konzept „mobile first“ gerecht zu werden.

Um ein neues Design zu erstellen, wurde erstmal die bereits auf der Seite angewandten Konzepte aufgeschrieben und teilweise überarbeitet, um ein einheitliches Gesamtkonzept zu bekommen, ohne den Nutzer durch Veränderungen bei z.B. einem Seitenwechsel zu verwirren. Es stellte sich heraus, dass die Website viele verschiedene Abstände, Schriftgrößen und Bildgrößen benutzt und somit einen unverwechselbaren Look zu kreieren. Die Abstände und Schriftgrößen wurden vereinheitlicht und reduziert, ohne dass die Variationen der Seite verloren geht. Für die Bildgrößen und einzelnen Seiten wurde ein zur Website stimmiges Konzept entwickelt, damit sich der Benutzer nicht bei jedem Seitenwechsel neu orientieren muss sondern weiß, wo er was finden kann auch ohne viel durch Unterseiten zu scrollen.

Vincent und Voltaire soll wie eine Buchhandlung mit Stöbertisch wirken und setzt dabei auf große Bilder und wenig Text, damit ein Kunde sich durch das Buchcover angezogen fühlt. Dieser Gedanke wurde durch das neu erstellte Konzept weitergeführt und erweitert. Es werden in der Stöberfunktion nur Buchcover angezeigt und erst beim hovern über ein Buch kommt ein Infofeld mit Text, Titel, Preis und Buttons zum Vorschein. Somit wird wenn ein Kunde, wenn er ein Buch für interessant hält, intuitiv mit der Maus über das Buch fahren und ihm weitere Informationen zeigen ohne den Gesamtüberblick über die Seite durch viele Texte zu verlieren. Die Anzahl der Bücher nebeneinander wurde erhöht und die einzelnen Buchcover verkleinert, sodass man das Cover noch gut erkennen aber trotzdem mehrere Bücher auf einen Blick überfliegen kann. So kann ein Kunde wie in einer Buchhandlung über einen Büchertisch schauen und sucht sich selbst ein Buch heraus was auf ihn ansprechend wirkt ohne das Gefühl zu bekommen von riesigen Büchern die einem vorgeschlagen werden erschlagen zu werden.

Die Funktionen wurden von uns so umgesetzt, dass der Nutzer sofort einen Überblick über den gesamten Bestand bekommt. Eine Filterfunktion ermöglich ihm, diesen nach seinen Vorlieben oder Interessen einzugrenzen. Sollte ein Buch seine Aufmerksamkeit erweckt haben, ist es ihm möglich, diesen Artikel sofort zu kaufen oder mehr über das bestimmte Buch zu erfahren. Sollte ein Interesse auf mehr Informationen bestehen, wird der Nutzer auf eine Seite weitergeleitet, die ausschließlich das ausgewählte Buch präsentiert. Hier wird es dem Verbraucher ermöglicht tiefer in das Buch einzutauchen und sich durch diverse Grafiken und Texte einzulesen. Die Elemente bei dem sich ein Bild und ein dazugehöriger Text nebeneinander dem Benutzer präsentieren wurden in einen Slider eingebaut wobei wichtige Navigationspunkte wie „zur Wunschliste hinzufügen“ oder „in den Warenkorb legen“ ohne scrollen zu erreichen sind. Damit kann der Benutzer sich die ausgewählten Bilder und Texte anschauen und zu jedem Zeitpunkt entscheiden das Buch zu speichern oder zu kaufen, ohne zu scrollen, eine Aktion auszuführen und die Position an der man beim Lesen fortfahren wollte erneut suchen zu müssen. Bewertungen und Infos z.B. zur ISBN wurden in einen neuen Tab verschoben um die Seite übersichtlicher zu gestalten und damit der Benutzer sofort wichtige Informationen mit einem Klick erhalten kann, ohne durch die Seite scrollen zu müssen.

Somit wurde das Konzept für den Benutzer vereinfacht, ohne den Charm von Vincent und Voltaire zu verlieren.

Style-Guide

Styleguide für das Projekt von Jonas Notzon & Robert Klein