SLIDE 1
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.
Designing Screen Based Interactions Manipulating Metaphor Problem - - PowerPoint PPT Presentation
Designing Screen Based Interactions Manipulating Metaphor Problem - - PowerPoint PPT Presentation
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
SLIDE 2
SLIDE 3
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.
SLIDE 4
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”.
SLIDE 5
What does an interactive designer do?
SLIDE 6
WHAT IS THE STATE OF THE SYSTEM? WHAT CAN THE USER DO?
SLIDE 7
PROCESS HAS NOT BEGUN START PROCESS
START
SLIDE 8
ENTITY SELECTED SELECT DIFFERENT ENTITY
SLIDE 9
ENTITY SELECTED ADJUST DIMENSIONS
SLIDE 10
SOME VALUE = 50% ADJUST VALUE
SLIDE 11
12:00 ADJUST HOUR
SLIDE 12
12:00 ADJUST HOUR
Model View
SLIDE 13
What does an interactive designer do? 1) Visualize data and functionality.
SLIDE 14
Varying communication of the same model. “Human Clock”
SLIDE 15
Varying communication of the same functionality “Don’t Shoot the Puppy”
SLIDE 16
CURRENT TEMPERATURE SET DESIRED TEMPERATURE
View Model
(start designing!)
SLIDE 17
“Super Chill air conditioners are great!” ????
View Model ?!
SLIDE 18
“Super Chill air conditioners are great!”
SLIDE 19
“Super Chill air conditioners are great!” ...and 200 facts about them...
SLIDE 20
View Model ]
? ? “Super Chill air conditioners are great!” ...and 200 facts about them...
Message
SLIDE 21
Without a model, where does an interactive designer start? Metaphor
SLIDE 22
PAGE BUTTON MENU FOLDER WINDOW TAB SLIDER SCROLL BAR ...
Option A: Readymade Interactive Metaphors:
SLIDE 23
View Model
CURRENT PAGE GOTO NEXT/PREVIOUS PAGE (start designing!)
SLIDE 24
(Nada)
Option B: Metaphor Building Blocks?
SLIDE 25
SLIDE 26
SQUARE SIZE, POSITION, ROTATION, COLOR, TEXTURE
Model:
SLIDE 27
RECTANGLE WIDTH, HEIGHT, POSITION, ROTATION, COLOR, TEXTURE
Model:
SLIDE 28
CUBE, FROM ONE SIDE SIZE, XYZ POSITION, HPB ROTATION, COLOR, TEXTURE
Model:
SLIDE 29
COLLECTION OF PIXELS NUMBER OF PIXELS, COLOR OF EACH PIXEL, LOCATION OF EACH PIXEL
Model:
SLIDE 30
HOLE IN THE PAGE SIZE, DEPTH
Model:
SLIDE 31
SKYLIGHT IN A LIT ROOM AT NIGHT TIME OF DAY, CLOUD COVER, STAR VISIBILITY, SUN & MOON VISIBILITY
Model:
SLIDE 32
MASCULINITY DARKNESS, EDGE DEFINITION, ROUNDNESS?...
Model:
SLIDE 33
modeling
model { width = 100 height = 100 color = 0x000000 x = 0 y = 0 rotation = 0 }
RECTANGLE METAPHOR
SLIDE 34
mapping
model { width = mouseX height = mouseY color = 0x000000 x = 0 y = 0 rotation = 0 }
RECTANGLE METAPHOR
SLIDE 35
Switching Models, Re-mapping input “This is the Only Level ”
SLIDE 36
What does an interactive designer do? 1) Visualize data and functionality. 2) Create and model metaphors
SLIDE 37
Manipulating Metaphors
Nothing stops metaphors from overlapping, changing, or being nested inside
- ne another.
SLIDE 38
CONNECTED OBJECTS COLLECTION OF OBJECTS
HEIGHT HEIGHT OF ARRANGEMENT
SLIDE 39
CONNECTED OBJECTS COLLECTION OF OBJECTS
HEIGHT HEIGHT OF ARRANGEMENT
SLIDE 40
(AS) COLLECTION OF OBJECTS
HEIGHT OF ARRANGEMENT
SLIDE 41
(AS) COLLECTION OF OBJECTS
HEIGHT OF ARRANGEMENT
SLIDE 42
(AS) CONNECTED OBJECTS
HEIGHT
SLIDE 43
(AS) CONNECTED OBJECTS
HEIGHT
SLIDE 44
(AS) COLLECTION OF OBJECTS
HEIGHT OF ARRANGEMENT
SLIDE 45
(AS) COLLECTION OF OBJECTS
HEIGHT OF ARRANGEMENT
SLIDE 46
Visualizing data and functionality ...including the potential functionality of other available metaphors.
SLIDE 47
Switching Metaphors “Fez”
SLIDE 48
“Interactive Hand” Simultaneous manipulation of variables from two separate metaphors
SLIDE 49
Switching Metaphors “Okami”
SLIDE 50
Switching Metaphors “Interactive figure/ground”
SLIDE 51
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)