SlideShare ist ein Scribd-Unternehmen logo
Einführung

User Experience Design für interaktive Systeme
2. Sitzung




Marcus Haberkorn | Fachhochschule Trier| 2012
Seminar | User Experience Design | Wahlpflichtkurs für Semester 3-5
Jesse James Garrett:
The Elements of User Experience




                                  2
Jesse James Garrett

Die Elemente der User Experience


"Standardwerk" für UX (2002)
umfassende Systematisierung
ursprünglich für Websysteme




Homepage/Blog http://jjg.net
                                   3
UX Design - 2. Sitzung
Jesse James Garrett: Elements of UX
                         Oberfläche bringt alles visuell zusammen:
                         Wie sieht das fertige Produkt aus?

                         Gerüst konkretisiert die Struktur:
                         Mit welchen Interface-Komponenten können User die Site
                         nutzen?

                         Struktur gibt dem Aufgabenbereich eine Form: Wie
                         verhalten sich die Teile der Seite und passen wie zusammen?

                         Aufgabenbereich überführt Strategie in Anforderungen:
                         Welche Features wird die Site beinhalten?

                         Strategie ist der Anfang:
                         Was will der User von der Site? Was wollen wir?

                                                                                       5
Jesse James Garrett: Web als Hypertextsystem
                         Die folgenden Folien beziehen sich auf
                         das

                         Web als Hypertextsytem
                         (informationsorientiert, rechte Hälfte
                         der Grafik).


                         Nutzt das zu entwickelnde System das
                         Web als Software-Schnittstelle

                         (aufgabenorientiert, linke Hälfte der
                         Grafik), kommen andere Ansätze hinzu.
                                                                  6
Jesse James Garrett: Web als Hypertextsystem

                         Benutzer-Bedürfnisse:
                         Von Außen abgeleitete Site-
                         Zielsetzungen, welche durch
                         Benutzerforschung erhoben werden
                         (ethno-, techno-, psychografisch etc.)



                         Inhaltsziele: Interne Zielsetzungen der
                         Site, wie etwa geschäftliche,
                         künstlerische o.a.


                                                                   7
Jesse James Garrett: Web als Hypertextsystem

                         Inhaltliche Anforderungen:
                         Definition der notwendigen
                         Inhaltselemente der Site zur
                         Befriedigung der Benutzerbedürfnisse




                                                                8
Jesse James Garrett: Web als Hypertextsystem

                         Informations-Architektur:
                         Strukturierte Gestaltung des
                         Informationsraumes zur




                                                        9
Jesse James Garrett: Web als Hypertextsystem

                         Navigations-Gestaltung: Gestaltung
                         der Schnittstellen-Elemente zur
                         Erleichterung der Navigation durch die
                         Informations-Architektur



                         Informationsgestaltung:
                         Informationsgestaltung zur
                         Erleichterung
                         des Verständnisses


                                                                  10
Jesse James Garrett: Web als Hypertextsystem

                         Visuelle Gestaltung:
                         Grafische Bearbeitung von Text,
                         grafischen Elementen und
                         Navigationskomponenten




                                                           11
Jesse James Garrett: Web als Softwareschnittstelle

Die Perspektive auf Systeme als
Software-Schnittstelle
(aufgabenorientiert, linke Hälfte der
Grafik) fügt weitere Aspekte hinzu.




                                                       12
Jesse James Garrett: Web als Softwareschnittstelle

Visuelle Gestaltung:

Grafische Bearbeitung der
Schnittstellenelemente




                                                       13
Jesse James Garrett: Web als Softwareschnittstelle

Interface/Schnittstellen-gestaltung:

Gestaltung der Schnittstellen-Elemente
zur Erleichterung der Handhabung der
Funktionen, wie in der klassischen Human
Computer Interaction (HCI)



Informationsgestaltung:

Informationsgestaltung zur Erleichterung
des Verständnisses

                                                       14
Jesse James Garrett: Web als Softwareschnittstelle

Interaktionsdesign:
Gestaltung der Anwendungsflüsse zur
erleichterten Wahrnehmung von
Benutzeranforderungen, sowie Definition
des Umgangs mit den Funktionen




                                                       15
Jesse James Garrett: Web als Softwareschnittstelle

Spezifizierung der Funktionen:
‚Feature-Set‘ als detaillierte Beschreibung
der Funktionalität der Site, um die
Benutzeranforderungen zu befriedigen




                                                       16
Jesse James Garrett: Web als Softwareschnittstelle

Benutzer-Bedürfnisse:
Von Außen abgeleitete Site-
Zielsetzungen, welche durch
Benutzerforschung erhoben werden
(ethno-, techno-, psychografisch etc.)



Inhaltsziele:
Interne Zielsetzungen der Site, wie etwa
Business, künstlerische oder andere


                                                       17
Weiterbearbeitung der Aufgabe

Vorarbeit:
Ihr habt jeweils drei ähnliche Systeme verglichen, die nach eurer
Einschätzung unterschiedlich gute User Experiences liefern und sie
im Blog beschrieben.




                                                       Quelle        18
Weiterbearbeitung der Aufgabe

Szenario:
       Du leitest ein Designteam.
1.     Auf welchen der von dir analysierten Dienste
       setzt du wen aus deinem Team an?
       Mit welcher Aufgabe?
2.     Wen aus dem Team eines von dir analysierten
       Dienstes versuchst du für dein Team abzuwerben?


                                                      Quelle   19
Euer Team




Michael, Visual   Sue, Interface-                   David, Content-                      Patrice, Interaction
Designer          designerin                        manager / -strategist                Designerin




Charles,          Ingrid,                           Dave,                              Chuck,
Informations-     Konzeptionerin                    Produktmanager                     Abwicklungsexperte
architekt                                                                              (wenn nichts mehr hilft)
                                                                                           Quelle                       20

                         Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!
Concept Models / Concept Map




                               21
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



                                                      22
Concept Maps

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).



                                                                   23
Concept Maps

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



                                       24
Concept Maps




               25
Concept Maps




               26
Concept Maps




               Quelle   27
Concept Maps: Flickr (von Bryce Glass)




                                         28
Concept Maps - Vorgehensweise

1. Reduktion
2. Strukturierung & Visualisierung
3. Elaboration




                                     29
Concept Models




                 30
Concept Models




                 31
32
Übung

Legt eine Concept Map für Pacman auf dem Whiteboard an!




                                                   Quelle   33
34
35
Concept Models üben

Legt ein Concept Model eines euch bekannten Dienstes an und
stellt es kurz vor.
Ca. 20 Minuten.




                                                    Quelle    36
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




                                                          37

Weitere ähnliche Inhalte

Ähnlich wie UX Design - 2. Sitzung

Vernetzte Öffentlichkeiten 2013, Sitzung 4, "Technische Grundlagen"
Vernetzte Öffentlichkeiten 2013, Sitzung 4, "Technische Grundlagen"Vernetzte Öffentlichkeiten 2013, Sitzung 4, "Technische Grundlagen"
Vernetzte Öffentlichkeiten 2013, Sitzung 4, "Technische Grundlagen"
Jan Schmidt
 
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
 
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
Marcus Haberkorn
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Peter Rozek
 
Medienverwaltung ZKI-Hamburg
Medienverwaltung ZKI-HamburgMedienverwaltung ZKI-Hamburg
Medienverwaltung ZKI-Hamburg
Sergei Pachtchenko
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
AlineDeicke
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
Martin Hey
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
.NET User Group Dresden
 
Iak10 ikea family community
Iak10 ikea family communityIak10 ikea family community
Iak10 ikea family community
Webster59
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
christianschweinhardt
 
Systemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im ÜberblickSystemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im Überblick
a3 systems GmbH
 
Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
sascha assbach
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Roland Mast
 
Anwendungsbeispiele von Enterprise Mashups
Anwendungsbeispiele von Enterprise MashupsAnwendungsbeispiele von Enterprise Mashups
Anwendungsbeispiele von Enterprise Mashups
tischmid
 
Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)
Walter Schärer
 
Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008) Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008)
Thomas Koch
 
UX als Bestandteil des Software Engineering
UX als Bestandteil des Software EngineeringUX als Bestandteil des Software Engineering
UX als Bestandteil des Software Engineering
interactive curiosity - markus' nerd blog
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Dipl.-Ing. Leopold Peneder (HC Solutions)
Dipl.-Ing. Leopold Peneder (HC Solutions)Dipl.-Ing. Leopold Peneder (HC Solutions)
Dipl.-Ing. Leopold Peneder (HC Solutions)
Agenda Europe 2035
 

Ähnlich wie UX Design - 2. Sitzung (20)

Vernetzte Öffentlichkeiten 2013, Sitzung 4, "Technische Grundlagen"
Vernetzte Öffentlichkeiten 2013, Sitzung 4, "Technische Grundlagen"Vernetzte Öffentlichkeiten 2013, Sitzung 4, "Technische Grundlagen"
Vernetzte Öffentlichkeiten 2013, Sitzung 4, "Technische Grundlagen"
 
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...
 
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
Medienverwaltung ZKI-Hamburg
Medienverwaltung ZKI-HamburgMedienverwaltung ZKI-Hamburg
Medienverwaltung ZKI-Hamburg
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
 
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
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
Iak10 ikea family community
Iak10 ikea family communityIak10 ikea family community
Iak10 ikea family community
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 
Systemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im ÜberblickSystemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im Überblick
 
Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
 
Anwendungsbeispiele von Enterprise Mashups
Anwendungsbeispiele von Enterprise MashupsAnwendungsbeispiele von Enterprise Mashups
Anwendungsbeispiele von Enterprise Mashups
 
Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)
 
Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008) Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008)
 
UX als Bestandteil des Software Engineering
UX als Bestandteil des Software EngineeringUX als Bestandteil des Software Engineering
UX als Bestandteil des Software Engineering
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Dipl.-Ing. Leopold Peneder (HC Solutions)
Dipl.-Ing. Leopold Peneder (HC Solutions)Dipl.-Ing. Leopold Peneder (HC Solutions)
Dipl.-Ing. Leopold Peneder (HC Solutions)
 

Mehr von 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 lassen
Marcus Haberkorn
 
Playful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. SitzungPlayful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. Sitzung
Marcus 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ührung
Marcus Haberkorn
 
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
 
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
Marcus 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
 

Mehr von Marcus Haberkorn (7)

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
 
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
 
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)
 
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 - 2. Sitzung

  • 1. Einführung User Experience Design für interaktive Systeme 2. Sitzung Marcus Haberkorn | Fachhochschule Trier| 2012 Seminar | User Experience Design | Wahlpflichtkurs für Semester 3-5
  • 2. Jesse James Garrett: The Elements of User Experience 2
  • 3. Jesse James Garrett Die Elemente der User Experience "Standardwerk" für UX (2002) umfassende Systematisierung ursprünglich für Websysteme Homepage/Blog http://jjg.net 3
  • 5. Jesse James Garrett: Elements of UX Oberfläche bringt alles visuell zusammen: Wie sieht das fertige Produkt aus? Gerüst konkretisiert die Struktur: Mit welchen Interface-Komponenten können User die Site nutzen? Struktur gibt dem Aufgabenbereich eine Form: Wie verhalten sich die Teile der Seite und passen wie zusammen? Aufgabenbereich überführt Strategie in Anforderungen: Welche Features wird die Site beinhalten? Strategie ist der Anfang: Was will der User von der Site? Was wollen wir? 5
  • 6. Jesse James Garrett: Web als Hypertextsystem Die folgenden Folien beziehen sich auf das Web als Hypertextsytem (informationsorientiert, rechte Hälfte der Grafik). Nutzt das zu entwickelnde System das Web als Software-Schnittstelle (aufgabenorientiert, linke Hälfte der Grafik), kommen andere Ansätze hinzu. 6
  • 7. Jesse James Garrett: Web als Hypertextsystem Benutzer-Bedürfnisse: Von Außen abgeleitete Site- Zielsetzungen, welche durch Benutzerforschung erhoben werden (ethno-, techno-, psychografisch etc.) Inhaltsziele: Interne Zielsetzungen der Site, wie etwa geschäftliche, künstlerische o.a. 7
  • 8. Jesse James Garrett: Web als Hypertextsystem Inhaltliche Anforderungen: Definition der notwendigen Inhaltselemente der Site zur Befriedigung der Benutzerbedürfnisse 8
  • 9. Jesse James Garrett: Web als Hypertextsystem Informations-Architektur: Strukturierte Gestaltung des Informationsraumes zur 9
  • 10. Jesse James Garrett: Web als Hypertextsystem Navigations-Gestaltung: Gestaltung der Schnittstellen-Elemente zur Erleichterung der Navigation durch die Informations-Architektur Informationsgestaltung: Informationsgestaltung zur Erleichterung des Verständnisses 10
  • 11. Jesse James Garrett: Web als Hypertextsystem Visuelle Gestaltung: Grafische Bearbeitung von Text, grafischen Elementen und Navigationskomponenten 11
  • 12. Jesse James Garrett: Web als Softwareschnittstelle Die Perspektive auf Systeme als Software-Schnittstelle (aufgabenorientiert, linke Hälfte der Grafik) fügt weitere Aspekte hinzu. 12
  • 13. Jesse James Garrett: Web als Softwareschnittstelle Visuelle Gestaltung: Grafische Bearbeitung der Schnittstellenelemente 13
  • 14. Jesse James Garrett: Web als Softwareschnittstelle Interface/Schnittstellen-gestaltung: Gestaltung der Schnittstellen-Elemente zur Erleichterung der Handhabung der Funktionen, wie in der klassischen Human Computer Interaction (HCI) Informationsgestaltung: Informationsgestaltung zur Erleichterung des Verständnisses 14
  • 15. Jesse James Garrett: Web als Softwareschnittstelle Interaktionsdesign: Gestaltung der Anwendungsflüsse zur erleichterten Wahrnehmung von Benutzeranforderungen, sowie Definition des Umgangs mit den Funktionen 15
  • 16. Jesse James Garrett: Web als Softwareschnittstelle Spezifizierung der Funktionen: ‚Feature-Set‘ als detaillierte Beschreibung der Funktionalität der Site, um die Benutzeranforderungen zu befriedigen 16
  • 17. Jesse James Garrett: Web als Softwareschnittstelle Benutzer-Bedürfnisse: Von Außen abgeleitete Site- Zielsetzungen, welche durch Benutzerforschung erhoben werden (ethno-, techno-, psychografisch etc.) Inhaltsziele: Interne Zielsetzungen der Site, wie etwa Business, künstlerische oder andere 17
  • 18. Weiterbearbeitung der Aufgabe Vorarbeit: Ihr habt jeweils drei ähnliche Systeme verglichen, die nach eurer Einschätzung unterschiedlich gute User Experiences liefern und sie im Blog beschrieben. Quelle 18
  • 19. Weiterbearbeitung der Aufgabe Szenario: Du leitest ein Designteam. 1. Auf welchen der von dir analysierten Dienste setzt du wen aus deinem Team an? Mit welcher Aufgabe? 2. Wen aus dem Team eines von dir analysierten Dienstes versuchst du für dein Team abzuwerben? Quelle 19
  • 20. Euer Team Michael, Visual Sue, Interface- David, Content- Patrice, Interaction Designer designerin manager / -strategist Designerin Charles, Ingrid, Dave, Chuck, Informations- Konzeptionerin Produktmanager Abwicklungsexperte architekt (wenn nichts mehr hilft) Quelle 20 Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!
  • 21. Concept Models / Concept Map 21
  • 22. 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 22
  • 23. Concept Maps 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). 23
  • 24. Concept Maps Konkrete Funktion: - Überlegungen spezifizieren - Zusammenhänge reflektieren - Priorisieren / CM: nur Wichtigstes - Visualisieren - Konzept Anderen erläutern 24
  • 27. Concept Maps Quelle 27
  • 28. Concept Maps: Flickr (von Bryce Glass) 28
  • 29. Concept Maps - Vorgehensweise 1. Reduktion 2. Strukturierung & Visualisierung 3. Elaboration 29
  • 32. 32
  • 33. Übung Legt eine Concept Map für Pacman auf dem Whiteboard an! Quelle 33
  • 34. 34
  • 35. 35
  • 36. Concept Models üben Legt ein Concept Model eines euch bekannten Dienstes an und stellt es kurz vor. Ca. 20 Minuten. Quelle 36
  • 37. 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 37