{"id":1117,"date":"2016-09-01T10:48:04","date_gmt":"2016-09-01T08:48:04","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=1117"},"modified":"2016-10-07T15:49:57","modified_gmt":"2016-10-07T13:49:57","slug":"longscrolling-websites","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/longscrolling-websites\/","title":{"rendered":"Long Scrolling Websites: Tipps &#038; Best Practices"},"content":{"rendered":"<p>Long-Scrolling Websites, also Websites auf denen man lange Zeit weiterscrollen kann, gibt es schon seit einigen Jahren. Der Grund daf\u00fcr: User lieben sie. Das wird sich so schnell auch nicht \u00e4ndern, daher wollen wir in diesem Artikel einmal ein paar Tipps und Best Practices vorstellen. Denn long-scrolling oder infinite-scrolling alleine sorgt nicht daf\u00fcr, dass der User auch wirklich l\u00e4nger auf der Seite bleibt. Viel Spa\u00df beim Lesen und Scrollen! \ud83d\ude42<\/p>\n<p><!--more--><\/p>\n<h2>Was long-scrolling oder infinite-scolling Websites ver\u00e4ndert haben<\/h2>\n<p>Fr\u00fcher galten f\u00fcr Websites die gleichen Regeln wie f\u00fcr Zeitungen: Der wichtigste Content sollte oben stehen. Daf\u00fcr gab es sogar einen Ausdruck: above the fold.<\/p>\n<p>F\u00fcr Facebook-Anzeigen oder Blog Post-Teaser trifft das immer noch zu. Der Teaser entscheidet, ob der Leser den Blog Beitrag oder die Facebook Anzeige anklickt oder nicht.<\/p>\n<p>Aber hier liegt genau der Unterschied: Beim Anklicken trifft der User eine aktive Entscheidung, n\u00e4mlich auf einen Button zu klicken. Beim Scrollen macht der User einfach das, was er sowieso schon macht. Die aktive Entscheidung w\u00e4re in diesem Fall, das Scrollen zu beenden.<\/p>\n<p>Das Above-the-fold-Argument trifft also f\u00fcr Websites nur bedingt zu. Zwar findet sich auf der ersten Seite der Main Claim und vielleicht ein Teaser, aber nicht unbedingt <em>alle<\/em> relevanten Informationen.<\/p>\n<p>Den Unterschied sieht man auf den ersten Blick:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1118\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/150506112202-old-website-apple-1024x640.png\" alt=\"old apple website\" width=\"600\" height=\"375\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/150506112202-old-website-apple-1024x640.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/150506112202-old-website-apple-1024x640-300x188.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/150506112202-old-website-apple-1024x640-140x88.png 140w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Apple Website 1997.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1119\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-31-um-12.23.07.png\" alt=\"new apple website\" width=\"600\" height=\"283\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-31-um-12.23.07.png 2488w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-31-um-12.23.07-300x142.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-31-um-12.23.07-1024x483.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-31-um-12.23.07-140x66.png 140w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Apple Website 2016<\/p>\n<p>Entgegen der urspr\u00fcnglichen Meinung ist endloses Scrollen also nicht etwas, das f\u00fcr h\u00f6here Bounce Rates sorgt, sondern ganz im Gegenteil etwas, das User bei Laune h\u00e4lt. Zumindest dann, wenn es sorgf\u00e4ltig ausgef\u00fchrt wird. Je l\u00e4nger ein User auf ihrer Seite bleibt, desto eher wird er auf ihren Call to Action reagieren.<\/p>\n<h2>Wann scrollen User weiter?<\/h2>\n<p>User scrollen weiter, wenn der Content interessant f\u00fcr sie bleibt. Je mehr Content nicht l\u00e4nger relevant f\u00fcr einen User ist, desto eher wird er eine Sitzung abbrechen.<\/p>\n<p><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"\/\/giphy.com\/embed\/l41Ygr7sR5limRkek\" width=\"480\" height=\"480\" frame allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Ein weiterer Grund f\u00fcr die Beliebtheit von long-scrolling Websites ist auch die zunehmende Verwendung von Mobilger\u00e4ten. Gerade auf einem kleinen Screen ist Scrollen einfacher, als sich mit Buttons durch eine Website zu navigieren.<\/p>\n<h2>Long-Scrolling &amp; Storytelling<\/h2>\n<p>F\u00fcr Designer und Marketer besteht die Herausforderung darin, mit einer Website eine Story zu erz\u00e4hlen. Dabei gibt es verschiedene Design-M\u00f6glichkeiten und Effekte. Beispiele daf\u00fcr sind z. B. Animationen oder Parallax Scrolling. Dazu gleich mehr. Auch die Abwechslung von verschiedenen Content-Arten, Text, Bilder, Videos, Gifs macht Long-Scrolling attraktiv.<\/p>\n<h2>Das Gef\u00fchl von Kontrolle<\/h2>\n<p>Long-Scrolling gibt Usern ein Gef\u00fchl von Kontrolle und das ist f\u00fcr User-Zufriedenheit ausgesprochen wichtig. Ein User kann in seinem eigenen Tempo durch long-scrolling-Seites navigieren: bei relevanten Inhalten verweilen und bei weniger relevanten Inhalten schneller weiterscrollen.<\/p>\n<p>Auch Parallax-Scrolling und Animationen k\u00f6nnen zum Teil vom User kontrolliert werden, sodass dieser auch hier ein Gef\u00fchl von Kontrolle hat.<\/p>\n<p><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"\/\/giphy.com\/embed\/3oEjHSe4OCjZGHlgOs\" width=\"480\" height=\"257\" frame allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Gleichzeitig sorgt Scrollen daf\u00fcr, dass der User fokussiert und beim Thema bleibt anstatt hin- und her zu klicken. Das Klicken auf einen Link bedeutet immer eine Verz\u00f6gerung. Wenn die Seite zu langsam l\u00e4dt, ist die Gefahr, dass der User den Prozess ganz abbricht relativ hoch. Das ist beim Long-Scrolling nicht gegeben<\/p>\n<h2>Content sinnvoll strukturieren<\/h2>\n<p>Eine Herausforderung ist, Content sinnvoll auf long-scrolling Websites zu strukturieren. Auch aus <a href=\"https:\/\/www.semrush.com\/blog\/parallax-vs-seo-web-design\/\"  target=\"_blank\"  >SEO-Sicht<\/a> gilt es einige Aspekte bei der Strukturierung von long-scrolling Seiten zu beachten.<\/p>\n<p>Theoretisch w\u00fcrden sie nur eine einzige Seite ben\u00f6tigen, aber dies ist nur in wenigen F\u00e4llen sinnvoll. Sinnvoller ist meist eine horizontale Navigationsleiste mit den wichtigsten Kategorien auf Ihrer Website. Auf der Usersnap Website sind das zum Beispiel:<\/p>\n<blockquote><p>Tour | Unsere Kunden | Preise | Integrationen | Blog.<\/p><\/blockquote>\n<p>Jede dieser Seiten hat verschiedene Teile, dennoch haben wir auf lange Dropdown-Men\u00fcs verzichtet.<\/p>\n<p>Unsere Navigationsleiste bringt den Website-Besucher zu verschiedenen Sektionen und von da aus, kann er oder sie intern weiternavigieren.<\/p>\n<p>Die Herausforderung bei long-scrolling Seiten ist festzulegen, welche L\u00e4nge f\u00fcr den User optimal ist.<\/p>\n<blockquote><p>Zuviel Content \u00fcberfordert den User.<\/p><\/blockquote>\n<p>Zu viel Content kann den User \u00fcberfordern und eine schlechte User Experience bedeuten. Pauschal ist es schwierig hier Tipps zu geben, denn es h\u00e4ngt immer auch von der Branche ab. Auf einer e-commerce Seite sind l\u00e4ngere oder infinite-scroll Seiten mit Produkten eher akzeptiert.<\/p>\n<h2>Long-Scrolling &amp; Interaktivit\u00e4t<\/h2>\n<p>Animation und Hovering gibt es bereits l\u00e4nger als Long-Scrolling, die Effekte werden aber gerne verwendet. Der Grund daf\u00fcr ist einfach: Long-Scrolling sorgt f\u00fcr Unterhaltung und Interaktivit\u00e4t.<\/p>\n<p>Interaktive Elemente besch\u00e4ftigen den Website-Besucher und bedeuten gleichzeitig auch eine kleine mentale Pause f\u00fcr den Website-Besucher. Ein gutes Beispiel f\u00fcr eine interaktive Seite ist die Website von Pirate Code: <a href=\"http:\/\/piratecode.ru\/en\/\"  target=\"_blank\"  >http:\/\/piratecode.ru\/en\/<\/a><a href=\"http:\/\/piratecode.ru\/en\/\"  target=\"_blank\"  ><img decoding=\"async\" class=\"aligncenter wp-image-1120\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-30-um-15.03.19.png\" rel='lightbox' alt=\"pirate code\" width=\"600\" height=\"303\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-30-um-15.03.19.png 2388w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-30-um-15.03.19-300x152.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-30-um-15.03.19-1024x517.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/08\/Bildschirmfoto-2016-08-30-um-15.03.19-140x71.png 140w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Auf dieser Seite sind die Wellen animiert und eine vertikale Scroll-M\u00f6glichkeit ist eingerichtet.<\/p>\n<h2>Parallax &amp; Long-Scrolling<\/h2>\n<p>Den Parallax-Effekt gibt es schon seit Jahren. Am Anfang war er vor allem in klassichen Videospielen beliebt, aber wurde schon bald in der Webdesign-Welt beliebt. Der Parallax-Effekt verwendet verschiedene Hintergr\u00fcnde, die sich in verschiedenen Geschwindigkeiten bewegen. Das Ergebnis ist ein faux 3D-Effekt. Der Begriff \u201cParallaxis\u201d kommt \u00fcbrigens aus dem Griechischen und bedeutet \u201cVer\u00e4nderung\u201d.<\/p>\n<p>Ein hervorragendes Beispiel f\u00fcr die Kombination von Storytelling, Parallax und Long-Scrolling ist die Seite The Boat: <a href=\"http:\/\/www.sbs.com.au\/theboat\/\"  target=\"_blank\"  >http:\/\/www.sbs.com.au\/theboat\/<\/a><\/p>\n<p>Hier wird die Graphic Novel von Nam Le, \u00fcber die Flucht aus Vietnam, mit moderner Webdesign-Technologie umgesetzt. Das Projekt wurde mehrfach ausgezeichnet und ich kann Ihnen wirklich empfehlen, sich diese einmal anzusehen.<\/p>\n<p>Hier kann man sich das Video einmal ansehen, aber ich empfehle Ihnen, selbst einmal durch die Seite zu scrollen.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/127007709\" width=\"640\" height=\"360\" frame allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Auf Mobilger\u00e4ten ist der Parallax-Effekt noch etwas eingeschr\u00e4nkt, aber dies wird sich durch Verbesserungen in Ajax in absehbarer Zeit \u00e4ndern. Parallax ist ein Effekt, der einen User unterh\u00e4lt und daher auch f\u00fcr Mobilger\u00e4te immer wichtiger wird.<\/p>\n<h2>Fazit<\/h2>\n<p>Long-Scrolling-Websites sind nicht mehr wegzudenken. User lieben sie und Unternehmen haben die M\u00f6glichkeit ihren Website-Besuchern vielf\u00e4ltige Contentarten und Angebote zu pr\u00e4sentieren. Dennoch verbergen sich dahinter auch Herausforderungen, denn nur wenn Inhalte konstant relevant sind und er zudem mit ansprechendem Webdesign unterhalten wird, wird ein User weiterscrollen.<\/p>\n<p>Hier noch einmal eine \u00dcbersicht der Vor- und Nachteile von Long-Scrolling Websites:<\/p>\n<p>&nbsp;<\/p>\n<p>PRO:<\/p>\n<p>&#8211; Interaktives Storytelling<\/p>\n<p>&#8211; Geringe Abruchraten<\/p>\n<p>&#8211; Erh\u00f6hte Aufmerksamkeit<\/p>\n<p>&nbsp;<\/p>\n<p>CONTRA:<\/p>\n<p>&#8211; SEO-Herausforderungen<\/p>\n<p>&#8211; Messbarkeit schwieriger<\/p>\n<p>&#8211; Content Setup schwierig<\/p>\n<p>&#8211; Cross-Browser Testing schwieriger<\/p>\n<p>Wir sind gespannt, auf Ihre Lieblings-Long-Scrolling-Websites!<\/p>\n<p>Wir von Usersnap hoffen, dieser Post hat Ihnen gefallen und freuen uns, wenn Sie uns auf <a href=\"https:\/\/twitter.com\/usersnap\"  target=\"_blank\"  >Twitter<\/a> folgen. Dort tweeten wir regelm\u00e4\u00dfig \u00fcber Web Development, Webdesign und UAT.<\/p>\n<p><em>Usersnap ist ein Bug Tracking und Screenshot-Tool f\u00fcr jedes Webprojekt. Erhalten Sie sofort Feedback von Ihren Website-Besuchern. Jetzt kostenlos testen!<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-107 size-full\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/02\/Bildschirmfoto-2016-02-24-um-14.58.05-e1458129781372.png\" width=\"600\" height=\"150\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Long-Scrolling Websites, also Websites auf denen man lange Zeit weiterscrollen kann, gibt es schon seit einigen Jahren. Der Grund daf\u00fcr: User lieben sie. Das wird sich so schnell auch nicht \u00e4ndern, daher wollen wir in diesem Artikel einmal ein paar Tipps und Best Practices vorstellen. Denn long-scrolling oder infinite-scrolling alleine sorgt nicht daf\u00fcr, dass der [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1121"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}