Digitale Typografie: Amazon

Eine behutsame Überarbeitung der Amazon-Website mit Hinblick auf strukturelle und typografische Entscheidungen.
Screen eines verbesserten und aufgeräumten Amazon Shops
Das Problem
Amazons Website ist den meisten von uns vermutlich gut bekannt, allerdings trügt genau diese Vertrautheit über die vielzähligen Details hinweg, an denen wir uns sonst stören.

Mit einem kritischen Blick fällt schnell auf, wie dicht alles wirkt, obwohl es genug Freiraum gäbe – schließlich kosten Pixel nichts.

Auf der anderen Seite steht natürlich das übertrumpfende Argument des Erfolgs, irgendwo wird vieles an der Website durch A/B-Testing solide begründet sein. Das soll mich aber nicht davon abhalten einige dieser Entscheidungen zu hinterfragen.
Design Prozess
Meine Arbeit beginnt mit grundsätzlichen Fragen hinsichtlich des Layouts und der zugrundeliegenden Informationsstruktur, die sich der Großkonzern über die Jahre herangezüchtet hat.

Meine Hauptargumente gegen die aktuelle Aufmachung zielen hauptsächlich auf die Typografie in Verbindung mit Spacing des Layouts ab.

Der Großteil des Textes ist verhältnismäßig klein gesetzt mit engem Zeilenabstand, was zu einer verringerten Lesbarkeit führt. Einige Elemente sind nah bei einander und genießen nur sehr sparsamen Abstand zu den Elementkollegen.
Typografie
Um dem Stil von Amazon treu zu bleiben und nichts realitätsfernes zu produzieren, bleibe ich bei der Hausschrift Amazon Ember. An sich ist sie eine freundliche, humanistische Schrift, die leider standardmäßig dicht gesetzt ist und ihren Buchstaben wenig Freiraum gönnt.

Durch Hinting sei die Lesbarkeit wohl selbst auf sehr niedrig auflösenden Displays gewährleistet, laut Amazon, wobei sich die Frage stellt, inwiefern das heutzutage noch notwendig ist.

Ich spendiere fast allen Elementen zwei Größen mehr, wodurch wir bei Lesetext 20 Punkt und für kleinere Elemente 18 Punkt Schriftgröße genießen dürfen.
Textansicht von Amazon mit enger Schrift und schlechter LesbarkeitText von Amazon mit der von mir optimierten Lesbarkeit durch Schriftgröße und Zeilenabstand
Links: Originale Formatierung
Rechts: Verbesserte Lesbarkeit durch größeren Zeilenbstand und erhöhte Laufweite
Varianten
Einige der Varianten beruhen auf Änderungen an der Informationsarchitektur, statt auf rein typografischen Anpassungen.

Beispielsweise hat sich eine irrwitzige Nutzung ergeben, für das zufällig ausgewählte Produkt, das in meinen Screens zu sehen ist: Der Anbieter hat die Funktion "Stil auswählen" anscheinend missverstanden und dort Kombinationen von Produkten angeboten, die zum Kauf stehen.

Mit diesem realen Problem habe ich mich folgend auseinander gesetzt und Varianten getestet.
Variante der "Stil Auswahl" von Amazon mit Kacheln und Text
Stil-Auswahl durch Boxen mit rein Typografischem Inhalt und ohne Bilder.
Variante der "Stil Auswahl" von Amazon mit Kacheln, Bild und Text
Stil-Auswahl durch Boxen mit Beschriftung und Bildern um zu verdeutlichen, welche Produkte hinter den Namen stecken.
Ergebnis
Die finale Version vereint viele Verbesserungen, die ich auf dem Weg erarbeitet und getestet habe.

Darunter zählen typografische Eingriffe, wie eine bessere Laufweite der Schrift, einen höheren Zeilenabstand und generell größere Typografie für bessere Lesbarkeit – aber auch Layout-Entscheidungen, wie den Inhalt der rechten Box mit den Kaufoptionen deutlich aufzuräumen.

Der Beschreibung und der Auswahl des Produkts habe ich mehr Platz eingeräumt, zudem sind die Kaufoptionen sinnvoller sortiert und angeordnet.

Die Sektion Wird oft zusammen gekauft konnte durch den gewonnenen Weißraum sogar höher rutschen und wirkt dennoch leicht.
Screen eines verbesserten und aufgeräumten Amazon Shops
Die endgültige Version mit allen Optimierungen für Lesbarkeit, Layout und Übersicht.
Reflexion
Einen so vertrauten Service neu zu gestalten und merklich zu verbessern erfordert sowohl Feingefühl, als auch eine fast schon taktische Herangehensweise.

Das Projekt hielt eine sehr schöne Balance zwischen Herausforderung und Potenzial, dass ich es heute zu einer meiner liebsten Arbeiten zähle. Obwohl sich mir zahlreiche Probleme gestellt haben – wie das endlose A/B-Testing von Amazon, das meinen Ausgangspunkt oft verändert hat – konnte ich alle davon mit hartnäckigem ausprobieren bewältigen.
Entstehungszeitraum

4/2020 – 09/2021

Team

Leon Wolff

Programme

Sketch

betreuung

Prof. Frank Rausch

Weitere Projekte
Phone Mockup with example Content
UI/UX Design
Mashup: Socy

Eine App, die Menschen nach Corona hilft soziale Kontakte zu finden und verstärken.

UI/UX Design
VIKUS: Slide in Time

Eine Visualisierung von mehren tausend Dias, mit der Möglichkeit zur Sortierung.

Menü