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

HCII 2014 Interface Design Methods for novel Interactive Systems

Revisiting Graspable User InterfacesA Design Process for Developing User Interface MetaphorsTHU, 26 JUNE 2014

Chair of Media Design

Technische Universität DresdenMandy Keck, Esther Lapczyna, Prof. Rainer Groh

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

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


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


Operation MetaphorFunctional MetaphorProcess Metaphor

Element Metaphor


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


Immersion

Form of Interaction

Visualization Technologies

Navigation

Metaphor

Orientating Eye – cross hair

Orientating


Method

Model Generation

varation artistic operations

Layout Algorithm

graphs of order

systematizationof the structure

visual grammar

elements, relations,pattern

narrative + functional structure

AN

ALY

SIS

Abs

trac

tion

SYN

THES

IS

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)»


Gestalt- and Problem Analysis


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 explore Table (BRADE et al. 2011)


Gestalt Analysis II (SOURCE DOMAIN)


Problem Analysis (TARGET DOMAIN)


Model Generation & Fusion


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)


Prototyping

×


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


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)


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

ReferencesBARR, 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)

Table of FiguresFig. 01 explore 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

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

Design

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