10 Usability Tipps für Online Shops zur Kundenanfragen-Reduzierung

Für einen Webdesigner kann auch manchmal eine ganz andere Anforderung kommen, nämlich beispielsweise beim Konzept für einen Online Shop oder einen Redesign eines bereits bestehenden. Die Aufgabe vom Design und Konzept ist es dann auch die Anzahl der Kundenanfragen zu reduzieren. Denn jede Anfrage kostet natürlich Geld und verbraucht die Ressourcen eines Unternehmens. Es muss vieles beim Design beachtet werden, um nicht nur den Bestellprozess für den User einfach und transparent zu gestalten, sondern auch das Verhalten des Shops nach dem Bestellvorgang. Klare und schnelle Bestätigungen per Email über den erfolgreiche abgeschlossenen Kaufprozess und den Versand des Artikels sind nur die wenigsten und wichtigsten Bestandteile davon. Besonders wenn die bestellten Produkte in mehrere Pakete gesplittet werden und zeitlich versetzt verschickt werden sollte die Kommunikation sehr eindeutig und schnell sein.

Hier finden Sie die wichtigsten 10 Usability Optimierungen, um die Anzahl der Kundenanfragen zu minimieren:

1. Gratis Beilagen und Gutscheinaktionen sollten immer detailliert beschrieben werden, damit der User garantiert versteht, wann und was er bekommt.

2. Bei jedem Artikel muss die Lieferzeit eindeutig erkennbar sein, um Fragen „kommt es noch vor Weihnachten?“ zu verhindern.

3. Verschiedene Versandkosten pro Zahlungsart und Land sollten möglichst in einer Tabelle übersichtlich dargestellt werden, das erspart unnötige Nachfragen der Kunden.

4. Bei allen Vorkasse Bestellungen sollten die Kontodaten sehr auffällig (große Schrift, evtl. farbige Hervorhebung) spätesnens in der Bestellbestätigung angezeigt werden, damit der Kunde nicht suchen oder nachfragen muss.

5. Im Shop sollte deutlich und klar beschrieben sein, dass ein Widerrufsrecht besteht. Die Formulierungen sollten nicht im Rechtsdeutsch, sondern klar und verständlich für die User sein.

6. Die durchgeführte Bestellung sollte sofort per Mail bestätigt werden – so können keine Unsicherheiten beim User entstehen und es gibt keine Nachfragen bei der Service-Hotline.

7. Auch der Versand der bestellten Waren sollte per Mail bestätigt werden, dann kann der Kunde die restlichen Liefertage selbst gut abschätzen.

8. Über ein Paket-Tracking sollte der User die Möglichkeit erhalten, den Status seiner Lieferung selbst verfolgen zu können.

9. Im Paket sollte ein Retourenschein beiliegen, um eventuelle Rücksendungen ohne Rückfrage zu ermöglichen.

10. Je schneller die Gutschrift für die Retoure erfolgt, desto weniger Fragen können auch anfallen.

Diese Liste basiert auf der aktuellen Usability Studie von Shoplupe.de

Warenkorb Icon Design

Es tut einfach nur gut, mal zur Abwechslung einen richtig modernen und auch noch gut gebrandeten Warenkorb in einem Online Shop zu sehen. Warum müssen wir ständig die pixeligen Drahtboxen auf zwei Rädern ertragen??? Es geht doch soviel schöner! Görtz beweist einen guten Geschmack und platziert den besten Warenkorb Icon seit geräumiger Zeit:

warenkorb cart design online shop

MySpace Designs

Viele fragen sich, wie alle anderen auf myspace die tollen und ausgefallenen Designs der eigenen Profilseite hinzaubern. Auch beim näheren betrachten sieht es so aus, als ob man richtig html & css beherrschen müsste und ein halber Programmierer sein sollte. Doch es ist alles viel einfacher. Es gibt natürlich schon unzählige und teilweise richtig interessante fertige Design für das myspace. So ein Portal für die Layouts ist www.myspacemaster.net. Hier erhält man die Design-Layouts kostenlos zum Download, thematisch sortiert und mit einer kleinen Vorschau. Findet man das passende und repräsentative Design, reicht es den Code zu kopieren und den Einstellungen des eigenen Profils bei myspace einzufügen. Für alle Fortgeschrittenen sind die fertigen Layouts auch eine tolle Ausgangsbasis, um diese zu „friesieren“ oder auf Neudeutsch zu pimpen. Hier ist eine kleine Auswahl an interessanten Design-Layouts:

MySpace Design Layout

Webdesign Myspace Profil

Usability Studien für Webdesigner

Usability Heatmap Studien. Kostenlose Downloads Usability Buch, Studie, Heatmap.

Diese Studien, Tests und Untersuchungen gehen an die Platzierungen zentraler Webdesign-Elemente und bieten Beipiele von Heatmaps und Eyetracking Auswertungen, vermitteln Erkenntnisse über die Positionierung von Suchboxen, Bilder und dem Design von Webseiten und Online Shops.

usability heatmap frauen user usability heatmap maenner user

Eye Tracking Studie und Heatmaps „Five Days“
Unter dem Motto Five Days = Five Heatmaps lief eine Eye Tracking Studie von großen Onlineshops und Webportalen. Nun kann man die auszugsweise in Betrachtung nehmen. Eye Tracking zeigt durch unterschiedliche Farbflächen, wohin Besucher schauen. Normalerweise sind die helleren Bereiche, die auch mit der höchsten Aufmerksamkeitsdichte von Usern. Dadurch sind die Ergebnisse der Usability Studien sehr einleuchtend, weil sehr visuell kommuniziert und immer wieder spannend anzuschauen.
Getestete Webseiten / Onlineshops:

  • dixons.co.uk
  • currys.co.uk
  • amazon.co.uk
  • marksandspencer.com
  • hmv.co.uk

„Usability Studien für Webdesigner“ weiterlesen

Internet User sind Banner-blind

Eine aktuelle Eyetracking-Studie des amerikanischen Usability-Experten Jakob Nielsen belegt Defizite in der Wirksamkeit von Bannern. Eine Heatmap-Auswertung der Plätze auf der Website, an denen die Augen der Besucher am längsten verweilen, zeigt: Banner werden von den Internetnutzern keines Blickes gewürdigt – zumindest wenn sie, wie von den Internetnutzern gelernt, am oberen und rechten Seitenrand positioniert werden. Andererseits zeigen die Heatmaps, dass Designelemente, die wie Werbung aussehen, aber in Wirklichkeit redaktionelle Inhalte bereitstellen – beispielweise Linklisten zu verwandten Themen – von den Besuchern ebenfalls ignoriert werden. Dies alles sind sehr wichtige Hinweise für das Webdesign.

Für Werbetreibenden und Webdesigner gleichermaßen, die die Blicke der Zielgruppe auf sich ziehen wollen, empfiehlt der Usability-Experte, Formate zu gestalten, die aussehen wie der redaktionelle Inhalt, und diese dann noch innerhalb der redaktionellen Inhalte zu platzieren.

Wichtigste Größen der Banner bei Ebay

Gerade zurück von der OMD – heute (26.09.07) war ein interessanter Vortrag vom Harald Elsenlächer, Marketing Chef von ebay zum Thema Marketing Mix. Zur Zeit wird ebay unter anderem auch als Plattform für die Werbepartner ausgebaut, extra dafür wurde sogar eine Advertising GmbH von ebay gegründet. Alle Werbeplätze auf den Webseiten des Auktionenmarktführers werden in diesem Wandel an die internationalen Standard Größen der Banner angepasst. Eine interesannte Information: die Banner, die am besten bei ebay funktionieren, sind:

  • Supersize Banner 728 x 90 px
  • Medium Rectangle 300×250 px
  • Popup Under 640×480 px
  • Flash Layer

Als internationales Standard haben sich folgende Bannergrößen durchgesetzt.

Design Amazon Werbemittel

Heute hat mich ein Arbeitskollege auf ein neues Werbemittel von Amazon aufmerksam gemacht (gesehen in einem griechischen Blog):
Design Amazon Werbemittel

Funktionsweise: beim Mouseover über ein kleines Foto des von Blogschreibern empfohlenem Buches, erscheint ein kleines Inlayer Popup Fenster unmittelbar in der Nähe vom Bild (Grafik siehe oben). Die Gestaltung dieses Banners grenzt sehr knapp an der Perfektion einer Online Werbung.

  • Zum Einen ist die Werbeinformation kontext sensitiv und damit im Interesse des Users, zum anderen die Gestaltung ist wirklich sehr gelungen, die wichtigsten Informationen (hier ist der normale Text bewusst unscharf gemacht worden, um die Anhaltspunkte für die Wahrnehmung zu verdeutlichen). „Design Amazon Werbemittel“ weiterlesen

Webdesign Logout Seite

Es gibt viele Tutorials und Richtlinien für gute das Design von guten Login Seiten, aber mir sind wenige untergekommen für gute Logout Seiten. Aus meiner eigener Erfahrung als Webdesigner kann ich nur sagen, dass insbesondere dieser wortwörtlich „letzter“ Seite zu wenig Zeit und Konzeptionsgedanken eingeräumt wird. Dem möchte ich mit dem Beispiel einer einfachen, aber vom Hören Sagen einer sehr erfolgreichen Logout Seite von web.de entgegen treten. Erfolgreich ist aus Sicht der Click-through Zahlen auf das Werbemittel:

Webdesign Logout Seite
  • Als erstes fällt die komplette Farblosigkeit des Interfaces – es ist nur in leichten Grautönen gehalten, mit einer schwarzen Schrift. So kann jedes Werbemittel seine uneingeschränkte Farb- und Formwirkung entfalten.
  • Es gibt ein einziges Werbemittel!!! Es gibt nichts besseres für die Werbung, als keine unmittelbare Konkurenz um die Gunst der Aufmerksamkeit des Users zu haben. Es ist eine enorm wichtige und mit Sicherheit eine schwere Entscheidung von web.de nur ein einzigen Banner zu zeigen. Es wurde garantiert alles durchgetestet und anstelle von mehreren hat sich herauskristalliesiert, dass nur mit einem Werbemittel die meisten Klicks erzielt werden.
  • Die eigenen Services wurden dezent aber bewusst an wichtigsten Punkten positioniert: das Suchfeld zentriert und der Web.de Startseite wurde sogar ein eigenes Button gewidmet. Der Bereich „Jobs“ scheint für das Unternehmen von besonderer Bedeutung zu sein, denn es ist das einzige Wort in der unteren Leiste, was als fett ausgezeichnet ist.

Unterm Strich: weniger ist mehr! Wie schon ein bekanntes Zitat sagt: „Ein Designer hört mit seiner Arbeit nicht dann auf, wenn es nichts mehr hinzuzufügen ist, sondern dann wenn man nichts mehr wegnehmen kann!“.

Photoshop CS3 Import animierter GIFs

Das ist ja wirklich unglaublich!!! Nach dem wochenlangen Warten (unsere IT braucht immer für alles etwas länger) kam diese Woche endlich das Adobe CS3 Design Premium. Gerade habe ich parallel CS2 laufen und versuche eins nach dem anderen auf die neue Version umzustellen. Und jetzt waren mal die Banner dran und nach einigen hin und her musste ich mit Entsetzen feststellen, dass Photoshop CS keine animierten Gifs richtig importieren kann – beim Öffnen gehen nämlich alle Frames verloren (außer dem ersten). Das ist ja wohl wirklich der Hammer, was Adobe sich da leistet. Nach der Recherche bin ich auf eine Tech Note gestoßen, bei der ganz trocken erklärt wird:

„Issue: When you open an animated GIF file in Adobe Photoshop CS3, the file opens with a single layer that displays the first frame of the GIF file, and the Animation palette timeline is empty. If you save the GIF file from Photoshop CS3, the animation frames are lost.

Reason: Previous versions of Photoshop included ImageReady, which opened animated GIF files with a layer for each frame of the animation.

Solution: Open the animated GIF file in Adobe Fireworks. Fireworks provides editable layers and timelines for animated GIF files.

Additional Information: Adobe ImageReady is no longer being developed. Most of the features from ImageReady have been incorporated in Photoshop CS3. Those that are not included in Photoshop are available in Fireworks.“

Also muss man sich Fireworks kaufen, um animierte Gifs importieren zu können?! Das finde ich bei dem stolzen Preis der neuen Software Pakete ziemlich frech. Meiner Meinung nach sollte es zu den Grundfunktionen von Photoshop gehören!

Für alle die ImageReady in CS3 vermissen und Probleme beim Umstieg auf Photoshop CS3 haben (viele der Funktionen wurden hier integriert). Gibt es bei Adobe eine Liste der Funktionen zum Erstellen der Animationen und ihre neue Integration im Photoshop CS3.

Social Bookmars für die Webseite

Favoriten hinzufügen an seinem Rechner in jedem Browser gehört immer mehr nur zur zweitbesten Lösung. Die modernen User sind viel unterwegs und sind mal von Zuhause im Internet, vom Büro, Schule, von einem Internetcafe oder vom Rechner eines Freundes. In all diesen Situationen möchte man auf seine Bookmarks natürlich nicht verzichten. Es gibt immer mehr Lösungen und Plattformen zum zentralen Favoriten speichern, was den enormen Vorteil hat, dass diese Bookmarks überall zur Verfügunng stehen.

Hier ist eine kleine Statistik über die Beliebtheit dieser Plattformen:

Social Bookmarking - Favoriten online Statistik

Google ist mit der Möglichkeit über die Google Toolbar zu einem Aufsteiger geworden. Del.icio.us ist an der zweiten Stelle der Beliebtheitsskala.

Wer es versucht diese Social Bookmarking Icons der eigenen Webseite hinzuzufügen, stößt unweigerlich auf das Problem der großen Vielfalt dieser Dienste – und wer möchte schon so einen riesigen Icons-Teppich auf seiner Webseite (die vielen Links noch gar nicht mitgezählt). Der Vorteil ist aber andererseits klar: durch einen Klick auf so ein Favoriten Icon wird dem Dienst meistens gleich der Titel und die Beschreibung der Webseite übermittelt und der User braucht sich nur noch mit seinen Daten einzuloggen und schon die Webseite gebookmarkt. Eine sehr interessante Lösung bietet www.addthis.com mit seinem brandneuen Bookmark Widget – es ist nur ein einziger Button und nach dem Klick öffnet sich ein neues Fenster mit der Auswahl der beliebtesten Bookmark Dienste. Eine sehr einfache und elgante Lösung.
Bookmarks Widget - Alle Favoriten Dienste mit einem Button abrufbar

Design Blog vom Designer

Offenlegung: Auf dieser Webseite finden Sie zum Teil Affiliate-Links. Das bedeutet, dass wir unter Umständen eine kleine Provision erhalten. Ohne zusätzliche Kosten für Sie. Damit helfen Sie uns weiterhin kostenlose Inhalte anzubieten. Vielen Dank!