Current Page: | Greybox » Authoring » Course ID: medieninformatik » Modules » Module ID: m02_sm » Learning Units » Unit ID: 06_11 |
---|---|
Last Modified: | Tuesday, 2015-05-05 - 08:09:04 |
Tools: | Validate — Preview XML Preview HTML Preview PDF |
Alternative: | Printable HTML |
Title: | Farbe und Multimedia: Wirkungsbereich | ||
---|---|---|---|
Abstract: | Ziel dieser Lerneinheit ist es, Möglichkeiten bzw. Bereiche vorzustellen, die durch den Einsatz von Farbe deutliche Wirkung auf die Informationsaufnahme seitens des Users zeigen. | ||
Status: | Final | Version: | 2005-01-04 |
History: | 2005-01-04 (Robert Fuchs): Fixed status; validates now (captions missing, two dead links). 2004-11-02 (Thomas Migl): abstract hinzugefügt 2004-10-20 (Robert Fuchs): Fixed one source; validates now (captions missing, one link dead). 2004-10-18 (Thomas Migl): Inhalte importiert, ausgezeichnet 2004-10-15 (Robert Fuchs): Created skeleton for "LU 06_11– Farbe und Multimedia: Wirkungsbereich (Old: LE10 bzw. LU05_2)". |
Author 1: | Dr. Stefan Müller | E-Mail: | sm@automat.at |
---|---|---|---|
Author 2: | Sonja Klos | E-Mail: | (empty) |
Author 3: | (empty) | E-Mail: | (empty) |
Author 4: | (empty) | E-Mail: | (empty) |
Author 5: | (empty) | E-Mail: | (empty) |
Organization: | Automat, http://www.automat.at/ |
Einleitung1Bedeutung von FarbeFarbe für Multimedia- und Interface-Design als wichtiges Mittel zur
Ziel dieser LerneinheitVorstellung von Möglichkeiten bzw. Bereiche, die durch Farbe deutliche Wirkung auf Informationsaufnahme zeigen Themen dieser Lerneinheit
2Bedeutung von FarbeNeben seiner ästhetischen Bedeutung und über seine psychologische Wirkung hinaus dient Farbe, im Multimedia- und im Besonderen im Interface-Design, als wichtiges Mittel zur
Die logische Organisation des Screens sowie die Unterscheidung einzelner Screen-Elemente können dabei unterstützt, Zusammengehörigkeiten oder Unterschiedlichkeiten akzentuiert und Aufmerksamkeit geweckt werden. Farbe wirkt förderlich auf die Informationsaufnahme des Benutzers. Dem User wird die Identifizierung von Information erheblich erleichtert und eine Orientierung innerhalb von Multimedia-Anwendungen ermöglicht. Ziel dieser LerneinheitZiel dieser Lerneinheit ist es, Möglichkeiten bzw. Bereiche vorzustellen, die durch den Einsatz von Farbe deutliche Wirkung auf die Informationsaufnahme seitens des Users zeigen. Themen dieser Lerneinheit
FARBE UND AUSZEICHNUNG1FARBE UND AUSZEICHNUNG
2Farbe als SignalFarbe ist ein bedeutendes biologisches Signal-System. Viele Beispiele in der Natur zeugen davon. Im Tierreich etwa locken auffällige Farben Weibchen an oder sie signalisieren Feinden die Gefährlichkeit einer Spezies. Farbe im Kontext mit anderen SignalenFarbe ranchiert unter den auffälligsten aller Arten von Signalisierung. Höchste Aufmerksamkeit erregen akustische Signale. An zweiter Stelle stehen veränderliche optische Signale (z.B. Blinken), gefolgt von Leuchtdichte, Farbton und Sättigung eines Objektes. wirt2002 Farbe und AufmerksamkeitDie Auffälligkeit von Signalen beschreibt deren Eigenschaft, sich von der Umgebung bzw. konkurrierenden Signalen abzuheben. Durch unterschiedliche Auffälligkeiten der Signale lässt sich die menschliche Aufmerksamkeit steuern. Durch ein kombiniertes Auftreten von Farbe mit anderen Signalen kann (und soll) im Multimediadesign zugleich auf mehreren Ebenen der Aufmerksamkeitserregung gearbeitet werden. Besonders im GUI (GraphicUserInterface)-Design lässt sich mittels farblicher Auszeichnung ein weites Feld von Tätigkeiten und Zielen von Benutzern unterstützen und organisieren. Diese reichen etwa von einer vernehmlichen Orientierung, der einfachen Suche oder dem Auffinden bestimmter Objekte bis hin zur komplexen Entscheidung über eine zu treffende Abfolge von konkurrierenden, zur Durchführung anstehenden Tätigkeiten oder etwa einer Entscheidung über die Unterbrechung eines aktuell bearbeiteten Problems zugunsten eines unmittelbar aufgetretenen, vorrangigen anderen. Webportal eines ExpeditionsausstattersIm Webportal eines internationalen Expeditionsausstatters werden zunächst die markant rot ausgezeichneten Informationen, wie das Logo des Unternehmens und die aktivierten Navigationspunkte wahrgenommen. Betont wird diese starke Wirkung durch den flächigen Farbeinsatz und den hohen Kontrast zum Blau-Grau des Hintergrunds. Unmittelbar darauf wird die Aufmerksamkeit bereits von der Content-Überschrift eingenommen, jene in roter Schriftfarbe gehaltenen Textteile. Screenshot Thenorthface PC
Copyright © 2004 The North Face, Inc. siehe http://www.thenorthface.com/na/event-feature.html Screenshot Thenorthface PDA_Phone Copyright © 2004 The North Face, Inc. siehe http://www.thenorthface.com/na/event-feature.html Hervortreten von KontrastenIm angewandten Multimedia-Design wird durch Verwendung von hervortretenden Farben die Aufmerksamkeit des Users gelenkt, etwa auf bestimmte Objekte oder auf wichtige Textstellen am Bildschirm. Das Hervortreten von Farben - und damit die Steuerung von Aufmerksamkeit - wird durch die Wirkung von Kontrasten erzeugt (siehe Farbe: Grundlagen): Kontrast von
Bei der Verwendung von mehr als einem Farbsignal, kann durch den Einsatz von intensiverem oder geringerem Kontrast, eine Auffälligkeitsreihung von schwächeren bis stärkeren Reizen erzeugt werden. Dies kann eine Rolle spielen bei der Darstellung von Informationssequenzen, wenn etwa die Aufmerksamkeit des Users auf eine bestimmte Abfolge bzw. mit einer bestimmten Präferenz auf verschiedene Objekte gelenkt werden soll. HindernisrennenDiese interaktive Darstellung eines Hindernis-Rennens demonstriert die beschriebene Anwendung von Kontrasten. Farbe vor Grau, reine Farben wie Rot oder Blau vor Mischfarbe wie das gedeckte Gelb in der Tabelle rechts, und dabei hohe vor niedere Farbsättigung und warmer vor kalter Farbe. Screenshot Thenorthface PDA_PhoneCopyright © 2004 The North Face, Inc. siehe http://www.thenorthface.com/opencms/opencms/tnf/fourwinds/tnf_4winds.html Screenshot Thenorthface PDA_PhoneCopyright © 2004 The North Face, Inc. siehe http://www.thenorthface.com/opencms/opencms/tnf/fourwinds/tnf_4winds.html FARBE UND ZUORDNUNG1Gestaltsprinzipien und zusammengehörige Objekte
Gruppierung von Informationen
Separation von Information
MerksatzAchtung! Inadäquater Einsatz von Farbe führt zu Desorientierung beim Benutzer. Die Aufnahme von Information wird erschwert und behindert. 2Gestaltsprinzipien und zusammengehörige Objekte niels1993Das menschliche Auge ist in der Lage, bestimmte Bereiche des Netzhautbildes als zusammengehörig wahrzunehmen und somit Objekte zu erkennen. Diese Gruppierungsphänomene wurden unter anderem von Gestaltpsychologen untersucht und in den Gestaltprinzipien qualitativ beschrieben. Die Gestaltprinzipien besagen, dass Objekte zusammengehörig, als Gruppe bzw. als Einheit betrachtet werden, wenn sie
Beispiel für Nähe, Ähnlichkeit und Kontinuität PC
Details und weitere Beispiele siehe Modul1 / LE Kognitive Grundlagen Beispiel für Nähe, Ähnlichkeit und Kontinuität PDA_Phone
Details und weitere Beispiele siehe Modul1 / LE Kognitive Grundlagen Gruppierung von InformationenBasierend auf dem Gestaltprinzip gleiche oder ähnliche Farben für Gruppierung und Zusammengehörigkeit zu verwenden, wird durch entsprechenden Einsatz von Farbe das Verständnis des Users für Beziehungen zwischen den Dialog–Elementen auf einem Bildschirm unterstützt. So können Menü–Optionen mit Hilfe von gleichen oder ähnlichen Farben in verwandte Gruppen eingeteilt werden. Sie sind somit leichter zu verstehen, da die jeweiligen Objekte in Kontext gestellt werden. Webanwendung John ColtraneDeutlich wird in dieser Webanwendung erkennbar gemacht, welche Menüpunkt und damit welche Position innerhalb der gesamten Applikation der Benutzer gewählt hat. Die farbliche Gestalt des Content-Hintergrundes wird eindeutig jener des unten aktivierten Bereichs zugeordnet. Screenshots Webseite John Coltrane PCsiehe http://www.johncoltrane.com/ Copyright © 2004 johncoltrane foundation Screenshots Webseite John Coltrane PDA_Phonesiehe http://www.johncoltrane.com/ Copyright © 2004 johncoltrane foundation Separation von InformationDer Einsatz von Farbe bietet im Interfacedesign auf der anderen Seite ein sehr effektives Gestaltungsmittel zum Zwecke der Segmentierung und Abgrenzung. Der Umgang mit dem gestaltbaren Raum ist für eine gelungene Informationsvermittlung entscheidend. Grundsätzlich sollte eine zu dichte Darstellung von Informationen möglichst vermieden werden. Steht zur Gestaltung dennoch wenig Raum zu Verfügung, können Bereiche, die zwar räumlich beieinander stehen, aber inhaltlich, logisch oder strukturell nicht zueinander assoziiert werden sollen, durch Farbe voneinander getrennt und damit unterschieden werden. In der Darstellung blockstrukturierter Programmsprachen werden die ineinander gestellten, verschachtelten Ebenen oft durch die Staffelung unterschiedlicher Farben sichtbar gemacht Lesen von HTML-Code PCDas Lesen von HTML-Code wird durch den Einsatz von Farbe deutlich vereinfacht. Innerhalb der Klammern sind die HTML-Tags durch eine blaue Codierung deutlich getrennt von den Attributes und so gut unterscheidbar. Lesen von HTML-Code PDA_PhoneDas Lesen von HTML-Code wird durch den Einsatz von Farbe deutlich vereinfacht. Innerhalb der Klammern sind die HTML-Tags durch eine blaue Codierung deutlich getrennt von den Attributes und so gut unterscheidbar. autoMit Hilfe von Farbe wird es dem User also möglich, Zuordnungen zu treffen, die letztendlich auf zwei völlig entgegengesetzten Zielsetzungen beruhen, jene der Gruppierung und jene der Separation von Informationen. Wird bei kompetenter Handhabung dieses Gestaltungsmittels dem User die Orientierung am Interface erheblich erleichtert, so schlägt die Wirkung bei unüberlegtem, unpassendem Einsatz von Farbe leicht in Situationen der Desorientierung um. Der User sucht nach Verbindungen und Beziehungen, die gar nicht existieren oder kann möglicherweise wichtige intendierte Zusammenhänge und Verknüpfungen nicht herstellen. Die Aufnahme der Information wird erheblich erschwert und behindert. CODIERUNG1autoMenschen haben gelernt zu erkennen, dass gewisse Konfigurationen von Phänomenen referenzieren bzw. verweisen (z.B. Hautverfärbung, rot werden, etc.). Identifizierung durch Farbcodierung
Übereinstimmung mit Aufgabenstellung
Individualisierbarkeit
Statusanzeige
Redundante Codierung
2autoDie Gestalt eines Codes ist vorerst abhängig von dem Medium, in dem er realisiert wird. Die Vermittlung über Schallwellen etwa führt grundsätzlich zu einer anderen Systematisierung als jene über visuelle Medien. Das Funktionieren des Vorganges, also eine gelungene De-Codierung, bedingt eine technische Umformung. Bedingung dafür wiederum ist die menschliche Erkenntnis, etwas könne zu einem Zeichen erklärt werden. Menschen haben also gelernt zu erkennen, dass gewisse Konfigurationen von Phänomenen auf etwas verweisen können. Etwa können Hautverfärbungen als Hinweise auf Erregung verstanden werden oder verfärbtes Laub den Wechsel einer Jahreszeit anzeigen. Farbe und Natur als Auslöser von menschlichen Erfahrungen und als Vorlage für multimediale Gestaltungsprozesse. Identifizierung durch FarbcodierungAls wichtiges Aufgabengebiet der Farbe im Interface- Design bewirkt die visuelle Codierung in der Darstellung von Daten eine Verbesserung der Identifizierbarkeit von Informationen. Identifizierung bzw. Beurteilung der Art einer Information erfolgt auf Grundlage derer verschiedener Identitätsmerkmale, wie Informationsqualität oder Informations¬status.Die Organisation von Informationen oder Daten auf einem Bildschirm mit Hilfe von Farbe, beschleunigt die Wahrnehmung bei vielen Funktionen und ist oft noch effektiver als Text-Codierung. Bei einem Luftraumüberwachungs-Programm können z.B. hoch fliegende Flugzeuge farblich anders codiert sein, als niedrig fliegende Flugzeuge um dem Fluglotsen die Erkennung zu erleichtern. Kodierung einer LandkarteEine der gebräuchlichsten Anwendungen von Codierungen finden sich in Landkarten. Auf diesen hier werden beispielsweise Feucht- und Trockenzonen bzw. klimatische Daten gut erfassbar angezeigt. Durch die farbliche Codierung ist eine rasche Beurteilung und Erfassung der dargestellten Information möglich. Screenshot Wetterkarte PCsiehe www.weather.com Copyright © 1995-2004, The Weather Channel Interactive, Inc. Screenshot Wetterkarte PDA_Phonesiehe www.weather.com Copyright © 1995-2004, The Weather Channel Interactive, Inc. Steigerung der Verständlichkeit für InformationstransferVoraussetzung für den unterstützenden Effekt beim Informationstransfer, ist ein klares Verständnis des Users, wie die Informationen selektiert und verwendet werden sollen. Ist eine Farbcodierung nicht „selbsterklärend“, bestehen unter anderem die Möglichkeiten dem User eine Interpretationshilfe (z.B. Legenden) mitzuliefern oder durch eine zusätzliche redundante Codierung (z.B. Symbolzeichen) die Verständlichkeit zu eirleichtern (-> vgl. redundante Codierung) Börsenindizes PCJene Börsenindizes deren Wert am letzten Tag gefallen ist, werden rot, jene deren Wert gestiegen ist, grün angezeigt. Lediglich durch farbliche Codierung wären diese Informationsmerkmale aber nicht verständlich. Zusätzlich angedeutet, also redundant codiert, wird dieser Umstand durch die Richtungsweisung des Pfeiles.
© Copyright 2000-2004 FinancialContent, Inc. siehe http://www.financialcontent.com/web/labs/fclab_flash.shtml Börsenindizes PDA_PhoneJene Börsenindizes deren Wert am letzten Tag gefallen ist, werden rot, jene deren Wert gestiegen ist, grün angezeigt. Lediglich durch farbliche Codierung wären diese Informationsmerkmale aber nicht verständlich. Zusätzlich angedeutet, also redundant codiert, wird dieser Umstand durch die Richtungsweisung des Pfeiles.
© Copyright 2000-2004 FinancialContent, Inc. siehe http://www.financialcontent.com/web/labs/fclab_flash.shtml Investment-Kalender PCIn diesem Investment-Kalender kann sich der User Ertragsberichte, Konferenzgespräche, Dividenden, Vorstandssitzungen und Aktienaufteilungen anzeigen lassen. Sie sind auf Grund ihrer Farbgebung deutlich unterscheidbar und dank ihrer Benennung sowohl in einem Popup-Fenster als auch im Fenster rechts eindeutig zuordenbar.
© Copyright 2000-2004 FinancialContent, Inc. siehe http://www.financialcontent.com/web/labs/fclab_flash.shtml
Investment-Kalender PDA_PhoneIn diesem Investment-Kalender kann sich der User Ertragsberichte, Konferenzgespräche, Dividenden, Vorstandssitzungen und Aktienaufteilungen anzeigen lassen. Sie sind auf Grund ihrer Farbgebung deutlich unterscheidbar und dank ihrer Benennung sowohl in einem Popup-Fenster als auch im Fenster rechts eindeutig zuordenbar.
© Copyright 2000-2004 FinancialContent, Inc. siehe http://www.financialcontent.com/web/labs/fclab_flash.shtml Übereinstimmung mit AufgabenstellungWichtig ist, dass die Farbcodierung mit der Prozessanwendung einhergeht, d.h. korreliert. Zwischen den Anforderungen des Users an die Applikation und der Farbcodierung sollte eine enge Verbindung bestehen. In einer Konto-Applikation werden etwa jene Posten, die ein bestimmtes Fälligkeitsdatum überschreiten rot angezeigt und unterscheiden sich damit deutlich von den restlichen nicht überfälligen Posten, die grün codiert sind. Sollte eine weitere Anforderung nun sein, ausschließlich jene Konten mit einem Kontostand von über 55 € darzustellen, sollte darauf geachtet werden, dass eine zusätzliche Farbcodierung das Ablesen nicht kompliziert und die Orientierung für den Benutzer störend beeinträchtigt. IndividualisierbarkeitBesonders im Zuge der visuellen Gestaltung von Anwendungen bzw. Programmen, die beispielsweise dem User zur selbständigen Organisation von Daten dienen, kann es sich mitunter als zweckmäßig erweisen, dem User eine individuelle Farbcodierung zu ermöglichen bzw. Kontrolle über deren Anzeige zu überlassen. So werden z.B. bei Programmen der Rechtschreibüberprüfung und – kontrolle falsch geschriebene Wörter farblich markiert. Die stark sichtbare rote Markierung kann jedoch erheblich stören und lenkt beim Lesen auf inhaltliche Verständlichkeit ab. Der User sollte daher in der Lage sein, Korrekturen zu akzeptieren oder abzulehnen und die Codierung auszuschalten. Terminplaner PCIn diesem Terminplaner eines Mailbrowsers für Macintosh ist es dem User möglich, die eingetragenen Termine individuell farblich zu codieren. Die Rot-Codierung steht dabei für Freizeittermine und Blau für geschäftliche Belange. Entourage:mac 2001 Copyright © 2001 Microsoft Terminplaner PDA_PhoneIn diesem Terminplaner eines Mailbrowsers für Macintosh ist es dem User möglich, die eingetragenen Termine individuell farblich zu codieren. Die Rot-Codierung steht dabei für Freizeittermine und Blau für geschäftliche Belange.
Entourage:mac 2001 Copyright © 2001 Microsoft autoDie Möglichkeit einer individuellen Anpassungen an Benutzerbelange und Benutzerfähigkeiten kann im Sinne der Usability–Optimierung wichtig sein. Allerdings sollte dieser Vorgang für den User leicht und problemlos unter Minimalaufwand vornehmbar sein. Änderung der Codierungsfarben PCMit wenig Aufwand kann der User die Codierungsfarben seines Terminplaners ändern und die gewählten Kategorien individuell zuordnen.
Entourage:mac 2001. Copyright © 2001 Microsoft Änderung der Codierungsfarben PDA_PhoneMit wenig Aufwand kann der User die Codierungsfarben seines Terminplaners ändern und die gewählten Kategorien individuell zuordnen. Entourage:mac 2001. Copyright © 2001 Microsoft StatusanzeigeDie Anzeige einer Änderung des Informationsstatus kann durch einen Farbwechsel unterstützt werden, um die Aufmerksamkeit des Benutzers zu steuern. Auch der Faktor Farbsymbolik kann hier bedeutsam sein. Sind Farben im Allgemeinen mit speziellen Gefühlen oder Erwartungen verbunden, können sich diese von Benutzergruppe zu Benutzergruppe auch unterscheiden. (siehe auch Farbe: Grundlagen) So wird Rot in einem Fall für „Stillstand“ oder „Gefahr“, in einem anderen für die Anzeige des Zustands „heiß“ verwendet. Im Kontext eines Schalters steht Rot im Wechsel mit Grün für „Ein – Aus“ als Betriebsstatus von elektrischen Geräten. Anzeige frei/besetzt PCMit der Anzeige des Status ‚Frei’ oder ‚Besetzt’ sind wir oft täglich merhmals konfrontiert. Anzeige frei/besetzt PDA_PhoneMit der Anzeige des Status ‚Frei’ oder ‚Besetzt’ sind wir oft täglich merhmals konfrontiert. E-mail AccountEin Online-E-mail-Account weist jedem Kunden für seine Mailbox eine limitierte Speichermenge zu. Mittels farblicher Codierung, Balkenfülle und Prozentangabe wird dem Benutzer die Menge des bereits belegten Speicherplatzes angezeigt. Nähert die beanspruchte Datenmenge sich der 100%-Marke, wird der Statuswechsel durch einen Farbwechsel signalisiert. Die Codierung wechselt von Grün auf Rot. © 2004 Microsoft siehe http://www.msn.de/ E-mail AccountEin Online-E-mail-Account weist jedem Kunden für seine Mailbox eine limitierte Speichermenge zu. Mittels farblicher Codierung, Balkenfülle und Prozentangabe wird dem Benutzer die Menge des bereits belegten Speicherplatzes angezeigt. Nähert die beanspruchte Datenmenge sich der 100%-Marke, wird der Statuswechsel durch einen Farbwechsel signalisiert. Die Codierung wechselt von Grün auf Rot. © 2004 Microsoft. siehe http://www.msn.de Redundante CodierungRedundante Codierung bedeutet, eine Codierungsmethode durch eine weitere, zusätzliche zu ergänzen, um eine effektives Ergebnis sicher zu stellen. Die Anwendung redundanter Codierung im Multimedia-Design ist durchwegs verbreitet. Um eine Redundanz zu gewährleisten wird die Darstellung unterschiedlicher Informationszustände nicht allein durch – gegebenenfalls unterschiedliche – Farben gekennzeichnet, sondern auch durch unterschiedliche Formen. Redundante Codierung PCIm vorliegenden Beispiel erfolgt die Codierung bei der Auswahl einzelner Menüpunkte nicht nur durch die farbliche Auszeichnung, sondern gleichzeitig durch die schriftliche Bezeichnung sowie durch Veränderung des Icons und bestätigt so dem Benutzer dreifach. © 2004 virgin.com. siehe http://www.virginware.it/virgin.asp Redundante Codierung PDA_PhoneIm vorliegenden Beispiel erfolgt die Codierung bei der Auswahl einzelner Menüpunkte nicht nur durch die farbliche Auszeichnung, sondern gleichzeitig durch die schriftliche Bezeichnung sowie durch Veränderung des Icons und bestätigt so dem Benutzer dreifach. © 2004 virgin.com. siehe http://www.virginware.it/virgin.asp autoBei Zeichenprogrammen werden die Zeichenwerkzeuge oft in Form von Icons dargestellt. Würden so viele Icons benötigt, soass deren große Anzahl ein Problem bei der Unterscheidung darstellen könnte, empfiehlt es sich als zusätzliche, redundante Codierung mit Farbe zu arbeiten. Auch Farbe selbst kann als Form des redundanten Codierens wirkungsvoll sein. Redundanz bei Börsenindex PCJene Börsenindizes deren Wert am letzten Tag gefallen ist, werden rot, jene deren Wert gestiegen ist, grün angezeigt. Lediglich durch farbliche Codierung wären diese Informationsmerkmale aber nicht verständlich. Zusätzlich angedeutet, also redundant codiert, wird dieser Umstand durch die Richtungsweisung des Pfeiles. © Copyright 2000-2004 FinancialContent, Inc. siehe http://www.financialcontent.com/web/labs/fclab_flash.shtml Redundanz bei Börsenindex PDA_PhoneJene Börsenindizes deren Wert am letzten Tag gefallen ist, werden rot, jene deren Wert gestiegen ist, grün angezeigt. Lediglich durch farbliche Codierung wären diese Informationsmerkmale aber nicht verständlich. Zusätzlich angedeutet, also redundant codiert, wird dieser Umstand durch die Richtungsweisung des Pfeiles. © Copyright 2000-2004 FinancialContent, Inc. siehe http://www.financialcontent.com/web/labs/fclab_flash.shtml LITERATURQUELLEN1autowirt2002 gali1993 gali2002 shne1998 pree1996 niels1993 2autowirt2002 gali1993 gali2002 shne1998 pree1996 niels1993 |
(empty) |