Practical 3D User Interface Design Dan Robbins [email protected] © 1996 Microsoft.

Practical3D User Interface Design

Dan Robbins

[email protected]

© 1996Microsoft

© 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


© 1996Microsoft24

stage with simple set and lights


© 1996Microsoft25

catwalk view with simple set


look from abovelook from above

© 1996Microsoft26

catwalk view with simple set and minimal lights


© 1996Microsoft27

catwalk view with simple set and complex lights


© 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


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


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!

© 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

visualization

© 1996Microsoft52

understanding which light is which


change a light change a light and see what and see what it does?it does?

© 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

© 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

Practical 3D User Interface Design Dan Robbins [email protected] © 1996 Microsoft.

Documents

Transcript of Practical 3D User Interface Design Dan Robbins [email protected] © 1996 Microsoft.