presentation @ HCI International 2014 – Interface Design Methods for novel Interactive Systems 26 JUNE 2014 – Crete, Greece

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. 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. 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. 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. 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. 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. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 7 | 18
Gestalt- and Problem Analysis

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. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 9 | 18
Gestalt Analysis II (SOURCE DOMAIN)

10. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 10 | 18
Problem Analysis (TARGET DOMAIN)

11. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 11 | 18
Model Generation & Fusion

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. HCII 2014 26 June 2014 Mandy Keck, Esther Lapczyna, Prof. Rainer Groh 13 | 18
Prototyping
×

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. 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. 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. 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. 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