Eine Blume füllt fast das ganze Format des Bildes aus. Damit diese sich an jegliche Bildschirmgrößen anpasst und die Bildqualität beibehält, ist es nach Nutzerfreundlichkeit zu empfehlen responsive Webseiten beim Webdesigner in ffm erstellen zu lassen.
Wenn Sie das kreative Bild betrachten, dann müssen Sie unbedingt den Gedanken bekommen, für Ihre Firma eine benutzerfreundliche Homepage erstellen zu lassen. Feine Grashälmchen ragen durcheinander wie die unterschiedliche Gestaltung von Webseiten, dabei will jeder Halm, wie auch jede Firma online auffallen. Die Bildercollage aus mehreren grünen Pflanzen im Zusammenspiel mit einem kreativen. Wichtig ist, dass die Pflanzen sichtbar und funktional bleiben, damit die Bildaussage nicht verloren geht. So wie das Programmieren einer Webseite nach Web-Usability durch einen professionellen Webdesigner aus Frankfurt am Main. Zwei grafisch dargestellte grüne Knospen als Symbole für eine Verbesserung der Funktionalität von Websites, die im Sinne der Web-Ergonomie oder auch Web-Usability gestaltet wurden. Der Hintergrund ist lebendig, während die Knospen statisch und zuverlässig wirken.
Ein Schmetterling nutz einen Grashalm um sich niederzulassen. Im Hintergrund sind binäre Ziffern zu sehen, die an die Website-Erstellung erinnern sollen. Die Idee dieser Bildercollage ist an die nutzerfreundliche Webseiten-Gestaltung in Frankfurt am Main angelehnt.

Web-Usability / Web-Ergonomie: wichtiger Beitrag zum Erfolg Ihrer Website, sind übersichtliche und benutzerfreundliche Webseiten!

Benutzerfreundliche Website – Web-Ergonomie, Web-Usability

Eine hohe Klickrate und viele Besucher auf Ihrer Homepage führen dann zum Erfolg, wenn sie letztlich auch zum Geschäftsabschluss führen. Über Erfolg und Misserfolg bei der Kundenansprache über eine Website entscheiden Webseiten-Aufbau, Homepage-Gestaltung, das Content und die Benutzerfreundlichkeit der Internetseiten, auch Web-Usability genannt. Benutzerfreundlichkeit/Usability drückt aus, wie effektiv und effizient ein Produkt oder wie bedienerfreundlich eine Website ist.

Bei der Nutzerfreundlichkeit von Internetseiten spricht ein Webdesigner von Web-Usability oder auch Web-Ergonomie. Das Ziel der Usability ist es hierbei, die Nutzung der Webseiten für die Besucher so einfach wie möglich zu machen und für eine intuitive Bedienung zu sorgen. Studien über Nutzerverhalten zeigen, dass die Web-Usability, Benutzerfreundlichkeit einer Website maßgeblich zum Erfolg einer Internetpräsenz beiträgt. Jeder zweite Internetnutzer entscheidet demnach nach maximal sieben Sekunden, ob er eine aufgerufene Website wegklickt oder sich über das Angebot informiert. Vorteile und Mehrwerte eines Internetseiten-Angebots, Ihrer Produkte oder Dienstleistungen, sollten für einen Besucher klar ersichtlich und leicht erreichbar sein. Prüfen Sie auch, ob die enthaltenen Informationen ausreichen, um speziell Ihre Zielgruppe online von Ihrem Angebot oder Leistungen zu überzeugen.

Die Webseiten müssen dafür von Webdesignern an Bedürfnisse und Erwartungen der Besucher anpasst werden und möglichst direkte Handlungsanweisungen geben. Ein weiterer zentraler Erfolgsfaktor ist die transparente und übersichtliche Navigation auf der Website. Nur auf übersichtlich gestalteten und gut strukturierten Websites findet der Besucher schnell und ohne Umwege die entsprechenden Informationen und Angebote – bricht nicht vor der gewünschten Angebotsanfrage ab.

Anwendung der Web-Usability im Webdesign

Die Web-Usability auch Web-Ergonomie genannt, wird nach allgemein festgelegten Normen von Webdesigner bei der Gestaltung von Internetseiten angewendet. Web-Usability wird aus Beobachtung von User-Verhalten auf gängigen Webseiten abgeleitet. Andreas Patzer, Webdesigner bei patzerDesign für Frankfurt am Main listet auf und beschreibt die wichtigsten Anwendungsbereiche für Benutzerfreundlichkeit im Webdesign:

  1. nutzerfreundliche Website-Struktur,
  2. nutzerfreundliche Navigation,
  3. ergonomische Dialogführung auf Websites,
  4. ergonomisches Webseiten-Design,
  5. nutzerfreundliches Layout-Design,
  6. Farben und Web-Ergonomie,
  7. benutzerfreundliche Texte auf Websites,
  8. Bilder Usability gerecht verwenden,
  9. nutzerfreundliche Gestaltung von Formularen,
  10. ergonomische Gestaltung von Tabellen.

Web-Usability: benutzerfreundliche Website-Struktur

Eine Website besteht aus einer Ansammlung von mehreren Webseiten, die mit Hyperlinks miteinander verbunden werden. Die Strukturierung einer Homepage nach Web-Usability-Richtlinien hängt vom jeweiligen Anwendungsbereich ab. Die am häufigsten vorkommenden Anwendungsgebiete sind: Lernen, Nachschlagen, Nachrichten, Unterhaltung, E-Commerce.

Währen im E-Commerce Websites durch ergonomische Navigationsstrukturen und integrierte Suchmaschinen den potentiellen Kunden darin unterstützen die gewünschten Artikel zu finden, werden Webseiten aus dem Unterhaltungsbereich eher spontan besucht. Diese Websites müssen den Besucher eher durch ansprechende Aufmachung zum Verweilen motivieren. Um Lernstoff zu vermitteln ist nach Web-Usability wiederum eine andere Vorgehensweise bei der Gestaltung und Strukturierung von Webseiten empfehlenswert. Die Website-Struktur muss nach Web-Usability zusätzlich die Dialogführung auf Webseiten unterstützen.

Web-Usability: nutzerfreundliche Navigation

Die Navigation auf einer Homepage wird in primäre und sekundäre Navigation unterteilt. Die primäre Navigation sollte im Webdesign einen schnellen Überblick über gesamten Inhalt der Website ermöglichen. Die sekundäre Navigation enthält Unterkategorien der Hauptnavigation. Navigationsgestaltung nach Usability-Standards ermöglicht ein gelungenes Zusammenspiel von Primär- und Sekundärnavigation. Dieses Vorgehen im Webdesign macht die Struktur einer Website transparent und schafft einen guten Überblick über die Inhalte einer Internetpräsenz.

Web-Usability: ergonomische Dialogführung auf Webseiten

Zwischen einem Webseiten-Besucher und dem Website-Angebot findet eine Interaktion statt, diese wird in der Usability als Dialog bezeichnet. Um eine nutzerfreundliche und ergonomische Website zu erstellen, muss sich der Webdesigner bei der Erstellung einer Dialogführung auf Webseiten nach der Web-Usability richten. Es wird zwischen Primärdialog und Sekundärdialog unterschieden. Wobei der Primär der direkten Aufgabenerledigung dient, der Sekundär als Ergänzung und Hilfestellung zum Primärdialog steht. Bei nutzerfreundlicher Dialoggestaltung während der Webseiten-Erstellung wird auf sieben anerkannte Grundsätze geachtet:

  1. Aufgabenangemessenheit – wird der Benutzer bei Aufgabeerledigung unterstützt?
  2. Selbstbeschreibungsfähigkeit – wird jeder Dialogschritt verständlich erklärt?
  3. Steuerbarkeit – kann der User den Dialogablauf steuern?
  4. Erwartungskonformität – entspricht der Dialog den Erwartungen des Benutzers, seinen Bildungsstand, Erfahrungen?
  5. Fehlertoleranz – werden Fehler bei Eingaben erkannt und gibt es Möglichkeiten für Korrekturen?
  6. Individualisierbarkeit – wird der Dialog an individuelle Fähigkeiten und Vorlieben des Users angepasst?
  7. Lernförderlichkeit – wird der Benutzer beim Erlernen des Dialogsystems auf Webseiten unterstützt?

Bei einer usability-gerechten Dialogführung sollte im Webdesign immer auf Übersichtlichkeit geachtet werden. Am besten ist ein Kompromiss zwischen flachen und tiefen Hierarchien von Inhalten. Die Wege zu gesuchten Informationen werden auf benutzerfreundlichen Websites so kurz wie möglich gehalten. Die Verwendung von Popup-Fenstern und Mitteilungsfenstern werden vom Webdesigner in der Usability verwendet um Details von Informationen oder Werbung anzuzeigen. Auch die Darstellung von Animationen und Filmen zu ermöglichen, ohne dabei das Webdesign der Webseiten zu beeinträchtigen. Die Verwendung von Popups darf den Kontext einer ergonomie-gerechten Dialogführung nicht nachteilig beeinflussen.

"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!

patzerDesign –
Gestaltung von Printmedien und Onlinemedien

Wir bieten Ihnen Kreativität und Know‑how:

  1. individuelles responsive Webdesign,
  2. freie Programmierung,
  3. CMS Contao,
  4. Firmenlogo, Corporate Design,
  5. Gestaltung von Visitenkarten, Briefbögen,
  6. Layouts für Broschüren und Plakate,
  7. Design von weiteren Werbeträgern,
  8. professionelle Bildbearbeitung.

Öffnungszeiten

Montag bis Freitag:
09:00 - 18:00

> Beispiele: Webdesigns,
Firmenlogos und Layouts

Ihr Ansprachpartner

Andreas Patzer
Mediengestalter (IHK, Frankfurt),
Webdesigner (DTP-Akademie)

Telefon: +49 (0)176. 96 927 237
Rhein-Main-Gebiet, Frankfurt am Main

> zum Kontaktformular

Folgende Tätigkeitsbereiche werden auf der aktuellen Internetseite behandelt:

Nutzerfreundliche Webseiten, Web-Ergonomie, Web-Usability, intuitive Bedienung, transparente Navigation, benutzerfreundliches Webdesign gestalten, Gestaltung von Webseiten nach Usability-Vorgaben, nutzerfreundliche Webseiten-Struktur, benutzerfreundliche Navigation, Website nach Web-Usability programmieren, ergonomische Dialogführung auf Websites, ergonomisches Webseiten-Design, benutzerfreundliches Layout-Design, Farben und Web-Ergonomie, benutzerfreundliche Texte auf Webseiten, Bilder nach Usability verwenden, Tabellen und Formulare nutzerfreundlich gestalten, flexibles adaptives Webdesign, responsive Webdesign beim Webdesigner in Frankfurt am Main und Rhein-Main.