{"id":741,"date":"2025-07-23T10:00:00","date_gmt":"2025-07-23T10:00:00","guid":{"rendered":"https:\/\/erdbeerbeet.com\/?p=741"},"modified":"2025-07-23T07:13:08","modified_gmt":"2025-07-23T07:13:08","slug":"scrollen-oder-blattern","status":"publish","type":"post","link":"https:\/\/erdbeerbeet.com\/de\/scrollen-oder-blattern","title":{"rendered":"Scrollen oder Bl\u00e4ttern?"},"content":{"rendered":"<\/p>\n\n\n<p>Das Thema kam bei der Arbeit auf, und nachdem ich in einem Rabbithole deswegen versunken bin, m\u00f6chte ich meine Erkenntnisse einmal zusammenfassen. Wir k\u00f6nnen wohl kaum die einzigen sein, die sich die Frage gestellt haben, ob Inhalte besser gescrollt oder gebl\u00e4ttert werden sollen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Das Problem<\/strong><\/h2>\n\n\n\n<p>Es gibt einfach Inhalte im Web oder f\u00fcr Anwendungen, die sehr lang sind, bzw. mehr Platz ben\u00f6tigen. Hier stellt sich nun die Frage; macht man eine sehr lange Seite, oder lieber viele einzelne? Was ist f\u00fcr die Nutzenden <strong>angenehmer<\/strong>? Scrollen oder bl\u00e4ttern?<\/p>\n\n\n\n<p>Durch die verst\u00e4rkte Nutzung von Mobilger\u00e4ten kann man davon ausgehen, dass etwa die H\u00e4lfte der Nutzenden per <strong>Mobilger\u00e4t<\/strong> auf die Anwendung zugreifen. F\u00fcr Mobilger\u00e4te ist es grunds\u00e4tzlich angenehmer zu scrollen, als zu bl\u00e4ttern. Aber wir wollen eine L\u00f6sung f\u00fcr Desktop und Mobil.<\/p>\n\n\n\n<p>Im vorhandenen Fall ist es au\u00dferdem so, dass der Seitenwechsel eine <strong>Validierung<\/strong> des vorhandenen Formulars ausl\u00f6st. Es schwingt also auch die Frage mit, wie h\u00e4ufig Validiert werden soll und welche Auswirkungen das hat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Anwender<\/strong><\/h2>\n\n\n\n<p>Als erstes stellt sich die Frage, wer Anwender der Anwendung ist. Beziehungsweise, wird Inhalt konsumiert, oder muss wie in einem Formular Interaktion get\u00e4tigt werden und die Anwender m\u00fcssen liefern?<\/p>\n\n\n\n<p>Weiterhin ist die Frage, ob die Anwender die Anwendung als Werkzeug nutzen, dieses also kennen und m\u00f6glichst schnell und ohne zus\u00e4tzliche Klicks bedienen wollen. F\u00fcr In-House Software ist dies h\u00e4ufig der Fall.<br>Soll die Zielgruppe viel und h\u00e4ufig mit der Anwendung interagieren, dann bietet sich aus <strong>Effizienzgr\u00fcnden<\/strong> die Darstellung auf einer, bzw. m\u00f6glichst langen Seiten an.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Content fatigue<\/strong><\/h2>\n\n\n\n<p>Zu viel Inhalt kann \u00fcberw\u00e4ltigend sein. Der Anblick eines riesigen Formulars wirkt abschreckend und zum Beispiel nachladende Produkte in einem Webshop wie beim <strong>infinite scrolling<\/strong> sorgen daf\u00fcr, dass Nutzende den \u00dcberblick verlieren.<\/p>\n\n\n\n<p>Infinite Scrolling hat seine Berechtigung, wenn <strong>konsumierbarende Inhalte<\/strong> unbemerkt nachgeladen werden, um das Nutzererlebnis zu verbessern und Besuchende m\u00f6glichst lange auf der Seite zu halten.<br>F\u00fcr ein Formular kommt dies allerdings \u00fcberhaupt nicht infrage, da die \u00dcbersicht verloren geht, wie gro\u00df dieses Formular \u00fcberhaupt ist.<\/p>\n\n\n\n<p>Bei <strong>Artikeln<\/strong> oder Geschichten sind l\u00e4ngere Seiten von Vorteil, da die Inhalte &#8220;am St\u00fcck&#8221; konsumiert werden k\u00f6nnen. Das Bl\u00e4ttern auf die n\u00e4chste Seite springt so logisch unterteilt zum n\u00e4chsten Abschnitt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Abschnitte<\/strong><\/h2>\n\n\n\n<p>G\u00e4nzlich unabh\u00e4ngig von der Seitenaufteilung findet sich \u00fcberall die klare Empfehlung &#8211; wenn nicht sogar Regel &#8211; <strong>Inhalte logisch zu gruppieren<\/strong>. Entweder wie eben erw\u00e4hnt in Kapitel oder zusammenh\u00e4ngende Links und Bilder.<\/p>\n\n\n\n<p>Formulare lassen sich in der Regel ebenso gruppieren. So sollten Personendaten, Adressen, Bankverbindung, Informationen zum Buch oder worum auch immer es geht gruppiert sein.<\/p>\n\n\n\n<p>Bonuspunkte wenn hier programmatisch <strong>fieldsets<\/strong> genutzt werden oder sogar <strong>Zwischen\u00fcberschriften<\/strong> verwendet werden, um zus\u00e4tzlichen Kontext zu bieten.<br>Im Umkehrschluss sollten verwandte Eingabefelder nicht auf verschiedene Seiten verteilt sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Validierung<\/strong><\/h2>\n\n\n\n<p>Feld-Validierung sollte stets direkt <strong>nach der Eingabe<\/strong> der Nutzenden ausgel\u00f6st werden. Es gibt aber auch solche, die einen anderen Trigger brauchen, wie der Versuch auf die n\u00e4chste Seite zu Navigieren oder das Absenden des Formulars. Zum Beispiel fehlende Felder werden bei dieser Aktion erst angemerkt.<\/p>\n\n\n\n<p>Besonders bei fehlenden Felder ist es gute Praxis, die Seite zum fehlerhaften Feld zu scrollen, um die <strong>Korrektur m\u00f6glichst einfach<\/strong> zu machen. Hier ist nun klar ersichtlich, dass eine lange Seite dazu f\u00fchrt, dass \u00fcber die gesamte Seite zur\u00fcck gescrollt werden muss, um weiter zu kommen.<br>Oder falls kein automatisches Scrollen stattfindet, muss die gesamte Seite nach dem fehlerhaften Feld <strong>durchsucht<\/strong> werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fortschritt<\/strong><\/h2>\n\n\n\n<p>Sowohl auf langen, als auch bei vielen Seiten m\u00fcssen Nutzende ein Gef\u00fchl daf\u00fcr haben, was sie erwartet. Also wie lang die Seite ist und wieviele Seiten oder Abschnitte zu erwarten sind.<\/p>\n\n\n\n<p>Eine M\u00f6glichkeit zur Forschrittsanzeige bei mehreren Seiten ist eine <strong>Progressbar<\/strong> und\/oder die Ausgabe eines Textes wie &#8220;Seite 2\/5&#8221;.<\/p>\n\n\n\n<p>F\u00fcr lange Seiten empfehlen sich <strong>Sprungmarken<\/strong> und ggf. ein verlinktes <strong>Inhaltsverzeichnis<\/strong>.<\/p>\n\n\n\n<p>In beiden F\u00e4llen sollte vorher ersichtlich sein, welchen <strong>Umfang<\/strong> der Inhalt hat, am besten noch, wie viel <strong>Zeit<\/strong> das Lesen oder die Bearbeitung in Anspruch nehmen wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fazit<\/strong><\/h2>\n\n\n\n<p>Die uneindeutige Antwort, ob lange Seiten oder viele Seiten besser sind ist &#8220;es kommt darauf an&#8221;. Nicht immer hat man die M\u00f6glichkeiten, beide Varianten mit einem AB-Test auszuprobieren (ich w\u00e4re aber an entsprechenden Ergebnissen interessiert, wenn die jemand hat).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zu konsumierende Inhalte besser auf wenigen, langen Seiten darstellen.<\/li>\n\n\n\n<li>Formulare zu sinnvollen Bl\u00f6cken zusammenfassen und diese sinnhaft auf einzelne Seiten verteilen.<\/li>\n\n\n\n<li>Nutzenden ein Anhaltspunkt f\u00fcr den Fortschritt vermitteln.<\/li>\n<\/ul>\n\n\n\n<p>F\u00fcr mein &#8220;Arbeits-Problem&#8221; werden wir eine L\u00f6sung in der Mitte finden, mit halblangen Seiten, die aber jeweils Dateneingaben zu einem Thema enthalten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quellen<\/strong><\/h2>\n\n\n\n<p>Ich habe vor allem die folgenden zwei Artikel in meine Erkenntnisse einflie\u00dfen lassen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/designerly.com\/infinite-scroll\/\">Infinite Scroll vs. Pagination<\/a> (englisch, designerly)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2010\/03\/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php\">Pagination in Web Forms<\/a> (englisch, uxmatters)<\/li>\n<\/ul>\n\n\n<p>","protected":false},"excerpt":{"rendered":"<p>Das Thema kam bei der Arbeit auf, und nachdem ich in einem Rabbithole deswegen versunken bin, m\u00f6chte ich meine Erkenntnisse einmal zusammenfassen. Wir k\u00f6nnen wohl kaum die einzigen sein, die sich die Frage gestellt haben, ob Inhalte besser gescrollt oder gebl\u00e4ttert werden sollen. Das Problem Es gibt einfach Inhalte im Web oder f\u00fcr Anwendungen, die [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,36],"tags":[37,87],"class_list":["post-741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","category-web-programming","tag-programming","tag-website"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"de":{"title":true,"content":true,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=741"}],"version-history":[{"count":5,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/741\/revisions"}],"predecessor-version":[{"id":748,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/741\/revisions\/748"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}