2. Practical 3D User Interface Design Dan Robbins dcr@microsoft.com © 1996 Microsoft

3. 2 what Im going to talk about design methodology specific example –requirements –initial design –problems –answers? conclusion

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

5. © 1996 Microsoft 4 the role of language use different modes of representation as yardsticks solved in visuals <> solved in words solved in words <> solved in visuals

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

7. 3D specific information

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

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:

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 {

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

12. © 1996 Microsoft 11 iconographi c widgets for rotating a barn-door animation animated ghosted objects on mouse-over

13. © 1996 Microsoft 12 rendering style shaded translation handles transparent translation handles wireframe translation handles

14. © 1996 Microsoft 13 abstraction overly realistic? abstract while static

15. theater lighting designer

16. initial sketches

17. © 1996 Microsoft 16 directors view leave some questions unanswered

18. © 1996 Microsoft 17 catwalk view annotate those drawings!

19. slick drawings

20. © 1996 Microsoft 19 initial mockup A 10:24:13 BCDE does transparency work for the panels?

21. © 1996 Microsoft 20 problems! UI fades into background might not be feasible

22. © 1996 Microsoft 21 answer? ABCDEFM 10:24:13

23. © 1996 Microsoft 22 audience view

24. © 1996 Microsoft 23 stage with simple set ABCDEFM 10:24:13

25. © 1996 Microsoft 24 stage with simple set and lights ABCDEFM 10:24:13

26. © 1996 Microsoft 25 catwalk view with simple set ABCDEFM 10:24:13 look from above

27. © 1996 Microsoft 26 catwalk view with simple set and minimal lights ABCDEFM 10:24:13

28. © 1996 Microsoft 27 catwalk view with simple set and complex lights ABCDEFM 10:24:13

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

30. animated storyboards

31. general UI

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

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

34. © 1996 Microsoft 33 view changes give feedback during change

35. © 1996 Microsoft 34 problems! still difficult to know where view is from if user is new to application

36. © 1996 Microsoft 35 give feedback during change answers?

37. creation

38. © 1996 Microsoft 37 annotated dragging ABCDEFM 10:24:13 valid drop sites and resultant illuminated areas are highlighted as light is dragged

39. © 1996 Microsoft 38 simple set pieces ABCDEFM 10:24:13 newly created objects base themselves on previously created objects

40. © 1996 Microsoft 39 problems! hard to gauge location in perspective view no quantitative information hard to create things behind other things

41. © 1996 Microsoft 40 answers? projection lines to temporary rulers during (and only during) creation 1234567891011 2 3 4 5 1 54321

42. © 1996 Microsoft 41 more answers? if user starts to click behind another object, x-ray the front object

43. editing

44. © 1996 Microsoft 43 changing lights from directors view just grab the damn light and rotate it!

45. © 1996 Microsoft 44 problems! virtual sphere is not matched to domain task too freeform no precision

46. © 1996 Microsoft 45 magnified control handles answers?

47. © 1996 Microsoft 46 but it still sucks too bulky etch-a-sketch syndrome

48. © 1996 Microsoft 47 answer: let user directly change result moving the highlight changes the light

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

50. © 1996 Microsoft 49 design 1: jukebox but how can we pick colors in context?

51. © 1996 Microsoft 50 can we make it better? design 2: puzzle strips

52. visualization

53. © 1996 Microsoft 52 understanding which light is which ABCDEFM 10:24:13 change a light and see what it does?

54. © 1996 Microsoft 53 problems! requires user to change their data still hard to resolve affect of one light

55. © 1996 Microsoft 54 answers? multiple representations: waving mouse over light highlights effect

56. © 1996 Microsoft 55 still problems! would take forever if there are many lights overly complex back to multiple views from CAD world

57. © 1996 Microsoft 56 the answer? highlight zones centered on light unit

58. © 1996 Microsoft 57 the answer? highlight zones centered on highlight

59. © 1996 Microsoft 58 selection so many objects!

60. © 1996 Microsoft 59 problems! too difficult to pick the desired object

61. © 1996 Microsoft 60 answers? exaggerate possible selections!

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!

63. end