Der Druck dieser Seite ist nicht vorgesehen

Tips für die benutzerfreundliche Gestaltung von Webseiten

Obwohl die Leistung der Computer über viele Jahre ständig zugenommen hat, bleibt es ein wichtiges Anliegen an die Gestaltung von Webseiten, dass sie auch Benutzern mit älterer oder weniger leistungsfähiger Hard- und Software zugänglich sind.
Das gilt insbesondere, wenn man z.B. damit beschäftigt ist, das Angebot für eine öffentliche Einrichtung bereitzustellten, das als "Bürgerportal" angelegt ist... oder wenn man mit der Internetseite Geld verdienen will, denn auch dann geht es darum, möglichst keinen potentiellen Kunden zu vergraulen.

Sicher kann man im privaten Bereich selbst (oder auch selbstherrlich...) festlegen, dass bestimmte Hard- und Softwareanforderungen nicht unterschritten werden können, weil sich das Angebot an einen bestimmten Personenkreis richtet oder richten soll und es ein erwünschter Nebeneffekt ist, andere Benutzer auszuschließen. Will oder muss man aber alle Benutzer erreichen können, so bleibt einem nichts Anderes übrig als die konsequente Anwendung des Rezeptes: "Weniger ist mehr !"

Hierbei sollte man zunächst das zu erwartende Benutzerverhalten in Rechnung stellen: Zwar erlauben die schnellen Prozessoren und die heute verfügbaren hohen Bandbreiten die Präsenz multimedial aufgebauter Webseiten mit Musik, Audiounterstützung, Animationen und Videos, aber es sollte sich herumgesprochen haben, dass nicht alles gemacht werden muss, was gemacht werden kann.
Das Interesse der Nutzer an einer Webseite ist in der Regel nur kurz und schwindet rasch wieder, denn in erster Linie wird nach schnell verfügbarer Information gesucht. Das Staunen über tolle Effekte und kinoreife Darbietungen ist allenfalls bei Neulingen oder Teenies ("coooole Seiten") anzutreffen, ansonsten darf man getrost mit Stirnrunzeln rechnen.

Die meisten Anwender sind nur genervt von allem, was blinkt oder sich hektisch bewegt. Selbst für viel Geld realisierte Flash-Intros werden von den Anwendern am liebsten übersprungen.
Die von den Usern im Allgemeinen tolerierte Ladezeit von Internetseiten liegt bei 5 bis 8 Sekunden. Ist die Seite dann nicht fertig und funktionierend geladen, bricht der Besucher den Vorgang ab - oder ihm wird, wenn er auf die in dem betreffenden Angebot vermutete Information angewiesen ist, die Zornesader schwellen und er wird mehr oder weniger leise vor sich hinschimpfen: "Diese Idioten...!"
Man darf nicht als Standard voraussetzen, dass jeder User über einen DSL-Anschluss verfügt. Immer noch sind eine ganze Menge Anwender auf Modem und ISDN angewiesen.
Sicher gibt es gute Gründe, mit seinem Webangebot nicht immer so zurückhaltend zu sein, dass auch VGA-Bildschirme mit 640 x 480 Bildpunkten und 16 Farben alles richtig darstellen können... na schön, heutzutage vielleicht ab 800 x 600... und auch die Dateigrößen dürfen schon mal die 28k8-Modemklasse verlassen, wenn es sich nicht wirklich vermeiden lässt, also z.B. bei einer Bildergalerie.

Auch ein weiterer Gesichtspunkt ist bei der heutigen Entwicklung nicht zu unterschätzen: Die vom Basis-HTML abweichenden Anforderungen wie Java-Applets und Macromadia Flash werden von der kriminellen Szene gern und oft zur Täuschung unbefangener oder unvorsichtiger Anwender genutzt. Das geht so weit, dass mittels Macromedia Flash täuschend echt gefälschte Seiten dem User vormachen, er befinde sich auf der Transaktionsseite seiner Bank... so werden dann PIN und TAN einsfixdrei "abgephischt".
Man sollte daher ruhig einkalkulieren, dass der sicherheitsbewusste User keine solchen Applikationen und auch keine Active-X-Steuerelemente aktivieren wird. Teile des Webangebots, die auf solche Techniken setzen, werden daher nicht von allen Anwendern zur Kenntnis genommen... und das willl man ja nun gerade nicht erreichen.

Die Nutzung "overdesignter" Seiten stößt daeben an verschiedene real existierende Grenzen. Fehlende oder veraltete Plug-Ins oder zu lange Downloadzeiten für Bilder, PDF-Dateien oder Musik sind genauso störend wie unübersichtlicher Seitenaufbau mit inkonsistenter Benutzerführung. Wenn dann noch Elemente verwendet werden, die zum Aufhängen oder Absturz beim Rechner des Besuchers führen, wird er die Seite sicher nicht wieder besuchen.

Der Verzicht auf unnötigen Schnickschnack erleichtert die Pflege der Seiten und macht auch die Annäherung an die Anforderungen der Barrierefreiheit einfacher.

Auch für Webseiten gilt ein wesentlicher Grundsatz, der auch bei der Softwaregestaltung ein wichtiges Gebot ist: Erwartungskonformität !

Die wichtigsten Einzelheiten

  1. Die Seiten nicht überladen:
    • Nicht mehr als zwei Spalten für den Inhalt verwenden, da ansonsten von vornherein keine Blickleitung auf das Wesentliche erreicht wird.

    • Navigationshilfen kann man ein- und ausschaltbar gestalten. Es kann nervtötend sein, wenn auf jeder Folgeseite wieder die Hälfte des zur Ver­fügung stehenden Raums von Navi­gations­ele­menten überdeckt wird, jedenfalls dann, wenn man für ein neues "Kapitel" (oder ein Unterthema) ein neues Fenster öffnet.

    • Navigationshilfen erwartungskonform einrichten. Nicht zwei oder womöglich noch mehr Navi­gations­leisten (oben und links und unten...) erstellen, sondern konsistent auf allen Seiten dieselbe "Menüzeile" oder Seitenleiste anbieten. Dabei möglichst die Sprungziele im Klartext formulieren und bei Grafikelementen als Querverweis möglichst einen "title"- und "alt"-Text hinterlegen.

    • Auf den Übersichtseiten, vor allem auf der Startseite keine großen Bilder unterbringen, da die Ladezeit sonst zu lang werden kann.

    • Nicht mehr als zwei Fingerbreit (120 Pixel) in der Höhe für statische Elemente auf dem Sei­ten­kopf (Logo) verwenden.

    • Die Startseite nicht zur Bleiwüste machen, also den neuen Besucher nicht "zutexten", sondern ihm die Auswahl lassen, was und wieviel er (auf den anderen Seiten) lesen will.

  2. Hard- und Software nicht überfordern:
    • Auch bei kleineren Bildschirm- bzw. Fensterbreiten von 800 oder 1024 Punkten sollte der Hauptinhalt der Seite ohne horizontales Rollen gelesen werden können.

    • Konsequent auf Java-Applets, VB-Script, Flash und Active-X-Elemente verzichten. Falls man sowas anbieten will, jedenfalls ein reines HTML-Angebot danebenstellen.

    • Dafür sorgen, dass auch ohne Java-Script schlüssig navigiert werden kann.

    • Download-Angebote in plattformübergreifenden Formaten und mit den niedrigsten ver­wend­baren Ver­sions­anforderungen gestalten, also
      ·   ZIP, nicht ARC, LZH, SIT oder ARJ
      ·   bei PDF die Acrobat-Kompatibilität auf Version 4.0 setzen
      ·   RTF anstelle von oder zumindest als Ausweichmöglichkeit neben proprietären Dokument-Formaten (DOC, DOCX, TMD, SDW) bereitstellen, besser aber PDF,
      ·   Bilder als GIF oder JPG, aber nicht als "progressive JPEG" und nicht als PNG anbieten

  3. Nicht den neuesten Browser voraussetzen:
    Wenn es irgend möglich ist, auf UTF-8 (Unicode) verzichten ! ASCII ist stets eine echte Teilmenge eines jeden verfügbaren lateinischen Zeichensatzes, und die konsequente Maskierung von Sonderzeichen (ä € ± usw...) erübrigt es, im Dateikopf Angaben zu DOCTYPE und CHARSET zu machen.

  4. Den Anwender nicht überfordern....
    Schriften skalierbar halten oder zumindest eine Größe festlegen, die auch von Sehschwachen gelesen werden kann. Wenn Stylesheets die Schriftart festlegen, dann stets serifenlose Schriften für Fließtexte einsetzen.

  5. ... und seine Augen schonen:
    In den letzten Jahren greift vermehrt die Unsitte um sich, Schrift in blassgrau auf hellgrauem Hintergrund erscheinen zu lassen. Wer auch nur ein Fünkchen Grips in den grauen Zellen hat, wird diesen Unsinn sicher nicht nachmachen. Auch andere Farbkombinationen sind teils mehr als grenzwertig...
    Ein paar Beispiele:

    so ist es richtig so geht es gar nicht
    Beispieltext / guter Kontrast Beispieltext / schlechter Kontrast
    Beispieltext / guter Kontrast Beispieltext / schlechter Kontrast
    Beispieltext / guter Kontrast Beispieltext / schlechter Kontrast
    guter Kontrast bei fetter Schrift Beispieltext / schlechter Kontrast
    Beispieltext / guter Kontrast Beispieltext / schlechter Kontrast
    Beispieltext / guter Kontrast Beispieltext / schlechter Kontrast
    Beispieltext / guter Kontrast Beispieltext / schlechter Kontrast
    guter Kontrast bei fetter Schrift Beispieltext / schlechter Kontrast
    Beispieltext / guter Kontrast Beispieltext / schlechter Kontrast
    guter Kontrast bei fetter Schrift Beispieltext / schlechter Kontrast

    Entsprechendes gilt natürlich auch in Bezug auf die vorherrschenden Farben des gesamten Seiten­hinter­grundes und der darauf platzierten Elemente. Hierbei sollte man stets auf die Verwen­dung von Farben erster Ordnung (rot, grün, blau, gelb, magenta, cyan) ver­zichten. Besser sind Misch­farben, die Anteile aller drei Farb­kompo­nenten enthalten.
    Zwei Beispiele:

       

Noch ein Tip am Rande: "Der Ton macht die Musik". Das heißt, dass man dem Betrach­ter den Seiten­inhalt in lesbarer Form anbietet. Die wesentlichen Grund­züge der Recht­schreibung (vor allem Groß- und Klein­schreibung, Interpunktion, Tippfehler­vermeidung) und der Text­forma­tierung (Fließtexte immer links­bündig oder im Blocksatz, niemals zeilen­weise zentriert) sollten angewendet werden.
Warum ? Ganz einfach: Wenn schon die Oberfläche den Ersteller der Seite als "nicht kompetent" outet, wird die erste Einschätzung des Inhalts von vornherein nicht positiver ausfallen können.

Alles in allem sollte man - was leider allzu selten beachtet wird - den Grundsatz beherzigen: Der Köder soll dem Fisch schmecken, nicht dem Angler !

Quellenhinweis: Einige der Gedanken, die diesem Text zugrunde liegen, stammen vom Webspezialisten Ralf Pispers.