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 komplett 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.

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.

Stil-Auswahl durch Boxen mit rein Typografischem Inhalt und ohne Bilder.

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.

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.