E-Commerce-Sites sind notorisch beschäftigt und überfüllt.
Heute werden wir eine Menge Onlineshops untersuchen, die diesen Trend brechen, indem sie funktional und attraktiv sind. In jedem der folgenden Beispiele wird eine einzigartige Lektion für gutes E-Commerce-Design vermittelt. Lass uns anfangen!
Zuerst das Problem
Bevor wir gut konzipierte Websites einschätzen können, müssen wir darüber nachdenken, was mit dem traditionellen E-Commerce-Format nicht stimmt. Eine kluge Person bemerkte einmal, dass ein Kamel ein von einem Komitee entworfenes Pferd ist. Dieser clevere Scherz gilt definitiv für E-Commerce-Websites. Namhafte Online-Shops haben oft zu viel Input von zu vielen Leuten, was zu einem Durcheinander von guten Absichten und großartigen Funktionsideen führt, die nie richtig synergistisch miteinander integriert wurden.
Der Screenshot oben ist nur ein kleiner Teil der Homepage von Kmart.com. Wie Sie sehen, ist es ein Zugunglück. Fahren Sie zur Website und Sie werden feststellen, dass die als Ganzes aufgenommene Seite noch schlechter ist. Wie auch bei Kmart.com leiden viele E-Commerce-Websites unter immenser Unordnung. Es gibt so viel Konkurrenz für Ihre Aufmerksamkeit, dass das Endergebnis Ihre Augen von Ort zu Ort hüpfen, ohne einen wirklichen Zweck oder Fokus.
Nun die Lösung
Werfen wir einen Blick auf einige Websites, die es richtig gemacht haben. Wenn Sie sich die einzelnen Websites unten ansehen, vergleichen Sie die Benutzeroberfläche mit der von Kmart, um zu sehen, wie viel effektiver ein sauberes und einfaches Layout sein kann.
Xtreme Mac
Xtreme Mac bietet das originellste und innovativste Einkaufserlebnis, das ich bei meiner Suche gefunden habe (Icon Dock unten war knapp danach). Sie erhalten ein einfaches Raster von Produktaufnahmen mit hellen, farbenfrohen Rollover-Effekten. Wenn Sie auf ein Element klicken, wird es nicht auf eine dedizierte Seite verschoben, sondern das gesamte Raster wird fließend verschoben, sodass die ausgewählte Zelle auf das Achtfache ihrer normalen Größe vergrößert werden kann. Sie erhalten dann eine größere Produktaufnahme, eine kurze Beschreibung und die Option, mehr zu erfahren oder jetzt zu kaufen. Klicken Sie auf ein anderes Element, um das dynamische Layout erneut zu ändern.
Ich fand die Xtreme Mac-Benutzeroberfläche wunderschön und es macht Spaß, damit zu spielen. Ihre Besucher dazu zu bringen, nicht nur mit Ihrem Website-Design beeindruckt zu sein, sondern tatsächlich das Einkaufserlebnis zu genießen, ist der heilige Gral des E-Commerce-Designs. Je mehr Sie Ihre Website genießen, desto mehr Zeit verbringen sie damit. Das macht sie theoretisch eher dazu neigen, tatsächlich etwas zu kaufen (das ultimative Ziel einer E-Commerce-Site!).
Icon Dock
Sofort sehen Sie, dass das Icon Dock eine wunderschöne Seite voller erstklassiger Illustrationen ist. Was ich am Icon Dock am liebsten mag, ist der Umgang mit Einkaufswagen. Bei einigen Websites ist es ziemlich schwierig, den Inhalt Ihres Warenkorbs zu sehen und zu bearbeiten. Mit Icon Dock erhalten Sie jedoch ein visuelles Dock. von Symbolen, die beim Einkaufen bei Ihnen bleiben. Wenn Sie etwas hinzufügen möchten, ziehen Sie das Symbol einfach in das Dock, um es dort abzulegen. Wenn Sie etwas aus dem Dock entfernen möchten, drücken Sie einfach das kleine? X? auf dem Symbol.
Dies ist so intuitiv gestaltet, dass Sie wirklich keine Anweisungen benötigen. Es funktioniert genau so, wie Sie es erwarten würden. Und für diejenigen, die es nicht sofort verstehen, gibt es noch die alte Option, auf "in den Warenkorb legen" zu klicken. Taste. Dies ist ein wichtiges Merkmal. Denken Sie bei der Gestaltung einer einzigartig interaktiven Oberfläche immer darüber nach, ob Sie immer noch den traditionellen Weg für diejenigen einbeziehen sollten, die Ihre neue Idee möglicherweise nicht verstehen. Dies ermöglicht Ihnen, Ihren eigenen Weg in der Interaktivität zu beschreiten, während die Benutzerfreundlichkeit erhalten bleibt.
Nike
Sorry Flash Hasser, aber ich mag diese Seite wirklich. Um ein wenig einzugestehen, die Ladezeiten für jede Seite sind ziemlich ärgerlich. Die Gesamtanlage ist jedoch ein beeindruckendes visuelles Vergnügen. Wie bei Kmart gibt es eine Menge Artikel zum Verkauf (vielleicht nicht so viel, aber das Argument ist immer noch gültig), aber anstatt die Startseite mit nicht übereinstimmenden vorgestellten Gegenständen zu stören, hat Nike alles auf der Seite visuell integriert nahtlose Weise. Sie haben weit über zehn einzigartige Abschnitte auf einer einzigen Seite, aber sie wirken absolut zusammenhängend. Schauen wir uns ein paar Dinge an, die sie getan haben, um dies zu erreichen.
Das erste, was sie getan haben, um Unordnung zu vermeiden, ist ziemlich einfach. Anstatt zufällig große Banner zu stapeln, die verschiedene Elemente wie Kmart übereinander stapeln, hat Nike ein Hauptbanner, das zwischen drei Nachrichten rotiert. Dies ist sicherlich nicht bahnbrechend, aber es ist etwas, das zu wenig Designer berücksichtigen, wenn sie eine Seite mit Inhalt bis zum Rand laden. Vorgefertigte Bibliotheken wie jQuery machen diese Art von rotierendem Inhalt zum Kinderspiel und kann eine ansonsten statische Seite auf subtile, nicht störende Weise zum Leben erwecken.
Das nächste, was Nike getan hat, um Unordnung zu vermeiden, besteht darin, alle Abschnitte unter dem Hauptbanner auf eine durchgehende Hintergrundfarbe zu setzen, um zu vermeiden, dass das Bild fällt. Schauen Sie sich die Verkaufsartikel-Boxen im Kmart-Design an. Auf diese Weise sieht die gesamte Seite so aus, als wäre sie zur selben Zeit von denselben Designern erstellt worden, im Gegensatz zu einem alten Design, in das Sie im Laufe der Zeit immer mehr und mehr nicht übereinstimmende Elemente einsetzen. Es geht um Synergien.
Dyson
Die Lehre, die wir von Dyson lernen können, ist, dass Sie beim Staubsaugen das Gefühl haben können, als würde man einen Mercedes kaufen. Egal, was Sie gerade verkaufen, wenn Sie wollen, dass es hochwertig aussieht, lassen Sie sich von Websites inspirieren, die Luxusautos, Yachten oder etwas anderes verkaufen, das mehr kostet, als Sie in einem Jahr verdienen. Der schwarze und graue Hintergrund wird durch weiße und / oder blaue Spritzer ergänzt, die wirklich kontrastreich von der Seite springen. Was die Show wirklich stiehlt, ist die Produktfotografie (zweifellos so viel Photoshop wie das eigentliche Foto), die das Wesentliche des attraktiven Produktdesigns einfängt. Beachten Sie auch das rotierende Banner wie beim Nike-Beispiel.Sie werden dies in den folgenden Beispielen immer wieder sehen, aus gutem Grund. Es ist einfach eine großartige Möglichkeit, eine Tonne Inhalt auf kleinstem Raum ohne visuelle Unordnung zu platzieren.
SkinBox
Skinbox macht das Kaufen von Foren-Skins unglaublich einfach. Die Homepage besteht zum größten Teil aus einem großen Bereich, der ihre Themen zeigt. Die logischen Kategorien (hell, dunkel, professionell usw.) erleichtern das sofortige Auffinden der von Ihnen gesuchten Skins. Die Skins in jeder Kategorie werden in einem großen Raster mit der Option angezeigt, jetzt zu kaufen oder weitere Informationen über das Skin anzuzeigen. Die letztere Option ist wichtig. E-Commerce-Websites füllen zu oft eine Seite mit langweiligen Produktinformationen, was zu einem textintensiven Layout führt, bei dem versucht wird, etwas zu verkaufen, das wirklich visuell ansprechend ist (zumindest in diesem Fall). Wenn Sie das Design eines Artikels verkaufen, sollten Sie die Funktionsmerkmale hinter einem? Mehr Info? Damit Benutzer, die diese Informationen wünschen, diese leicht finden können und Benutzer, die nur im Internet surfen, nicht davon abgelenkt werden.
DropBags
Ich habe wirklich keine Ahnung, was diese Site verkauft. Wie? Abschnitt sagt etwas über das Einsetzen des Beutels in einen Eimer, das Befüllen mit Pflanzen und Eis und das Aufrühren, aber ich kann mir nicht vorstellen, warum ich jemals das Pflanzenleben einfrieren möchte. Sie wollen vielleicht, dass ich denke, es sei wissenschaftlich, aber ich bin mir ziemlich sicher, dass es Hexerei ist.
Der Punkt ist, es ist ein funky Produkt. Sie verkaufen eine Tasche, die Sie in einen Eimer legen. Große Sache richtig? Sie haben die Seite um den verrückten Bucket Bag so ansprechend gemacht, dass ich fast überzeugt war, dass ich einen brauchte. Als Webdesigner können Sie das Nike-Konto nicht immer landen. Manchmal erhalten Sie einen Kunden, der ein "Mehrzweck-Extraktionskit" verkaufen möchte. das ist im Wesentlichen ein überteuerter Eimerfutter. Unter diesen Umständen sollten Sie genauso viel Mühe und Kreativität aufbringen, als würden Sie für einen namhaften Kunden arbeiten. Machen Sie das Einkaufserlebnis so einfach und unkompliziert wie möglich und machen Sie die Umgebung des Produkts einladend und attraktiv.
IKEA
Ikea gewinnt den Preis für das interaktivste Einkaufserlebnis. Wenn ich den Ikea-Katalog per E-Mail bekomme, sitzen meine Frau und ich gerne zusammen und blättern gemeinsam durch, um Designideen zu finden und zu sehen, welche coolen neuen Produkte sie auf den Markt gebracht haben. Dies ist erfreulich, weil die Ikea-Erfahrung sorgfältig strukturiert wurde, sodass das Durchblättern des Katalogs wie das Durchlaufen ihres Ausstellungsraums ist. Anstatt mit einzelnen Gegenständen präsentiert zu werden, sehen Sie eine benutzerdefinierte Fotografie eines gesamten Raums, die vollständig aus Ikea-Produkten besteht. Sie geben Ihnen hilfreiche Informationen über die Kosten jedes einzelnen Elements sowie die Kosten für den Kauf des gesamten Zimmers als Set. Dies hilft normalen Menschen, die nicht viel über Innenarchitektur wissen, schöne Räume zu schaffen.
Vor kurzem hat Ikea diese Erfahrung in ihren Online-Shop übertragen. Was Sie bekommen, ist eine Erfahrung, die dem Durchblättern des Katalogs ähnelt, jedoch viel interaktiver und dynamischer. Sie können auf die Symbole neben bestimmten Produkten klicken, um einen näheren Blick oder versteckte Funktionen zu erhalten, die Ansicht zu ändern, um sich im Raum umzusehen, oder die Raumansicht zu überspringen und ein einfaches Produktraster anzuzeigen. Wie einige der anderen Beispiele oben, sucht Ikea nach einem Einkaufserlebnis, das nicht nur Spaß macht, sondern sogar als Spaß betrachtet werden kann. Wenn Sie eine E-Commerce-Website erstellen, sollten Sie darüber nachdenken, wie Sie das Erlebnis verbessern können, indem Sie etwas interaktiveres hinzufügen als Ihr durchschnittlicher Online-Shop.
Keller-Dieb
Cellar Thief ist nur ein großartiges Beispiel für kreatives Webdesign. Die Designer mischten aktuelle Webdesign-Trends mit satten Texturen und leuchtenden Farben aus der Weinindustrie, um einen erstaunlich attraktiven Online-Shop zu schaffen. Beachten Sie, dass sie eigentlich nur drei verschiedene Weine verkaufen, was ein kleinerer Produktsatz ist, als Sie in Ihren Projekten wahrscheinlich haben werden, aber aus diesem Beispiel gibt es noch viel zu lernen.
Neben den zum Verkauf stehenden Weinen gibt es auf der Seite eine Reihe von sekundären Inhalten wie Weintipps, Blog-Feed usw. Beachten Sie, dass jeder dieser kleinen Abschnitte auf der rechten Seite einer mit Links gefüllten Seite platziert wurde -ausgerichteter Text. Dies ist so strukturiert, dass das erste, was Sie sehen (Blick von links nach rechts auf die Seite), der Hauptinhalt ist: das zu verkaufende Produkt. Erst nachdem Sie die Seite einige Sekunden angesehen haben, bemerken Sie den sekundären Inhalt. Auf dieser speziellen Seite würde dies nicht zutreffen, wenn der Inhalt links platziert würde. Wenn Sie diesen sekundären Inhalt nach links ausrichten, erhält er möglicherweise eine unverdiente primäre Position in der visuellen Hierarchie. Versuchen Sie immer, sich die Reihenfolge vorzustellen, in der ein Besucher die Objekte auf der Seite sieht, und den Inhalt entsprechend zu strukturieren.
Eine letzte Sache über die Organisation von Informationen. Sehen Sie sich an, wie viel Inhalt zu jedem einzelnen Wein gehört. Stellen Sie sich nun vor, wie die Seite aussehen würde, wenn der Designer nicht gedacht hätte, diese Informationen in Registerkarten aufzuteilen. Wie das oben beschriebene rotierende Banner mit Inhalten bieten Registerkarten eine stilvolle und effektive Möglichkeit, eine lächerliche Menge an Inhalten in einem kleinen, benutzerfreundlichen Bereich zu unterdrücken. Bei der Gestaltung von Drucksachen bitte ich ständig, dass meine Kunden die erforderlichen Informationen aufgrund räumlicher Einschränkungen kürzen. Im Gegensatz dazu gibt Ihnen das Webdesign viel mehr Freiheit, um die Fülle an Informationen bereitzustellen, die Ihr Kunde in der geschlossenen Art und Weise wünscht, die ein gutes Design erfordert.
Attraktivere E-Commerce-Sites
Hier einige Beispiele von Designern, die das durcheinandergebrachte, unbeholfene E-Commerce-Stigma überwunden haben, indem sie sich auf ästhetische Anziehungskraft und Funktionalität konzentrieren. Schauen Sie bei jedem Beispiel vorbei und suchen Sie nach den oben genannten Dingen.Es gibt viele Beispiele für unterhaltsame und gleichzeitig einfache Einkaufserlebnisse, erstaunliche Fotografie / Artwork und kreative Organisation von Inhalten, um Sie zur E-Commerce-Größe zu inspirieren.
Baby Quasar
Ooga Zone
ShoeGuru
Madsen Fahrräder
ich / denti / tee
Abercrombie & Fitch
Sucr?
DNA11
MacStylez
Eins + Nur
Zwölf Süden
Sony
Fazit
Nun, da wir uns den falschen und richtigen Weg zum Entwerfen einer E-Commerce-Website angesehen haben, möchte ich Ihre Gedanken hören. Erzählen Sie uns, was Sie beim Online-Shopping irritiert und was Sie an den obigen Beispielen lieben oder hassen.
Weitere Inspirationen für den E-Commerce finden Sie in Cart Frenzy, einer Galerie für Online-Shopdesign.