{"id":82401,"date":"2020-03-06T21:23:12","date_gmt":"2020-03-06T20:23:12","guid":{"rendered":"https:\/\/waltersblog.ch\/2020\/03\/06\/5-elemente-ux-design\/"},"modified":"2020-03-06T21:23:12","modified_gmt":"2020-03-06T20:23:12","slug":"5-elemente-ux-design","status":"publish","type":"post","link":"https:\/\/walterlernt.ch\/blog\/5-elemente-ux-design\/","title":{"rendered":"Grafikdesign ist 1\/5 einer guten Website"},"content":{"rendered":"\n

Sch\u00f6ne, aber nutzlose Websites<\/h2>\n\n\n\n

Die meisten Websites bewirken nichts. Es gibt tausende Websites, die h\u00e4sslich sind und nichts bewirken. Es gibt auch tausende \u00e4sthetische Wunderwerke, die ebenfalls emotionslos im Internet sitzen und auf den Erfolg warten.<\/p>\n\n\n\n

Dann gibt es aber auch Websites, die man aus grafischer Sicht gr\u00fcndlich kritisieren k\u00f6nnte, die erstaunlich erfolgreich sind. Warum das?<\/p>\n\n\n\n

Das grafische Design ist nur 1\/5 der Website<\/h2>\n\n\n\n

Man k\u00f6nnte sich fragen: Spielt die grafische Rolle denn nicht die wichtigste Rolle beim Erfolg einer Website? Oder spielt sie sogar gar keine Rolle?<\/p>\n\n\n\n

Doch, sie spielt eine Rolle: N\u00e4mlich einen F\u00fcnftel des ganzen, einfach gesagt. Wir schauen hier 5 wichtige Ebenen an, die beim Bau einer guten Website ber\u00fccksichtigt werden. Grafikdesign ist die f\u00fcnfte dieser Ebenen.<\/p>\n\n\n\n

Die anderen Ebenen helfen uns dabei, dass die Website nicht nur sch\u00f6n ist, sondern auch die richtigen Inhalte und Funktionen am richtigen Ort hat. Das Gesamtpaket macht den Erfolg aus.<\/p>\n\n\n\n

Die 5 Elemente von User Experience Design<\/h2>\n\n\n\n

Das Buch The Elements of User Experience: User-Centered Design for the Web and Beyond<\/a> von Jesse James Garrett hat das Web ziemlich gepr\u00e4gt. Sein Modell mit den 5 Ebenen wird oft in der Planung von Websites eingesetzt. Die Planung bekommt eine Struktur und auch das Projekt l\u00e4uft viel strukturiertes ab, als wenn man einfach mal konzeptlos beginnt.<\/p>\n\n\n\n

Hier m\u00f6chte ich das Konzept vorstellen.<\/p>\n\n\n\n

\"\"
The Five Elements of UX<\/figcaption><\/figure>\n\n\n\n

Es gibt f\u00fcnf voneinander abh\u00e4ngige Ebenen. Jede Ebene baut auf der Ebene davor auf. Es beginnt abstrakt und geht Richtung konkret: Von unten nach oben. Beginnen wir mit der ersten Ebene, der Strategie-Ebene.<\/p>\n\n\n\n

Ebene 1: Strategy (Strategie)<\/h2>\n\n\n\n
\"Strategie<\/figure>\n\n\n\n

Warum gibt es die Firma \u00fcberhaupt? Warum gibt es die Website? F\u00fcr wen ist die Website da? <\/p>\n\n\n\n

Warum sollte unsere Zielgruppe bereit sein, die Website zu verwenden?<\/p>\n\n\n\n

Das Ziel ist hier, die Bed\u00fcrfnisse der Benutzer und die Ziele der Firma und der Website zu definieren.<\/p>\n\n\n\n

In der Praxis wird dies viel zu oft weg gelassen. Es ist erstaunlich wie viele Auftraggeber nicht sofort sagen k\u00f6nnen, wof\u00fcr sie \u00fcberhaupt eine Website haben\/wollen.<\/p>\n\n\n\n

Unser Content Strategy Kurs<\/a> befasst sich mit genau dieser Ebene, der Strategie-Ebene.<\/p>\n\n\n\n

Erst wenn wir dies kennen, k\u00f6nnen wir zur n\u00e4chsten Ebene weiter gehen.<\/p>\n\n\n\n

Ebene 2: Scope (Umfang)<\/h2>\n\n\n\n
\"Umfang:<\/figure>\n\n\n\n

Was soll die Website alles enthalten? Welche Funktionen, welche Inhalte \u2013 und in welcher Form?<\/p>\n\n\n\n

Hier definieren wir die funktionalen und inhaltlichen Anforderungen. Die Anforderungen sollten die strategischen Ziele aus der ersten Ebene erf\u00fcllen und darauf abgestimmt sein.<\/p>\n\n\n\n

Deshalb ist es enorm wichtig, dass die erste Ebene schon vor dieser Ebene in der Planung ber\u00fccksichtigt wurde.<\/p>\n\n\n\n

Funktionale Anforderungen<\/h3>\n\n\n\n

Dies sind die Anforderungen an die Funktionen oder Features der Website. Diese Funktionen sind es, die der Benutzer ben\u00f6tigt, um die Ziele zu erreichen.<\/p>\n\n\n\n

Inhaltliche Anforderungen<\/h3>\n\n\n\n

Dies sind die Informationen, die wir ben\u00f6tigen, um den Wert zu liefern. Informationen in Form von verschiedenen Medien wir Text, Bilder, Audio, Videos und Social Media. <\/p>\n\n\n\n

Auch diese Ebene decken wir im Kurs Content Strategy<\/a> ab.<\/p>\n\n\n\n

Ebene 3: Structure (Struktur)<\/h2>\n\n\n\n
\"Website-Struktur\"<\/figure>\n\n\n\n

Hier definieren wir die Interaktionen der Benutzer mit der Website und wie sie organisiert und priorisiert werden. Die Struktur ist in zwei Komponenten aufgeteilt, Interaktionsdesign und Informationsarchitektur. <\/p>\n\n\n\n

Interaction Design (Interaktionsdesign)<\/h3>\n\n\n\n

Anhand der funktionalen Anforderungen wird definiert, wie der Benutzer mit der Website interagieren kann und was dann passiert.<\/p>\n\n\n\n

Information Architecture (Informationsarchitektur)<\/h3>\n\n\n\n

Aufgrund der inhaltlichen Anforderungen definiert wir hier die Anordnung der Inhaltselemente, wie sie organisiert sind, um das Verst\u00e4ndnis der Benutzer zu erleichtern. <\/p>\n\n\n\n

Ich sehe diese Ebene als die “Flowchart-Ebene”. Es geht noch nicht um die Anordnung (4. Ebene) oder das Aussehen (5. Ebene), sondern erst, was womit in welchem Zusammenhang steht und welche Abl\u00e4ufe und Navigationswege enthalten sein m\u00fcssen.<\/p>\n\n\n\n

Ebene 4: Skeleton (Skelett)<\/h2>\n\n\n\n
\"Website<\/figure>\n\n\n\n

Hier geht es um Wireframes. Was wird wo sein?<\/p>\n\n\n\n

Das Skelett bestimmt die visuelle Form auf dem Bildschirm, die Anordnung aller Content-Elemente, damit sie klar und offensichtlich sind. Und die Art und Weise, wie sich die Benutzerin durch die Informationen bewegt.<\/p>\n\n\n\n

Hier nutzen wir sogenannte Wireframes, um ein visuelles Format zu erstellen, also Diagramme, die ein visuelles Format der Website darstellen, inklusive Inhalt und Navigation.<\/p>\n\n\n\n

Die Anordnung der Inhalte und Funktionen, aber noch ohne das “sch\u00f6ne Design”, das in der n\u00e4chsten Ebene kommt. Wir wollen definieren, wie der Aufbau der Website sein wird.<\/p>\n\n\n\n

Die Werkzeuge, die du f\u00fcr diese Ebene brauchst: Kugelschreiber und Papier.<\/p>\n\n\n\n

Ebene 5: Surface (Screendesign)<\/h2>\n\n\n\n
\"Website-Design\"<\/figure>\n\n\n\n

In der Ebene 5 beginnt unsere Website wie eine Website auszusehen. Aus den Wireframes gestalten wir eine Website. So wissen wir schon im voraus, dass alles am richtigen Platz sein wird.<\/p>\n\n\n\n

Es muss aber noch \u00e4sthetisch gut aussehen… Warum? Die Besucherinnen und Besucher sollen wissen, dass sie richtig (oder falsch) sind. Ebenfalls sollte der Content gut lesbar sein und verst\u00e4ndlich sein. Und auch glaubw\u00fcrdig. Und dann noch visuell passend zur Firma und zur Zielgruppe. Und, und, und… Ja, Grafikdesign spielt hier zweifellos die grosse Rolle \u2013 und die Herausforderung ist enorm, auch diese Ebene zu knacken.<\/p>\n\n\n\n

Schlussfolgerung<\/h2>\n\n\n\n

Viele Website-Bauer beginnen direkt in der 5. Ebene, die f\u00fcr die grafische Gestaltung verantwortlich ist. Alles andere wird gnadenlos \u00fcbersprungen.<\/p>\n\n\n\n

Du kennst sie auch, die wundersch\u00f6nen Websites, die einfach im Internet vor sich hin strahlen, aber nichts bewirken! Sie werden weder gefunden, noch sprechen sie die Zielgruppe in irgendeiner Form an. Der Funke springt nicht. Nutzlose Sch\u00f6nheit.<\/p>\n\n\n\n

Wenn wir mit dieser Struktur unsere Website planen, dann steigern wir die Erfolgschancen enorm. Das ganze hat Hand und Fuss.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"

5 Elemente von UX Design: Mit diesen 5 Ebenen wird deine Website nicht nur sch\u00f6n, sondern auch Erfolg zeigen bei deiner Zielgruppe.<\/p>\n","protected":false},"author":1,"featured_media":83237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264,266,267,263],"tags":[],"class_list":["post-82401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-kreativitaet","category-strategie-business","category-texte-kommunikation","category-wordpress-webdesign"],"_links":{"self":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/82401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/comments?post=82401"}],"version-history":[{"count":0,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/82401\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/media\/83237"}],"wp:attachment":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/media?parent=82401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/categories?post=82401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/tags?post=82401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}