One-Pagers im Eye-Tracking Test

One-Pagers im Eye-Tracking Test

One-Pagers sind, wie der Name schon sagt, Webseiten die aus einer einzigen Seite bestehen. In der Regel befinden sich sämtliche Informationen auf der Startseite. Lediglich Informationen wie Impressum, AGBs oder Kontakt sind häufig ausgegliedert.  Ein One-Pager ist somit vergleichbar mit einer Straße, die man auf- und ablaufen kann. Abzweigungen gibt es nicht. Oft liegt der Seite ein Parallax-System zu Grunde. Das heisst, dass der eigentliche Inhalt vor einem Hintergrundbild liegt, welches sich mit dem Scroll ebenfalls verändert.

Im Laufe der letzten Jahre konnte eine kontinuierliche Zunahme von One-Page Webseiten beobachtet werden. Viele Webseitenbesitzer folgen diesem Trend blind und realisieren nicht, dass sich One-Pager nicht für jede Art von Website eignen und unter Umständen zu schwerwiegenden Usability-Problemen führen können. Ebenso mannigfaltig sind die Probleme bezüglich SEO.

Ein One-Page Webdesign sollte linear verwendet werden; die Website sollte durch scrollen entdeckt werden. Das ist das Grundprinzip der One-Pager. Der One-Pager wurde ursprünglich als Designlösung für Kampagnen-Sites und thematisch eng fokussierte Webinhalte entwickelt, die meist in einer linearen Erzählform präsentiert wurden und von Umfang überschaubar waren.

Eye-Tracking Test mit One-Pagers

Vier One-Pagers wurden in einem aufgabenorientierten Testverfahren mit Eye-Tracking auf Benutzerfreundlichkeit geprüft. Mit dem Eye-Tracking kann untersucht werden, wie viel Aufmerksamkeit die Testpersonen den einzelnen Elementen auf einer Seite schenken. Diskrepanzen zwischen Handlungen und Aussagen der Probanden können aufgedeckt werden, sodass die Resultate an Objektivität gewinnen.

One-Pagers auf Usability getestet

Fünf Fauxpas im One-Pager Design

  1. Zu viele und thematisch unterschiedliche Inhalte: Ein One-Pager sollte kurzgehalten werden, weil der Nutzer in der Lage sein muss, ein mentales Modell von den Inhalten zu erstellen. Im One-Pager Design existiert die „Zurück-Funktion“ nicht. Der Nutzer muss bereits betrachteten Inhalt also erneut suchen. Kurz heisst wirklich nicht länger als einige Desktop-Seiten lang. Auf Mobile ist die Site denn sowieso mehr als lang genug.
  2. Ein Navigationsmenü: Es ist prinzipiell überflüssig und gibt den Anschein, dass die Webseite aus verschiedenen Unterseiten besteht. Diese Art von Navigation ist eine Kopie des Design Patterns für Baumstrukturen und ihr polymorphes Verhalten auf One-Pagers verursacht große Verwirrung. Lindern kann man diese Irreführung indem das Menü mit einem Highlighter (Scroll-Spy) die die aktive Sektion ausgibt, versehen wird. Besser ist jedoch, den One-Pager kurz zu halten, sodass er problemlos ohne Navigationshilfe funktioniert.
  3. Eine Verschachtelung von Elementen innerhalb der Seite: Solche versteckte Strukturierung beeinträchtigt die Übersichtlichkeit stark und widerspricht das Hauptziel des One-Page Designs: Alle Informationen übersichtlich auf einer Seite darzustellen. Sie kann Grund dafür sein, dass relevante Informationen übersehen werden.
  4. Nach Absenden eines Formulars automatisch den Seitenanfang einblenden: Hat der Nutzer ein Formular ausgefüllt und abgeschickt, muss seine Position auf der Seite beibehalten bleiben. Auf keinem Fall darf er zum Seitenanfang katapultiert werden.
  5. Niedrige Ladegeschwindigkeit weil der gesamte Inhalt auf einmal geladen werden muss: Dauert der Seitenaufbau zu lange, so verärgert oder vertreibt man die Nutzer. Ein Grund mehr dem „One“ im One-Pager Name gerecht zu tun.

Die Ausnahme

Während das One-Page Design für Websites mit wenig Inhalt oder linear aufeinander aufbauenden Inhalten sinnvoll sein kann, ist sie für Sites mit komplexen Inhalten und verschiedenen Themengebieten ungeeignet. Der Nutzer verliert schnell den Überblick und muss sich durch Unmengen von Informationen scrollen. Wird eine gute Usability angestrebt, so sind One-Pager eher die Ausnahmelösung als die Norm.

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.