User-centered Design: So gelingt euer Web-Auftritt (Teil 2)
Eine Website neu gestalten oder eine App entwerfen: Teil 1 meines Specials zum Thema User-centered Design (UCD) zeigte euch, wie die Nutzungskontext-Analyse das Surf-Verhalten eurer Zielgruppe greifbar macht. Mit diesen Erkenntnissen geht es nun zu Schritt 2: Entwurf und Gestaltung.
➤ 1. Use Cases: Sie beschreiben konkrete Anwendungsfälle der zu entwickelnden Website/App. Uses Cases sollen die gesamte Funktionalität des künftigen Online-Auftritts erfassen. Eine sehr gute ausführliche Erklärung findet ihr auf microtool.de.
➤ 2. User Storys: Diese "Anwender-Erzählungen" formulieren einfach und knapp, was ein User von der zu entwickelnden Website oder App erwartet. User Storys sind kurz gehalten (max. zwei Sätze), jede Story wird auf eine Story-Card geschrieben.
Beispiel: "Als User dieser Finanz-Website (<Rolle>), möchte ich Anlage-Tipps lesen (<Ziel/Wunsch>), um mein Vermögen zu vergrößern (<Nutzen>)."
Wie unterscheiden sich User Storys und Use Cases? Ein Use Case bündelt alle Erfolgs- und Misserfolgs-Szenarien eines Users, wenn er eine Website/App nutzt. Eine User Story ist ein einzelnes dieser konkreten Szenarien.
➤ 3. Storyboards visualisieren die Gestaltungsentwürfe einer Website/App. Sie entwickeln Use Cases weiter, welche die Interaktion bereits aus Nutzersicht beschrieben haben.
Experten definieren Storyboards im User-centered Design unterschiedlich. Für die einen geht es darum, alle Seiten der entstehenden Website/App in strukturelle Entwürfe zu bringen (sogenannte Wireframes, "Drahtgitter"). Ein Beispiel:
Parallel entsteht im "Storyboarding" eine Sitemap, welche die Navigations-Struktur der künftigen Website bzw. App abbildet:
Andere Definitionen verstehen unter einem Storyboard vorrangig ein "Szenen-Buch", das zeigt, wie der User die zu entwickelnde Website/App nutzt. Ein Beispiel:
Es ist sinnvoll, beide Ansätze zu kombinieren: Ersterer hilft, eure entstehende Website/App prototypentauglich zu machen. Letzterer stellt sicher, dass ihr weiterhin den Nutzer (User) in den Mittelpunkt (center) der Gestaltung (Design) stellt.
Der nächste Schritt ist die technische Umsetzung (Implementierung) gefolgt von der stetigen Bewertung eures fertigen Online-Auftritts (Evaluation). Alle Infos dazu bietet mein Beitrag User-centered Design: So gelingt euer Web-Auftritt (Teil 3).
 |
| Zum Vergrößern bitte in das Bild klicken. |
UCD-Schritt 2: Entwurf & Gestaltung
Anhand der Ergebnisse aus der Nutzungskontext-Analyse definiert ihr, was eure künftige Website oder App leisten müssen. Hierfür haben sich drei Werkzeuge etabliert, die ihr kombinieren solltet.➤ 1. Use Cases: Sie beschreiben konkrete Anwendungsfälle der zu entwickelnden Website/App. Uses Cases sollen die gesamte Funktionalität des künftigen Online-Auftritts erfassen. Eine sehr gute ausführliche Erklärung findet ihr auf microtool.de.
 |
| Stark vereinfachtes Beispiel eines Use Case. |
➤ 2. User Storys: Diese "Anwender-Erzählungen" formulieren einfach und knapp, was ein User von der zu entwickelnden Website oder App erwartet. User Storys sind kurz gehalten (max. zwei Sätze), jede Story wird auf eine Story-Card geschrieben.
Beispiel: "Als User dieser Finanz-Website (<Rolle>), möchte ich Anlage-Tipps lesen (<Ziel/Wunsch>), um mein Vermögen zu vergrößern (<Nutzen>)."
 |
| (Story Card von Sebastian Dietrich unter CC BY-SA 3.0) |
Wie unterscheiden sich User Storys und Use Cases? Ein Use Case bündelt alle Erfolgs- und Misserfolgs-Szenarien eines Users, wenn er eine Website/App nutzt. Eine User Story ist ein einzelnes dieser konkreten Szenarien.
➤ 3. Storyboards visualisieren die Gestaltungsentwürfe einer Website/App. Sie entwickeln Use Cases weiter, welche die Interaktion bereits aus Nutzersicht beschrieben haben.
Experten definieren Storyboards im User-centered Design unterschiedlich. Für die einen geht es darum, alle Seiten der entstehenden Website/App in strukturelle Entwürfe zu bringen (sogenannte Wireframes, "Drahtgitter"). Ein Beispiel:
Parallel entsteht im "Storyboarding" eine Sitemap, welche die Navigations-Struktur der künftigen Website bzw. App abbildet:
 |
| (Sitemap unter CC0 1.0) |
Andere Definitionen verstehen unter einem Storyboard vorrangig ein "Szenen-Buch", das zeigt, wie der User die zu entwickelnde Website/App nutzt. Ein Beispiel:
 |
| (CCF storyboard von Rob Enslin unter CC BY 2.0) |
Es ist sinnvoll, beide Ansätze zu kombinieren: Ersterer hilft, eure entstehende Website/App prototypentauglich zu machen. Letzterer stellt sicher, dass ihr weiterhin den Nutzer (User) in den Mittelpunkt (center) der Gestaltung (Design) stellt.
User-centered Design: Das war Phase 2
Ihr wisst nun, wie eure Zielgruppe das Web nutzt (Nutzungskontext-Analyse) und welche Anforderungen sich daraus für eure künftige Website/App ergeben (Entwurf & Gestaltung).Der nächste Schritt ist die technische Umsetzung (Implementierung) gefolgt von der stetigen Bewertung eures fertigen Online-Auftritts (Evaluation). Alle Infos dazu bietet mein Beitrag User-centered Design: So gelingt euer Web-Auftritt (Teil 3).
Kommentare