29
University of Fribourg, Switzerland Department of Computer Science Information Systems Research Group Prof. Dr. Andreas Meier Analyse der Usability am Beispiel von Nespresso.com Seminararbeit Karolina Tomovic 07211246 Lindenstrasse 76 9000 St. Gallen [email protected] Betreuer: Darius Zumstein Freiburg, im Oktober 2010

ANALYSE DER USABILITY AM BEISPIEL VON NESPRESSOdiuf.unifr.ch/is/userfiles/file/studentprojects/S-2010_Karolina... · Abbildung"2:"Startseite"von"Nespresso.com! 8!!! ImBeispielvonNespressoinAbbildung2habensichdieUnternehmerundWebdesignerklareZiele

  • Upload
    vudan

  • View
    215

  • Download
    1

Embed Size (px)

Citation preview

 

 

 

 

 

 

 

University  of  Fribourg,  Switzerland  

Department  of  Computer  Science  

Information  Systems  Research  Group  

Prof.  Dr.  Andreas  Meier  

 

 

 

 

Analyse  der  Usability  am  Beispiel  von  Nespresso.com  

 

 

 

 

 

Seminararbeit  

Karolina  Tomovic  07-­‐211-­‐246  Lindenstrasse  76  9000  St.  Gallen  [email protected]      Betreuer:  Darius  Zumstein      Freiburg,  im  Oktober  2010  

 

i  

 

 

Abstract  

Viele  Unternehmen  versuchen  mittlerweile  auch  das   Internet  als  Vertriebskanal  zu  gebrauchen.   Je-­‐

doch  gestaltet  sich  dieser  Gedanke  nicht  so  einfach  wie  gesagt.  Denn  längst  ist  noch  nicht  jeder  User  

mit   dem   Internet   so   vertraut   wie   es   die   neuen   Generationen   sind.   Damit   die   Unternehmen   aber  

trotzdem  auch  diesen  Absatzkanal  effektiv  für  sich  nutzen  können,  müssen  sie  ihre  Kunden  kennen,  

damit  eine  Optimierung  der  Usability  ihrer  Website  möglich  ist.    

Die  Kunden  sollten  sich  ohne  Hindernisse  durch  den  Webshop  bewegen  können,  um  ihre  Ziele  erfolg-­‐

reich  erreichen  zu  können.  Dafür   ist  eine  übersichtliche   flache  Navigationsstruktur  erforderlich,  die  

den  Kunden  einen  schnellen  Überblick  beschafft.  Wurde  eine  Entscheidung  für  ein  Produkt  getroffen,  

müssen  alle  wesentlichen   Informationen   sichtbar  dargestellt  werden.  Dies  ermöglicht  dem  Kunden  

auch   seine  Wahl   zu   kontrollieren.   Beim  Checkout-­‐Prozess   interessiert   nur  noch  der   endgültige  Ab-­‐

schluss,  was  zu  einer  eindeutigen  vorwärtsgerichteten  Orientierung  führt.  

Um  den  Umsatz  in  einem  Webshop  zu  steigern,  müssen  die  Verkäufe  erhöht  werden.  Durch  Usabili-­‐

ty-­‐Tests   lassen  sich  durch  kleine  Veränderungen,  wie  z.B.  der  Platzierung  oder  der  Farbe  eines  But-­‐

tons,  die  Verkäufe  pro  Kunde  erhöhen  (Konversionsrate).  

 

 

 

 

Keywords  

Webdesign,  Webshop,  Web-­‐Usability,  Konversionsrate  

 

 

 

 

 

ii  

 

 

Inhaltsverzeichnis  

 

Abstract................................................................................................................................ i  

Inhaltverzeichnis .................................................................................................................. ii  

Abbildungsverzeichnis ......................................................................................................... iii  

Tabellenverzeichnis.............................................................................................................. iii  

1  Einleitung .......................................................................................................................... 1  

  1.1  Problemstellung....................................................................................................... 1  

  1.2  Zielsetzung............................................................................................................... 1  

  1.3  Vorgehensweise ...................................................................................................... 2  

2  Webdesign ........................................................................................................................ 3  

  2.1  Grundlagen  im  Design ............................................................................................. 3  

    2.1.1  Informationsaufnahme .................................................................................. 3  

    2.1.2  Orientierung  &  Platzierung ............................................................................ 4  

  2.2  Erfolg  des  Einfachen ................................................................................................ 6  

  2.3  Verwirklichung  und  Design  der  Website ................................................................. 6  

3  Web-­‐Usability.................................................................................................................... 9  

  3.1  Bestimmung  der  Zielgruppe   ................................................................................... 9  

  3.2  Navigation  im  Web-­‐Shop......................................................................................... 10  

    3.2.1  Navigationsstruktur........................................................................................ 10  

    3.2.2  Die  Produktinformationsseite ........................................................................ 14  

    3.2.3  Der  Checkout-­‐  Prozess ................................................................................... 18  

  3.3  Die  Konversionsrate................................................................................................. 21  

4  Schlusswort ....................................................................................................................... 24  

Literaturverzeichnis ............................................................................................................. 25

 

iii  

 

 

Abbildungsverzeichnis  

 

Abbildung  1:  Horizontale  Registernavigation  mit  Layer....................................................... 5  

Abbildung  2:  Die  Startseite  von  Nespresso .......................................................................... 7  

Abbildung  3:  Die  Baumstruktur............................................................................................ 11  

Abbildung  4:  Die  lineare  Navigationsstruktur ...................................................................... 11  

Abbildung  5:  Hauptnavigation  auf  der  Startseite................................................................. 12  

Abbildung  6:  Erste  Produktauswahl  nach  Maschinenart ..................................................... 12  

Abbildung  7:  Zweite  Produktauswahl  einer  bestimmten  Maschinenart ............................. 13  

Abbildung  8:  Tiefe  Navigationsstruktur ............................................................................... 13  

Abbildung  9:  Flache  Navigationsstruktur ............................................................................. 14  

Abbildung  10:  Die  Produktdetailseite  von  „Citiz“-­‐Kaffeemaschinen ................................... 15  

Abbildung  11:  Die  Website  der  „Citiz“-­‐Kaffeemaschinen .................................................... 16  

Abbildung  12:  360-­‐Grad-­‐Rundumansicht............................................................................. 17  

Abbildung  13:  Bestellnavigation  zum  Warenkorb................................................................ 17  

Abbildung  14:  Der  Warenkorb ............................................................................................. 18  

Abbildung  15:  Das  Kontaktformular..................................................................................... 19  

Abbildung  16:  Das  Bestellformular ...................................................................................... 20  

Abbildung  17:  Formel  der  Konversionsrate ......................................................................... 21  

 

Tabellenverzeichnis  

 

Tabelle  1:  Zahlenbeispiel  der  Konversionsrate .................................................................... 23

 

1  

 

 

1  Einleitung  

1.1  Problemstellung  

In   den   vergangen   15   Jahren   ist   die   Bedeutung   für  Unternehmen   im   Internet   präsent   zu   sein   stark  

gestiegen.  Mittlerweile  besitzen  zwar  die  meisten  Organisationen  eine  eigene  Website,  jedoch  haben  

nicht  alle  gleich  grossen  Erfolg  damit  und  erreichen  nicht  ihr  Zielpublikum  so  wie  sie  es  gerne  möch-­‐

ten.  Egal  ob  man  aktiv  einen  Online-­‐Shop  betreibt  oder  mittels  Newsletter  für  ein  Produkt  wirbt,  das  

Ziel   des   Internetauftritts   und   der   Geschäftsbetreiber   ist   es   Kunden   zu   umwerben   und   schliesslich  

binden  zu  können.    

Jedoch  erweist   sich  das   im   Internet  als  Problem.  Ein  Besucher  einer  Homepage,  der   Informationen  

sucht  oder   sogar  einen  Kauf  online   tätigen  möchte,  erwartet  eine  Homepage  mit   klarer  Übersicht,  

Darstellung   der   wesentlichen   Punkte   und   allen   voran   eine   schnelle   Ausführungsmöglichkeit,   denn  

sonst   hätte   er  womöglich   den  persönlichen  Kontakt   zum  Betrieb   gesucht.   Aber   zu  Hause   vor   dem  

Computerbildschirm   bewegt   sich   der   Kunde   per  Mausklick   alleine   durch   die   Seiten.   Der  Website-­‐

Anbieter  steht  nicht  in  direktem  Kontakt  zu  ihm.  Lediglich  mit  einem  Kontaktformular  oder  einer  E-­‐

Mail-­‐Adresse  kann  sich  der  Besucher  an  den  Anbieter  wenden.  Die  Beantwortung  der  Frage  dauert  

dementsprechend   länger.  Wenn   der   Aufbau   der   Homepage  missverständlich   zu   bedienen   ist   oder  

kein  klarer  Aufbau  besteht,  kann  es  dem  Besucher  der  Website  zu  anstrengend  werden  sich  weiter-­‐

hin  auf  der  Homepage  zu  bewegen  und  er  verlässt  sie.  Dies   führt  zu  keiner  Kundenbindung  und  es  

können  Einkommensbussen  für  den  Betreiber  entstehen.  

1.2  Zielsetzung  

In  dieser  Arbeit  wird  folgenden  Fragestellungen  und  Schwierigkeiten  auf  den  Grund  gegangen:  

- Welche  grundlegenden  Punkte  im  Bereich  Webdesign  sind  für  Unternehmungen  einzuhalten,  

um  dem  Kunden  eine  nutzerfreundliche  Website  bieten  zu  können?  

- Wie  lässt  sich  eine  gute  Usability  umsetzen  und  was  müssen  die  Webshop-­‐Betreiber  beach-­‐

ten  um  ihre  Kunden  erfolgreich  durch  den  Onlineshop  zu  geleiten?  

- Was  ist  die  Konversionsrate  und  hat  eine  gute  Usability  Auswirkungen  auf  diese?  

 

 

 

2  

 

   

1.3  Vorgehensweise  

Im  ersten  Teil  der  Arbeit  wird  auf  die  grundlegenden  Elemente  im  Bereich  des  Webdesign  hingewie-­‐

sen.  Welche   Phasen   werden   von   Neukunden   auf   einer  Website   durchlaufen   und   wie   können   die  

Webshop-­‐Betreiber   den   Zugang   für   die   Besucher   erleichtern   und   ihnen   eine   schnelle  Orientierung  

ermöglichen,  um  sich  Übersicht  zu  beschaffen.  Es  wird  darauf  hingewiesen  sich  auf  die  wesentlichen  

Funktionen  zu  reduzieren.  Die  Gestaltung  des  Webauftritts  der  Unternehmung  muss  durchdacht    und  

dem  Image  entsprechend  sein.  

Danach  wird  auf  die  Usability   im  Webshop  eingegangen.  Nach  einer  kurzen  Definition  des  Begriffs,  

wird  der  Navigationsaufbau  eines  Webshops   vorgestellt.  Die  Webshop-­‐Betreiber  müssen   ihre  Kun-­‐

den  erfolgreich  durch  ihre  Website  führen  können.  Eine  einfache  und  klar  strukturierte  Handhabung  

von  der  Produktauswahlseite  bis  zum  Checkout-­‐Prozess  muss  gewährleistet  sein,  damit  es  zu  einem  

Abschluss  kommen  kann.  

Es  werden  laufend  Vergleiche  mit  der  Website  von  Nespresso  gezogen,  die  unter  anderem  auch  ei-­‐

nen  Webshop  betreiben.  Dabei  werden  die  Ergebnisse  an  Beispielen  vorgestellt,  um  Gemeinsamkei-­‐

ten  aber  auch  Unterschiede  zu  zeigen.  

Abschliessend  wird  darauf  hingewiesen,  dass  durch  eine  Optimierung  der  Usability  die  Verkaufszah-­‐

len  im  Webshop  gesteigert  werden  können.  

 

 

 

 

 

 

 

 

 

 

3  

 

 

2  Webdesign  

Die  Gestaltung  einer  Website  muss  gut  durchdacht  sein.  Um  aufzufallen  und  einen  hohen  Wiederer-­‐

kennungswert   zu   gewährleisten,  wird  ein  professioneller  Webdesigner   eingestellt,   der  die  Website  

für  ein  Unternehmen  gestaltet.  Der  erste  Eindruck,  den  die  Website  bietet  ist  von  grosser  Bedeutung,  

um  den  Kunden  überhaupt  dazu  zu  bringen,  sich  weiterhin  auf  der  Site  zu  bewegen.  Wer  den  immer  

höher  werdenden  Anforderungen  nicht  gerecht  werden  kann,  hat  neben  der  grossen  Anzahl  an  Kon-­‐

kurrenten   im  Cyberspace  nur  wenige  Chancen  mitzuhalten.  Die  Besucher  einer  Seite  sind  aktiv  und  

selektiv  tätig  und  entscheiden  innerhalb  weniger  Sekunden,  ob  sie  sich  auf  der  Seite  weiterhin  bewe-­‐

gen  möchten  oder  diese  verlassen  werden.  Wenn  der  Auftritt  der  Seite  nicht  übersichtlich  gestaltet  

ist,  der  Kunde  mit  Werbungen  oder  zu  viel  Information  überladen  wird,  oder  dieser  mit  der  Navigati-­‐

on  der  Seite  nicht  zu  recht  kommt,  kann  der  Kunde  nicht  gewonnen  werden.  

„  Der  Begriff    Webdesign   reicht   von  der   Erarbeitung  und  Umsetzung  der   Informationsstruktur  über  

das  grafische  Design  bis  zur  praktischen  Umsetzung  in  eine  funktionierende,  zugängliche  und  anspre-­‐

chende  Präsentation“  [Hoffmann,  2008].  

Gerade  in  Webshops,  wo  der  Kunde  verschiedene  Stufen  im  Kaufprozess  durchläuft,  wie  die     Infor-­‐

mationsgewinnung  des  Produktes  bis   zur  endgültigen  Bezahlung,  müssen  die  Unternehmungen  be-­‐

sonders  Wert   auf   eine   ansprechende   und   gut   strukturierte  Website   legen,  was   der   Schlüssel   zum  

Erfolg  sein  kann.  

2.1  Grundlagen  im  Design    

2.1.1  Informationsaufnahme  

Der  erste  Besuch  eines  Neukunden  in  einem  Webshop  ist  mit  Bedürfnissen  und  Erwartungen  an  die  

Seite   verbunden.  Oft   bringen   sie   auch   schon   ein   Vorwissen   von   anderen  Homepages,  was   Aufbau  

und  Navigation  betrifft  und  betreten  die  neue  Seite  mit  der  Annahme,  dass  sie  auf  analoge  Navigati-­‐

onsstrukturen  treffen.  Bewegt  er  sich  das  erste  Mal  auf  einer  neuen  Seite  durchläuft  der  Kunde  zwei  

Phasen:  

1. Phase:  Reizgesteuerte  Informationsaufnahme  zur  Orientierung  

Die  ersten  Bewegungen  auf  der   Seite  werden  der  Orientierung  gewidmet,  um  einen  Über-­‐

blick  zu  erhalten.  „Reizstarke  Seitenelemente  wie  Bilder  und  Headlines  sind   in  dieser  Phase  

 

4  

 

   

der  Informationsaufnahme  im  Vorteil,  sie  ziehen  den  Blick  des  Nutzers  auf  sich.“  [Eberhard-­‐

Yom,  2010]  

2. Phase:  Aufmerksamkeitsgesteuerte  Informationsaufnahme  zur  Entscheidungsvorbereitung  

In  der  zweiten  Phase  erfolgt  die  Auswahl  der  Informationen  spezifisch  und  mit  Fokus  auf  die  

Grundelemente,  die  für  den  Besucher  von  Bedeutung  sind.  „Der  Nutzer  betrachtet  in  dieser  

Phase  vor  allem  Elemente,  die  der  Navigation  dienen,  wie  Linklisten,  Suchhilfen  und  Naviga-­‐

tionsleisten,   oder   eine   hohe   Informationsdichte   haben,  wie   z.B.   Textpassagen.“   [Eberhard-­‐

Yom,  2010]  

Auf  was  muss  eine  Unternehmung  unter  der  Berücksichtigung  der  zwei  Phasen  achten,  wenn  sie  ihre  

Neukunden  auf   ihrer   Internetadresse  oder  Webshop  dauerhaft  binden  wollen?  Man  könnte  sagen,  

dass  die  Startseite  das  „Schaufenster“     jedes  Webshops  darstellt,  um  Neukunden  auf  sich  aufmerk-­‐

sam  zu  machen.   In  der   realen  Welt   soll   es  die  Kunden   in  das  Geschäft   locken  und   im  World  Wide  

Web   soll   der  Kunde  aufgerufen  und   stimuliert  werden   sich  aktiv   auf  der   Seite  weiter   zu  bewegen.  

Damit  man  nicht  die  Übersicht  verliert,  sollte  die  Startseite  nicht  zu  lang  sein,  d.h.  der  Kunde  sollte  

nicht   etliche   Male   nach   unten   scrollen   müssen,   um   die   ganze   Seite   gesehen   zu   haben.   Die   Bild-­‐

schirmoberfläche  soll  raffiniert  genutzt  werden.  Die  Dominanz  liegt  beim  Inhalt  der  Seite.  Blinkende  

Werbung  soll  vermieden  werden  und  die  Navigationsleiste  sollte  nicht  zu  viel  Platz  in  Anspruch  neh-­‐

men,  da  dies  den  Besucher  nur  unnötig   ablenkt,   aber   sie   ist   dennoch  ein  notwendiges  Übel.   Leer-­‐

räume   zwischen   Inhalt,   Bilder   und   Navigationsleiste   sind   optische   Trennlinien   und   helfen   bei   der  

Abgrenzung   der   verschiedenen   Bereiche   auf   der   Bildschirmoberfläche.   Eine   richtige   Linie   könnte  

störend  wirken  und  für  unnötige  längere  Downloadzeiten  verantwortlich  sein.  

2.1.2  Orientierung  &  Platzierung  

In  der  westlichen  Welt  ist  es  üblich,  dass  man  von  links  oben  zu  lesen  beginnt.  Dieselbe  Aufmerksam-­‐

keit  schenkt  man  auch  einem  Bild,  einem  Werbeplakat  oder  eben  auch  einer  Website.  Wenn  der  Titel  

der  Seite  oder  das  Logo  der  Firma  erst  am  Ende  der  Homepage  vorkommt,  die  Navigationsleiste  sich  

in  der  Mitte  des  Bildschirmes  befindet  und  der   Inhalt  über  beiden  Seiten  am  Rand  verteilt   ist,  wird  

man  lediglich  aufgrund  der  Unübersicht  auffallen.  

Das   heisst,   dass   sich   im   Bereich   der   Anordnung   und   Gliederung   einer   Startseite   gewisse   Regeln  

durchgesetzt  haben.  Üblicherweise  befindet  sich   links  oben  der  Name  der  Firma,  ein  Titel  oder  nur  

ein  Logo  mit  der  Navigationsleiste.  Somit  kann  der  Besucher,  wenn  er  die  Seite  überfliegt  sofort  er-­‐

kennen,  ob  er  auf  die  richtige  Seite  gelangt  ist  und  weiss,  wie  er  sich  im  nächsten  Schritt  mit  der  Na-­‐

 

5  

 

   

vigationsleiste  auf  der  Seite  vorwärts  bewegen  kann.  „Bei  Online-­‐Shops  ist  derzeit  (2009)  ein  Trend  

zur  horizontalen  Registernavigation  mit  Layer  für  die  Darstellung  der  ersten  Navigationsebene  festzu-­‐

stellen.   Ein   Grund   hierfür   sind   die   grösser   werdenden   Sortimente   der   Online-­‐Händler“   [Eberhard-­‐  

Yom  2010,  S.  54].  Durch  das  Darüberfahren  mit  der  Maus  öffnen  sich  weitere  Spalten  mit  den  dazu-­‐

gehörigen  Untertiteln.  Sonst  findet  man  die  Navigationsleiste  meist  im  linken  Bereich  vertikal  in  einer  

Spalte.  Die  Website  von  Nespresso  hat  ihre  im  unteren  Bereich  der  Seite  horizontal  platziert.  

 

Abbildung  1:  Horizontale  Registernavigation  mit  Layer    

Zusätzlich  fällt  in  der  Abbildung  1  auf,  dass  sich  in  der  Mitte  der  Seite  drei  grosse  Teaser  als  Anreisser  

befinden,  welche   sofort   die   Aufmerksamkeit   auf   sich   lenken,  was   für   die  Orientierungsphase   sehr  

hilfreich  ist.  Diese  bilden  den  eigentlichen  Inhalt  der  Seite  und  stellen  die  Kernelemente  der  Website  

vor.  Anstelle  der  Teaser  könnte  sich  auch  ein  Text  in  diesem  zentralen  Bereich  befinden.  „  Als  Faust-­‐

regel  könnte  man  sagen,  dass  der  Inhalt  mindestens  die  Hälfte  der  Seitengestaltung  ausmachen  soll-­‐

te,  wobei  eher  auf  80  Prozent  hingearbeitet  werden  sollte.  Die  Navigation  sollte  auf  untergeordneten  

Seiten  weniger  als  20  Prozent  des  Raumes  einnehmen“  [Nielsen  2001,  S.  22].  Hätte  der  Shopbetrei-­‐

ber   mehrere   kleine   Teaser   aufgeschaltet,   hätte   die   Seite   schnell   zu   überfüllt   wirken   können,   was  

wiederum  Einbussen   in  der  Übersicht  der  Kunden  einbringt.  „Vom  Standpunkt  der  Benutzerfreund-­‐

lichkeit  aus  wäre  es  am  besten,  ganz  auf  Werbung  zu  verzichten“  [Nielsen  2001,  S.  22].  

 

 

6  

 

   

2.2  Erfolg  des  Einfachen  

Es  gibt  Standards,  wo  Webuser  gewisse  Funktionen  erwarten.  Die  Suchfunktion  beispielsweise  wird  

oft  am  oberen  rechten  Rand  platziert,  genauso  wie  der  Warenkorb  aber  dazu  mehr  im  Kapitel  3.2.2.  

Das   sind   Angewohnheiten,   die  mit   der   Zeit   entstanden   sind.   Diese   alltäglichen   Funktionen   sollten  

auch  weiterhin  da  positioniert  werden,  wo  der  Kunde  sie  erwartet  um  ihm  den  Besuch  auf  der  Web-­‐

site   zu  erleichtern.  Anders   sein   zu  wollen,  könnte  Besucher  dazu  bewegen  auf  andere  alternativen  

Seiten  auszuweichen,  die  ihnen  eine  Navigation  bieten,  welche  sie  sich  gewohnt  sind.  Denn  in  unse-­‐

rer  heutigen  Gesellschaft  ist  der  Mensch  ständig  auf  der  Suche  nach  dem  kürzesten  Weg,  um  damit  

Zeit  zu  sparen  und  zusätzlich  äusserst  zielorientiert  zu  sein.  Dies  spiegelt  sich  auch  im  Internet  wie-­‐

der.  Das  Ziel  ist  innerhalb  weniger  Sekunden  einen  Überblick  zu  bekommen  und  in  seinem  Vorhaben  

nicht  von  unnötigen  Pop-­‐ups  abgelenkt  zu  werden,  um  dann  erfolgreich  die  Seite  verlassen  zu  kön-­‐

nen.  Man  möchte  sich  keine  neuen  Navigationssysteme  anlernen,  wenn  dies  nicht  nötig  ist.  Die  Shop-­‐

Betreiber  sollten  sich  hinterfragen,  was  ihre  Kunden  für  Wertvorstellungen  an  einer  Website  haben.  

„Die  hauptsächlichen  Aktionen,  die  die  Anwender  auf  einer  Seite  durchführen  möchten,  sollten  ein-­‐

fach  sein.  Andere  Aktionen  und  erweiterte  Features  sind  sicherlich  möglich;  aber  einfache  Dinge  soll-­‐

ten  auch  einfach  zu  bewerkstelligen  sein“  [Nielson  2001,  S.  380].  Die  Neukunden  haben  strikte  An-­‐

sichten  und  tolerieren  keine  Hindernisse,  um  ihr  Ziel  erreichen  zu  können.  „Damit  ist  das  Leitprinzip  

beim  Webdesign  die  Beseitigung  aller  Hindernisse  für  den  Benutzer,  damit  er  so  schnell  wie  möglich  

Erfolg  hat“  [Nielson  2001,  S.  380].  Deshalb  sollte  hier  betont  werden,  dass  die  Kunden  einer  Website  

ein  schlichtes  Design  und  eine  einfache  Navigation  sehr  schätzen,  da  es  ihnen  den  Besuch  erleichtert.  

2.3  Verwirklichung  und  Design  der  Website  

Im  vorherigen  Teil  wurde  erläutert,  was  die  Grundelemente  einer  Website  sind  und  das  es  ratsam  ist  

sich  auf  das  wesentliche  zu  konzentrieren.  Jedoch  muss  es  einer  Unternehmung  möglich  sein,  sich  im  

Internet  ihrem  Image  entsprechend  zu  präsentieren.  Ein  individuelles  Webdesign  ist  erforderlich,  um  

sich  von  der  Masse  abzugrenzen.  

Die  Webshop-­‐Betreiber  sollten  sich  mit   ihren  Webdesignern  zusammensetzen  und  sich  gemeinsam  

Gedanken  machen,  was  die  Visionen  und  Ideen  beider  Seiten  sind.  Die  Website  sollte  das  Unterneh-­‐

men  widerspiegeln.  Der  Unternehmer  wird  am  besten  wissen,  was  die  Seite  beinhalten  muss,  damit  

die  Kunden  auch  vollständig  informiert  werden  und  vice  versa  weiss  der  Webdesigner,  was  die  Mög-­‐

lichkeiten  bezüglich  Gestaltung  eines  Webshops  sind,  welches  die  „Do’s  and  Dont’s“  sind  und  hat  die  

notwendige  grafische  Vorstellungskraft,  wie  das  ganze  Gerüst  im  Web  darzustellen  ist.      

 

7  

 

   

 „Es  gibt  vier  Hauptgründe  dafür,  warum  Anwender  einige  Seiten  immer  und  andere  nie  wieder  besu-­‐

chen.  Diese  vier  Kriterien  dienen  als  Grundlage  eines  guten  Webdesigns.  Denn  sie  drücken  aus,  was  

sich  die  Anwender  am  meisten  wünschen.  Die  Kriterien  können  in  dem  Akronym  HOME  zusammen-­‐

gefasst  werden.“  [Nielson  2001,  S.  380]  

• Inhalt  von  hoher  Qualität  (High-­‐quality  content)  

• Häufige  Aktualisierung  (Often  update)  

• Minimale  Dowloadzeit  (Minimal  download  time)  

• Einfache  Handhabung  (Ease  of  use)  

Diese  vier  Anforderungen,  der  Kunden  sollten  vom  Web-­‐Betreiber  und  vom  Designer  beachtet  wer-­‐

den,  wenn  sie  ihre  Pläne  umsetzen  wollen.    

Durch  ausgewählte  Farbkonzepte  und  dem  einfügen  von  Bildern,  Videos  und  Flashdesigns  lassen  sich  

Websites  gestalten,  wie  es  vor  einigen  Jahren  nicht  möglich  gewesen  wäre.  Somit  gehen  nicht  nur  im  

Bereich  Mode  Saison-­‐Trends  hervor,  sondern  auch  im  Webdesign.  Durch  die  starke  Erweiterung  der  

Möglichkeiten   in   Gestaltung   von  Websites   hat   sich   eine   Bewegung   entwickelt,   die   den   Designern  

ermöglicht,  individuelles  Webdesign  zu  präsentieren.  

 

Abbildung  2:  Startseite  von  Nespresso.com

 

8  

 

 

Im  Beispiel  von  Nespresso  in  Abbildung  2  haben  sich  die  Unternehmer  und  Webdesigner  klare  Ziele  

gestellt,  wie  sie  ihr  glamouröses  und  modernes  Image  auch  im  Internet  am  besten  in  Szene  setzen  

können.  Die  Seite  ist  nur  auf  die  wesentlichen  Aspekte  reduziert  und  beschafft  dem  Besucher  einen  

übersichtlichen  Einstieg.  Der  Kunde  wird  mit  „KLICKEN  SIE  HIER“-­‐  Buttons  (in  Abbildung  2  rot  mar-­‐

kiert)  aufgefordert  und  auch  angespornt,  tiefer  in  die  Seiteninhalte  vorzustossen.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

9  

 

   

3  Web-­‐Usability    

Dieses  Kapitel  handelt  nun  von  der  Usability  eines  Webshops.  Bevor  das  Thema  angeschnitten  wird  

zwei  Definitionen  von  Usability.  

„Usability  ist  das  Ausmass,  in  dem  ein  Produkt  durch  bestimmte  Benutzer  in  einem  bestimmten  Nut-­‐

zungskontext  genutzt  werden  kann,  um  bestimmte  Ziele  effektiv,  effizient  und  zufrieden  stellend  zu  

erreichen“  [Eberhard-­‐Yom  2010,  S.  5].  

„Das  Ziel  einer  auf  Usability  ausgerichteten  Entwicklung  ist  die  Erstellung  von  Softwareprodukten,  die  

Benutzer  zur  Erreichung  ihrer  Arbeitergebnisse  befähigen  und  dabei  deren  Belange  im  jeweiligen  Nut-­‐

zungskontext  beachten.  Der  Grad  der  Usability  ist  anhand  von  Evaluationen  messbar.  Die  Usability  ist  

somit  eine  Eigenschaft  einer  Applikation.  Sie   subsummiert  andere  Merkmale,   z.B.  Performance  auf-­‐

grund   technischer   Gegebenheiten   und   Effektivität   aufgrund   guter   Informationsdarstellung.   Ge-­‐

brauchstauglichkeit   ist   eine   deutsche  Übersetzung   des   englischsprachigen   Fachausdrucks  Usability“  

[Balzert,  Klug  &  Pampuch  2009].  

Im   deutschen   wird   an   Stelle   von   Usability   auch   oft   der   Begriff   Benutzerfreundlichkeit   verwendet.  

Unabhängig  davon  ob  der  Shopbetreiber  oder   sein  Designer  von   ihrer  Website  überzeugt   sind,  am  

Ende  muss  der  Kunde  die  Handlungslogistik  des  Webshops  verstanden  haben.  Ist  dies  nicht  der  Fall,  

werden  womöglich  weniger  Abschlüsse  im  Shop  erzielt.  Eine  nutzerfreundliche  Seite  wurde  erreicht,  

wenn  die  Kunden  ihre  individuellen  Wünsche  effektiv  und  effizient  erfüllen  können.  

3.1  Bestimmung  der  Zielgruppe  

Um   für  die  potentiellen  Kunden  eine  Website  bedienungsgerecht   erstellen   zu   können,  müssen  die  

Unternehmer  des  Webshops  die  Homepage  aus  der  Perspektive  der  Kunden  betrachten,  um  heraus-­‐

zufinden   zu   können   was   ihre   Kunden   von   der   Website   wollen.   Mit   entsprechenden   Datenerhe-­‐

bungsmethoden  wie  z.B.  Web-­‐Analytics,  Tests  oder  Befragungen  ist  es  möglich  solche  Fragen  zu  be-­‐

antworten.  Das  bildet  anschliessend  das  Fundament  einer  erfolgreichen  Usability.  Um  an  diese  Aus-­‐

gangslage  zu  gelangen  definiert  [Eberhard-­‐Yom  2010]  folgende  Fragen  zur  Bestimmung  der  Zielgrup-­‐

pe:  

- Wer  nutzt  die  Anwendung?  

- In  welchen  Situationen?  

- Aus  welchen  Gründen  und  mit  welcher  Zielsetzung?  

 

10  

 

   

- Mit  welchen  Erwartungen  und  Anforderungen?  

Ein  erstmaliger  Besucher  kennt  sich  mit  der  Navigation  der  Seite  noch  nicht  aus.  Er  bringt  zwar  ein  

Vorwissen  von  anderen  Internetseiten  mit  sich,  aber  trotzdem  öffnet  sich  nach  jedem  Mausklick  eine  

neue  Seite  für  ihn.  Deswegen  ist  es  ratsam  ein  Navigationskonzept  zu  gestalten,  dass  in  der  Handha-­‐

bung   so   einfach,   sicher   und   vertraut   auftritt,   dass   keinerlei   Fragen   aufkommen   können.   Der   Satz  

„Don’t  make  me  think“,  Titel  des  Buches  von  Krug  2010  besagt,  dass  umso  länger  ein  Neukunde  über  

den  weiteren  Verlauf   nachdenken  muss,   desto  mehr  Abbrüche  wird   es   in   der  Regel   geben.   Ist   die  

Bedienung  der  Seite  zu  kompliziert,  verliert  man  die  Geduld  und  das  Bedürfnis  sich  weiterhin  Gedan-­‐

ken  darüber  zu  machen,  um  an  das  angestrebte  Ziel  zu  gelangen.  

Webshopbetreiber  sollten  darauf  acht  geben,  dass  die  ganze  Navigation  so  schlicht  und  einfach  wie  

möglich  gehalten  werden,  damit   sich  keiner  ausgegrenzt   fühlen  muss,  da  man  den  Verlauf  des  Sy-­‐

stems  nicht  versteht.  Ausserdem  sollen  die  Bedienungen,  die  man  von  anderen  Webshops  kennt  und  

sich   in  der  Gesellschaft  etabliert  haben,  nicht  geändert  werden  nur  damit  man  sich  von  der  Masse  

differenzieren   kann.  Denn  was   sich   der   Kunde   angewöhnt   hat,   davon   kann  man   ihn   vielleicht   erst  

beim   dritten   Besuch   entwöhnen,   was   schon   zu   spät   sein   kann,   da   es   eher   keinen   dritten   Besuch    

mehr  geben  wird.  

Die  Scheu  im  Internet  einzukaufen,  ist  zwar  kleiner  geworden,  jedoch  ist  es  weiterhin  ein  Thema  im  

Onlinebereich.  Deswegen  ist  es  wichtig  dem  Kunden  Vertrauen  und  Seriosität  zu  übermitteln.  Hat  der  

Kunde  die  Glaubwürdigkeit  des  Shops  wahrgenommen,  wird  er  tendenziell  schneller  auch  einen  Ver-­‐

trag  mit   dem  Webshop   eingehen.   „Jeder   Shop-­‐Betreiber   ist   an   einem  möglichst   hohen   Customer-­‐

Lifetime-­‐Value   interessiert,   also   den   Deckungsbeitrag,   den   der   Kunde   während   seines   gesamten  

„Kundenlebens“  im  Shop  realisiert.  Und  auch  hier  hat  sich  in  Längsschnittstudien  gezeigt,  dass  Kun-­‐

den  den  Shop  treu  bleiben,  deren  Nutzung  sie  als  einfach  und  vertraut  wahrnehmen“  [Eberhard-­‐Yom  

2010,  S.  53].  

3.2  Navigation  im  Webshop  

3.2.1  Die  Navigationsstruktur  

Damit  der  Kunde  erfolgreich  ans  Ziel  gelangen  kann,  müssen  die  Shopbetreiber  die  möglichen  Wege  

darlegen,  die  ein  Kunde  gehen  könnte.  Diese  sollten  sinnvoll  strukturiert  sein.  Dabei  bilden  sich  ge-­‐

wisse  Navigationsstrukturen.  Für  einen  Webshop  ist  der  hierarchische  Aufbau  (die  Baumstruktur)  in  

Abbildung  3  die  übliche  Funktionsform.  Bei  dieser  Form  der  Navigation  bildet  die  Homepage  die  o-­‐

berste   Ebene.   Durch   die   Auswahl   einer   Hauptkategorie,   was   z.B.   die   Produkte   im   Webshop   sind  

 

11  

 

   

(zweite  Ebene),  öffnen  sich  darauf  Unterkategorien,  welche  die  dritte  Ebene  bilden.  Dieser  Vorgang  

kann  mehrmals  wiederholt  werden.  Die  lineare  Navigationsstruktur  wird  vor  allem  für  den  Checkout-­‐

Prozess  benötigt.  In  Abbildung  4  wird  eine  mögliche  Variante  vorgestellt.  

 

 

Abbildung  3:  Die  Baumstruktur  

 

 

 

Abbildung  4:  Die  Lineare  Navigationsstruktur  beim  Checkout-­‐Prozess  

 

Um   sich   die   Baumstruktur   besser   vorstellen   zu   können,   wird   hier   der   hierarchische   Aufbau   von  

Nespresso  vorgestellt:  

Auf  der  Startseite  können  die  Kunden  unter  der  Hauptnavigationsleiste  „DIE  MASCHINEN“  auswäh-­‐

len.  Ein  Layer  wird  geöffnet,  wodurch  der  Kunde  den  Link  „UNSER  MASCHINENSORTIMENT“  anklic-­‐

ken  kann  (Abbildung  5).    

 1.              2.              3.              4.              5.                1. Produktdetailseite  2. Warenkorb  3. Kontaktformular  4. Zahlungsmöglichkeiten  5. Kontrolle  &  Bestätigung  

 

12  

 

   

 

Abbildung  5:  Hauptnavigation  auf  der  Startseite  

 

Man  gelangt  auf  eine  neue  Seite,  wo  man  alle  Maschinenarten  von  Nespresso  im  Überblick  hat  (Ab-­‐

bildung  6).  

 

Abbildung  6:  Erste  Produktauswahl  nach  Maschinenart  

 

13  

 

   

Wählt  man  nun  eine  der  drei  Maschinen  aus,  öffnet  sich  wiederum  eine  neue  Seite,  welche  die  ver-­‐

schieden  Formen  und  Farben  der  gewählten  Kaffeemaschine  zeigt  (Abbildung  7).  

 

Abbildung  7:  Zweite  Produktauswahl  einer  bestimmten  Maschinenart  

Zusammengefasst  heisst  das,  dass  nach   jedem  Öffnen  einer  neuen  Rubrik  neue  Verzweigungen  als  

Auswahlmöglichkeiten  für  den  Kunden  entstehen,  mit  denen  er  immer  tiefer  in  das  Produktsortiment  

gelangen  kann.  Hier  sollte  der  Webshopbetreiber  darauf  acht  geben,  dass  der  Kunde  nicht  zu   tiefe  

Navigationswege  eingehen  muss  (vgl.  Abbildung  8).  Denn  vor  jeder  Verzweigung  muss  der  Kunde  sich  

erneut  entscheiden,  welchen  Weg  er  eingehen  möchte,  wodurch  das  Risiko  besteht,  dass  der  Kunde  

vom  Pfad  abkommt  und  den  Kaufprozess  abbricht.  Somit  ist  es  ratsam  viele  Hauptrubriken  zu  gestal-­‐

ten,   für  eine  übersichtliche   flache  Navigationsstruktur,  damit  der  Kunde  schneller   zum  Ziel  geleitet  

werden   kann   und   bei   einer   Fehlentscheidung   umgehend   zur   Hauptnavigation   zurückkehren   kann  

(vgl.  Abbildung  9).  

 

Abbildung  8:  Tiefe  Navigationsstruktur  

 

14  

 

   

 

Abbildung  9:  Flache  Navigationsstruktur  

Der  Webshop  soll  durch  eine  deutliche  lineare  Vorwärtsnavigation  gegliedert  sein.  Der  Shopbetreiber  

muss  dem  Kunden   zeigen,  wo  und  wie   er   zum  Angebot   gelangen   kann.  Mit   einem  „HIER  GEHT  ES  

WEITER“-­‐   Button,   der   in   einer   auffälligen   Farbe   dargestellt   ist,   klickt   sich   der   User   wie   von   selbst  

durch  die  Webshop-­‐Pfade,  die  der  Anbieter  gelegt  hat.  Genau  so  wichtig  ist  auch  die  Rückwärtsnavi-­‐

gation.  Denn  das  ist  „die  meistgenutzte  Funktion  im  Browser“  [Eberhard-­‐Yom  2010,  S.47].  Diese  soll-­‐

te   dem  Kunden   immer   zur   Verfügung   stehen,   um  wieder   zum  Ausgangspunkt   zurück   zu   gelangen,  

falls  versehentlich  eine  Fehlentscheidung  getroffen  wurde  oder  der  Besucher  sich  vertippt  hat.  Dieser  

„ZURÜCK“-­‐Button  sollte  deswegen  immer  funktionieren.  Es  kann  schon  sehr  frustrierend  sein,  wenn  

durch   die   Rückwärtsnavigation,   die   Fehlermeldung   auftaucht,   dass   die   Seite   nicht  mehr   angezeigt  

werden  kann.  Somit  müsste  der  Kunde  wieder  zur  Hauptseite  zurückkehren  und  von  Vorne  beginnen.  

In  der  Abbildung  7  auf  der  Website  von  Nespresso  werden  dem  Kunden  die  verschiedenen  Farben  

und  Formen  einer  bestimmten  Kaffeemaschinenart  vorgestellt,   für  die  er  sich  entschieden  hat.  Von  

dieser  Seite  aus  kann  er  nicht  mehr  direkt  zurück  zur  Seite  der  Maschinenartwahl  gelangen.  Lediglich  

durch  die  Registernavigation  unter  dem  Begriff  „DIE  MASCHINEN“,  kann  er  nochmals  neu  wählen,  für  

welche   Kaffeemaschinenart   er   sich   interessiert.   Dies   ist   etwas   umständlich.   Ein   kleiner   „ZURÜCK“-­‐

Button  in  der  linken  unteren  Seite  würde  dem  Kunden  die  Möglichkeit  geben  seinen  Klick  rückgängig  

zu  machen.  Anders  ist  es,  wenn  der  Kunde  schon  bei  der  detaillierten  Produktinformation  angekom-­‐

men  ist.  Dort  findet  man  einen  „ZURÜCK  ZUR  LISTE“-­‐Button  (Abbildung  10).  

3.2.2  Die  Produktinformationsseite  

Hat   sich   der   Kunde   für   ein   Produkt   entschieden,  möchte   er   sich   zusätzlich   Informationen   darüber  

beschaffen  oder  bereits  einen  Kauf  tätigen.  Die  Abbildung  des  gewünschten  Produkts  und  die  dazu-­‐

gehörige   Kurzbeschreibung   sind   dabei   zwei   wichtige   Aspekte.   Die   Abbildung   ist   zentral   damit   der  

Kunde  nochmals  eine  Bestätigung  erhält,  den  richtigen  Artikel  gewählt  zu  haben.  Mittlerweile   lässt  

sich  die  Ansicht  des  Produktes  nicht  nur  durch  eine  Vergrösserungsfunktion  des  Bildes   verbessern,  

darüber  hinaus  kann  eine  360-­‐Grad-­‐Rundumansicht  oder  Zoomfunktion  angeboten  werden.  Zusätz-­‐

lich  werden  auch  Videos  publiziert,  in  denen  die  angebotenen  Produkte  präsentiert  werden.  Beson-­‐

ders  bei  Webshops,  die  Kleider  und  Accessoires  verkaufen,  ist  diese  Art  der  Warenpräsentation  von  

 

15  

 

   

grosser  Beliebtheit.  Der  Kunde  kann   sich  dank  der  Videopublikation  ein  besseres  Bild  machen,  wie  

die  Kleider  wirken  und  fallen.  Um  die  Produktabbildung  herum  sollten  „die  aktionsauslösenden  But-­‐

tons“  platziert  werden  [Eberhard-­‐Yom  2010,  S.61].  Vor  allem  bei  dem  „IN  DEN  WARENKORB  LEGEN“-­‐

Button  ist  es  wichtig,  ihn  auffällig  und  gut  sichtbar  zu  gestallten.  Zum  Beispiel  kann  eine  kräftige  Far-­‐

be  in  einer  etwas  grösseren  Gestalt  gewählt  werden,  um  diesen  etwas  hervorzuheben.  

Bei  der  Kurzbeschreibung  sollten  nur  die  notwendigsten  Informationen  in  einem  kurzen  Text  zusam-­‐

mengestellt   oder   Stichwortartig   aufgelistet   werden.   Diese   Form   der   Beschreibung   wird   dem   ent-­‐

schlossenen  und  zielorientierten  Kunden  reichen.  Möchte  der  Kunde  mehr  über  einen  bestimmten  

Artikel  erfahren,   sollte  dies  über  einen  Link  ermöglicht  werden,  wo  der  Kunde  eine  detaillierte  Be-­‐

schreibung  erhält.  Natürlich  darf   auf  der  Produktdetailseite  der  Preis  des  Artikels  nicht   fehlen,  der  

auch  wieder  in  der  Nähe  der  Abbildung  publiziert  werden  sollte.  Der  Kunde  möchte  wissen  wie  viel  er  

zu  zahlen  hat,  falls  er  sich  für  dieses  Produkt  entscheidet.  Erhält  er  diese  Information  erst  am  Ende  

seines  Kaufprozesses,  könnte  er  verärgert  sein,  wenn  der  Preis  nicht  seinen  Vorstellungen  entspricht  

und  er  sich  umsonst  die  Bemühungen  gemacht  hat.    

 

Abbildung  10:  Die  Produktdetailseite  von  „Citiz“-­‐Kaffeemaschinen  

In  der  Abbildung  10  ist  die  Produktdetailseite  abgebildet.  Die  gewählte  Kaffeemaschine  wird  im  Zen-­‐

trum  der  Seite  abgebildet.  Rechts  in  der  Nähe  der  Abbildung  befindet  sich  der  Button  „IN  DEN  WA-­‐

RENKORB  LEGEN“,  welcher  etwas  grösser  gestaltet  wurde  und   in  einem  kräftigen  grün  auf  grauem  

 

16  

 

   

Hintergrund  aufmerksam  positioniert  ist.  Der  Kunde  hat  auch  einen  Einblick,  wie  hoch  die  Kosten  für  

das  gewählte  Produkt  sind.  Die  Kurzbeschreibung  findet  man  auf  der  linken  Seite.  Diese  wird  in  Form  

einer   Aufzählung   und   in   Piktogrammen,   oder   auch   Ikons   genannt,   vorgestellt.  Wenn  man  mit   der  

Maus  über  das  Piktogramm  fährt,  erfährt  der  Kunde  welche  Bedeutung  es  hat.  Benötigt  der  Kunde  

mehr  Informationen  über  die  Maschine,  findet  er  rechts  unten  einen  dezent  dargestellten  Button  mit  

der   Aufschrift   „MINI-­‐WEBSITE“.  Wird   dieser   Button   vom   Kunden   angeklickt,   öffnet   sich   ein   neues  

Fenster  mit  einer  neuen  Website  (vgl.  Abbildung  11).  Hier  findet  der  User  eine  ausführliche  Produkt-­‐

beschreibung  über  die  „Citiz“  Kaffeemaschinen.  Nespresso  bietet   ihren  Kunden  auf  der  Produktde-­‐

tailseite  eine  zusätzliche  Auskunft  über  die  Lieferzeit  der  gewählten  Waren.  Was  neben  der  Lieferzeit  

auch  eine  häufige  Produktinformation   ist,   sind  die  Angaben  ob   sich  die  Ware  momentan   im   Lager  

befindet  oder  nicht.  Solche  Hinweise  können  die  Kunden  natürlich  animieren  einen  Kauf  zu  tätigen.  

Ausserdem  erfährt  der  Kunde  bei  Nespresso,  dass  er  keine  Lieferkosten  zu  bezahlen  hat.  Zusätzlich  

hat  er  die  Möglichkeit  die  Bedienungsanleitung  der  Kaffeemaschine  im  PDF-­‐  Format  schon  im  Voraus  

herunterzuladen.  

 

Abbildung  11  :  Die  Website  der  „Citiz“-­‐Kaffeemaschinen  

Was  die  Produktinformationsseite  von  Nespresso  nicht  bietet,   ist  eine  spezielle  Abbildungsform  der  

ausgewählten   Kaffeemaschine,   wie   z.B.   ein   Video,   Rundumansicht   oder   Zoomfunktion.   Erst   wenn  

man  die  Mini-­‐Website  öffnet,  kann  sich  der  Kunde  mit  ein  bisschen  mehr  Aufwand  eine  360-­‐Grad-­‐

Animation  des  Produktes  ansehen  (vgl.  Abbildung  12).  Im  Shop  selbst  wird  nur  ein  Foto  dargestellt.  

 

17  

 

   

 

Abbildung  12  :  360-­‐Grad-­‐  Rundumansicht    

Durch  einen  Mausklick  können  die  Käufer  das  Produkt  in  den  Warenkorb  legen.  Es  wird  gezeigt,  was  

sich  schon  alles  im  Korb  befindet.  „Mittlerweile  hat  es  sich  bei  den  meisten  Shops  eingebürgert,  den  

Warenkorb   generell   auf   der   rechten   Seite   und   oftmals   rechts   oben   darzustellen“   [Fischer   2009,   S.  

554].   Auch   Nespresso   hat   dieses   Usability-­‐Gesetz   beibehalten   und   den   Warenkorb   wie   erwartet  

rechts  oben  positioniert   (vgl.  Abbildung  13).  Hier  wird  der  Kunde  auch  aufgefordert,  die  gewählten  

Produkte  zu  bestellen.  

 

Abbildung  13:  Bestellnavigation  zum  Warenkorb  

 

18  

 

   

3.2.3  Der  Checkout-­‐Prozess  

Der  Checkout-­‐Prozess  beinhaltet  den  Weg  vom  Warenkorb  bis  zur  Bestellbestätigung.  An  dieser  Stel-­‐

le  hat  sich  der  Kunde  eigentlich  schon  entschieden  und  möchte  den  Kauf  nun  beenden.  Werden  ihm  

nun  noch  überflüssige  Hindernisse  gelegt,  wird  er  den  Kaufprozess  beenden.  Der  Webshop-­‐Betreiber  

muss  diese  Hindernisse  vermeiden.  „Das  positive  an  der  Checkout-­‐Optimierung:  Bereits  kleine  Ver-­‐

änderungen  mit  wenig  Aufwand  können  deutliche  Auswirkungen  auf  die  Konversionsrate  des  Shops  

haben“  [Eberhard-­‐Yom  2010,  S.  87].  

Der  Warenkorb  

Der  Kunde  braucht  eine  Bestätigung  von  dem,  was  sich  im  Warenkorb  befindet  und  was  er  zu  bezah-­‐

len  hat.   Zur   besseren  Übersicht   sollten  deswegen  Mengenangaben  der   Produkte  und  der  Gesamt-­‐

preis   im  Warenkorb  ständig  angezeigt  werden.  Der  Kunde  sollte  auch  die  Möglichkeit  erhalten,  ein  

gewähltes  Produkt  zu  ändern  oder  zu  löschen.  

Der  Prozess   ist  von  einer  eindeutigen  Vorwärtsnavigation  gezeichnet.  Hier  soll  der  Kunde  nur  noch  

den  Kauf  tätigen.  Buttons,  die  den  Kaufakt  fortsetzen,  sollten  auch  hier  gezielt  und  aufmerksam  posi-­‐

tioniert  werden.  Die  Fortschrittanzeige  informiert  den  Kunden  wie  viele  Schritte  er  noch  durchlaufen  

muss  bis  der  Kaufprozess  beendet  ist.  

 

Abbildung  14:  Der  Warenkorb  

 

19  

 

   

 

Auch  im  Warenkorb  von  Nespresso  in  Abbildung  14,  wird  der  Kunde  über  Preis  und  Mengenanzahl  

informiert.  Durch  die  „PLUS“-­‐  und  „MINUS“-­‐  Buttons,  kann  der  Kunde  die  Anzahl  beliebig  variieren.  

Der  Button,  um  die  Bestellung  fortzusetzen  ist  auch  hier  wieder  deutlich  in  grün  unten  rechts  zu  er-­‐

kennen.  Oberhalb  des  Warenkorbes  kann  man  von  der  Fortschrittanzeige  erkennen,  dass  noch  drei  

weitere  Schritte  folgen,  bis  der  Kaufprozess  beendet  ist.  

Identifizierung  und  Kontaktformular  

In  der  Regel  ist  das  ausfüllen,  des  Kontaktformulars  im  Web  eine  unbeliebte  Sache.  Dem  Kunden  

werden  oftmals  unnötige  Fragen  gestellt,  wo  er  sich  zu  Recht  fragen  darf,  warum  dies  für  seinen  Kauf  

relevant  ist.  Deswegen  lautet  hier  die  Devise  nicht  mehr  zu  verlangen,  als  für  den  Bestellprozess  

notwendig  ist.  Pflichtfelder  sollten  mit  einem  Sternsymbol  markiert  werden.  Diese  Bezeichnung  hat  

sich  im  Web  durchgesetzt  und  ist  von  vielen  Usern  bekannt.  Trotzdem  soll  das  Symbol  auf  der  Seite  

für  neue  Kunden  im  Web  erklärt  werden.  In  dieser  Phase  soll  der  Kunde  nicht  für  Mitgliedschaften  im  

Memberclub  gewonnen  werden.  Was  hier  zählt  ist  der  Kauf.  Nach  dem  Bestellprozess  kann  man  die  

Kunden  noch  immer  für  eine  Mitgliedschaft  umwerben.  

 

Abbildung  15:  Das  Kontaktformular  

 

20  

 

   

Nespresso  fragt  in  ihrem  Kontaktformular  nur  nach  Daten,  die  sie  für  die  Zusendung  der  Ware  benö-­‐

tigen.  Das  Formular  ist  übersichtlich  und  kurz  gestaltet,  damit  der  Kaufprozess  beschleunigt  wird  (vgl.  

Abbildung  15).  

Zahlungsmethoden  und  Bestätigung  

Grundsätzlich  ist  es  am  besten  so  viele  Zahlungsmöglichkeiten  wie  möglich  anzubieten.  Denn  so  kann  

die  Kaufabbruchquote  verkleinert  werden.  „Die  Vorkasse  ist  für  den  Shop-­‐Anbieter  das  sicherste,  

jedoch  beim  Online-­‐Shopper  unbeliebteste  Zahlungsverfahren“  [Eberhard-­‐Yom  2010,  S.  88].  Die  an-­‐

gebotenen  Zahlungsarten  sollen  übersichtlich  aufgelistet  werden.  Erst  durch  die  Auswahl  einer  be-­‐

stimmten  Zahlungsmethode  soll  der  Kunde  über  zusätzliche  Zahlungskonditionen  informiert  werden.  

Der  Kunde  soll  vor  der  endgültigen  Bestellung  die  Möglichkeit  bekommen  und  aufgefordert  werden,  

seine  Daten  nochmals  zu  überprüfen.  Wenn  die  Bestellung  abgesendet  wurde,  sollte  eine  Seite  ge-­‐

öffnet  werden,  die  dem  Kunden  bestätigt,  dass  der  Kaufprozess  erfolgreich  gewesen  ist.  Zusätzlich  

wäre  es  denkbar  noch  eine  E-­‐Mail  oder  eine  SMS  an  den  Kunden  als  Bestätigung  zu  senden.  Um  mehr  

Vertrauen  zu  übermitteln,  ist  es  immer  sinnvoll  dem  Kunden  eine  E-­‐Mail-­‐Adresse  oder  Telefonnum-­‐

mer  zu  hinterlassen.  

 

Abbildung  16  :  Das  Bestellformular  

 

21  

 

   

Nespresso   bietet   nur   eine   Zahlungsmethode   an,   nämlich  mit   Kreditkarte   (vgl.   Abbildung   16).   Viel-­‐

leicht  sind  sie  nicht  davon  abhängig,  weitere  Zahlungsmöglichkeiten  anzubieten,  da  sie  in  vielen  Ge-­‐

schäftsläden  aufzufinden  sind  und  auch  eigene  Filialen  besitzen.  Trotzdem  könnten  sie  mit  einer  klei-­‐

nen  Änderung  diesbezüglich,  ihren  Verkauf  im  Onlineshop  fördern.  

 

3.3  Die  Konversionsrate  

Bei  Webshops  gehören  die  Umsatzwerte  zu  den  wichtigsten  Fakten  der  Seite.  Die  Webshopbetreiber  

streben  natürlich  einen  möglichst  hohen  Wert   an.  Dafür  muss  die  Konversionsrate   gesteigert  wer-­‐

den.  Gemäss  [Ash  2009,  S.  50]  wird  dieser  Begriff  folgender  Massen  definiert:  

„Konversions-­‐Handlungen  sind  messbare  Ereignisse,  die  einen  Besucher  zu  den  erfolgsentscheiden-­‐

den  Aktivitäten  verleiten,  die  Sie  definiert  haben.  Für  die  Mehrzahl  entspricht  eine  Konversion  einem  

grossen   Ereignis,   beispielsweise   einem   Produktverkauf   oder   einer   Registrierung   für   eine   Dienstlei-­‐

stung.“  

Abbildung  17:  Formel  der  Konversionsrate  

„Die  Konversionsrate  wird  damit  zu  einem  wichtigen  Indikator  für  die  wirtschaftliche  Effizienz  eines  

Shops.  Denn   jeder  Besucher   ist  mittels  werblicher  und  damit  Kosten   verursachender  Massnahmen  

auf  das  Angebot  aufmerksam  gemacht  worden“  [Eberhard-­‐Yom  2010,  S.9].    

Schon  mit  einer  einfachen  Optimierung  der  Web-­‐Usability  kann  eine  Unternehmung  seine  Verkaufs-­‐

zahlen  steigern.  Kaufprozesse  werden  weniger  abgebrochen,  wenn  der  Kunde  auf  der  Seite  schnell  

eine  Übersicht  erhält  und  die  Navigation  versteht.  Wie  im  vorherigen  Kapitel  erwähnt  wurde,  gibt  es  

Navigationsfunktionen,  die  sich  bei  den  meisten  Websites  an  derselben  Stelle  befinden.  Solche  Ge-­‐

wohnheiten   werden   von   den   Kunden   erwartet.   Durch   eine   Anpassung   der   Navigation   kann   diese  

Barriere   leicht  entfernt  werden.  Überflüssige  Elemente,  die   von  den  Kunden  nicht   genutzt  werden  

und  nur  unnötig  verwirren  müssen  auf  einer  Website  vermieden  werden.    

Das  folgende  fiktive  Beispiel  soll  die  Auswirkungen  einer  gesteigerten  Konversionsrate  zeigen:  

KONVERSIONSRATE  =  KÄUFE  /  BESUCHER  

 

22  

 

   

Nehmen  wir  mal  an,  dass  ein  Kunde  auf  der  Website  von  Nespresso  vier  Franken  kostet.  Durch  die-­‐

sen  Marketing-­‐Aufwand  zählt  die  Website  10'000  Neukunden  pro  Monat.  Die  Konversionsrate   läge  

bei   vier   Prozent,   das  bedeutet,   dass  400  neue  Kunden  gewonnen  wurden,  die   im  Durchschnitt   für  

angenommen  50  Franken  etwas  bestellen.  Daraus   folgt  ein  Umsatz  von  20’000  Franken  (400  Besu-­‐

cher  x  50  Franken).  Hat  sich  der  Marketing-­‐Aufwand  gelohnt?  Um  die  400  Kunden  zu  gewinnen,  wur-­‐

den  40'000  Franken  eingesetzt,  d.h.  jeder  neue  Kunde  hat  100  Franken  für  Nespresso  gekostet.  Wür-­‐

de  man  einen  Deckungsbeitrag  von  50%  annehmen,  dann  hätte  der  Shop  an  jedem  neuen  Kunden  25  

Franken   verdient.   Der   Kunde  müsste   also   noch   drei  Mal   zum   selben   Durchschnittspreis   bestellen,  

damit  die  Marketing-­‐Kosten  gedeckt  sind.  

Nun  nehmen  wir  an,  dass  die  Konversionsrate  durch  bessere  Usability  auf  acht  Prozent  gestiegen  ist.  

Nun  hat  Nespresso  800  neue  Kunden  gewonnen.  Es  wurde  somit  40'000  Franken  Umsatz  erzielt  und  

die  Kosten  pro  Neukunde  sind  dazu  noch  auf  50  Franken  gesunken.  Hier  würde  der  Neukunde  schon  

bei  seiner  zweiten  Bestellung  die  Kosten  decken  (vgl.  Tabelle  1).  

 

  4%  Konversionsrate   8%  Konversionsrate  

Marketing-­‐Kosten  (4CHF/Neu-­‐Besucher,  10'000  Neu-­‐Besucher/Monat  

40'000  CHF   40'000  CHF  

Gewonnene  Kunden   400   800  

Kosten  pro  neuen  Kunden   100  CHF   50  CHF  

Absoluter  Umsatz  (  50  CHF  Durchschnittseinkauf)  

20'000  CHF   40'000  CHF  

Absoluter  Deckungsbeitrag  (50%)  

10'000  CHF   20'000  CHF  

 

Tabelle  1:  Zahlenbeispiel  der  Konversionsrate  

Das  Beispiel  zeigt  eindeutig,  dass  bei  einer  Erhöhung  der  Konversionsrate  nicht  nur  der  Umsatz  ge-­‐

steigert  wird,   sondern   gleichzeitig   die   Kosten   pro   Kunden   abnehmen.  Unternehmungen,   die   einen  

Webshop  betreiben,  müssen  daher  ständig  darauf  acht  geben,  dass   ihre  Website  den  Kunden  eine  

erforderliche  Usability  bietet.    

 

23  

 

   

Zur  Überprüfung,  ob  eine  Änderung  in  der  Navigation  oder  Gestaltung  der  Website  die  Konversions-­‐

rate   verbessert   oder   verschlechtert,   werden   A/B-­‐Tests   durchgeführt.   „Dabei   werden   einfach   zwei  

Varianten  gleichzeitig  einem  unterschiedlichen  Zielpublikum  gezeigt.  Die  besser  abschneidende  der  

beiden  Varianten  wird   zukünftig   verwendet  und  eventuell   noch  weiter   verfeinert“[Fischer   2009,   S.  

637].   Beide   Versionen   werden   den   Besuchern   abwechslungsweise   bereitgestellt.   Beispielsweise  

könnte  bei  jedem  zweiten  Besucher  die  neue  Variante  präsentiert  werden.  Eine  andere  Möglichkeit  

wäre,   dass     längere   Zeitintervalle   eingerichtet   werden,   die   dann   von   einer   Variante   zur   anderen  

wechseln.  

Nach   Ablauf   der   Testphase   kann   für   beide   Varianten   der  Website   die   Konversionsrate   berechnet  

werden.  Wenn  dabei   eindeutig   unterschiedlich   hohe   Zahlen  heraus   kommen,   könne  Vermutungen  

angenommen  werden,  dass  sich  eine  der  beiden  Versionen  besser  für  den  Webshop  eignet.  

 

 

 

 

24  

 

 

4  Schlusswort  

In  der  Arbeit  wurde  gezeigt,  dass  sich  Unternehmungen  bei  der  Gestaltung  ihrer  Website  ganz  nach  

den   Wünschen   der   Kunden   richten   müssen.   Diese   Kunden   fordern   eine   einfache   Navigation   und  

schnelle   Ausführung   ihrer   Ziele.   Die   Unternehmer  müssen  wissen,  wer   ihren   Kundenstamm  bildet  

und  welche  Anforderungen  und  Erwartungen  sie  haben.  Diese  Information  bildet  die  Grundlage  einer  

guten  Usability.  

Es  haben  sich  in  den  vergangenen  Jahren  Gewohnheiten  im  Web  etabliert,  die  von  nahe  zu  allen  Kun-­‐

den  auch  in  dieser  Form  erwarten  werden.  Solche  Navigationsfunktionen  oder  -­‐platzierungen  sollten  

auch   von   den   Webshop-­‐Betreibern   übernommen   werden,   um   eine   Benutzerfreundliche   Website  

gewährleisten   zu   können.   Wenn   nicht,   können   Kunden   verloren   werden,   da   sie   auf   alternative  

Websites  wechseln,  die  ihnen  diese  angewöhnte  Usability  bieten  können.  

Der  Webshop-­‐Betreiber  kann  durch  eine  eindeutige  vorwärts  Orientierung,  die  Kunden  einfacher  zu  

einer  Kaufentscheidung  bewegen.  Dazu  werden  Verkaufsauslösende  Buttons  auffälliger  gestaltet  und  

in  die   richtige  Position  gebracht.  Trotzdem  muss  den  Kunden   immer  die  Möglichkeit  geboten  wer-­‐

den,  wieder  zur  vorherigen  Seite  zurückzukehren.  

Durch  die  Optimierung  der  Usability  kann  eine  Unternehmung  ihre  Konversionsrate  im  Web  verbes-­‐

sern   durch   das   verwenden   von   A/B-­‐Tests.   Diese   können   vermeidliche   Schwachstellen   eines  Web-­‐

shops  aufdecken,  was  eine  Erhöhung  des  Umsatzes  bewirken  und  gleichzeitig  die  Kosten  pro  gewon-­‐

nen  Kunden  senken  kann.  

 

 

 

 

 

 

 

 

 

25  

 

 

Literaturverzeichnis  

 

[Ash  2009]  Ash,  Tim:  Landing  Pages  –  Optimieren,  Testen,  Conversions  generieren,  Mitp-­‐Verlag,  Hei-­‐

delberg,  2009.  

[Balzert,  Klug  &  Pampuch  2009]  Balzert,  Heide;  Klug,  Uwe  &  Pampuch,  Anja:  Webdesign  &  Web-­‐

Usability,  Basiswissen  für  Web-­‐Entwickler,  2.  Auflage,  W3L,  Herdecken/Witten,  2009.  

[Edel  2009]  Edel,  Bärbel:  Die  Rolle  der  Landing  Page  im  Suchmaschinenmarketing,  Grin,  Norderstedt,  

2009.  

[Eberhard-­‐Yom  2010]  Eberhard-­‐Yom,  Miriam:  Usability  als  Erfolgfaktor  –  Grundregeln,  User  Centered  

Design,  Umsetzung,  Cornelsen,  Berlin,  2010.  

[Fischer  2009]  Fischer,  Mario:  Website  Boosting  2.0  –  Suchmaschinen-­‐Optimierung,  Usability,  Online-­‐

Marketing,  2.  akualisierte  und  erweiterte  Auflage,  Mitp-­‐Verlag,  Heidelberg,  2009.  

[Fleischer  2010]  Fleischer,  Martin:  Der  optimale  Webshop,  Webusability  und  rechtliche  Aspekte  im  e-­‐

Commerce,  Diplomica  Verlag,  Hamburg,  2010.  

[Hoffmann  2008]  Hoffmann,  Manuela:  Modernes  Webdesign:  Gestaltungsprinzipien,  Webstandards,  

Praxis,  Galileo  Press,  Bonn,  2008.  

[Hogenkamp  2008]  Hogenkamp,  Peter:  Web-­‐Usability:  Modellentwicklung  -­‐  Operationalisierung  -­‐  

Überprüfung,  Umsetzung,  St.  Gallen,  2008.  

[Nielsen  2001]  Nielsen,  Jakob:  Designing  Web  Usability,  Markt&Technik,  München,  2001.  

[Schweibenz  &  Thissen  2002]  Schweibenz,  Werner  &  Thissen,  Frank:  Qualität  im  Web,  Benutzer-­‐

freundliche  Webseiten  durch  Usability  Evaluation,  Springer,  Heidelberg,  2002.  

[Stocksmeier  2002]  Stocksmeier,  Thorsten:  Business-­‐Webdesign  –  Benutzerfreundlichkeit,  Konzeptio-­‐

nierung,  Technik,  Wartung,  Springer,  Heidelberg,  2002.  

[Völkl-­‐Wolf  2009]  Völkl-­‐Wolf,  Christina:  Usability-­‐Studie  zu  Online-­‐Shops  für  Kinderprodukte,  Grin,  

Nordersted,  2009.