Folien zur 3. Sitzung der Veranstaltung "User Experience Design" im Studiengang Intermedia Design der FH Trier im Sommersemester 2012

1. Concept Models – Flowcharts – Specs
User Experience Design für interaktive Systeme
3. Sitzung
Marcus Haberkorn | Intermedia Design | 2012
Seminar | User Experience Design | Wahlpflichtkurs für Semester 3-5

2. Concept Models
2

3. Wozu?
Inhaltliche Anforderungen:
Definition der notwendigen
Inhaltselemente der Site zur
Befriedigung der
Benutzerbedürfnisse
Spezifizierung der Funktionen:
‚Feature-Set‘ als detaillierte
Beschreibung der Funktionalität
der Site, um die
Benutzeranforderungen zu
befriedigen

4. Concept Models
In der Analysephase werden kulturelle,
kontextuelle und benutzerbezogene
Informationen gesammelt.
Diese können zur Spezifizierung in die
Form eines Konzeptmodells überführt
werden (bietet sich z. B. nach Anwendung
der AOF-Methode an).
4

5. Concept Models
Konkrete Funktion:
- Überlegungen spezifizieren
- Zusammenhänge reflektieren
- Priorisieren / CM: nur Wichtigstes
- Visualisieren
- Konzept Anderen erläutern
5

6. Concept Models
Dan Brown
6

7. Concept Models
Dan Brown
7

8. Concept Models: Flickr (von Bryce Glass)
Screenshots sind in der Regel verlinkt
Angaben, soweit nicht bereits auf der Folie angegeben, nach Foliennummern
BILDER
3 JJG http://www.flickr.com/photos/martin-kliehm/536545606/
15 http://www.jjg.net/elements/translations/elements_de.pdf
16 J. Porter: http://chinposin.wordpress.com/about
LITERATUR
Garrett, Jesse James (2010): The Elements of User Experience
Porter, Joshua (2010): Social Web Design
9

9. Concept Models üben
Legt ein Concept Model anhand eurer AOF-
Aufgabe an und stellt es kurz vor.
Ca. 20 Minuten.
10

10. Flowcharts - Flussdiagramme - Prozessdiagramme
11

11. Wozu?
1. einfache, hierarchische
Informationsarchitekturen /
Sitemaps konstruieren
2. Interaktionsabläufe
modellieren
12

12. Was wisst ihr schon / noch?
http://xkcd.com/518/13

13. Navigation in Halblang (Interaktiver Film)
Halblang- Interaktiver Film von Melanie Stirner und David Lauer
17

14. Flowcharts für Halblang (Interaktiver Film)
18

15. Flowcharts für Halblang (Interaktiver Film)
19

16. Flowcharts für Halblang (Interaktiver Film)
20

17. Flowcharts für Halblang (Interaktiver Film)
21

18. Flowcharts für Halblang (Interaktiver Film)
23

19. Flowcharts für myowncasting.com
24

20. Konventionen
25

21. 26

22. Flowchart- & Sitemapping-Tools
Excel & Visio (für sitemaps)
Xmind
Freemind
Mindmanager
(Mindmeister)
PapDesigner
27

23. Flowchart üben
Sucht euch einen funktionalen Ablauf aus
eurem Concept Model und beschreibt ihn
im Detail.
28

24. Übungsaufgabe: Navigationsstruktur
Welche versch. Navigationsstrukturen stellt die Website
intermedia-design.de bereit?

25. Multiple Navigationsstrukturen

26. Multiple Navigationsstrukturen: Globale Navigation
Home
News Studium Projekte Team

27. Multiple Navigationsstrukturen: Lokale Navigation
Studium
Studieninhalte
Lehrgebiete 1-n

28. Multiple Navigationsstrukturen: Ergänzende Navi.
Betreuer XY
Lehrgebiet XY Projekt XY
Schlagwort XY

29. Spezifikationen
34

30. Spezifikationen u.a. Designdokumente
Was können Flowcharts leisten?
Wo sind ihre Grenzen?
35

31. Spezifikationen: Probleme
1. Specs sind manchmal ziemlich dröge zu lesen und
rauben Zeit für die Implementierung
> Specs bleiben ungelesen
> das verstärkt den Eindruck, dass Specs zu
produzieren Zeitverschwendung ist (self-fulfilling
prophecy)
2. Dinge ändern sich während der Implementierung
36

32. Spezifikationen: Lösungsansatz
Spezifikationen schreiben nicht zu einem
eigenen Projekt machen.
Dokumentationen lösen kein Problem.
Definitionen lösen Probleme.
Nicht auf Umfang und Detailgrad achten.
Achte auf Klarheit und Exaktheit für den
Adressaten (Designer, ITler, man selbst
…).
37

33. Spezifikationen: Nutze positive Beschreibungen
statt:
Das System erlaubt Usern mit dem Status Leser nicht,
Videos über 100 MB hochzuladen.
besser:
Das System zeigt Usern mit dem Status Leser, die ein
Video über 100 MB hochladen wollen, die
Statusmeldung „Sie können nur Videos bis zu 100 MB
hochladen. Wenn Sie größere Videos hochladen wollen,
benötigen Sie einen Premium-Account.“
38

34. Spezifikationen: Sei spezifisch
statt:
Die wichtigsten Videos werden in
einer Liste hervorgehoben.
besser:
Die Videos mit den meisten Views
der letzten 7 Tage erscheinen in
absteigender Sortierung in einer Liste
mit 10 Einträgen.
39

35. Spezifikationen: Vermeide Subjektives
Specs müssen falsifizierbar sein,
d.h. man muss nachweisen können,
wenn Sie nicht eingehalten wurden.
40

36. Spezifikationen: Vermeide Subjektives
1:
Das Spiel verwickelt den User in aufregende
Schwertkämpfe mit hip aussehenden Buckelwalen.
2:
Die Buckelwale entsprechen den Hipness-Erwartungen
von Roger, unserem Praktikanten.
3:
Die Buckelwale entsprechen dem im Artbook festgelegten
Erscheinungsbild.
41

37. Spezifikationen: Vermeide Subjektives
1: Die Artikel-Teaser werden in einer coolen Animation ausgetauscht!!!
2: Die Artikel-Teaser bleiben 5 Sek. stehen. Dann startet eine
Animation: Der Teaser A fährt nach links aus dem Bild (350ms), der
nächste (B) rückt nahtlos von rechts nach. Das Textoverlay wird
gesondert animiert: A fährt nach unten raus (175ms), B nach oben hinein
(350ms). Die Animationen bremsen auf den letzten 20% auf ¼ der
Geschwindigkeit (ease-out).
42

38. Speziifkationen auch visuell unterstützen
Bewegtbild eignet sich insb.,
um dynamische
Interaktionen zu
veranschaulichen (gehört dann
zum Prototyping, wird in
späterer Sitzung ausgeführt).
Beispiel Heli Hippo
(BA-Arbeit, Thorsten Gätz)
43

39. Bild- und Quellennachweise nach Foliennummern
Insofern nicht auf den Folien vermerkt:
QUELLEN
UX-Ebenenmodelle Folie 3 u.a. - Garrett, Jesse James (2010): The Elements of User Experience (eigene Darstellung)
44

40. Marcus Haberkorn
Akademischer Rat, M.A.
Lehrgebiet Hypermedia: Interaktive & vernetzte Systeme
Studiengang Intermedia Design im Fachbereich Gestaltung
Fachhochschule Trier
Irminenfreihof 8
Postfach 1826
D-54208 Trier
Tel. +49 651 8103-839
Mail: m.haberkorn@fh-trier.de
45