Webkonzeption

Teil 1: Grundlagen

Basiswissen

  • Grundprinzip des WWWs

Website Projekt: Ablauf

  1. Anforderung
  2. Information Architecture (IA)
  3. Navigation / Sitemap
  4. UX / Wireframing / Mocking
  5. Design / Prototyping
  6. Umsetzung / Testing
  7. Launch / Maintenance

Anforderung analyse

Was will wer, warum und unter welchen Bedingungen?

Ergebnis

  • Lastenheft oder
  • Product Backlog bei agiler Softwareentwicklung


Kriterien

vollständig, verständlich, präzise, nachprüfbar, widerspruchsfrei

IA Informationsarchitektur

Inhalte eines Systems so zugänglich zu machen, dass die Bedürfnisse der Nutzer (und Betreiber) bestmöglich bedient werden.

Ergebnis

  • Zieldefinition / Zielgruppendefinition
  • strukturierte Inhalte / Informationen


Kriterien

Spezifisch, Messbar, Attraktiv, Realistisch, Terminiert

IA betrachtet

Quelle: O'Reilly - Information Architecture

IA USERS

  • Wer ist die Zielgruppe (Nutzer und Betreiber)?
  • Welche Bedürnisse hat die Zielgruppe?
  • Weiteres: Bildung, Sprache, Verhalten, Erfahrungen …


Methoden

  • Erstellung von “Personas”
  • Interviews

IA Content

  • Wie kategorisiere ich die Informationen? (z.B.: thematisch, chronologisch)
  • Wie stelle ich die Informationen dar? (z.B.: wissenschaftl., umgangssprachl.)
  • Wie bewege ich mich durch die Informationen? (z.B.: linear, hierarisch)
  • Wie suche ich nach den Informationen? (z.B.: query builder, keywords)


Methoden

  • Card Sorting
  • Tree-Testing

IA Context

  • Welche Ressourcen stehen zur Verfügung? (z.B.: Zeit, Kapital)
  • Welche betrieblichen, organisatorischen oder kulturellen Aspekte müssen beachtet werden?
  • Globale Navigation (meist im Header)
  • Lokale Navigation (abhängig vom Seiteninhalt)
  • Footer Navigation (weitere Links meist unten)

Beachte Responsive Design: Unterschiedliche Bildschirmgrößen erfordern unterschiedliche Navigationskonzepte.

UX User Experience

Mit der User Experience wird das Erlebnis eines Anwenders bei der Nutzung einer Website beschrieben.


Ergebnis

  • Optimiert: Benutzerfreundlichkeit, Zugänglichkeit
  • Ziel: positive Gefühle beim Benutzer auslösen
  • Erstellt: Mocks, Wireframes

UX Die 5 Elemente von UX

Quelle: Jesse James Garret - The Elements of User Experience

UX Wireframe


Wireframe Beispiel: (pexels.com)

Low Fidelity Prototyp: Planung der Elemente und Inhalte in reduzierter, technischer Darstellung.

UX Mockup


Mockup Beispiel: iPhone App, umgesetzt mit Balsamiq

Middle-Strong Fidelity Prototyp: Planung der Elemente und Inhalte häufig bereits mit Farben, Bildern und typegrafischen Elementen

Design

Visuelle Gestaltung des gesamten Erscheinungsbildes der Website auf Basis des Corporate Designs unter Beachtung der unterschiedlichen Bildschirmgrößen (RD).

Tools: Sketch, Adobe XD, Photoshop, InDesign, …

Prototypen

High Fidelity-Prototyen kommen zum Einsatz um das visuelles Design inklusive Interaktionen zu testen.

Tools: Axure, Sketch, Adobe XD

Umsetzung

  • Statische Website vs. CMS
    • Hugo, Jekyll.. vs. wordpress, TYPO3…
  • Styles: Atomic Design oder Design System
  • Tools: Versionsverwaltung, Taskautomatisierung, CI/CD Pipeline

Testing


Testpyramide

Go Live