Im folgenden Blogbeitrag könnt ihr alle Inhalte der Präsentation nachlesen. Zusätzlich findet ihr alle Links zu den relevanten Webauftritten und You-Tube Videos.

(und sorry für die grausame Formatierung, hier gibt der Blog leider nicht viel her )

Farben

In der Webgestaltung spielt die Farbgestaltung eine wesentliche Rolle, da deren Einsatz direkten positiven oder negativen Einfluss auf die User hat.

Farbmodelle

Es gibt verschiedene Farbmodelle. Die wichtigsten bzw. bekanntesten Modelle sind das RGB-Modell und das CMYK Modell.

RGB-Modell

RGB steht für Rot, Grün und Blau. Hier werden die einzelnen Farbanteile angegeben, um daraus verschiedene Farben zu mischen. Für jede Position hat ein Wert von 0-255 zugewiesen werden. Daraus Anteile der einzelnen Bildpunkte.

Bsp:

RGB

255,255,255

Für Rot, Grün und Blau werden jeweils 255 als Farbwert angegeben wodurch die Farbe „Weiß“ entsteht. Umgekehrt ergibt sich aus der Kombination R0 – G0 – B0 die Farbe „Schwarz“. Dieses Modell erlaubt es über 16 Mio. Farben zu erzeugen. (Q1)

Im folgenden Video findet ihr noch weiterer Farbbeispiele (Q2):

CMYK Modell

Die Abkürzung CMYK steht für Cyan, Magenta, Yellow und Key (Schlüsselfarbe Schwarz). Bei diesem Farbmodell werden die Primärfarben gemischt, wobei Weiß die Basisfarbe darstellt.

Dieses Modell wird im Druck verwendet. Die Werte werden in Prozentangaben angegeben. Wichtig ist zu beachten, dass nicht jede Farbkombination angezeigt bzw. gedruckt werden kann. Hier bietet bspw. Adobe Photoshop eine Informationmeldung, die sofort zeigt, ob eine Farbe druckbar ist.

Bsp:

CMYK

100% 50% 0% 0%

Aus dieser Kombination ergibt sich die Farbe „Blau“. Im Gegensatz zum RGB-Modell wird im CMYK-Model ein subtraktiver Farbraum angegeben. (Q3)

Im folgenden Video findet ihr noch einige Details zum CMYK-Modell (Q4):

Bedeutung von Farben

Farben werden verschiedene Eigenschaften und Bedeutungen zugeschrieben. Menschen assoziierten durch Farben bestimmte Gefühle.

Anbei einige Beispiel, die euch sicherlich geläufig sind (Q5):

Farben werden bewusst eingesetzt, um deren assoziiere Eigenschaften bzw. Gefühle anzusprechen.

Hier ist es jedoch besonders wichtig kulturelle Differenzen zu beachten.

Die folgenden Farbbeispiele zeigen unterschiedliche Interpretationen, die durch Kulturunterschiede zustande gekommen sind (Q6):

Dieser Aspekt wird besonders kritisch, wenn Unternehmen den Webauftritt gestalten und diesen gegebenenfalls nicht an die Kultur anpassen.

Hierzu bin ich im Rahmen meiner Recherche über ein Zitat gestoßen, welches diesen Sachverhalt perfekt in Worte fasst (Q7).

„To internationalize your website means to adapt its contents and style for
the international audience.“

Anwendung von Farben im Webdesign

Farben werden nicht nur dazu genutzt Gefühle und Assoziationen auszulösen. Die erste typische Anwendung ist die Darstellung der Corporate Identity und des Corporate Designs. Unternehmen nutzen genaue Farbtypen um ihre Marke unverwechselbar zu machen.

Zusätzlichen dienen Farben als Orientierungshilfe. Der typische Internetuser ist bereits darauf konditioniert, dass hinter bestimmten Farben eine Symbolik steckt.

Bsp: Anzeige des Lagerbestandes Amazon-Onlineshop (Q8)

Die Angabe des Lagerbestandes wird grün dargestellt. Somit wird gezeigt, dass das gewünschte Buch noch erhältlich ist. Wenn eine Ware nicht mehr auf Lager ist wird dies rot dargestellt. Onlineshops nutzen dann auch die Möglichkeit eine Nachlieferzeit oder Zusatzinformationen anzugeben.

Blau hat sich mittlerweile als typische Farbe zum Hervorheben von Hyperlinks etabliert. Zusätzlich sind Hyperlinks üblicherweise unterstrichen.

Bei der Farbauswahl muss man beachten, dass die Wahl der Farben vom Zweck des Einsatzes maßgeblich beeinflusst wird. Wird das Design für einen Flyer verwendet (Offline) (Q5), dann können grelle Farben durchaus verwendet werden. Bei der Gestaltung von Online Angeboten können grelle bzw. helle Farben schwer gelesen werden und wirken sehr ermüdend auf den Leser.

Um den Einfluss von Farben und Design auf einen Webauftritt zu verdeutlichen bietet CSS Zen Garden sehr viele Varianten zur Auswahl. Die Seite CSS Zen Garden zeigt welche Möglichkeiten hinter CSS (Cascading Style Sheet) steckt (Q9). Das HTML-Grundgerüst bleibt hierbei immer gleich.

CSS Zen Garden Bsp. 1 (Q10):

Hier ist die Farbwahl sehr dunkel und düster. Hier überlasse ich euch selbst die Interpretation welche Art von Website dieses Design anwenden würde ;-)

CSS Zen Garden Bsp. 2 (Q11):

Das komplette Gegenteil, aber derselbe Inhalt. Durch die Verwendung der Farben Weiß und Rosa wirkt die Seite elegant und freundlich. Dieses Design wäre wohl für einen Blumenladen sehr passend .

Diese zwei Beispiele sollen verdeutlichen, dass Farbe das Erscheinungsbild einer Website oder auch Offline-Werbematerialien stark beeinfluss. Daher sollte man immer im Hinterkopf behalten, was eine Farbe kommuniziert und welche Zielgruppe ich fokussiere.

 Wording

Das Wording auf Websites ist ein wesentlicher Bestandteil. Hierbei kommt es gerne zu Verwirrungen. Besonders die Bezeichnungen „Website“, „Webseite“ und „Homepage“ werden oft synonym verwendet obwohl es hier Unterschiede gibt.

Ich nehme an, dass die Definition weitgehend bekannt sein wird. Der Vollständigkeit füge ich diese trotzdem hinzu.

Was ist nun der Unterschied (Q12, Q13)?

 Homepage: Als Homepage wird die Startseite bezeichnet.

Webseite: Die Webseiten sind alle einzelnen Unterseiten.

Website: Als Website wird die Gesamtheit von allen Webseiten und der Homepage bezeichnet.

Die Unterscheidung ist für den „normalen“ Internetuser jedoch nicht relevant.

Um die Bedeutung des Wordings von Websites zu verstehen, muss man beachten wie der Internetnutzer interagiert.

Typischerweise hat man beim Internet surfen ein hohes Tempo, daher werden lange Texte kaum bis gar nicht gelesen. Der User ist sehr ungeduldig und möchte die Information, die er sucht schnell und einfach aufbereitet vorfinden. Eine gute und klare Aufbereitung des Content ist daher entscheidend (Q14, Q6).

Gutes Wording - Was ist zu beachten?

Das Wortspiel wird z.B. in Rahmen von Slogans eingesetzt, um einen Wiedererkennungswert zu generieren. Hierbei ist vor allem essentiell zu wissen was man kommunizieren möchte. Immerhin wird mit einem Slogan das Unternehmen und dessen Marke in Verbindung gebracht.

Bekannte Slogans werden sofort mit der Marke in Verbindung gebracht.

Beispiel:

„Nichts ist unmöglich!“ à Toyota

„Ich liebe es!“ à Mc Donalds

Folgen von schlechtem Wording

Grundsätzlich soll / muss der User immer wissen was sich hinter einer Bezeichnung verbirgt. Wenn das Wording von Hyperlinks oder Buttons mehrdeutig ist, ist der Nutzer verunsichert. Aktionswege werden dann nicht verfolgt, da es zu Fehlinterpretationen kommt. Die missverstandenen Bezeichnungen haben direkten Einfluss auf die zu Verfügung stehenden Anwendungen. Diese werden schlichtweg nicht genutzt. Negative Einflüsse auf die Conversion-Rate oder Absprungrate sind eine weitere Folge. In Zuge von Usability Tests wird immer wieder festgestellt, dass zu komplizierte oder unverständliche Begriffe verwendet werden, die dem Nutzer unbekannt sind (Q6, Q14).

Eines der bekanntesten Bücher zum Thema Usability wurde von Stefan Krug verfasst (Q15).

„Don’t make me think“

Krug (2009) beschreibt, dass ein Webauftritt so gestalten sein muss, dass ein Nutzer nicht über die Interaktion nachdenken muss. Im Bezug auf das Thema Wording ist es dasselbe. Eine jede Bezeichnung muss für den Nutzer klar verständlich sein, um den entsprechenden Response zu erhalten.

Benennung von Website-Elementen

Um das Thema etwas zu veranschaulichen, habe ich seht ihr einige Beispiele von Aktionen. Anhand von Studien wurde erhoben welche Bezeichnungen von Nutzern präferiert werden (Q5, Q16, Q24, Q25).

Die Bezeichnungen werden euch nicht fremd sein. Eigentlich empfindet man die Ergebnisse als logisch. Interessanterweise haben geringe Veränderungen großen Einfluss auf die Perfomance von Webauftritten.

Wie sollte man also beim Thema Wording vorgehen?

Der erste Schritt ist natürlich das bewusste Beachten dieser Thematik. Die Relevanz ist nicht unerheblich. Hier kann man besonders gut von den „Großen“ lernen. Eine Konkurrenzanalyse verschafft günstig und schnell einen Vergleich über die verschiedenen Benennungen.

Um einen sinnvollen Entscheidungsprozess zu gestalten kann ich das A/B-Testing stark empfehlen. Hierbei kann die Benennung von jedem einzelnen Button überprüft werden. Besonders als sich die Rechtlage bezüglich der Bezeichnung des „Kaufen-Buttons“ geändert hat, ist die Frage aufgetreten welche neue Bezeichnung man welchen soll.

Die Ergebnisse von A/B Testing haben gezeigt, dass sehr wohl ein Unterschied bestehen kann, ob man „kaufen“, „kostenpflichtig bestellen“ oder „ zahlungspflichtig bestellen“ als Benennung wählt. Im vorherigen Satz habe ich bewusst das Wort „kann“ verwendet. Die Ergebnisse haben nämlich auch gezeigt, dass es auch auf die Zielgruppe und Branche ankommt. Hier gilt also die Devise –einfach testen und schauen, aber nicht links liegen lassen!  (Q5, Q17).

Themenstruktur von Webauftritten

Vielleicht habt ihr ja schon in meinem Lernblog gelesen, dass diese Recherche zu diesem Thema etwas schwierig war. Themenstrukturen von Webauftritten werden eher im Zusammenhang von Navigationsstrukturen behandelt, daher habe ich mich schlussendlich darauf konzentriert.

Grundsätzlich würde ich persönlich unter der Bezeichnung „Themenstruktur“ verstehen, dass Webauftritte nach bestimmten Kategorien gegliedert werden. Bspw. nach Produktgruppen (Hosen, Kleider, etc.) oder nach der Zielgruppe (Frauen, Männer, Kinder, etc.)

H&M bietet hier ein perfektes Beispiel (Q18):

Navigationsstruktur

Die Navigation ist ein wesentlicher Bestandteil eines Webauftrittes. Ohne die Navigation könne man gerade einmal eine Webseite erreichen.

Grundsätzlich wird die Navigation in 3 Hauptarten gegliedert (Q19, Q20):

·         Primäre Navigation:
Hier spricht man von der obersten  Ebene der Struktur, welche die Hauptkategorien abbildet. Diese Navigation soll/kann von jeder Webseite erreichbar sein.

·         Sekundäre Navigation:
Die sekundäre Navigation bildet die zweite Ebene, welche unterhalb der primären Navigation positioniert ist.

·         Meta Navigation:
Diese Navigation dient als zusätzliche Orientierungshilfe. Bspw. Sitemaps, Suche, Kontakt,etc.

Um die Arten der Navigation habe ich mir ein Beispiel ausgesucht, dass jedem bekannt ist.

JKU

Primäre Navigation

Sekundäre Navigation

Metanavigation 

Zur Erleichterung der Navigation stehen noch zusätzliche Möglichkeiten zur Verfügung. Man kann Pfadangaben verwenden, Drop-down Menüs oder die Anker-Navigation (Bsp. „nach oben“).

Das Thema Navigation hat besonders bei der Entwicklung von Smartphone eine Rolle gespielt. Durch die Steigerung der mobilen Zugriffe mussten Website-Betreiber die Darstellung anpassen, um eine optimale Navigation zu ermöglichen. Daraus ist Responsive Webdesign entstanden. Hierbei passen  sich die Website und entsprechend auch die Steuerelement automatisch an. Dadurch ist eine problemlose Navigation möglich (Q20, Q22).

Das Unternehmen Burton hat ihren Webauftritt bereits auf mittels Responsive Webdesign umgesetzt (Q23).

Welche Anforderungen werden an die Navigation gestellt?

Nachdem es ja diverse Möglichkeiten gibt die Navigation zu gestalten muss man sich die Frage stellen, welche Anforderungen gestellt werden. Hier steht der User im Zentrum, der sich während der Navigation die folgenden Fragen stellt:

·         Wo bin ich?

·         Wo war ich bereits?

·         Was gibt es hier zu sehen?

·         Wie komme ich zurück?

·         Wohin kann ich gehen?

Zusätzlich ist es wichtig, dass eine gute Navigation intuitiv gestaltet und konsistent aufgebaut ist. Wenn man diese Aspekte beachtet steht einer einfachen Navigation nichts mehr im Weg (Q20).

Positionierung der Navigation

Auch die Positionierung der Navigation ist für den User relevant. Bei der häufigsten Variante befinden sich die primäre Navigation im Header und die sekundäre Navigation im linken Bereich der Website. Der Footer wird für Zusatzinformation wie bspw. das Impressum oder Kontaktlink genutzt (Q20).

Es gibt jedoch auch Sonderfälle die man beachten muss. Hier kommt wieder das Thema „kulturelle Unterschiede ins Spiel.“

Bsp: Der Webauftritt des Israelischen Außenministeriums hat dem ersten Anschein nach keine besondere Navigation. In der englischen Variante hat die primäre Navigation ist im Header und die sekundäre auf der linken Seite. Wenn man jedoch die Sprache auf Hebräisch ändert bemerkt man einen großen Unterschied. Die primäre Navigation ist weiterhin im Header. Die sekundäre dagegen wird auf der rechten Seite angezeigt. Der Hintergrund ist, dass die hebräische Sprache von rechts nach links orientiert ist. Somit ist auch der User dieses Surfverhalten gewohnt. Bei internationalen Webauftritten ist diese Besonderheit zu beachten.

Englische Ansicht:

Hebräische Ansicht:

Wie teste ich meine Navigation?

Hier kann ich auch das Programm Chalkmark empfehlen. Dadurch könnt ihr die User testen, ob sie jene Inhalte findet nach denen ihr sie fragt.

Einfach dem Link folgen und selbst testen!

Viel Spaß!

Quellen:

Q1) Balzert, H. / Klug, U. / Pampuch, A.:  Webdesign & Web-Usability. Basiswissen für Webentwickler, Witten, 2009

Q2) Software Anleitungen, Video-Tutorial: Was ist eigentlich… RGB,  Zugriff am 30.03.2014 unter http://www.youtube.com/watch?v=NebvhMY9DU4, 2012

Q3) Hansen, H. R. / Neumann, G.: Wirtschaftsinformatik I. Grundlagen und Anwendungen, 2009

Q4) Software Anleitungen, Video-Tutorial: Was ist eigentlich… CMYK, Zugriff am 30.03.2014 unter http://www.youtube.com/watch?v=vSn7VHw9hUg, 2012

Q5) Wünschmann, S. / Schwarz, U. / Müller, S.: Webseiten-Gestaltung, Erfolgsfaktoren und Kontrolle, Heidelberg, 2008

Q6) Gutheim, P.: Der Websdesign Praxisguide. Professionelle Konzeption von der Planung bis zur Promotion, Heidelberg, 2008

Q7) Tuominen, T.: Goiong Global: Not for the Half-hearted, 1989, zitiert in Wöhlbier, N.: Webdesign für chinesische Nutzer, 2001

Q8) Amazon, Farbenlehre: Ein Schnellkurz. Zugriff am 20.03.2014 unter http://www.amazon.de/Farbenlehre-Ein-Schnellkurs-Harald-K%C3%BCppers/dp/3832193405/ref=sr_1_1?ie=UTF8&qid=1396197813&sr=8-1&keywords=buch+farbenlehre

Q9) W3C – World Wide Web consortium: What is CSS? Zugriff am 25.05.2014 unter http://www.w3.org/Style/CSS/

Q10) CSS-Zen Garden Beispiel 1: Zugriff am 25.03.2014 unter http://www.csszengarden.com/198/

Q11) CSS-Zen Garden Beispiel 2: Zugriff am 25.03.2014 unter http://www.csszengarden.com/208/

Q12) Blogsheet: Website, Webseite, Homepage – die Unterschiede. Zugriff am 24.03.2014 unter http://blogsheet.info/website-webseite-homepage-die-unterschiede-2528/, 2014

Q13) Prowebsites:  Homepage und Webseite. Wo ist der Unterschied? Zugriff am 25.03.2014 unter http://www.pro-websites.de/infoarchiv/homepage-und-webseite-wo-ist-der-unterschied-.html

Q14) eResult: Wording Studie 2005. „Nutzungsfreundliche Bezeichnungen von Navigationselementen im Internet“. Zugriff am 25.03.2014 unter https://www.eresult.de, 2005

Q15) Krug, S.: Don’t make me think! USA, 2008

Q16) eResult: Wording-Studie 2012. Verständlichkeit und Präferenz von Begriffen – ausgewählte Ergebnisse. Zugriff am 25.03.2014 unter https://www.eresult.de, 2012

Q17) Günther, V.: Richtige Button-Bezeichnung beeinflusst Abverkauf. Zugriff am 26.03.2014 unter http://www.internetworld.de/e-commerce/conversion-rate/richtige-button-bezeichnung-beeinflusst-abverkauf-282250.html, 2012

Q18) H&M – Beispiel einer Themenstrukutr. Zugriff am 30.03.2014 unter https://www.hm.com/at

Q19) Balzert, H. / Klug, U. / Pampuch, A.: Webdesign und Web-Usability, Witten, 2009.

Q20) Balzert, H.: Webdesign & Web-Ergonomie. Websites professionell gestalten, Dortmund, 2004

Q21) JKU, Beispiel Navigationsstruktur. Zugriff am 25.03.2014 unter http://www.jku.at/content/e213/

Q22) Florence, M.: Mobile Webseiten. Strategien, Techniken, Dos und Don’ts für Webentwickler, 2012

Q23) Burton – Beispiel Responsive Webdesign. Zugriff am 25.03.2014 unter http://eur.burton.com/on/demandware.store/Sites-Burton_EU-Site/default/Home-Show

Q24) eResult: Wording-Studie 3.0. Web 2.0- und E-Commerce-Begriffe, Funktionen und Elemente. Zugriff am 25.03.2014 unter https://www.eresult.de, 2008

Q25) eResult: Wording-Studienserie. Special: „Online Shops“. Zugriff am 25.03.2014 unter https://www.eresult.de, 2005

Hab da noch was Interessantes zum Thema "Die Welt der Farben" gefunden: http://www.lichtkreis.at/html/Wissenswelten/Welt_der_Farben/welt-der-farben.htm