[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"Hhy04sk8LnLlfm4MSJTJOj56Q_H3bekRhW4R7bAYbtA":75,"49rwVWZXVvMv1J50Aeno0QmH_KJK7MHP45j2Aqo50w8":177,"_apollo:default":217},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":117,"postContentElements":13,"evergreen":13,"tags":13,"postWpBody":142,"wpHeaderImage":146,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":159,"wpPromotedTeaserImage":169,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":170,"wpYoastHead":13,"author":171},"NodeWpPost","1540","Wer navigiert, verliert (nicht): Die besten Tipps für Menü-UX in der Praxis",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1733299834,"UTC","+00:00","2024-12-04T08:10:34+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1731503260,"2024-11-13T13:07:40+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/wer-navigiert-verliert-nicht-die-besten-tipps-fuer-menue-ux-der-praxis",[94,101,108,113],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Wer navigiert, verliert (nicht): Die besten Tipps für Menü-UX in der Praxis | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/wer-navigiert-verliert-nicht-die-besten-tipps-fuer-menue-ux-der-praxis","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":109,"tag":96,"attributes":114},{"__typename":111,"property":115,"content":116},"og:image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/styles/meta_og_image/public/2024-12/BLOG_MENU%CC%88%20UX_SHARING-1204x630px.jpg?h=3ecc83bb&itok=271AU5eM",{"__typename":118,"id":119,"name":120,"path":121,"status":20,"weight":122,"description":123,"langcode":127,"changed":128,"metatag":131},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":124,"processed":125,"format":126},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":129,"timezone":85,"offset":86,"time":130},1713772777,"2024-04-22T07:59:37+00:00",[132,135,139],{"__typename":95,"tag":96,"attributes":133},{"__typename":98,"name":99,"content":134},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":136},{"__typename":98,"name":137,"content":138},"description","Themen aus dem Bereich Design & User Experience",{"__typename":102,"tag":103,"attributes":140},{"__typename":105,"href":141,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",{"__typename":143,"processed":144,"format":126,"summary":145},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\u003Cdiv class=\"row ckeditor-grid grid-100-dl\">\u003Cdiv class=\"ckeditor-grid-col grid-one default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3\">\u003Cp>Wir kommen beim Gebrauch von Websites häufig nicht daran vorbei sie zu nutzen und im Idealfall fällt es uns aber währenddessen nicht einmal richtig auf: Menüs. Doch wie sieht für uns das ideale Menü eigentlich aus? Psst, wir verraten euch ein Geheimnis:\u003C/p>\u003Cp>\u003Cstrong>💡 Ein perfektes Menü sieht nicht gut aus. Es funktioniert gut.\u003C/strong>\u003C/p>\u003Cp>Ein zielführendes und gut strukturiertes Menü einer Website ist ein wesentlicher Bestandteil jeder guten User Experience – denn selbst die besten Inhalte bringen nichts, wenn niemand sie findet! Ein Suchfeld ist zwar praktisch, sollte aber nicht die Hauptlösung sein. Das wirkt nämlich schnell so, als würde man User:innen ins Labyrinth schicken, statt ihnen einen klaren Weg zu zeigen.\u003C/p>\u003Ch3>Content Audit & Struktur - das Herzstück des Menüs\u003C/h3>\u003Cp>Die perfekte Menüstruktur hängt stark vom \u003Cstrong>Umfang des Inhalts\u003C/strong> ab. Eine Seite mit nur zwei oder drei Menüpunkten braucht natürlich eine andere Herangehensweise als eine mit 20 Menüpunkten auf zwei Ebenen. Deshalb ist es vorab unbedingt notwendig den bestehenden Content \u003Cstrong>zu auditieren und einen ungefähren Aufbau zu skizzieren\u003C/strong>. Auch über die Benennung der Menüpunkte sollte vorab diskutiert werden. Diese Content-Architektur dient als \u003Cstrong>Basis\u003C/strong> des Menüs, die Auswahl und Gestaltung des Interfaces baut darauf auf.\u003C/p>\u003Cp>\u003Cstrong>Das Endprodukt der Content-Struktur sieht im Idealfall so aus:\u003C/strong>\u003C/p>\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"571065b1-e9e3-4c52-96be-877367f50c11\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"2048\" height=\"1152\" alt=\"die ebenen des contents sind gut strukturiert, man erkennt zusammengehörigkeiten und hierachen. die betitelungen sind erfolgt. der content ergibt einen so genannten "content tree" in seiner darstellung.\" src=\"/sites/default/files/2024-11/image.png\">\n\u003C/div>\n\n\u003Cfigcaption>Quelle: www.flowmapp.com/features/sitemap\u003C/figcaption>\n\u003C/figure>\n\u003Cp>Hier treten meist auch die ersten Fragestellungen und Ungewissheiten auf. Deshalb solltet ihr schon in diesem Schritt eure User:innen mit einbeziehen und Strukturen sowie Benennungen abtesten. \u003Cstrong>Card Sorting oder Tree Testing\u003C/strong> sind eine super Möglichkeit, mit der ihr das tun könnt. Wir haben hierfür \u003Ca href=\"https://maze.co\">Maze\u003C/a> im Einsatz.\u003C/p>\u003Cp>\u003Cspan class=\"notion-enable-hover\" data-token-index=\"0\">\u003Cstrong>So könnten eure Ergebnisse beim Card Sorting zum Beispiel aussehen:\u003C/strong>\u003C/span>\u003C/p>\u003Cdiv class=\"grid-wrapper\">\u003Cdiv class=\"row ckeditor-grid grid-75-25\">\u003Cdiv class=\"ckeditor-grid-col grid-one col-xsmall-12 col-medium-9\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"c91c5863-6576-4919-87c1-ebacda321345\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"695\" height=\"852\" alt=\"Unterkategorien werden Überkategorien zugeordnet und ergeben eine Matrix, aus der man herauslesen kann wie die Anordnung im Idealfall zu erfolgen hat.\" src=\"/sites/default/files/2024-11/Bildschirmfoto_2023-03-01_um_10.51.27.png\">\n\u003C/div>\n\u003C/div>\u003Cdiv class=\"ckeditor-grid-col grid-two col-xsmall-12 col-medium-3\">\u003Cp> \u003C/p>\u003C/div>\u003C/div>\u003C/div>\u003Cp>Erst wenn das Gerüst steht, beginnt ihr mit dem Anstrich. Hier gibt es in der Praxis viele UI-Ansätze:\u003C/p>\u003Ch3>\u003Cstrong>Hamburger Menüs - stark verbreitet, seltener genutzt\u003C/strong>\u003C/h3>\u003Cp>Das Hamburger-Menü hat sich im Zuge der “mobile first” Entwicklung sehr stark verbreitet, es wird mittlerweile auch auf Desktop viel eingesetzt. Das schmeckt nicht wirklich: Studien haben gezeigt, dass das Verstecken des Menüs, etwa durch ein Hamburger-Icon, dazu führt, dass Benutzer:innen \u003Cstrong>seltener\u003C/strong> oder erst \u003Cstrong>später\u003C/strong> das Menü zur Unterstützung nutzen. Sowohl auf mobilen Geräten als auch auf dem Desktop beeinträchtigt das Verstecken von Inhalten die Benutzererfahrung erheblich, was sich unter anderem durch höhere “time on task” und eine geringere Erfolgsquote beim Abschluss von Aufgaben bemerkbar macht. (\u003Ca href=\"https://www.nngroup.com/articles/hamburger-menus/ \">Quelle\u003C/a>)\u003C/p>\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv alt=\"eine grafik die veranschaulicht, dass hamburger menüs auf desktop viel weniger bzw später genutzt werden als sichtbare menüs. \" data-entity-type=\"media\" data-entity-uuid=\"c2724909-e2de-4a0f-876d-0f136c2a068b\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1234\" height=\"880\" alt=\"-\" src=\"/sites/default/files/2024-11/Bildschirmfoto_2024-09-25_um_15.20.33_0.png\">\n\u003C/div>\n\n\u003Cfigcaption>Quelle: www.nngroup.com\u003C/figcaption>\n\u003C/figure>\n\u003Cblockquote>\u003Cspan class=\"quote-text\" data-ftf=\"true\">Das Menü dient nicht nur der Orientierung. Es hilft den Nutzern:innen, den Umfang von Leistung und Inhalten zu verstehen. Wenn das Menü versteckt ist, verlieren die Nutzer:innen die Kontextinformationen, die ihnen sagen, wer du bist und was sie bei dir tun können.\u003C/span>\u003Ccite class=\"author\">Nielsen Norman Group\u003C/cite>\u003C/blockquote>\u003Cp>\u003Cspan class=\"discussion-id-0ebacaf1-59c8-4cec-881a-635280898f80 notion-enable-hover\" data-token-index=\"0\">Wir würden euch daher auf Desktop definitiv vom Hamburger \u003C/span>\u003Cspan class=\"discussion-id-0ebacaf1-59c8-4cec-881a-635280898f80 notion-enable-hover\" data-token-index=\"1\">\u003Cstrong>abraten\u003C/strong>\u003C/span>\u003Cspan class=\"discussion-id-0ebacaf1-59c8-4cec-881a-635280898f80 notion-enable-hover\" data-token-index=\"2\">. Ihr vergebt damit wertvolle Punkte in der Experience eurer User:innen\u003C/span>, da Hamburger Menüs einfach schlechter erfasst, weniger benutzt und keinen klaren ersten Eindruck über die wichtigsten Funktionen auf eurer Seite vermitteln. Beispielsweise hier:\u003C/p>\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv alt=\"Startseite Figlmüller\" data-entity-type=\"media\" data-entity-uuid=\"c90f3232-9b75-4397-982d-bff784695824\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1903\" height=\"968\" alt=\"eine website, die ein hamburger menü auf desktop einsetzt, dieses aber im header bereich komplett untergeht und deshalb wahrscheinlich seltener geklickt wird.\" src=\"/sites/default/files/2024-11/figlmu%CC%88ller.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot https://www.figlmueller.at/ vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003Cp>Auf mobilen Geräten funktioniert der Hamburger laut Studien eindeutig besser. Das hat zum Grunde, dass man viel weniger Platz hat (Inhalte also generell zentrierter angezeigt werden) und aufklappbare/komprimierende Elemente auch eher gelernt sind und genutzt werden. Auch wir verwenden für mobile Designs sehr oft einen Hamburger, nehmen wichtige CTA und Funktionen der Seite aber gerne aus dem Hamburger heraus auf die 1. Ebene, um so User:innen einen schnelleren Zugang zu ermöglichen.\u003C/p>\u003Cp>\u003Cstrong>Bei der Gallerie Belvedere ist das zum Beispiel ein Ticket-Button und bei der Wiener Staatsoper der Zugriff zum Kalender:\u003C/strong>\u003C/p>\u003Cdiv class=\"grid-wrapper\">\u003Cdiv class=\"row ckeditor-grid grid-50-50\">\u003Cdiv class=\"ckeditor-grid-col grid-one col-xsmall-12 col-medium-6\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"051157cc-8a72-453d-baf1-bb8d6e0758e3\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"375\" height=\"812\" alt=\"Die mobile Navigation des Belvederes\" src=\"/sites/default/files/2024-11/Menu_Mobile.png\">\n\u003C/div>\n\u003C/div>\u003Cdiv class=\"ckeditor-grid-col grid-two col-xsmall-12 col-medium-6\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"a38214d9-843c-4671-a62c-0d7aa26bc4a9\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"414\" height=\"884\" alt=\"Die Navigation der Staatsoper\" src=\"/sites/default/files/2024-11/spielplan.png\">\n\u003C/div>\n\u003C/div>\u003C/div>\u003C/div>\u003Ch3>\u003Cstrong>Mega-Menüs - alles auf einen Blick\u003C/strong>\u003C/h3>\u003Cp>Mega-Menüs zeigen alles auf einen Blick, so dass die Nutzer:innen alles sehen können, statt beim Wechsel der Menüpunkte sich alles merken zu müssen. Das wirkt kognitiv entlastend auf User:innen. Diese Lösung ist insbesondere für Websites mit vielen Kategorien und Unterkategorien geeignet. Vor allem bei Einzelhändern mit einem \u003Cstrong>breiten Produktportfolio\u003C/strong> werdet ihr diese Variante häufig finden. Wie hier bei Adidas:\u003C/p>\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"f8dd14d6-b1ed-4b6b-a655-7dbc82a36cb1\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"3210\" height=\"1110\" alt=\"Das Mega-Menü von adidas\" src=\"/sites/default/files/2024-11/Bildschirmfoto%202024-11-13%20um%2013.38.58.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot https://www.adidas.at/ vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003Cp>Worauf ihr achten solltet: \u003Cspan class=\"discussion-id-1141a3d3-f11b-80ec-9276-001caffa066b notion-enable-hover\" data-token-index=\"1\">Eine \u003C/span>\u003Cspan class=\"discussion-id-1141a3d3-f11b-80ec-9276-001caffa066b notion-enable-hover\" data-token-index=\"2\">\u003Cstrong>klare visuelle Struktur\u003C/strong>\u003C/span>\u003Cspan class=\"discussion-id-1141a3d3-f11b-80ec-9276-001caffa066b notion-enable-hover\" data-token-index=\"3\"> ist entscheidend.\u003C/span> Das bedeutet, dass die Erfassbarkeit im Vordergrund steht – also eindeutige \u003Cspan class=\"notion-enable-hover\" data-token-index=\"5\">\u003Cstrong>Unterscheidung von Ebenen\u003C/strong>\u003C/span> und \u003Cspan class=\"notion-enable-hover\" data-token-index=\"7\">\u003Cstrong>Hierarchien\u003C/strong>\u003C/span>, ausreichend \u003Cspan class=\"notion-enable-hover\" data-token-index=\"9\">\u003Cstrong>Abstände\u003C/strong>\u003C/span> sowie \u003Cspan class=\"notion-enable-hover\" data-token-index=\"11\">\u003Cstrong>visuelle Hilfen\u003C/strong>\u003C/span> mit Bildern oder Icons.\u003C/p>\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"20e911f5-45e6-4fb1-bc80-b3b99603b2e4\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1072\" height=\"530\" alt=\"ein gut strukturiertes menü mit icons, überschriften, beschreibungen und reichend abständen\" src=\"/sites/default/files/2024-11/Bildschirmfoto_2024-09-10_um_14.03.52.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot https://webflow.com/ vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003Cp>Auch wenn Mega-Menüs viel Platz bieten, sollten sie kein Content-Parkplatz werden. \u003Cspan class=\"notion-enable-hover\" data-token-index=\"1\">\u003Cstrong>Weniger ist hier oft mehr\u003C/strong>\u003C/span>, um die Übersichtlichkeit zu wahren und die Nutzer nicht mit Informationen zu überfordern.\u003C/p>\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"8ec19526-2f38-44ea-8303-959cae9faa05\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1524\" height=\"718\" alt=\"ein zu volles mega menü ist nicht userfreundlich und kann überfordern\" src=\"/sites/default/files/2024-11/Bildschirmfoto_2024-09-10_um_14.03.09.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot https://www.bmw.at/de/ vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003Ch3>\u003Cstrong>Vertikale Menüs\u003C/strong>\u003C/h3>\u003Cp>Vertikale Menüs sind auf Websites zwar noch nicht allzu verbreitet, dafür aber in nativen Anwendungen bestens bekannt. In der Praxis erweisen sie sich als äußerst nützlich, da sie \u003Cstrong>unkompliziert erweiterbar\u003C/strong> sind, ohne die gesamte Struktur neu aufbauen zu müssen. Dadurch können viele spezifische Menüpunkte untergebracht werden. Nutzer:innen sparen sich so lange Suchen und finden schneller, was die Benutzerfreundlichkeit erheblich steigert. Zudem ist das Layout \u003Cstrong>leicht erfassbar\u003C/strong>, da vertikale Menüs bereits aus zahlreichen Desktop- und nativen Anwendungen vertraut sind.\u003C/p>\u003Cdiv class=\"grid-wrapper\">\u003Cdiv class=\"row ckeditor-grid grid-50-50\">\u003Cdiv class=\"ckeditor-grid-col grid-one col-xsmall-12 col-medium-6\">\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"333d4968-fe4e-4d30-a1ea-333af1878266\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"330\" height=\"418\" alt=\"Youtube verwendet ein vertikales Menü um viele Menüpunkte unterzubekommen\" src=\"/sites/default/files/2024-11/youtube_0.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot https://www.youtube.com/ vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003C/div>\u003Cdiv class=\"ckeditor-grid-col grid-two col-xsmall-12 col-medium-6\">\u003Cp> \u003C/p>\u003C/div>\u003C/div>\u003C/div>\u003Cp>Eyetracking-Studien zeigen, dass Nutzer ihren Blick auf Websites überwiegend nach links richten – rund \u003Cspan class=\"notion-enable-hover\" data-token-index=\"1\">\u003Cstrong>80 % der Zeit wird die linke Bildschirmhälfte betrachtet\u003C/strong>\u003C/span>. Dieser Bereich ist also besonders wertvoll. Ein Nachteil der vertikalen Navigation gegenüber der horizontalen ist, dass sie mehr Platz einnimmt und somit weniger Raum für den eigentlichen Content bleibt. \u003Cspan class=\"discussion-id-1141a3d3-f11b-80e1-a72c-001c67e86bcc notion-enable-hover\" data-token-index=\"3\">Außerdem sollte vermieden werden, \u003C/span>\u003Cspan class=\"discussion-id-1141a3d3-f11b-80e1-a72c-001c67e86bcc notion-enable-hover\" data-token-index=\"4\">\u003Cstrong>nur\u003C/strong>\u003C/span>\u003Cspan class=\"discussion-id-1141a3d3-f11b-80e1-a72c-001c67e86bcc notion-enable-hover\" data-token-index=\"5\"> mit Icons zu arbeiten um Platz zu sparen\u003C/span>, da dies den Navigationsprozess für User:innen erschwert, da sie sich länger mit dem “Entschlüsseln” der Icons aufhalten müssen und/oder diese falsch interpretieren könnten.\u003C/p>\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"7c0ca174-a316-4ea6-8f28-ee4a0ccf589e\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1918\" height=\"1000\" alt=\"Vertikale Menüs können wie praktische "Tool Boxes" dienen und ein schnelles hin und her navigieren ermöglichen\" src=\"/sites/default/files/2024-11/vertikal.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot https://m3.material.io/ vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003Ch3>\u003Cstrong>Drop Down Menüs\u003C/strong>\u003C/h3>\u003Cp>Dropdown Menüs bieten klare Vorteile, insbesondere \u003Cstrong>sparen sie Platz\u003C/strong> auf dem Bildschirm und sind den meisten Nutzern \u003Cstrong>vertraut\u003C/strong> – vorausgesetzt, sie sind gut umgesetzt.\u003C/p>\u003Cp>Dropdowns bieten generell \u003Cstrong>weniger\u003C/strong> \"Discoverability\" als sichtbare Menüs, weshalb wichtige Menüpunkte nicht darin versteckt werden sollten. Außerdem ist die richtige \u003Cstrong>Iconografie\u003C/strong> bei diesem interaktiven Element entscheidend: \u003Cstrong>Chevrons & Plus/Minus sollten klar anzeigen, ob ein Menü geöffnet oder geschlossen ist oder ob ein Link direkt klickbar ist.\u003C/strong> Die einzelnen Funktionalitäten sollten je Menüpunkt auch nicht vermischt werden: Sowohl Klick auf den jeweiligen Menüpunkt als auch auf das eingesetzte Icon muss die gleiche Funktion haben.\u003C/p>\u003Cdiv class=\"grid-wrapper\">\u003Cdiv class=\"row ckeditor-grid grid-50-50\">\u003Cdiv class=\"ckeditor-grid-col grid-one col-xsmall-12 col-medium-6\">\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"c8c7868f-831e-409d-93df-01b58898fd03\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1000\" height=\"2164\" alt=\"Ein Menü sollte interaktive Elemente eindeutig und durchgängig kennzeichnen.\" src=\"/sites/default/files/2024-11/macba.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot https://www.macba.cat/ca/ vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003C/div>\u003Cdiv class=\"ckeditor-grid-col grid-two col-xsmall-12 col-medium-6\">\u003Cp> \u003C/p>\u003C/div>\u003C/div>\u003C/div>\u003Cp>Bei Drop-Downs kann eine\u003Cstrong> farbliche Markierung\u003C/strong> für User:innen eine wertvolle Info zum “Hier bist du auf unserer Seite” darstellen.\u003C/p>\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"ad48857f-b16d-44d6-bfab-54f6c9a4ff31\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1442\" height=\"870\" alt=\"farbliche hervorhebung um den "standort" zu zeigen wirkt wunder\" src=\"/sites/default/files/2024-11/khm.png\">\n\u003C/div>\n\u003Cp>Bei Drop Downs stellt sich vor allem die Frage: \u003Cspan class=\"notion-enable-hover\" data-token-index=\"1\">\u003Cstrong>Wie viele Ebenen\u003C/strong>\u003C/span> soll ich meine User:innen eintauchen lassen?\u003C/p>\u003Cblockquote>\u003Cspan class=\"quote-text\" data-ftf=\"true\">Expert users typically don’t have massive usability issues with multiple nested accordions. (4-5 levels) However, infrequent users often struggle to find the information that they need because they don’t understand how the information is organized.\u003C/span>\u003Ccite class=\"author\">Smashing Magazine\u003C/cite>\u003C/blockquote>\u003Cp>Dazu sagt außerdem Nielsen: \u003Cspan class=\"discussion-id-1141a3d3-f11b-808f-b35f-001c1333b0a6 notion-enable-hover\" data-token-index=\"1\">Wenn Menüs zu tief verschachtelt sind und User:innen zwingen, mehrere Auswahlstufen zu durchlaufen, entsteht ein sogenanntes \u003C/span>\u003Cspan class=\"discussion-id-1141a3d3-f11b-808f-b35f-001c1333b0a6 notion-enable-hover\" data-token-index=\"2\">\u003Cstrong>\"Endlos-Navigationsmuster\"\u003C/strong>\u003C/span>\u003Cspan class=\"discussion-id-1141a3d3-f11b-808f-b35f-001c1333b0a6 notion-enable-hover\" data-token-index=\"3\">.\u003C/span> Dabei müssen immer wieder Kategorien und Unterkategorien ausgewählt werden, bevor man endlich zum gewünschten Inhalt gelangt. Besonders auf mobilen Geräten ist dieses Muster unbeliebt, da es Nutzer:innen dazu zwingt, \u003Cspan class=\"notion-enable-hover\" data-token-index=\"5\">\u003Cstrong>viele Entscheidungen zu treffen, ohne dabei hilfreiche Informationen zu sehen\u003C/strong>\u003C/span>. Das sorgt für Frust und mindert die Benutzerfreundlichkeit erheblich. Daher: Weniger (Ebenen) ist sehr oft mehr (Greatness)!\u003C/p>\u003Ch3>Slide In Menüs\u003C/h3>\u003Cp>Auf mobilen Geräten werden Slide In Menüs oft als Alternative zu Dropdowns genutzt, da sie den Vorteil bieten, immer \u003Cstrong>nur eine Ebene\u003C/strong> anzuzeigen. Das hilft zwar dabei, viele Menüpunkte unterzubringen, kann jedoch den Entscheidungsprozess verlangsamen. Hier seht ihr zwei Beispiele für Slide in Menus die weniger gut (links) und besser (rechts) gelöst sind. Relevant sind nämlich die eindeutige Darstellung der Hierachien und der “beschilderter” Weg nach vorne und auch wieder zurück. Ein \u003Cstrong>generisches “Go Back”\u003C/strong> ist nicht ausreichend genug, um User:innen im Slide In bei der Hand zu nehmen.\u003C/p>\u003Cdiv class=\"grid-wrapper\">\u003Cdiv class=\"row ckeditor-grid grid-50-50\">\u003Cdiv class=\"ckeditor-grid-col grid-one col-xsmall-12 col-medium-6\">\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"8720a7e4-a5a2-44c0-8e4f-46c9e0b8689c\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1170\" height=\"2532\" alt=\"ein schlecht strukturierstes slide in menu\" src=\"/sites/default/files/2024-11/unioflondon.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot  https://www.london.ac.uk/ vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003C/div>\u003Cdiv class=\"ckeditor-grid-col grid-two col-xsmall-12 col-medium-6\">\u003Cfigure role=\"group\" class=\" wp-block-image size-large is-resized\">\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"14eacba0-e5f1-4297-9cab-27dec2ba6691\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cimg width=\"1170\" height=\"2532\" alt=\"ein gut strukturiertes slide in menü\" src=\"/sites/default/files/2024-11/IMG_8542.png\">\n\u003C/div>\n\n\u003Cfigcaption>Screenshot https://www.on.com vom 28.09.2024\u003C/figcaption>\n\u003C/figure>\n\u003C/div>\u003C/div>\u003C/div>\u003Ch3>\u003Cstrong>Zusammenfassung\u003C/strong>\u003C/h3>\u003Cp>Wenn ihr 4 Dinge von diesem Blogbeitrag mitnehmt, dann sind das hoffentlich die Folgenden:\u003C/p>\u003Cul>\u003Cli>Content makes or breaks the menu.\u003C/li>\u003Cli>Get rid of the Hamburger (on Desktop).\u003C/li>\u003Cli>Don’t get too creative with the menu, safety first.\u003C/li>\u003Cli>When in doubt test it out (double safety).\u003C/li>\u003C/ul>\u003Cp>Und zum Schluss: Ein Menü sollte nie die Abbildung einer gesamten Website sein oder ein kreatives Experiment sondern viel mehr ein wichtiges Werkzeug für User:innen um ans Ziel ihrer Journey zu kommen.\u003C/p>\u003Cp>💡 \u003Cstrong>Dont make users work for it, make it work for them.\u003C/strong>\u003C/p>\u003Cp> \u003C/p>\u003Ch3>\u003Cstrong>Nachhilfe gefällig?\u003C/strong>\u003C/h3>\u003Cp>Du fühlst dich bei der Auswahl und Gestaltung des richtigen Menüs noch unsicher? Du bist immer noch nicht sicher, ob dein Menü ein Drop Down oder ein Slide In werden soll? Bei unserem hauseigenen \u003Ca href=\"https://liechtenecker.at/ui-design-training\">UI Design Training\u003C/a> geben wir dir praktische Tipps und noch mehr Know How rund um User Experience Design. Wir freuen uns darauf, dir helfen zu dürfen!\u003C/p>\u003C/div>\u003C/div>\u003C/div>","",{"__typename":147,"id":148,"excludeFromScreenreader":20,"mediaImage":149,"name":157,"path":158,"status":20},"MediaImage","3049",{"__typename":150,"url":151,"width":152,"height":153,"alt":154,"title":13,"size":155,"mime":156},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2024-11/BLOG_UXSnacksVol08_TITEL-2880x1300px_0.jpg",2880,1300,"titelbild",3873456,"image/jpeg","BLOG_UXSnacksVol08_TITEL-2880x1300px.jpg","/media/3049/edit",{"__typename":147,"id":160,"excludeFromScreenreader":13,"mediaImage":161,"name":167,"path":168,"status":20},"3074",{"__typename":150,"url":162,"width":163,"height":164,"alt":165,"title":13,"size":166,"mime":156},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2024-12/BLOG_MENU%CC%88%20UX_SHARING-1204x630px.jpg",1204,630,"Menü-UX in der Praxis",757430,"BLOG_MENÜ UX_SHARING-1204x630px.jpg","/media/3074/edit",{"__typename":147,"id":148,"excludeFromScreenreader":20,"mediaImage":149,"name":157,"path":158,"status":20},"Das aufregende an Menüs? Dass sie nicht aufregend sein sollen. Wir geben euch einen Einblick in die DOs und DON’Ts für userfreundliche Menüs in der Praxis. ",{"__typename":172,"id":173,"myRole":174,"name":175,"nickname":176},"User","19","Account Managerin","nina-filip","Nina Filip",{"latestKnowhow":178},[179,192,205],{"__typename":79,"id":180,"title":181,"path":182,"wpTeaserText":183,"wpPromotedTeaserImage":13,"wpHeaderImage":184},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":147,"id":185,"excludeFromScreenreader":13,"mediaImage":186,"name":190,"path":191,"status":20},"3364",{"__typename":150,"url":187,"width":152,"height":153,"alt":188,"title":13,"size":189,"mime":156},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg","Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":193,"title":194,"path":195,"wpTeaserText":196,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":147,"id":198,"excludeFromScreenreader":13,"mediaImage":199,"name":203,"path":204,"status":20},"3355",{"__typename":150,"url":200,"width":152,"height":153,"alt":201,"title":13,"size":202,"mime":156},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":206,"title":207,"path":208,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":209},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":147,"id":210,"excludeFromScreenreader":21,"mediaImage":211,"name":215,"path":216,"status":20},"3303",{"__typename":150,"url":212,"width":152,"height":153,"alt":213,"title":13,"size":214,"mime":156},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":218,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":219,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":223,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":226,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":229,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":232,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":235,"Menu:nuxt-main-menu":238,"ROOT_QUERY":252,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":268,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":271,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":274,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":277,"Menu:footer":280,"TermCategories:8":290,"MediaImage:3049":301,"MediaImage:3074":303,"User:19":305,"NodeWpPost:1540":306,"MediaImage:3364":329,"NodeWpPost:1619":331,"MediaImage:3355":334,"NodeWpPost:1616":336,"MediaImage:3303":339,"NodeWpPost:1606":341},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",220,"internal",20,"expanded",21,"attributes",222],{"__ref":221},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",224,"internal",20,"expanded",21,"attributes",225],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",227,"internal",20,"expanded",21,"attributes",228],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",230,"internal",20,"expanded",21,"attributes",231],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",233,"internal",20,"expanded",21,"attributes",234],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",236,"internal",20,"expanded",21,"attributes",237],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",239],[240,242,244,246,248,250],{"__ref":241},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":243},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":245},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":247},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":249},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":251},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",253,"menu({\"name\":\"NUXT_MAIN_MENU\"})",254,"menu({\"name\":\"FOOTER\"})",256,"route({\"path\":\"/blog/wer-navigiert-verliert-nicht-die-besten-tipps-fuer-menue-ux-der-praxis\"})",258,"latestKnowhow({\"excludeId\":\"1540\",\"limit\":3})",261],"Query",{"__ref":255},"Menu:nuxt-main-menu",{"__ref":257},"Menu:footer",["null","__typename",77,"entity",259],{"__ref":260},"NodeWpPost:1540",[262,264,266],{"__ref":263},"NodeWpPost:1619",{"__ref":265},"NodeWpPost:1616",{"__ref":267},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",269,"internal",20,"expanded",21,"attributes",270],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",272,"internal",20,"expanded",21,"attributes",273],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",275,"internal",20,"expanded",21,"attributes",276],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",278,"internal",21,"expanded",21,"attributes",279],{"__ref":221},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",281],[282,284,286,288],{"__ref":283},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":285},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":287},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":289},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",118,"id",119,"name",120,"path",121,"status",20,"weight",122,"description",291,"langcode",292,"changed",293,"metatag",294],["null","__typename",124,"processed",125,"format",126],{"__ref":221},["null","__typename",83,"timestamp",129,"timezone",85,"offset",86,"time",130],[295,297,299],["null","__typename",95,"tag",96,"attributes",296],["null","__typename",98,"name",99,"content",134],["null","__typename",95,"tag",96,"attributes",298],["null","__typename",98,"name",137,"content",138],["null","__typename",102,"tag",103,"attributes",300],["null","__typename",105,"href",141,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",147,"id",148,"excludeFromScreenreader",20,"mediaImage",302,"name",157,"path",158,"status",20],["null","__typename",150,"url",151,"width",152,"height",153,"alt",154,"title",13,"size",155,"mime",156],["null","__typename",147,"id",160,"excludeFromScreenreader",13,"mediaImage",304,"name",167,"path",168,"status",20],["null","__typename",150,"url",162,"width",163,"height",164,"alt",165,"title",13,"size",166,"mime",156],["null","__typename",172,"id",173,"myRole",174,"name",175,"nickname",176],["null","__typename",79,"id",80,"title",81,"changed",307,"created",308,"langcode",309,"path",92,"promote",21,"status",20,"sticky",21,"metatag",310,"category",319,"contentElements",13,"evergreen",13,"tags",13,"wpBody",321,"wpHeaderImage",322,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",324,"wpPromotedTeaserImage",326,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",170,"wpYoastHead",13,"author",327],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":221},[311,313,315,317],["null","__typename",95,"tag",96,"attributes",312],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",314],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",316],["null","__typename",111,"property",112,"content",81],["null","__typename",109,"tag",96,"attributes",318],["null","__typename",111,"property",115,"content",116],{"__ref":320},"TermCategories:8",["null","__typename",143,"processed",144,"format",126,"summary",145],{"__ref":323},"MediaImage:3049",{"__ref":325},"MediaImage:3074",{"__ref":323},{"__ref":328},"User:19",["null","__typename",147,"id",185,"excludeFromScreenreader",13,"mediaImage",330,"name",190,"path",191,"status",20],["null","__typename",150,"url",187,"width",152,"height",153,"alt",188,"title",13,"size",189,"mime",156],["null","__typename",79,"id",180,"title",181,"path",182,"wpTeaserText",183,"wpPromotedTeaserImage",13,"wpHeaderImage",332],{"__ref":333},"MediaImage:3364",["null","__typename",147,"id",198,"excludeFromScreenreader",13,"mediaImage",335,"name",203,"path",204,"status",20],["null","__typename",150,"url",200,"width",152,"height",153,"alt",201,"title",13,"size",202,"mime",156],["null","__typename",79,"id",193,"title",194,"path",195,"wpTeaserText",196,"wpPromotedTeaserImage",13,"wpHeaderImage",337],{"__ref":338},"MediaImage:3355",["null","__typename",147,"id",210,"excludeFromScreenreader",21,"mediaImage",340,"name",215,"path",216,"status",20],["null","__typename",150,"url",212,"width",152,"height",153,"alt",213,"title",13,"size",214,"mime",156],["null","__typename",79,"id",206,"title",207,"path",208,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",342],{"__ref":343},"MediaImage:3303"]