Grundlagen der Webentwicklung: Usability, HTML, HTTP & CSS

Usability Testing

Empirisches Testen mit realen Anwendern. Man beobachtet, wie sie das System bedienen, um reale Probleme zu identifizieren.

Die 6 Phasen des Usability Testings

1. Testplan erstellen.
2. Testnutzer rekrutieren: Passend zur Zielgruppe.
3. Testmaterialien vorbereiten: Aufgaben (Tasks), Szenarien und Fragebögen.
4. Test durchführen: Mit Rollenverteilung (Facilitator, Beobachter).
5. Daten analysieren: Auswertung qualitativer und quantitativer Daten.
6. Ergebnisse berichten: Report mit Befunden und Verbesserungsvorschlägen.

Methoden

• Thinking Aloud: Nutzer denken laut. + Tiefe Einblicke, - unnatürlich.
• Formales Experiment: Kontrollierter Labortest für messbare Daten (Zeit, Fehler).
• A/B Testing: Live-Vergleich zweier Versionen.
• Nutzungsstudie: Beobachtung oder Tracking im echten Alltag.

Datenarten

• Qualitative Daten: Zitate, Frustration, Verhalten.
• Quantitative Daten: Time on Task, Task Completion Rate, Fehlklicks, SUS-Fragebogen.

Test-Designs

• Between-Subject: Jeder Teilnehmer testet nur eine Version (vermeidet Lerneffekte).
• Within-Subject: Jeder Teilnehmer testet alle Versionen (braucht weniger Teilnehmer).

Usability-Grundlagen

Benutzerfreundlichkeit, einfache Bedienung und Erlernbarkeit.

Attribute

• Learnability: Erlernen des Systems für neue Benutzer.
• Efficiency: Leistungsgrad der Experten.
• Memorability: Gelegenheitsnutzer müssen nicht neu lernen.
• Errors: Aktionen, die das Ziel nicht erreichen.
• Satisfaction: Subjektive Zufriedenheit.
• Effektivität: Genauigkeit und Vollständigkeit der Zielerreichung.

Prinzipien

Affordances (Angebotscharakter), Signifiers (Hinweise), Constraints (Einschränkungen), Mappings, Feedback und Conceptual Models.

Usability Engineering

Phasen

1. Know the User & Product Space
2. Personas & Szenarien
3. Design & Prototypes
4. Evaluation & Follow-Up Studies (Summativ & Explorativ)

Wichtige Konzepte

• Benchmarking: Wettbewerbsanalyse und Zielsetzung (ROI).
• Persona: Fiktive Beschreibung eines typischen Nutzers.
• Iteratives Design: Zyklischer Prozess zur stetigen Verbesserung.
• Prototypes: Low-Fidelity (Skizzen) vs. High-Fidelity (realistische Designs).

HTML-Grundlagen

Auszeichnungssprache für Struktur und Inhalt.

• div: Nicht-semantischer Container.
• Elemente: Bausteine mit Start- und End-Tag.
• iframe: Einbetten externer Dokumente (Webseiten, PDFs).

HTTP-Protokoll

Zustandloses Protokoll für die Kommunikation zwischen Server und Browser.

• Persistent vs. Non-persistent: Wiederverwendung von TCP-Verbindungen.
• Pipelining & Multiplexing: Effiziente Abwicklung mehrerer Anfragen.
• Content Negotiation: Auswahl der passenden Version (Sprache/Format).

Request & Response

Methoden: GET, HEAD, POST, PUT. Statuscodes: 200 (OK), 302 (Redirect), 404 (Not Found), 500 (Server Error).

CSS & Barrierefreiheit

• Positionierung: static, relative, absolute, fixed, sticky.
• Combinators: Nachfahren-, Kind-, Nachbar- und Geschwisterselektoren.
• WCAG-Prinzipien: Wahrnehmbar, bedienbar, verständlich, robust.

Cookies, Proxy & Caching

• Cookies: Speicherung von Statusinformationen.
• Thin- vs. Fat-Client: Verteilung der Verarbeitungslogik.
• Proxy: Zwischenhändler (Content Filter, Load Balancer).
• Caching: Speicherung von Ressourcen zur Beschleunigung (Freshness, Etag, Revalidation).