{"id":11760,"date":"2021-03-19T00:00:00","date_gmt":"2021-03-18T23:00:00","guid":{"rendered":"http:\/\/marketing.ch\/uncategorized\/dein-verstaendlicher-guide-fuer-die-5-elemente-der-user-experience\/"},"modified":"2023-07-26T14:41:49","modified_gmt":"2023-07-26T12:41:49","slug":"dein-verstaendlicher-guide-fuer-die-5-elemente-der-user-experience","status":"publish","type":"post","link":"https:\/\/marketing.ch\/digital-marketing\/dein-verstaendlicher-guide-fuer-die-5-elemente-der-user-experience\/","title":{"rendered":"Dein verst\u00e4ndlicher Guide f\u00fcr die 5 Elemente der User Experience"},"content":{"rendered":"\n<p><strong>Das Erstellen einer Webseite ist kein leichtes. Und nur, weil die Page super sch\u00f6n aussieht, heisst das leider noch lange nicht, dass sie auch nutzerfreundlich oder praktisch ist. Mit den f\u00fcnf Elementen der User Experience soll sichergestellt werden, dass deine neue Webseite einem Konzept folgt und erfolgreich aufgesetzt werden kann.<\/strong><\/p>\n\n\n\n<p>Dass es eben doch die inneren Werte sind, die z\u00e4hlen, zeigen uns einige Webseiten immer wieder wunderbar auf. Sch\u00f6ne Bilder, eine abgestimmte Farbpalette und tolle Schriftarten \u2013 aber die Usability wurde nicht ber\u00fccksichtigt und nur schon zur n\u00e4chsten Subpage zu gelangen gestaltet sich als R\u00e4tsel.<\/p>\n\n\n\n<p>Jesse James Garrett&nbsp;hat im Jahr 2002 daher sein Handbuch \u201e<a href=\"https:\/\/www.amazon.com\/gp\/product\/0321683684\" target=\"_blank\" rel=\"noreferrer noopener\">The Elements of User Experience<\/a>\u201c ver\u00f6ffentlicht. In dem Buch zeigt er Unternehmen auf, wie sie ihre Webseite aufbauen sollen, damit diese zum Erfolg wird. Garrett st\u00fctzt seine Ausf\u00fchrungen auf sein Modell, welches f\u00fcnf Ebenen umfasst, die aufeinander aufbauen. Die Ebenen sind Strategie, Umfang, Struktur, Skelett und Oberfl\u00e4che.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/marketing.ch\/wp-content\/uploads\/2023\/01\/5-ebenen-des-ux-desings-nach-garret.png\" alt=\"Die Elemente der User Experience von Jesse James Garrett werden in dieser Visualisierung mit 5 Ebenen aufgezeigt. \" class=\"wp-image-30319\" title=\"\"><figcaption class=\"wp-element-caption\">Bildquelle: medium.com<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ebene-1-strategie-strategy\">Ebene #1: Strategie (Strategy)<\/h2>\n\n\n\n<p>Bevor du \u00fcberhaupt erst an die Erstellung der Webseite denkst, muss dir und dem Unternehmen klar sein, wof\u00fcr ihr die Webseite braucht. Es muss ermittelt werden, was die Ziele des Unternehmens und auch der k\u00fcnftigen User sind. In diesem Schritt m\u00fcssen zudem die Zielgruppen klar definiert werden, beispielsweise mittels Personas, sodass ihr wisst, f\u00fcr wen ihr die Webseite aufbaut.<\/p>\n\n\n\n<p>Einige Fragen, die in der Strategiephase beantworten werden sollen, sind:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Warum braucht es die Webseite?<\/li>\n\n\n\n<li>Was ist der Nutzen der Webseite f\u00fcr das Unternehmen?<\/li>\n\n\n\n<li>Was ist der Nutzen f\u00fcr die Kunden?<\/li>\n\n\n\n<li>Wieso sollten User die Webseite nutzen?<\/li>\n\n\n\n<li>Wie sehen die Webseiten der Konkurrenz aus?<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ebene-2-umfang-scope\">Ebene #2: Umfang (Scope)<\/h2>\n\n\n\n<p>In einem zweiten Schritt wird der funktionale und inhaltliche Umfang des Produkts festgelegt. Was also soll in der Webseite vorhanden sein, welche Funktionen und welche Inhalte braucht es f\u00fcr das Unternehmen und die Kunden?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-funktionale-anforderungen\">Funktionale Anforderungen<\/h3>\n\n\n\n<p>Hier geht es um die Anforderungen an die Funktionen \u2013 wie m\u00fcssen diese technisch funktionieren, so dass der User das erreicht, was er m\u00f6chte. Es wird festgelegt, welche Features und Funktionen es auf der Webseite geben wird.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-inhaltliche-anforderungen\">Inhaltliche Anforderungen<\/h3>\n\n\n\n<p>Hier geht es hingegen darum, ob wir Texte, Bilder, Videos oder Sounds nutzen, um den Features und Funktionen ihren Wert zu liefern. Der Content selbst (was genau steht oder welches Bild genutzt wird) wird in dieser Phase noch nicht bestimmt.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ebene-3-struktur-structure\">Ebene #3: Struktur (Structure)<\/h2>\n\n\n\n<p>Bei der Struktur geht es darum zu definieren, wie User mit der Webseite interagieren, wie die Webseite organisiert ist, was priorisiert wird \u2013 grunds\u00e4tzlich wie ein User sich auf der Webseite navigieren kann. Die Ebene der Struktur wird in zwei Bereiche aufgeteilt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interaktionsdesign\">Interaktionsdesign<\/h3>\n\n\n\n<p>Wie interagiert der User mit der Webseite und was passiert bei seinen Handlungen? Das Interaktionsdesign st\u00fctzt sich stark auf die funktionalen Anforderungen aus der zweiten Ebene. Das Interaktionsdesign soll so aufgesetzt werden, dass der User unterst\u00fctzt wird in der Nutzung der Webseite. Auch sollte der User Feedback erhalten, wenn er beispielsweise einen Download von der Webseite erfolgreich abgeschlossen hat, oder es tauchen Fehlermeldungen auf, bevor der User etwas l\u00f6scht (beispielsweise aus seinem Warenkorb).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-informationsarchitektur\">Informationsarchitektur<\/h3>\n\n\n\n<p>Die Informationsarchitektur st\u00fctzt sich wiederum auf die inhaltlichen Anforderungen der zweiten Ebene. Es wird die Anordnung der Inhaltselemente definiert. Unternehmen m\u00fcssen sich \u00fcberlegen, welche Inhalte f\u00fcr die User relevant sind, damit diese gut ersichtlich platziert werden. Die User sollen die Inhalte verstehen und auch, wie sie sich durch diese navigieren k\u00f6nnen. Eine gute Informationsarchitektur l\u00e4sst sich adaptieren und ver\u00e4ndern, sodass die Webseite zusammen mit dem Unternehmen wachsen kann.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ebene-4-skelett-skeleton\">Ebene #4: Skelett (Skeleton)<\/h2>\n\n\n\n<p>Nun werden wir schon um einiges konkreter. Das Skelett legt das Layout der Webseite fest. Wo werden die verschiedenen Inhalte platziert und angeordnet, damit die <a href=\"https:\/\/marketing.ch\/google-page-experience-update-startet-im-mai-2021-nutzerfreundlichkeit-wird-ein-rankingfaktor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nutzerfreundlichkeit <\/a>gegeben ist und die User sich zurecht finden. Es werden Wireframes genutzt, um die Webseite zu visualisieren. Die Anordnung der verschiedenen Elemente wird in dieser Ebene also definiert, aber das Aussehen (Schriftart, Farben, etc.) wird noch aussenvorgelassen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ebene-5-oberfl-che-surface\">Ebene #5: Oberfl\u00e4che (Surface)<\/h2>\n\n\n\n<p>Erst bei der obersten Ebene reden wir \u00fcber die visuellen Aspekte der Webseite. Nun entscheidest du und dein Unternehmen, welche Farbpaletten genutzt werden, wie die Schrift aussieht oder welches Layout die Textbl\u00f6cke haben. Es geht darum, dass die Webseite schlussendlich auch ansprechend aussieht. Dabei sollte das CI\/CD des Unternehmens ber\u00fccksichtigt werden und auch Punkte wie Leserlichkeit und \u00dcbersicht d\u00fcrfen nicht in Vergessenheit geraten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-wieso-braucht-es-diese-schritte\">Wieso braucht es diese Schritte?<\/h2>\n\n\n\n<p>Eine Webseite aufzubauen ist kein einfacher Prozess. Es geht um viel mehr, als nur eine \u00e4sthetische Homepage zu bieten, die den Usern gef\u00e4llt. Die Nutzer m\u00fcssen n\u00e4mlich auch zurecht kommen mit der Navigation und das finden, wonach sie suchen. Das Modell von Garrett beginnt nicht nur darum ganz am Anfang bei der Definition der Zielgruppen und der Frage \u00abWieso brauche ich diese Webseite \u00fcberhaupt?\u00bb<\/p>\n\n\n\n<p>Setzt man sich mit den verschiedenen Schritten auseinander, so wird schnell klar, dass sie aufeinander aufbauen. Es soll und kann also kein Schritt einfach \u00fcbersprungen werden, denn ansonsten fehlen elementare \u00dcberlegungen und Entscheidungen, die f\u00fcr das Erstellen einer Webseite notwendig sind. Mit den f\u00fcnf Elementen der User Experience wird also abgesichert, dass die Webseite nach einem Konzept aufgebaut ist, welches gut durchdacht ist.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Erstellen einer Webseite ist kein leichtes. Und nur, weil die Page super sch\u00f6n aussieht, heisst das leider noch lange nicht, dass sie auch nutzerfreundlich oder praktisch ist. Mit den f\u00fcnf Elementen der User Experience soll sichergestellt werden, dass deine neue Webseite einem Konzept folgt und erfolgreich aufgesetzt werden kann. Dass es eben doch die [&hellip;]<\/p>\n","protected":false},"author":38,"featured_media":11763,"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-11760","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\/11760","targetHints":{"allow":["GET"]}}],"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\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/comments?post=11760"}],"version-history":[{"count":2,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/11760\/revisions"}],"predecessor-version":[{"id":18936,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/11760\/revisions\/18936"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/media\/11763"}],"wp:attachment":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/media?parent=11760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/categories?post=11760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/tags?post=11760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}