SlideShare ist ein Scribd-Unternehmen logo
Einführung

User Experience Design für interaktive Systeme
2. Sitzung




Marcus Haberkorn | Intermedia Design | 2012
Seminar | User Experience Design | für Semester 3-5
Jesse James Garrett:
The Elements of User Experience
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
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 an den Umfang:
                            Welche Features wird die Site beinhalten?

                            Strategie ist der Anfang:
                            Was will der User von der Site? Was wollen wir?
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.
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.
Jesse James Garrett: Web als Hypertextsystem

                           Inhaltliche Anforderungen:
                           Definition der notwendigen
                           Inhaltselemente der Site zur
                           Befriedigung der
                           Benutzerbedürfnisse
Jesse James Garrett: Web als Hypertextsystem

                           Informations-Architektur:
                           Strukturierte Gestaltung des
                           Informationsraumes zur
                           Vereinfachung des intuitiven
                           Zugangs der Benutzer zu den
                           Inhalten
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
Jesse James Garrett: Web als Hypertextsystem

                           Visuelle Gestaltung:
                           Grafische Bearbeitung von Text,
                           grafischen Elementen und
                           Navigationskomponenten
Jesse James Garrett: Softwareschnittstelle

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

Visuelle Gestaltung:
Grafische Bearbeitung der
Schnittstellenelemente
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
Jesse James Garrett: Web als Softwareschnittstelle

Interaktionsdesign:
Gestaltung der
Anwendungsflüsse zur
erleichterten Wahrnehmung von
Benutzeranforderungen, sowie
Definition des Umgangs mit den
Funktionen
Jesse James Garrett: Web als Softwareschnittstelle

Spezifizierung der Funktionen:
‚Feature-Set‘ als detaillierte
Beschreibung der Funktionalität
der Site, um die
Benutzeranforderungen zu
befriedigen
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
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.
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 der von dir analysierten
      Dienste versuchst du für dein Team abzuwerben?
Euer Team




Michael,         Sue, Interface-                  David, Texter /                     Patrice, Interaction
Visualdesigner   designerin                       Contentmanager                      Designerin




Charles,         Ingrid,                          Dave,                              Chuck,
Informations-    Konzeptionerin                   Produktmanager                     Abwicklungsexperte
architekt
                      Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!
Joshua Porter:
Aktivität, Objekte, Funktionen
Hier setzen wir jetzt an:
Featuritis, Feature Creep …
Joshua Porter: Aktivität-Objekte-Funktionen

Methode zur Priorisierung von
Features für Social Services




Buchauszug im Semesterapparat
Homepage/Blog: http://bokardo.com/
                                              23
Aktivität, Objekte, Funktionen (Joshua Porter)

1. Definiere die Aktivität

2. Identifiziere die sozialen Objekte,
   die die Menschen in dieser Aktivität gebrauchen

3. Finde heraus, was die Menschen mit diesen
   Objekten tun und stelle Funktionen dafür bereit



                                                     24
AOF liefert …




 Objekt   Funktion   Aktivität
AOF liefert …




 Objekt   Funktion   Aktivität

                                 26
AOF liefert …




 Objekt   Funktion   Aktivität
Aktivität ermitteln

unpräzise:
• Was wollen die User von der Site?

genauer:
• Was tut der ideale Nutzer leidenschaftlich gerne?
• Was verbessert der Anbieter für die User?
• Was müssen die User tun, damit der Anbieter
  erfolgreich ist?


                                                      28
Aktivität ist nicht gleich Ziel!

Eine Aktivität kann ganz unterschiedlichen Zielen dienen.

Beispiel Aktivität Einkaufen
Ziele:
Grundbedürfnis befriedigen (z.B. Nahrungsaufnahme)
Soziale Beziehung stärken (z.B. Geschenk machen)
Selbstmotivation erzeugen (z.B. Eigenbelohnung)
u.v.a.


                                                            29
Beispiele für Aktivitäten

Benennt die Aktivitäten,
die die von euch untersuchten Webdienste unterstützen.




                                                         30
Aktivität bestimmen

Kurzversion:
Modelliere die Interaktionen, die es schon gibt.
Langversion:
1. Starte mit der zu unterstützenden Aktivität.
2. Beobachte, wie Menschen sie jetzt durchführen.
3. Wie interagieren sie jetzt miteinander?
4. Welche Probleme haben sie jetzt?
5. Wie beheben sie sie jetzt?
6. Mit wem kommunizieren sie?
                                                    31
Wie beschreibt man eine Aktivität?

Aktivität: Einkaufen als Prozess aus fünf Schritten:
A Ein Bedürfnis erkennen
B zum Bedürfnis angebotene Produkte abwägen
C Produkt auswählen
D optional den besten Preis für das Produkt suchen
E Produkt kaufen




                                                       32
Wie beschreibt man eine Aktivität?




                                     33
Wie beschreibt man eine Aktivität?




WIRKLICH?
                                     34
Wie beschreibt man eine Aktivität?




   EHER SO?
Vorsicht vor Simplifizierung oder Verkomplizierung

Zentrale Designaufgabe ist Komplexitätsreduktion!

Schlechtes Vorgehen:
Oberflächliche Analyse
ergibt > wenige Merkmale
ergibt > simples Prozessdesign aber am Nutzer vorbei




                                                       36
Vorsicht vor Simplifizierung oder Verkomplizierung

Zentrale Designaufgabe ist Komplexitätsreduktion!

Besseres Vorgehen:
detaillierte, methodengeleitete Analyse
ergibt > Identifizierung aller relevanten Merkmale
ergibt > Zusammenspiel der Merkmale erkennen
ergibt > simples Prozessdesign auf Nutzer abgestimmt

Methoden üben wir in späteren Sitzungen!
                                                       37
Soziale Objekte




                  38
Soziale Objekte

… können Menschen, Objekte (virtuell, physisch)
  oder Ideen sein.




                                                  39
Soziale Objekte

… beeinflussen die soziale Interaktion, sie ändern, wie
  Menschen miteinander interagieren




                                                          40
Soziale Objekte

… Durch die Interaktion mit / durch soziale Objekte
  treffen sich Menschen, die sich möglicherweise sonst
  nicht kennen




                                                         41
Soziale Objekte

… Durch die Interaktion mit / durch soziale Objekte
  treffen sich Menschen, die sich möglicherweise sonst
  nicht kennen




                                                         42
Soziale Objekte

… können der Grund sein, warum / wegen dem
  Menschen eine soziale Interaktion / Beziehung haben.




                                                         43
Analyseaufgabe

Identifiziere die sozialen Objekte
eines beliebigen Social Web-Services
oder eines der von euch untersuchten.




                                        44
45
Soziales Objekt: Video




Soziale Objekte: Sharing
                            Soziales Objekt:
                           Verwandte Videos
                                               46
Soziales Objekt: Kommentare


Soziales Objekt: Videoantworten    Soziales Objekt:
                                  Verwandte Videos




 Soziales Objekt: Kommentare


                                                      47
Soziale Funktionen und Aktionen

Die "Verben zu den Objekten" finden:
Aktionen identifizieren, die User mit den Objekten
durchführen. Davon konkrete Funktionen ableiten.

Soziale Aktionen & Funktionen:
Wenn das Verb mehr als eine Person betrifft.




                                                     48
Soziale Funktionen vs Aktionen

Aktionen sind nicht gleich Funktionen!
Z.B. User haben im Web schon lange Aktionen wie
'weiterempfehlen' durchgeführt, ohne dazu eine
spezifische Funktion in der Anwendung vorzufinden.

Die Empfehlungsaktion "Link per Mail weitersenden"
wurde häufig mit Kopieren der URL-Angabe aus der
Adresszeile des Browsers (also nicht von der
Anwendung heraus unterstützt) realisiert.

                                                     49
Soziale Funktionen: Aktionen

Nomen (Objekte)   Verben (Aktionen)       Soziale Verben (soziale
                                          Aktionen)

Videos            starten, stoppen,       teilen, kommentieren,
                  bearbeiten, speichern   einbetten, bewerten,
                  hochladen               beantworten
Artikel           lesen, archivieren,     teilen, kommentieren,
                  zitieren, ausdrucken,   annotieren, verlinken,
                                          bewerten
Fotos             speichern, ansehen,     teilen, kommentieren,
                  merken/bookmarken,      einbetten, bewerten,
                  editieren, ausdrucken   verschlagworten
Produkte          lesen, in Warenkorb /   teilen, diskutieren,
                  Wunschliste legen,      rezensieren,
                  kaufen, bezahlen
                                                                    50
Beispiel Amazon-Produktseite: 17 soziale Funktionen




                                                      51
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
21 Swiss Army Knife: http://www.techcekirdek.com/tech-apps/ios-android/cebinizdeki-isvec-cakisi-swiss-army-knife


LITERATUR
Garrett, Jesse James (2010): The Elements of User Experience
Porter, Joshua (2010): Social Web Design




                                                                                                                   54
Marcus Haberkorn
Akademischer Rat

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



                                                          55

Weitere ähnliche Inhalte

Andere mochten auch

Whitepaper: Why banks need to move if they want to own banking in the future.
Whitepaper: Why banks need to move if they want to own banking in the future.Whitepaper: Why banks need to move if they want to own banking in the future.
Whitepaper: Why banks need to move if they want to own banking in the future.
Stefan F. Dieffenbacher
 
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
 
Keynote: The User Experience Strategy behind one of Europe’s largest Digital ...
Keynote: The User Experience Strategy behind one of Europe’s largest Digital ...Keynote: The User Experience Strategy behind one of Europe’s largest Digital ...
Keynote: The User Experience Strategy behind one of Europe’s largest Digital ...
Stefan F. Dieffenbacher
 
Der Weg zum smarten Zuhause
Der Weg zum smarten ZuhauseDer Weg zum smarten Zuhause
Der Weg zum smarten Zuhause
Bettina Streit
 
Human Machine Interface & User Experience
Human Machine Interface & User ExperienceHuman Machine Interface & User Experience
Human Machine Interface & User Experience
Bettina Streit
 
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignHandliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile Webdesign
Peter Rozek
 
Designing Smart Things: user experience design for networked devices
Designing Smart Things: user experience design for networked devicesDesigning Smart Things: user experience design for networked devices
Designing Smart Things: user experience design for networked devices
Mike Kuniavsky
 
Email Strategy, Design and User Experience
Email Strategy, Design and User ExperienceEmail Strategy, Design and User Experience
Email Strategy, Design and User Experience
Litmus
 
Digital Transformation - Play along or die
Digital Transformation - Play along or dieDigital Transformation - Play along or die
Digital Transformation - Play along or die
Stefan F. Dieffenbacher
 
Digital banking: Why are banks not performing as well as they could do?
Digital banking: Why are banks not performing as well as they could  do?Digital banking: Why are banks not performing as well as they could  do?
Digital banking: Why are banks not performing as well as they could do?
Stefan F. Dieffenbacher
 
Digital Strategy: what it is, why it is needed & how it integrates with your ...
Digital Strategy: what it is, why it is needed & how it integrates with your ...Digital Strategy: what it is, why it is needed & how it integrates with your ...
Digital Strategy: what it is, why it is needed & how it integrates with your ...
Stefan F. Dieffenbacher
 
SXSW 2016: Bridging the Gap Between CX + UX
SXSW 2016: Bridging the Gap Between CX + UXSXSW 2016: Bridging the Gap Between CX + UX
SXSW 2016: Bridging the Gap Between CX + UX
Barkley
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
sumit singh
 
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT
 
Shopping Center Customer Experience and UX
Shopping Center Customer Experience and UXShopping Center Customer Experience and UX
Shopping Center Customer Experience and UX
Olde Lorenzen-Schmidt
 
Usability bei der Mainova AG
Usability bei der Mainova AGUsability bei der Mainova AG
Usability bei der Mainova AG
Connected-Blog
 
Food Assembly - Sag Ja! zu Regionalen Lebensmitteln
Food Assembly - Sag Ja! zu Regionalen LebensmittelnFood Assembly - Sag Ja! zu Regionalen Lebensmitteln
Food Assembly - Sag Ja! zu Regionalen Lebensmitteln
Food Assembly
 
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Stefan F. Dieffenbacher
 

Andere mochten auch (18)

Whitepaper: Why banks need to move if they want to own banking in the future.
Whitepaper: Why banks need to move if they want to own banking in the future.Whitepaper: Why banks need to move if they want to own banking in the future.
Whitepaper: Why banks need to move if they want to own banking in the future.
 
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)
 
Keynote: The User Experience Strategy behind one of Europe’s largest Digital ...
Keynote: The User Experience Strategy behind one of Europe’s largest Digital ...Keynote: The User Experience Strategy behind one of Europe’s largest Digital ...
Keynote: The User Experience Strategy behind one of Europe’s largest Digital ...
 
Der Weg zum smarten Zuhause
Der Weg zum smarten ZuhauseDer Weg zum smarten Zuhause
Der Weg zum smarten Zuhause
 
Human Machine Interface & User Experience
Human Machine Interface & User ExperienceHuman Machine Interface & User Experience
Human Machine Interface & User Experience
 
Handliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile WebdesignHandliche Designkonzepte, UX und Mobile Webdesign
Handliche Designkonzepte, UX und Mobile Webdesign
 
Designing Smart Things: user experience design for networked devices
Designing Smart Things: user experience design for networked devicesDesigning Smart Things: user experience design for networked devices
Designing Smart Things: user experience design for networked devices
 
Email Strategy, Design and User Experience
Email Strategy, Design and User ExperienceEmail Strategy, Design and User Experience
Email Strategy, Design and User Experience
 
Digital Transformation - Play along or die
Digital Transformation - Play along or dieDigital Transformation - Play along or die
Digital Transformation - Play along or die
 
Digital banking: Why are banks not performing as well as they could do?
Digital banking: Why are banks not performing as well as they could  do?Digital banking: Why are banks not performing as well as they could  do?
Digital banking: Why are banks not performing as well as they could do?
 
Digital Strategy: what it is, why it is needed & how it integrates with your ...
Digital Strategy: what it is, why it is needed & how it integrates with your ...Digital Strategy: what it is, why it is needed & how it integrates with your ...
Digital Strategy: what it is, why it is needed & how it integrates with your ...
 
SXSW 2016: Bridging the Gap Between CX + UX
SXSW 2016: Bridging the Gap Between CX + UXSXSW 2016: Bridging the Gap Between CX + UX
SXSW 2016: Bridging the Gap Between CX + UX
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
 
Shopping Center Customer Experience and UX
Shopping Center Customer Experience and UXShopping Center Customer Experience and UX
Shopping Center Customer Experience and UX
 
Usability bei der Mainova AG
Usability bei der Mainova AGUsability bei der Mainova AG
Usability bei der Mainova AG
 
Food Assembly - Sag Ja! zu Regionalen Lebensmitteln
Food Assembly - Sag Ja! zu Regionalen LebensmittelnFood Assembly - Sag Ja! zu Regionalen Lebensmitteln
Food Assembly - Sag Ja! zu Regionalen Lebensmitteln
 
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
 

Ähnlich wie UX Design - Elemente der UX & die AOF-Methode (2. 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)
Marcus Haberkorn
 
User Experience im Digital Banking
User Experience im Digital BankingUser Experience im Digital Banking
User Experience im Digital Banking
Jürg Stuker
 
Digital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User ExperienceDigital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User Experience
Jürg Stuker
 
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
 
Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)
Walter Schärer
 
Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?
Bogo Vatovec
 
Whitecoast lcty12 x_pages
Whitecoast lcty12 x_pagesWhitecoast lcty12 x_pages
Whitecoast lcty12 x_pages
Whitecoast Solutions AG
 
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
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
usability.de
 
Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)
Jens Siebert
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
AlineDeicke
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Christoph Mühlbauer
 
Nachvollziehbares, Kooperatives Requirements Engineering FüR Community Of ...
Nachvollziehbares, Kooperatives  Requirements  Engineering FüR  Community Of ...Nachvollziehbares, Kooperatives  Requirements  Engineering FüR  Community Of ...
Nachvollziehbares, Kooperatives Requirements Engineering FüR Community Of ...
Ralf Klamma
 
Präsentation Knowtech 2008 seto
Präsentation Knowtech 2008 setoPräsentation Knowtech 2008 seto
Präsentation Knowtech 2008 seto
Stefan Meißner
 
Designkompetenzen für vernetzte Systeme
Designkompetenzen für vernetzte SystemeDesignkompetenzen für vernetzte Systeme
Designkompetenzen für vernetzte Systeme
Tilman Zitzmann
 
Social Software für Unternehmen
Social Software für UnternehmenSocial Software für Unternehmen
Social Software für Unternehmen
Martin Koser
 
Die Soziale Revolution
Die Soziale RevolutionDie Soziale Revolution
Die Soziale Revolution
social apps
 
Wissenstechnologie I
Wissenstechnologie IWissenstechnologie I
Wissenstechnologie I
guestc8ad16
 
Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008) Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008)
Thomas Koch
 
Powersphere Lotus Connections
Powersphere Lotus ConnectionsPowersphere Lotus Connections
Powersphere Lotus Connections
Andreas Schulte
 

Ähnlich wie UX Design - Elemente der UX & die AOF-Methode (2. Sitzung) (20)

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)
 
User Experience im Digital Banking
User Experience im Digital BankingUser Experience im Digital Banking
User Experience im Digital Banking
 
Digital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User ExperienceDigital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User Experience
 
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"
 
Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)Guided Navigation (Faceted Search)
Guided Navigation (Faceted Search)
 
Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?
 
Whitecoast lcty12 x_pages
Whitecoast lcty12 x_pagesWhitecoast lcty12 x_pages
Whitecoast lcty12 x_pages
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
 
Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)Microsoft Bot Framework (.NET Edition)
Microsoft Bot Framework (.NET Edition)
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
Nachvollziehbares, Kooperatives Requirements Engineering FüR Community Of ...
Nachvollziehbares, Kooperatives  Requirements  Engineering FüR  Community Of ...Nachvollziehbares, Kooperatives  Requirements  Engineering FüR  Community Of ...
Nachvollziehbares, Kooperatives Requirements Engineering FüR Community Of ...
 
Präsentation Knowtech 2008 seto
Präsentation Knowtech 2008 setoPräsentation Knowtech 2008 seto
Präsentation Knowtech 2008 seto
 
Designkompetenzen für vernetzte Systeme
Designkompetenzen für vernetzte SystemeDesignkompetenzen für vernetzte Systeme
Designkompetenzen für vernetzte Systeme
 
Social Software für Unternehmen
Social Software für UnternehmenSocial Software für Unternehmen
Social Software für Unternehmen
 
Die Soziale Revolution
Die Soziale RevolutionDie Soziale Revolution
Die Soziale Revolution
 
Wissenstechnologie I
Wissenstechnologie IWissenstechnologie I
Wissenstechnologie I
 
Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008) Teamarbeit 2.0 (PTF 2008)
Teamarbeit 2.0 (PTF 2008)
 
Powersphere Lotus Connections
Powersphere Lotus ConnectionsPowersphere Lotus Connections
Powersphere Lotus Connections
 

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 lassen
Marcus Haberkorn
 
Playful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. SitzungPlayful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. Sitzung
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 - 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
 
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)

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 - Gamification Einführung
UX Design - Gamification EinführungUX Design - Gamification Einführung
UX Design - Gamification Einführung
 
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)
 
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)

  • 1. Einführung User Experience Design für interaktive Systeme 2. Sitzung Marcus Haberkorn | Intermedia Design | 2012 Seminar | User Experience Design | für Semester 3-5
  • 2. Jesse James Garrett: The Elements of User Experience
  • 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
  • 4. 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 an den Umfang: 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 Vereinfachung des intuitiven Zugangs der Benutzer zu den Inhalten
  • 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: 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.
  • 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 der von dir analysierten Dienste versuchst du für dein Team abzuwerben?
  • 19. Euer Team Michael, Sue, Interface- David, Texter / Patrice, Interaction Visualdesigner designerin Contentmanager Designerin Charles, Ingrid, Dave, Chuck, Informations- Konzeptionerin Produktmanager Abwicklungsexperte architekt Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!
  • 21. Hier setzen wir jetzt an:
  • 23. Joshua Porter: Aktivität-Objekte-Funktionen Methode zur Priorisierung von Features für Social Services Buchauszug im Semesterapparat Homepage/Blog: http://bokardo.com/ 23
  • 24. Aktivität, Objekte, Funktionen (Joshua Porter) 1. Definiere die Aktivität 2. Identifiziere die sozialen Objekte, die die Menschen in dieser Aktivität gebrauchen 3. Finde heraus, was die Menschen mit diesen Objekten tun und stelle Funktionen dafür bereit 24
  • 25. AOF liefert … Objekt Funktion Aktivität
  • 26. AOF liefert … Objekt Funktion Aktivität 26
  • 27. AOF liefert … Objekt Funktion Aktivität
  • 28. Aktivität ermitteln unpräzise: • Was wollen die User von der Site? genauer: • Was tut der ideale Nutzer leidenschaftlich gerne? • Was verbessert der Anbieter für die User? • Was müssen die User tun, damit der Anbieter erfolgreich ist? 28
  • 29. Aktivität ist nicht gleich Ziel! Eine Aktivität kann ganz unterschiedlichen Zielen dienen. Beispiel Aktivität Einkaufen Ziele: Grundbedürfnis befriedigen (z.B. Nahrungsaufnahme) Soziale Beziehung stärken (z.B. Geschenk machen) Selbstmotivation erzeugen (z.B. Eigenbelohnung) u.v.a. 29
  • 30. Beispiele für Aktivitäten Benennt die Aktivitäten, die die von euch untersuchten Webdienste unterstützen. 30
  • 31. Aktivität bestimmen Kurzversion: Modelliere die Interaktionen, die es schon gibt. Langversion: 1. Starte mit der zu unterstützenden Aktivität. 2. Beobachte, wie Menschen sie jetzt durchführen. 3. Wie interagieren sie jetzt miteinander? 4. Welche Probleme haben sie jetzt? 5. Wie beheben sie sie jetzt? 6. Mit wem kommunizieren sie? 31
  • 32. Wie beschreibt man eine Aktivität? Aktivität: Einkaufen als Prozess aus fünf Schritten: A Ein Bedürfnis erkennen B zum Bedürfnis angebotene Produkte abwägen C Produkt auswählen D optional den besten Preis für das Produkt suchen E Produkt kaufen 32
  • 33. Wie beschreibt man eine Aktivität? 33
  • 34. Wie beschreibt man eine Aktivität? WIRKLICH? 34
  • 35. Wie beschreibt man eine Aktivität? EHER SO?
  • 36. Vorsicht vor Simplifizierung oder Verkomplizierung Zentrale Designaufgabe ist Komplexitätsreduktion! Schlechtes Vorgehen: Oberflächliche Analyse ergibt > wenige Merkmale ergibt > simples Prozessdesign aber am Nutzer vorbei 36
  • 37. Vorsicht vor Simplifizierung oder Verkomplizierung Zentrale Designaufgabe ist Komplexitätsreduktion! Besseres Vorgehen: detaillierte, methodengeleitete Analyse ergibt > Identifizierung aller relevanten Merkmale ergibt > Zusammenspiel der Merkmale erkennen ergibt > simples Prozessdesign auf Nutzer abgestimmt Methoden üben wir in späteren Sitzungen! 37
  • 39. Soziale Objekte … können Menschen, Objekte (virtuell, physisch) oder Ideen sein. 39
  • 40. Soziale Objekte … beeinflussen die soziale Interaktion, sie ändern, wie Menschen miteinander interagieren 40
  • 41. Soziale Objekte … Durch die Interaktion mit / durch soziale Objekte treffen sich Menschen, die sich möglicherweise sonst nicht kennen 41
  • 42. Soziale Objekte … Durch die Interaktion mit / durch soziale Objekte treffen sich Menschen, die sich möglicherweise sonst nicht kennen 42
  • 43. Soziale Objekte … können der Grund sein, warum / wegen dem Menschen eine soziale Interaktion / Beziehung haben. 43
  • 44. Analyseaufgabe Identifiziere die sozialen Objekte eines beliebigen Social Web-Services oder eines der von euch untersuchten. 44
  • 45. 45
  • 46. Soziales Objekt: Video Soziale Objekte: Sharing Soziales Objekt: Verwandte Videos 46
  • 47. Soziales Objekt: Kommentare Soziales Objekt: Videoantworten Soziales Objekt: Verwandte Videos Soziales Objekt: Kommentare 47
  • 48. Soziale Funktionen und Aktionen Die "Verben zu den Objekten" finden: Aktionen identifizieren, die User mit den Objekten durchführen. Davon konkrete Funktionen ableiten. Soziale Aktionen & Funktionen: Wenn das Verb mehr als eine Person betrifft. 48
  • 49. Soziale Funktionen vs Aktionen Aktionen sind nicht gleich Funktionen! Z.B. User haben im Web schon lange Aktionen wie 'weiterempfehlen' durchgeführt, ohne dazu eine spezifische Funktion in der Anwendung vorzufinden. Die Empfehlungsaktion "Link per Mail weitersenden" wurde häufig mit Kopieren der URL-Angabe aus der Adresszeile des Browsers (also nicht von der Anwendung heraus unterstützt) realisiert. 49
  • 50. Soziale Funktionen: Aktionen Nomen (Objekte) Verben (Aktionen) Soziale Verben (soziale Aktionen) Videos starten, stoppen, teilen, kommentieren, bearbeiten, speichern einbetten, bewerten, hochladen beantworten Artikel lesen, archivieren, teilen, kommentieren, zitieren, ausdrucken, annotieren, verlinken, bewerten Fotos speichern, ansehen, teilen, kommentieren, merken/bookmarken, einbetten, bewerten, editieren, ausdrucken verschlagworten Produkte lesen, in Warenkorb / teilen, diskutieren, Wunschliste legen, rezensieren, kaufen, bezahlen 50
  • 51. Beispiel Amazon-Produktseite: 17 soziale Funktionen 51
  • 52. 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 21 Swiss Army Knife: http://www.techcekirdek.com/tech-apps/ios-android/cebinizdeki-isvec-cakisi-swiss-army-knife LITERATUR Garrett, Jesse James (2010): The Elements of User Experience Porter, Joshua (2010): Social Web Design 54
  • 53. Marcus Haberkorn Akademischer Rat 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 55