Wie Web-Usability funktioniert

Seh- und Anwendungsgewohnheiten der NutzerInnen werden bei der Entwicklung einer Website von Anfang an berücksichtigt.

Beispiel: Die Hauptnavigation ist entweder links (vertikal) oder oben (horizontal).

Sehgewohnheiten sind kein Dogma. Benutzerfreundliche Neuerungen sorgen für angenehme und erhellende Überraschungen und nicht für Frustration und Ärger.

Beispiel: Gewohntes wird in einen anderen Kontext gestellt und damit klarer und einleuchtender – z. B. überraschend andere Navigation, die übersichtlicher sind und sich leichter bedienen lassen.

Nur das wird verwendet, was die NutzerInnen zum Ziel führt; alles Überflüssige wird ausgesondert.

Beispiel: Grafiken und Bilder werden nur zur Illustration oder zur Erläuterung von Inhalten verwendet.

Die eingesetzte Technik funktioniert selbsterklärend und intuitiv und wird auf Gebrauchstauglichkeit geprüft.

Beispiel: Navigationen, Slider, Bildergalerien, Carousels, alles wird getestet auf Zugänglichkeit (Accessibility) und Funktionalität, in jeder Phase der Entwicklung einer Website, bis sie online geht.

Jede Wiederholung hat einen bestimmten Zweck; unnötige Wiederholungen werden vermieden.

Beispiel: Eine Seitenübersicht im Footer und auf einer Extraseite – (Sitemap) – wiederholt die Navigationsstruktur der Website, damit sich die Userinnen und User leichter orientieren können.

Worauf Sie bei Web-Usability achten sollten

Eine gut durchdachte Usability beantwortet folgende Fragen:

• Welche Problemlösung sucht die Nutzerin meiner Website
• Wie sieht ein User die Webseite
• Was darf ich an Wissen und Können bei meinen Besuchern voraussetzen
• Welche Technik unterstützt meine Kundinnen bei der Lösung seines Problems
• Welche Qualität muss ich liefern und welche Qualität kann ich liefern
• Welche Inhalte (Content) biete ich in welcher Verpackung (Design) an

Was man für Web-Usability tun sollte …

Web-Usability wird gefördert durch

• übersichtliche Seitenstruktur
• verständliche Menüpunkte
• schnellen Seitenaufbau
• leichtes Auffinden von nützlichen Informationen
• kurze und lesbare Texte
• Verwendung von Überschriften
• funktionierende Links
• zum Produkt und zu den Kunden passendes Design
• kontraststarke Farbgestaltung

… und was man lassen sollte

Vermeiden Sie folgende Web-Usability-Fehler:

• Fehler im Code (HTML, CSS, JavaScript)
• zu kleine Schrift und mangelnder Schrift-Hintergrund-Kontrast (grau-in-grau)
• starres Layout (nicht-responsive Website)
• Blockade der Webseite durch Popups, Layer Ads oder Interstitials
• Verkleinerung des Viewports durch Sticky Ads oder Sticky Banner
• zu tiefe Schachtelung der Navigation
• Links, die ins Nirwana führen

Testen Sie Ihre Website

Sie können Ihre Website einem kurzen Test unterziehen, der Ihnen erste Eindrücke darüber vermittelt, wie die Seite bei NutzerInnen ankommt. Beachten Sie bitte, dass dieser Test lediglich erste Hinweise auf die Usability Ihrer Website gibt.

Bitten Sie zwei bis fünf Bekannte, Freunde und Kollegen, sich eine halbe Stunde Zeit zu nehmen, um Ihre Website zu testen. Diese Personen kennen natürlich Ihre Website bislang nicht. Die Testpersonen sollten sich strikt an das folgende Test-Schema halten. Die Testpersonen schildern Ihnen ihre gewonnenen Eindrücke, die Sie dann zur Verbesserung der Web-Usability Ihrer Website verwenden können. Die Testpersonen werden überwiegend schweigend vorgehen. Fordern Sie Ihre Testpersonen daher dazu auf, ihr Vorgehen auf der Website und ihre Eindrücke zur Usability ständig zu kommentieren.

Vergessen Sie nicht, Ihren Testpersonen eine kleine Belohnung zukommen zu lassen („Buy me a beer“).

Kurzer Usability-Test

Anweisungen an die Testpersonen

1. Rufen Sie bitte die Website "https://www.IhreDomain.de" auf. Betrachten Sie genau sechs (6) Sekunden diese Website. Schauen Sie nun bitte weg und erzählen Sie, was Ihnen von der Website in Erinnerung geblieben ist.
2. Bitte beschreiben Sie kurz, wie die Website im ersten Augenblick (nach den sechs Sekunden) auf Sie gewirkt hat: Was haben Sie gefühlt, was assoziiert? Wie wirken die Farben und das Design auf Sie? Könnten Sie sich vorstellen, auf dieser Webseite zu bleiben? Ist Ihre Neugier geweckt worden?
3. Bitte rufen Sie erneut die Website "https://www.IhreDomain.de" auf. Versuchen Sie bitte, die Information XYZ zu finden. Schilden Sie bitte währenddessen Ihre Gedanken und Gefühle.
4. Versuchen Sie nun, sich anhand der Navigationselemente (Menüs) durch die Website zu bewegen. Schilden Sie bitte währenddessen wiederum Ihre Gedanken und Gefühle, ob Sie sich gut zurechtfinden: Ist die Website übersichtlich? Kommt man leicht dorthin, wo man hin will? Findet man leicht wieder zurück?
5. Schauen Sie bitte jetzt auf den Inhalt. Wird schnell deutlich, worum es auf dieser Website geht, was angeboten wird? Sind die Texte verständlich und übersichtlich? Erfahren Sie rasch, was Sie wissen wollen?
6. Wie passen Inhalt und Design zueinander? Gibt es Widersprüche? Was passt, was passt nicht?
7. Wie wirkt die Website jetzt auf Sie, nachdem Sie sich ein wenig mit ihr beschäftigt haben? Wie reagieren Sie auf die Farben, Bilder, das Design?
8. Was würden Sie ändern, was anders machen?
9. Vielen Dank für Ihre Unterstützung!

Performance – ein wichtiges Kriterium für Usability

Ohne eine gute Performance Ihrer Website werden Ihre Inhalte und Ihr schönes Design vielleicht gar nicht erst wahrgenommen. Wenn Ihre Website langsam lädt, werden die Userinnen und User mit großer Wahrscheinlichkeit abspringen, bevor die Inhalte der Webseite sichtbar werden – die Geduld der NutzerInnen ist sehr begrenzt. Rechnen Sie nicht mit mehr als drei Sekunden. Auch für Google ist die Ladezeit ("page speed") ein wichtiges Kriterium zur Bewertung von Websites.

Die Latenzzeit zwischen Auslösen eines Vorgangs (z. B. durch klicken eines Buttons) und der spürbaren Reaktion darauf darf sich nicht zu einer Wartezeit ausdehnen, die mehr als zwei bis drei Sekunden dauert.

Der HTTP-Request ist so gering wie möglich zu halten. Bei jedem Bild (natürlich komprimiert), bei jeder Video-Einbindung und sonstigen Erweiterungen sollte man gut überlegen: Benötige ich das wirklich? Hilft das meinen Besucherinnen und Besucher weiter? Geht das nicht auch auf anderem Wege?

Tipps für eine gute Website-Performance

• Halten Sie Ihren Code schlank (HTML, CSS, JavaScript).
• Machen Sie aus mehreren CSS-Dateien eine.
• Gehen Sie genauso bei JavaScript-Dateien vor.
• Platzieren Sie die Einbindung der JavaScript-Dateien ans Ende Ihrer HTML-Datei – vor den body-End-Tag (</body>).
• Binden Sie JavaScript-Dateien nur auf den HTML-Seiten ein, auf denen diese Scripte auch benötigt werden.
• Komprimieren Sie Ihre CSS- und JavaScript-Dateien.
• Komprimieren Sie Ihre JPEG-Bilder und PNG-Grafiken.
• Vermeiden Sie jeglichen Ballast.

Links

Wer sich näher mit Web-Usability befassen möchte, dem empfehle ich das Buch von Steven Krug: „Don‘t make me think!“. Hier können Sie meine Rezension (PDF-Download) der ersten deutschsprachigen Auflage dieses Buchs lesen.

Details zu Normierung von Usability und Definition von Usability finden Sie im Handbuch Usability.

Informationen speziell zu Software-Usability und Anforderungen an Web-Usability gibt es auf Ergo-Online.

Ausführungen zu Methoden für Usability-Tests finden Sie auf Onlinemarketing-Praxis und auf der Website Usability-Toolkit.

Teil 1 lesen Sie bitte hier: Ohne Web-Usability ist alles andere nichts – Teil 1

--> Zum Download des Artikels Ohne Web-Usability ist alles andere nichts – Teil 1 und 2