Das Konzept kann man sich im Artikel anschauen.

Bei der Vorstellung des neuen VW Beetle haben sich die Kreativen etwas ganz besonderes einfallen lassen. Eine Website, die es schafft, die Besucher ohne Klick über den Beetle zu informieren und dabei sogar noch einen Schwung “Verspieltheit” mit reinbringt.

Das Konzept in live habe ich hier mal in einem Video aufgezeichnet – Es wurde dabei nur das Scrollrad der Mouse verwendet (später auch mal ein Klick). Die Call To Action im sichtbaren Bereich lautet entsprechend auch wie folgt: “Jetzt Scrollen!”

Wer sich das nachfolgende Video anschaut, sollte mal auf folgende Punkte achten:

• Navigation ohne Klick – Scrollen reicht aus!
• Steuerung des Fahrzeugs durch das Scroll Rad – Es entsteht ein Gefühl vom Fahren
• Steuerbarkeit par excellence – in Richtung und Geschwindigkeit vom Nutzer selbst bestimmt
• Fokus auf den Content
• Das Produkt kann “erlebt” werden >> es kann in Bewegung aus verschiedenen Blickwinkeln erkundet werden
• Das Statische einer Website wurde OHNE Video aufgebrochen!
• Strenges Einhalten des Sichtbaren Bereich bei Vorstellung von Einzelaspekten
• Ganz am Ende der Seite wurde die “normale” VW Seite mit dem vorgewählten Beetle per iframe eingebunden, sodass eine Navigation ohne das Verlassen der Seite möglich ist!
• Einziger Wehmutstropfen: Es kann etwas dauern (kommt aber im Großen und Ganzen ohne Flash aus)

Click here to view the video on YouTube.

Related Posts

1. Startseite von Online Shops und Websites gestalten
2. Neue Google Analytics Version kommt!
3. Conversion Killer – Online Formulare

Hier eine kurze Zusammenfassung der wichtigsten Erkenntnisse.

Die Conversion Case Study ist von Jana Lanka (Elastic Path Software) und beschäftigt sich mit dem Online Shop von → www.vancouver2010.com.

Test-Element

Getestet wurde die Positionierung und Abbildung der

• Kleidergröße und
• Kleiderfarbe

Getestet wurde mit dem Google Website Optimizer. Der Testzeitraum betrug 18 Tage und 2.567 Conversions. Gemessen wurde bei dieser Conversion Case Study die Conversion Rate über alles, sprich Abverkaufsrate.

Kontrollseite

Auf dieser Seite wurden die Produkt-Attribute im Dropdown-Stil abgebildet.

Variante A

Auf dieser Seite wurden die Produkt-Attribute über klickbare Farb- und Größenfelder realisiert und unterhalb der Produktbeschreibung abgebildet.

Variante B

Die Farb- und Größenwahl wurde im rechten Seitenbereich abgebildet. Die Farbwahl in Form von klickbaren Farbfeldern und die Größe durch Buttons.

Conversion Page Case Study – Test-Ergebnisse

Die Testergebnisse zeigen zum einen den eindeutigen Testsieger (Variante B), zum anderen aber auch die Erkenntnis, dass bei der Variante A wahrscheinlich auch der sichtbare Bereich für eine schlechtere Conversion gesorgt hat.

(Zum Vergrößern bitte klicken)

Fazit

Die Conversion Case Study zeigt, dass User auf “Farb-Beispiele” besser reagieren als auf Wörter in einer Drop-Downliste.Die Wahrnehmung ist stärker, dies gilt auch für die Größen. Gerade der Mode Bereich zeigt hier bestimmt auch parallelen zur “Offline-Welt”.

Was die Positionierung betrifft, so gehe ich davon aus, dass die Conversion relevanten Elemente wie der Kauf-Button eine starke Aufmerksamkeitswirkung erzielen und dem User zusätzlich ziegen, dass in diesem bestimmten Bereich der Produktdetail-Seite die interaktiven Elemente gesammelt sind.

Ein schöner Test mit interessanten Ergebnissen.

Weiterführende Links und interessante Artikel

→ Link zum Original-Artikel

→ Conversion Interesse steigt

→ Conversion steigern durch Vertrauen

→ Landing Page Tools

Related Posts

1. Landing Page Case Study // Uplift +177%
2. Conversion Killer – Online Formulare
3. Studie: Wie viel bringt ein Gastzugang im E-Commerce Checkout?

Titel: “Imagery III: Erwartungskonforme Website-Gestaltung –
Ergebnisse einer Längsschnittanalyse (2003 bis 2009)”

Der folgende Artikel soll die Erkenntnisse der kostenfreien Online PDF-Datei zusammenfassen. Ich weise ausdrücklich darauf hin, dass sich eine Investition von 99€ (netto) für den kompletten Berichtband auf jeden Fall lohnt! Deswegen werde ich auf keine Ergebnisse des kostenpflichtigen Berichtsbands eingehen.

Imagery Studie – was bedeutet das?

Die Studie untersucht die Erwartungen von Usern bezüglich der Positionierung von Website-Elementen. Da es hier um bildliche Vorstellungen (Visualisierungen) der Positionen von wichtigen Elementen auf Websites geht, wird der Begriff Imagery verwendet. Besonders interessant ist dabei die Erwartung gegenüber der Startseite eines Online Shops.

Erwartungskonformität – warum ist die Position von Elementen wichtig?

Beim Surfen im Internet haben sich bei jedem User bestimmte Erwartungen hinsichtlich wichtiger Website-Elemente im Laufe der Zeit ausgeprägt. Hier spielen sicherlich auch große und wichtige Websites, die jeder kennt und nutzt, wie zum Beispiel ebay oder amazon eine wichtige Rolle. Getreu dem Motto „Don’t Make me think“ (von Steve Krug) möchte der User nicht jedes Mal beim Betreten der Startseite eines Online Shops nach Navigationsleiste, Logo, Suche-Funktion, Kontakt-Bereich etc. suchen müssen.

Daher ist es unerlässlich, bei der Erstellung einer Startseite wichtige Seiten-Elemente dort zu positionieren, wo der User sie auch erwartet. Damit wird der kognitive Aufwand minimiert.Im Bereich der Usability beschäftigt sich der Teil 110 der DIN ISO 9241 mit sieben Gestaltungsgrundsätzen und unter anderem auch mit dem Bereich „Erwartungskonformität“.

Methodik

Die Studie stellt eine Längsschnitt-Studie dar, die 2003, 2005 und zuletzt im Juli 2009 erhoben wurde. Befragt wurde über ein Online-Access-Panel in der Zeit zwischen 08.07.09 – 12.07.09. Die Stichprobengröße (quotiert) betrugt 600 Testpersonen.

Untersucht werden folgende Fragestellungen:

• „Welche Elemente werden als typisch für einen Internetauftritt bzw. einen Online-Shop angesehen und welche nicht?“
• „An welcher Position auf einer Startseite einer Website werden bestimmte Elemente erwartet?“
• „Wo sollten die erwarteten Elemente in einem Internetauftritt bzw. in einem Online-Shop in der Gesamtheit positioniert werden?“

Quelle: Brand-Sassen, Wilhelm (2009), s.u.

Ergebniss- Interpretation

Um die Ergebnisse der Studie ohne weiteres interpretieren zu können, ist es notwendig, das Raster einer Startseite von Online Shops und Internetseiten vorzustellen, wie es auch in der Studie von eresult untersucht wurde. Dabei wird eine Startseite (Homepage) in ein Raster mit 25 Zellen unterteilt.

Quelle: eigene Darstellung

Startseiten Elemente

In der Studie wurden die Erwartungen gegenüber verschiedener Website-Elemente abgefragt. Im Laufe der Zeit wurde die Studie um wichtige Elemente erweitert (da sich Shops und Internetseiten ständig weiter entwickelt haben). Folgende wichtige Homepage-Elemente wurden berücksichtigt:

• “Navigationsleiste/Menü (Rubriken)
• LogoHome-Button/-Link
• Suchfunktion
• Kontakt-Link
• Impressum-Link
• Link zu anderssprachigen Versionen des Webangebots
• Sitemap
• Surfpfad-Anzeige
• Schrift vergrößern/ verkleinern
• Newsletter-Link
• Login (Anmeldebereich für registrierte Nutzer)
• Über-Uns-Link
• Jobangebote
• FAQ-Link
• Hilfe-Link
• Werbung
• Datenschutz-Link
• Allgemeine Geschäftsbedingungen (AGB)
• Versand- und Verpackungskosten
• Kundenkonto/ persönlicher Bereich
• Warenkorb
• Zertifizierungen (Gütesiegel)”

Quelle: Brand-Sassen, Wilhelm (2009), s.u.

Kurz-Zusammenfassung der Ergebnisse

Folgende Elemente wurden im kostenfreien Bericht ausgewertet und deren erwartete Positionierung im Online Shop/ Website ausgegeben:

1. Suchfunktion (oberer rechter Bereich – von 71,8 % erwartet)
2. Hilfe-Link (oberer rechter Bereich – von 63,1% erwartet)
3. Werbung (rechter Seitenbereich – von 48,5% erwartet)
4. Datenschutz-Hinweise (im Footer-Bereich – von 58% erwartet)
5. Kontakt-Link (oben rechts – 91,6%)

Positionierung von Website-Elementen (Details)

1) Suchfunktion positionieren (auch auf Startseite)

Quelle: s.u.

2) Hilfe Link positionieren

Quelle: s.u.

3) Werbemittel auf Online Shops/Websites positionieren

Quelle: s.u.

4) Datenschutz Hinweise positionieren

Quelle: s.u.

5) Kontakt Link positionieren (auch auf Startseite)

Quelle: s.u.

Online Shop Startseite gestalten

Entsprechend der oben aufgeführten Punkte ergibt sich für die Startseite eines Online-Shops folgende Erwartung bezüglich der Positionierung von Elementen:

Quelle: s.u.

Fazit

Das Lesen der Studie hat mir große Freude bereitet, da es sich gezeigt hat, dass die Erwartungen im Laufe der vergangenen Jahre eine Änderung durchlaufen haben. Manche Elemente auf einer Startseite sind wichtiger geworden (gerade in Online Shops) und manche haben sich gefestigt.

Im Bereich Website-Konzeption (gerade bei Startseiten von Online Shops), aber auch Landingpage-Optimierung und Conversion-Optimierung sind die Erkenntnisse dieser Studie sehr hilfreich, da der kognitive Aufwand für User minimiert werden kann, indem Erwartungen eingehalten werden. Auf diese Weise bleibt der Fokus auf wichtigen Content-Elementen haften und das Surf-Erlebnis ist bereits auf der Startseite eines Online Shops positiv.

Wichtig ist bei der Gestaltung einer Startseite von Websites und Online Shops allerdings auch die eigene Zielgruppe. Hier gibt es viele Unterschiede aufgrund von demografischen Merkmalen und der Affinität zum Medium Internet, die letzlich dazu führen, das verschiedene Navigationsansätze im Vorhinein getestet werden sollten. Das Thema Shop-Usability rückt dabei immer mehr in den Vordergrund, da Online Verantwortliche erkannt haben, dass überzeugende, bedienbare und gefallende Shops besser funktionieren, als die “alten” Shops.

Download der Studie

Ausgewählte Ergebnisse der Studie können bei eresult runtergeladen werden (PDF).

Imagery_III_Studie

Quelle

Brand-Sassen, Katja/Wilhelm, Thorsten (2009): Imagery III: Erwartungskonforme Website-Gestaltung – Ergebnisse einer Längsschnittanalyse (2003 bis 2009). In: Forschungsbeiträge der eResult GmbH, URL: http://www.eresult.de/studien_artikel/forschungsbeitraege/imagery_III.html

Related Posts

1. Startseite von Online Shops gestalten – Teil 1
2. Conversion Killer – Online Formulare
3. Conversion Rates Online Shops

Die Checklist stammt von Dr. Meyers (usereffect.com) und enthält 25 Punkten, die in 4 Oberkategorien gegliedert sind.

Checklist Kategorien

1. Accessibility
2. Identify
3. Navigation
4. Content

Die Liste ist eher rudimentär und macht innerhalb der Kategorien große Sprünge zwischen den einzelnen Punkten. So werden in der Kategorie “Content” sowohl das URL-Design wie auch Headlines bewertet.

Fazit
Die Liste eignet sich eher als grobe Orientierung zur Beurteilung von Website Usability. Es freut mich aber dennoch, dass sich Dr. Meyers die Mühe gemacht hat und diese Liste kostenlos zur Verfügung stellt!

Weiterführende Links

• Erläuterung zur Checkliste vom Urheber Dr. Peter J. Meyers
• Checkliste (PDF Download)

Related Posts

1. Wer suchet, der findet! Usability Fehler, die man vermeiden kann!
2. Checkliste Splittest
3. Landing Page Checkliste – 8 Punkte zum Erfolg