SlideShare ist ein Scribd-Unternehmen logo
1 von 70
Ziele – Metriken – Design Patterns

User Experience Design für interaktive Systeme
4. Sitzung




Marcus Haberkorn | Intermedia Design | 2012
Seminar | User Experience Design | Wahlpflichtkurs für Semester 3-5
Ziele




        2
Erinnert euch an die ersten beiden Sitzungen …
In welchem Kontext haben wir da über
Ziele gesprochen?




                                                 3
UX Design: Ziele - Metriken - Patterns (4. Sitzung)
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 ermitteln

Definiert 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
Metriken




           12
Einordnung des metrischen Ansatzes




                                     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
90-9-1 Prinzip oder 1%-Regel
                        Quelle




                                 15
Konversionstrichter für ges. Anwendungszyklus




                                                16
Beispiele für 90-9-1

Web insgesamt:
z.B. ACTA-Studie 2009

Wikipedia (DE) - Statistiken:
27.000.000 Hits pro Tag
bei 22.000 aktiven Usern / Monat
und 4.400 Usern mit über 2.000 Bearbeitungen
Erfolgsmetriken

Konkrete Indikatoren,
die messen, ob die
Designmaßnahmen die
strategischen Ziele
erfüllen.




                        Beispiel: Besuche registrierter User / Monat

                                                                       18
Konversion: Probenutzung zu zahlender Nutzung




                                                19
Beispiel
Trichter für Registrierung/Sign Up-Prozess




                                             21
Metriken: Beispiele

Site-Besuch           Analyseprogramm
                      z.B. Google Analytics, Piwik
Proberegistrierung    Analyseprogramm
Aktive Nutzung        Hauseigene Statistik
Zahlende Nutzung      Hauseigene Statistik




                                                     22
Metriken: Beispiele

Grundmetrik           Nutzertypen-Metrik
Shares                Besucher Leser
Reshares              Leser  Kommentatoren
Likes/Empfehlungen    Kommentatoren  Kuratoren
Kommentare            Kuratoren  Beitragende
Unique Views
Unique Contributors
Zeit auf der Site
Seitenaufrufe

                                                  23
Funktionen und Nutzertypen in der Wikipedia

Lesen                       Nicht angemeldeter Leser
Editieren                   Nicht angemeldeter Benutzer
Eigene Beiträge             Registrierter Nutzer
Seiten verschieben          Administrator
Eigenes Profil einstellen   Bürokrat
Artikel schützen/sperren    Steward
Artikel löschen
Artikel wiederherstellen
User sperren
User ernennen
                                                          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
Wozu? Research through Design

- Relevanz von Design dokumentieren
- Relevanz von Design rechtfertigen
- Erfolgsfaktoren ermitteln

Die Social Games-
Industrie gilt, insb.
durch Zynga als
sehr stark
metrikengetrieben




                                      26
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
                                                               29
Probleme des metrischen Ansatzes

Welche Problem haben rein auf Metriken
basierende Designansätze?




                                         30
Stud.IP-Nutzerstatistik an der FH Trier
                     14000



                     12000



                     10000
Angemeldete Nutzer




                     8000



                     6000



                     4000



                     2000



                        0




                                                 31
Stud.IP Zugriffsstatistik an der FH Trier




                                            32
Kontagent: Analytics Platform für das Social Web

                        http://www.slideshare.net/kontagent/top-7-social-metrics-
                        gdc-europe-2011




                                                                                    33
Wer schreibt die Wikipedia? (2006)

"Über 50% aller
Bearbeitungen
werden von nur
0,7% der User
erledigt …
524 Menschen."




                                     Aaron Swartz

                                                    34
Wer schreibt die Wikipedia? (2006)

"Ein Außenstehender fügt ein Stück Information ein.
Dann nehmen die Insider verschiedene Bearbeitungen
vor, optimieren und reformatieren es.

Außerdem: Die Insider Tausende von Bearbeitungen mit
Dingen wie Namensänderungen von Kategorien – Dinge,
um die sich nur Insider kümmern. Im Ergebnis entfällt die
Mehrheit aller Artikel auf die Insider. Aber die
Außenstehenden stellen fast den gesamten Inhalt bereit.
"                                                   Aaron Swartz

                                                                   35
Metriken finden

Findet 3 aussagekräftige Metriken für
euer Projekt – möglichst spezifisch auf
dessen Ziele zugeschnitten.


Gibt es Angebote, die ein ähnliches
oder das gleiche Ziel verfolgen?
Was kann man von ihnen lernen?


                                          36
Design Patterns / Entwurfsmuster




                                   37
Christopher Alexander

Architekt

Suche nach Mustern in der gelungenen
Gestaltung von Lebensräumen

A Pattern Language 1977
Timeless Way of Buildung 1979

Sammlung online

                                       38
Was ist ein Muster?

Ein Muster ist eine Kombination aus
• Problem
• Kontext
• Lösung




                                      39
Beispiel: Pattern 150

Name:
Ein Ort zum Warten
Kontext:
Jede Situation, bei der Leute auf irgendetwas warten
müssen, z.B. eine Bushaltestelle.




                                                       40
Beispiel: Pattern 150

Im Kontext Bushaltestelle wirkende Kräfte:
(a) Verharrung / Bann: Die Passagiere müssen anwesend
sein, wenn der Bus kommt.
(b) Ungewissheit: Die Zeit, bis der Bus kommt, ist
ungewiss.
(c) Konkurrenzanspannung: Eventuell weniger freie
Sitzplätze als Wartende z.B. in der Rush-Hour:
Lösung:
Den Wartenden eine Beschäftigung geben.

                                                        41
Werbung an Haltestellen




                          42
"Yahoo! Bus Stop Derby" von Obscura Digital




                                                             43
                                     http://vimeo.com/23095123
Invade-A-Load (1987 C64)




… Minigame für das minutenlange
Warten beim Laden von Datasette YouTube

                                          44
Auf dem Desktop

                  Apples
                  "spinning wait
                  ball"-Cursor




                                   45
Im Web

Flash:             AJAX:




Preloader Museum   Generator

                               46
Muster verschiedener Ordnung

Muster groberer Granularität (predecessors) werden
durch die Anordnung kleinerer Muster (successors)
konstruiert.

Beispiel
Das Muster „Ein Ort zum Warten“ kann, durch
Einbeziehung nicht wartender Leute, neue Muster auf
den Plan rufen (z.B.„Straßencafe“ etc.).


                                                      47
Muster verschiedener Ordnung

In 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
Strukturen von Orten

Struktur eines Orts ist in den Beziehungen
der Muster zueinander begründet.
Muster eröffnen Möglichkeit, immer wieder
neue, lebendige Orte zu schaffen - weil sie
gerade nicht wie ein Baukastensystem
funktionieren, sondern sie einen variablen
Zusammenhang zwischen einem räumlichen
Aspekt und einem Vorkommnis kodieren.


                                              49
Mustersprachen in anderen Disziplinen

Nicht „DIE“ Mustersprache, sondern jeweils Sprachen
für versch. Domänen.

Alexanders Ansatz wurde schon früh von der Informatik
aufgegriffen, in der HCI ist sie seit Langem populär

Allgemeine Problematiken:
- viele Sammlungen, wenig Systematisierung
- Musterentstehung braucht Zeit

                                                        50
Muster im UI/UX-Design

Muster =
eine gebräuchliche, erprobte Komponente
für bekannte Probleme
in einem gegebenen Kontext




                                          51
Mustersprachen im UI/UX-Design: Ebenen

Top-Down-Design:
- Geschäftsziele
- Positionierungsebene
- Erlebnisebene
- Aufgabenebene
- Aktionsebene




                                 Van Werie / van der Veer 2003

                                                                 52
t




    Van Werie / van der Veer 2003

                                    53
Patterns in der Praxis

Man nimmt über die Zeit Aufträge an, die
ähnliche Lösungen erfordern (E-Shop,
Mediaslider, Mailformular …) bzw. bietet
bestimmte Lösungspakete an.
Einzelne Lösungselemente sammelt und
dokumentiert man (visuelle Beispiele,
Codebeispiele, Beschreibung,
Erfahrungswerte …), um sie als
„Musterlösungen“ für neue Aufgaben zu
rekombinieren.
                                           54
Sites mit Mustersammlungen für IA / UI / UX

http://patterns.ideo.com/
http://welie.com/patterns/

http://www.designingsocialinterfaces.com
/patterns/
http://ui-patterns.com

http://patternry.com/patterns/             Mobile:
http://developer.yahoo.com/ypatterns       http://pttrns.com/
http://www.designofsites.com/patterns/     http://mobile-patterns.com
http://patterntap.com/                     http://androidpttrns.com/


                                                                        55
Rolle von Mustersprachen für den Designer

„Paradoxerweise lernst du, dass du ein Gebäude nur
dann lebendig machen kannst, wenn du frei genug bist,
um die Muster von dir zu weisen, die dir gerade noch
geholfen haben. (…) Daher mag es dir vorkommen, dass
Mustersprachen doch nutzlos sind. (…) Aber es ist deine
Mustersprache, die dir geholfen hat, dein Ego
loszulassen.(…)
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
Neue Kontexte, neue Patterns:
Beispiel QR Codes




                                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
QR-Code Pattern

Datenkapazität:
7.089 Zahlen, 4.296 alphanumerische Zeichen
d.h. Serverkommunikation nicht unbedingt erforderlich

z.B. komplette
vCard im QR-Code
der Visitenkarte




                                                        59
QR-Code Pattern
                  Ming Ling




                        60
QR-Code Pattern




                  NYC Resistor

                                 61
QR-Code Pattern




                  62
QR-Code Pattern
                                     Chris Lamberth




beliebige Farbe und Material;
Kontrast mind. 55%; invertiert ok,
beliebige Orientierung;
Perspektive & Verzerrung ok

                                                63
QR-Code Pattern




                  Sweza




                     64
QR-Code Pattern?

Versucht, das Pattern für QR-Codes zu beschreiben:
• Problem
• Kontext
• Lösung




                                                     65
QR Code Pattern: Kontextrelevanz

Ort:
Was ist sinnvoll / nützlich, wo ich jetzt gerade bin?
Device:
Was ist sinnvoll / nützlich auf meinem Smartphone zu
haben?
Aufmerksamkeit:
Was will ich mehr erfahren?
Konversion:
Was will ich als nächstes tun?

                                                        66
Falsche Nutzung von QR Codes




Scott Stratten's UnMarketing Keynote at the NAMP

                                                   67
Aufgabe: Design Patterns

In euren Konzeptentwicklungen und Entwürfen
verwendet ihr intuitiv „Patterns“ – schließlich
sind sie ja bekannte Lösungen für verbreitete
Probleme.
Die explizite Auseinandersetzung mit dem
Pattern-Ansatz schult euch in der Kompetenz
zur Mustererkennung und steigert die
Wachsamkeit für Lösungsansätze, denen man
begegnet.

                                                  69
Aufgabe: Design Patterns

Identifiziert ein spezifisches Teilproblem eurer
Anwendung bzw. die von euch schon
vorgeschlagene Lösung.
Recherchiert, wie andere Anwendungen ihre
Lösung für dieses Problem realisiert haben.
Erläutert kurz das Pattern (welches Problem, in
welchem Kontext, welche Lösung), drei versch.
Lösungsbeispiele und ihre jeweiligen Stärken
& Schwächen in einem Blogbeitrag.
Nutzt die Patternsammlungen!
                                                   70
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



                                                          72

Más contenido relacionado

Andere mochten auch

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 + UXBarkley
 
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 UXOlde Lorenzen-Schmidt
 
Usability bei der Mainova AG
Usability bei der Mainova AGUsability bei der Mainova AG
Usability bei der Mainova AGConnected-Blog
 
E-Commerce User Experience & Usability
E-Commerce User Experience & UsabilityE-Commerce User Experience & Usability
E-Commerce User Experience & UsabilityINM AG
 
Java Design Pattern
Java Design PatternJava Design Pattern
Java Design Patternmanuelberger
 
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 (8)

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
 
E-Commerce User Experience & Usability
E-Commerce User Experience & UsabilityE-Commerce User Experience & Usability
E-Commerce User Experience & Usability
 
Java Design Pattern
Java Design PatternJava Design Pattern
Java Design Pattern
 
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: Ziele - Metriken - Patterns (4. Sitzung)

Optimierte Vorgehensweisen für Intranet-Projekte [DE]
Optimierte Vorgehensweisen für Intranet-Projekte [DE]Optimierte Vorgehensweisen für Intranet-Projekte [DE]
Optimierte Vorgehensweisen für Intranet-Projekte [DE]Stephan Schillerwein
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessImmacon
 
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
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseHans-Joachim Belz
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitOliver Annen
 
Wie gut sind Google und Co.?
Wie gut sind Google und Co.?Wie gut sind Google und Co.?
Wie gut sind Google und Co.?Dirk Lewandowski
 
Wie gut sind Google und Co.?
Wie gut sind Google und Co.?Wie gut sind Google und Co.?
Wie gut sind Google und Co.?Dirk Lewandowski
 
UX Research Framework für SCRUM
UX Research Framework für SCRUMUX Research Framework für SCRUM
UX Research Framework für SCRUMManuela Risch
 
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
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikClaus Brell
 
Author Experience in Craft CMS
Author Experience in Craft CMSAuthor Experience in Craft CMS
Author Experience in Craft CMSAndreas Binggeli
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerkdie.agilen GmbH
 
Erfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMUErfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMUMartin Koser
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines ConceptersuxHH
 
Conversion-Optimierung für Online-Shops - Jörg Dennis Krüger - iico2012
Conversion-Optimierung für Online-Shops - Jörg Dennis Krüger - iico2012Conversion-Optimierung für Online-Shops - Jörg Dennis Krüger - iico2012
Conversion-Optimierung für Online-Shops - Jörg Dennis Krüger - iico2012Jörg Dennis Krüger
 

Ähnlich wie UX Design: Ziele - Metriken - Patterns (4. Sitzung) (20)

Optimierte Vorgehensweisen für Intranet-Projekte [DE]
Optimierte Vorgehensweisen für Intranet-Projekte [DE]Optimierte Vorgehensweisen für Intranet-Projekte [DE]
Optimierte Vorgehensweisen für Intranet-Projekte [DE]
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im Entwicklungsprozess
 
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?
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
 
Wie gut sind Google und Co.?
Wie gut sind Google und Co.?Wie gut sind Google und Co.?
Wie gut sind Google und Co.?
 
Wie gut sind Google und Co.?
Wie gut sind Google und Co.?Wie gut sind Google und Co.?
Wie gut sind Google und Co.?
 
UX Research Framework für SCRUM
UX Research Framework für SCRUMUX Research Framework für SCRUM
UX Research Framework für SCRUM
 
Metriken und Messbarkeit im Social Web
Metriken und Messbarkeit im Social WebMetriken und Messbarkeit im Social Web
Metriken und Messbarkeit im Social Web
 
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)
 
2010 10-28-dms expo-mk-v2.pptx
2010 10-28-dms expo-mk-v2.pptx2010 10-28-dms expo-mk-v2.pptx
2010 10-28-dms expo-mk-v2.pptx
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
 
Author Experience in Craft CMS
Author Experience in Craft CMSAuthor Experience in Craft CMS
Author Experience in Craft CMS
 
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
Erfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMUErfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMU
 
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
 
Conversion-Optimierung für Online-Shops - Jörg Dennis Krüger - iico2012
Conversion-Optimierung für Online-Shops - Jörg Dennis Krüger - iico2012Conversion-Optimierung für Online-Shops - Jörg Dennis Krüger - iico2012
Conversion-Optimierung für Online-Shops - Jörg Dennis Krüger - iico2012
 
Findability
FindabilityFindability
Findability
 

Mehr von Marcus Haberkorn

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

Mehr von Marcus Haberkorn (8)

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

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

  • 1. Ziele – Metriken – Design Patterns User Experience Design für interaktive Systeme 4. Sitzung Marcus Haberkorn | Intermedia Design | 2012 Seminar | User Experience Design | Wahlpflichtkurs für Semester 3-5
  • 2. Ziele 2
  • 3. Erinnert euch an die ersten beiden Sitzungen … In welchem Kontext haben wir da über Ziele gesprochen? 3
  • 5. Wie beschreibt man eine Aktivität? 5
  • 6. Wie beschreibt man eine Aktivität?
  • 7. Ziele im Web 1.0: E-Commerce
  • 8. Ziele im Web 2.0: UG Content, Social Networks
  • 9. Ziele im Web 2.0: Geschäftsziele
  • 10. Ziele im Web 2.0: Prosoziale & persönliche Ziele
  • 11. Aktivität & Ziel ermitteln Definiert 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
  • 12. Metriken 12
  • 14. 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
  • 15. 90-9-1 Prinzip oder 1%-Regel Quelle 15
  • 16. Konversionstrichter für ges. Anwendungszyklus 16
  • 17. Beispiele für 90-9-1 Web insgesamt: z.B. ACTA-Studie 2009 Wikipedia (DE) - Statistiken: 27.000.000 Hits pro Tag bei 22.000 aktiven Usern / Monat und 4.400 Usern mit über 2.000 Bearbeitungen
  • 18. Erfolgsmetriken Konkrete Indikatoren, die messen, ob die Designmaßnahmen die strategischen Ziele erfüllen. Beispiel: Besuche registrierter User / Monat 18
  • 19. Konversion: Probenutzung zu zahlender Nutzung 19
  • 22. Metriken: Beispiele Site-Besuch Analyseprogramm z.B. Google Analytics, Piwik Proberegistrierung Analyseprogramm Aktive Nutzung Hauseigene Statistik Zahlende Nutzung Hauseigene Statistik 22
  • 23. Metriken: Beispiele Grundmetrik Nutzertypen-Metrik Shares Besucher Leser Reshares Leser  Kommentatoren Likes/Empfehlungen Kommentatoren  Kuratoren Kommentare Kuratoren  Beitragende Unique Views Unique Contributors Zeit auf der Site Seitenaufrufe 23
  • 24. Funktionen und Nutzertypen in der Wikipedia Lesen Nicht angemeldeter Leser Editieren Nicht angemeldeter Benutzer Eigene Beiträge Registrierter Nutzer Seiten verschieben Administrator Eigenes Profil einstellen Bürokrat Artikel schützen/sperren Steward Artikel löschen Artikel wiederherstellen User sperren User ernennen 24
  • 25. 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
  • 26. Wozu? Research through Design - Relevanz von Design dokumentieren - Relevanz von Design rechtfertigen - Erfolgsfaktoren ermitteln Die Social Games- Industrie gilt, insb. durch Zynga als sehr stark metrikengetrieben 26
  • 27. Gutes visuelles Design ist nicht immer erfolgreicher 27
  • 28. Gutes visuelles Design ist nicht immer erfolgreicher 28
  • 29. Gutes visuelles Design ist nicht immer erfolgreicher … verkauft pro Jahr Autos im Wert von über 42 Millionen Euro 29
  • 30. Probleme des metrischen Ansatzes Welche Problem haben rein auf Metriken basierende Designansätze? 30
  • 31. Stud.IP-Nutzerstatistik an der FH Trier 14000 12000 10000 Angemeldete Nutzer 8000 6000 4000 2000 0 31
  • 32. Stud.IP Zugriffsstatistik an der FH Trier 32
  • 33. Kontagent: Analytics Platform für das Social Web http://www.slideshare.net/kontagent/top-7-social-metrics- gdc-europe-2011 33
  • 34. Wer schreibt die Wikipedia? (2006) "Über 50% aller Bearbeitungen werden von nur 0,7% der User erledigt … 524 Menschen." Aaron Swartz 34
  • 35. Wer schreibt die Wikipedia? (2006) "Ein Außenstehender fügt ein Stück Information ein. Dann nehmen die Insider verschiedene Bearbeitungen vor, optimieren und reformatieren es. Außerdem: Die Insider Tausende von Bearbeitungen mit Dingen wie Namensänderungen von Kategorien – Dinge, um die sich nur Insider kümmern. Im Ergebnis entfällt die Mehrheit aller Artikel auf die Insider. Aber die Außenstehenden stellen fast den gesamten Inhalt bereit. " Aaron Swartz 35
  • 36. Metriken finden Findet 3 aussagekräftige Metriken für euer Projekt – möglichst spezifisch auf dessen Ziele zugeschnitten. Gibt es Angebote, die ein ähnliches oder das gleiche Ziel verfolgen? Was kann man von ihnen lernen? 36
  • 37. Design Patterns / Entwurfsmuster 37
  • 38. Christopher Alexander Architekt Suche nach Mustern in der gelungenen Gestaltung von Lebensräumen A Pattern Language 1977 Timeless Way of Buildung 1979 Sammlung online 38
  • 39. Was ist ein Muster? Ein Muster ist eine Kombination aus • Problem • Kontext • Lösung 39
  • 40. Beispiel: Pattern 150 Name: Ein Ort zum Warten Kontext: Jede Situation, bei der Leute auf irgendetwas warten müssen, z.B. eine Bushaltestelle. 40
  • 41. Beispiel: Pattern 150 Im Kontext Bushaltestelle wirkende Kräfte: (a) Verharrung / Bann: Die Passagiere müssen anwesend sein, wenn der Bus kommt. (b) Ungewissheit: Die Zeit, bis der Bus kommt, ist ungewiss. (c) Konkurrenzanspannung: Eventuell weniger freie Sitzplätze als Wartende z.B. in der Rush-Hour: Lösung: Den Wartenden eine Beschäftigung geben. 41
  • 43. "Yahoo! Bus Stop Derby" von Obscura Digital 43 http://vimeo.com/23095123
  • 44. Invade-A-Load (1987 C64) … Minigame für das minutenlange Warten beim Laden von Datasette YouTube 44
  • 45. Auf dem Desktop Apples "spinning wait ball"-Cursor 45
  • 46. Im Web Flash: AJAX: Preloader Museum Generator 46
  • 47. Muster verschiedener Ordnung Muster groberer Granularität (predecessors) werden durch die Anordnung kleinerer Muster (successors) konstruiert. Beispiel Das Muster „Ein Ort zum Warten“ kann, durch Einbeziehung nicht wartender Leute, neue Muster auf den Plan rufen (z.B.„Straßencafe“ etc.). 47
  • 48. Muster verschiedener Ordnung In 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
  • 49. Strukturen von Orten Struktur eines Orts ist in den Beziehungen der Muster zueinander begründet. Muster eröffnen Möglichkeit, immer wieder neue, lebendige Orte zu schaffen - weil sie gerade nicht wie ein Baukastensystem funktionieren, sondern sie einen variablen Zusammenhang zwischen einem räumlichen Aspekt und einem Vorkommnis kodieren. 49
  • 50. Mustersprachen in anderen Disziplinen Nicht „DIE“ Mustersprache, sondern jeweils Sprachen für versch. Domänen. Alexanders Ansatz wurde schon früh von der Informatik aufgegriffen, in der HCI ist sie seit Langem populär Allgemeine Problematiken: - viele Sammlungen, wenig Systematisierung - Musterentstehung braucht Zeit 50
  • 51. Muster im UI/UX-Design Muster = eine gebräuchliche, erprobte Komponente für bekannte Probleme in einem gegebenen Kontext 51
  • 52. Mustersprachen im UI/UX-Design: Ebenen Top-Down-Design: - Geschäftsziele - Positionierungsebene - Erlebnisebene - Aufgabenebene - Aktionsebene Van Werie / van der Veer 2003 52
  • 53. t Van Werie / van der Veer 2003 53
  • 54. Patterns in der Praxis Man nimmt über die Zeit Aufträge an, die ähnliche Lösungen erfordern (E-Shop, Mediaslider, Mailformular …) bzw. bietet bestimmte Lösungspakete an. Einzelne Lösungselemente sammelt und dokumentiert man (visuelle Beispiele, Codebeispiele, Beschreibung, Erfahrungswerte …), um sie als „Musterlösungen“ für neue Aufgaben zu rekombinieren. 54
  • 55. Sites mit Mustersammlungen für IA / UI / UX http://patterns.ideo.com/ http://welie.com/patterns/ http://www.designingsocialinterfaces.com /patterns/ http://ui-patterns.com http://patternry.com/patterns/ Mobile: http://developer.yahoo.com/ypatterns http://pttrns.com/ http://www.designofsites.com/patterns/ http://mobile-patterns.com http://patterntap.com/ http://androidpttrns.com/ 55
  • 56. Rolle von Mustersprachen für den Designer „Paradoxerweise lernst du, dass du ein Gebäude nur dann lebendig machen kannst, wenn du frei genug bist, um die Muster von dir zu weisen, die dir gerade noch geholfen haben. (…) Daher mag es dir vorkommen, dass Mustersprachen doch nutzlos sind. (…) Aber es ist deine Mustersprache, die dir geholfen hat, dein Ego loszulassen.(…) 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
  • 57. Neue Kontexte, neue Patterns: Beispiel QR Codes 57
  • 58. 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
  • 59. QR-Code Pattern Datenkapazität: 7.089 Zahlen, 4.296 alphanumerische Zeichen d.h. Serverkommunikation nicht unbedingt erforderlich z.B. komplette vCard im QR-Code der Visitenkarte 59
  • 60. QR-Code Pattern Ming Ling 60
  • 61. QR-Code Pattern NYC Resistor 61
  • 63. QR-Code Pattern Chris Lamberth beliebige Farbe und Material; Kontrast mind. 55%; invertiert ok, beliebige Orientierung; Perspektive & Verzerrung ok 63
  • 64. QR-Code Pattern Sweza 64
  • 65. QR-Code Pattern? Versucht, das Pattern für QR-Codes zu beschreiben: • Problem • Kontext • Lösung 65
  • 66. QR Code Pattern: Kontextrelevanz Ort: Was ist sinnvoll / nützlich, wo ich jetzt gerade bin? Device: Was ist sinnvoll / nützlich auf meinem Smartphone zu haben? Aufmerksamkeit: Was will ich mehr erfahren? Konversion: Was will ich als nächstes tun? 66
  • 67. Falsche Nutzung von QR Codes Scott Stratten's UnMarketing Keynote at the NAMP 67
  • 68. Aufgabe: Design Patterns In euren Konzeptentwicklungen und Entwürfen verwendet ihr intuitiv „Patterns“ – schließlich sind sie ja bekannte Lösungen für verbreitete Probleme. Die explizite Auseinandersetzung mit dem Pattern-Ansatz schult euch in der Kompetenz zur Mustererkennung und steigert die Wachsamkeit für Lösungsansätze, denen man begegnet. 69
  • 69. Aufgabe: Design Patterns Identifiziert ein spezifisches Teilproblem eurer Anwendung bzw. die von euch schon vorgeschlagene Lösung. Recherchiert, wie andere Anwendungen ihre Lösung für dieses Problem realisiert haben. Erläutert kurz das Pattern (welches Problem, in welchem Kontext, welche Lösung), drei versch. Lösungsbeispiele und ihre jeweiligen Stärken & Schwächen in einem Blogbeitrag. Nutzt die Patternsammlungen! 70
  • 70. 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 72