© 1996Microsoft2
what I’m going to talk about
• design methodology
• specific example
– requirements
– initial design
– problems
– answers?
• conclusion
© 1996Microsoft3
general design methodology
• stay pure -- at first
• don’t discard ideas in your head
• make storyboards and prototypes
• push prototypes to the limit
• learn from language
© 1996Microsoft4
the role of language
• use different modes of representation as yardsticks
• “solved” in visuals <> solved in words
• “solved” in words <> solved in visuals
© 1996Microsoft5
storyboards and prototypes
• don’t wait too long to try out target medium -- understand limitations
– resolvability
– graspability
– discoverability
• ink has infinite resolution, CRTs don’t
• make a super complicated example -- note problems
3D specific information
© 1996Microsoft7
design methodology for 3D
• metaphors are very important
• listen to people’s words and watch their hands
• almost every task requires CREATE, EDIT, & VISUALIZE
© 1996Microsoft8
language and metaphors for 3D
• language of practitioners
• children
• physical activities
• NATURE, RELIGION, THE MACHINE
• ART
steal from: steal from:
© 1996Microsoft9
guidelines for 3D
• how many clicks does it take?
• combine related user actions
• combine related parameters
• distinguish UI from data
• combine UI and data
• show cause-and-effect
• be aware of available “channels”
don’t be afraid of don’t be afraid of contradictionscontradictions
{{
© 1996Microsoft10
available channels for 3D
• animation
– “if it’s in the way, make it go away”
• rendering style
– how to distinguish things
• screen aligned elements
• 2D primitives
• abstraction
© 1996Microsoft11
iconographic iconographic widgets for widgets for rotating a rotating a barn-doorbarn-door
animation
animated animated ghosted ghosted objects on objects on mouse-overmouse-over
© 1996Microsoft12
rendering style
shaded shaded translation translation handleshandles
transparent transparent translation translation handleshandles
wireframe wireframe translation translation handleshandles
© 1996Microsoft13
abstraction
overly overly realistic?realistic?
abstract while abstract while staticstatic
theater lighting designer
initial sketches
© 1996Microsoft16
director’s view
leave some leave some questions questions unansweredunanswered
© 1996Microsoft17
catwalk view
annotate annotate those those drawings!drawings!
slick drawings
© 1996Microsoft19
initial mockup
AA 10:24:13BB CC DD EE
does transparency work for does transparency work for the panels?the panels?
© 1996Microsoft20
problems!
• UI fades into background
• might not be feasible
© 1996Microsoft21
answer?
AA BB CC DD EE FF MM 10:24:13
© 1996Microsoft22
audience view
© 1996Microsoft23
stage with simple set
AA BB CC DD EE FF MM 10:24:13
© 1996Microsoft24
stage with simple set and lights
AA BB CC DD EE FF MM 10:24:13
© 1996Microsoft25
catwalk view with simple set
AA BB CC DD EE FF MM 10:24:13
look from abovelook from above
© 1996Microsoft26
catwalk view with simple set and minimal lights
AA BB CC DD EE FF MM 10:24:13
© 1996Microsoft27
catwalk view with simple set and complex lights
AA BB CC DD EE FF MM 10:24:13
© 1996Microsoft28
questions from mockups
• Q: perspective or orthographic?
• Q: freeform or constrained creation?
– number of lights?
– placement of lights?
• Q: do we need collision detection during manipulation?
• Q: “reports” to the user
animated storyboards
general UI
© 1996Microsoft31panel automatically slides up and panel automatically slides up and
down to maximize screen space down to maximize screen space
main control panel
AA BB CC DD EE FF MM 10:24:1320:00:0030:00:0040:00:0050:00:00
director viewcatwalk viewaudience view
© 1996Microsoft32
object creation and editing panel
AA BB CC DD EE FF MM 10:24:1350:00:00
panel automatically slides in panel automatically slides in and out to maximize screen and out to maximize screen spacespace
sets
lights
storage
© 1996Microsoft33
view changes
give feedback during changegive feedback during change
© 1996Microsoft34
problems!
• still difficult to know where view is from if user is new to application
© 1996Microsoft35
give feedback during changegive feedback during change
answers?
creation
© 1996Microsoft37
annotated dragging
AA BB CC DD EE FF MM 10:24:13
valid “drop” sites valid “drop” sites and resultant and resultant illuminated areas illuminated areas are highlighted as are highlighted as light is dragged light is dragged
© 1996Microsoft38
simple set pieces
AA BB CC DD EE FF MM 10:24:13
newly created newly created objects base objects base themselves on themselves on previously previously created objects created objects
© 1996Microsoft39
problems!
• hard to gauge location in perspective view
• no quantitative information
• hard to create things behind other things
© 1996Microsoft40
answers?
projection lines to projection lines to temporary rulers temporary rulers during (and only during (and only during) creationduring) creation
11 22 33 44 55 66 77 88 99 1010 1111
2233
44
55
11
55
44
33
22
11
© 1996Microsoft41
more answers?
if user starts to click if user starts to click behind another object, behind another object, “x-ray” the front object “x-ray” the front object
editing
© 1996Microsoft43
changing lights from director’s view
just grab the damn just grab the damn light and rotate it!light and rotate it!
© 1996Microsoft44
problems!
• virtual sphere is not matched to domain task
• too “freeform”
• no precision
© 1996Microsoft45
magnified control magnified control handleshandles
answers?
© 1996Microsoft46
but it still sucks
• too bulky
• “etch-a-sketch” syndrome
© 1996Microsoft47
answer: let user directly change “result”
moving the moving the highlight changes highlight changes the lightthe light
© 1996Microsoft48
can this style of UI help color-picking?
standard color-standard color-picker is not in-picker is not in-contextcontext
Color Picker ?
CancelCancelApplyApply
128
36
200
try out what try out what practitioners use?practitioners use?
diminish all but diminish all but color of interestcolor of interest
put it in 3D to put it in 3D to allow better allow better navigationnavigation
© 1996Microsoft49
design 1: design 1: jukeboxjukebox
but how can we pick colors in context?
© 1996Microsoft50
can we make it better?
design 2: design 2: puzzle stripspuzzle strips
visualization
© 1996Microsoft52
understanding which light is which
AA BB CC DD EE FF MM 10:24:13
change a light change a light and see what and see what it does?it does?
© 1996Microsoft53
problems!
• requires user to change their data
• still hard to resolve affect of one light
© 1996Microsoft54
answers?
multiple representations: multiple representations: waving mouse over light waving mouse over light highlights effecthighlights effect
© 1996Microsoft55
still problems!
• would take forever if there are many lights
• overly complex
• back to multiple views from CAD world
© 1996Microsoft56
the answer?
highlight zones highlight zones centered on light centered on light unitunit
© 1996Microsoft57
the answer?highlight zones highlight zones centered on centered on highlighthighlight
© 1996Microsoft58
selection
so many objects!so many objects!
© 1996Microsoft59
problems!
• too difficult to pick the desired object
© 1996Microsoft60
answers?
exaggerate possible exaggerate possible selections!selections!
© 1996Microsoft61
parting words
• “pure” direct-manipulation does not always work
• difficult to make a UI scale up
• conflict between direct-manipulation and precision
• imperative to have a target application/audience!
hard hard problems!problems!
endendendend
Top Related