Der erste Eindruck ist entscheidend.
Der Anfang muss sitzen; er muss den Benutzer motivieren und einen positiven Eindruck hinterlassen.

"Vor allem in der Gestaltung gilt das Sprichwort: Weniger ist mehr" (Ralf Brugger)

• Nimm den Bildschirminhalt bei der Gestaltung als Einheit wahr, der Benutzer tut dies auch.
• Sei konsistent - lasse dein Produkt als eine harmonische Ganzheit erscheinen.

Die drei grundlegenden Prinzipien der visuellen Kommunikation (nach Aaron Marcus) :

• Organisationsprinzip - gib dem Nutzer eine einfache, klare und konsistente konzeptionelle Struktur.
• Ökonomieprinzip - Maximiere die Effektivität eines minimalen Sets von Hilfsmitteln
• Kommunikationsprinzip - passe deine Präsentation an die Aufnahmekapazität des Nutzers an.

Der Einsatz von Farben fügt den Informationen eine weitere Dimension hinzu.
Farben suggerieren unterschwellig eine eigene Botschaft, lösen Gefühle aus und können Aussagen unterstützen oder verfälschen.

Es gibt drei Einflüsse auf unsere subjektive Farbwahrnehmung:

• Biologische Grundlagen - wir nehmen Rot wesentlich intensiver wahr als Blau, das hängt mit der Anzahl der Sinneszellen zusammen (Rot: 64% ; Grün: 34% ; Blau: 2%)
• Kulturelle Grundlagen - die 'Farbe' Schwarz steht in der westlichen Kultur für Tod und das Böse, in Ägypten für Wiedergeburt und Auferstehung, in der hebräischen Kultur für Verständnis.
• Individuelle Grundlagen - jeder hat Vorlieben und Abneigungen gegenüber bestimmten Farben, sie sind beeinflusst durch Mode, Kultur, persönliche Erlebnisse.

Nutze Farben gezielt, um eine Aussage zu unterstreichen.

Bedenke, das Farben auf verschiedenen Computern sehr verschieden sein können.

Faktoren, die die Farbdarstellung beeinflussen:

• Einstellung der Farbtiefe (z.B. nur 256 Farben) für die Grafikkarte.
• Einstellung von Helligkeit und Kontrast am Monitor.
• Gamma-Einstellung und Farbkalibrierung des Monitors.
• Einflüsse von Computer und Betriebssystem (Apple-Computer stellen Farben heller dar als Windows-Systeme).

Der dominante Einsatz einer Farbe weckt bestimmte Assoziationen:

So denkt man bei Rot z.B. an Vitalität, Liebe, Gefahr
und bei Schwarz z.B. an Eleganz, Nacht oder Tod.

Je nach Kombination mit anderen Farben und fächenmäßigem Anteil kann eine Farbe sehr unterschiedliche Assoziationen beim Betrachter wecken.

Einige Farben haben in verschiedenen Kulturkreisen sehr unterschiedliche Bedeutungen.

(Zur Bedeutung de Farben gibt es einen Extra-Artikel, siehe unten auf dieser Seite.)

• Die Kombination verwandter Farben (Blau/Grün) wirkt ruhig und ausgeglichen.
• Die Kombination komplementärer Farben (Blau/Rot) bringt Spannung und wirkt lebendig.
• Kalte Farben werden räumlich weiter zurückliegend wahrgenommen.
• Warme Farben drängen in den Vordergrund.
• Gesättigte Farben wirken dominant.
• Farben sollten nur in begrenzter Anzahl und zueinander passend eingesetzt werden.

Das Zusammenwirken von Textfarbe und Hintergrundfarbe:

• hoher Kontrast erleichtert das Lesen
• mittlerer Kontrast wird als besonders angenehm empfunden
• Schrift auf weißem Hintergrund ermüdet schnell die Augen
• einige Farbkombinationen sind extrem ungünstig (z.B.: rot / grün)
• ungesättigte Farben / Pastelltöne als Hintergrundfarbe drängen sich nicht in den Vordergrund

Die Verwendung von Hintergrundbildern erschwert oft das Lesen. der Text sollte sich deutlich vom Hintergrund absetzen.

Eigenschaften eines brauchbaren Hintergrundbildes:

• thematisch passend
• großflächig
• geringer Kontrast
• ungesättigte Farben und Pastelltöne
• stark weich gezeichnet
• unscharf

"Der Nutzen von Information liegt in der Auswahl, nicht in der Fülle - liegt in der Relevanz, nicht im Übertragungstempo": (Frederic Vester)

Fessele die Aufmerksamkeit zunächst durch Spektakuläres und Unerwartetes und halte sie dann durch nützliche Inhalte.

• Bildschirmlesen ist mühsam, laut Untersuchung liest man unkonzentrierter, ungenauer und 25-30% langsamer.
• Lesen am Monitor wird von der Mehrzahl der Menschen bewußt oder unbewußt vermieden; längere Texte werden oft zuerst ausgedruckt und dann auf dem Papier gelesen.
• Das Lesen am Monitor ist meist eher ein Überfliegen, der Nutzer versucht, sich einen Überblick über die Inhalte zu verschaffen und die Relevanz des Textes für sich zu ermitteln.
• Kurze prägnante Texte, die wesentliche Stichwörter optisch hervorheben, erleichtern dem Benutzer das schnelle Erfassen der Inhalte.
• Texte können nicht von Print-Medien direkt übernommen werden, sie sollten für den Bildschirm völlig neu erstellt werden.

Schwerverständlichkeit beruht weniger auf dem WAS, sondern auf dem WIE, nicht auf dem Inhalt, sondern auf der Form des Textes

Verständliche Texte zeichnen sich durch folgende Merkmale aus:

• Einfachheit
  • einfacher Satzbau und klare Wortwahl
  • konkrete und anschauliche Sprache
  • Fachwörter sollten erklärt werden.
• Gliederung, Ordnung
  • klar strukturierte folgerichtige innere Ordnung
  • diese Ordnung spiegelt sich in der äußeren Gliederung wieder
  • Wesentliches wird deutlich vom Unwesentlichen unterschieden
  • es gibt einen erkennbaren 'roten Faden'.
• Kürze, Prägnanz
  • Konzentration auf das Wesentliche des Inhaltes und das Erreichen des Zieles
• anregende Zusätze
  • Anschaulichkeit und Abwechslung durch konkrete Beispiele.

• Schreibe knapp, klar und verständlich
  • kurze, auf das Wesentliche beschränkte Sätze
  • klare, konkrete und anschauliche Sprache
  • abwechslungsreiche und anregende Formulierungen
  • durch Hyperlink erklärte Fachausdrücke
  • so wenig Text wie möglich, aber nicht weniger als nötig.
• Schreibe im Inverted Pyramid Style
• Überschrift
• Zusammenfassung
• Details
• Strukturiere deinen Text inhaltlich und optisch
• der Text soll leicht zu erfassen sein
• Untergliederung in kurze Absätze
• Absatzüberschriften, die den Inhalt zusammenfassen
• Listen und Tabellen zur übersichtlichen Darstellung der Informationen
• Trenne kurze und lange Texte voneinander
• kurze Texte zum Überfliegen und mit Verweis zur Langversion
• lange Texte auch zum Ausdruck anbieten
• Nutze multimediale Darstellungsformen
• Strukturen und Zusammenhänge lassen sich gut durch Bilder darstellen
• Abläufe können als Animation oder Videosequenz dargestellt werden
• Einsatz von Ton und Musik an geeigneter Stelle

In der Typographie unterscheidet man zwischen Serifenschrift und serifenloser Schrift. Serifen nennt man die kleinen Häkchen und Schnörkel an den Buchstaben, die den Buchstaben einen spezifischen Charakter verleihen.

Serifenschriften lassen sich am Bildschirm erst ab einer Größe von mindestens 16 Punkt problemlos darstellen und damit auch lesen.

• Schriften sollten am Bildschirm mindestens 12 Punkt groß dargestellt werden.
• Es gibt spezielle Schriften für den Bildschirm, z.B. Verdana und Georgia
• Zu lange Zeilen sind nur mühsam zu lesen : 8-10 Worte (40-60 Zeichen) sind optimal
• Linksbündiger Text ist leichter lesbar als Blocksatz
• Zeilenabstand nicht zu eng wählen (1,5 - 2-fach)
• Text sollte nicht zuviel Raum einnehmen (Verhältnis von Text und Hintergrund)
• Schrifttypen im Fließtext nicht mischen
• Hervorhebungen besser in Fett als in Kursiv
• der ausschließliche Einsatz von Großbuchstaben ist zu vermeiden
• blinkende Wortgruppen sollten vermieden werden
• keine Unterstreichungen (wird als defekter Link betrachtet)
• etwas zusätzlichen Raum zwischen den Absätzen lassen
• wichtige Informationen im oberen Bereich der Seite (ohne Scrollen erreichbar) unterbringen
• auf keinen Fall horizontal durch Text scrollen lassen
• bei langen Seiten Rücksprung zum Seitenanfang ermöglichen
• bei langen Texten Möglichkeit zum Ausdruck anbieten (pdf, rtf, nicht doc)

Multimediale Hypertextsysteme gleichen eher einem Raum als einem Buch. Sie lassen sich nur effektiv nutzen, wenn es gelingt, dem Benutzer eine klare Orientierung und ein rasches und einfaches Navigieren zu ermöglichen.

Bei der Planung eines Hypertextes erleichterst du dem Benutzer den Zugang, wenn du nicht von der Systematik deines Themas oder Materials ausgehen, sondern dich in die Lage des Benutzers versetzt.
Bedenke die Erwartungen, Fragestellungen und Vorkenntnisse des Benutzers.

Sage dem Nutzer, warum er klicken soll und er wird eher dazu bereit sein.

• Texte
• Schaltflächen
• Bilder
• Teile von Bildern (HotSpots)

Merkmale einer guten Navigation

• passt zu den Zielen, Erwartungen und dem Verhalten der Nutzer.
• ist nicht dominant
• funktioniert intuitiv oder leicht verständlich; muss nicht erst erlernt werden
• ist dem Thema angepasst
• ist konsistent - zieht sich einheitlich durch das Projekt
• bietet alternative Wege zum Ziel

weitergehende Navigationhilfen

• Site Map
• Index
• Suchfunktion

Fragen beim ersten Besuch einer Site (die eine gute Site alle beantwortet):

• Absender - von wem kommen die Informationen, sind sie authentisch?
• Adressat - ist das für mich geeignet, kann ich das gebrauchen ?
• Thema - welche Inhalte werden geboten ?
• Aktualität - sind die Informationen noch aktuell ?

Fragen zur Orientierung

• wo befinde ich mich im Moment ?
• wie ist die Struktur der Site ?
• wo bin ich schon gewesen ?
• was gibt es hier alles ?
• habe ich alles gesehen ?
• wo sind für mich relevante Informationen ?

Fragen zur Navigation

• Wohin kann ich gehen ?
• wie komme ich dahin ?
• wie komme ich wieder zurück ?(kann ich meinen Weg zuückverfolgen ?)
• Wie komme ich hier schnell wieder raus ?

Toleranzgrenzen für Reaktionsdauer des Computers
(nach Robert B. Miller; 1968)

• 1/10 Sekunde - System wird als unverzüglich reagierend und fehlerfrei arbeitend wahrgenommen.
• 1 Sekunde - Computer reagiert noch ordnungsgemäß, längere Verzögerungen werden als störende Verzögerung wahrgenommen. Dauert ein Vorgang länger als 2 Sekunden, sollte das System dem Benutzer signalisieren, dass noch alles OK ist.
• 10 Sekunden - spätestens nach 10 Sekunden geben die meisten Benutzer das Warten auf, versuchen es nochmal, wählen ein anderes Navigationselement oder steigen ganz aus.

Denke beim Erstellen von Meldungen und Dialogen an reale Gesprächssituationen:

• spreche den Nutzer zielgruppengerecht an (sprich seine Sprache)
• sei freundlich und höflich
• gib in Dialogen klare Entscheidungsmöglichkeiten
• Überfordere den Nutzer nicht durch eine Fülle von Auswahlmöglichkeiten
• gehe in Dialogen Schritt für Schritt vor.

Bei der Gestaltung von Dialogen (Formularen) solltest du auf folgende Merkmale achten (ISO 9241-10) :

• Aufgabenangemessenheit
  • Dialog ist der Aufgabe angemessen
  • unterstützt optimal die Erledigung der Aufgabe
  • belastet nicht mit komplizierter Bedienung
• Selbstbeschreibungsfähigkeit
  • jeder Schritt ist klar und verständlich
  • Hilfe kann angefordert werden
  • Sprache und Informationstiefe entsprechen Vorwissen und Bedürfnissen des Benutzers
• Steuerbarkeit
  • Geschwindigkeit des Ablaufs liegt beim Benutzer
  • Eingaben können rückgängig gemacht werden
• Erwartungskonformität
  • Dialog entspricht Erwartungen des Benutzers
  • Dialoge sind konsistent
• Fehlertoleranz
  • Dialog ist fehlerrobust
  • keine unkontrollierbaren Reaktionen bei Fehleingaben
  • Fehler können vom Benutzer (interaktiv) korrigiert werden

Positive Emotionen, Spaß, Interesse, Neugierde und Begeisterung schaffen eine körperliche Hormonlage, die es unserem Gehirn erlaubt,das Wahrgenommene effektiv zu verarbeiten.
Lernen ohne Spaß und eigenes Interesse ist eine Qual und ebenso mühsam wie der Gebrauch eines multimedialen Informationssystems, das trocken und spröde reine Fakten präsentiert.

(nach Frederic Vester - Denken, Lernen und Vergessen)

"Das einzig Schreckliche auf der Welt ist Langeweile.
Das ist die einzige Sünde, für die es keine Vergebung gibt." (Oscar Wilde)

Im Gegensatz zu Texten springen Bilder sofort ins Auge und werden schneller wahrgenommen.

• Das Thema eines übersichtlichen Bildes kann in 1/100 Sekunde erkannt werden.
• Wir können uns an eine sehr große Menge von Bildern wieder erinnern; unsere Gedächtniskapazität für Bilder ist wesentlich größer als für Texte.
• Bilder werden mit geringerer gedanklicher Anstrengung verarbeitet.
• Unsere Gedächtnisleistung wird durch Bilder erhöht.
• Bilder haben einen sehr großen, oft unbewußten Einfluss auf unser Verhalten.
  

Funktion von Bildern

• Veranschaulichung - Ergänzung des Textes; das Bild hat einen inhaltlichen Bezug und zeigt etwas, was der Text beschreibt.
• Strukturierung - Veranschaulichung der Struktur des Themas. Das Bild dient der Orientierung und ist oft auch gleichzeitig Navigationselement.
• Dekoration - das Bild umrahmt den eigentlichen Inhalt und bietet einen ästhetischen Kontext, der auf Benutzer motivierend wirken sollte. Dekorative Elemente ihrer selbst willen verlieren ihre positive Wirkung.

• Icons und Texte sollten sich nicht ausschließen, sondern ergänzen.
• Verwende Icons sparsam und gezielt.
• Gruppiere Icons auf dem Bildschirm, bringe eine räumliche und logische Ordnung in diese Gruppierung.
• Bedenke, dass Icons kulturell unterschiedlich interpretiert werden.
• Icons sollen nicht schön sein, sondern funktional.
• Icons sollten auf das Wesentliche reduziert sein und nicht zur Dekoration eingesetzt werden.

• Ton sollte ergänzen und nicht konkurieren.
• Der Benutzer sollte steuern und wählen können, ob und was er hören will.

• lasse dem Benutzer die Wahl, ob er ein Video ansehen will
• teile immer vorher Dauer und Dateigröße (Ladedauer) mit
• kurze Sequenzen bis 30 Sekunden sind akzeptabel
• ab einer Minute wird es anstrengend
• Einführungsvideos sollten immer überspringbar sein
• Stelle dem Benutzer Steuerungselemente zur Verfügung (Stop, Start (Replay))

Bereits wenn du eine Homepage mit allgemein kostenfrei abrufbaren Seiten bereitstellst, bist du laut Teledienstgesetz Anbieter eines Teledienstes. Damit bist du verpflichtet ein Impressum zu haben.

Die Impressumspflicht beginnt, sobald eine Website dauerhaft im Netz abrufbar ist und bleiben soll.

• Name
• Anschrift
• Angaben, die eine schnelle elektronischen Kontaktaufnahme und unmittelbare Kommunikation ermöglichen
• e-Mail Adresse

Laut Teledienstgesetz müssen die Angaben im Impressum

• leicht erkennbar,
• unmittelbar erreichbar,
• und ständig verfügbar sein.

Hierfür eignet sich ein Link mit der Bezeichnung Impressum, Kontakt oder Über uns.

Der Inhalt muss ohne Browsermodifikation oder PlugIn lesbar sein; Grafiken mit dem Text sind ungeeignet, da nicht behindertengerecht.

Wer einen Link setzt, ohne die Inhalte zu kommentieren oder sich in anderer Weise den Inhalt der verlinkten Seite besonders zu Eigen zu machen, muss in der Regel auch ohne Disclaimer nicht für solche Links haften.

Wer den Eindruck erweckt, mit den verlinkten Inhalten in Zusammenhang zu stehen, kann durch den Disclaimer eine Haftung nicht ausräumen.

Disclaimer:
"...Hiermit distanzieren wir uns ausdrücklich von allen Inhalten aller gelinkten Seiten auf unserer Homepage und machen uns diese Inhalte nicht zu Eigen."

Als Website-Betreiber bist du für Inhalte verantwortlich, die Besucher in Gästebüchern und Foren hinterlassen.

Laut rechtskräftigem Urteil hat ein Informationsanbieter nach dem Teledienstegesetz das Gästebuch in Abständen von höchstens einer Woche zu überprüfen.