SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen
WUD 08
         Workshop Interaction Design:
          Grundlagen und Prinzipien




WUNSCHFELD
ABLAUF
-   Orientierung
-   IX Design Ansätze
-   Research, Übung: Beobachtung
-   Konzeption, Übung: Brainstorm und Prototype, Präsentation
-   Validierung
USER INTERFACE DESIGN:INTERACTION DESIGN:USER EXPERIENCE DESIGN
INTERACTION DESIGN (IxD) is the branch of USER EXPERIENCE DESIGN
that illuminates the relationship between people and the
interactive products they use.

While interaction design has a firm foundation in the theory,
practice, and methodology of traditional USER INTERFACE DESIGN, its
focus is on defining the complex dialogues that occur between
people and interactive devices of many types—from computers to
mobile communications devices to appliances
MENSCHEN



INTERACTION DESIGN



       DATEN




     Grafik: „Designing the Obvious“ by Robert Hoekman, Jr.
INTERACTION DESIGN

Verdeutlicht die Funktion und Interaktivität
eines Systems
INTERACTION DESIGN

Definiert das Verhalten des Systems in Bezug auf
Nutzer-Eingaben
INTERACTION DESIGN

Legt einfache und komplexe Arbeitsschritte offen.
INTERACTION DESIGN

Informiert den Nutzer jederzeit über den Zustand
des Systems.
INTERACTION DESIGN

Verhindert Nutzer Fehler.
WIE?
Ansatz                Überblick             Nutzer             Designer


                    Konzentration auf die    begleitet das     Übersetzt
User Centered
                    Ziele und Bedürfnisse    Design            Bedürfnisse und
Design
                    der Nutzer                                 Ziele des Nutzers

                    Konzentration auf die    führt die         erstellt die
Activity Centered   auszuführenden           Aktivitäten aus   Artifakte zur
Design              Aktivitäten und                            Durchführung der
                    Aktionen.                                  Aktionen

                    Verläßt sich auf die     validiert das     ist die Quelle der
                    Fähigkeiten und das      Design            Inspiration.
Genius Design
                    Wissen von erfahrenen
                    Designern




                                  Tabelle aus „Designing for Interaction“ by Dan Saffer
Ansatz                Überblick             Nutzer             Designer


                    Konzentration auf die    begleitet das     Übersetzt
User Centered
                    Ziele und Bedürfnisse    Design            Bedürfnisse und
Design
                    der Nutzer                                 Ziele des Nutzers

                    Konzentration auf die    führt die         erstellt die
Activity Centered   auszuführenden           Aktivitäten aus   Artifakte zur
Design              Aktivitäten und                            Durchführung der
                    Aktionen.                                  Aktionen

                    Verläßt sich auf die     validiert das     ist die Quelle der
                    Fähigkeiten und das      Design            Inspiration.
Genius Design
                    Wissen von erfahrenen
                    Designern




                                  Tabelle aus „Designing for Interaction“ by Dan Saffer
Ansatz                Überblick             Nutzer             Designer


                    Konzentration auf die    begleitet das     Übersetzt
User Centered
                    Ziele und Bedürfnisse    Design            Bedürfnisse und
Design
                    der Nutzer                                 Ziele des Nutzers

                    Konzentration auf die    führt die         erstellt die
Activity Centered   auszuführenden           Aktivitäten aus   Artifakte zur
Design              Aktivitäten und                            Durchführung der
                    Aktionen.                                  Aktionen

                    Verläßt sich auf die     validiert das     ist die Quelle der
                    Fähigkeiten und das      Design            Inspiration.
Genius Design
                    Wissen von erfahrenen
                    Designern




                                  Tabelle aus „Designing for Interaction“ by Dan Saffer
Ansatz                Überblick             Nutzer            Designer


                    Konzentration auf die    begleitet das     Übersetzt
User Centered
                    Ziele und Bedürfnisse    Design            Bedürfnisse und
Design
                    der Nutzer                                 Ziele des Nutzers

                    Konzentration auf die    führt die         erstellt die
Activity Centered   auszuführenden           Aktivitäten aus   Artifakte zur
Design              Aktivitäten und                            Durchführung der
                    Aktionen.                                  Aktionen

                    Verläßt sich auf die     validiert das     ist die Quelle der
                    Fähigkeiten und das      Design            Inspiration.
Genius Design
                    Wissen von erfahrenen
                    Designern




                                  Tabelle aus „Designing for Interaction“ by Dan Saffer
USER CENTERED DESIGN:

„DU BIST NICHT DER NUTZER.“
360° Sicht   Synthese   Konzeption             Validierung


                                     ite
                                           ra t i ve s t e s t e n
360° Sicht
360° Sicht

    METHODEN

-   Konkurrenzanalyse
-   Mystery Shopping
-   Beobachtung
-   Interviews
-   Analogiestudien
-   Fokusgruppen
-   Fragebögen
360° Sicht


    BEOBACHTUNG

-   Verständnis für den Alltag des Endnutzers
    entwickeln

-   Interviews und Erzählungen sind nur
    Darstellungen über diesen Alltag

-   bestimmte Handlungsweisen sind nur der
    Beobachtung zugänglich
ÜBUNG 1:


„Beobachtung“
360° Sicht




    LEITFRAGEN

-   In was für einer Umwelt bewegt sich die Person?
-   Was für Aufgaben möchte diese Person ausführen?
-   Welche Hilfsmittel werden dabei benutzt?
-   Welche Probleme sind erkennbar?
Synthese
    Sinnvolle Auswertung der Daten
             aus dem User Research
Synthese




-   Was hat man über den Nutzer gelernt?
-   Welche Anforderungen und Bedürfnisse
    existieren?
-   Wie ist der Nutzer vorgegangen?
-   Welche Hilfsmittel hat der Nutzer evtl.
    benötigt?
-   Wo gibt es Probleme?
Synthese



    ERGEBNISSE DER SYNTHESE

-   Personas
-   Use Cases
-   Scenarios
-   Flow Charts
-   (weitere)
ÜBUNG 2:


„Problem-Priorisierung“
Konzeption
    Ideenfindung und Prototyping
     für das Anwendungsszenario
„Ich glaube nicht, dass
                              Kreativität die Gabe einer
                                    guten Fee ist.”


Edward de Bono – Erfinder des 6-Hüte-Denkens
Konzeption



    KREATIVMETHODEN

-   Methode 6-3-5
-   6 Hüte Denken
-   Brainstorming
-   Storyboards
-   Collective Notebook
-   (weitere)
Konzeption




    BRAINSTORMING

-   „using the brain to storm a problem“
-   Schnell viele Ideen entwickeln in kurzer Zeit
-   Ungewöhnliche Alternativen finden
-   Mitarbeiter, Laien oder Experten
-   auch andere Fachgebiete können teilnehmen
Konzeption



    WIE BRAINSTORMEN?

-   Fokus: identifizierte Probleme aus der Beobachtung
-   Lösungsansätze/ Ideen auf Post-Its notieren in Worten oder
    Skizzen etc.
-   Jeder stellt nacheinander dem Team seine Ideen vor
-   Darauf aubauend ggfs. weitere Lösungsansätze entwickeln
-   Ideen gruppieren und relevante Cluster festlegen
ÜBUNG 3:


„Brainstorm“
Konzeption



    REGELN
-   Keine Kritik
-   Verrückte Ideen fördern
-   Auf anderen Ideen aufbauen
-   Das Problem im Auge behalten
-   Ausreden lassen
-   Anschaulich erklären
-   Je mehr Ideen, desto besser
Konzeption




    RAPID PROTOTYPING

-   Schnell und kostengünstig
-   Erste Ideen visualisieren und kommunizieren
-   Ermöglicht frühzeitiges Feedback zu Lösungvorschlägen
    und Konzepten
-   Geringes Risiko von Fehlentwicklungen durch häufige
    und zeitnahe Validierung
Konzeption


    RAPID PROTOTYPING TECHNIKEN
-   Papierprototypen
-   Wireframes
-   Story boards
-   3D Modelle
-   Ablaufdiagramme
-   Screens
PROTOTYPE FIDELITY
ÜBUNG 4:


„Prototyp erstellen
und präsentieren“
Validierung
BUCH- UND LINKLISTE
    Books.

-   Designing the Moment, Robert Hoekman, Jr

-   Designing the Obvious, Robert Hoekman, Jr

-   Designing Interaction, Dan Saffer

-   The Art of Innovation, Tom Kelley



    Links.

-   Interaction Design Association, www.gamma.ixda.org

-   Grundsätze des Interaction Designs, http://meiert.com/de/publications/translations/asktog.com/firstprinciples/

-   Apple User Interface Guidelines, http://developer.apple.com/documentation/UserExperience/Conceptual/
    AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html#//apple_ref/doc/uid/TP30000894-DontLinkElementID_323

-   Don Norman: Human-Centered Design Considered Harmful, http://jnd.org/dn.mss/human-centered.html

-   ISO Definition von UCD (Human Centered Design): http://usabilityprofessionals.org/usability_resources/about_usability/
    what_is_ucd.html

-   Video: Das UX Design Development von Office 2007: http://msstudios.vo.llnwd.net/o21/mix08/08_WMVs/UX09.wmv
Vielen Dank!




WUNSCHFELD
Interaction Design

Dirk J. Platzek                                Nadine Dannert
info@wunschfeld.net                  nadine.dannert@d-labs.com
www.wunschfeld.net                             www.d-labs.com
040 429 18 772                                  0331 979 92 316

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Was Verbindung schafft. Über Rhythmus, Empathie und Verschmelzung
Was Verbindung schafft. Über Rhythmus, Empathie und VerschmelzungWas Verbindung schafft. Über Rhythmus, Empathie und Verschmelzung
Was Verbindung schafft. Über Rhythmus, Empathie und Verschmelzung
 
Codierte Bewegung und die Sehnsucht nach Rhythmus
Codierte Bewegung und die Sehnsucht nach RhythmusCodierte Bewegung und die Sehnsucht nach Rhythmus
Codierte Bewegung und die Sehnsucht nach Rhythmus
 
Content is King, Navigation is Queen (IA-Konferenz 2012)
Content is King, Navigation is Queen (IA-Konferenz 2012)Content is King, Navigation is Queen (IA-Konferenz 2012)
Content is King, Navigation is Queen (IA-Konferenz 2012)
 
Movement, Empathie und die Sehnsucht nach Rhythmus
Movement, Empathie und die Sehnsucht nach RhythmusMovement, Empathie und die Sehnsucht nach Rhythmus
Movement, Empathie und die Sehnsucht nach Rhythmus
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
 
Der Oscar für die beste Nebenrolle - Interfaces näher betrachtet
Der Oscar für die beste Nebenrolle - Interfaces näher betrachtetDer Oscar für die beste Nebenrolle - Interfaces näher betrachtet
Der Oscar für die beste Nebenrolle - Interfaces näher betrachtet
 

Ähnlich wie Wunschfeld Ix Design Workshop World Usability Day 08

Alice im Wunderland - Die Magie der User Experience im eCommerce
Alice im Wunderland - Die Magie der User Experience im eCommerceAlice im Wunderland - Die Magie der User Experience im eCommerce
Alice im Wunderland - Die Magie der User Experience im eCommerce
eCommerce Lounge
 

Ähnlich wie Wunschfeld Ix Design Workshop World Usability Day 08 (20)

Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!
 
WPF UI-Development Best Practices
WPF UI-Development Best PracticesWPF UI-Development Best Practices
WPF UI-Development Best Practices
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Kursergebnis: Paparazzi Dokumentation
Kursergebnis: Paparazzi DokumentationKursergebnis: Paparazzi Dokumentation
Kursergebnis: Paparazzi Dokumentation
 
IA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story MappingIA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story Mapping
 
User Story Mapping in Practice
User Story Mapping in PracticeUser Story Mapping in Practice
User Story Mapping in Practice
 
Was ist UX? User Experience als umfassender Prozess.
Was ist UX? User Experience als umfassender Prozess.Was ist UX? User Experience als umfassender Prozess.
Was ist UX? User Experience als umfassender Prozess.
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
 
Brand Community Use Case Social Innovation
Brand Community Use Case Social InnovationBrand Community Use Case Social Innovation
Brand Community Use Case Social Innovation
 
Corporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTrackingCorporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTracking
 
UX Thinking and Product Visions
UX Thinking and Product VisionsUX Thinking and Product Visions
UX Thinking and Product Visions
 
Wettschätzen mit der Bet-Cost-Matrix
Wettschätzen mit der Bet-Cost-MatrixWettschätzen mit der Bet-Cost-Matrix
Wettschätzen mit der Bet-Cost-Matrix
 
Creating the bigger picture - Die Designvision in agilen Projekten
Creating the bigger picture - Die Designvision in agilen ProjektenCreating the bigger picture - Die Designvision in agilen Projekten
Creating the bigger picture - Die Designvision in agilen Projekten
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
 
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]
 
Ux vs. Agile
Ux vs. AgileUx vs. Agile
Ux vs. Agile
 
Alice im Wunderland - Die Magie der User Experience im eCommerce
Alice im Wunderland - Die Magie der User Experience im eCommerceAlice im Wunderland - Die Magie der User Experience im eCommerce
Alice im Wunderland - Die Magie der User Experience im eCommerce
 
Discovery toolbox working products 2016 web
 Discovery toolbox working products 2016 web Discovery toolbox working products 2016 web
Discovery toolbox working products 2016 web
 
UX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, PrototypingUX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, Prototyping
 

Wunschfeld Ix Design Workshop World Usability Day 08

  • 1. WUD 08 Workshop Interaction Design: Grundlagen und Prinzipien WUNSCHFELD
  • 2. ABLAUF - Orientierung - IX Design Ansätze - Research, Übung: Beobachtung - Konzeption, Übung: Brainstorm und Prototype, Präsentation - Validierung
  • 3. USER INTERFACE DESIGN:INTERACTION DESIGN:USER EXPERIENCE DESIGN
  • 4. INTERACTION DESIGN (IxD) is the branch of USER EXPERIENCE DESIGN that illuminates the relationship between people and the interactive products they use. While interaction design has a firm foundation in the theory, practice, and methodology of traditional USER INTERFACE DESIGN, its focus is on defining the complex dialogues that occur between people and interactive devices of many types—from computers to mobile communications devices to appliances
  • 5. MENSCHEN INTERACTION DESIGN DATEN Grafik: „Designing the Obvious“ by Robert Hoekman, Jr.
  • 6. INTERACTION DESIGN Verdeutlicht die Funktion und Interaktivität eines Systems
  • 7. INTERACTION DESIGN Definiert das Verhalten des Systems in Bezug auf Nutzer-Eingaben
  • 8. INTERACTION DESIGN Legt einfache und komplexe Arbeitsschritte offen.
  • 9. INTERACTION DESIGN Informiert den Nutzer jederzeit über den Zustand des Systems.
  • 11. WIE?
  • 12. Ansatz Überblick Nutzer Designer Konzentration auf die begleitet das Übersetzt User Centered Ziele und Bedürfnisse Design Bedürfnisse und Design der Nutzer Ziele des Nutzers Konzentration auf die führt die erstellt die Activity Centered auszuführenden Aktivitäten aus Artifakte zur Design Aktivitäten und Durchführung der Aktionen. Aktionen Verläßt sich auf die validiert das ist die Quelle der Fähigkeiten und das Design Inspiration. Genius Design Wissen von erfahrenen Designern Tabelle aus „Designing for Interaction“ by Dan Saffer
  • 13. Ansatz Überblick Nutzer Designer Konzentration auf die begleitet das Übersetzt User Centered Ziele und Bedürfnisse Design Bedürfnisse und Design der Nutzer Ziele des Nutzers Konzentration auf die führt die erstellt die Activity Centered auszuführenden Aktivitäten aus Artifakte zur Design Aktivitäten und Durchführung der Aktionen. Aktionen Verläßt sich auf die validiert das ist die Quelle der Fähigkeiten und das Design Inspiration. Genius Design Wissen von erfahrenen Designern Tabelle aus „Designing for Interaction“ by Dan Saffer
  • 14. Ansatz Überblick Nutzer Designer Konzentration auf die begleitet das Übersetzt User Centered Ziele und Bedürfnisse Design Bedürfnisse und Design der Nutzer Ziele des Nutzers Konzentration auf die führt die erstellt die Activity Centered auszuführenden Aktivitäten aus Artifakte zur Design Aktivitäten und Durchführung der Aktionen. Aktionen Verläßt sich auf die validiert das ist die Quelle der Fähigkeiten und das Design Inspiration. Genius Design Wissen von erfahrenen Designern Tabelle aus „Designing for Interaction“ by Dan Saffer
  • 15. Ansatz Überblick Nutzer Designer Konzentration auf die begleitet das Übersetzt User Centered Ziele und Bedürfnisse Design Bedürfnisse und Design der Nutzer Ziele des Nutzers Konzentration auf die führt die erstellt die Activity Centered auszuführenden Aktivitäten aus Artifakte zur Design Aktivitäten und Durchführung der Aktionen. Aktionen Verläßt sich auf die validiert das ist die Quelle der Fähigkeiten und das Design Inspiration. Genius Design Wissen von erfahrenen Designern Tabelle aus „Designing for Interaction“ by Dan Saffer
  • 16. USER CENTERED DESIGN: „DU BIST NICHT DER NUTZER.“
  • 17. 360° Sicht Synthese Konzeption Validierung ite ra t i ve s t e s t e n
  • 19. 360° Sicht METHODEN - Konkurrenzanalyse - Mystery Shopping - Beobachtung - Interviews - Analogiestudien - Fokusgruppen - Fragebögen
  • 20. 360° Sicht BEOBACHTUNG - Verständnis für den Alltag des Endnutzers entwickeln - Interviews und Erzählungen sind nur Darstellungen über diesen Alltag - bestimmte Handlungsweisen sind nur der Beobachtung zugänglich
  • 21.
  • 23. 360° Sicht LEITFRAGEN - In was für einer Umwelt bewegt sich die Person? - Was für Aufgaben möchte diese Person ausführen? - Welche Hilfsmittel werden dabei benutzt? - Welche Probleme sind erkennbar?
  • 24. Synthese Sinnvolle Auswertung der Daten aus dem User Research
  • 25. Synthese - Was hat man über den Nutzer gelernt? - Welche Anforderungen und Bedürfnisse existieren? - Wie ist der Nutzer vorgegangen? - Welche Hilfsmittel hat der Nutzer evtl. benötigt? - Wo gibt es Probleme?
  • 26. Synthese ERGEBNISSE DER SYNTHESE - Personas - Use Cases - Scenarios - Flow Charts - (weitere)
  • 28. Konzeption Ideenfindung und Prototyping für das Anwendungsszenario
  • 29. „Ich glaube nicht, dass Kreativität die Gabe einer guten Fee ist.” Edward de Bono – Erfinder des 6-Hüte-Denkens
  • 30. Konzeption KREATIVMETHODEN - Methode 6-3-5 - 6 Hüte Denken - Brainstorming - Storyboards - Collective Notebook - (weitere)
  • 31. Konzeption BRAINSTORMING - „using the brain to storm a problem“ - Schnell viele Ideen entwickeln in kurzer Zeit - Ungewöhnliche Alternativen finden - Mitarbeiter, Laien oder Experten - auch andere Fachgebiete können teilnehmen
  • 32. Konzeption WIE BRAINSTORMEN? - Fokus: identifizierte Probleme aus der Beobachtung - Lösungsansätze/ Ideen auf Post-Its notieren in Worten oder Skizzen etc. - Jeder stellt nacheinander dem Team seine Ideen vor - Darauf aubauend ggfs. weitere Lösungsansätze entwickeln - Ideen gruppieren und relevante Cluster festlegen
  • 34. Konzeption REGELN - Keine Kritik - Verrückte Ideen fördern - Auf anderen Ideen aufbauen - Das Problem im Auge behalten - Ausreden lassen - Anschaulich erklären - Je mehr Ideen, desto besser
  • 35. Konzeption RAPID PROTOTYPING - Schnell und kostengünstig - Erste Ideen visualisieren und kommunizieren - Ermöglicht frühzeitiges Feedback zu Lösungvorschlägen und Konzepten - Geringes Risiko von Fehlentwicklungen durch häufige und zeitnahe Validierung
  • 36. Konzeption RAPID PROTOTYPING TECHNIKEN - Papierprototypen - Wireframes - Story boards - 3D Modelle - Ablaufdiagramme - Screens
  • 37.
  • 38.
  • 39.
  • 43. BUCH- UND LINKLISTE Books. - Designing the Moment, Robert Hoekman, Jr - Designing the Obvious, Robert Hoekman, Jr - Designing Interaction, Dan Saffer - The Art of Innovation, Tom Kelley Links. - Interaction Design Association, www.gamma.ixda.org - Grundsätze des Interaction Designs, http://meiert.com/de/publications/translations/asktog.com/firstprinciples/ - Apple User Interface Guidelines, http://developer.apple.com/documentation/UserExperience/Conceptual/ AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html#//apple_ref/doc/uid/TP30000894-DontLinkElementID_323 - Don Norman: Human-Centered Design Considered Harmful, http://jnd.org/dn.mss/human-centered.html - ISO Definition von UCD (Human Centered Design): http://usabilityprofessionals.org/usability_resources/about_usability/ what_is_ucd.html - Video: Das UX Design Development von Office 2007: http://msstudios.vo.llnwd.net/o21/mix08/08_WMVs/UX09.wmv
  • 44. Vielen Dank! WUNSCHFELD Interaction Design Dirk J. Platzek Nadine Dannert info@wunschfeld.net nadine.dannert@d-labs.com www.wunschfeld.net www.d-labs.com 040 429 18 772 0331 979 92 316