Practical 3D User Interface Design Dan Robbins dcr@ © 1996 Microsoft

download Practical 3D User Interface Design Dan Robbins dcr@  © 1996 Microsoft

of 62

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Practical 3D User Interface Design Dan Robbins dcr@ © 1996 Microsoft

  • Slide 1

Slide 2 Practical 3D User Interface Design Dan Robbins 1996 Microsoft Slide 3 2 what Im going to talk about design methodology specific example requirements initial design problems answers? conclusion Slide 4 1996 Microsoft 3 general design methodology stay pure -- at first dont discard ideas in your head make storyboards and prototypes push prototypes to the limit learn from language Slide 5 1996 Microsoft 4 the role of language use different modes of representation as yardsticks solved in visualssolved in words solved in wordssolved in visuals Slide 6 1996 Microsoft 5 storyboards and prototypes dont wait too long to try out target medium -- understand limitations resolvability graspability discoverability ink has infinite resolution, CRTs dont make a super complicated example -- note problems Slide 7 3D specific information Slide 8 1996 Microsoft 7 design methodology for 3D metaphors are very important listen to peoples words and watch their hands almost every task requires C REATE, E DIT, & V ISUALIZE Slide 9 1996 Microsoft 8 language and metaphors for 3D language of practitioners children physical activities N ATURE, R ELIGION, THE M ACHINE A RT steal from: Slide 10 1996 Microsoft 9 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 dont be afraid of contradictions { Slide 11 1996 Microsoft 10 available channels for 3D animation if its in the way, make it go away rendering style how to distinguish things screen aligned elements 2D primitives abstraction Slide 12 1996 Microsoft 11 iconographi c widgets for rotating a barn-door animation animated ghosted objects on mouse-over Slide 13 1996 Microsoft 12 rendering style shaded translation handles transparent translation handles wireframe translation handles Slide 14 1996 Microsoft 13 abstraction overly realistic? abstract while static Slide 15 theater lighting designer Slide 16 initial sketches Slide 17 1996 Microsoft 16 directors view leave some questions unanswered Slide 18 1996 Microsoft 17 catwalk view annotate those drawings! Slide 19 slick drawings Slide 20 1996 Microsoft 19 initial mockup A 10:24:13 BCDE does transparency work for the panels? Slide 21 1996 Microsoft 20 problems! UI fades into background might not be feasible Slide 22 1996 Microsoft 21 answer? ABCDEFM 10:24:13 Slide 23 1996 Microsoft 22 audience view Slide 24 1996 Microsoft 23 stage with simple set ABCDEFM 10:24:13 Slide 25 1996 Microsoft 24 stage with simple set and lights ABCDEFM 10:24:13 Slide 26 1996 Microsoft 25 catwalk view with simple set ABCDEFM 10:24:13 look from above Slide 27 1996 Microsoft 26 catwalk view with simple set and minimal lights ABCDEFM 10:24:13 Slide 28 1996 Microsoft 27 catwalk view with simple set and complex lights ABCDEFM 10:24:13 Slide 29 1996 Microsoft 28 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 Slide 30 animated storyboards Slide 31 general UI Slide 32 1996 Microsoft 31 panel automatically slides up and down to maximize screen space main control panel ABCDEFM 10:24:13 20:00:0030:00:0040:00:0050:00:00 director viewcatwalk viewaudience view Slide 33 1996 Microsoft 32 object creation and editing panel ABCDEFM 10:24:13 50:00:00 panel automatically slides in and out to maximize screen space setslightsstorage Slide 34 1996 Microsoft 33 view changes give feedback during change Slide 35 1996 Microsoft 34 problems! still difficult to know where view is from if user is new to application Slide 36 1996 Microsoft 35 give feedback during change answers? Slide 37 creation Slide 38 1996 Microsoft 37 annotated dragging ABCDEFM 10:24:13 valid drop sites and resultant illuminated areas are highlighted as light is dragged Slide 39 1996 Microsoft 38 simple set pieces ABCDEFM 10:24:13 newly created objects base themselves on previously created objects Slide 40 1996 Microsoft 39 problems! hard to gauge location in perspective view no quantitative information hard to create things behind other things Slide 41 1996 Microsoft 40 answers? projection lines to temporary rulers during (and only during) creation 1234567891011 2 3 4 5 1 54321 Slide 42 1996 Microsoft 41 more answers? if user starts to click behind another object, x-ray the front object Slide 43 editing Slide 44 1996 Microsoft 43 changing lights from directors view just grab the damn light and rotate it! Slide 45 1996 Microsoft 44 problems! virtual sphere is not matched to domain task too freeform no precision Slide 46 1996 Microsoft 45 magnified control handles answers? Slide 47 1996 Microsoft 46 but it still sucks too bulky etch-a-sketch syndrome Slide 48 1996 Microsoft 47 answer: let user directly change result moving the highlight changes the light Slide 49 1996 Microsoft 48 can this style of UI help color-picking? standard color-picker is not in-context Color Picker ? CancelApply 128 36 200 try out what practitioners use? diminish all but color of interest put it in 3D to allow better navigation Slide 50 1996 Microsoft 49 design 1: jukebox but how can we pick colors in context? Slide 51 1996 Microsoft 50 can we make it better? design 2: puzzle strips Slide 52 visualization Slide 53 1996 Microsoft 52 understanding which light is which ABCDEFM 10:24:13 change a light and see what it does? Slide 54 1996 Microsoft 53 problems! requires user to change their data still hard to resolve affect of one light Slide 55 1996 Microsoft 54 answers? multiple representations: waving mouse over light highlights effect Slide 56 1996 Microsoft 55 still problems! would take forever if there are many lights overly complex back to multiple views from CAD world Slide 57 1996 Microsoft 56 the answer? highlight zones centered on light unit Slide 58 1996 Microsoft 57 the answer? highlight zones centered on highlight Slide 59 1996 Microsoft 58 selection so many objects! Slide 60 1996 Microsoft 59 problems! too difficult to pick the desired object Slide 61 1996 Microsoft 60 answers? exaggerate possible selections! Slide 62 1996 Microsoft 61 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 problems! Slide 63 end