Steigern Sie den Erfolg Ihrer Internetpräsenz durch nutzerfreundliche Webseiten-Gestaltung. Webdesigner bei patzerDesign für Frankfurt am Main und Rhein-Main gestaltet und programmiert Ihre Firmen-Homepage und Webseiten benutzerfreundlich nach Web-Usability Richtlinien.

"Form folgt Funktion - das ist oft missverstanden worden. Form und Funktion sollten Eins sein, verbunden in einer spirituellen Einheit." Frank Lloyd Wright, 1867-1959

Web-Usability: ergonomisches Webseiten-Design

Eine Website besteht aus mehreren Webseiten, die benutzerfreundlich und konsistent nach Layout-Vorgaben vom Webdesigner gestaltet werden und kurze Ladezeiten besitzen sollten. Die Webseiten werden erst durch das dem Thema entsprechende Webdesign für einen Nutzer interessant. Strukturierung einer Webseitengestaltung durch Texte, Farben, Bilder nach Usability-Vorgaben erlaubt eine freundliche und angenehmere Aufnahme von Informationen. Wenn der Benutzer sich vom Webdesign einer Homepage angesprochen fühlt und im Internetangebot sich leicht zurechtfindet, wird er zum Wiederkommen motiviert.

Das Design von Webseiten wird vom Webdesigner unter Berücksichtigung verschiedener Bildgröße, Auflösungen von Monitoren erstellt. Der angezeigte Inhalt wird zusätzlich auf die sichtbare Fläche des Browserfensters begrenzt, übriger Inhalt wird durch Scrollen erreicht. Den Scroll-Zustand gilt für Webdesign nach Web-Usability bei Möglichkeit zu vermeiden.

In den Anfangszeiten der Webseiten-Programmierung wurden Tabellen zur Erstellung eines Layouts von Webdesignern genutzt. Das vereinfachte die Arbeit, ist jedoch heute nicht mehr aktuell und wirkt sich negativ auf die Suchmaschinenoptimierung und die Webseiten-Gestaltung aus. Heute wird ein Layout-Design hauptsächlich mit Hilfe von XHTML Strict, HTML5 und CSS-Syntax dynamisch programmiert. Diese Vorgehensweise macht die Programmierung im Vergleich zwar etwas aufwändiger, rentiert sich jedoch auf Dauer.

Web-Usability: benutzerfreundliches Layout-Design

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

In der Anfangszeit von Internetgestaltung flexibles Webdesign genanntes Vorgehen bei der Programmierung von Webseiten, wird heute in der Fachsprache Responsive Webdesign (deutsch: reagierende Webseitengestaltung) genannt. Das Design einer derartigen Homepage passt sich dem jeweiligen Format eines Ausgabemediums an. Ob es sich um an Handy, ein Tablet oder Desktop handelt, die Webseiteninhalte müssen in jedem Format leserlich und übersichtlich bleiben, damit den Gestaltungsregeln für Benutzerfreundlichkeit erfüllt werden.

Um die in der Web-Usability geforderte Möglichkeit des Ausdruckens vom Webseitencontent anbieten zu können, muss eine zusätzliche Stylesheet-Datei erstellt werden, die das Design für die Druckausgabe von Webseiten-Informationen gestalten und regelt.

Web-Usability: Farben und Web-Ergonomie

Das Erste, was ein Besucher auf Ihrer Homepage wahrnimmt, sind Farben. Auf die Farbgestaltung im Webdesign muss daher großen Wert gelegt werden. Die Farbwahl hängt von der Zielgruppe und Aussage einer Website ab. Farben in der Web-Ergonomie dienen der Nutzerfreundlichkeit. Sie werden vom Webdesigner 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 die 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. Diese Farben dürfen daher vom Webdesigner nicht bei Unterscheidungsmerkmalen verwendet werden.

Web-Usability: benutzerfreundliche Texte in den Onlinemedien

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

Web-Usability: Bilder nach Usability-Richtlinien verwenden

Bilder bringen Webseiten zum Sprechen, geben Stimmungen und Emotionen wieder und ermöglichen Assoziationen mit angebotenen Produkten oder Dienstleistungen. Nach Web-Usability ist es für einen Webdesigner wichtig ein Kompromiss zwischen guter Qualität und kurzer Ladezeit eines Bildes zu erreichen. Die Bildbearbeitung fürs Webdesign unterscheidet sich von der Bilddaten-Aufbereitung mit dem Ziel Bilder und Grafiken auszudrucken.

Web-Usability: nutzerfreundliche Gestaltung von Formularen

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

Texteingaben werden im Webdesign 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 ausgezeichneten Schaltfläche an den Server übertragen. Im Webdesign gibt es die Möglichkeit eine Standard-Schaltfläche oder grafisch gestaltete Schaltfläche einzusetzen. Die Gestaltung von Schaltflächen wird über CSS-Dateien gesteuert und muss nach Web-Ergonomie eine eindeutige Beschriftung oder Symbol enthalten.

Benutzerfreundliche Formulare gestaltet ein Webdesigner so, 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 gemachten 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.

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

Web-Usability: ergonomische Gestaltung von Tabellen

Tabellen ermöglichen einen guten Überblick bei zahlreichen Informationen. Um bei der Gestaltung von nutzerfreundlichen Tabellen die Übersichtlichkeit zu wahren, sollten professionell arbeitende Webdesigner diese nach Regeln der Web-Ergonomie erstellen. 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.

Quelle: Beiträge nach Prof. Heide Balzert, Softwaretechnik und Systemanalyse im Fachbereich Informatik

 

Weitere Informationen zu Thema Web-Usability und responsive Webseiten

Mehr über Web-Usability-Regeln und Vorschläge zur benutzerfreundlichen Homepage-Gestaltung, UI-Design können Sie in Blog-Beiträgen der Internetagentur Creative Screen erfahren. Themenübersicht: Web-Usability, benutzerfreundliche Homepage.

 

Kontakt: Sind Sie an Benutzerfreundlichkeit Ihrer Firmen-Website interessiert?

Falls Sie Interesse oder einfache Fragen zur Benutzerfreundlichkeit bei einem geplanten Projekt oder bereits vorhandenen Firmen-Website haben, dann kontaktieren Sie uns per Kontaktformular oder rufen Sie uns an. Webdesigner Andreas Patzer von patzerDesign berät Sie gern kompetent und unverbindlich!