Designfehler: Unterschied zwischen den Versionen
(12 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
[[category:Informationsdesign]] | [[category:Informationsdesign]] | ||
+ | [[category:Problemfelder der Informationswissenschaft]] | ||
+ | ==Einführung== | ||
− | + | [[definition::Designfehler verhindern oder erschweren die effektive und effiziente Nutzung von Daten durch den User. Sie können z.B. strukturell bedingt sein.]] | |
− | Dieser Artikel behandelt Designfehler im Sinne des [[Informationsdesign|Informationsdesigns]], also der Aufbereitung von Informationen zur effektiven und effizienten Nutzung. Wichtigster Aspekt des Informationsdesigns ist die [[Usability]] ( | + | Dieser Artikel behandelt Designfehler im Sinne des [[Informationsdesign|Informationsdesigns]], also der Aufbereitung von Informationen zur effektiven und effizienten Nutzung. Wichtigster Aspekt des Informationsdesigns ist die [[Usability]] (auch: Gebrauchstauglichkeit), die Orientierung beim Design sollte stets an der Benutzergruppe/Benutzerrezeption erfolgen. |
Die aufgeführten Designfehler betreffen [[Informationssysteme]] allgemein, also sämtliche Umgebungen, wo eine Mensch-Maschine-Interaktion erfolgt, wie z.B. Webseiten, Datenbanken, Suchmasken, graphischen Software-Oberflächen, etc. | Die aufgeführten Designfehler betreffen [[Informationssysteme]] allgemein, also sämtliche Umgebungen, wo eine Mensch-Maschine-Interaktion erfolgt, wie z.B. Webseiten, Datenbanken, Suchmasken, graphischen Software-Oberflächen, etc. | ||
Zeile 65: | Zeile 67: | ||
*:*Verbindungsgeschwindigkeit | *:*Verbindungsgeschwindigkeit | ||
*:*Plugins | *:*Plugins | ||
− | eine Rolle. Keine unbekannten Variablen sollten beim [[Webdesign|Design]] als Voraussetzung vorgegeben oder gar erzwungen werden. Hierzu | + | eine Rolle. Keine unbekannten Variablen sollten beim [[Webdesign|Design]] als Voraussetzung vorgegeben oder gar erzwungen werden. Hierzu zählen auch die Erzwingung eines Eingabegeräts (Tastatur, Maus) und die Nichtberücksichtigung körperlich eingeschränkter Nutzer. |
==Gestaltungsmerkmale== | ==Gestaltungsmerkmale== | ||
− | ===Typographie=== | + | ===[[Typographie]]=== |
*Lange Textzeilen: Insbesondere bei längeren Texten führen zu lange Zeilen zu erschwerter Lesbarkeit. Lediglich ca. acht Zentimeter Textbreite sind vom menschlichen Auge gleichzeitig wahrnehmbar. Je länger die Zeile wird, desto schwieriger ist es, dem Text zu folgen und die Zeile im Text zu fixieren. Es werden Augen- und/oder Kopfbewegungen nötig, was auf Dauer zu Ermüdung führt. | *Lange Textzeilen: Insbesondere bei längeren Texten führen zu lange Zeilen zu erschwerter Lesbarkeit. Lediglich ca. acht Zentimeter Textbreite sind vom menschlichen Auge gleichzeitig wahrnehmbar. Je länger die Zeile wird, desto schwieriger ist es, dem Text zu folgen und die Zeile im Text zu fixieren. Es werden Augen- und/oder Kopfbewegungen nötig, was auf Dauer zu Ermüdung führt. | ||
Zeile 112: | Zeile 114: | ||
'''Falscher und übertriebener Farbeinsatz führt zur Ablenkung der Wahrnehmung von der Information''' | '''Falscher und übertriebener Farbeinsatz führt zur Ablenkung der Wahrnehmung von der Information''' | ||
+ | |||
+ | (Siehe auch: [[Farben]]) | ||
Zeile 124: | Zeile 128: | ||
'''Falscher Einsatz von Bildern führt zu überflüssigen kognitiven Verarbeitungsprozessen beim Benutzer.''' | '''Falscher Einsatz von Bildern führt zu überflüssigen kognitiven Verarbeitungsprozessen beim Benutzer.''' | ||
+ | (Siehe auch: [[Zusammenwirken von Text und Bild]]) | ||
− | |||
+ | ===Bedienelemente/[[Icon|Icons]]=== | ||
*Mangelnde Kontextualisierung: Bedienelemente müssen eindeutig sein und die zugehörigen Befehle genau abbilden. | *Mangelnde Kontextualisierung: Bedienelemente müssen eindeutig sein und die zugehörigen Befehle genau abbilden. | ||
Zeile 134: | Zeile 139: | ||
*Fehlende Kontinuität: Gleiche Funktionen dürfen nicht durch verschiedene Zeichen repräsentiert werden. | *Fehlende Kontinuität: Gleiche Funktionen dürfen nicht durch verschiedene Zeichen repräsentiert werden. | ||
− | *Sinnerweiternde Abstrahierung: [[Ikonogramme|Icons]] sollen abstrakte Begriffe piktografisch darstellen (durch Metaphern aus der realen Welt). Die Abstrahierung muss dabei auf | + | *Sinnerweiternde Abstrahierung: [[Ikonogramme|Icons]] sollen abstrakte Begriffe piktografisch darstellen (durch Metaphern aus der realen Welt). Die Abstrahierung muss dabei auf Sinn reduzierende Weise erfolgen, und nicht Sinn erweiternd. |
*Irreführende Darstellungen: Je nach Vorwissen der Nutzer werden abstrahierende Darstellungen aus dem Alltagsbereich mit unterschiedlichen Begriffen assoziiert. | *Irreführende Darstellungen: Je nach Vorwissen der Nutzer werden abstrahierende Darstellungen aus dem Alltagsbereich mit unterschiedlichen Begriffen assoziiert. | ||
Zeile 148: | Zeile 153: | ||
*Eibl, Maximilian; Reiterer, Harald; Stephan, Peter Friedrich; Thissen, Frank (Hrsg.): Knowledge Media Design – Theorie Methodik, Praxis. München: Oldenbourg Verlag 2005 | *Eibl, Maximilian; Reiterer, Harald; Stephan, Peter Friedrich; Thissen, Frank (Hrsg.): Knowledge Media Design – Theorie Methodik, Praxis. München: Oldenbourg Verlag 2005 | ||
*Bonsiepe, Gui: Interface Design neu begreifen. Mannheim: Bollmann Verlag 1996 | *Bonsiepe, Gui: Interface Design neu begreifen. Mannheim: Bollmann Verlag 1996 | ||
− | *Ossietzky, Carl von: Multimedia-Systeme. Begleitbuch zur Vorlesung. Universität Oldenburg, Fachbereich Informatik 1998. Online verfügbar unter: [http://www-is.informatik.uni-oldenburg.de/%7Edibo/teaching/mm97/buch/node65.html] (Letzter Zugriff: | + | *Ossietzky, Carl von: Multimedia-Systeme. Begleitbuch zur Vorlesung. Universität Oldenburg, Fachbereich Informatik 1998. Online verfügbar unter: [http://www-is.informatik.uni-oldenburg.de/%7Edibo/teaching/mm97/buch/node65.html] (Letzter Zugriff: 02.08.2010) |
− | *Luckhardt, Heinz-Dirk: Zum Informationsdesign von Texten. In: Virtuelles Handbuch Informationswissenschaft. Online verfügbar unter: [http://is.uni-sb.de/studium/handbuch/textinfodesign] (Letzter Zugriff: | + | *Luckhardt, Heinz-Dirk: Zum Informationsdesign von Texten. In: Virtuelles Handbuch Informationswissenschaft. Online verfügbar unter: [http://is.uni-sb.de/studium/handbuch/textinfodesign] (Letzter Zugriff: 02.08.2010) |
+ | |||
+ | --[[Benutzer:Boris Seewald|Boris Seewald]] 15:15, 16. Mär 2006 (CET) | ||
+ | |||
+ | ==Verwandte Begriffe== | ||
+ | |||
+ | * [[broader::Usability]] | ||
+ | * [[broader::Informationsdesign]] |
Aktuelle Version vom 2. August 2010, 12:05 Uhr
Inhaltsverzeichnis
Einführung
Designfehler verhindern oder erschweren die effektive und effiziente Nutzung von Daten durch den User. Sie können z.B. strukturell bedingt sein.
Dieser Artikel behandelt Designfehler im Sinne des Informationsdesigns, also der Aufbereitung von Informationen zur effektiven und effizienten Nutzung. Wichtigster Aspekt des Informationsdesigns ist die Usability (auch: Gebrauchstauglichkeit), die Orientierung beim Design sollte stets an der Benutzergruppe/Benutzerrezeption erfolgen.
Die aufgeführten Designfehler betreffen Informationssysteme allgemein, also sämtliche Umgebungen, wo eine Mensch-Maschine-Interaktion erfolgt, wie z.B. Webseiten, Datenbanken, Suchmasken, graphischen Software-Oberflächen, etc.
Grundlagen/Layout
Struktur
- Inkonsistenz: Elemente der Oberfläche weisen kein einheitliches Design auf, was zu Unstrukturiertheit und Verwirrung beim Nutzer führt.
- Mangelnde Inhaltsbezogenheit der Struktur: Die Struktur sollte den Inhalt sinnvoll einteilen und verdeutlichen.
- Nichtbeachtung von Benutzererwartungen: Benutzer haben naturgemäß bestimmte Erwartungen an eine Oberfläche, die berücksichtigt werden sollten.
- Zu starke Voraussetzung von Vorwissen: Benutzer sollten je nach Benutzergruppe nicht durch als bekannt vorausgesetztes Wissen überfordert werden.
- Komplexe/unstrukturierte Hierarchie: Hierarchieebenen sollten vom Allgemeinen zum Speziellen führen und je nach Kontext nicht zu tief gehen.
- Mangelnde Transparenz: Der Nutzer sollte über die Struktur nicht im Unklaren gelassen werden, er sollte stets wissen, wo er sich befindet und in alle Richtungen navigieren können.
Unlogische Zusammenhänge
- Asynchronität: Optische bzw. akustische Inhalte sollten einander entsprechen/ergänzen (z.B. Text und Bild, Animation und Ton).
- Mangelnde Einheitlichkeit: Unstimmigkeiten bei der räumlichen Anordnung von Objekten (Objekte im Hintergrund sind plötzlich im Vordergrund dargestellt und umgekehrt, gleiche Bedienelemente befinden sich im Verlauf der Nutzung an verschiedenen Stellen) sind zu vermeiden.
- Zu komplexe Menüstruktur: Mehr als vier Ebenen bei der Menüstruktur sind normalerweise zu unübersichtlich.
- Erzwingung starrer Bearbeitungsschritte: Die Reihenfolge der Wege bei der Benutzung sind zu stark vorgegeben, Dialogsequenzen werden in zu hohem Maße vordefiniert.
- Zu große Freiheit bei der Nutzung: Die völlige Öffnung von Handlungsspielräumen ohne Strukturierungshilfe wirkt sich verwirrend und überfordernd aus.
- Mangelnde Flexibilität: Es gibt keine oder zu geringe Möglichkeiten, Arbeitsschritte zu kontrollieren, Abläufe können nicht unterbrochen und wiederaufgenommen werden. Der Benutzer soll das Werkzeug kontrollieren, nicht umgekehrt.
- Geringe Fehlertoleranz: Irreversible Handlungen werden erlaubt, die Rückgängigmachung von Handlungen/Arbeitsschritten ist nicht möglich, oder der Benutzer wird über Korrekturmöglichkeiten im Unklaren gelassen.
- Überflüssiges Feedback: Der Benutzer muss nicht mit übermäßig auftretenden Rückmeldungen zu jedem Vorgang konfrontiert werden.
- Trial & Error-Navigation: Benutzer werden wegen mangelnder Dokumentation/Transparenz zur Vorgehensweise durch Ausprobieren verleitet.
- Fehlende Navigationshilfen: Die Navigation muss ersichtlich bzw. intuitiv sein und angemessen dokumentiert.
- Entstehen von Sackgassen: Die Navigation darf nicht zu "ausweglosen" Situationen führen.
- Lange Ladezeiten: Der Nutzer wird zur Untätigkeit gezwungen, bei Webseiten werden Wartezeiten von maximal 15 Sekunden als akzeptabel angesehen.
Technik
- Nichtberücksichtigung unbekannter Variablen: Die technischen Gegebenheiten variieren zwischen den Benutzern, so spielen beispielsweise bei der Nutzung des Webs die Faktoren
- Betriebssystem
- Browser
- Auflösung des Anzeigegeräts
- Fenstergröße
- Benutzereinstellungen (Schriftart, Farbe)
- Verbindungsgeschwindigkeit
- Plugins
eine Rolle. Keine unbekannten Variablen sollten beim Design als Voraussetzung vorgegeben oder gar erzwungen werden. Hierzu zählen auch die Erzwingung eines Eingabegeräts (Tastatur, Maus) und die Nichtberücksichtigung körperlich eingeschränkter Nutzer.
Gestaltungsmerkmale
Typographie
- Lange Textzeilen: Insbesondere bei längeren Texten führen zu lange Zeilen zu erschwerter Lesbarkeit. Lediglich ca. acht Zentimeter Textbreite sind vom menschlichen Auge gleichzeitig wahrnehmbar. Je länger die Zeile wird, desto schwieriger ist es, dem Text zu folgen und die Zeile im Text zu fixieren. Es werden Augen- und/oder Kopfbewegungen nötig, was auf Dauer zu Ermüdung führt.
- Kleine, unleserliche Schrift: Gut lesbarer Text sollte selbstverständlich sein.
- Stark gemischte Schriftarten: Eine einheitliche Schriftart sollte beibehalten werden, andere Schriftarten können sparsam zur Hervorhebung oder Abgrenzung eingesetzt werden.
- Einsatz serifenloser Schrifttypen: Serifenlose Schrifttypen gelten allgemein als schlechter lesbar als Serifenschriftarten, außer bei einer Darstellung auf stark strukturiertem Hintergrund.
- Unangemessener Zeilenabstand: Der Zeilenabstand darf weder zu groß noch zu gering sein, 20-30% der Schriftgröße Abstand ergeben ein gut lesbares Schriftbild.
- Unangepasste räumliche Aufteilung: Thematisch zusammengehörige Einheiten sollten nicht getrennt werden, da räumliche Nähe auch semantische Nähe impliziert.
Ein unruhiges, uneinheitliches Schriftbild ermüdet den Betrachter und erschwert die Informationsaufnahme.
Form
- Unangepasster Hintergrund: Eine unregelmäßige, uneinheitliche Hintergrundgestaltung, z.B. durch starke Musterung oder viele Farben führt zu erschwerter Lesbarkeit des Textes.
- Negativschrift: Weiße Schrift auf schwarzem Grund ist schlechter lesbar als die umgekehrte Variante, da Weiß sich optisch auszudehnen scheint, die Zwischenräume verengt und somit das Gesamtbild verwischt.
- "horror vacui": Bezeichnet die Angst des Designers vor leeren Flächen, in der Folge werden Oberflächen zur Gänze ausgefüllt und die Gestaltung übertrieben. Dadurch wird Sichtbares unsichtbar, wesentliche Elemente gehen im Gesamtbild unter.
- Übertriebene Dekoration: Überflüssige dekorative Elemente wie verschnörkelte Rahmen um Text drängen sich optisch in den Vordergrund.
Formal-geometrische und ästhetische Merkmale sollten bei der Gestaltung nicht im Vordergrund stehen, sondern der Inhalt.
Farbe
- Starke Farbkontraste: Bei wechselndem Farbeinsatz mit hoher Kontrastwirkung wird das Erscheinungsbild unangenehm und unruhig.
- Übertriebener Farbeinsatz: Farben sollten nur sparsam zur Hervorhebung verwendet werden.
- Sinnlose Farbveränderungen: Wechselnde Farben sind nur einzusetzen, wenn dies sinnvoll den Inhalt unterstreicht.
- Grelle Farben: Sind weitgehend zu vermeiden, besonders im Hintergrund.
- Simultankontrast: Bezeichnet die Beeinflussung einer Farbfläche durch die Umfeldfarbe, besonders bei Komplementärfarben führt dies zu verschwimmender, augenfeindlicher Optik (siehe z.B. Rot auf Grün)
Falscher und übertriebener Farbeinsatz führt zur Ablenkung der Wahrnehmung von der Information
(Siehe auch: Farben)
Bilder/Grafiken
- Visuelle Konkurrenz: Bilder in Konkurrenz zum Text ziehen stets eine höhere Aufmerksamkeit auf sich, und neigen dazu, vom Text abzulenken.
- Dekoration statt Illustration: Bilder sollten zur Verdeutlichung eingesetzt werden, und nicht zu Dekorativzwecken. Graphische Darstellungen sollten hauptsächlich kommentierend und ergänzend wirken, statt zwanghaft den Text auflockernd.
- Misslungener Bildeinsatz: Unpassende Bilder wirken irreführend oder können gar im Widerspruch zur restlichen Darstellung stehen.
Falscher Einsatz von Bildern führt zu überflüssigen kognitiven Verarbeitungsprozessen beim Benutzer.
(Siehe auch: Zusammenwirken von Text und Bild)
Bedienelemente/Icons
- Mangelnde Kontextualisierung: Bedienelemente müssen eindeutig sein und die zugehörigen Befehle genau abbilden.
- Uneindeutige Relevanz der Elemente: Funktionsauslösende Elemente sollten sich deutlich von rein dekorativen oder sonstigen Elementen unterscheiden.
- Fehlende Kontinuität: Gleiche Funktionen dürfen nicht durch verschiedene Zeichen repräsentiert werden.
- Sinnerweiternde Abstrahierung: Icons sollen abstrakte Begriffe piktografisch darstellen (durch Metaphern aus der realen Welt). Die Abstrahierung muss dabei auf Sinn reduzierende Weise erfolgen, und nicht Sinn erweiternd.
- Irreführende Darstellungen: Je nach Vorwissen der Nutzer werden abstrahierende Darstellungen aus dem Alltagsbereich mit unterschiedlichen Begriffen assoziiert.
Beim Einsatz von Icons ist die Problematik abstrakter Begriffe zu beachten, damit das Ziel der Vereinfachung erreicht wird.
Literatur
- Schulz, Angelika: Interfacedesign – Die visuelle Gestaltung interaktiver Computeranwendungen. St. Ingbert: Röhrig Verlag 1998
- Eberleh, Edmund; Oberquelle, Horst; Oppermann, Reinhard (Hrsg.): Einführung in die Software-Ergonomie. Berlin: de Gruyter 1994 (3. völlig neu gefasste Ausgabe)
- Heinsen, Sven; Vogt, Petra (Hrsg.): Usability praktisch umsetzen. Handbuch für Software, Web, Mobile Devices und andere interaktive Produkte. München: Carl Hanser Verlag 2003
- Eibl, Maximilian; Reiterer, Harald; Stephan, Peter Friedrich; Thissen, Frank (Hrsg.): Knowledge Media Design – Theorie Methodik, Praxis. München: Oldenbourg Verlag 2005
- Bonsiepe, Gui: Interface Design neu begreifen. Mannheim: Bollmann Verlag 1996
- Ossietzky, Carl von: Multimedia-Systeme. Begleitbuch zur Vorlesung. Universität Oldenburg, Fachbereich Informatik 1998. Online verfügbar unter: [1] (Letzter Zugriff: 02.08.2010)
- Luckhardt, Heinz-Dirk: Zum Informationsdesign von Texten. In: Virtuelles Handbuch Informationswissenschaft. Online verfügbar unter: [2] (Letzter Zugriff: 02.08.2010)
--Boris Seewald 15:15, 16. Mär 2006 (CET)