Single-Page-Design: So überzeugen Sie den Nutzer auf nur einer Seite

Single-Page-Design: So überzeugen Sie den Nutzer auf nur einer Seite

Ilka Marhenke | Dez 3, 2014 | User-Experience-Tipps

Immer wieder neue Trends erobern den Designmarkt – einer davon ist Single-Page-Design: den kompletten Inhalt einer Webseite auf nur einer Seite. Bei der Umsetzung muss man jedoch einiges beachten.

Wir zeigen, wie Sie eine Single-Page-Webseite nutzerfreundlich gestalten und wie Sie den Nutzer zum Weiterscrollen animieren.

Single-Page-Design vs. Single-Page-Desaster

Eine einfache Navigation, ein schlichtes, aber ansprechendes Design – und das alles auf einer Seite – mehr brauchen Nutzer manchmal gar nicht. Immer mehr Webseitenbetreiber setzen deshalb auf den Trend Single-Page-Design.

Dabei ist zu beachten, dass Single-Page-Design sich nur für bestimmte Webseiten eignet.

  • Webseiten mit einem klaren Call-to-Action, wie zum Beispiel Download-Seiten für Apps, Spenden-Seiten oder
  • Webseiten, die ein bestimmtes Produkt vertreiben

können so ein hohes Nutzer-Enagement und eine hohe Conversion erreichen.

Vorrausgesetzt man bekommt die Nutzer zum Scrollen. Tun sie das nicht, nehmen sie nicht alle Informationen war und werden nicht vom Angebot überzeugt. Hohe Nutzerabbrüche statt hohem Nutzer-Engagement sind die Folge. Deshalb sollten beim Single-Page-Design einiges beachtet werden.

Abb.1: Die Startseite animiert zum Scrollen und bietet gleichzeitig eine Alternative Navigation für das schnelle Finden von bestimmten Informationen

Tipps für ein überzeugendes Single-Page-Design:

1. Animieren Sie den Nutzer zum Scrollen

  • Erzählen Sie eine Geschichte über die gesamte Seite hinweg, die das Interesse des Nutzers weckt
  • Achten Sie dabei auf die richtige Reihenfolge (was -> warum -> wie -> wo -> wann)
  • Nutzen Sie kleine Illustrationen oder Animationen, die den Nutzer spielerisch animieren weiterzuscrollen

 

2. Bieten Sie eine alternative Navigation zum einfachen Scrollen

  • Für den schnellen Einstieg in bestimmte Bereiche hilft eine feste, übersichtliche Topnavigation
  • Ein Back-to-Top-Button erleichtert Nutzern bei langen Seiten die Navigation durch die Webseite

 

3. Nutzen Sie starke Call-to-Actions

  • Vermeiden Sie zu viel Text oder Medien, die den Fokus vom Call-to-Action ablenken
  • Platzieren Sie den Call-to-Action prominent above the fold
  • Wählen Sie das richtige Wording: Passt der Call-to-Action in die erzählte Geschichte, animiert er eher zum Klicken

 

4. Gestalten Sie das Design simpel, aber nicht langweilig

  • Der Nutzer muss animiert werden sich weiter umzuschauen


5. Optimieren Sie die Seite für mobile Geräte

  • Die Navigation sollte auf Scrollen und Swipen fokussiert sein, nicht auf Klicken


6. Überladen Sie die Webseite nicht

  • Lange Ladezeiten sind das Hauptproblem bei langen Webseiten: Unnötige Elemente, Animationen etc. sollten deshalb vermieden werden, wenn Nutzer nicht nach wenigen Sekunden abspringen sollen


Single-Page-Design kann zu hohem Nutzer-Engagement und somit auch zu einer hohen Lead-Generierung führen. Allerdings sollte man aufpassen, dass die Nutzer sich auf der Webseite nicht verlaufen und im Scroll-Chaos versinken. Am Besten testet man sein Design schon vor dem Live-Gang am Nutzer, um mögliche Probleme zu identifizieren und zu beheben.

Beispiele für überzeugendes Single-Page-Design gibt es hier:
everylastdrop.co.uk
www.ianjamescox.com

Infografik zum Webseiten-Design: Die Trends der Fortune 500

Infografik zum Webseiten-Design: Die Trends der Fortune 500

Antje Lasner | Mai 31, 2013 | User-Experience-Tipps

Beim Designen einer Webseite gibt es so viel zu beachten und zu entscheiden. Wo soll das Logo hin? Ist ein Slogan sinnvoll? Und was mache ich mit den Social Media Buttons? Gut, wenn man sich dabei nach einer Empfehlung, einem bewährten Layout richten kann. Die Infografik von Go-Globe.com fasst die wichtigsten Gemeinsamkeiten der Webseiten der 500 erfolgreichsten amerikanischen Unternehmen einmal zusammen.

Kontakt und Newsletter bei Fortune-500-Webseiten unbeliebt

Auffällig ist, dass Amerikas Top Unternehmen auf ihren Webseiten gerne auf Kontaktmöglichkeiten und eine Newsletter-Anmeldung verzichten. Auf 63% der Webseiten war die Unternehmens-Adresse nur schwer auffindbar und 80% stellten erst gar keinen Newsletter zur Verfügung. Auch integrieren nur 11% die Social Media Button above the fold, d.h. im oberen Teil der Webseite, der ohne Scrollen vom Nutzer wahrgenommen werden kann.

Die Infografik scheint zu sagen: keep it clean, keep it simple. Newsletter und Kontaktmöglichkeiten spielen auf den Webseiten der Fortune 500 eine untergeordnete Rolle.

Neues Feature: Eye-Tracking-Analysen

Neues Feature: Eye-Tracking-Analysen

Benjamin Uebel | Aug 2, 2012 | Neue Features

Welche Bereiche der Webseite nehmen meine Nutzer in den ersten 3 Sekunden wahr? Kann meine Webseite schnell überzeugen? Seit Juli bietet RapidUsertests als neues Feature virtuelle Eye-Tracking-Analysen an, um zu beurteilen, ob Besucher die wichtigen Informationen der Webseite zuerst wahrnehmen.

Was ist virtuelles Eye-Tracking? Was bekomme ich?

Bei Erstellung eines Tests erhält man drei Aufmerksamkeits-Analysen der getesteten Webseite. Die Wahrnehmungskarte, die Aufmerksamkeitskarte und die Hot Spots zeigen an

  • ob die wichtigen Informationen der Webseite in den ersten 3 Sekunden wahrgenommen werden
  • ob Vorteile, Gütesiegel und Call2Action-Elemente gesehen werden
  • und ob die Aufmerksamkeit fälschlicherweise auf Webseiten-Elemente geht, die nur eine geringe Wichtigkeit haben.

 Wahrnehmungskarte virtuelles Eye-Tracking
Die Wahrnehmungs-Karte zeigt an, was in den ersten Sekunden überhaupt wahrgenommen wird.

 

Aufmerksamkeitskarte virtuelles Eye-Tracking
Die Aufmerksamkeits-Karte liefert eine detaillierte Heat-Map zu den aufmerksamkeitsstärksten Bereichen.

 

Virtuelles Eye-Tracking Hot-Spots
Die Hot Spots zeigen die 10 aufmerksamkeitsstärksten Bereiche im Überblick.

Wie funktionieren die Eye-Tracking-Analysen?

Entwickelt wurde die Technologie am California Institute of Technology, der University of Southern California und dem Institut für Kognitionswissenschaft in Osnabrück. Dort hatte auch unsere Mitarbeiterin Birgit mit Ihrer Abschlussarbeit in Cognitive Science einen Beitrag zur Entwicklung der Technologie geleistet.

Die Analysen beruhen nicht auf tatsächlichen Blickbewegungsmessungen, sondern auf hochpräzisen Berechnungen – Ein neurowissenschaftliches Computermodell der Blickbewegungen von über 500 Testpersonen auf tausenden von Webseiten. Auf Basis des visuellen Aufbaus der Webseite wird berechnet, wo die Aufmerksamkeit der Nutzer landet. Diese Berechnungen wurden an zahlreichen Eye-Tracking-Studien validiert und haben eine Präzision von 90%.

Was muss ich tun?

Bei Bestellung eines Tests ab 7 Testpersonen aufwärts gibt es automatisch eine Eye-Tracking-Analyse der Webseite, die beim Test erstellen angegeben wurde. Die Ergebnisse sind direkt im Kundenbereich einsehbar.

Wenn eine andere URL oder mehrere Webseiten analysiert werden soll, kann man einfach unsere Berater per Chat, Mail oder Telefon kontaktieren.

Wir freuen uns über Ihr Feedback!

Hier finden Sie alle bisherigen Feature-Updates.

Fragen zur Usability: Wo positioniere ich meine Suchleiste im Online-Shop?

Fragen zur Usability: Wo positioniere ich meine Suchleiste im Online-Shop?

Birgit Bärnreuther | Jul 24, 2012 | User-Experience-Tipps

Eine auffindbare Suchfunktion ist vor allem dann wichtig, wenn ein Online-Shop eine breite Produktpalette hat.

In unseren Usabilitytests von Online-Shops mit großem Sortiment haben wir schon mehrfach festgestellt, dass die Positionierung der Suche besonders großen Einfluss darauf hat, wie häufig diese auch tatsächlich verwendet wird.

Positionierung entscheidet über Nutzung der Suche

Suchschlitze, die im Header-Bereich direkt neben dem Logo positioniert waren, wurden in den jeweiligen Tests von über 80% der User verwendet. Wurde der Suchschlitz hingegen nur wenige Zentimeter tiefer, z.B. innerhalb der Navigationsleiste positioniert, sank die Häufigkeit der Nutzung durch die User drastisch ab. Einfach, weil die Suche nicht so offensichtlich ins Auge stach. Je unprominenter die Position der Suche, desto geringer die Wahrscheinlichkeit, dass sie genutzt wird.

Suchschlitz besonders erfolgreich neben dem Logo

ALSO: Suchleiste prominent positionieren, wenn ein Online-Shop sehr viele Artikel hat und die Suche gute Ergebnisse produziert.

Google-Suche berücksichtigt Website-Layout und belohnt gute Usability

Google-Suche berücksichtigt Website-Layout und belohnt gute Usability

Userlutions Team | Feb 17, 2012 | User-Experience-Tipps

Ende Januar 2012 veröffentlichte Matt Cutts in Googles Webmaster Central Blog einen Artikel, der die aktuellsten Änderungen am Algorithmus der Google-Suche beschreibt. Mit diesen Änderungen wird erstmals auch das Layout einer Webseite berücksichtigt.

Diese Veränderung war eine Reaktion auf Beschwerden von Nutzern, die nach dem Öffnen einer Seite aus den Suchergebnissen die erwarteten Informationen schlecht finden konnten. Stattdessen fanden sie oft zu viel Werbung im oberen und sichtbaren Bereich der Webseite vor. Daher analysiert Google jetzt auch automatisiert das Layout einer Seite und überprüft, an welcher Stelle sich die Informationen befinden und lässt die Analyse-Ergebnisse in die Positionierung einer Seite in den Suchergebnissen einfließen. Nach Angaben von Google hat diese Änderung des Algorithmus bisher Auswirkung auf insgesamt ein Prozent aller Suchanfragen. Ich vermute aber, dass sich der betroffene Anteil der Suchergebnisse in Zukunft steigern wird, der durch diese und kommende ähnliche Faktoren beeinflusst wird.

Um das Layout der eigene Seite zu überprüfen, empfiehlt Google das Tool Browser Size (heute Teil von Google Analytics, Anm, 26.07.16). Hiermit lässt sich kontrollieren, welcher Anteil der Internetnutzer bestimmte Inhalte der Seite ohne Scrollen auf den ersten Blick erfassen kann.

Grundsätzlich zeigt diese Entwicklung, dass gute Usability und eine durchdachte User Experience immer wichtiger für Webseiten werden. Nicht nur die Besucher werden sich über Benutzerfreundlichkeit freuen – selbst Google bewertet mittlerweile das Layout und weist Betreiber von Internetseiten immer wieder darauf hin, das Nutzungserlebnis ganz allgemein zu verbessern. Usability ist zunehmend ein Erfolgsfaktor im Internet – beim Ranking genau wie bei der Webseiten-Nutzung.