Sollten Sie die „Above-the-Fold“-Designprinzipien beibehalten?
Der Bereich Webdesign und -entwicklung stellt Sie vor viele Dilemmata: ob Sie einen sauberen Stil verwenden oder nicht, die neuesten Trends auf Ihrer Website integrieren oder nicht, einen Akzent auf die visuelle Front oder Funktionalität legen, das Design ansprechend gestalten oder nicht usw.
Wir können nicht alle diese Fragen auf einmal beantworten; Stattdessen beginnen wir mit einem sehr wichtigen Aspekt: der Faltung.
Was bedeutet die Falte?
Die Falte ist ein Begriff, der von Websitebesitzern und -entwicklern verwendet wird, um den Teil des Websiteinhalts zu identifizieren, der ohne Scrollen nach unten angezeigt wird. Dies ist ein Bereich, der direkt sichtbar ist, wenn ein Benutzer eine Website betritt.
Zeitung Herkunft
Woher stammen die Ursprünge? Alles ist einfach: Die Presse setzte diesen Begriff, lange bevor Webdesign ein so wichtiges und entwickeltes Feld wurde. Printzeitungen hatten die sensationellsten Artikel oben auf der Seite, um die Leser zu motivieren, durch die gesamte Zeitung zu blättern.
Vielzahl von Bildschirmauflösungen
Das Problem mit dem Fold ist heute die Auflösung. Das iPad hat eine Auflösung von 1024×768, das iPhone 4 hat eine Auflösung von 960×640, mein 22-Zoll-Monitor hat eine Auflösung von 1920×1080, und heute noch ist 1280×720 am gebräuchlichsten. Es ist nicht länger ein Computertyp, den jeder hat, aber heute gibt es eine Vielzahl von Computermonitordesigns und -größen, sodass es schwierig ist, ein allgemeines „above-the-fold”-Design zu entwickeln. Wie auch immer, einige Benutzer werden mehr sehen, andere weniger, wo ist dann die goldene Mitte? Ich nehme an, es liegt an der Leugnung der Klappe, weil der allgemeine Begriff jetzt tot ist.
Mobile Geräte ändern die Falte
Wir haben Ihnen nur ein paar Zeilen weiter oben von der Bildschirmauflösung erzählt, aber es ist auch erwähnenswert, dass wir nicht wissen, welche Geräte morgen, in einem Monat oder in ein paar Jahren erscheinen werden. Heutzutage benutzen die Menschen Tablets und Smartphones, aber vor ein paar Jahrzehnten waren sie aus unserer Vorstellungswelt verschwunden.
Epoche des Scrollens
Vor allem scrollen – so werden Webseiten heutzutage erstellt. Es war üblich, eine Website ohne Scrollen zu durchsuchen und nicht zu wissen, wie man sich weiter verhält, wenn Webbrowser unerforscht waren. Nutzer leben heute online, sie kommunizieren, shoppen, werben und handeln im Internet und wissen alles darüber. Eine andere Sache ist, dass Benutzer nicht gerne lesen und einem Abschnitt der Website zu viel Aufmerksamkeit schenken, also scrollen, scrollen und scrollen sie noch einmal. Es ist Ihre Aufgabe, sie dazu zu bringen, bei diesem oder jenem Element anzuhalten, und wie Sie verstehen, geht es nicht um die Falte. Es dauert nur wenige Sekunden, bis Benutzer den Hero-Bereich der Website ansehen, sodass Sie nicht alles auf eine Seitenzone stopfen müssen. Sie sollten den richtigen Anteil an Inhalten auf der gesamten Seite platzieren, damit verdoppeln Sie Ihre Chancen, wahrgenommen und gelesen zu werden.
Beispiele dafür, wie man Benutzer zum Scrollen anregt
Sobald Sie sich entschieden haben, Ihre Website scroll-aktiv zu machen, müssen Sie über alle möglichen Optionen nachdenken, damit sie funktioniert und ansprechend ist. Wie werden Benutzer verstehen, dass sie scrollen müssen? Warum müssen sie scrollen? Was bekommen sie, wenn sie scrollen?
Pfadspuren zum Scrollen – Dies ist, wenn Sie einige Elemente verwenden, um den Weg durch Ihre Website zu zeigen. Hier meine ich sowohl elementare Pfeile als auch kreative Lösungen wie Luftballons, Schleichen, alles, was Sie sich nur vorstellen können.
Beach Boar Website mit Tischtennisschläger
Sparks-Studio
Spaltenlayout – diese Funktion kann sehr dazu beitragen, Benutzer zu faszinieren, insbesondere wenn eine der Spalten durch die Falte gebrochen ist. Dann beginnen die Benutzer zu scrollen, um bis zum Ende des Abschnitts zu lesen, und gelangen so unwissentlich zur Fußzeile und erhalten einen weiteren Teil der von Ihnen vorbereiteten Informationen.
Die Navigation ist ein Eckpfeiler jeder Website und es ist keine Überraschung, dass sie die beste Position und die benutzerfreundlichsten Funktionen haben sollte. Die beste Position ist ohne Zweifel „above the fold”. Wieso den? Weil die Benutzer vielleicht nicht die gesamte Startseite scrollen möchten, aber ein konkretes Ziel haben und eine bestimmte Seite sehen müssen, z. B. „Über uns”, „Kontakt”, „Zahlung”, „Portfolio” usw. Sie werden alles verschenken und eine andere Seite finden. Viele Entwickler machen einen Fehler, indem sie riesige Heldenbereiche mit Bildern entwerfen, die den gesamten Platz über der Falte einnehmen (und große Heldenbereiche sind heute im Trend). Sie sollten die Navigationsleiste besser über diesem Bild oben platzieren, anstatt sie unterhalb des Abschnitts zu machen und erst nach ein wenig Scrollen sichtbar zu machen.
Website-Design mit Top-Navigation
Wo sind Handlungsaufforderungen effektiver?
Die Antwort auf diese Frage hängt von vielen Faktoren ab: Welche Art von Dienstleistungen/Produkten Sie anbieten, ein Kunde kann sofort eine Entscheidung treffen oder er muss vorher mehr lesen, Sie haben einen oder mehrere Handlungsaufforderungen, die auf der vorgestellt werden sollen Seite. Lassen Sie uns nun jeden Punkt nacheinander beschreiben.
Der Call-to-Action-Button (CTA) ist „above the fold” wirksam, wenn Sie in der Kopfzeile umfassende Informationen zu Ihrem Produkt angeben. Das können Folienpräsentationen, Aufzählungen mit Vorteilen Ihres Produktes, beliebige Statiken etc. sein. So hat sich der User ein Bild von Ihrem Unternehmen gemacht und kann eine Entscheidung treffen. In diesem Fall wirken die Above-the-Fold-Buttons zu Ihren Gunsten.
Einseitige Website mit CTA-Button „above the fold”.
Wenn Sie Ihren Kunden eine lange Geschichte zu erzählen haben und möchten, dass sie alle Vor- und Nachteile Ihres Produkts kennen, müssen Sie Ihren CTA unterhalb der Falte platzieren, und zwar besser in der Fußzeile. Wenn Kunden sicher sind, dass sie es brauchen, sehen sie einen Push direkt vor sich. Sie sollten Ihre Geschichte jedoch attraktiv, interessant, fesselnd und zielgerichtet gestalten, andernfalls werden Sie keine Antwort erhalten.
Wann können Sie mehrere Handlungsaufforderungen verwenden? Nur wenn Sie sie unterschiedlich gestalten und in verschiedenen Inhaltsabschnitten platzieren. Darüber hinaus ist es besser, verschiedene Designs für alle zu erstellen, um sich voneinander zu unterscheiden. Wenn Sie überall denselben Button haben, wird dies Ihre Online-Präsenz beeinträchtigen und Ihre Endergebnisse verschlechtern.
Website mit mehreren Handlungsaufforderungen
Wie platziert man CTA in der Mitte? Es gibt einige Tricks, die Sie kennen sollten:
- Setzen Sie den Call-to-Action in eine Seitenleiste, vorzugsweise auf der linken Seite, da wir normalerweise von links nach rechts lesen und alles auf der linken Seite zuerst ins Auge fällt:
- Machen Sie das Call-to-Action-Design auffällig, färben Sie es hell und verwenden Sie große Schriftarten.
- Verwenden Sie Leerraum um Ihren Call-to-Action, um ihn von anderen Inhalten abzuheben.
Der größte Fehler, den Sie machen können, ist das Mischen von CTA mit anderen Inhaltselementen. Stellen Sie es also niemals auf ein überladenes und unordentliches Layout, es wird mit Sicherheit nicht funktionieren.
Kontaktdaten: Above oder Below the Fold?
Nicht alle Benutzer durchsuchen gerne lange Websites mit vielen Inhalten, einige von ihnen finden diese Websites nur, um Kontakte des Unternehmens zu erhalten, um einen Anruf zu tätigen. Aus diesem Grund ist es besser, Kontakte über der Falte zu haben, es kann eine einzelne Zeile mit Telefonnummer oder ein kompakter Block mit detaillierteren Informationen sein. Vergessen Sie außerdem nicht eine separate Kontaktseite, die für jede Website ein Muss ist.
Above the Fold ist nach wie vor wichtig: Startseite und Landing
Das Above-the-Fold-Designprinzip ist nicht für alle Webseiten gleich. Während es auf Inhaltsseiten unwichtig und unnötig ist, ist es für das Design von Homepages und Zielseiten sehr wichtig. Hier haben Sie die Möglichkeit, die Zuschauer durch einen netten Heldenbereich mit Bildern oder durch eine Dia-Präsentation anzulocken. Halten Sie sich dennoch an die zuvor besprochenen Regeln für das gesamte Aktions- und Navigationsdesign.
Abschließende Tipps: Elemente, die über und unter der Falte erscheinen sollen
Wir hoffen, Sie sind mit dem Artikel nicht durcheinander gekommen; Trotzdem geben wir Ihnen kurz die wichtigsten Punkte des Above-the-Fold-Designs und fassen alles in einfachen Tipps zusammen, die Sie befolgen sollten:
- Präsentieren Sie Ihren Namen über der Falte. Das Logo hat einen großen Einfluss auf die Markenbekanntheit und genau aus diesem Grund wird die Website erstellt – um für Ihren Namen / Ihr Unternehmen zu werben.
- Top-Navigation verwenden. Dies ist das wichtigste Element einer mehrseitigen Website, daher kommt es hier wirklich auf die Faltprinzipien an.
- Platzieren Sie Top-News über dem Falz. Lassen Sie Ihre Kunden sofort auf Ihre Veranstaltungen und neuen Produkte aufmerksam werden, lassen Sie sie nicht im Ungewissen.
- Social-Media-Buttons funktionieren sowohl „above” als auch „below the fold” gut. Wenn Ihre Website-Seite lange gescrollt wird, treffen Sie keine Auswahl – platzieren Sie einfach Social-Sharing-Buttons oben und unten. Header-Buttons sind gut für Besucher, die Sie bereits kennen und genau nach Ihrer Website gesucht haben, um diese Follow-Buttons zu finden. Fußzeilen-Buttons sind großartig, denn wenn Benutzer an Ihren Inhalten interessiert sind, werden sie sowieso nach unten scrollen.
- Finden Sie eine geeignete Call-to-Action-Position für Ihre spezielle Website. Jedes Unternehmen und jeder Dienstleister hat unterschiedliche Ziele mit einer Website, daher sind auch die Handlungsaufforderungen für sie unterschiedlich. In diesem Beitrag geben wir eine gute Erläuterung zu diesem Designproblem. Wir hoffen, dass Sie es gründlich lesen, kommen Sie zurück, wenn nicht.
- Legen Sie nicht alles über die Falte. Andernfalls erhalten Sie eine schreckliche Website mit überladenem Layout, außerdem mit leerem und langweiligem Below-the-Fold-Design.
- Vernachlässigen Sie die Above-the-Fold-Prinzipien, wenn Ihre Website hauptsächlich von mobilen Nutzern verwendet wird. Menschen sind es gewohnt zu scrollen, wenn sie Websites über Smartphones oder Tablets durchsuchen.
- Scrollen ist im Trend, also setzen Sie es besser in Szene als das Above-the-Fold-Design, das in der modernen digitalen Welt kein Muss ist.