RSS
 

Posts Tagged ‘Konzeption & Usability’

Navigationsdesign – Die passende Architektur finden!

23 Nov

Zu den wichtigsten Elementen einer Website gehört auf jeden Fall die Navigation, denn die besten Inhalte nützen nur wenig sofern diese nicht gefunden werden können. Ziel beim Navigationsdesign ist es eine intuitive, der Zielgruppe und der Inhalte entsprechende Menüführung zu entwickeln.

Read the rest of this entry »

 

Transparenz und Umsatz in Online Shops steigern!

17 Mai

Ein wichtiges Kriterium für erfolgreiche online Shops ist es für Kunden möglichst transparent zu sein. Dem potentiellen Kunden sollten möglichst viele hilfreiche Informationen zum Bestellvorgang, dem Ablauf nach der Bestellung aber auch zur Abwicklung von Reklamationsfällen und Retouren zur Verfügung stehen. Das sollte aus meiner Sicht Bestandteil jedes online Shops sein um zusammen mit weiteren Vertrauensbildenden Maßnahmen dem Kunden die “Angst vor dem Kauf” zu nehmen. Und das Beste daran ist, dass hier Vieles mit relativ geringem Aufwand bewirkt werden kann.

Read the rest of this entry »

 
3 Comments

Posted in eCommerce

 

Navigationsarchitektur: Zeige dem Benutzer wo er ist!

28 Apr

Es hat sich in den letzten Jahren ja schon herumgesprochen, dass man Benutzern zeigen soll wo sie sich befinden und sich so ein User einfach innerhalb einer Website orientieren kann. Doch so einfach das klingt, so oft wird dieses Gebot missachtet bzw. gibt es hier einige Feinheiten die sich doch noch nicht überall herumgesprochen haben.

Aktiven Menüpunkt selektieren
Zum Standard gehört es inzwischen aktive Menüpunkte zu selektieren. Hierbei gilt diese Selektion optisch deutlich erkennbar zu gestalten. Der Unterschied zwischen selektieren undnicht selektierten Navigationselementen sollte sofort auf einen Blick erkennbar sein. Darüber hinaus sollte noch beachtet werden, dass in allen Navigationslevels mit Hervorhebungen gearbeitet wird. Immer wieder sieht man Websites in denen der Hauptmenüpunkt schön selektiert wird, aber ab der zweiten oder dritten Ebene bricht das optische Chaos aus.

Breadcrumb Navigation integrieren
Je komplexer und tiefer die Navigationsstruktur einer Website aufgebaut ist, desto wichtiger ist eine Breadcrumb Navigation. Dadurch kann man sich einige Probleme vom Hals schaffen und hat ein globalen Bezugspunkt für den Benutzer geschaffen. Allerdings sollte eine Breadcrumb nie die einzige Navigationsmöglichkeit darstellen. Aus meiner Sicht dienen die “Brotkrumen” zur schnellen Orientierung und im Notfall können überforderte User diese auch zum Navigieren missbrauchen.

Jeder Seite ihren Menüpunkt
Jede Seite sollte einem Menüpunkt zugeordnet werden. Besonders auf der Startseite sieht man oft Unterpunkte die in der Navigation nirgends abgebildet werden. Dadurch ergeben sich Seiten die sich mehr oder weniger im “Luftleeren” Raum befinden. Klassische Beispiele hierfür bieten beispielsweise Seiten die auf der Startseite über einen Banner verlinkt, aber dann keinem Menüpunkt zugeordnet werden. Der User clickt auf entsprechenden Banner und hat anschließend keinen Anhaltspunkt wo er sich befindet. Gleichzeitig stellt die “Home” Seite nur eine Seite dar und sollte nicht unzählige Unterseiten enthalten.

Zurückbutton nicht vergessen!
Ein Klassiker: die Website sollte ohne Verwendung des “Zurück”-Buttons im Browser funktionieren. Daher unbedingt Zurück-Buttons an den richtigen Stellen implementieren. Mit richtigen Stellen meine ich, dass der Button nur da aufscheinen soll wo man ihn benötigt. So ist ein Zurück Link auf der Startseite ziemlich sinnlos. Erst auf Detailseiten die über einen “mehr lesen” Link und nicht über das Menü erreichbar sind macht´s aus meiner Sicht Sinn.

Integrierte Sitemaps
Eine weitere Möglichkeit dem Benutzer eine schöne Übersicht über die Seitenstruktur zu geben bieten integrierte Sitemaps. Damit meine ich diese global, im Footer integrierten Sitemaps die man in den letzten Jahren immer öfters sieht. Ehrlich gesagt hab ich keine Ahnung wie man die Dinger offiziell nennt, aber ichfinde diese ziemlich praktisch und ganz nebenbei lassen sich diese Sitemaps auch gut zu SEO Zwecken nutzen.

Fazit:
Das waren ein paar Tipps um den Benutzer besser durch die Website zu leiten und auch weniger internetafine User ohne Frust durch die Website zu führen. Natürlich wird das Ganze mit zunehmender Komplexität und Navigationstiefe immer schwieriger und besonders knifflig wird es wenn nachträgich Navigationslevels in bestehende Websites eingebaut werden sollen. Daher lieber zu Beginn eines Projektes schon eine Level mehr einkalkulieren.

 

Umsatz steigern durch bessere Bestellprozesse

25 Mrz

Der Bestellprozess gehört zum wichtigsten Teil jeder eCommerce Website. Aus diesem Grund macht es Sinn sich diesem Thema intensiver zu widmen, denn jede Optimierung kann Conversionrates erhöhen und zu höheren Umsätzen führen.

 

Wer suchet der findet … oder auch nicht
Dem Benutzer sollte das Bestellen der Ware möglichst einfach gemacht werden. Das beginnt schon damit, dass die für einen Kauf wichtigsten Elemente klar und deutlich gestaltet werden.

Der Bestellprozess beginnt schon mit dem “In den Warenkorb” Button beim entsprechenden Produkt. Daher sollte bereits auf der Produktseite darauf geachtet werden, dass dieser Button gut sichtbar platziert wird.

Daher gilt:

  • Die Schaltfläche muss eine eindeutige Beschriftung haben, die den Benutzer zum Clicken animiert.
  • Der Button sollte grafisch auffällig gestaltet und möglichst weit oben im Sofortsichtbaren Bereich der Website platziert werden.
  • Zusätzlich muss der eigentliche Warenkorb klar gekennzeichnet werden. Für den Benutzer muss klar ersichtlich sein, was nach dem Hinzufügen eines Produktes zum Warenkorb passiert. Fragen wie: Wo ist das Produkt gelandet? Wo befindet sich der Warenkorb? Wie kann ich mit der Bestellung fortfahren? müssen durch Konzeption, Gestaltung und Bezeichnungen schon im Vorfeld beantwortet werden.

Ein schönes Beispiel um das Hinzufügen zum Warenkorb zu visualisieren hat beispielsweise die Tirol Werbung für Ihre Prospektbestellung gewählt. Durch eine Javascript Animation fliegt der Bestellbutton in Richtung des Warenkorbs. Dadurch wird dem Benutzer sofort klar wo die ausgewählten Produkte zu finden sind. Zusätzlich werden bereits gewählte Prospekte durch eine graue Schaltfläche gekennzeichnet.

Tirol Werbung - Visualisierung des Bestellvorgangs

Tirol Werbung - Visualisierung des Bestellvorgangs

Logisch, dass die oben erwähnten Punkte für den Checkout Button, also den “zur Kasse” Button im Warenkorb genau so gilt. Hierbei könnte sich auch der Zusatz (“Sie können den Bestellvorgang, jeder Zeit abbrechen”) als positiv auswirken. Da das allerdings je nach Zielgruppe und Gestaltung unterschiedlich sein kann, empfehle ich hier genauere Tests durchzuführen. Basierend auf den Ergebnissen kann man dann gut entscheiden ob der Zusatz nötig ist oder nicht.

 

Ein Online Shop ist kein Supermarkt
Auch wenn in Supermärkten der Verkauf von Süßigkeiten, etc. an der Kasse sehr gut funktioniert gilt das für Online Shops nicht. Beim Online Shop haben wir leider nicht den Vorteil, dass jeder Käufer an der Kasse vorbei muss. Auf der Website ist es viel einfacher den Kauf abzubrechen, dafür genügt ein simpler Click auf das rote X rechts oben im Browser, auf Werbebanner oder andere Links. Genau aus diesem Grund sollten sämtliche Ablenkungen im Bestellprozess vermieden werden. Das heißt, Cross Selling, Product Placement und ähnlicher “Schnick-Schnack” kann auf der Website betrieben werden, allerdings nur bis max. zum Warenkorb. Sobald sich der Kunde zum Kauf entschlossen hat und mit dem Bestellprozess beginnt sollten alle Ablenkungen vermieden werden.

Sehr schön wird das vom Branchenprimus Amazon gelöst. Sobald man auf den Button “Zur Kasse” clickt, wird eine eigene Seite geöffnet, welche nur für den Kauf nötige Informationen darstellt. Ohne den Zurück Button des Browsers zu verwenden ist es ist nicht einmal mehr möglich zur vorhergehenden Seite zurückzukehren.

 

Konzentration auf das Wesentliche bei Amazon

Konzentration auf das Wesentliche bei Amazon

 

Vertrauen und Transparenz sind wichtig
Vertrauensbildende Maßnahmen können über Hemmungen einer online Bestellung hinweg helfen. Hierzu könnte man jetzt sicher zu jedem Punkt einen separaten Beitrag verfassen. Vielleicht werde ich das auch einmal machen, aber da Vieles selbsterklärend ist werde ich es jetzt einmal bei einer Auflistung einiger Punkte, ohne Anspruch auf Vollständigkeit belassen.

  • eCommerce Zertifizierung
  • Datenschutzrichtlinien auf der Website platzieren
  • Zusätzliche Kosten, wie Versandgebühren, transparent und möglichst früh im Bestellvorgang ausweisen
  • Möglichkeiten von Umtausch und Rückgabe angeben
  • Zahlungsmöglichkeiten an Zielländer anpassen. Wird nur Kreditkarte angeboten, kann das ein Hinderniss darstellen.
  • Integration von aussagekräftigen Hilfetexten
  • Hinweis auf eine Service Hotline
  • Eindeutige Darstellung der einzelnen Schritte im Bestellprozess.

 

Testen, Testen, Testen
Zusätzlich sind permanente Tests von Details wichtig und auch extrem interessant. In Bestellprozessen können sich oft Kleinigkeiten wie beispielsweise die Farbe und Positionierung eines Bestellbuttons sehr viel bewirken. Um sicher zu gehen ob eine Weiterentwicklung aber auch wirklich eine Verbesserung darstellt macht es Sinn so etwas beispielsweise mit dem Google Website Optimizer abzutesten.
Darüber Hinaus kann man sich selbstverständlich durchaus auch von den Großen der Branche inspirieren lassen, denn hier kann man davon ausgehen, dass schon sehr viele Usabilitytests durchgeführt wurden. Doch auch dann gilt … testen, testen, testen … es gibt keine Pauschalrezepte und es muss nicht über das Selbe funktionieren. Alter, Herkunft und Computeraffinität der Zielgruppe können sich bei einzelnen Details stark auf die Performance verschiedenener Detaillösungen auswirken.

 
4 Comments

Posted in eCommerce

 

Optimierung von Registrierungsprozessen

11 Feb

Der Gestaltung von Registrierungsseiten wird leider sehr oft viel zu wenig Aufmerksamkeit geschenkt. Oft kommt es vor, dass viel Arbeit in die Entwicklung des Designs einer Website gesteckt wird, dabei aber Unterseiten wie Registrieungsseiten leider vergessen werden. Genau in solchen Situationen geschieht es dann, dass entsprechende Seiten dann nach Schema 0815 vom Programmierer in das vorhandene grafische Raster gesteckt werden. Da gerade die Registirerungsprozesse zu den wichtigsten Seiten vieler Websites zählen – geht es doch schließlich um Neukundengewinnung – scheint das etwas unverständlich. Daher sollte man sich ganz bewusst Zeit nehmen und die entsprechende Seite in Konzept und Screendesign berücksichtigen.

In diesem Artikel definiere ich Registrierungsseiten als Informationsseiten, deren Aufgabe es ist den Besucher nötige Informationen zu liefern und zu überzeugen. Das eigentliche Registrierungsformular ist meist eine gesonderte Seite. Bei sehr kurzen Formularen, wie z.B.: Newsletterregistrierung kann es aber auch durchaus Sinn machen Beides auf einer Seite darzustellen.

Als kleinen Inspiration liste ich jetzt potentielle Elemente / Inhalte von Registrierungsseiten auf. Selbstverständlich sind nicht alle Elemente für jeden Zweck sinnvoll, je nachdem zu welchem Zweck die Registrierung dienen soll, werden teilweise verschiedene Punkte relevanter sein als Andere.

  • Elevator pitch

Hierbei handelt es sich um einen möglichst kurze Zusammenfassung des Sinns der Website / Applikation, etc. für die man sich registrieren soll. Bei Flickr ist das beispielsweise “Zeigen Sie Ihre Fotos. Sehen Sie der Welt zu.”

  • Allgemeine Beschreibung

Eine allgemeine Beschreibung des Produkts sollte möglichst bildhaft und leicht verständlich formuliert werden. Beschreibungen lassen sich in diesem Fall sehr gut mit Unterstützung von Icons vermitteln. Weiter unten habe ich ein Beispiel von Tripit aufgezeigt. Auf dieser Site wird das aus meiner Sicht vorbildlich umgesetzt.

  • Auflistung der Leistungen

Auflistung der Leistungen und Funktionen die nach der Registierung zur Verfügung stehen, helfen den Benutzer zu Überzeugen sich zu registrieren.

  • Auflistung des Nutzens für den Benutzer

hier gilt das selbe wie bei den Leistungen im Punkt darüber. Jedoch sollte hier der Nutzen den der Benutzer durch seine Registrierung hat klar hervorgehoben werde.

  • Call to action

Mit einem grafisch prominenten Button wird es dem Benutzer möglichste einfach gemacht, zu, Registrierungsformular zu gelangen. Noch schöner finde ich es wenn eine kleine Version des Formulars direkt auf der Registrierungsseite integriert wird. So werden zum Beispiel die Felder Benutzername und Email Adresse direkt abgefragt. Nach Ausfüllen dieser Daten kann der User dann auf ein ausführliches Formular mit den restlichen Feldern geleitet werden. Diese Vorgangsweise reduziert zum Einen die Hemmschwelle mit dem Registrierungsprozess zu beginnen, zum Anderen können Formularabbrüche statistisch erfasst werden und per eMail zu einen späteren Zeitpunkt ein Reminder versendet werden. In diesem Fall sollte der Versand des eMails direkt im ersten Schritt per Checkbox akzeptiert werden.

  • Testimonials/ Referenzen

Testimonials und/oder Referenzen zählen vorallem bei kommerziellen Leistungen schon zum Standard. Zufriedene Kunden vermitteln Vertrauen und wirkt sich sicherlich positiv aus.

  • Tour / Screenshots

Virtuelle Produkttouren bieten sich bei Softwareprodukten an. Gerade in diesem Segment ist es oft schwierig für den Benutzer eine Vorstellung zu haben, was ihn erwartet. Dem kann mit Screenshots und virtuellen Touren sehr gut entgegengewirkt werden.

  • Anzeige der notwendigen Schritte bis zum Abschluss

Nach dem Motto “In 3 Schritten zu Ihrer Website” können diese Schritte direkt auf der Registrierungsseite aufgelistet werden. Dadurch nimmt man dem Benutzer gleich am Anfang die Angst vor endlosen Formularen und komplizierter Handhabung.

Beispiele:

Flickr Registrierungsseite

Flickr Registrierungsseite

Tripit

Tripit

 

Linkedin Registrierungsseite

Linkedin Registrierungsseite

 

 

Optimierungstipps zur Formularseite habe ich bereits in einem früheren Beitrag zusammengefasst. Dieser ist hier abrufbar: Conversions steigern durch bessere Formulare.