Your SlideShare is downloading. ×
UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)

1,403
views

Published on

Update 3/12: Folien zur 2. Sitzung der Veranstaltung "User Experience Design" im Studiengang Intermedia Design der FH Trier im Sommersemester 2012

Update 3/12: Folien zur 2. Sitzung der Veranstaltung "User Experience Design" im Studiengang Intermedia Design der FH Trier im Sommersemester 2012

Published in: Design

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,403
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. EinführungUser Experience Design für interaktive Systeme2. SitzungMarcus Haberkorn | Intermedia Design | 2012Seminar | User Experience Design | für Semester 3-5
  • 2. Jesse James Garrett:The Elements of User Experience
  • 3. Jesse James GarrettDie Elemente der User Experience"Standardwerk" für UX (2002)umfassende Systematisierungursprünglich für WebsystemeHomepage/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: SoftwareschnittstelleDie Perspektive auf Systeme alsSoftware-Schnittstelle(aufgabenorientiert, linke Hälfteder Grafik) fügt weitere Aspektehinzu.
  • 12. Jesse James Garrett: Web als SoftwareschnittstelleVisuelle Gestaltung:Grafische Bearbeitung derSchnittstellenelemente
  • 13. Jesse James Garrett: Web als SoftwareschnittstelleInterface/Schnittstellen-gestaltung:Gestaltung der Schnittstellen-Elemente zur Erleichterung derHandhabung der Funktionen,wie in der klassischen HumanComputer Interaction (HCI)Informationsgestaltung:Informationsgestaltung zurErleichterungdes Verständnisses
  • 14. Jesse James Garrett: Web als SoftwareschnittstelleInteraktionsdesign:Gestaltung derAnwendungsflüsse zurerleichterten Wahrnehmung vonBenutzeranforderungen, sowieDefinition des Umgangs mit denFunktionen
  • 15. Jesse James Garrett: Web als SoftwareschnittstelleSpezifizierung der Funktionen:‚Feature-Set‘ als detaillierteBeschreibung der Funktionalitätder Site, um dieBenutzeranforderungen zubefriedigen
  • 16. Jesse James Garrett: Web als SoftwareschnittstelleBenutzer-Bedürfnisse:Von Außen abgeleitete Site-Zielsetzungen, welche durchBenutzerforschung erhobenwerden (ethno-, techno-,psychografisch etc.)Inhaltsziele:Interne Zielsetzungen der Site,wie etwa Business,künstlerische oder andere
  • 17. Weiterbearbeitung der AufgabeVorarbeit:Ihr habt jeweils drei ähnliche Systeme verglichen, dienach eurer Einschätzung unterschiedlich gute UserExperiences liefern und sie im Blog beschrieben.
  • 18. Weiterbearbeitung der AufgabeSzenario: 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 TeamMichael, Sue, Interface- David, Texter / Patrice, InteractionVisualdesigner designerin Contentmanager DesignerinCharles, Ingrid, Dave, Chuck,Informations- Konzeptionerin Produktmanager Abwicklungsexpertearchitekt Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!
  • 20. Joshua Porter:Aktivität, Objekte, Funktionen
  • 21. Hier setzen wir jetzt an:
  • 22. Featuritis, Feature Creep …
  • 23. Joshua Porter: Aktivität-Objekte-FunktionenMethode zur Priorisierung vonFeatures für Social ServicesBuchauszug im SemesterapparatHomepage/Blog: http://bokardo.com/ 23
  • 24. Aktivität, Objekte, Funktionen (Joshua Porter)1. Definiere die Aktivität2. Identifiziere die sozialen Objekte, die die Menschen in dieser Aktivität gebrauchen3. 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 ermittelnunprä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 EinkaufenZiele: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ätenBenennt die Aktivitäten,die die von euch untersuchten Webdienste unterstützen. 30
  • 31. Aktivität bestimmenKurzversion: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 erkennenB zum Bedürfnis angebotene Produkte abwägenC Produkt auswählenD optional den besten Preis für das Produkt suchenE 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 VerkomplizierungZentrale Designaufgabe ist Komplexitätsreduktion!Schlechtes Vorgehen:Oberflächliche Analyseergibt > wenige Merkmaleergibt > simples Prozessdesign aber am Nutzer vorbei 36
  • 37. Vorsicht vor Simplifizierung oder VerkomplizierungZentrale Designaufgabe ist Komplexitätsreduktion!Besseres Vorgehen:detaillierte, methodengeleitete Analyseergibt > Identifizierung aller relevanten Merkmaleergibt > Zusammenspiel der Merkmale erkennenergibt > simples Prozessdesign auf Nutzer abgestimmtMethoden üben wir in späteren Sitzungen! 37
  • 38. Soziale Objekte 38
  • 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. AnalyseaufgabeIdentifiziere die sozialen Objekteeines beliebigen Social Web-Servicesoder eines der von euch untersuchten. 44
  • 45. 45
  • 46. Soziales Objekt: VideoSoziale Objekte: Sharing Soziales Objekt: Verwandte Videos 46
  • 47. Soziales Objekt: KommentareSoziales Objekt: Videoantworten Soziales Objekt: Verwandte Videos Soziales Objekt: Kommentare 47
  • 48. Soziale Funktionen und AktionenDie "Verben zu den Objekten" finden:Aktionen identifizieren, die User mit den Objektendurchführen. Davon konkrete Funktionen ableiten.Soziale Aktionen & Funktionen:Wenn das Verb mehr als eine Person betrifft. 48
  • 49. Soziale Funktionen vs AktionenAktionen sind nicht gleich Funktionen!Z.B. User haben im Web schon lange Aktionen wieweiterempfehlen durchgeführt, ohne dazu einespezifische Funktion in der Anwendung vorzufinden.Die Empfehlungsaktion "Link per Mail weitersenden"wurde häufig mit Kopieren der URL-Angabe aus derAdresszeile des Browsers (also nicht von derAnwendung heraus unterstützt) realisiert. 49
  • 50. Soziale Funktionen: AktionenNomen (Objekte) Verben (Aktionen) Soziale Verben (soziale Aktionen)Videos starten, stoppen, teilen, kommentieren, bearbeiten, speichern einbetten, bewerten, hochladen beantwortenArtikel lesen, archivieren, teilen, kommentieren, zitieren, ausdrucken, annotieren, verlinken, bewertenFotos speichern, ansehen, teilen, kommentieren, merken/bookmarken, einbetten, bewerten, editieren, ausdrucken verschlagwortenProdukte 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 verlinktAngaben, soweit nicht bereits auf der Folie angegeben, nach FoliennummernBILDER3 JJG http://www.flickr.com/photos/martin-kliehm/536545606/15 http://www.jjg.net/elements/translations/elements_de.pdf16 J. Porter: http://chinposin.wordpress.com/about21 Swiss Army Knife: http://www.techcekirdek.com/tech-apps/ios-android/cebinizdeki-isvec-cakisi-swiss-army-knifeLITERATURGarrett, Jesse James (2010): The Elements of User ExperiencePorter, Joshua (2010): Social Web Design 54
  • 53. Marcus HaberkornAkademischer RatLehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fachbereich GestaltungFachhochschule TrierIrminenfreihof 8Postfach 1826D-54208 TrierTel. +49 651 8103-839Mail: m.haberkorn@fh-trier.de 55