USABILTIY - benutzerfreundliche Websites
"Mache die Dinge so einfach wie möglich -
aber nicht einfacher."
(Albert Einstein)
>> nicht klausurrelevant <<
15.1
Benutzerfreundlichkeit
- Kann mit der Zufriedenheit eines Restaurants verglichen werden
- Usability (Benutzbarkeit in einer Situation)
- User Eperience (Nutzenerlebnis inkl. Look / Feel)
15.2
Abgrenzung Barrierefreiheit
Kleine Anpassungen sollen Behinderten helfen, sich auf der Website zurechtzufinden.
15.2.1
Sieben Verbesserungstipps
- Bedienung (Link sollte immer zur besseren Orientierung zum Hauptinhalt führen)
- Text (klare Struktur / Anpassung von Schriftgröße / Kontrast)
- Bilder (alt-Text, wenn Bild nicht angezeigt werden kann / beschreibende Linktexte)
- Farben (keine Unterscheidung darstellen wg. Rot-Grün-Sehschwäche)
- Formulare (logische Positionierung der Eingabefelder beim Vorlesen durch Screenreader)
- Filme (wenig annimiertes Flash wg. Flimmereffekt / inhaltsreiche Zusammenfassung)
15.2.2
Hilfsmittel für Behinderte
Grobildmonitore oder Blindenschriftbrillen unterstützen die Lesbarkeit.
15.2.3
Gesetze
Richtlinien entsprechen dem POUR-Prinzip
(wahrnehmbar / bedienbar / verständlich / robust)
15.2.4
Zertifikate
Prüfkriterien werden jährlich angepasst.
15.3
Benutzer steht im Fokus
15.3.1
Bestimmte Benutzer
Es handelt sich um eine heterogene Gruppe - untersch. Alter, Erfahrungen, Vorkenntnisse.
15.3.2
Bestimmter Nutzungskontext
- Zielsetzung der Website (erste Sekunden entscheiden)
- Wie der Benutzer drauf ist (sehr vielfältig / situations- u. tagesformabhängig)
- Trial + Error (nicht wie, sondern dass man auf die Site gelangt)
15.3.3
Bestimmte Ziele erreichen
- Effektivität (Benutzer optimal unterstützen)
- Effizienz (geringer Aufwand, um Bedürfnis zu befriedigen / 3-Klick-Regel)
- Zufriedenheit (Benutzer steht im Mittelpunkt / Website nicht überladen)
15.4
Konventionen
- Viele Funktionen sind bekannt (Home für Startseite / Einkaufswagen)
- Design vs. Funktion (Konsistenz / Navigationselemente darstellen / einfach vor schön)
15.5
Strukturierung
15.5.1
Struktur ist nicht gleich Navigation
- Infos einer Website werden strukturiert / benannt / kategorisiert (Labeling / Navigation)
- Sitemap (Inhaltsübersicht / AGB + Datenschutz sind auf Sitemap, aber nicht in Navigation)
15.5.2
Methoden zur Strukturierung
- Wireframes (Entwurf eines Designs)
- tiefe Sitestruktur (wenig Auswahl / viele Ebenen)
- flache Sitestruktur (bevorzugt von SEO)
- Menschen können max. sieben Dinge gleichzeitig aufnehmen
15.5.3
Website-Typen
- Startseite (soll Zielgruppe ansprechen, abholen und Kern der Seite vermitteln)
- Kategorieseite (wie in Zeitung / Angebotsübersicht durch Keywords)
- Detailseite (Produktvorstellung / Vorzüge / Argumente zum Kauf)
15.5.4
Was darf nicht fehlen, was vermeiden?
Wichtig - Kontaktdaten (präsente Stelle) +
Impressum (Footer)
Nicht - Ablenkungen (durch Pop-Ups)
15.6
Navigation
15.6.1
Navigationsarten
- global (Website-Kennung - Logo / zurück / Suche / Rubriken / Hilfe)
- lokal (befindet sich oft links / gehört einem best. Bereich / global bleibt bestehen)
- Beadcrump (unterhalb der Hauptnavi / Standpunkt besonders kennzeichnen)
- Suchfunktion (Eingabefeld / Filter / Ergebnisse / Logfile-Analyse / Best Bets verankern)
15.6.2
Navigationsstile
Listen / Auswahl / Dropdown / Register (Reiter) / Tagcloud / Klappmenü -
Tooltips (Hinweisfenster)
15.7
Texten für das Netz
- kurz, aktiv, spannend, klar, korrekt schreiben (ohne Füll- / Fremdwörter / gleiche Bezeichnung)
- Pyramide (Hauptinfo / Detailinfo / Hintergrundinfo - Zwischenüberschriften / Übersicht)
- 7 Kernfragen (wer / was / wo / wann / wie / warum)
- 80 % above the fold / 20 % below the fold (Sichtbereich / Druckversion / pdf-Ansicht)
- angenehme Schriftgröße / gut lesbarer Kontrast / Keywords einsetzen
15.8
Buttons und Links
- Links (gewöhnlich blau / unterstrichen - andere Farbe, wenn bereits besucht wurde
- Buttons (einheitliche Darstellung / untersch. Farben bei in/aktiv - Anker setzen, wenn relevant)
15.9
Formulare
- so kurz wie möglich (welche Felder sind wirklich nötig / Pflichtfelder)
- evtl. Hilfestellung bieten (bei unklaren Abfragen)
- dynamisch (Angaben sind bereits eingetragen)
- Fehlermeldungen müssen präzise und auffällig sein
- Captchas (verzogen dargestellte Zeichen dienen als Spam-Schutz)
- Themengruppierung / abschließende Handlungsaktion / anschl. Danke-Seite
- auf Funktionalität und Nutzerverhalten testen
15.10
Bilder und Grafiken
- Bilder sind einprägsamer, lockern auf und übermitteln Infos schneller (auch Komplexes)
- Bildgröße verringern (sonst zu lange Ladezeiten)
- Adblocker ausstellen (überschaubare Bildermenge / Menschen folgen Blick auf der Website)
15.11
Multimedia (Audio / Video)
- Einsatz kann lebendigen echten Charakter verleihen
- Vorsicht mit Hintergrundmusik (stört oft)
- Screencast (Anleitung kann best. Abläufe gut erläutern)
15.12
Technische Aspekte
Benutzer erwarten schnelle Ladezeit / gute Orientierung / wenige Schritte zum Ziel.
15.13
Designaspekte
15.13.1
Wahrnehmungsgesetze
- Figur + Grund (Differenzierung zwischen wichtig / unwichtig)
- Nähe (Elemente, die näher aneinander liegen, wirken zusammengehörig)
- Ähnlichkeit ( ähnliche Dinge auch ähnlich darstellen)
- Geschlossenheit (Linien, die eine geschlossene Form bilden, sind zusammengehörig)
- Prägnanz (Menschen mögen einfache, eindeutige Formen)
- Fortsetzung (man sucht Linien und führt sie zur Orientierung weiter)
- Symmetrie (wirkt eher zusammengehörig / speziell bei Texten in Spalten)
- Erfahrung (Fehlendes wird aus Erfahrung hinzugefügt und erkannt)
15.13.2
Farben
- Wahrnehmung ist subjektiv / Signalfarbe - rot / soll best. Atmosphäre schaffen
- Kontrast (durch Komlplementärfarben / gute Lesbarkeit)
15.13.3
Typografie
- Fonts (am sichersten websichere Schriften / Wirkung beeinflusst den Text)
- Times - seriöse Serifen / Arial - modern schlicht / Courier - altbacken / Verdana - gut lesbar
- Akzente (mit Bold / nicht Fett hervorheben / nicht unterstreichen)
- Versalien (für Einzelwörter)
- zur Auflockerung dienen Aufzählungslisten + Tabellen / Infokästen
15.14
Komposition und Positionierung der Elemente
- F-Muster (Blickverlauf einer Website)
- Linien (das Auge sucht Fluchtlinien zur Orientierung)
- Größe / Position (wenn Elemente anders dargestellt sind, wirken sie wichtiger)
- Kontrast (Steigerung durch Gegensätzlichkeit - hell/dunkel, groß/klein, rund/eckig)
- sichtbarer Bereich (durch versch. Bildschirmgrößen Standard von 1024x768 nutzen)
- Whitespace (weniger ist mehr / überschaubar + einheitlich bleiben7 vemittelt Ruhe)
- Goldener Schnitt (1/3-2/3-Flächenaufteilung, so dass eins ein Rechteck darstellt)
- Layout (starr - unverändert / dynamisch - anpassend / elastisch - proportional / Toplinks - bei langen Seiten, um an Anfang zu kommen)
15.15
SEO und Usability
- Häufige Wiederholung der Keywords (keine Synomyme nutzen)
- SEO-optimal (gutes Design / guter Inhalt / hohe Weiterempfehlung / teilbare Grafiken)
15.16
Usability-Gebote
- Alle Benutzer ausreichend bedienen
- Einfache Orientierung ermöglichen
- Inhalte optimal präsentieren
- Angenehme Atmosphäre schaffen
- Benutzer nicht stören oder irritieren
- Nicht warten lassen
- Nicht aufdringlich ausfragen
- Mit dem Benutzer kommunizieren
- Vertrauen schaffen
- Benutzer weiter bedienen
