{"id":229,"date":"2017-07-06T23:17:54","date_gmt":"2017-07-06T21:17:54","guid":{"rendered":"https:\/\/quantenfrosch.at\/blog\/?p=229"},"modified":"2018-12-15T17:33:17","modified_gmt":"2018-12-15T16:33:17","slug":"psychologische-aspekte-im-webdesign","status":"publish","type":"post","link":"https:\/\/quantenfrosch.at\/blog\/psychologische-aspekte-im-webdesign\/","title":{"rendered":"Psychologische Aspekte im Webdesign"},"content":{"rendered":"

Der Kampf um Webseitenbesucher spitzt sich von Tag zu Tag zu. Von einer Nachrichtenagentur, einem wirtschaftlichen Portal \u00fcber einen Onlineshop bis hin zu einer Beautybloggerin \u2013 in allen Bereichen versucht man aktiv unsere Aufmerksamkeit im Internet zu gewinnen. Denn hohe Besucheraktivit\u00e4t f\u00fchrt letzten Endes zum Profit. Vor diesem Hintergrund hat ein Webdesigner keinen Raum f\u00fcr Fehler oder erfolglose Versuche. Denn es ist eine wichtige Aufgabe zu l\u00f6sen: nicht nur ein visuell attraktives Produkt, sondern auch ein ausgekl\u00fcgeltes Marketinginstrument zu kreieren, das beim Geldverdienen ma\u00dfgeblich mitwirken w\u00fcrde.<\/p>\n

Geht es um Verkaufsseiten, ist es l\u00e4ngst kein Geheimnis mehr, dass hohe Konversionsraten dem ansprechenden Webseitendesign zum Teil zu verdanken sind. Die Gestaltung ist von gro\u00dfer Bedeutung auf jeder Stufe des Kundenverhaltens, das Aufmerksamkeit, Interesse, Wunsch und Handeln umfasst (AIDA-Marketingmodell). Wie stark ist diese Korrelation? Bisher gibt es keine Marktforschungen, die die Rolle des Designs f\u00fcr verschiedene Webseitentypen in Prozentzahlen genau ausgedr\u00fcckt h\u00e4tten. Der Anteil des Erfolges, der auf gute Gestaltung f\u00e4llt, sowie entgangener Gewinn wegen eventueller Fehler m\u00f6gen doch wesentlich sein.<\/p>\n

Als Kriterium f\u00fcr gutes Webdesign wird heutzutage die Benutzerfreundlichkeit in den Fokus gestellt. Doch die optische Attraktivit\u00e4t ist immer noch nicht minder wichtig, weil eine unangenehm wirkende Webseite vom Besucher innerhalb einer Sekunde ohne weiteres verlassen werden kann. Einen hochwertigen Internetauftritt umzusetzen, der beides verbinden w\u00fcrde, ist durchaus unm\u00f6glich, ohne in Gesetze der menschlichen Wahrnehmung tiefer eingetaucht zu haben. Denn jedes Designelement sowie die ganze Komposition l\u00f6sen beim Betrachter einen visuellen Reiz aus, der sich zu bestimmten Reaktionen verwandelt. Und die k\u00f6nnen den gesetzten Zielen sowohl dienen als auch schaden.<\/p>\n

Obwohl von jeder Person die Information individuell aufgefasst wird, gibt es allgemeine Regeln der visuellen Wahrnehmung, die auf Grunds\u00e4tzen der menschlichen Psychologie, Funktionieren des Bewussten und Unbewussten beruhen und f\u00fcr alle Menschen mehr oder weniger gelten. Ein Webdesigner hat in seinem Arsenal starke Instrumente daf\u00fcr, um Aufmerksamkeit, Gef\u00fchle und Vorstellungsverm\u00f6gen der Besucher gezielt zu beeinflussen. Wollen wir diese gut bekannten Mittel – Farbe, Form, typografische Gestaltung und Abbildungen – aus psychologischer Sicht betrachten.<\/p>\n

Farben<\/h3>\n

Farben geben im Webdesign meistens den Ton an und z\u00e4hlen zu den wirksamsten Mitteln, die eine Botschaft an eine Zielgruppe liefern k\u00f6nnen. Jede Farbe wird mit bekannten Tatsachen, Ereignissen, Erscheinungen oder Gegenst\u00e4nden assoziiert. Als wichtigste Emotionsquelle lassen Farben Eindr\u00fccke erwecken, in bessere Stimmung versetzen oder Entscheidungen treffen. Dabei ist der Mensch davon unbewusst. Bevor ein Besucher den Text sieht und durchliest, pr\u00e4gt sich das Farbschema einer Webseite schon auf der unbewussten Ebene ein. Wie Ihre Webseite bzw. Ihr Produkt wahrgenommen wird, h\u00e4ngt weitgehend von eingesetzten Farben ab.<\/p>\n

Nach ihrer Wirkung werden Spektralfarben in zwei Gruppen aufgeteilt \u2013 aufregende (rot, orange und gelb) und beruhigende (gr\u00fcn, blau, violett). Ged\u00e4mpfte F\u00e4rbungen wirken entspannend, Kontraste mit grellen Farben stimulieren und muntern auf. Abh\u00e4ngig von der Intensit\u00e4t, Helligkeit und Kontrast k\u00f6nnen Farben vergr\u00f6\u00dfern, vertiefen, entfernen oder n\u00e4her bringen. Das erm\u00f6glicht die Aufmerksamkeit des Betrachters zu gewinnen und in gew\u00fcnschte Richtung gezielt zu lenken.<\/p>\n

Verallgemeinert man Forschungen verschiedener Theoretiker und Praktiker im Bereich Psychologie und Design, so werden Farben in meisten F\u00e4llen folgenderweise empfunden.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Farbe<\/th>\nPsychologische Wirkung<\/th>\nEmotionen und Assoziationen<\/th>\nEinsatz im Webdesign<\/th>\n<\/tr>\n<\/thead>\n
Braun<\/td>\nstatisch, best\u00e4ndig, gem\u00fctlich<\/td>\nKomfort, Sicherheit, Best\u00e4ndigkeit, Ruhe<\/td>\nWebseiten f\u00fcr Caf\u00e9s, Lokale, Familienhotels, Dienstleistungen<\/td>\n<\/tr>\n
Rot<\/td>\ngef\u00e4hrlich, entschlossen, aggressiv, dynamisch, schnell<\/td>\nMacht, Wichtigkeit, Jugend, Gefahr, Unruhe<\/td>\nFordert zum Handeln auf, betont die Schnelligkeit bei Schlussverk\u00e4ufen, Webseiten f\u00fcr Nachrichtenagenturen, Sportvereine, politische Parteien<\/td>\n<\/tr>\n
Gelb<\/td>\nsonnig, erregt die Aufmerksamkeit, bleibt l\u00e4nger im Ged\u00e4chtnis<\/td>\nGl\u00fcck, Enthusiasmus, Archaismus (dunklere Farbt\u00f6ne)<\/td>\nErzeugt die Aufmerksamkeit, verleiht die Sorglosigkeit Webseiten f\u00fcr Kinder, Kleiderl\u00e4den oder lebensmittelshops<\/td>\n<\/tr>\n
Orange<\/td>\nlebensfreudig, impulsiv, realistisch<\/td>\nFreundlichkeit, Energie, Einzigartigkeit<\/td>\nErregt Aufmerksamkeit, ist gut f\u00fcr Call-to-Action-Buttons,
\nWebseiten f\u00fcr Technologieunternehmen, Computerspiele<\/td>\n<\/tr>\n
Gr\u00fcn<\/td>\nungef\u00e4hrlich, beruhigend, gesund<\/td>\nWachstum, Fortschritt Umwelt<\/td>\nWebseiten f\u00fcr Umweltschutz, Spastudios, Gesundheitsfarmen, Tourismus<\/td>\n<\/tr>\n
Blau<\/td>\nfaul, rein, luftig, frisch<\/td>\nRuhe, Sicherheit, Offenheit (hellere Farbt\u00f6ne), Zuverl\u00e4ssigkeit) dunklere Farbt\u00f6ne)<\/td>\nWebseiten f\u00fcr Finanzen, Versicherung, Banken<\/td>\n<\/tr>\n
Violett<\/td>\noriginell, magisch, immateriell<\/td>\nLuxus, Romantik (hellere Farbt\u00f6ne), Mystik, Geheimnis (dunkle Farbt\u00f6ne)<\/td>\nWebseiten f\u00fcr Sch\u00f6nheitswaren, Kosmetik, Luxuswaren<\/td>\n<\/tr>\n
Rosa<\/td>\nromantisch, weiblich, leichtsinnig<\/td>\nFreude, Romantik, Leichtsinnigkeit, Jugend<\/td>\nWebseiten f\u00fcr Waren f\u00fcr junge Frauen<\/td>\n<\/tr>\n
Wei\u00df<\/td>\nrein, offen<\/td>\nReinheit, Schlichtheit, Tugend, Medizin, Luftigkeit<\/td>\nIn Kombination mit anderen Farben gilt als universal<\/td>\n<\/tr>\n
Grau<\/td>\nst\u00e4hlern, technisch, progressiv, ernst<\/td>\nNeutralit\u00e4t, Melancholie, F\u00f6rmlichkeit, Konservatismus, Realismus<\/td>\nWebseiten f\u00fcr Technik, Industrie, Technologie<\/td>\n<\/tr>\n
Schwarz<\/td>\ntraurig, elegant<\/td>\nAutorit\u00e4t, Raffiniertheit, Luxus<\/td>\nWebseiten f\u00fcr Luxuswaren, Markenkleidung, Autos<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Mehrere Farben kombiniert k\u00f6nnen jedoch die beschriebenen Effekte ver\u00e4ndern, verst\u00e4rken oder schw\u00e4chen. Als Beispiel f\u00fchren wir einige Farbkombinationen und deren psychologische Wirkung in Anlehnung an Forschungen von Farbsychologen Heinrich Frieling und Xaver Auer an:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Farbkombination<\/th>\nEmpfindungen<\/th>\n<\/tr>\n<\/thead>\n
gelbrot<\/td>\nFreude<\/td>\n<\/tr>\n
orangerot<\/td>\nTonerh\u00f6hung, Freude<\/td>\n<\/tr>\n
gelblila<\/td>\nDissonanz<\/td>\n<\/tr>\n
gelb-hellgr\u00fcn<\/td>\nFr\u00f6hlichkeit, Munterkeit<\/td>\n<\/tr>\n
orangerot-gr\u00fcn<\/td>\nAktivit\u00e4t, Handeln<\/td>\n<\/tr>\n
rotblau<\/td>\nDynamik<\/td>\n<\/tr>\n
orange-lasurblau<\/td>\nnachdr\u00fcckliches Verlangen<\/td>\n<\/tr>\n
hellgr\u00fcn-rot<\/td>\nSchimmern<\/td>\n<\/tr>\n
hellgr\u00fcn-blau<\/td>\nPassivit\u00e4t, Unklarheit, Unbestimmtheit<\/td>\n<\/tr>\n
beige-hellgr\u00fcn<\/td>\nFriedlichkeit<\/td>\n<\/tr>\n
schwarzrot<\/td>\nGefahr<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Bei der Auswahl eines Farbschemas ist es ratsam, auch jene Tatsache zu ber\u00fccksichtigen, dass Farben in verschiedenen Kulturen ganz andere Bedeutungen haben k\u00f6nnen. W\u00e4hrend man wei\u00df in Europa mit Ehe, Frieden und Engeln assoziiert, gilt es in orientalischer Kultur (Japan, China, Indien) als Trauerfarbe.
\nBesonders abgewogen und zielgruppenorientiert braucht man bei der Gestaltung von Pop-Up-Fenstern, Hintergr\u00fcnden, Call-to-Action-Buttons, Rahmen oder Nachrichten zu sein. Experten von der analytischen Agentur KISSmetrics (USA) ordnen verschiedenen K\u00e4ufertypen dem Verhaltensprinzip nach bestimmte Einflussfarben zu. So werden impulsive K\u00e4ufer von rot, orange, schwarz und K\u00f6nigsblau besser zum Handeln bewegt.<\/p>\n

Beispiele f\u00fcr die Farben gelb, blau und gr\u00fcn:<\/strong><\/p>\n

\"Wordpress<\/p>\n

\"Wordpress<\/p>\n

\"Wordpress<\/p>\n

Form<\/h3>\n

Im Vergleich zu Farben werden Formen im Webdesign h\u00e4ufiger benutzt, um Inhalte anzuordnen, Tiefe, Textur zu verleihen und die Aufmerksamkeit des Betrachters richten zu lassen. Auf den ersten Blick scheinen sie weniger emotionell zu sein. In Wirklichkeit strahlen Formen genauso wie Farben Informationen aus, die das Unbewusste der Menschen stark beeinflussen. Man unterscheidet geometrische<\/strong>, nat\u00fcrliche <\/strong>und abstrakte <\/strong>Formen.<\/p>\n

Auf meisten Webseiten verwendet man Quadrate <\/strong>und Rechtecke<\/strong>. Diese g\u00e4ngigsten geometrischen Figuren bilden die wichtigsten Komponenten des Webdesigns und dienen haupts\u00e4chlich zur Textgestaltung und Navigation. Man verbindet sie mit Gegenst\u00e4nden aus unserer Umgebung wie B\u00fccher, T\u00fcren, Fenster, H\u00e4user usw. zu. Diese bekannten Formen vermitteln uns Vertrauen, Komfort und Sicherheit. Deshalb lohnt es sich Quadrate und Rechtecke im Design einzusetzen, wenn man Ehrlichkeit, Stabilit\u00e4t oder Gleichheit betonen will. Diese Formen werden gew\u00f6hnlich mit Stabilit\u00e4t, Statik und Gleichgewicht verbunden. Deshalb w\u00fcrden sie besonders gut f\u00fcr Webseiten passen, die mit Finanzen, Architektur, Bau, Versicherung zu tun haben.<\/p>\n

Kreise <\/strong>geh\u00f6ren zu weniger verbreiteten Elementen im Webdesign. Au\u00dfer Logos wird die Form zur Hervorhebung wichtiger Bereiche verwendet. Kreis symbolisiert Unendlichkeit, Vollkommenheit, Einigung und Schutz. Wie bekannt vermitteln runde Formen positive Gef\u00fchle wie Freundlichkeit, Gem\u00fctlichkeit und G\u00fcte. Trotzdem sei es empfehlenswert, diese Figur sp\u00e4rlich einzusetzen, denn sie kann der Gestaltung die Unvollst\u00e4ndigkeit verleihen.<\/p>\n

Dreiecke <\/strong>werden mit Aktivit\u00e4t und Bewegung assoziiert. Sie sind in der Lage die Richtung anzugeben und Dynamik zu verleihen. Es w\u00e4re angemessen, diese Form einzusetzen, um zum Handeln aufzufordern oder die Erfolge eines Unternehmens zu unterstreichen. Aber in gro\u00dfen Mengen k\u00f6nnen Dreiecke wegen ihrer spitzen Ecken Konfliktgef\u00fchle und Unbehagen hervorrufen.<\/p>\n

Nat\u00fcrliche Formen<\/strong> geben bekannte Erscheinungen und Gegenst\u00e4nde, die in der Umgebung vorkommen, wieder: Bl\u00e4tter, Wolken, Tiere, Pflanzen, Sonne, Muschel usw. Diese Formen werden mit Freiheit, Spontaneit\u00e4t, Vergn\u00fcgen, Komfort, N\u00e4he zur Natur assoziiert. Sie w\u00e4ren ideal, um Eindr\u00fccke vom Design auf Webseiten zu verst\u00e4rken, die Umweltprojekte, gr\u00fcne Technologien oder Tourismus pr\u00e4sentieren.<\/p>\n

Zu abstrakten <\/strong>z\u00e4hlt man Formen, die mit Gegenst\u00e4nden aus der Umgebung direkt nicht vergleichbar sind. Sie werden mit Linien, geometrischen oder nat\u00fcrlichen Formen gebildet. Deren psychologische Wirkung wird von der farblichen Darstellung und Wahrnehmung der eingesetzten Elemente bedingt. Der amerikanische Neurowissenschaftler Moshe Bar geht davon aus, dass Menschen gebogenen Formen Vorzug geben. Scharfe Kanten werden hingegen mit Gefahr und Unbehagen verbunden.<\/p>\n

Beispiele f\u00fcr die Formen Quadrat und Kreis:<\/strong><\/p>\n

\"Wordpress<\/p>\n

\"Wordpress<\/p>\n

Typographie<\/h3>\n

Der Text auf einer Webseite vermag auch emotionelle F\u00e4rbung zu verleihen. Psychologen sch\u00e4tzen, dass die richtig gew\u00e4hlte Schrift f\u00fcr positive Stimmung beim Lesen sorgen kann. Dasselbe Wort mit verschiedenen Schriftarten <\/a> gestaltet wird ganz anders wahrgenommen.
\nGerade vertikal gestreckte Schriftarten<\/strong> wirken sachlich und gelten als universelle Schriften. Sie k\u00f6nnen zur Gestaltung gr\u00f6\u00dferer Textbl\u00f6cke eingesetzt werden.<\/p>\n

\"Gerade<\/p>\n

Quadratische Schriftarten<\/strong> werden vor allem als \u00dcberschriften und zur Hervorhebung einiger Textteile eingesetzt. Man assoziiert sie mit Technologien, Industriewaren, Finanzen. Diese Schriftarten sind dazu gerufen, die der Information Wichtigkeit, Seriosit\u00e4t und Kompetenz zu verleihen.<\/p>\n

\"Quadratische<\/p>\n

Runde Schriftarten <\/strong>vermitteln Komfort und Gem\u00fctlichkeit. W\u00e4hrend quadratische Schriftarten streng wirken, wirken gerundete Schriften positiv und gem\u00fctlich.<\/p>\n

\"Runde<\/p>\n

Kalligraphische Schriftarten<\/strong> h\u00e4lt man f\u00fcr leicht, sch\u00f6n, zierlich und romantisch. Sie sind auf Webseiten zu sehen, deren Produkte oder Dienstleistungen mit diesen Eigenschaften verbunden werden, z.B. Frauenleidung, Schmucksachen, Sch\u00f6nheitswaren, Fotostudio.<\/p>\n

\"Kalligraphische<\/p>\n

\"Wordpress<\/p>\n

Handschriftarten <\/strong>unterstreichen bestens die Exklusivit\u00e4t einer Ware oder Dienstleistung. Sie schaffen Vertrauen und verleihen der vorgestellten Information mehr Gewicht. Es w\u00e4re angemessen, sie auf Webseiten der Privat\u00e4rzte, Beratungsunternehmen, Politiker oder Rechtsanw\u00e4lte einzusetzen.<\/p>\n

\"Handschriftarten\"<\/p>\n

Psychologische Wirkung von dekorativen Schriftarten<\/strong> ist selbst auf stilisierte Idee zur\u00fcckzuf\u00fchren. So wird die gotische Schrift mit entsprechender Epoche assoziiert. Diese Schriftarten sind daf\u00fcr gedacht, thematische Webseiten zu gestalten.<\/p>\n

\"Gotische<\/p>\n

\"Wordpress<\/p>\n

\"Wordpress<\/p>\n

Abbildungen<\/h3>\n

Bilder schaffen ein Gleichgewicht zwischen Text und visuellem Inhalt, deshalb sind Logos, Fotos, Zeichen, Infografiken, Piktogramme auf einer Webseite unerl\u00e4sslich. Nach ihrer Funktion unterscheidet man informative, anlockende und animierende Abbildungen. Die letzteren zwei Typen sind dazu gerufen, bei Besuchern Emotionen zu erzeugen. Im Vergleich zu anderen Abbildungen verf\u00fcgen Fotos \u00fcber die st\u00e4rkste psychologische Wirkung, weil sie realit\u00e4tsnah sind. Emotionen oder Aktivit\u00e4ten auf Fotos sprechen immer an und sind in der Lage zum Handeln zu bewegen.<\/p>\n

\"Wordpress<\/p>\n

\"Wordpress<\/p>\n

Fazit<\/h5>\n

Zusammenfassend l\u00e4sst sich sagen, dass Psychologie im Webdesign ein nahezu unersch\u00f6pfliches Thema ist und sich nicht nur auf die skizzierten Fragen beschr\u00e4nkt. Gestalter, die ihren Kollegen einen Schritt voraus sein wollen, brauchen sich in psychologischen Aspekten sehr gut auszukennen. Diese „geheime Waffe“ soll keinesfalls ins Korn geworfen werden.<\/p>\n

Der Artikel wurde mit Webdesign-Beispielen aus der Sammlung von TemplateMonster TemplateMonster<\/a> illustriert.<\/p>\n","protected":false},"excerpt":{"rendered":"

Der Kampf um Webseitenbesucher spitzt sich von Tag zu Tag zu. Von einer Nachrichtenagentur, einem wirtschaftlichen Portal \u00fcber einen Onlineshop bis hin zu einer Beautybloggerin \u2013 in allen Bereichen versucht<\/p>\n","protected":false},"author":4,"featured_media":230,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","rank_math_title":"","rank_math_description":"Erfahren Sie, wie Sie einen hochwertigen Internetauftritt umsetzen und dabei die psychologischen Aspekte der menschlichen Wahrnehmung f\u00fcr sich nutzen k\u00f6nnen","rank_math_focus_keyword":"psychologische"},"categories":[10],"tags":[35],"class_list":["post-229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-design"],"_links":{"self":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":0,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}