Gestaltungselemente anwenden

Artikel: Gestaltungselemente nach Web-Usability-Richtlinien anwenden

Progammierung vom variablen oder statischen Webseiten-Layout

Nach Web-Usability gibt es zwei Layout-Möglichkeiten um ein Website-Projekt zu realisieren. Mit einem variablen Webseiten-Layout, das sich jeweils der Größe des Browserfensters anpasst und einem statischen Webseiten-Layout, dass unverändert bleibt. Jedes Layout bietet seine vor und Nachteile für die Nutzerfreundlichkeit von Webseiten, die abhängig von der Absicht verwendet werden. Vorzugsweise wird eine Kombination aus festem und variablem Layout für Web-Projekte verwendet.

Um die in der Web-Usability geforderte Printmöglichkeit anbieten zu können, muss in eine zusätzliche CSS-Datei (CSS - dynamisches Webdesign) angelegt werden, die das Design für die Druckausgabe von Webseiten-Informationen regelt.

Farben und Farbgestaltung in der Web-Ergonomie

Farbtuben mit verschieden Farben, ein ein weißes Blatt Papier mit bunten Farbklecksen. Ein Bild für Farben und Farbgestaltung in der Web-Usability.

Das Erste, was ein Besucher auf Ihrer Homepage wahrnimmt, sind Farben. Auf die Farbgestaltung sollte daher großen Wert gelegt werden (Farben im Webdesign). Die Farbwahlt hängt von der Zielgruppe und Aussage der Website ab. Farben in der Web-Ergonomie dienen der Nutzerfreundlichkeit. Sie werden verwendet um Signalwirkung, Aufmerksamkeit zu erreichen, Orientierung zu erleichtern, Lesefreundlichkeit zu ermöglichen (z.B. schwarzer Text auf weißen Hintergrund ist schwer lesbar). Bei der Farbwahl darf Einheitlichkeit von Webseiten nicht außer Acht gelassen werden. Nach Usability-Richtlinien müssen auch Besucher mit Rot-Grün-Schwäche berücksichtigt werden. Die betroffenen Farben sollten daher nicht bei Unterscheidungsmerkmalen verwendet werden.

Benutzerfreundliche Textgestaltung

Informationen in Websites werden größtenteils durch Texte beschrieben. Texte auf Webseiten werden eher überflogen als gelesen, daher empfiehlt es sich diese Usability gerecht aufzubereiten. Optisch übersichtliche Strukturierung nach Zeitungsstil, kurze Absätze mit Überschriften, Hervorhebungen von wichtigsten Aussagen, logische Weiterleitungen und positive Formulierungen ermöglichen Nutzerfreundlich- keit und steigern die Web-Ergonimie. Da das Lesen am Monitor ermüdend für die Augen ist, sollte aus der Sicht der Usability eine Möglichkeit zum Ausdrucken von Informationen angeboten werden.

Web-Usability gerechter Einsatz von Bildern

Bilder bringen die Webseiten zum sprechen, geben Stimmungen und Emotionen wieder und ermöglichen Assoziationen mit angebotenen Produkten oder Dienstleistungen. Nach Web-Usability ist es wichtig ein Kompromiss zwischen guter Qualität und kurzer Ladezeit eines Bildes zu erreichen.

Ergonomische Gestaltung von Tabellen

Tabellen ermöglichen einen guten Überblick bei vielen Informationen. Um bei der Gestaltung von nutzerfreundlichen Tabellen die Übersichtlichkeit zu wahren, sollten diese nach Regeln der Web-Ergonomie erstellt werden. Dazu gehört die Betonung des Zeilencharakters, Einsatz von Überschriften, entsprechende Ausrichtung des Inhalts innerhalb der Tabelle, Nummerierung oder farbliche Hervorhebung von Zeilen oder Spalten.

Gestaltung von Formularen nach Web-Usability-Norm

Rotes Papier mit Struktur wurde mit geraden Schnitten und Faltung zu einer Treppe geformt. Bild für ergonomisch verschachtelte Formulare.

Textfelder, Optionsfelder, Kontrollkästchen, Listenfelder, Schaltflächen sind Bestandteile von Formularen. Formulare auf Webseiten werden genutzt um Informationen über den User an den Website-Betreiber zu übermitteln. Um Transparenz und Sicherheit für den User zu schaffen, sollten einige Gestaltungsrichtlinien nach der Usability beachtet werden.

Formulargestaltung - Texteingaben und Schaltflächenanordnung

Texteingaben werden grundsätzlich linksbündig angeordnet und dürfen die Lesegeschwindigkeit nicht stören. Muss- und Kannfelder müssen erkennbar ausgezeichnet werden. Optionsfelder, Kontrollkästchen, Listenfelder vereinfachen die Eingaben und sollten möglichst Spaltenweise angeordnet werden. Vorbelegte Eingabefelder werden nach Usability-Empfehlung ausgegraut dargestellt. Formulareingaben werden mit einer Schaltfläche an den Server übertragen. Es gibt die Möglichkeit eine Standard-Schaltfläche oder grafisch gestaltete Schaltfläche einzusetzen. Die Gestaltung der Schaltfläche wird über CSS (CSS - dynamisches Webdesign) gesteuert und muss nach Web-Ergonomie eine eindeutige Beschriftung oder Symbol enthalten.

Formulargestaltung - selbsterklärend und unterstützend

Benutzerfreundliche Formulare sind nach Web-Usability so gestaltet, dass sie selbsterklärend sind und die Nutzung von Interaktionselementen unterstützen. Kurze und eindeutige Bezeichnungen der Felder können durch Erklärungen in Tooltips oder Info-Boxen ergänzt werden. Prägnant formulierte Fehlermeldungen sollten dem User helfen Korrekturen von Eingaben effizient zu erledigen. Geringer Weiß-Anteil, erkennbare Gruppierungen, harmonisch wirkende virtuelle Linien sind weitere Merkmale eines nach Web-Usability gestalteten Formulars. Nutzerfreundliche Bedienbarkeit, kompakte und ästhetisch ansprechende Gestaltung von Formularen sind ein Muss um Seriosität wiederzugeben und den Benutzer zum Ausfüllen zu motivieren.

Fazit: Der Formulardialog gilt nach Web-Usability als Gelungen, wenn er den Benutzer bei seiner Tätigkeit unterstützt und zum erfolgreichen Abschluss der Nutzung führt!

Quelle: Heide Balzert, Webdesign & Web-Ergonomie

Autor des Artikels: Andreas Patzer, Screen- und Webdesigner (DTP-Akademie), Mediengestalter für Printmedien (IHK)

Zurück

Kommentare

Einen Kommentar schreiben