Modernes Webdesign und User Experience

Modernes Webdesign und User Experience

 

 

Statistiken zeigen, dass 75% der Kunden nach einer einzigen schlechten Erfahrung mit einer Marke zu einem anderen Anbieter abwandern. Der erste Eindruck zählt. Warum soll der Kunde einen Webshop wieder besuchen, nachdem er einmal unzufrieden war oder ihm einmal nicht gefallen hat? Jeder wird sich dieses Szenario vorstellen können, dass ein verpatzter Eindruck schwer wieder Rückgängig gemacht werden kann. Modernes Webdesign und User Experience (UX) helfen hierbei.

 

Begriffsdefinition: Modernes Webdesign

 

Modernes Webdesign umschließt erstmal alles, das Design einer Seite sowie das Anwendererlebnis - auch User Experience (UX) genannt. Die User Experience beschreibt, wie der Kunde sich mit dem Onlineshop auseinandersetzt, welche Verhaltensweisen, Ansichten und Emotionen er auf diesem erlebt. Grundsätzlich gilt, weniger ist mehr und eine gute Strukturierung hilft bei der Pflege sowie beim Finden von Produkten. Somit kann man sagen, dass modernes Webdesign den Kunden dabei unterstützt, zum Ziel zu finden. Dies kann zum Beispiel bei einem Onlineshop der Kaufabschluss oder auf einer Landingpage die Kontaktaufnahme sein.

 

Modernes Webdesign - gute User Experience

 

Wie bereits erwähnt, ist die Strukturierung einer Website ausschlaggebend. Diese sollte im besten Fall ohne Fremdwerbung und Backlinks auf andere Webseiten auskommen. Damit soll nicht gemeint sein, dass überhaupt keine Verlinkung zu anderen Websites stattfinden soll. Verlinkungen sind wichtig, müssen aber für den Kunden und das Marketingziel auch inhaltlich Sinn ergeben. Beispiel Onlineshop wäre Fremdwerbung nicht sinnvoll, da diese den Kunden von den eigentlichen Produkten ablenkt. Finanziert sich die Website von der Fremdwerbung ist dies natürlich anders und man möchte ggf. sogar, dass auf diese geklickt wird.

Modernes Webdesign, wozu auch mittlerweile Responsive Design (die optimierte Darstellung für verschiedene Endgeräte) zählt, ist unabdinglich da man auch nicht in einem lokalen Laden einkauft, der nicht zum Verweilen einlädt. Modernes Webdesign fördert Vertrauen in die Webpräsenz und lässt den Besucher der Website mit einem guten Gefühl wiederkommen. Zusätzlich ist wichtig, dass der Websitebesucher zu jedem Zeitpunkt weiß, wo er sich gerade befindet und was er als nächstes tun soll. Das "wo" lässt sich durch Breadcrumbs darstellen.

Im Beispiel Onlineshop könnte diese wie folgt aussehen: "Produkte > Elektronik > Smartphones". Ebenfalls unabdingbar ist es, einen Call-to-Action-Button einzubauen. Dieser muss nicht immer ein Button im klassischen Sinne sein, es kann auch ein farblich hervorgehobener Bereich sein, welcher zeigt, was der Websitebesucher als nächstes tun soll, zum Beispiel der "in den Warenkorb"-Button auf einer Produktdetailseite hebt sich im Optimalfall bereits farblich ab, sodass der Kunde diesen leicht findet.

 

Wie gehen Sie beim modernen Webdesign am besten vor?

 

Modernes Webdesign sollte clean gestaltet werden. Hierbei fällt der Begriff Material Design welche für seinen Minimalismus bekannt ist. Ebenso sollte die Website 100% des Browserfensters einnehmen, da eine Seite welche nur 1000 Pixel breit ist, nicht mehr mit modernen Maßstäben konkurrieren kann. Natürlich muss der Inhalt auf größeren Endgeräten in einem gewissen Rahmen gehalten werden, da ansonsten ein angenehmes Lesen nicht möglich ist.

Gestalterisch gibt es beim Modernen Webdesign keine Grenzen, wobei man dabei beachten sollte, dass man sich an großen modernen Websites gegebenenfalls orientiert, da der Kunde dies bereits gewöhnt ist. Anschließend muss man sich immer die Frage stellen, ob die eigene Moderne Website gut strukturiert ist. Man versetzt sich hierbei in die Lage des Kunden und versucht auf die einfachste Art und Weiße durch die Seite zu navigieren. Zusätzlich sind Meinungen von Außen auch immer hilfreich da man ansonsten Gefahr läuft Ungereimtheiten immer wieder zu übersehen und an vermeintlich wichtigeren Stellen arbeitet. Fragen Sie einfach Ihre Mitarbeitern, Freunde oder Bekannte, was Sie den von Ihrer Website und der Nutzerfreundlichkeit halten.

Zudem ist die konzeptionelle Arbeit im Vorfeld das A und O. Bevor man das moderne Webdesign umsetzt, sollte man sich mit sogenannten Mockups (zu deutsch Attrappen) ein Bild von der Gestaltung und den Funktionalitäten der modernen Website machen und mit verschiedenen Ideen durchspielen. Solche Tools finden Sie im Internet teilweise kostenlos. Ganz wichtig sei hierbei noch erwähnt, dass man bei der mobilen Ansicht beginnt und sich anschließend um die größeren Auflösungen für Tablet und Desktop-PC Gedanken macht. Somit hat man den Websiteinhalt auf die kleinstmögliche Darstellung gepackt und passt die Darstellung mit zunehmenden Platz wieder an. Diese Ideen und Zeichnungen finden Sie meist kostenlos im Internet und Sie können dann später gegebenenfalls auch Ihrer Werbeagentur oder Freelancer, der das moderne Webdesign der Website umsetzt, einen Leitfaden geben, wie die Website zu auszusehen und zu funktionieren hat.

 

 

Modernes Webdesign und User Experience (UX) am Beispiel Onlineshop

 

 

Am Beispiel eines Onlineshops wollen wir Ihnen kurz die einzelnen und wichtigsten Bereiche aufzeigen, welche im Hinblick auf die User Experience (UX) verbessert werden können:

 

  1. Startseite / Landingpage

 

Wie oben erwähnt, sollte die Startseite oder Landingpage, auf der der Kunde vermutlich einsteigt, klar strukturiert und nicht mit zu viel Informationen überfrachtet sein. Für das Produkt oder das Ziel der Landingpage unwichtige Informationen, sollten wegelassen oder wenn diese dennoch benötigt werden z.B. in den Footer ausgelagert werden. Ein Call-to-Action-Button oder -Bereich sollte integriert werden, sodass ein gezieltes Bewerben und Weiterleiten des Kunden möglich ist.

 

  1. Produktliste und Listenseiten

 

Unnötiger Inhalt sollte weggelassen werden. Auf den ersten Blick sollte ein Produkttitel, mehrere aussagekräftigen Produktgrafiken oder Produktvideos, der Preis und eine aussagekräftige Kurzbeschreibung angezeigt werden. Kurz gesagt, lassen Sie am besten keine Fragen über das Produkt offen. Interessant ist hierbei auch die Einbindung von Produktbewertungen von vorherigen Käufern. Dies gibt erneut Sicherheit, da der Kunde ein Gefühl bekommt, ob das entsprechende Produkt für ihn passt und man schafft dadurch Vertrauen, da andere Kunden das Produkt bereits gekauft gegebenenfalls bestellt haben. Wieder wichtig ist der Call-to-Action "in den Warenkorb", welcher aufgrund des Leseflusses rechts positioniert werden sollte, da in den meisten Kulturen von links nach rechts gelesen wird. Dieser sollte natürlich auch wieder farblich oder designtechnisch auffallen. Bei einem modernen Webdesign ist dies ganz einfach umsetzbar.

 

  1. Warenkorb

 

Auf der Warenkorbseite finden die meisten Absprünge statt. Aus diesem Grund muss hier ein besonderes Augenmerk gelegt werden. Wichtig ist es, vertrauensbildende Maßnahmen zu treffen. Dies kann z.B. durch Gütesiegel erreicht werden. Zusätzlich ist es wichtig auf Lieferzeiten, die Verfügbarkeiten der einzelnen Produkte, sowie auf das Rückgaberecht des Kunden hinzuweisen. Dies schafft nochmals Vertrauen da sofort klar ist, auf was sich der Kunde einstellen muss.

Wie in den oberen Beispielen beschrieben, sollte der Call-to-Action-Button (z.B. "weiter zur Kasse") rechts mit farblicher Unterscheidung dargestellt werden.

 

  1. Checkout

 

Viele Kunden möchten sich nicht bei einmaligem Kauf auf einer Website auch auf dieser anmelden. Aus diesem Grund sollte man auf einen Anmeldezwang verzichten und bestenfalls noch Möglichkeiten schaffen sich mit bestehenden Konten (z.B. Amazon, PayPal, etc.) einzuloggen und die kaufrelevanten Daten von diesen zu übernehmen. Dies führt im weiteren Verlauf auch zu einem schnelleren Abschluss.

Der Kunde soll jederzeit wissen, wo er sich gerade im Checkout befindet und wie viele Schritte noch zu erledigen sind. Dies erzeugt eine gewisse Sicherheit dahingehend, wann der Kauf vollständig abgeschlossen ist. Bei einem modernen Webdesign ist die Integration einer Prozessbar somit Pflicht und sehr wichtig.
Des Weiteren sollte der Checkout gekapselt sein, sodass wenn möglich ein separater Header und Footer verwendet wird, in dem nicht die ganzen Produktkategorien oder ähnliches dargestellt werden. Dies hat den Vorteil, dass der Kunde weniger abgelenkt wird und sich voll und ganz auf den Kaufabschluss konzentrieren kann. Ein "zurück"-Button sollte es natürlich dennoch geben, sodass der Kunde jederzeit wieder zurückkehren kann. Dieser sollte aber nicht in den Farben des Call-to-Action-Buttons gestaltet sein, da dieser immer im modernen Webdesign den Weg nach vorne markiert.

Auf der letzten Seite des Checkouts sollten noch einmal alle Informationen gebündelt dargestellt sein. Wichtig ist hierbei, dass sich Produktmengen auch noch einmal ändern lassen oder Produkte entfernt werden können. Nichts wäre schlimmer, als wenn der Kunde so kurz vor dem Ziel noch einmal zum Warenkorb zurückkehrt, abgelenkt wird oder gar den Kauf in Ihrem Onlineshop abbricht.

 

  1. Nach Kaufabschluss

 

Der Kauf ist erfolgt und beide Seiten sind hoffentlich zufrieden mit der User Experience. Wichtig ist auf der Dankesseite dem Kunden mitzuteilen, welche Schritte kaufnachfolgend zu erwarten sind. Ein Dank mit der Info, dass eine E-Mail mit allen wichtigen Informationen auf dem Weg ist, gibt dem Kunden wieder ein Stück Sicherheit und schafft Vertrauen. Zusätzlich sollte hier gleich die Anzeige der Auftragsnummer sowie entsprechende Kontaktmöglichkeiten angezeigt werden.

 

Fazit

 

Zusammenfassend lässt sich sagen, dass ein modernes Webdesign und eine gute Strukturierung enorm wichtig sind. Der Kunde sollte möglichst schnell das finden, was er sucht und immer im Blick haben, was er als nächsten tun sollte, um das Produkt oder die Dienstleistung in Ihrem Onlineshop zu kaufen. Außerdem sollte sich der Kunde zu jeder Zeit des Kaufens nicht alleingelassen fühlen, sodass der Websitebesucher auch mit einem guten Gefühl in der Zukunft wieder auf den Shop zurückzukehren wird, um dort in voller Zufriedenheit einzukaufen.

 

Haben Sie noch weitere Fragen zum Thema Modernes Webdesign und User Experience.

Rufen Sie uns einfach an.

Jürgen Kuchenreuther

Dieser Blog wurde von verfasst.

Design ist oft unsichtbar und fasziniert dennoch.
Bei nahezu allen Softwarelösungen spielt Usability und die Frontend-Darstellung eine große Rolle.
Seit nunmehr über 15 Jahren habe ich mich dazu verschrieben, das Web etwas besser zu machen.

Interesse an weiteren Blogs?

Teilen Sie diesen Blog auch in Ihren Social Media Kanälen

Kontakt


skriptstube GmbH
Frauenrichter Straße 2
92637 Weiden in der Oberpfalz
0961 - 784 897 55
info@skriptstube.de

Karriere - Jobs
Zu den Stellenangeboten
Ansprechpartner: Peter Karwath
0961 - 784 897 55
peter.karwath@skriptstube.de