SlideShare ist ein Scribd-Unternehmen logo
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
Concept Models




                 2
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
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
Concept Models

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




                                       5
Concept Models




                 Dan Brown

                             6
Concept Models




                 Dan Brown

                             7
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
Concept Models üben

Legt ein Concept Model anhand eurer AOF-
Aufgabe an und stellt es kurz vor.

Ca. 20 Minuten.




                                           10
Flowcharts - Flussdiagramme - Prozessdiagramme




                                                 11
Wozu?

        1. einfache, hierarchische
        Informationsarchitekturen /
        Sitemaps konstruieren


        2. Interaktionsabläufe
        modellieren




                                      12
Was wisst ihr schon / noch?




                              http://xkcd.com/518/13
Navigation in Halblang (Interaktiver Film)




Halblang- Interaktiver Film von Melanie Stirner und David Lauer

                                                                  17
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-Tools

Excel & Visio (für sitemaps)
Xmind
Freemind
Mindmanager
(Mindmeister)
PapDesigner




                                 27
Flowchart üben

Sucht euch einen funktionalen Ablauf aus
eurem Concept Model und beschreibt ihn
im Detail.




                                           28
Übungsaufgabe: Navigationsstruktur

Welche versch. Navigationsstrukturen stellt die Website
intermedia-design.de bereit?
Multiple Navigationsstrukturen
Multiple Navigationsstrukturen: Globale Navigation




                           Home


    News         Studium          Projekte   Team
Multiple Navigationsstrukturen: Lokale Navigation




                                   Studium


                         Studieninhalte




                         Lehrgebiete 1-n
Multiple Navigationsstrukturen: Ergänzende Navi.




                                               Betreuer XY


Lehrgebiet XY             Projekt XY




                               Schlagwort XY
Spezifikationen




                  34
Spezifikationen u.a. Designdokumente

Was können Flowcharts leisten?
Wo sind ihre Grenzen?




                                       35
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
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
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
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
Spezifikationen: Vermeide Subjektives

Specs müssen falsifizierbar sein,
d.h. man muss nachweisen können,
wenn Sie nicht eingehalten wurden.




                                        40
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
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
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
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
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

Weitere ähnliche Inhalte

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

Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Stefan Freimark
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
UX Design: Ziele - Metriken - Patterns (4. Sitzung)
UX Design: Ziele - Metriken - Patterns (4. Sitzung)UX Design: Ziele - Metriken - Patterns (4. Sitzung)
UX Design: Ziele - Metriken - Patterns (4. Sitzung)Marcus Haberkorn
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009Jutta Korn
 
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...Matthias Bohlen
 
Architektur = Kommunikation
Architektur = KommunikationArchitektur = Kommunikation
Architektur = KommunikationMatthias Bohlen
 
WJAX 2014: Pah, ArchitekturDoku, darauf habe ich keine Lust!
WJAX 2014: Pah, ArchitekturDoku, darauf habe ich keine Lust!WJAX 2014: Pah, ArchitekturDoku, darauf habe ich keine Lust!
WJAX 2014: Pah, ArchitekturDoku, darauf habe ich keine Lust!Matthias Bohlen
 
Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014Julian Mengel
 
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)Renate Pinggera
 
Digital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User ExperienceDigital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User ExperienceJürg Stuker
 
FileMaker Konferenz 2012 Lightning Presentation
FileMaker Konferenz 2012 Lightning PresentationFileMaker Konferenz 2012 Lightning Presentation
FileMaker Konferenz 2012 Lightning PresentationMartin Brändle
 
Präsentation Knowtech 2008 seto
Präsentation Knowtech 2008 setoPräsentation Knowtech 2008 seto
Präsentation Knowtech 2008 setoStefan Meißner
 
Softwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightSoftwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightChristinaLerch1
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content ExperiencePeter Rozek
 

Ähnlich wie UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung) (20)

Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
UX Design: Ziele - Metriken - Patterns (4. Sitzung)
UX Design: Ziele - Metriken - Patterns (4. Sitzung)UX Design: Ziele - Metriken - Patterns (4. Sitzung)
UX Design: Ziele - Metriken - Patterns (4. Sitzung)
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
IA Konferenz 2009
IA Konferenz 2009IA Konferenz 2009
IA Konferenz 2009
 
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
 
Enterprise JS
Enterprise JS Enterprise JS
Enterprise JS
 
Architektur = Kommunikation
Architektur = KommunikationArchitektur = Kommunikation
Architektur = Kommunikation
 
Whitecoast lcty12 x_pages
Whitecoast lcty12 x_pagesWhitecoast lcty12 x_pages
Whitecoast lcty12 x_pages
 
WJAX 2014: Pah, ArchitekturDoku, darauf habe ich keine Lust!
WJAX 2014: Pah, ArchitekturDoku, darauf habe ich keine Lust!WJAX 2014: Pah, ArchitekturDoku, darauf habe ich keine Lust!
WJAX 2014: Pah, ArchitekturDoku, darauf habe ich keine Lust!
 
Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014
 
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
 
Digital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User ExperienceDigital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User Experience
 
FileMaker Konferenz 2012 Lightning Presentation
FileMaker Konferenz 2012 Lightning PresentationFileMaker Konferenz 2012 Lightning Presentation
FileMaker Konferenz 2012 Lightning Presentation
 
Vorstellung PG PLME
Vorstellung PG PLMEVorstellung PG PLME
Vorstellung PG PLME
 
Präsentation Knowtech 2008 seto
Präsentation Knowtech 2008 setoPräsentation Knowtech 2008 seto
Präsentation Knowtech 2008 seto
 
Softwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha NightSoftwerkskammer Chemnitz Special Pecha Kucha Night
Softwerkskammer Chemnitz Special Pecha Kucha Night
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 

Mehr von Marcus Haberkorn

The Making of 'Ewige Unruhe'
The Making of 'Ewige Unruhe'The Making of 'Ewige Unruhe'
The Making of 'Ewige Unruhe'Marcus Haberkorn
 
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassenResonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassenMarcus Haberkorn
 
Playful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. SitzungPlayful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. SitzungMarcus Haberkorn
 
Gamification: Neue Strategien der Nutzerbindung im Internet?
Gamification: Neue Strategien der Nutzerbindung im Internet?Gamification: Neue Strategien der Nutzerbindung im Internet?
Gamification: Neue Strategien der Nutzerbindung im Internet?Marcus Haberkorn
 
UX Design - Gamification Einführung
UX Design - Gamification EinführungUX Design - Gamification Einführung
UX Design - Gamification EinführungMarcus Haberkorn
 
Transmedia Storytelling in Pervasive Games / Alternate Reality Games
Transmedia Storytelling in Pervasive Games / Alternate Reality GamesTransmedia Storytelling in Pervasive Games / Alternate Reality Games
Transmedia Storytelling in Pervasive Games / Alternate Reality GamesMarcus Haberkorn
 
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)Marcus Haberkorn
 
UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)
UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)
UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)Marcus Haberkorn
 
UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)Marcus Haberkorn
 
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)Marcus Haberkorn
 

Mehr von Marcus Haberkorn (11)

The Making of 'Ewige Unruhe'
The Making of 'Ewige Unruhe'The Making of 'Ewige Unruhe'
The Making of 'Ewige Unruhe'
 
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassenResonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
 
Playful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. SitzungPlayful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. Sitzung
 
UX Design - 2. Sitzung
UX Design - 2. SitzungUX Design - 2. Sitzung
UX Design - 2. Sitzung
 
Gamification: Neue Strategien der Nutzerbindung im Internet?
Gamification: Neue Strategien der Nutzerbindung im Internet?Gamification: Neue Strategien der Nutzerbindung im Internet?
Gamification: Neue Strategien der Nutzerbindung im Internet?
 
UX Design - Gamification Einführung
UX Design - Gamification EinführungUX Design - Gamification Einführung
UX Design - Gamification Einführung
 
Transmedia Storytelling in Pervasive Games / Alternate Reality Games
Transmedia Storytelling in Pervasive Games / Alternate Reality GamesTransmedia Storytelling in Pervasive Games / Alternate Reality Games
Transmedia Storytelling in Pervasive Games / Alternate Reality Games
 
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
 
UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)
UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)
UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)
 
UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)
 
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
 

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

  • 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
  • 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
  • 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?
  • 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
  • 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