{"id":12753,"date":"2021-11-25T00:00:00","date_gmt":"2021-11-24T23:00:00","guid":{"rendered":"http:\/\/marketing.ch\/uncategorized\/diese-7-usability-gesetze-fuers-webdesign-musst-du-kennen\/"},"modified":"2023-07-26T14:54:39","modified_gmt":"2023-07-26T12:54:39","slug":"diese-7-usability-gesetze-fuers-webdesign-musst-du-kennen","status":"publish","type":"post","link":"https:\/\/marketing.ch\/digital-marketing\/diese-7-usability-gesetze-fuers-webdesign-musst-du-kennen\/","title":{"rendered":"Diese 7 Usability-Gesetze f\u00fcrs Webdesign musst du kennen"},"content":{"rendered":"\n<p><strong>Die beste SEA-Kampagne bringt dir nichts, wenn deine Landingpage oder deine Webseite im Allgemeinen schlecht gestaltet ist. Denn wenn Nutzer*innen von der Seite abspringen, erzielst du keine Conversions und b\u00fcsst zudem Stellen im SEO-Ranking ein. Mit diesen Gestaltungsgesetzen vermeidest du das.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\"><h2>Inhaltsverzeichnis<\/h2><nav><ul><li class=\"\"><a href=\"#h-das-jakob-gesetz\">Das Jakob-Gesetz<\/a><\/li><li class=\"\"><a href=\"#h-die-doherty-schwelle\">Die Doherty-Schwelle<\/a><\/li><li class=\"\"><a href=\"#h-das-millersche-gesetz-die-7-plus-minus-2-regel\">Das Millersche Gesetz \u2013 Die 7-plus\/minus-2-Regel<\/a><\/li><li class=\"\"><a href=\"#h-das-gesetz-der-n-he\">Das Gesetz der N\u00e4he<\/a><\/li><li class=\"\"><a href=\"#h-das-gesetz-der-hnlichkeit\">Das Gesetz der \u00c4hnlichkeit<\/a><\/li><li class=\"\"><a href=\"#h-banner-blindheit\">Banner-Blindheit<\/a><\/li><li class=\"\"><a href=\"#h-das-z-muster\">Das Z-Muster<\/a><\/li><li class=\"\"><a href=\"#h-gesetzm-ssigkeiten-aus-intuition\">Gesetzm\u00e4ssigkeiten aus Intuition<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Eine gutaussehende und&nbsp;<a href=\"https:\/\/marketing.ch\/fuer-den-besten-ersten-eindruck-diese-10-bausteine-braucht-eine-gute-webseite\/\" target=\"_blank\" rel=\"noreferrer noopener\">gut nutzbare Webseite<\/a>&nbsp;ist eine Grundvoraussetzung f\u00fcr erfolgreiches Online-Marketing. Denn nur so machst du einen guten Eindruck bei Interessente, sodass sie gerne auf der Webseite verweilen und sich so deren Ranking bei den Suchmaschinen verbessert. Gl\u00fccklicherweise musst du nicht selbst herausfinden, was funktioniert und was nicht. Es gibt eine Reihe von Usability- oder Gestaltungsgesetzen, die definieren, wie du deine&nbsp;<a href=\"https:\/\/marketing.ch\/neue-webseite-so-geht-garantiert-nichts-vergessen-bei-deinem-projekt\/\" target=\"_blank\" rel=\"noreferrer noopener\">Webseite gestalten<\/a>&nbsp;musst, damit Nutzer*innen sich orientieren k\u00f6nnen und ihre Erwartungen erf\u00fcllt werden:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-das-jakob-gesetz\">Das Jakob-Gesetz<\/h2>\n\n\n\n<p>Das erste Gestaltungsgesetz beschreibt, dass User*innen auf Webseiten stets Funktionen und Gestaltungselemente erwarten, die ihnen bekannt sind. Webseiten, die also anderen, oft besuchten Webseiten in Form und Funktion \u00e4hneln, sind beliebter. Orientiere dich deshalb bei der Implementation von Features, Strukturierung von Navigationspunkten oder Gestaltung von Buttons immer an den weit verbreiteten Standards.<\/p>\n\n\n\n<p>Die Symbole f\u00fcr einen Einkaufskorb, eine Suchleiste oder ein Hamburgermen\u00fc beispielsweise sind allgemein bekannt. Und von dieser Bekanntheit bist du abh\u00e4ngig, denn vor allem auf mobilen Webseiten ist meist kein Platz, um Buttons zu beschriften. Das Symbol muss f\u00fcr sich sprechen. Das funktioniert nur, weil wir uns auf gewisse Darstellungen wie eine Lupe f\u00fcr Suchfelder geeinigt haben. Dasselbe gilt auch f\u00fcr die Positionierung dieser Elemente auf einer Webseite.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/marketing.ch\/wp-content\/uploads\/2023\/01\/screenshot-jakobs-gesetz-1-605x1024.png\" alt=\"Screenshot der Startseite von nikin.ch.\" class=\"wp-image-33591\" width=\"303\" height=\"512\" title=\"\"><figcaption class=\"wp-element-caption\">Die Symbole f\u00fcr Men\u00fc, Suche, Profil und Warenkorb in der Navigationsleiste sind aufgrund unserer Gewohnheit selbsterkl\u00e4rend.<br>Bildquelle: nikin.ch<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-die-doherty-schwelle\">Die Doherty-Schwelle<\/h2>\n\n\n\n<p>Eine schnell ladende Webseite ist nicht nur f\u00fcrs SEO-Ranking relevant. Besucher*innen von Webseiten sind ungeduldig und wollen m\u00f6glichst schnell ans Ziel kommen. Die Doherty-Schwelle definiert, in welchem Zeitraum Nutzer*innen Feedback auf eine Aktion \u2013 z. B. einen Button-Klick \u2013 erwarten. Demnach liegt diese Schwelle bei 400ms. Dauert eine Reaktion l\u00e4nger, verlieren User*innen das Interesse oder die Aufmerksamkeit.<\/p>\n\n\n\n<p>Sollte eine Aktion auf deiner Webseite dennoch l\u00e4nger ben\u00f6tigen, musst du den Nutzer*innen zeigen, dass ihre Eingabe im Hintergrund verarbeitet wird und nicht einfach ignoriert wurde. Das geht beispielsweise mit einer Variante eines Ladebalkens oder anderen Animationen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-das-millersche-gesetz-die-7-plus-minus-2-regel\">Das Millersche Gesetz \u2013 Die 7-plus\/minus-2-Regel<\/h2>\n\n\n\n<p>Simplizit\u00e4t im Webdesign ist gerne gesehen. Denn sie erh\u00f6ht die \u00dcbersichtlichkeit und vermeidet Ablenkungen, wodurch Besucher*innen die gesuchten Informationen einfacher finden. Das gilt nicht nur f\u00fcr visuelle Gestaltungselemente, sondern auch f\u00fcr die der Anzahl der Elemente. Der Psychologe George Miller stellte fest, dass unser Gehirn etwa sieben Dinge gleichzeitig im Kurzzeitged\u00e4chtnis speichern kann. Je nach Veranlagung einer Person k\u00f6nnen es auch zwei mehr oder weniger sein.<\/p>\n\n\n\n<p>Es empfiehlt sich darum, in allen Bereichen des Webdesigns Nutzer*innen nie mit mehr als 5 \u2013 9 Elementen oder Optionen zu konfrontieren. Bei Navigationspunkten in einem Men\u00fc oder Textabschnitten in einer Produktbeschreibung darfst du dich am oberen Ende dieses Spektrums bewegen. Bei Preismodellen und Abo-Optionen sind f\u00fcnf Elemente allerdings schon das absolute Maximum.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/marketing.ch\/wp-content\/uploads\/2023\/01\/Screenshot-millersches-gesetz-1024x482.png\" alt=\"Screenshot der Men\u00fcnavigation auf sbb.ch.\" class=\"wp-image-33592\" title=\"\"><figcaption class=\"wp-element-caption\">Die SBB-Webseite treibt es mit der Anzahl Navigationspunkte etwas auf die Spitze.<br>Bildquelle: sbb.ch<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-das-gesetz-der-n-he\">Das Gesetz der N\u00e4he<\/h2>\n\n\n\n<p>Elemente, die nah beieinanderstehen, nehmen wir als zusammengeh\u00f6rig wahr. Indem du dieses Gesetz erfolgreich anwendest, stellst du sicher, dass Informationen, die zueinander geh\u00f6ren, auch so von Seitenbesucher*innen wahrgenommen werden. Das ist beispielsweise in einem Onlineshop wichtig, wo ein Bild, ein Text und ein Preis alle ein Produkt beschreiben. Wenn diese Elemente entsprechend gruppiert sind, brauchst du keinen Rahmen oder andere Gestaltungselemente drumherum, um klarzumachen, dass sie sich auf dasselbe Produkt beziehen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/marketing.ch\/wp-content\/uploads\/2023\/01\/screenshot-gesetz-der-naehe.png\" alt=\"Screenshot der Suchergebnisse auf digitec.ch.\" class=\"wp-image-33593\" width=\"239\" height=\"627\" title=\"\"><figcaption class=\"wp-element-caption\">Dass sich die Kategorie Webcam auf das unter Produkt bezieht und die 4-Sterne-Bewertung auf das Produkt oben, ist aufgrund des ausreichenden Abstands zwischen beiden Elementgruppen offensichtlich.<br>Bildquelle: digitec.ch<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-das-gesetz-der-hnlichkeit\">Das Gesetz der \u00c4hnlichkeit<\/h2>\n\n\n\n<p>Auch Elemente, die \u00e4hnlich gestaltet sind, nehmen wir als zusammengeh\u00f6rig war und noch wichtiger: Wir erwarten, dass sie dieselben Funktionen haben. Darum haben beispielsweise&nbsp;<a href=\"https:\/\/marketing.ch\/die-8-besten-webseiten-um-kostenlos-schriftarten-herunterzuladen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Zwischentitel immer dieselbe Formatierung<\/a>&nbsp;und Farbe. Auf vielen Webseiten f\u00e4llt zudem auf, dass alle klickbaren Elemente \u2013 seien es Links oder Buttons \u2013 dieselbe Farbe verwenden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-banner-blindheit\">Banner-Blindheit<\/h2>\n\n\n\n<p>Banner-Blindheit ist ein neueres Ph\u00e4nomen. Es beschreibt die Beobachtung, dass Nutzer*innen in Usability-Tests Seiteninhalte oben unter der Navigationsleiste oder am rechten Rand der Webseite gar nicht wahrnehmen. Das ist darauf zur\u00fcckzuf\u00fchren, dass diese Orte klassisch f\u00fcr Werbebanner genutzt werden. Konsument*innen haben sich nun so stark daran gew\u00f6hnt, an diesen Stellen nur Werbung zu sehen, dass sie diese komplett ignorieren.<\/p>\n\n\n\n<p>F\u00fcr dich bedeutet das, dass du zwei Optionen hast. Entweder du platzierst an den entsprechenden Stellen gar keine relevanten Inhalte \u2013 schon gar keine Calls-to-action. Oder aber du gestaltest die Bereiche so, dass sie eindeutig als Seiteninhalt und nicht als Werbung identifizierbar sind. Das geht zum Beispiel in dem du gar keine rechte Spalte verwendest, sondern den gesamten Seiteninhalt zentriert in einer Spalte gestaltest.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/marketing.ch\/wp-content\/uploads\/2023\/01\/Screenshot-banner-blindheit-1024x505.png\" alt=\"Screenshot eines Artikels auf watson.ch mit Werbebannern.\" class=\"wp-image-33594\" title=\"\"><figcaption class=\"wp-element-caption\">Oben zwischen Navigationsleiste und Content sowie in der rechten Spalte befinden sich wie \u00fcblich Werbebanner. Aufgrund dieser konsistenter Platzierungen werden sie kaum noch wahrgenommen.<br>Bildquelle: watson.ch<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-das-z-muster\">Das Z-Muster<\/h2>\n\n\n\n<p>Dir ist bestimmt schon aufgefallen, dass Logos auf Webseiten immer oben links platziert sind. Das ist alles andere als ein Zufall. Der&nbsp;<a href=\"https:\/\/marketing.ch\/heatmaps-dein-tool-um-videos-webseiten-und-conversions-zu-optimieren\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blickpfad<\/a>, dem Webseitenbesucher*innen \u00fcblicherweise beim Betrachten eines visuellen Mediums folgen, ist erstaunlich konsistent. Je nach Art des Mediums gibt es nat\u00fcrlich Unterschiede. Wir m\u00f6chten das Z-Muster hervorheben. Laut diesem folgen Menschen aus Kulturen, in denen von links nach rechts gelesen wird, einem Z-Muster beim Abscannen einer Webseite.<\/p>\n\n\n\n<p>Das heisst, sie beginnen oben links, wandern nach rechts, dann diagonal nach unten links und landen schlussendlich unten rechts. Dies geschieht sehr schnell, weswegen der gr\u00f6sste Fokus auf dem Startpunkt oben links und dem Endpunkt unten rechts liegt. Dort solltest du beispielsweise Logos und Handlungsaufforderungen platzieren. Jetzt solltest du aber nicht in den anderen Ecken den Platz gar nicht ausnutzen. Achte aber darauf, dass die dort platzierten Elemente auff\u00e4llig gestaltet sind, damit sie nicht untergehen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/marketing.ch\/wp-content\/uploads\/2023\/01\/Screenshot-Z-Muster-1024x505.png\" alt=\"Screenshot der Startseite von skillshare.com.\" class=\"wp-image-33595\" title=\"\"><figcaption class=\"wp-element-caption\">An den beiden wichtigsten Fokuspunkten oben links und unten rechts befinden sich das Logo respektive eine Aufforderung zur Anmeldung. Oben rechts, wo laut Z-Muster eher wenig Fokus liegt, erweckt ein gr\u00fcner Sign-up-button Aufmerksamkeit.<br>Bildquelle: skillshare.com<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gesetzm-ssigkeiten-aus-intuition\">Gesetzm\u00e4ssigkeiten aus Intuition<\/h2>\n\n\n\n<p>Keine der vorgestellten Regeln, sollte dich gross \u00fcberrascht haben. Und genau das ist der Sinn von Usability-Gesetzen. Sie sind komplett intuitiv, logisch und vorhersehbar und liefern deswegen eine&nbsp;<a href=\"https:\/\/marketing.ch\/dein-verstaendlicher-guide-fuer-die-5-elemente-der-user-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">gute User Experience<\/a>. Ihre Aufgabe ist es nur, Muster und und Gewohnheiten zusammenzufassen, damit du bewusste Entscheidungen zum Wohle der Bedienbarkeit triffst und eine Webseite gestalten kannst, auf der sich Besucher*innen wohl f\u00fchlen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die beste SEA-Kampagne bringt dir nichts, wenn deine Landingpage oder deine Webseite im Allgemeinen schlecht gestaltet ist. Denn wenn Nutzer*innen von der Seite abspringen, erzielst du keine Conversions und b\u00fcsst zudem Stellen im SEO-Ranking ein. Mit diesen Gestaltungsgesetzen vermeidest du das. Eine gutaussehende und&nbsp;gut nutzbare Webseite&nbsp;ist eine Grundvoraussetzung f\u00fcr erfolgreiches Online-Marketing. Denn nur so machst [&hellip;]<\/p>\n","protected":false},"author":94,"featured_media":12760,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[173],"tags":[],"class_list":["post-12753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing"],"acf":[],"_links":{"self":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/12753"}],"collection":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/comments?post=12753"}],"version-history":[{"count":3,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/12753\/revisions"}],"predecessor-version":[{"id":18943,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/12753\/revisions\/18943"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/media\/12760"}],"wp:attachment":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/media?parent=12753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/categories?post=12753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/tags?post=12753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}