Eine benutzerfreundliche Webseite erstellen

Eine benutzerfreundliche Webseite (Usability), ist eine Webseite die sich am Benutzer orientiert.

Das heißt, die Webseite wurde mit den Gedanken an die aktuellen oder zukünftigen Benutzer und nicht für den Auftraggeber, Programmierer, Designer oder Webmaster erstellt.
Hier habe ich wichtige Kriterien für eine benutzerfreundliche Webseite kurz zusammengefasst. Unter Inspiration sind meine Quellen, bekannte Richtlinien und relevante ISO-Normen aufgelistet. (ISO = International Organization for Standardization)

PDF-Version

Kriterien

1. Funktionsfähigkeit 

Eine Webseite sollte an 24 Stunden pro Tag und 365 Tage im Jahr erreichbar und funktionsfähig sein.

Empfehlungen:

  • Genug Webserverkapazität bereitstellen.
  • Regelmässig auf Funktionsfähigkeit testen.
  • Auf Plugins und Programme, die der Benutzer zusätzlich installieren muss, verzichten.
  • Es sind keine tote Links oder unfertigen Seiten enthalten.

2. Plattformunabhängigkeit

Eine Webseite sollte auf jeder Plattform und jeden Webbrowser, sowohl funktionsfähig sein, als auch, korrekt dargestellt werden.

Empfehlungen:

  • Quellcode auf Validität überprüfen.
  • Auf den verschiedenen Plattformen und Webbrowser testen.

3. Barrierefreiheit

Die Informationen auf der Webseite sollten jedem Benutzer zugänglich sein.

Empfehlungen:

  • WCAG 2.0 Richtlinien beachten. (WCAG = Web Content Accessibility Guidelines)

4. Ladezeit

Eine Webseite sollte nach spätestens 10 Sekunden vollständig geladen sein.

Empfehlungen:

  • Quellcode optimieren.
  • Bilder, Grafiken und Videos komprimieren und optimieren.
  • Animationen, bewegliche Elemente, Ton – und Videoelemente so wenig wie möglich verwenden.

5. Sicherheit

Eine Webseite sollte vor Angriffen, Pannen und Datenverlust geschützt sein.

Empfehlungen:

  • Regelmässige Backups erstellen.
  • Webserver regelmässig auf Sicherheit überprüfen.
  • Firewalls verwenden.
  • Verzeichnisschutz und Verschlüsselungsverfahren verwenden.

6. Suchmaschinentauglichkeit

Eine Webseite sollte von den wichtigsten Suchmaschinen gefunden werden.

Empfehlungen:

  • Wichtigste Meta-Elemente im Quellcode beschreiben.
  • Jeder Seite einen Titel vergeben.
  • Regelmässig gute und relevante neue Inhalte erstellen.
  • Links mit aussagekräftigen Texten verwenden.
  • Auf Frames verzichten.
  • Nennung und Aktivitäten in Sozialen Netzwerken.

7. Fehlertoleranz

Eine Webseite sollte dem Benutzer dabei helfen Fehler zu vermeiden oder Fehleingaben zu korrigieren.

Empfehlungen:

  • Fehler- und Warnmeldungen erstellen.
  • Die Meldungen beschreiben genau was der Benutzer zu tun hat und nicht was er falsch gemacht hat.

8. Feedback

Eine Webseite sollte bei jeder ausgeführten Aktion, den Benutzer eine Rückmeldung geben.

Empfehlungen:

  • Navigation, Links und Eingabeelemente auf Funktionalität testen.
  • Fehlermeldungen und Warnmeldungen auf Funktionalität testen.

9. Suche

Eine Webseite sollte eine interne Suchfunktion beinhalten.

Empfehlungen:

  • Eingabefeld mit Button verwenden.
  • Auf jeder Seite vorhanden.

10. Hilfe

Eine Webseite sollte eine Hilfeseite und Anleitungen beinhalten.

Empfehlungen:

  • Auf jeder Seite ist ein Link zur Hilfeseite vorhanden.
  • Anleitungen und andere Hilfestellungen bereitstellen.

11. Startseite

Die Startseite der Webseite sollte für den Benutzer nützlich sein.

Empfehlungen:

  • Der Zweck der Webseite ist beschrieben.
  • Eine Übersicht der Inhalte ist vorhanden.
  • Die wichtigsten News sind zu sehen.
  • Eine interne Suchfunktion ist vorhanden.
  • Auf Intro-Seite oder Werbung verzichten.

12. URL-Design

Die Internet-Adresse der Webseite sollte so einfach und merkbar wie nur möglich sein.

Empfehlungen:

  • Die Internet-Adresse ist so kurz wie möglich.
  • Die Internet-Adresse verwendet Wörter in normaler Sprache.
  • Die Internet-Adresse verwendet ausschliesslich Kleinbuchstaben.
  • Die Internet-Adresse vermeidet die Benutzung von Sonderzeichen und sonstigen unverständlichen Zeichenkombinationen.

13. Navigation

Die Navigation der Webseite sollte dem Benutzer schnellen Zugriff auf alle Informationen ermöglichen.

Empfehlungen:

  • Der Benutzer weiss zu jederzeit wo er ist, von wo er gekommen ist und wo er hingehen kann.
  • Eindeutige Bezeichnung der Menüpunkte.
  • Sitemap bereitstellen.
  • Virtuelle Rundgänge bereitstellen.

14. Inhalt

Eine Website sollte die anvisierte Zielgruppe ansprechen.

Empfehlungen:

  • Inhalte sind auf die Zielgruppe zugeschnitten, die man erreichen will.
  • Inhalte sind aktuell, einzigartig, ethisch vertretbar und verletzten keine Rechte Dritter.
  • Autoren oder Quelle der Inhalte werden genannt.
  • Inhalte sind so kurz wie möglich gehalten.
  • Druckversion für lange Texte bereitstellen.
  • Inhalte auf korrekte Orthographie und Grammatik überprüfen.
  • Inhalte sind in verständlicher Sprache geschrieben.
  • Ähnliche Inhalte werden über Hyperlinks verknüpft.

15.Lesbarkeit und Typographie

Der Inhalt der Webseite sollte gut lesbar sein.

Empfehlungen:

  • Hoher Farbkontrast zwischen den Text und den Hintergrund.
  • Die Texte blinken oder bewegen sich nicht, sind linksbündig dargestellt und bestehen aus Kleinbuchstaben.
  • Die Schriftgrösse ist zwischen 12 und 16 Punkt gross und als Schriftart wird eine serifenlose Schrift verwendet.
  • Jeder Absatz hat eine Überschrift.

16. Konsistenz

Die Grundstruktur der Webseite sollte auf jeder Seite gleich sein.

Empfehlungen:

  • Elemente die in jeder Seite verwendet werden, wie die Navigation oder die Suchfunktion, befinden sich immer an gleicher Stelle.
  • Alle Elemente mit der gleichen Funktion, sind gleich gestaltet.
  • Jede Seite hat ein Link zur Startseite.
  • Das Logo befindet sich oben links und ist mit der Startseite verlinkt.
  • Copyright befindet sich im Fussbereich.

17. Struktur

Eine Webseite sollte übersichtlich gestaltet sein.

Empfehlungen:

  • Die Webseite wird in ein Kopfbereich, Hauptteil und Fussbereich unterteilt.
  • Die Webseite beinhaltet so wenige Elemente wie möglich.
  • Strukturelemente, wie Überschriften, Listendarstellungen, Fettdruck und kurze Zusammenfassungen werden verwendet.
  • Informationen werden zu sinnvollen Gruppen zusammengefasst.

18. Links

Eine Webseite sollte gut verlinkt sein und relevante Links anbieten.

Empfehlungen:

  • Die Webseite in relevante Link- und Branchenverzeichnisse eintragen.
  • Auf themenverwandte und weiterführende Seiten wird mit Links verwiesen.
  • Unbesuchte Links sind blau und besuchte Links sind violett.
  • Linktext ist eindeutig beschrieben.

19. Grafik – Design und Multimedia

Eine Webseite sollte attraktiv sein.

Empfehlungen:

  • Farbgestaltung ist konsistent und orientiert sich an den Gesetzen der Farbpsychologie.
  • Aussagefähige Bilder, Videos oder Animationen anstatt viel text verwenden.

20. Interaktivität

Die Webseite sollte die Interaktion mit dem Benutzer fördern.

Empfehlungen:

  • Gästebuch
  • Diskussionsforen
  • Chatsysteme
  • Wettbewerbe
  • Umfragen
  • Bewertungssysteme
  • Online-Spiele
  • Weblogs
  • Webshop
  • Soziale Netzwerke

21. Kontaktmöglichkeit

Eine Webseite sollte Kontaktmöglichkeiten bieten.

Empfehlungen:

  • Kontaktformular
  • Kontaktdaten
  • Lageplan und Wegbeschreibung.
  • Fotos der Lokalitäten und von den Personen.

 

Inspiration

Quellen

Remo Uherek: http://www.netz-a.com/bilder/webdesign-anforderungen.pdf

Zoltán Gócza, Zoltán Kollin: http://uxmyths.com/

Jakob Nielsen: http://www.nngroup.com/articles/

Stefan Nitzsche: http://www.drweb.de/magazin/die-ultimative-usability-checkliste/

Tanja Kiellisch: http://www.contentmanager.de/magazin/artikel_2072_web-design_und_usability_20_-_die_10_regeln.html

Richtlinien / Kriterien

Jakob Nielsen: http://www.nngroup.com/articles/ten-usability-heuristics/

Jens Meiert Übersetzung von Bruce Tognazzini: http://meiert.com/de/publications/translations/asktog.com/firstprinciples/

Ursula Schulz: http://www.bui.haw-hamburg.de/pers/ursula.schulz/webusability/allgemeine_heuristiken.html

ISO-Normen

http://www.iso.org/iso/home.html

9241 Ergonomie der Mensch-System-Interaktion

Teil 11 Anforderungen an die Gebrauchstauglichkeit

Teil 12 Informationsdarstellung

Teil 110 Grundsätze der Dialoggestaltung

14915 Software-Ergonomie für Multimedia-Benutzungsschnittstellen

Teil 1: Gestaltungsgrundsätze und Rahmenbedingungen

Kommentar eingeben