Wer hätte gedacht...
| 1.
2. 3. 4. |
Ein ergonomisches Informationsangebot sollte es den Anwendern ermöglichen,
möglichst schnell und bequem zu den
gesuchten Informationen zu gelangen. Eine gelungene Navigation setzt eine geeignete inhaltlich-fachliche Strukturierung des Webangebots voraus. Für Anwender, die unterschiedliche Fähigkeiten und Aufgaben
haben, sollten verschiedene Navigationsarten angeboten
|
Selbstbeschreibungsfähigkeit
"Ein Dialog ist selbstbeschreibungsfähig, wenn jeder einzelne
Dialogschritt durch Rückmeldung des Dialogsystems
unmittelbar verständlich ist oder dem Benutzer auf Anfrage erklärt
wird."
Erwartungskonformität
"Ein Dialog ist erwartungskonform, wenn er konsistent ist und den Merkmalen
des Benutzers entspricht, z. B. seinen Kenntnissen aus dem Arbeitsgebiet,
seiner Ausbildung und seiner Erfahrung sowie den allgemein anerkannten
Konventionen."
Steuerbarkeit
"Ein Dialog ist steuerbar, wenn der Benutzer in der Lage ist, den Dialogablauf
zu starten sowie seine Richtung und Geschwindigkeit zu beeinflussen, bis
das Ziel erreicht ist."
Fehlertoleranz
"Ein Dialog ist fehlertolerant, wenn das beabsichtigte Arbeitsergebnis
trotz erkennbar fehlerhafter Eingaben entweder mit keinem oder mit minimalem
Korrekturaufwand seitens des Benutzers erreicht werden kann."
Individualisierbarkeit
"Ein Dialog ist individualisierbar, wenn das Dialogsystem Anpassungen
an die Erfordernisse der Arbeitsaufgabe sowie an die individuellen Fähigkeiten
und Vorlieben des Benutzers zulässt."
Lernförderlichkeit
"Ein Dialog ist lernförderlich, wenn er den Benutzer beim
Erlernen des Dialogsystems unterstützt und anleitet.".
Und das bezieht sich sowohl auf den Computer, seinen Prozessor, die Festplattengeschwindigkeit, als auch auf die Arbeitsoberfläche, das Betriebssystem, die Browsersoftware und - nicht zu vernachlässigen - die Internetanbindung.
Ausgehend von einem möglichst allen Usern gerecht werdenden Angebot ergibt sich eine grundsätzliche Anforderung an die Gestaltung von Websites: "In general, try and keep the user interface simple and uncluttered."
Die Darstellbarkeit des Web-Angebots muss gewährleistet sein, damit sie von möglichst allen Usern betrachtet werden kann:
Die Seiten müssen mit einer Bildschirmauflösung von
640 * 480 Pixel betrachtet werden können, denn es gibt User, die mit
so niedrigeren Auflösungen im Netz unterwegs sind: Auch bei einer
Ausrichtung auf 800*600 Pixel (alles andere verbietet
sich eigentlich) sollte darauf geachtet werden, daß 1. waagerechtes
Scrollen vermeiden wird und 2. Navigationshilfen nicht
außerhalb der kleinsten Auflösung liegen.
...näheres dazu hier
Eine Vorselektion, hier lang mit 800*600, hier lang mit 1024*800 ist
genauso wie eine Browserfestlegung eine zu
vermeidende Vorselektion (es soll vorkommen, daß die Auflösung
des Monitors dem User nicht bekannt ist!).
Geringe Ladezeiten: Die Ladezeiten reduzieren sich, wenn man
Grafiken im Browser abstellt.
Daher müssen die Seiten auch ohne Grafiken verständlich
zu navigieren sein, der Inhalt beim User ankommen.
Die Seiten müssen möglichst unabhängig von den persönlichen Einstellungen des Benutzers gestaltet werden.
Auch ohne die Installation von zusätzlicher Software sollten die Seiten auskommen: Sie schreckt User ab, ist unter Umständen nur für bestimmte Betriebssysteme geeignet. ...näheres zu den Grundvoraussetzungen
Verwendete Grafiken sollten den Inhalt unterstützen: überflüssige
Grafiken vermeiden, denn was lokal schnell lädt, braucht
über das Netz immer länger
Userführung: der User muß an die Hand genommen werden, er darf nicht raten müssen, wo er weiter klicken kann. (siehe auch: Psychologische Fakten und Navigation)
Ein einheitliches Gesamtbild ist anzustreben.
Zuviele verschiedene Elemente auf einer Seite führen zu einer Überforderung des Users.
Hierarchische oder menü-orientierte Navigation
Diese Form macht es dem Besucher leicht sich zu orientieren. Prinzip:
von oben nach unten bewegen, von allgemeinen zu spezifischen Infos! Beispielseite:
www.immobilienscout24.de
(externer Link!)
Lineare Navigation
Schränkt den Besucher in seiner Bewegungsfreiheit stark
ein, kann sich vor und zurück bewegen, eignet sich jedoch für
Informationen, die auch offline eine solche haben z.B. Erläuterungen,
Installationsanweisungen, Diashow etc.
Lineare Navigation mit Alternativen
Hebt die starre lineare Struktur auf und bietet Verzweigungen an, die
an einer Stelle wieder zurück auf den Hauptweg führen
Kombination von linearer und hierarchischer Navigation
Eignet sich für Internetpräsentationen, die hierarchisch
strukturierten Inhalt anbieten, also vertiefendene Infos zum jeweiligen
Thema, und diesen mit linearen Dokumenten verbinden
Sowohl hierarchische Menüstrukturen, das von Windows bekannte Explorermodell
wie auch Imagemaps als visuelle Navigation haben Vor- und Nachteile, vermögen
aber sehr komplexe Angebote auch nur unzureichend zu erfassen:
Hier bieten sich
Ergänzende Navigationssysteme
an.
Inhaltsverzeichnis
Bietet sich an für große hierarchisch organisierte Seiten
Index
Detaillierte, alphabetische Begriffsliste, die mehr Einträge und
weniger Hierarchie-Ebenen als ein Inhaltsverzeichnis hat. Sollte mit einer
internen Suchmaschine verbunden werden, gut für Nutzer, die bereits
wissen, was sie suchen.
Sitemaps
Illustiert graphisch die Architektur der Seite, bei umfangreicheren
Seiten allerdings nicht ratsam, da man nicht jede Seite auf der Hauptseite
graphisch darstellen kann.
Suchfunktion
eine seiteninterne Schlagwortsuche für das eigene Angebot
weiteres zu verschiedenen Navigationsarten
| Vorteile
Feste Bereiche definierbar
|
Nachteile
Querverweise sind nicht möglich
|
Der Benutzer sollte schon vor der Wahl eines Links wissen, was ihn erwartet.
Das Wichtigste als Link hervorheben:
Damit man einen Text nach Links überfliegen kann, sollten nur
inhaltlich relevante Textteile durch Links unterstützt werden.
Besser ist es allerdings externe Links am Ende eines Textes bzw.
in einem gesonderten Bereich bzw. Feld auf der Website
aufzuführen, womit sie für den User als externe Links erkennbar
werden:
"If you have links that relate to your text, put them at the end, like
footnotes. Give your visitors a chance to read your text before sending
them somewhere else."
Links müssen ein andere und einheitliche Farbe haben, die nach dem erstmaligen Gebrauch erhalten bleibt
Neue Fenster durch Links zu eröffnen ist keine gute Lösung:
Ein hoher Kontrast zwischen Text und Hintergrund verbessert die Lesbarkeit der Seiten. Die beste Lesbarkeit ist bei einer schwarzen Schrift auf weißem Grund gegeben (der sog. "Positivdarstellung").
Möglichst kurze Texte, die pro einzelnem Satz nur einen Gedanken beinhalten.
Monotone Textwüsten sind ermüdend für das Auge, das nicht soviele Informationen am Bildschirm wahrnehmen und verarbeiten kann. Deswegen kann eine sinnvolle Struktur mit Hervorhebungen durch Fettdruck und Überschriften das Lesen erleichtern. Unterstreichungen vermeiden, die üblicherweise auf einen Link hinweisen
In Listen sollten Nummerierungen oder sogenannte Bullets ( • ) benutzt werden.
Für die Lesbarkeit eines Textes im Web sind auch Zwischenräume und Abstände im Text nützlich: Vielfach werden Webseiten nämlich auf ihren Inhalt hin "gescannt", wichtiges sollte sofort in Schlagwortren vermittelt werden.
Es sollte eine nicht zu große Satzbreite (=Bildschirmbreite) gewählt
werden, da der Leser die Linie beim Zeilenwechsel
verliert.
Texte sollten mindestens zweispaltig angeordnet werden.
Journalistischer Schreibstil: Eine gute Orientierung bietet die Hörfunksprache.
Auf eine aktive anstatt einer passiven Satzkonstruktion zurückgreifen, keine überflüssigen oder redundantenSätze oder Satzteile verwenden.
Beim Lesen entsteht ein innerer Monolog, daher sollten Texte persönlich, lebendig und abwechslungsreich sein:
Beispiel:
Beschreibend (schlechtes Mittel)
Das Produktangebot der Firma X zeichnet sich durch eine hohe
Anwenderfreundlichkeit aus.
Die Firma X begrüßt Ihre Kunden und auf ihrer Website.
Das Internet-Team hofft, den Kunden der Firma X interessante Informationen
und optimalen Service bieten zu können.
Dialog-ähnlich (bevorzugte Alternative):
Wir legen Wert darauf, daß Sie unsere Produkte leicht bedienen
können
Wir begrüßen Sie auf unserer Website.
Wir möchten Ihnen gerne interessante Informationen und optimalen
Service bieten.
Tips:
Eine Angabe zum zu verwendenden Schrifttyp (Font) ist notwendig,
da ansonsten der Browser die vom Nutzer als Standardschrift festgesetzte
Schrift verwendet.
Nur folgende Schriften kennt jeder Browser:
Windows: Times New Roman, Arial
Mac: Times, Helvetica
Die Polarität ist im Prinzip egal (weiß auf schwarz, schwarz auf weiß). Weiß auf schwarz läßt sich allerdings schlecht ausdrucken.
Kursivschrift ist zu vermeiden, da sie am Bildschirm schwer zu lesen.
Ebenso sind NUR GROSSBUCHSTABEN schwer zu lesen, langsamere Verarbeitung.
Unterstreichungen sollten Links vorbehalten sein.
Die Schriftgröße für den Standardtext unverändert lassen (ist Plattform abhängig, erzielt daher nicht immer den gewünschten Effekt).
Schriften ohne Serifen (Arial) sind auf dem Bildschirm besser lesbar!
zur Verwendung von Schriften ausführlicher: http://www.will-harris.com/fonts/freefonts.htm (externer Link!)
Vielfach werden Websites ausgedruckt - ein Weg Geschriebenes schneller
kommentieren zu können.
Daher müssen bei einem Webangebot die Seiten auf ihre Druckausgabe
hin überprüft werden.
Gerade die Verwendung von Frames kann dazu führen, daß das gedruckte Bild vom Bildschirm abweicht.
Auch ein dunkler Hintergrund macht sich in der Druckversion nicht sehr gut.
Einen abweichenden Einsatz von standardisierten Farben vermeiden, nur
harmonisierende
Farben verwenden,
denn der Blick auf eine Website verrät normalerweise schon sehr
viel von ihrer Struktur.
Links lassen sich schnell feststellen, werden sie doch meistens
in
ihren ursprünglichen Farben belassen.
Auch scharfe Farbkontraste strikt vermeiden :
"Don't make your page so that it can only be viewed by teenagers".
Es sollten immer reine Farben verwendet werden, d.h. keine Farben verwenden, die sich auf dem Bildschirm aus einem Muster zusammensetzen.
Die Wahl von Farben beeinflußt auch die Informationsaufnahme:
Für die Texte gilt: schwarz auf weiß und schwarz auf gelb werden am besten wahrgenommen
Farbkontraste:
Animierte GrafikenJPEGs (eher für für strukturiertere Bilder (Photos) geeignet, Verlust an Qualität) GIFs (eher für Graphiken, Bilder mit Farbflächen): mit Vorsicht zu benutzen (Gerade professionelle Seiten!), da sie rechtlich geschützt sind, lieber PNGs Interlaced GIFs und Progressive JPEGs einsetzen (sukzessiver Bildaufbau) Vorsicht bei alten Browsern und langsamen Rechnern (486er). Tipp: 16-farbige GIFs liefern für viele kleine Grafiken ein erstaunlich gutes Ergebnis und bieten oft die beste Kompression Grafiken mehrfach verwenden. (braucht nur einmal übertragen werden. Daher sind wiederkehrende Icons, Logos und Bullets besonders gut für das WWW-Design).
Animierte Grafiken vermeiden werden, sofern es sich um ein textbasiertes
Angebot handelt:
Sie führen zu unwillkürlichen Ablenkungen vom Text, stören
beim Suchen von Informationen, sollten nur sehr sparsam verwendet werden.
Grund dafür ist ein biologischer Alarmreflex, der auf Bewegungen
in der Umwelt reagiert, Werbebanner erreichen auf diese Weise natürlich
ihr Ziel!
Java, Javascript, DirectX, MacromediaFlash können nicht von jedem Browser interpretiert werden.
Java ist eine Programmiersprache, die von der Firma Sun entwickelt wurde.
Mit Java können kleine Programme, sogenannte Applets erstellt
werden. Jedoch ist Java keine einfache Sprache und Sie müssen programmiertechnische
Kenntnisse besitzen.
Der grosse Vorteil ist, dass die Java-Applets (bei den wichtigsten
Browsern wurde diese Programmiersprache integriert) auf jedem Computer
funktionieren.
Eine der häufigsten Anwendungen von Java sind Rollover-Buttons,
also Schaltflächen, die sich verändern, wenn der Surfer mit der
Maus darüber rollt.
JavaScript
Der Unterschied zu Java ist, dass JavaScript nicht mit Applets, sondern
im HTML-Code geschrieben wird (also für das WWW entwickelt). JavaScript
ist jedoch softwareabhängig! Zufriedenstellend funktioniert es meistens
nur im Netscape Navigator.
Jeder Browser interpretiert den JavaScript-Befehl anders (es bestehen
sogar Unterschiede zwischen den einzelnen Versionen des gleichen Browsers!).
Im schlimmsten Fall kann der Browser die Seite nicht dar stellen.
JavaScript wird auf WebSites z.B. für Rollover-Buttons, also um
Grafiken gegen Andere aus zu tauschen, sobald der Mauszeiger darüber
fährt (siehe www.pascalprosper.ch); um Formulare auf Vollständigkeit
und Fehler vor dem Abschicken zu überprüfen; um Animationen auf
WebSites zu realisieren; um Windows mit einem anderen Inhalt innerhalb
der Seite zu öffnen usw
-Multimedia:
erfordern meist Plug ins, die erst von Anbieterseiten herruntergeladen
werden müssen
-Sounds: verschiedene Formate: mp3 (WinAmp), wave (WinAmp), ra
(RealAudioplayer)-
-Video: Mpeg,
(Shockwave-Player)