HCII 2014  Interface Design Methods for novel Interactive Systems
Revisiting Graspable User Interfaces
A Design Process fo...
Structure
Motivation.........................................................................................................
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 3 | 18
Motivation
«The essence of metaphor is unders...
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 4 | 18
Types of User Interface Metaphors
Barr et al....
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 5 | 18
Operation Metaphor & Orientational Metaphor (...
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 6 | 18
Method
Model
Generation
varation
artistic ope...
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 7 | 18
Gestalt- and Problem Analysis
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 8 | 18
Gestalt Analysis I (SOURCE DOMAIN)
«By “exper...
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 9 | 18
Gestalt Analysis II (SOURCE DOMAIN)
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 10 | 18
Problem Analysis (TARGET DOMAIN)
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 11 | 18
Model Generation & Fusion
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 12 | 18
Model Generation & Fusion
movement grid hier...
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 13 | 18
Prototyping
×
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 14 | 18
Prototyping
Fig. 03	 Workshop Paper Prototyp...
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 15 | 18
Examples
Fig. 06	 tANGibLE (DE ALMEIDA MADEI...
HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 16 | 18
Conclusion & Outlook
__ methodological toolb...
References
BARR, P., BIDDLE, R. & NOBLE, J.: A taxonomy of user-interface metaphors. In Proceedings of the SIGCHI-NZ Sympo...
Table of Figures
Fig. 01	 ex
plore Table (Brade et al. 2011). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...
Upcoming SlideShare
Loading in …5
×

Revisiting Graspable User Interfaces: A Design Process for Developing User Interface Metaphors

625 views

Published on

presentation @ HCI International 2014 – Interface Design Methods for novel Interactive Systems

26 JUNE 2014 – Crete, Greece

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
625
On SlideShare
0
From Embeds
0
Number of Embeds
142
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Revisiting Graspable User Interfaces: A Design Process for Developing User Interface Metaphors

  1. 1. HCII 2014  Interface Design Methods for novel Interactive Systems Revisiting Graspable User Interfaces A Design Process for Developing User Interface Metaphors THU, 26 JUNE 2014 Chair of Media Design Technische Universität DresdenMandy Keck, Esther Lapczyna, Prof. Rainer Groh
  2. 2. Structure Motivation............................................................................................................................3 Types of User Interface Metaphors.....................................................................................4 Method.................................................................................................................................6 Gestalt- and Problem Analysis.............................................................................................7 Model Generation & Fusion...............................................................................................11 Prototyping.........................................................................................................................13 Examples............................................................................................................................15 Conclusion & Outlook.........................................................................................................16
  3. 3. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 3 | 18 Motivation «The essence of metaphor is understanding and experiencing one kind of thing in terms of another» (Lakoff & Johnson 1980) Metaphor
  4. 4. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 4 | 18 Types of User Interface Metaphors Barr et al. (BARR et al. 2002) Morville & Rosenfeld (MORVILLE & ROSENFELD, 2006) Groh et al. (GROH et al. 2012) Orientational Metaphor Structural Metaphor Ontological Metaphor Organizational Metaphor Orientational Metaphor Operation MetaphorFunctional MetaphorProcess Metaphor Element Metaphor
  5. 5. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 5 | 18 Operation Metaphor & Orientational Metaphor (GROH 2008) Abbildung 1: Die Interaktionsformen Operieren und OrientierenAbbildung 1: Die Interaktionsformen Operieren und Orientieren Operating Hand – magnifying glass Operating Emersion Reading, Scanning Operation Metaphor Running, Driving Orientational Metaphor Immersion Form of Interaction Visualization Technologies Navigation Metaphor Orientating Eye – cross hair Orientating
  6. 6. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 6 | 18 Method Model Generation varation artistic operations Layout Algorithm graphs of order systematization of the structure visual grammar elements, relations, pattern narrative + functional structure ANALYSIS Abstraction SYNTHESIS TARGET DOMAIN Problem Analysis SOURCE DOMAIN Gestalt Analysis methodology for user-centered functional analysis gestalt categories gestalt characteristics methodology for formal analysis Fusion to an Operation Metaphor intelligent and transparent Interface Form Meaning System Element System Module System Model Prototype Archive surplus of ideas Underlying Hypothesis «Every morphologically limited metaphor is suit­ able to every limited gestalt (in terms of an unit object with known states)»
  7. 7. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 7 | 18 Gestalt- and Problem Analysis
  8. 8. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 8 | 18 Gestalt Analysis I (SOURCE DOMAIN) «By “experiment”, we mean the process of examining a form, material, or process in a methodical yet open-ended way (LUPTON & PHILLIPS 2008:10)» Open-ended Experiments Fig. 01 ex plore Table (BRADE et al. 2011)
  9. 9. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 9 | 18 Gestalt Analysis II (SOURCE DOMAIN)
  10. 10. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 10 | 18 Problem Analysis (TARGET DOMAIN)
  11. 11. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 11 | 18 Model Generation & Fusion
  12. 12. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 12 | 18 Model Generation & Fusion movement grid hierarchyform The fusion maps a shape to a set of properties of the data structures Fig. 02 Model variations (left) and an example for a morpho- logical box (ZWICKY 1969; GERSTNER 2007) (right)
  13. 13. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 13 | 18 Prototyping ×
  14. 14. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 14 | 18 Prototyping Fig. 03 Workshop Paper Prototyping (KNÖFEL et al. 2013) Fig. 04 Stop-Motion Animation (still) Fig. 05 First ‘dynamic’ test runs with the interaction concept
  15. 15. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 15 | 18 Examples Fig. 06 tANGibLE (DE ALMEIDA MADEIRA CLEMENTE et al. 2013) Fig. 07 Depth Touch (PESCHKE et al. 2012) Fig. 08 echtScharf (KAMMER et al. 2013)
  16. 16. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 16 | 18 Conclusion & Outlook __ methodological toolbox for developing novel interfaces metaphors __ method developed with a strong focus on didactic aspects __ merges several interdisciplinary methods of the field of human-computer interaction and traditional design __ method separates the metaphor generation process into 2 subproblems: analysis and abstraction of the source domain and the target domain __ well-suited for Operation Metaphors because the experimental setup supports finding of affordances that invite to manual interaction __ Future Work: extension of methodological toolbox for Orientational Metaphor
  17. 17. References BARR, P., BIDDLE, R. & NOBLE, J.: A taxonomy of user-interface metaphors. In Proceedings of the SIGCHI-NZ Symposium on Computer-Human Interaction (CHINZ ‚02). ACM, New York, NY, USA, 25-30 (2002) BRADE, M., KAMMER, D., KECK, M., GROH, R.: Immersive Data Grasping Using the eXplore Table, Proceedings of the Fifth International Conference on Tangible, Embedded,; Embod-ied Interaction. Funchal – Portugal (2011) DE ALMEIDA MADEIRA CLEMENTE, MIRKO; HERRMANN, MARTIN; KECK, MANDY & GROH, RAINER: tANGibLE: a Smart Tangible Home Controller. In Boll, Susanne; Maaß, Susanne & Malaka, Rainer (ed.), Mensch & Computer 2013 - Workshopband. München: Oldenbourg Verlag. 523-526 (2013) GERSTNER, K.: Designing programmes. Baden: Müller (2007) GROH, R.: Vom Operieren und Orientieren – zu den Grundformen der Interaktion in 3D-Szenen. In Netsch, N.; Kranke, G.;Wölfel, C. (ed.), Industriedesign und Ingeni- eurswissenschaften. Technisches Design in Forschung, Lehre und Praxis. Dresden: S. 95-106 (2008) GROH, R., GRÜNDER, T., KECK, M.: Production of Metaphors for Graspable User Interfaces (Metaphernproduktion für Begreifbare Benutzerschnittstellen). i-com: Zeitschrift für interaktive und kooperative Medien Vol.: 11 Nr.: 2 (2012) KAMMER, D., SCHMIDT, D., KECK, M., GROH, R.: Developing Mobile Interface Metaphors and Gestures, Proceedings of the 15th international conference on Human-computer inter-action with mobile devices and services companion, MobileHCI‘13 New York, NY, USA: ACM (2013) KNÖFEL, A., KOALICK, G., LAPCZYNA, E., GROH, R.: Pimp your prototype. Proc. 5th International Scientific Conference on Print; Media Technology. Chemnitz, D: VWB - Verlag für Wissenschaft und Bildung. 131-136 (2013) MORVILLE, P. & ROSENFELD, L.: Information Architecture for the World Wide Web: Design-ing Large-Scale Web Sites, O‘Reilly Media; 3rd edition (2006) PESCHKE, J., GÖBEL, F., GRÜNDER, T., KECK, M., KAMMER, D., GROH, R.: DepthTouch: An Elastic Surface for Tangible Computing. In Proceedings of the International Working Con-ference on Advanced Visual Interfaces (S. 770–771). New York, NY, USA (2012) ZWICKY, F.: Discovery, Invention, Research Through the Morphological Approach, First american ed., MacMillan (1969)
  18. 18. Table of Figures Fig. 01 ex plore Table (Brade et al. 2011). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Fig. 02 Model variations (left) and an example for a morphological box (ZWICKY 1969; GERSTNER 2007) (right) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Fig. 03 Workshop Paper Prototyping (KNÖFEL et al. 2013). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Fig. 04 Stop-Motion Animation (still). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Fig. 05 First ‘dynamic’ test runs trough the based interaction concept. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Fig. 08 echtScharf (KAMMER et al. 2013). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Fig. 06 tANGibLE (DE ALMEIDA MADEIRA CLEMENTE et al. 2013). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Fig. 07 Depth Touch (PESCHKE et al. 2012). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

×