Ziele – Metriken – Design PatternsUser Experience Design für interaktive Systeme4. SitzungMarcus Haberkorn | Intermedia De...
Ziele        2
Erinnert euch an die ersten beiden Sitzungen …In welchem Kontext haben wir da überZiele gesprochen?                       ...
Wie beschreibt man eine Aktivität?                                     5
Wie beschreibt man eine Aktivität?
Ziele im Web 1.0: E-Commerce
Ziele im Web 2.0: UG Content, Social Networks
Ziele im Web 2.0: Geschäftsziele
Ziele im Web 2.0: Prosoziale & persönliche Ziele
Aktivität & Ziel ermittelnDefiniert für eure Idee:• Was tut der ideale Nutzer leidenschaftlich gerne?• Was verbessert der ...
Metriken           12
Einordnung des metrischen Ansatzes                                     13
Einordnung des metrischen Ansatzes                                Metriken befassen                                sich au...
90-9-1 Prinzip oder 1%-Regel                        Quelle                                 15
Konversionstrichter für ges. Anwendungszyklus                                                16
Beispiele für 90-9-1Web insgesamt:z.B. ACTA-Studie 2009Wikipedia (DE) - Statistiken:27.000.000 Hits pro Tagbei 22.000 akti...
ErfolgsmetrikenKonkrete Indikatoren,die messen, ob dieDesignmaßnahmen diestrategischen Zieleerfüllen.                     ...
Konversion: Probenutzung zu zahlender Nutzung                                                19
Beispiel
Trichter für Registrierung/Sign Up-Prozess                                             21
Metriken: BeispieleSite-Besuch           Analyseprogramm                      z.B. Google Analytics, PiwikProberegistrieru...
Metriken: BeispieleGrundmetrik           Nutzertypen-MetrikShares                Besucher LeserReshares              Lese...
Funktionen und Nutzertypen in der WikipediaLesen                       Nicht angemeldeter LeserEditieren                  ...
Metrikenbasierte Vorgehensweise-   Design-Entscheidungen treffen-   Grundlinie für Metrik definieren-   Stufe im Trichter ...
Wozu? Research through Design- Relevanz von Design dokumentieren- Relevanz von Design rechtfertigen- Erfolgsfaktoren ermit...
Gutes visuelles Design ist nicht immer erfolgreicher                                                       27
Gutes visuelles Design ist nicht immer erfolgreicher                                                       28
Gutes visuelles Design ist nicht immer erfolgreicher… verkauft pro Jahr Autos im Wert von über 42 Millionen Euro          ...
Probleme des metrischen AnsatzesWelche Problem haben rein auf Metrikenbasierende Designansätze?                           ...
Stud.IP-Nutzerstatistik an der FH Trier                     14000                     12000                     10000Angem...
Stud.IP Zugriffsstatistik an der FH Trier                                            32
Kontagent: Analytics Platform für das Social Web                        http://www.slideshare.net/kontagent/top-7-social-m...
Wer schreibt die Wikipedia? (2006)"Über 50% allerBearbeitungenwerden von nur0,7% der Usererledigt …524 Menschen."         ...
Wer schreibt die Wikipedia? (2006)"Ein Außenstehender fügt ein Stück Information ein.Dann nehmen die Insider verschiedene ...
Metriken findenFindet 3 aussagekräftige Metriken füreuer Projekt – möglichst spezifisch aufdessen Ziele zugeschnitten.Gibt...
Design Patterns / Entwurfsmuster                                   37
Christopher AlexanderArchitektSuche nach Mustern in der gelungenenGestaltung von LebensräumenA Pattern Language 1977Timele...
Was ist ein Muster?Ein Muster ist eine Kombination aus• Problem• Kontext• Lösung                                      39
Beispiel: Pattern 150Name:Ein Ort zum WartenKontext:Jede Situation, bei der Leute auf irgendetwas wartenmüssen, z.B. eine ...
Beispiel: Pattern 150Im Kontext Bushaltestelle wirkende Kräfte:(a) Verharrung / Bann: Die Passagiere müssen anwesendsein, ...
Werbung an Haltestellen                          42
"Yahoo! Bus Stop Derby" von Obscura Digital                                                             43                ...
Invade-A-Load (1987 C64)… Minigame für das minutenlangeWarten beim Laden von Datasette YouTube                            ...
Auf dem Desktop                  Apples                  "spinning wait                  ball"-Cursor                     ...
Im WebFlash:             AJAX:Preloader Museum   Generator                               46
Muster verschiedener OrdnungMuster groberer Granularität (predecessors) werdendurch die Anordnung kleinerer Muster (succes...
Muster verschiedener OrdnungIn Alexanders „A Pattern Language“:- Anordnung von Stadt & Land (City/Country Fingers)- Strukt...
Strukturen von OrtenStruktur eines Orts ist in den Beziehungender Muster zueinander begründet.Muster eröffnen Möglichkeit,...
Mustersprachen in anderen DisziplinenNicht „DIE“ Mustersprache, sondern jeweils Sprachenfür versch. Domänen.Alexanders Ans...
Muster im UI/UX-DesignMuster =eine gebräuchliche, erprobte Komponentefür bekannte Problemein einem gegebenen Kontext      ...
Mustersprachen im UI/UX-Design: EbenenTop-Down-Design:- Geschäftsziele- Positionierungsebene- Erlebnisebene- Aufgabenebene...
t    Van Werie / van der Veer 2003                                    53
Patterns in der PraxisMan nimmt über die Zeit Aufträge an, dieähnliche Lösungen erfordern (E-Shop,Mediaslider, Mailformula...
Sites mit Mustersammlungen für IA / UI / UXhttp://patterns.ideo.com/http://welie.com/patterns/http://www.designingsocialin...
Rolle von Mustersprachen für den Designer„Paradoxerweise lernst du, dass du ein Gebäude nurdann lebendig machen kannst, we...
Neue Kontexte, neue Patterns:Beispiel QR Codes                                57
QR Code Pattern                  Q = Quick                  R = Response                     Code                  2D-Barc...
QR-Code PatternDatenkapazität:7.089 Zahlen, 4.296 alphanumerische Zeichend.h. Serverkommunikation nicht unbedingt erforder...
QR-Code Pattern                  Ming Ling                        60
QR-Code Pattern                  NYC Resistor                                 61
QR-Code Pattern                  62
QR-Code Pattern                                     Chris Lamberthbeliebige Farbe und Material;Kontrast mind. 55%; inverti...
QR-Code Pattern                  Sweza                     64
QR-Code Pattern?Versucht, das Pattern für QR-Codes zu beschreiben:• Problem• Kontext• Lösung                              ...
QR Code Pattern: KontextrelevanzOrt:Was ist sinnvoll / nützlich, wo ich jetzt gerade bin?Device:Was ist sinnvoll / nützlic...
Falsche Nutzung von QR CodesScott Strattens UnMarketing Keynote at the NAMP                                               ...
Aufgabe: Design PatternsIn euren Konzeptentwicklungen und Entwürfenverwendet ihr intuitiv „Patterns“ – schließlichsind sie...
Aufgabe: Design PatternsIdentifiziert ein spezifisches Teilproblem eurerAnwendung bzw. die von euch schonvorgeschlagene Lö...
Marcus HaberkornAkademischer Rat, M.A.Lehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design ...
UX Design: Ziele - Metriken - Patterns (4. Sitzung)
Nächste SlideShare
Wird geladen in …5
×

UX Design: Ziele - Metriken - Patterns (4. Sitzung)

1.667 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design

UX Design: Ziele - Metriken - Patterns (4. Sitzung)

  1. 1. Ziele – Metriken – Design PatternsUser Experience Design für interaktive Systeme4. SitzungMarcus Haberkorn | Intermedia Design | 2012Seminar | User Experience Design | Wahlpflichtkurs für Semester 3-5
  2. 2. Ziele 2
  3. 3. Erinnert euch an die ersten beiden Sitzungen …In welchem Kontext haben wir da überZiele gesprochen? 3
  4. 4. Wie beschreibt man eine Aktivität? 5
  5. 5. Wie beschreibt man eine Aktivität?
  6. 6. Ziele im Web 1.0: E-Commerce
  7. 7. Ziele im Web 2.0: UG Content, Social Networks
  8. 8. Ziele im Web 2.0: Geschäftsziele
  9. 9. Ziele im Web 2.0: Prosoziale & persönliche Ziele
  10. 10. Aktivität & Ziel ermittelnDefiniert für eure Idee:• 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? 11
  11. 11. Metriken 12
  12. 12. Einordnung des metrischen Ansatzes 13
  13. 13. Einordnung des metrischen Ansatzes Metriken befassen sich auch mit Zielen, werden aber "Post- Design", eingesetzt, d.h. im laufenden Betrieb, z.B. um gesicherte Anhaltspunkte für eine Überarbeitung zu finden. 14
  14. 14. 90-9-1 Prinzip oder 1%-Regel Quelle 15
  15. 15. Konversionstrichter für ges. Anwendungszyklus 16
  16. 16. Beispiele für 90-9-1Web insgesamt:z.B. ACTA-Studie 2009Wikipedia (DE) - Statistiken:27.000.000 Hits pro Tagbei 22.000 aktiven Usern / Monatund 4.400 Usern mit über 2.000 Bearbeitungen
  17. 17. ErfolgsmetrikenKonkrete Indikatoren,die messen, ob dieDesignmaßnahmen diestrategischen Zieleerfüllen. Beispiel: Besuche registrierter User / Monat 18
  18. 18. Konversion: Probenutzung zu zahlender Nutzung 19
  19. 19. Beispiel
  20. 20. Trichter für Registrierung/Sign Up-Prozess 21
  21. 21. Metriken: BeispieleSite-Besuch Analyseprogramm z.B. Google Analytics, PiwikProberegistrierung AnalyseprogrammAktive Nutzung Hauseigene StatistikZahlende Nutzung Hauseigene Statistik 22
  22. 22. Metriken: BeispieleGrundmetrik Nutzertypen-MetrikShares Besucher LeserReshares Leser  KommentatorenLikes/Empfehlungen Kommentatoren  KuratorenKommentare Kuratoren  BeitragendeUnique ViewsUnique ContributorsZeit auf der SiteSeitenaufrufe 23
  23. 23. Funktionen und Nutzertypen in der WikipediaLesen Nicht angemeldeter LeserEditieren Nicht angemeldeter BenutzerEigene Beiträge Registrierter NutzerSeiten verschieben AdministratorEigenes Profil einstellen BürokratArtikel schützen/sperren StewardArtikel löschenArtikel wiederherstellenUser sperrenUser ernennen 24
  24. 24. Metrikenbasierte Vorgehensweise- Design-Entscheidungen treffen- Grundlinie für Metrik definieren- Stufe im Trichter aussuchen- Stufe nach "Lecks" untersuchen- Designänderungen planen & vornehmen- Messung vornehmen- Ergebnis mit Grundlinie vergleichen- ggfs. neue Design-Entscheidungen treffen 25
  25. 25. Wozu? Research through Design- Relevanz von Design dokumentieren- Relevanz von Design rechtfertigen- Erfolgsfaktoren ermittelnDie Social Games-Industrie gilt, insb.durch Zynga alssehr starkmetrikengetrieben 26
  26. 26. Gutes visuelles Design ist nicht immer erfolgreicher 27
  27. 27. Gutes visuelles Design ist nicht immer erfolgreicher 28
  28. 28. Gutes visuelles Design ist nicht immer erfolgreicher… verkauft pro Jahr Autos im Wert von über 42 Millionen Euro 29
  29. 29. Probleme des metrischen AnsatzesWelche Problem haben rein auf Metrikenbasierende Designansätze? 30
  30. 30. Stud.IP-Nutzerstatistik an der FH Trier 14000 12000 10000Angemeldete Nutzer 8000 6000 4000 2000 0 31
  31. 31. Stud.IP Zugriffsstatistik an der FH Trier 32
  32. 32. Kontagent: Analytics Platform für das Social Web http://www.slideshare.net/kontagent/top-7-social-metrics- gdc-europe-2011 33
  33. 33. Wer schreibt die Wikipedia? (2006)"Über 50% allerBearbeitungenwerden von nur0,7% der Usererledigt …524 Menschen." Aaron Swartz 34
  34. 34. Wer schreibt die Wikipedia? (2006)"Ein Außenstehender fügt ein Stück Information ein.Dann nehmen die Insider verschiedene Bearbeitungenvor, optimieren und reformatieren es.Außerdem: Die Insider Tausende von Bearbeitungen mitDingen wie Namensänderungen von Kategorien – Dinge,um die sich nur Insider kümmern. Im Ergebnis entfällt dieMehrheit aller Artikel auf die Insider. Aber dieAußenstehenden stellen fast den gesamten Inhalt bereit." Aaron Swartz 35
  35. 35. Metriken findenFindet 3 aussagekräftige Metriken füreuer Projekt – möglichst spezifisch aufdessen Ziele zugeschnitten.Gibt es Angebote, die ein ähnlichesoder das gleiche Ziel verfolgen?Was kann man von ihnen lernen? 36
  36. 36. Design Patterns / Entwurfsmuster 37
  37. 37. Christopher AlexanderArchitektSuche nach Mustern in der gelungenenGestaltung von LebensräumenA Pattern Language 1977Timeless Way of Buildung 1979Sammlung online 38
  38. 38. Was ist ein Muster?Ein Muster ist eine Kombination aus• Problem• Kontext• Lösung 39
  39. 39. Beispiel: Pattern 150Name:Ein Ort zum WartenKontext:Jede Situation, bei der Leute auf irgendetwas wartenmüssen, z.B. eine Bushaltestelle. 40
  40. 40. Beispiel: Pattern 150Im Kontext Bushaltestelle wirkende Kräfte:(a) Verharrung / Bann: Die Passagiere müssen anwesendsein, wenn der Bus kommt.(b) Ungewissheit: Die Zeit, bis der Bus kommt, istungewiss.(c) Konkurrenzanspannung: Eventuell weniger freieSitzplätze als Wartende z.B. in der Rush-Hour:Lösung:Den Wartenden eine Beschäftigung geben. 41
  41. 41. Werbung an Haltestellen 42
  42. 42. "Yahoo! Bus Stop Derby" von Obscura Digital 43 http://vimeo.com/23095123
  43. 43. Invade-A-Load (1987 C64)… Minigame für das minutenlangeWarten beim Laden von Datasette YouTube 44
  44. 44. Auf dem Desktop Apples "spinning wait ball"-Cursor 45
  45. 45. Im WebFlash: AJAX:Preloader Museum Generator 46
  46. 46. Muster verschiedener OrdnungMuster groberer Granularität (predecessors) werdendurch die Anordnung kleinerer Muster (successors)konstruiert.BeispielDas Muster „Ein Ort zum Warten“ kann, durchEinbeziehung nicht wartender Leute, neue Muster aufden Plan rufen (z.B.„Straßencafe“ etc.). 47
  47. 47. Muster verschiedener OrdnungIn Alexanders „A Pattern Language“:- Anordnung von Stadt & Land (City/Country Fingers)- Struktur von Städten (Ring Roads)- Gebäude (Staircase as a Stage)- Konfiguration der Dinge innerhalb einzelner Wohnräume oder Konstruktionsdetails (Paving with Cracks Between the Stones).>> vielfältige Beziehungen > Muster-Netzwerk >Mustersprache (Pattern Language) 48
  48. 48. Strukturen von OrtenStruktur eines Orts ist in den Beziehungender Muster zueinander begründet.Muster eröffnen Möglichkeit, immer wiederneue, lebendige Orte zu schaffen - weil siegerade nicht wie ein Baukastensystemfunktionieren, sondern sie einen variablenZusammenhang zwischen einem räumlichenAspekt und einem Vorkommnis kodieren. 49
  49. 49. Mustersprachen in anderen DisziplinenNicht „DIE“ Mustersprache, sondern jeweils Sprachenfür versch. Domänen.Alexanders Ansatz wurde schon früh von der Informatikaufgegriffen, in der HCI ist sie seit Langem populärAllgemeine Problematiken:- viele Sammlungen, wenig Systematisierung- Musterentstehung braucht Zeit 50
  50. 50. Muster im UI/UX-DesignMuster =eine gebräuchliche, erprobte Komponentefür bekannte Problemein einem gegebenen Kontext 51
  51. 51. Mustersprachen im UI/UX-Design: EbenenTop-Down-Design:- Geschäftsziele- Positionierungsebene- Erlebnisebene- Aufgabenebene- Aktionsebene Van Werie / van der Veer 2003 52
  52. 52. t Van Werie / van der Veer 2003 53
  53. 53. Patterns in der PraxisMan nimmt über die Zeit Aufträge an, dieähnliche Lösungen erfordern (E-Shop,Mediaslider, Mailformular …) bzw. bietetbestimmte Lösungspakete an.Einzelne Lösungselemente sammelt unddokumentiert man (visuelle Beispiele,Codebeispiele, Beschreibung,Erfahrungswerte …), um sie als„Musterlösungen“ für neue Aufgaben zurekombinieren. 54
  54. 54. Sites mit Mustersammlungen für IA / UI / UXhttp://patterns.ideo.com/http://welie.com/patterns/http://www.designingsocialinterfaces.com/patterns/http://ui-patterns.comhttp://patternry.com/patterns/ Mobile:http://developer.yahoo.com/ypatterns http://pttrns.com/http://www.designofsites.com/patterns/ http://mobile-patterns.comhttp://patterntap.com/ http://androidpttrns.com/ 55
  55. 55. Rolle von Mustersprachen für den Designer„Paradoxerweise lernst du, dass du ein Gebäude nurdann lebendig machen kannst, wenn du frei genug bist,um die Muster von dir zu weisen, die dir gerade nochgeholfen haben. (…) Daher mag es dir vorkommen, dassMustersprachen doch nutzlos sind. (…) Aber es ist deineMustersprache, die dir geholfen hat, dein Egoloszulassen.(…)An diesem Punkt sind die Muster nicht länger wichtig:Die Muster haben dir geholfen, offen zu sein für das,was real ist.“ (Timeless Way of Building, S. 542–545) 56
  56. 56. Neue Kontexte, neue Patterns:Beispiel QR Codes 57
  57. 57. QR Code Pattern Q = Quick R = Response Code 2D-Barcode; von Denso ´96 zum Tracking von Autoteilen entwickelt; ISO-Standard, OpenSource; QR-Code-Generator 58
  58. 58. QR-Code PatternDatenkapazität:7.089 Zahlen, 4.296 alphanumerische Zeichend.h. Serverkommunikation nicht unbedingt erforderlichz.B. komplettevCard im QR-Codeder Visitenkarte 59
  59. 59. QR-Code Pattern Ming Ling 60
  60. 60. QR-Code Pattern NYC Resistor 61
  61. 61. QR-Code Pattern 62
  62. 62. QR-Code Pattern Chris Lamberthbeliebige Farbe und Material;Kontrast mind. 55%; invertiert ok,beliebige Orientierung;Perspektive & Verzerrung ok 63
  63. 63. QR-Code Pattern Sweza 64
  64. 64. QR-Code Pattern?Versucht, das Pattern für QR-Codes zu beschreiben:• Problem• Kontext• Lösung 65
  65. 65. QR Code Pattern: KontextrelevanzOrt:Was ist sinnvoll / nützlich, wo ich jetzt gerade bin?Device:Was ist sinnvoll / nützlich auf meinem Smartphone zuhaben?Aufmerksamkeit:Was will ich mehr erfahren?Konversion:Was will ich als nächstes tun? 66
  66. 66. Falsche Nutzung von QR CodesScott Strattens UnMarketing Keynote at the NAMP 67
  67. 67. Aufgabe: Design PatternsIn euren Konzeptentwicklungen und Entwürfenverwendet ihr intuitiv „Patterns“ – schließlichsind sie ja bekannte Lösungen für verbreiteteProbleme.Die explizite Auseinandersetzung mit demPattern-Ansatz schult euch in der Kompetenzzur Mustererkennung und steigert dieWachsamkeit für Lösungsansätze, denen manbegegnet. 69
  68. 68. Aufgabe: Design PatternsIdentifiziert ein spezifisches Teilproblem eurerAnwendung bzw. die von euch schonvorgeschlagene Lösung.Recherchiert, wie andere Anwendungen ihreLösung für dieses Problem realisiert haben.Erläutert kurz das Pattern (welches Problem, inwelchem Kontext, welche Lösung), drei versch.Lösungsbeispiele und ihre jeweiligen Stärken& Schwächen in einem Blogbeitrag.Nutzt die Patternsammlungen! 70
  69. 69. Marcus HaberkornAkademischer Rat, M.A.Lehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fachbereich GestaltungFachhochschule TrierIrminenfreihof 8Postfach 1826D-54208 TrierTel. +49 651 8103-839Mail: m.haberkorn@fh-trier.de 72

×