Concept Models – Flowcharts – SpecsUser Experience Design für interaktive Systeme3. SitzungMarcus Haberkorn | Intermedia D...
Concept Models                 2
Wozu?        Inhaltliche Anforderungen:        Definition der notwendigen        Inhaltselemente der Site zur        Befri...
Concept ModelsIn der Analysephase werden kulturelle,kontextuelle und benutzerbezogeneInformationen gesammelt.Diese können ...
Concept ModelsKonkrete Funktion:- Überlegungen spezifizieren- Zusammenhänge reflektieren- Priorisieren / CM: nur Wichtigst...
Concept Models                 Dan Brown                             6
Concept Models                 Dan Brown                             7
Concept Models: Flickr (von Bryce Glass)Screenshots sind in der Regel verlinktAngaben, soweit nicht bereits auf der Folie ...
Concept Models übenLegt ein Concept Model anhand eurer AOF-Aufgabe an und stellt es kurz vor.Ca. 20 Minuten.              ...
Flowcharts - Flussdiagramme - Prozessdiagramme                                                 11
Wozu?        1. einfache, hierarchische        Informationsarchitekturen /        Sitemaps konstruieren        2. Interakt...
Was wisst ihr schon / noch?                              http://xkcd.com/518/13
Navigation in Halblang (Interaktiver Film)Halblang- Interaktiver Film von Melanie Stirner und David Lauer                 ...
Flowcharts für Halblang (Interaktiver Film)                                              18
Flowcharts für Halblang (Interaktiver Film)                                              19
Flowcharts für Halblang (Interaktiver Film)                                              20
Flowcharts für Halblang (Interaktiver Film)                                              21
Flowcharts für Halblang (Interaktiver Film)                                              23
Flowcharts für myowncasting.com                                  24
Konventionen               25
26
Flowchart- & Sitemapping-ToolsExcel & Visio (für sitemaps)XmindFreemindMindmanager(Mindmeister)PapDesigner                ...
Flowchart übenSucht euch einen funktionalen Ablauf auseurem Concept Model und beschreibt ihnim Detail.                    ...
Übungsaufgabe: NavigationsstrukturWelche versch. Navigationsstrukturen stellt die Websiteintermedia-design.de bereit?
Multiple Navigationsstrukturen
Multiple Navigationsstrukturen: Globale Navigation                           Home    News         Studium          Projekt...
Multiple Navigationsstrukturen: Lokale Navigation                                   Studium                         Studie...
Multiple Navigationsstrukturen: Ergänzende Navi.                                               Betreuer XYLehrgebiet XY   ...
Spezifikationen                  34
Spezifikationen u.a. DesigndokumenteWas können Flowcharts leisten?Wo sind ihre Grenzen?                                   ...
Spezifikationen: Probleme1. Specs sind manchmal ziemlich dröge zu lesen und   rauben Zeit für die Implementierung    > Spe...
Spezifikationen: LösungsansatzSpezifikationen schreiben nicht zu einemeigenen Projekt machen.Dokumentationen lösen kein Pr...
Spezifikationen: Nutze positive Beschreibungenstatt:Das System erlaubt Usern mit dem Status Leser nicht,Videos über 100 MB...
Spezifikationen: Sei spezifischstatt:Die wichtigsten Videos werden ineiner Liste hervorgehoben.besser:Die Videos mit den m...
Spezifikationen: Vermeide SubjektivesSpecs müssen falsifizierbar sein,d.h. man muss nachweisen können,wenn Sie nicht einge...
Spezifikationen: Vermeide Subjektives1:Das Spiel verwickelt den User in aufregendeSchwertkämpfe mit hip aussehenden Buckel...
Spezifikationen: Vermeide Subjektives1: Die Artikel-Teaser werden in einer coolen Animation ausgetauscht!!!2: Die Artikel-...
Speziifkationen auch visuell unterstützenBewegtbild eignet sich insb.,um dynamischeInteraktionen zuveranschaulichen (gehör...
Bild- und Quellennachweise nach FoliennummernInsofern nicht auf den Folien vermerkt:QUELLENUX-Ebenenmodelle Folie 3 u.a. -...
Marcus HaberkornAkademischer Rat, M.A.Lehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design ...
Nächste SlideShare
Wird geladen in …5
×

UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)

2.691 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.691
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
400
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)

  1. 1. Concept Models – Flowcharts – SpecsUser Experience Design für interaktive Systeme3. SitzungMarcus Haberkorn | Intermedia Design | 2012Seminar | User Experience Design | Wahlpflichtkurs für Semester 3-5
  2. 2. Concept Models 2
  3. 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. 4. Concept ModelsIn der Analysephase werden kulturelle,kontextuelle und benutzerbezogeneInformationen gesammelt.Diese können zur Spezifizierung in dieForm eines Konzeptmodells überführtwerden (bietet sich z. B. nach Anwendungder AOF-Methode an). 4
  5. 5. Concept ModelsKonkrete Funktion:- Überlegungen spezifizieren- Zusammenhänge reflektieren- Priorisieren / CM: nur Wichtigstes- Visualisieren- Konzept Anderen erläutern 5
  6. 6. Concept Models Dan Brown 6
  7. 7. Concept Models Dan Brown 7
  8. 8. Concept Models: Flickr (von Bryce Glass)Screenshots sind in der Regel verlinktAngaben, soweit nicht bereits auf der Folie angegeben, nach FoliennummernBILDER3 JJG http://www.flickr.com/photos/martin-kliehm/536545606/15 http://www.jjg.net/elements/translations/elements_de.pdf16 J. Porter: http://chinposin.wordpress.com/aboutLITERATURGarrett, Jesse James (2010): The Elements of User ExperiencePorter, Joshua (2010): Social Web Design 9
  9. 9. Concept Models übenLegt ein Concept Model anhand eurer AOF-Aufgabe an und stellt es kurz vor.Ca. 20 Minuten. 10
  10. 10. Flowcharts - Flussdiagramme - Prozessdiagramme 11
  11. 11. Wozu? 1. einfache, hierarchische Informationsarchitekturen / Sitemaps konstruieren 2. Interaktionsabläufe modellieren 12
  12. 12. Was wisst ihr schon / noch? http://xkcd.com/518/13
  13. 13. Navigation in Halblang (Interaktiver Film)Halblang- Interaktiver Film von Melanie Stirner und David Lauer 17
  14. 14. Flowcharts für Halblang (Interaktiver Film) 18
  15. 15. Flowcharts für Halblang (Interaktiver Film) 19
  16. 16. Flowcharts für Halblang (Interaktiver Film) 20
  17. 17. Flowcharts für Halblang (Interaktiver Film) 21
  18. 18. Flowcharts für Halblang (Interaktiver Film) 23
  19. 19. Flowcharts für myowncasting.com 24
  20. 20. Konventionen 25
  21. 21. 26
  22. 22. Flowchart- & Sitemapping-ToolsExcel & Visio (für sitemaps)XmindFreemindMindmanager(Mindmeister)PapDesigner 27
  23. 23. Flowchart übenSucht euch einen funktionalen Ablauf auseurem Concept Model und beschreibt ihnim Detail. 28
  24. 24. Übungsaufgabe: NavigationsstrukturWelche versch. Navigationsstrukturen stellt die Websiteintermedia-design.de bereit?
  25. 25. Multiple Navigationsstrukturen
  26. 26. Multiple Navigationsstrukturen: Globale Navigation Home News Studium Projekte Team
  27. 27. Multiple Navigationsstrukturen: Lokale Navigation Studium Studieninhalte Lehrgebiete 1-n
  28. 28. Multiple Navigationsstrukturen: Ergänzende Navi. Betreuer XYLehrgebiet XY Projekt XY Schlagwort XY
  29. 29. Spezifikationen 34
  30. 30. Spezifikationen u.a. DesigndokumenteWas können Flowcharts leisten?Wo sind ihre Grenzen? 35
  31. 31. Spezifikationen: Probleme1. 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. 32. Spezifikationen: LösungsansatzSpezifikationen schreiben nicht zu einemeigenen Projekt machen.Dokumentationen lösen kein Problem.Definitionen lösen Probleme.Nicht auf Umfang und Detailgrad achten.Achte auf Klarheit und Exaktheit für denAdressaten (Designer, ITler, man selbst…). 37
  33. 33. Spezifikationen: Nutze positive Beschreibungenstatt:Das System erlaubt Usern mit dem Status Leser nicht,Videos über 100 MB hochzuladen.besser:Das System zeigt Usern mit dem Status Leser, die einVideo über 100 MB hochladen wollen, dieStatusmeldung „Sie können nur Videos bis zu 100 MBhochladen. Wenn Sie größere Videos hochladen wollen,benötigen Sie einen Premium-Account.“ 38
  34. 34. Spezifikationen: Sei spezifischstatt:Die wichtigsten Videos werden ineiner Liste hervorgehoben.besser:Die Videos mit den meisten Viewsder letzten 7 Tage erscheinen inabsteigender Sortierung in einer Listemit 10 Einträgen. 39
  35. 35. Spezifikationen: Vermeide SubjektivesSpecs müssen falsifizierbar sein,d.h. man muss nachweisen können,wenn Sie nicht eingehalten wurden. 40
  36. 36. Spezifikationen: Vermeide Subjektives1:Das Spiel verwickelt den User in aufregendeSchwertkämpfe mit hip aussehenden Buckelwalen.2:Die Buckelwale entsprechen den Hipness-Erwartungenvon Roger, unserem Praktikanten.3:Die Buckelwale entsprechen dem im Artbook festgelegtenErscheinungsbild. 41
  37. 37. Spezifikationen: Vermeide Subjektives1: Die Artikel-Teaser werden in einer coolen Animation ausgetauscht!!!2: Die Artikel-Teaser bleiben 5 Sek. stehen. Dann startet eineAnimation: Der Teaser A fährt nach links aus dem Bild (350ms), dernächste (B) rückt nahtlos von rechts nach. Das Textoverlay wirdgesondert animiert: A fährt nach unten raus (175ms), B nach oben hinein(350ms). Die Animationen bremsen auf den letzten 20% auf ¼ derGeschwindigkeit (ease-out). 42
  38. 38. Speziifkationen auch visuell unterstützenBewegtbild eignet sich insb.,um dynamischeInteraktionen zuveranschaulichen (gehört dannzum Prototyping, wird inspäterer Sitzung ausgeführt).Beispiel Heli Hippo(BA-Arbeit, Thorsten Gätz) 43
  39. 39. Bild- und Quellennachweise nach FoliennummernInsofern nicht auf den Folien vermerkt:QUELLENUX-Ebenenmodelle Folie 3 u.a. - Garrett, Jesse James (2010): The Elements of User Experience (eigene Darstellung) 44
  40. 40. Marcus HaberkornAkademischer Rat, M.A.Lehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fachbereich GestaltungFachhochschule TrierIrminenfreihof 8Postfach 1826D-54208 TrierTel. +49 651 8103-839Mail: m.haberkorn@fh-trier.de 45

×