Entwerfen für die neue Falte: Web Design Post Monitorism

() translation by (you can also view the original English article)

Das Design für die "Falte" war für viele Webdesigner schon lange eine Priorität, aber mit so vielen Geräten, die Ihre Website anzeigen können, woher wissen Sie, wo es ist? Sollten wir uns Sorgen machen? In diesem Artikel werden Sie gefragt, wie wichtig das Fold tatsächlich ist, welche Variablen verwendet werden, welche Browsing-Gewohnheiten Sie ändern und was Sie dagegen tun können. Endlich ist der Tod der Falte auf uns!

Der Tod der Falte

Das Browsen im World Wide Web ist nicht länger eine Aufgabe, die sich auf Desktop-Computer beschränkt. Das mobile Browsen scheint von Tag zu Tag zuzunehmen, und viele andere Geräte, wie beispielsweise internetfähige Fernsehgeräte, werden bald verfügbar. Brandon erwähnte es erstmals in seinem großen jährlichen Webtrends-Post, The State of Web Design Trends: Jahresausgabe 2011... "The Death of the Fold", wie er es nannte, ist endlich bei uns.

Aber was heißt das wirklich?

Weil der traditionelle „Bildschirm“, durch den die Menschen das Web betrachten, eine Vielfalt von Explosionen erlebt hat ... können wir nicht mehr erwarten, dass sich Websurfer auf einem 19-Zoll-Monitor mit einer Auflösung zwischen 1024 × 768 und 1280 × 700 befinden. Heutzutage gibt es Bildschirme in allen Formen und Größen, von iPhones (und kleineren Telefonen) bis zu 60-Zoll-HDTVs. Es ist nicht nur die Auflösung, die jedoch stark variieren kann. Das Bildseitenverhältnis eines Bildschirms (sogar auf demselben Gerät wie das iPhone) kann sich mit dem Handgelenk ändern. Sicher, Webdesignern wird immer empfohlen, die wichtigsten Nachrichten einer Website in der Nähe der obersten Ebene aufzubewahren, aber mit so vielen neuen Möglichkeiten für Web-Surfer, das Web zu betrachten, gibt es keine definierte Höhe mehr, in der der Inhalt oben sein muss.

Bevor wir uns jedoch selbst überlegen, lasst uns diesen Artikel mit einer Reise in die alte Schule beginnen ...

Einführung: The Old Fold

"Der ideale Bereich, um mutige Einführungen, wichtige Informationen, verlockende Bilder und aufrufbare Handlungselemente zu platzieren, liegt über dem ..."

Wenn Sie bereits eine Ausbildung zum Grafikdesigner hatten, sind Sie wahrscheinlich mit dem Begriff "über der Falte" vertraut. Wenn nicht, nehmen wir uns einen kurzen Moment für die Erklärung.

Der Begriff wurde zuerst in Bezug auf traditionelle Medien verwendet, um genau zu sein, Zeitungen. Man geht davon aus, dass Zeitungen häufig zusammengelegt oder angezeigt werden und der Bereich "über der Falz" der erste ist, den der Leser sieht, und es ist daher ein prominenter und wichtiger Ort. Auffällige Schlagzeilen und auffallende Bilder werden häufig angezeigt, um die Aufmerksamkeit des Lesers auf sich zu ziehen.

Der Ausdruck wurde natürlich auf das Gebiet des Webdesigns übertragen, als er in den letzten 90er Jahren populär wurde. Es ist mehr oder weniger dasselbe Konzept, außer dass der Bereich oberhalb der Falte der Bereich ist, den der Benutzer sofort sehen kann, ohne zu scrollen (nicht so eingängig, richtig?). Dieser Bereich ist der ideale Bereich, um mutige Einführungen, wichtige Informationen, verlockende Bilder und aufrufbare Handlungselemente zu platzieren. Es ist auch der bevorzugte Platz für jegliche Werbung.

Der Bereich oberhalb der Falte ist der obere Abschnitt eines Webdesigns, den der Benutzer sofort sehen kann, ohne zu scrollen.

Die Wichtigkeit des Bereichs über der Falte scheint durch die „Fünf-Sekunden-Regel“ gestützt zu werden, die üblicherweise in Web Design zitiert wird. In diesem Fall werden die Benutzer innerhalb von fünf Sekunden nach dem Besuch auf einer Website urteilt. Der Usability-Experte Jakob Nielsen hat außerdem vorgeschlagen, dass Benutzer bis zu 80% ihrer Zeit damit verbringen, Informationen über den Tellerrand zu schauen.

Die Bedeutung der "Falte" im vergangenen Jahrzehnt kann im historischen Kontext nicht übermäßig betont werden ... In vielen Designstudios und Marketingagenturen wurden heftig umstrittene Debatten darüber geführt, wo genau die Falte war. Um die optimale Platzierung von Anzeigen vorhersagen zu können, wurde viel Geld in Marktdaten investiert, und ganze Designs wurden aus dem Fenster geworfen, da sie die Verwendung des Platzes "über der Falz" nicht maximierten. Die mächtige Falte wurde auf der Höhe ihrer Wichtigkeit als eine von drei horizontalen Linien mit 570, 590 und 600 Pixeln definiert.

Alles unter 600 Pixeln war irrelevant, der zweite Rang war für einen ehrwürdigen Webdesigner nicht die Mühe wert, sich damit zu beschäftigen.

Phooey.

An diesem Punkt können einige von Ihnen vielleicht denken oder sogar schreien (angesichts der Menge an Debatte, die dieses Thema zu verursachen scheint), dass die "Falte" irrelevant ist und jede Diskussion darüber auf die Geschichtsbücher beschränkt sein sollte. Die Vorstellung, dass ein Webdesigner im oberen Bereich des Bildschirms auf einen kleinen Teil beschränkt ist, ist absurd. Wir möchten glauben, dass alle Webbenutzer scrollen und dass wir die Freiheit haben, uns auszudrücken und ein Design in so viel Platz wie nur nötig zu gestalten. Einige sind sogar ziemlich kreativ geworden, um zu zeigen, dass die Leute bereit sind zu scrollen.

Zweifellos gab es zwischen einem Webdesigner und seinem Kunden viele Argumente hinsichtlich der Wichtigkeit des „Faltens“, was möglicherweise zu seinem etwas schlechten Ruf beigetragen hat. Ein Kunde, der die Wichtigkeit der Falte überschätzt, kann alles verlangen und die Küchenspüle muss in diesem relativ kleinen Raum zusammengedrückt und gestaucht werden, und der Webdesigner wird frustriert sein, dass er seine Fähigkeiten hinsichtlich Position, Ausrichtung und subtiler Verwendung von Weiß nicht beweisen kann Platz.

Der Schlüssel zu diesem Thema ist, wie bei vielen anderen Designaspekten, ein Gleichgewicht. Wenn Sie sich auf einen kleinen Teil des Bildschirms beschränken, können Sie Ihre Kreativität und Gestaltungsmöglichkeiten einschränken. Auf der anderen Seite wäre es völlig falsch, die Idee der „Faltung“ völlig außer Acht zu lassen, und Sie würden eine potenziell leistungsstarke Entwurfs-Methode verpassen, wie wir unten sehen werden.

Die Falte in Aktion

Die wunderschön gestaltete Website für die Kaleidoscope-App ist ein hervorragendes Beispiel für das Entwerfen mit Blick auf die Falte. Der große Titel, ein einleitender Absatz, ein auffälliges Bild und Aktionselemente sind sofort sichtbar und für den Benutzer verfügbar. Beachten Sie, dass zusätzliche Informationen unter der Überschrift "Weitere Informationen" unter den Grenzwert fallen. Die "Falte" wurde bei der Gestaltung dieser Website eindeutig berücksichtigt. Wenn Sie nach unten scrollen, werden jedoch eine Vielzahl von Informationen und viele detailliertere Designelemente angezeigt. Es ist offensichtlich, dass die Designer der Website immer noch einen Bildlauf durch die Benutzer erwarten.

Ähnliche Entwurfsmuster finden Sie auf vielen großen Websites. Die Bedeutung dieses ersten Eindrucks wird erkannt, jedoch wird ein viel größeres Gebiet voll genutzt, um eine Geschichte zu erzählen und die Informationen zu kommunizieren, die sie benötigen. Der Bereich "über der Falz" wird häufig verwendet, um den Benutzer weiter unten auf der Seite und zu den Bereichen zu führen, die der Designer sehen möchte. Es ist in der Tat eine wichtige Fähigkeit, die Aufmerksamkeit eines Benutzers auf sich ziehen zu können, aber dennoch so fasziniert zu bleiben, dass er auf der Website bleibt und tatsächlich nach neuen Informationen und Inhalten sucht.

Es ist immer eine Selbstverständlichkeit, die wichtigsten Botschaften und Handlungsaufforderungen in der Nähe des oberen Bereiches eines Website-Designs zu veröffentlichen ... aber dogmatisch versucht man nicht, Inhalte über die Falte zu drücken, ist keine Strategie, die Ihre Designs verketten sollte.

Wenn Sie jedoch die Kaleidoscope-Website für sich selbst besuchen, wird Ihnen höchstwahrscheinlich eine etwas andere Ansicht präsentiert. Sie können möglicherweise mehr oder weniger von der Website sehen - und hier ist das Problem, mit dem jeder Webdesigner konfrontiert ist. Wie können Sie für die Falte entwerfen, wenn Sie nicht wissen, wo sich ein bestimmter Besucher befindet? Es gibt viele verschiedene Faktoren, die zusammen die physikalische Größe des Bereichs "über der Falte" bestimmen.

Das Problem der "neuen" Falte

Webdesigner sind es gewohnt, mit Browsern in ständiger Betrachtung zu entwerfen. Die vielen Macken und Unstimmigkeiten haben uns seit Jahren frustriert und sie spielen auch eine Rolle in diesem Rätsel. Jeder einzelne Browser nimmt einen unterschiedlichen Anteil des Bildschirms ein, abhängig von der Größe der Browser-Benutzeroberfläche und den zusätzlichen Symbolleisten. Der Trend bei modernen Browsern scheint jedoch positiv zu sein, da sie weniger Platz benötigen als zuvor. Die Entwickler von Google Chrome, Safari und Internet Explorer 9 haben erkannt, dass es eine bessere Browser-Erfahrung gibt, wenn die Nutzer von der Website selbst kaum abgelenkt werden.

Heutzutage gibt es auch so viele Kombinationen von Monitorgröße und Bildschirmauflösung, dass es für ein "one size fits all" Webdesign nahezu unmöglich ist. Vor vielen Jahren wurde festgestellt, dass 1024 x 768 die üblichste Bildschirmauflösung war und dies scheint, was die meisten Designer noch entwerfen. Allein die Auflösungsstatistik von WebDesigntuts zeigt den Umfang des Problems für Designer.

Werfen wir einen kurzen Blick auf die Browser-Auflösungsstatistik für die Webdesigntuts + -Seite, um eine kurze Fallstudie zu erhalten:

"Sie können nicht garantieren, dass sie überhaupt einen herkömmlichen Bildschirm verwenden."

Die Grafik zeigt, dass derzeit eine Vielzahl von Auflösungen verwendet wird, wobei der Hauptanteil der Verwendung auf sechs verschiedene Größen verteilt ist. Wie Sie sehen, zählt die Bildschirmauflösung von 1024 x 768 nur noch für einen kleinen Prozentsatz, obwohl dies in letzter Zeit aufgrund der Entscheidung des IPad, diese Auflösung zu verwenden, gestiegen ist.

Wenn es nicht genug war, dass Sie nicht wirklich wissen, welche Größe ein Webbenutzer hat, können Sie jetzt nicht garantieren, dass er überhaupt einen herkömmlichen Bildschirm verwendet. Das Zeitalter des mobilen Browsens liegt gut und wir befinden uns in der Tat, und es werden derzeit viele verschiedene Geräte verwendet. Sehen wir uns die Analysestatistik für Webdesigntuts noch einmal an:

Wie Sie sehen, werden viele verschiedene Betriebssysteme verwendet, und Plattformen wie Android können in verschiedene Geräte integriert werden. Tablet-basiertes Browsing, das mit der Veröffentlichung des IPad explodierte, wird erst mit der Veröffentlichung vieler Tablet-Computer unterschiedlicher Größe populärer. Mobile Geräte aller Art stellen Webdesigner zudem vor eine einzigartige Herausforderung, da sie entweder im Quer- oder Hochformatmodus verwendet werden können - eine Entscheidung, die die Position der Falzlinie erheblich verändern würde. Viele Websites bemühen sich nun, für Geräte wie das Ipad „optimiert“ zu werden.

Strategien für das Design für die neue Falte

Wie kann man also bei all diesen Variablen wissen, wo die „Falte“ ist?

Die Wahrheit ist, dass Sie nicht können. Bei so vielen Variablen ist es fast unmöglich zu wissen, wo sich die Falzlinie befindet. Nur ein oder zwei Jahre vorspulen, und wahrscheinlich werden noch mehr Änderungen an der Bildschirmumgebung vorgenommen. Dies alles bedeutet nur, dass die vorherigen Ratschläge für das Design innerhalb der ersten 600px nicht mehr sicher sind. Es scheint, dass das Streben nach Pixel-Perfektion Sie nur frustriert.

Ein sinnvollerer Ansatz wäre die Gestaltung allgemeiner, verhältnisbasierter Falten, die sowohl Querformat als auch Hochformat berücksichtigen...

Dies würde bedeuten, nicht nur für die traditionelle Falte zu entwerfen, sondern auch eine zweite Falte weiter unten auf der Seite. Eine solche Falte würde einem herkömmlichen Design nichts abnehmen, hätte aber einen zusätzlichen Vorteil für diejenigen, die mobile Geräte und Tablet-Computer verwenden. Durch die Verwendung eines ungefähren Verhältnisses anstelle von festen Pixelmessungen, die zwar weniger genau sind, sollten Sie dennoch relativ sicher sein.

Wir glauben, dass der Schlüssel hier nicht darin liegt, sich zu sehr auf das „Fold“ selbst zu konzentrieren, sondern eher zu versuchen, Ihre Kernbotschaft in einer „sicheren Zone“ zu halten und dabei ein qualitativ hochwertiges Design zu erhalten. Idealerweise sollten Sie Entwürfe auf mobilen Geräten testen, es stehen jedoch viele Simulatoren zur Verfügung, falls dies nicht immer möglich ist.

Die bestmöglichen Entwurfsstrategien, die sich an eine Vielzahl von Monitoren anpassen, sind diejenigen, die über das gesamte Design einen festen Eindruck von Hierarchie haben. Dies bedeutet, dass die Kernbotschaft einer Site aus einer "Skalierung" dieser Site ersichtlich sein sollte, und detailliertere Informationen und Inhalte sollten in der Reihenfolge ihrer Wichtigkeit auf der Seite lesbar sein.

Andere Gestaltungsprinzipien wie Typografie, Farbtheorie, Layout und Gestalt spielen dabei ebenfalls eine große Rolle. Webdesigner tun dies gut, wenn sie sich auf diese bewährten Praktiken konzentrieren. In der Tat ist eine der großen neuen Möglichkeiten, die der "Tod der traditionellen Falte" den Designern bietet, die Rückkehr zu den wichtigsten Gestaltungsprinzipien. Sie hinterlassen starre, dogmatische und unsinnige Vorstellungen von Layout zu Gunsten uralter Designtheorien.

Das größere Bild

"... In der Studie stellten sie fest, dass 76% der Benutzer einen Bildlauf durchgeführt haben und dass ein großer Teil der Benutzer trotz der Höhe des Bildschirms ganz nach unten gescrollt wurde."

Die Statistiken für die Webdesigntuts-Website allein sind hilfreich (vor allem, weil wir über solche detaillierten Daten verfügen), sie repräsentieren aber sicherlich nicht das gesamte Internet, oder? Selbst wenn wir die offiziellen Browser-Anzeigestatistiken von der offiziellen Website der W3 Schools betrachten, zeichnet sich ein ähnlicher Trend ab.

Sicher stellen die Daten von nur diesen beiden Seiten nicht die Gesamtheit des Internet-Browsers dar ... aber wenn man sich die Schrift an der Wand ansieht, kann man leicht feststellen, dass dies nicht nur ein Randereignis ist, sondern ein neues Muster das ist aufstrebend. Kombinieren Sie dies mit dem Verkauf neuer Geräte und dem Wachstum der Monitorindustrie. Dies ist eine äußerst solide Munition für alle, die den Mythos der traditionellen Falte zerstreuen wollen.

Darüber hinaus wurden viele Forschungsstudien durchgeführt, die die Wichtigkeit der Falte bereits im Vorfeld entlarvten. Die Schlussfolgerung: Selbst wenn Sie eine feste Monitorgröße verwenden (z. B. 1024 x 768), blicken die Leute, die im Web surfen, nicht nur unter die Falte ... Sie verbringen oft die meiste Zeit dort!

Fazit

Wir haben in diesem Artikel viel diskutiert, lassen Sie uns einige wichtige Punkte zusammenfassen.

Das traditionelle Konzept des Designs für die Falte scheint in Bezug auf modernes Webdesign etwas veraltet zu sein. Wir haben gesehen, dass eine Kombination von Variablen und eine Änderung der Browsing-Methoden vieler Menschen bedeuten, dass eine feste Position der Falzlinie nicht sicher festgelegt werden kann. Webbenutzer sind auch sehr bereit zu scrollen. Besonders bei Multi-Touch-Geräten wie dem IPad ist die Aufgabe sehr intuitiv.

Es bedeutet jedoch nicht, dass die „Falte“ vollständig ignoriert wird. Die Falte kann immer noch ein effektives Element in jedem Design sein. Es kann kein Zweifel bestehen, dass der erste Eindruck beim Webdesign tatsächlich zählt, und dieser Bereich kann verwendet werden, um das Publikum nicht nur zu erfassen, sondern auch weiter unten auf der Seite zu locken. Reservieren Sie diesen Bereich für Ihre wichtigsten Informationen, und versichern Sie Ihren Kunden, dass die Besucher diesen Absatz in ihrem Verlauf weiter unten auf der Seite sehen werden.

Ohne Anzeichen dafür, dass das mobile Surfen langsamer wird, kann auch ein Argument für die Gestaltung einer zweiten "Falz" -Linie für das Surfen mit einem Hochformat-Gerät vorgebracht werden. Es sollte für Ihr Design in keiner Weise schädlich sein und wird nur denjenigen, die solche Geräte verwenden, einen zusätzlichen Bonus geben.

Was denkt ihr? Versuchen Sie immer noch, für die Falte zu entwerfen? Ist es ein Fall, dass wir Designer solche Änderungen bereits kennen und sind es die Kunden, die wir ausbilden müssen?