Designing Screen Based Interactions Manipulating Metaphor
Problem Interactive design involves working with immaterial aspects not just in planing or guiding the design of the final artifact (like in traditional visual communication fields) but in the actual production of the final artifact.
Goal Find – or define – a set of universal formal elements that interactive designers can use to create compelling screen based interactions. Use these findings to create a methodology (and set of tools if necessary) for practicing (focused study, not professional practice) the design of screen based interaction.
Premises Any interaction can be broken down into a number of smaller actions. Regardless of context or scale the smallest action in any activity is one of manipulation; An action where the values of two dissimilar properties are brought into alignment. As mastery of an activity may be accomplished in part by the mastery of the actions that form it, mastering the “design of small actions” seems like a good method for mastering the “design of an activity” or the “design of screen based interaction”.
What does an interactive designer do?
WHAT IS THE STATE OF THE SYSTEM? WHAT CAN THE USER DO?
PROCESS HAS NOT BEGUN START PROCESS START
ENTITY SELECTED SELECT DIFFERENT ENTITY
ENTITY SELECTED ADJUST DIMENSIONS
SOME VALUE = 50% ADJUST VALUE
12:00 ADJUST HOUR
12:00 Model ADJUST HOUR View
What does an interactive designer do? 1) Visualize data and functionality.
“Human Clock” Varying communication of the same model.
“Don’t Shoot the Puppy” Varying communication of the same functionality
CURRENT TEMPERATURE Model SET DESIRED TEMPERATURE (start designing!) View
“Super Chill air conditioners are great!” Model ?! ???? View
“Super Chill air conditioners are great!”
“Super Chill air conditioners are great!” ...and 200 facts about them...
Model ] ? Message “Super Chill air conditioners are great!” ...and 200 facts about them... ? View
Without a model, where does an interactive designer start? Metaphor
Option A: Readymade Interactive Metaphors: PAGE BUTTON MENU FOLDER WINDOW TAB SLIDER SCROLL BAR ...
CURRENT PAGE Model GOTO NEXT/PREVIOUS PAGE (start designing!) View
Option B: Metaphor Building Blocks? (Nada)
SIZE, POSITION, ROTATION, COLOR, TEXTURE Model: SQUARE
WIDTH, HEIGHT, POSITION, ROTATION, COLOR, TEXTURE Model: RECTANGLE
SIZE, XYZ POSITION, HPB ROTATION, COLOR, TEXTURE Model: CUBE, FROM ONE SIDE
Model: NUMBER OF PIXELS, COLOR OF EACH PIXEL, LOCATION OF EACH PIXEL COLLECTION OF PIXELS
SIZE, DEPTH Model: HOLE IN THE PAGE
Model: TIME OF DAY, CLOUD COVER, STAR VISIBILITY, SUN & MOON VISIBILITY SKYLIGHT IN A LIT ROOM AT NIGHT
DARKNESS, EDGE DEFINITION, ROUNDNESS?... Model: MASCULINITY
modeling RECTANGLE METAPHOR model { width = 100 height = 100 color = 0x000000 x = 0 y = 0 rotation = 0 }
mapping RECTANGLE METAPHOR model { width = mouseX height = mouseY color = 0x000000 x = 0 y = 0 rotation = 0 }
“This is the Only Level ” Switching Models, Re-mapping input
What does an interactive designer do? 1) Visualize data and functionality. 2) Create and model metaphors
Manipulating Metaphors Nothing stops metaphors from overlapping, changing, or being nested inside one another.
HEIGHT HEIGHT OF ARRANGEMENT CONNECTED COLLECTION OF OBJECTS OBJECTS
HEIGHT HEIGHT OF ARRANGEMENT CONNECTED COLLECTION OF OBJECTS OBJECTS
HEIGHT OF ARRANGEMENT (AS) COLLECTION OF OBJECTS
HEIGHT OF ARRANGEMENT (AS) COLLECTION OF OBJECTS
HEIGHT (AS) CONNECTED OBJECTS
HEIGHT (AS) CONNECTED OBJECTS
HEIGHT OF ARRANGEMENT (AS) COLLECTION OF OBJECTS
HEIGHT OF ARRANGEMENT (AS) COLLECTION OF OBJECTS
Visualizing data and functionality ...including the potential functionality of other available metaphors.
“Fez” Switching Metaphors
“Interactive Hand” Simultaneous manipulation of variables from two separate metaphors
“Okami” Switching Metaphors
“Interactive figure/ground” Switching Metaphors
Sources Humane Interface , Jeff Raskin *Software Takes Control , Lev Manovich Language of New Media , Lev Manovich Visual Thinking , Arnheim *Digital Ground , Malcolm McCullough Abstracting Craft , Malcolm McCullough Miniature Gardens ,Chaim Gingold Metaphor in Design , Dan Saffer Design of Everyday Things , Donald Norman Windows and Mirrors , Jay David Bolter and Diane Gromala “I Have No Words But I Must Design” , Gregg Costikyan “Abstract Formal Design Tools” , Doug Church Theory of Fun, Raph Koster The Art of Game Design, Jesse Schell Rules of Play, Salen & Zimmerman Designing for Interaction : Dan Saffer *(reading) **(reading list)
Recommend
More recommend
