{"id":2220,"date":"2014-02-19T15:38:32","date_gmt":"2014-02-19T14:38:32","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=2220"},"modified":"2014-06-28T00:43:42","modified_gmt":"2014-06-27T22:43:42","slug":"z-pattern","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern","title":{"rendered":"Z-Pattern verstehen: Des Webdesigns Psychologie"},"content":{"rendered":"

Ein grundlegendes Konzept bei dem Aufbau von Layouts hei\u00dft Z-Pattern<\/strong>. Hier erkl\u00e4re ich dir, wof\u00fcr man dieses Muster braucht und was du bei der Realisierung beachten musst.<\/p>\n

Z-Pattern verstehen<\/h2>\n

Im Bereich des Webdesigns sind bestimmte psychologische Grundlagen entscheidend. Sie gelten als wichtige Erfolgsfaktoren f\u00fcr gute Designs. Betrachtungsmuster sind dabei sehr wichtig und sollten bei der Gestaltung von Webseiten ber\u00fccksichtigt werden. Neben dem F-Pattern ist das Z-Pattern eines dieser bekannten Muster. Die Basis des Z-Patterns ist schnell gezeigt: Man nimmt an, dass das Auge beim schnellen \u00dcberfliegen einer Internetseite einem bestimmten Muster, dem sogenannten Z-Muster, folgt. Es beginnt also links, bewegt sich auf der horizontalen Achse nach rechts und wandert dann diagonal nach links unten. Zum Schluss wandert es wieder horizontal nach rechts. So erhalten ihre Seiten-Besucher eine schnelle Zusammenfassung \u00fcber das Webprojekt.<\/p>\n

Entwickler k\u00f6nnen sich diesen Effekt zu Nutze machen und wichtige Informationen oder Elemente an den erw\u00e4hnten Punkten platzieren. Als Orientierungshilfe kann auch das ber\u00fchmte AIDA-Modell verwendet werden: Attention, Interest, Desire, Action. Das Z-Pattern kann also mit diesem bekannten Marketing-Modell sehr gut kombiniert werden<\/em>. Denkbar, und vor allem praxisnah f\u00fcr die Verwendung des Z- Muster, ist die Platzierung eines Logos auf Position 1 und die Suchfunktion auf Position 2. Der dritte oder vierte Punkt k\u00f6nnen Werbung oder Call-To-Action-Elemente sein.<\/p>\n

Z-Pattern<\/h3>\n

\"Z-Pattern\"<\/p>\n

In der Mitte der Webseite, also auf der Diagonalen zwischen dem zweiten und dritten Punkt, kann man Inhalte mit vielen Bildern platzieren, um auf diese Weise eine h\u00f6here Aufmerksamkeit bei der fl\u00fcchtigen Augenbewegung zu erreichen. Eine kurze Zusammenfassung der Inhalte kann der dritte Punkt enthalten. Wird mit Icons, also visuell gearbeitet, kann zus\u00e4tzlich Aufmerksamkeit erzeugt werden. Der 4. Punkt bietet sich an, um ein weiteres Call-To-Action-Element zu platzieren. Hier endet der Verlauf des Blickes und unser wichtigstes Ziel soll eben die Aktion des Nutzers sein: Action.<\/p>\n

Die wichtigsten Aspekte wie Aktion, Branding, Hierarchie und Struktur werden vom Z-Muster abgedeckt.Somit ist es ein gutes Grundger\u00fcst, um Inhalte entlang der Kanten des \u201eZ\u201c auszurichten. Das Muster muss sich jedoch nicht \u00fcber die gesamte Webseite erstrecken. Dein vorgestelltes \u201eZ\u201c kannst du stauchen, strecken und \u201eschief\u201c \u00fcber deine Internetseite legen. Man sollte aber darauf achten, dass die Fixpunkte klar definiert wurden und genutzt werden, um das Scannen der Webseite zu unterst\u00fctzen. Prinzipiell ist es auch m\u00f6glich, verschiedene Pattern kombiniert zu verwenden. Allerdings ist eine klare visuelle Abgrenzung von den verschiedenen Strukturen und Mustern wichtig, sonst endet dein Webdesign als strukturlose Informationsansammlung.<\/p>\n

Die Herausforderung des Z-Patterns<\/h4>\n

Egal wie stark du das Design strukturierst, die Wahrscheinlichkeit ist ziemlich hoch, dass die Nutzer dem auffallendsten Element die gr\u00f6\u00dfte Aufmerksamkeit schenken. Es ist gut m\u00f6glich, dass sie aus dem Betrachtungsmuster ausbrechen. Das Anwenden der unterschiedlichen Muster aus der Web-Psychologie birgt immer auch Risiken. Das Z-Muster kann jedoch eine \u00fcberwiegend freie Gestaltung der Inhalte m\u00f6glich machen. Das Muster kann dabei mehrmals in einem Layout verwendet werden. Designer erzielen so einen guten Lesefluss und erhalten viele Freiheiten bei der Gestaltung.<\/p>\n

F\u00fcr minimalistische Designs, mit relativ unkompliziertem Aufbau, eignet sich das Z-Pattern besonders gut. Bei komplexeren Webseiten mit vielen Inhalten kann das Z-Pattern dagegen leicht scheitern. Eine interessantere Alternative f\u00fcr textlastige Internetseiten ist das F-Pattern.<\/p><\/blockquote>\n

Was h\u00e4ltst du von dem Z-Pattern? Verwendest du dieses Muster?<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Ein grundlegendes Konzept bei dem Aufbau von Layouts hei\u00dft Z-Pattern. Hier erkl\u00e4re ich dir, wof\u00fcr man dieses Muster braucht und was du bei der Realisierung beachten musst. Z-Pattern verstehen Im Bereich des Webdesigns sind bestimmte psychologische Grundlagen entscheidend. Sie gelten als wichtige Erfolgsfaktoren f\u00fcr gute Designs. Betrachtungsmuster sind dabei sehr wichtig und sollten bei der Gestaltung von Webseiten ber\u00fccksichtigt werden. Neben dem F-Pattern ist das Z-Pattern eines dieser bekannten Muster. Die Basis des Z-Patterns ist schnell gezeigt: Man nimmt an, dass das Auge beim schnellen \u00dcberfliegen einer Internetseite einem bestimmten Muster, dem sogenannten Z-Muster, folgt. Es beginnt also links, bewegt sich auf der horizontalen Achse nach rechts und wandert dann diagonal nach links unten. Zum Schluss wandert es wieder horizontal nach rechts. So erhalten ihre Seiten-Besucher eine schnelle Zusammenfassung \u00fcber das Webprojekt. Entwickler k\u00f6nnen sich diesen Effekt zu Nutze machen und wichtige Informationen oder Elemente an den erw\u00e4hnten Punkten platzieren. Als Orientierungshilfe kann auch das ber\u00fchmte AIDA-Modell verwendet werden: Attention, Interest, Desire, Action. Das Z-Pattern kann also mit diesem bekannten Marketing-Modell sehr gut kombiniert werden. Denkbar, und vor allem praxisnah f\u00fcr die Verwendung des Z- Muster, ist die Platzierung eines Logos auf Position 1 und die Suchfunktion auf Position 2. Der dritte oder vierte Punkt k\u00f6nnen Werbung oder Call-To-Action-Elemente sein. Z-Pattern In der Mitte der Webseite, also auf der Diagonalen zwischen dem zweiten und dritten Punkt, kann man Inhalte mit vielen Bildern platzieren, um auf diese Weise eine h\u00f6here Aufmerksamkeit bei der fl\u00fcchtigen Augenbewegung zu erreichen. Eine kurze Zusammenfassung der […]<\/p>\n","protected":false},"author":1,"featured_media":2730,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[204],"class_list":["post-2220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-z-pattern"],"yoast_head":"\nZ-Pattern verstehen: Des Webdesigns Psychologie<\/title>\n<meta name=\"description\" content=\"Z-Pattern sind ein grundlegendes Konzept bei dem Aufbau von Layouts. Hier erkl\u00e4re ich dir wof\u00fcr man dieses Muster braucht.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Z-Pattern verstehen: Des Webdesigns Psychologie\" \/>\n<meta property=\"og:description\" content=\"Z-Pattern sind ein grundlegendes Konzept bei dem Aufbau von Layouts. Hier erkl\u00e4re ich dir wof\u00fcr man dieses Muster braucht.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wolkenhart\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-19T14:38:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-06-27T22:43:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mika Gustavson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wolkenhart\" \/>\n<meta name=\"twitter:site\" content=\"@wolkenhart\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#article\",\"isPartOf\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern\"},\"author\":{\"name\":\"Mika Gustavson\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\"},\"headline\":\"Z-Pattern verstehen: Des Webdesigns Psychologie\",\"datePublished\":\"2014-02-19T14:38:32+00:00\",\"dateModified\":\"2014-06-27T22:43:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern\"},\"wordCount\":550,\"commentCount\":4,\"image\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg\",\"keywords\":[\"Z-Pattern\"],\"articleSection\":[\"Webdesign Agentur\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern\",\"name\":\"Z-Pattern verstehen: Des Webdesigns Psychologie\",\"isPartOf\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg\",\"datePublished\":\"2014-02-19T14:38:32+00:00\",\"dateModified\":\"2014-06-27T22:43:42+00:00\",\"author\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\"},\"description\":\"Z-Pattern sind ein grundlegendes Konzept bei dem Aufbau von Layouts. Hier erkl\u00e4re ich dir wof\u00fcr man dieses Muster braucht.\",\"breadcrumb\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#primaryimage\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg\",\"contentUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg\",\"width\":500,\"height\":334,\"caption\":\"Pattern\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\/\/wolkenhart.com\/webdesignblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Z-Pattern verstehen: Des Webdesigns Psychologie\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#website\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac\",\"name\":\"Mika Gustavson\",\"description\":\"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Z-Pattern verstehen: Des Webdesigns Psychologie","description":"Z-Pattern sind ein grundlegendes Konzept bei dem Aufbau von Layouts. Hier erkl\u00e4re ich dir wof\u00fcr man dieses Muster braucht.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern","og_locale":"de_DE","og_type":"article","og_title":"Z-Pattern verstehen: Des Webdesigns Psychologie","og_description":"Z-Pattern sind ein grundlegendes Konzept bei dem Aufbau von Layouts. Hier erkl\u00e4re ich dir wof\u00fcr man dieses Muster braucht.","og_url":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern","article_publisher":"https:\/\/www.facebook.com\/wolkenhart","article_published_time":"2014-02-19T14:38:32+00:00","article_modified_time":"2014-06-27T22:43:42+00:00","og_image":[{"width":500,"height":334,"url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg","type":"image\/jpeg"}],"author":"Mika Gustavson","twitter_card":"summary_large_image","twitter_creator":"@wolkenhart","twitter_site":"@wolkenhart","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#article","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern"},"author":{"name":"Mika Gustavson","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac"},"headline":"Z-Pattern verstehen: Des Webdesigns Psychologie","datePublished":"2014-02-19T14:38:32+00:00","dateModified":"2014-06-27T22:43:42+00:00","mainEntityOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern"},"wordCount":550,"commentCount":4,"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg","keywords":["Z-Pattern"],"articleSection":["Webdesign Agentur"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern","url":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern","name":"Z-Pattern verstehen: Des Webdesigns Psychologie","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#primaryimage"},"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg","datePublished":"2014-02-19T14:38:32+00:00","dateModified":"2014-06-27T22:43:42+00:00","author":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac"},"description":"Z-Pattern sind ein grundlegendes Konzept bei dem Aufbau von Layouts. Hier erkl\u00e4re ich dir wof\u00fcr man dieses Muster braucht.","breadcrumb":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wolkenhart.com\/webdesignblog\/z-pattern"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#primaryimage","url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg","contentUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2014\/02\/Pattern.jpg","width":500,"height":334,"caption":"Pattern"},{"@type":"BreadcrumbList","@id":"https:\/\/wolkenhart.com\/webdesignblog\/z-pattern#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/wolkenhart.com\/webdesignblog\/"},{"@type":"ListItem","position":2,"name":"Z-Pattern verstehen: Des Webdesigns Psychologie"}]},{"@type":"WebSite","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website","url":"https:\/\/wolkenhart.com\/webdesignblog\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/5a7a715656061b06187fb64c7da365ac","name":"Mika Gustavson","description":"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.","url":"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk"}]}},"_links":{"self":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/2220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/comments?post=2220"}],"version-history":[{"count":0,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/2220\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media\/2730"}],"wp:attachment":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media?parent=2220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/categories?post=2220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/tags?post=2220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}