{"id":4588,"date":"2022-11-28T07:59:45","date_gmt":"2022-11-28T06:59:45","guid":{"rendered":"https:\/\/www.forty-four.de\/blog\/?p=4588"},"modified":"2022-11-28T08:00:43","modified_gmt":"2022-11-28T07:00:43","slug":"gutenberg-diagramm","status":"publish","type":"post","link":"https:\/\/www.forty-four.de\/blog\/gutenberg-diagramm\/","title":{"rendered":"Das Gutenberg-Diagramm: So steuern Sie den Lesefluss auf Ihrer Landingpage"},"content":{"rendered":"Lesedauer<\/span> 7<\/span> Minuten<\/span><\/span>\n

Zu oft wird die Gestaltung von Webseiten oder Landingpages einfach nach Geschmack umgesetzt. Content-Elemente werden zusammengef\u00fchrt, weil sie gef\u00e4llig erscheinen. Das birgt ein Risiko: Denn nur, weil die Seite gut aussieht, hei\u00dft das nicht, dass sie auch gut funktioniert.<\/p>\n\n\n\n

Letztlich soll jede Webseite am Ende eine Funktion erf\u00fcllen<\/strong>, sei es die Vermittlung von Informationen oder der Verkauf eines Produkts. Daf\u00fcr ist es wichtig, bei der Konzeption Wissen \u00fcber die Blick- und Leserf\u00fchrung einflie\u00dfen zu lassen. Denn nur, wenn Sie Ihre Zielgruppe entsprechend an die Hand nehmen, k\u00f6nnen Sie daf\u00fcr sorgen, dass die Landingpage wirklich performt.<\/p>\n\n\n\n

Ein bekanntes Modell der Blickf\u00fchrung f\u00fcr die Gestaltung ist das Gutenberg-Diagramm. Dieses theoretische Modell gibt Auskunft dar\u00fcber, wie Menschen eine Landingpage konsumieren<\/strong> und wo welche Elemente besonders viel Kraft entfalten. Sie wollen eine conversionstarke Seite aufbauen? Dann lernen Sie das Gutenberg-Diagramm zu nutzen! <\/p>\n\n\n\n

Was ist das Gutenberg-Diagramm?<\/h2>\n\n\n\n

Das Gutenberg-Diagramm beruht auf der Erkenntnis, dass unser Leseverhalten kein Zufall<\/strong> ist. Vielmehr ist die Art, wie wir uns Inhalten n\u00e4hern, etwas \u00fcber die Jahre Gelerntes. Diese Pr\u00e4gung beginnt schon im Kindesalter.<\/p>\n\n\n\n

In der westlichen Welt lesen wir z. B. immer von links nach rechts<\/strong>. Diese Regel gilt f\u00fcr Text ebenso wie f\u00fcr Bilder. So wandern wir \u00fcber die Inhalte auf der Suche nach Fixpunkten, die uns festhalten, an denen wir also h\u00e4ngenbleiben.<\/p>\n\n\n\n

Das Gutenberg-Diagramm geht, wie der Name schon vermuten l\u00e4sst, auf Johannes Gutenberg zur\u00fcck, bekannt als Erfinder des Buchdrucks. Er hat sich bei der Erarbeitung die Frage gestellt, wie wir Schriftst\u00fccke konsumieren<\/strong> und daraufhin ein visuelles Muster erstellt. Dieses Schema war urspr\u00fcnglich (der Zeit geschuldet) nur auf Print bezogen, l\u00e4sst sich aber problemlos auf heutige digitale Endger\u00e4te \u00fcbertragen. <\/p>\n\n\n\n

\"Das<\/figure>\n\n\n\n

Das Schema unterteilt das auf den ersten Blick Sichtbare in vier Bereiche, durch die sich von links oben bis nach rechts unten der Blick <\/strong>wie in einem Z-Muster bewegt. Entsprechend unserer Lesepr\u00e4gung beginnen wir links oben, wandern von da weiter nach oben rechts, springen dann nach unten links und kommen schlie\u00dflich unten rechts an.<\/p>\n\n\n\n

Aufgrund der speziellen Form wird das Gutenberg-Diagramm oft auch Z-Pattern oder Z-Muster<\/strong> genannt. Die vier unterschiedlichen Bereiche, die dabei durchkreuzt werden, teilt Gutenberg wie folgt auf: <\/p>\n\n\n\n

  1. Prim\u00e4rer optischer Bereich <\/li>
  2. Starker Folgebereich<\/li>
  3. Schwacher Folgebereich<\/li>
  4. Zielbereich<\/li><\/ol>\n\n\n\n

    01. Prim\u00e4rer optischer Bereich<\/h3>\n\n\n\n
    \"Phase<\/figure>\n\n\n\n

    Der Prim\u00e4re optische Bereich dient dazu, Leserinnen und Lesern im Web Orientierung<\/strong> zu geben. Die wichtige Frage, die hier beantwortet werden muss, lautet: Wo bin ich \u00fcberhaupt? <\/strong><\/p>\n\n\n\n

    Gerade beim Einstieg auf der Webseite in diesem ersten Bereich ist die Aufmerksamkeit besonders gro\u00df<\/strong>. Um Nutzerinnen und Nutzer entsprechend abzuholen, wird hier f\u00fcr gew\u00f6hnlich das Logo integriert, das sofort klar macht, bei wem man sich befindet. <\/p>\n\n\n\n

    Es geht also in diesem Bereich darum, dass Ihre Zielgruppe wissen muss, dass sie hier richtig ist und mit z. B. einem Klick bei Google auch wirklich das passende Ergebnis erwischt hat. <\/p>\n\n\n\n

    02. Starker Folgebereich<\/h3>\n\n\n\n
    \"Phase<\/figure>\n\n\n\n

    Haben Ihre Nutzerinnen und Nutzer verstanden, wo sie sind? Dann wollen sie jetzt Inhalte sehen<\/strong>! Daf\u00fcr dient der Starke Folgebereich. Dieser zweite Bereich hat schon mit einer leicht abnehmenden Aufmerksamkeit zu k\u00e4mpfen und muss deshalb auf ganzer Linie \u00fcberzeugen.<\/p>\n\n\n\n

    Das kann z. B. ein besonders starkes Titelmotiv sein, aber auch eine Headline mit drei Bulletpoints. Die konkrete Wahl h\u00e4ngt dabei vom individuellen Fall und Ziel der Landingpage ab. <\/p>\n\n\n\n

    Insgesamt geht es in diesem Bereich des Gutenberg-Diagramms darum, die Zielgruppe abzuholen und idealerweise auch direkt schon zu \u00fcberzeugen<\/strong>. Zeigen Sie, dass Nutzerinnen und Nutzer im Austausch f\u00fcr Ihre Aufmerksamkeit wirklich was geboten bekommen. <\/p>\n\n\n\n

    03. Schwacher Folgebereich<\/h3>\n\n\n\n
    \"Phase<\/figure>\n\n\n\n

    In der Ecke links unten befindet sich der Schwache Folgebereich, der zumeist nur fl\u00fcchtig betrachtet<\/strong> wird. Dass diesem Bereich so wenig Aufmerksamkeit zukommt, hat einen Grund: Der Lese-Sog (\u201eReading Gravity\u201c) ist zu stark und zieht uns nach rechts unten.<\/p>\n\n\n\n

    Das liegt einfach daran, dass wir Menschen von Natur aus neugierig sind. Wir wollen wissen, wie die Geschichte ausgeht, sobald wir grunds\u00e4tzlich wissen, worum es geht. Also wird der gef\u00fchlt langweilige Mittelteil gerne mal halbherzig \u00fcberbl\u00e4ttert. <\/p>\n\n\n\n

    Entsprechend sollten Sie in diesem Bereich keine wichtigen Informationen<\/strong> unterbringen. Wom\u00f6glich ist dies der Ort f\u00fcr ein weiteres Visual, das aber keine relevanten Punkte beinhaltet.<\/p>\n\n\n\n

    Denkbar w\u00e4re z. B. eine passende Person, die in Richtung des letzten Bereichs blickt und somit die Leserinnen und Leser direkt weiterf\u00fchrt. Aber es ist sogar m\u00f6glich, diesen Bereich einfach leer zu lassen und als Leerraum den anderen Elementen Luft zum Atmen zu bieten, sodass diese drei Elemente am Ende eine Art Dreieck bieten.<\/p>\n\n\n\n

    Ganz wichtig<\/strong>: Bringen Sie in diesem Areal des Gutenberg-Diagramms wirklich keine wichtigen Informationen unter. Diese werden niemals entsprechend gew\u00fcrdigt und verlieren somit ihre Wirkung.<\/p>\n\n\n\n

    04. Zielbereich<\/h3>\n\n\n\n
    \"Phase<\/figure>\n\n\n\n

    Jede Landingpage hat ein klares Ziel. Das ist die Basis, auf der die gesamte Seite aufgebaut ist. Hat nun der Lese-Sog Ihre Zielgruppe von links oben nach rechts unten gezogen, steht eine Frage im Raum: Wie geht es weiter?<\/strong><\/p>\n\n\n\n

    Geben Sie Ihren Nutzerinnen und Nutzern nun die M\u00f6glichkeit, etwas zu tun. Dies geschieht idealerweise durch einen Call-to-action<\/strong>. H\u00e4ufig wird dazu ein Button genutzt, es kann aber auch etwas Anderes sein. <\/p>\n\n\n\n

    Wichtig ist nur:<\/strong> Es muss sofort und unmissverst\u00e4ndlich klar werden, wie es nun weitergeht und was Sie von Ihrer Zielgruppe erwarten. <\/p>\n\n\n\n

    Wof\u00fcr eignet sich das Gutenberg-Diagramm?<\/h2>\n\n\n\n

    Das Gutenberg-Diagramm ist nicht f\u00fcr jede Art von Content<\/strong> geeignet. Es ist gut, um einen gezielten Lese-Sog mit einem klaren Ziel aufzubauen. Entsprechend findet es vor allem Anwendung bei Landingpages<\/a><\/strong>, weshalb wir das Thema auch in diesem Beitrag fokussiert haben.<\/p>\n\n\n\n

    Es eignet sich also dazu, relativ wenige Inhalte pr\u00e4zise auf den Punkt zu bringen und klar zum Ziel zu f\u00fchren. Das Diagramm bildet dabei nicht die komplette Landingpage ab, sondern nur den Bereich, der sofort beim Aufrufen der Seite sichtbar ist (above the fold)<\/strong>. <\/p>\n\n\n\n

    Nat\u00fcrlich kann das Gutenberg-Diagramm auch genutzt werden, um die komplette Landingpage mit wiederholenden Z-Mustern aufzubauen. Allerdings verliert sich dann die Wirkung etwas und man l\u00e4uft Gefahr, die gesamte Landingpage in einzelnen 4er-Blocks zu denken, was den Gesamteindruck tr\u00fcben kann.<\/p>\n\n\n\n

    Die Blickf\u00fchrung in der Praxis: ein Beispiel f\u00fcr eine Landingpage<\/h2>\n\n\n\n

    Probieren wir uns doch einmal an einem Beispiel. Wir erstellen eine imagin\u00e4re Landingpage und schauen uns nur den oberen Bereich above the fold an. Hier muss alles auf dem Punkt sein und die Zielgruppe direkt abgeholt werden, weshalb wir das Gutenberg-Diagramm nutzen.<\/p>\n\n\n\n

    Wir sind eine Marketingagentur und wollen einen Online-Marketing-Ratgeber zum Download<\/strong> anbieten. Unser Ziel ist es, dass die Zielgruppe uns die Mailadresse im Tausch gegen den kostenlosen Download gibt. Wir f\u00fcllen die vier Bereiche des Gutenberg-Diagramms also wie folgt: <\/p>\n\n\n\n

    1. Prim\u00e4rer Optischer Bereich<\/strong>: Hier zeigen wir unser Logo, um Orientierung und Einf\u00fchrung zu bieten. Evtl. k\u00f6nnten wir hier auch eine Headline hinzuf\u00fcgen, aber das k\u00f6nnte schnell \u00fcberladen werden. Also belassen wir es dabei. <\/li>
    2. Starker Folgebereich<\/strong>: Hier haben wir die Wahl zwischen einem Motiv oder Inhalten. Da sich Online-Marketing-Themen oft visuell nur d\u00fcrftig darstellen lassen, setzen wir lieber auf Inhalte. Denkbare w\u00e4re also eine Headline wie \u201eIhr kostenloser Online-Marketing-Ratgeber\u201c und anschlie\u00dfend drei Bulletpoints wie \u201eAls Einstieg und Auffrischung\u201c, \u201eAlle wichtigen Themen einfach erkl\u00e4rt\u201c und \u201eErprobtes Praxiswissen\u201c. Das ist nat\u00fcrlich nur ein Schnellschuss als Beispiel, bitte nicht zu sehr daran aufh\u00e4ngen. <\/li>
    3. Schwacher Folgebereich<\/strong>: Hier haben wir nun die Wahl, ob wir ein Motiv nutzen oder den Bereich einfach leer lassen. Wir entscheiden uns f\u00fcr ein Bild und zeigen z. B. einen Online-Marketer bei der Arbeit. Diese Person schaut nicht in die Kamera, sondern in Richtung des Zielbereichs. So leiten wir den Lesefluss geschickt weiter. Das Bild wird so eingebaut, dass Logo und der Text dar\u00fcberliegen, sodass alles wie aus einem Guss wirkt.<\/li>
    4. Zielbereich<\/strong>: Es ist Zeit f\u00fcr die Aktion! Wir benutzen daf\u00fcr einen farblich hervorgehobenen Button, der einen CTA enth\u00e4lt wie \u201eJetzt Ratgeber downloaden!\u201c Dieser Button f\u00fchrt per Sprungmarke direkt an das Ende der Landingpage, wo ein Formular eingebaut wurde. Hier k\u00f6nnen Nutzerinnen und Nutzer nun ihre Mailadresse gegen einen Downloadlink tauschen. <\/li><\/ol>\n\n\n\n

      Vor- und Nachteile des Gutenberg-Diagramms: eine Einordnung<\/h2>\n\n\n\n

      Wie bei den meisten Modellen handelt es sich hierbei nicht um die eine g\u00fcltige Wahrheit dar\u00fcber, wie wir Inhalte konsumieren. Es gibt z. B. noch andere Formen wie das <\/span>F-Modell nach Jacob Nielsen<\/a> oder die visuelle Hierarchie (auch: Trichter-Modell)<\/span>.<\/p>\n\n\n\n

      Das F-Modell arbeitet vor allem mit klar getrennten Abs\u00e4tzen und hierarchischen und optischen Schwerpunkten, um Nutzerinnen und Nutzern das Scannen der Inhalte zu erleichtern. Deshalb kommt es vor allem f\u00fcr textlastige Inhalte wie Blog- oder Magazinbeitr\u00e4ge zum Einsatz \u2013 z. B. bei diesem Beitrag gerade. <\/p>\n\n\n\n

      Das Gutenberg-Diagramm hingegen ist schwerpunktm\u00e4\u00dfig f\u00fcr Landingpages<\/strong> anzuwenden. Daf\u00fcr funktioniert es sehr gut, denn hier haben Nutzerinnen und Nutzer bereits auf eine Werbeanzeige geklickt und wollen nun \u00fcberzeugt und zu einer Aktion gef\u00fchrt werden.<\/p>\n\n\n\n

      Lange, textlastige Inhalte lassen sich hingegen mit diesem Modell nur schwer aufbauen. Hier w\u00fcrde das Z-Muster nicht seinen gewohnten Zweck erf\u00fcllen. <\/p>\n\n\n\n

      Entsprechend m\u00fcssen Sie sich also bewusst sein, dass es verschiedene Modelle gibt und die Wahl der passenden Gestaltung immer vom Inhaltstyp und der Zielgruppe<\/strong> abh\u00e4ngt<\/strong>. Sie m\u00fcssen also abw\u00e4gen, wann welches Modell sinnvoll ist. <\/p>\n\n\n\n

      Auch das Gutenberg-Diagramm ist somit kein Patentrezept f\u00fcr jede Webseite<\/strong>. Wenn Sie aber eine conversionstarke Landingpage aufbauen wollen, die einfach und intuitiv funktioniert, dann hilft es, wenn Sie sich in der Gestaltung daran orientieren! <\/p>\n\n\n\n

      \n

      forty-four Multimedia erstellt Ihre conversionstarke Landingpage<\/h3>\n\n\n\n

      Seit \u00fcber 25 Jahren sind wir kleinen und mittelst\u00e4ndischen Unternehmen ein kompetenter Partner in Sachen Online-Marketing. Dreh- und Angelpunkt vieler Ma\u00dfnahmen sind dabei Landingpages. Wir konzipieren diese Seiten nach aktuellsten Erkenntnissen der Blickf\u00fchrung wie dem Gutenberg-Diagramm und optimieren den Content so, dass alle Inhalte schl\u00fcssig zur Aktion f\u00fchren. Auf diese Weise sorgen wir daf\u00fcr, dass die Landingpage bestm\u00f6glich funktioniert \u2013 und die Conversionrate steigt. Sprechen Sie uns einfach an!<\/p>\n\n\n\n

      \n
      Jetzt kontaktieren!<\/a><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

      Wie erstellt man conversionoptimierte Landingpages? Das Gutenberg-Diagramm gibt Aufschluss dar\u00fcber, wie Sie eine Landingpage so gestalten, dass Sie Ihre Zielgruppe in den Bann zieht!<\/p>\n","protected":false},"author":3,"featured_media":4613,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7,3],"tags":[],"class_list":["post-4588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webseiten","category-online-marketing"],"_links":{"self":[{"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/posts\/4588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/comments?post=4588"}],"version-history":[{"count":5,"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/posts\/4588\/revisions"}],"predecessor-version":[{"id":4619,"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/posts\/4588\/revisions\/4619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/media\/4613"}],"wp:attachment":[{"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/media?parent=4588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/categories?post=4588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.forty-four.de\/blog\/wp-json\/wp\/v2\/tags?post=4588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}