Crafting 3D User Interfaces for the Web

Presentation about the basics of building tactile and easy to use and learn 3D user interfaces presented at Webshaped 2012 in Helsinki.

Transcript

1. Crafting 3D User Interfaces for the Web Mikko Mononen May 16th 2012 –Webshaped 2012
2. • Co-founder, Programmer–Design at Tinkercad • Formely games dude specialized in AI • Crysis1, Zen Bound, Killzone3, Recast & Detour • Tinkercad is 3D modeling tool for artist, makers, and tinkers alike, that let’s you design 3D printable items online @MikkoMononen mikko@tinkercad.com
3. Motivation • WebGL is here, great platform to create 3D content • Designing 3D UIs has been relatively niche field up until now • Very few resources on how to design 3D interfaces • Despite 3D games & tools, majority of users has not had exposure to 3D UIs • once they get past the threshold they are all thrilled!
4. Agenda 1. World & Constraints 2. Expectations 3. Meta
5. How does 2D look in 3D?
6. How does 1D look in 2D? nD point can be thought as segment in (n+1)D view 0D to 1D 1D to 2D 2D to 3D
7. Perspective Perspective projected 3D space is truncated pyramid Ortho Perspective
8. Moving 2D Object with 1D Mouse
9. 1. We could slide along wall
10. 2. ...or along bumpy surface
11. 3. The object could be connected to an arm
12. 4. The object could contain extra arms to allow pulling.
13. 5. We could rotate the view and reuse our existing knowledge
14. • There is no single solution on how to map 2D to 3D • One situation can have many solutions and assumptions • Need to compensate for the limited input device • Need to gradually teach the user how the UI works The Problem
15. Point-and-click
16. Spore Editor
17. World Structure Environment Environment Object Action Point Action Point Proxy Object Proxy Relates Constrains
18. Constraints Curve 1D Plane 2D Surface 3D
19. Circle, Sphere & Surface constraints to orient an organ.
20. Plane constraint to position spine.
21. Surface & screen constraints to position limbs.
22. World • World structure • world – where things are (frame of reference) • objects – things that belong to world (primary point of action) • proxy objects – augments objects (secondary point of action) • each action point has one constrain the user can manipulate • can be changed by modality (i.e. move, scale, rotate tools) • user learns to interact with the world through discovery Environment Object Action Point Action Point Proxy Relates Constrains
23. Tactile • Build illusion of solid world the user can “feel” • When the user moves the pointer perfectly along the constraint, the pointer should stick to the object • If possible use animation and simulation to enforce the weight and feel of the object (i.e. inertia)
24. 1. World & Constraints 2. Expectations 3. Meta Expectations
25. Expectations • Prior knowledge is good tool to bootstrap learning • Fantasy of Familiar is a game design concept to set expectations 1. use existing knowledge to set expectations 2. enforce expectations via visual cues and feedback 3. build foreign concepts on top of that once the user learns the limits
26. Fantasy of Familiar in Games
27. Zen Bound
28. Tinkercad
29. Fantasy of Familiar • Related skeuomorphs, but does not aim to be realistic • Use visual cues to hint how the world behaves • Enforce it through feedback on primary actions • Build upon learned behaviors • Use secondary actions and proxy objects to augment primary actions
30. 1. World & Constraints 2. Expectations 3. Meta Meta
31. Meta • Meta level contains the world attributes that are not visible • Primary and secondary action points can get crowded • Use modality to organize cognitive load • Tools and selections are common way to limit action points • Be aware adds extra layer to learn and to explain • If you need modes, try to have one that allows to learn the basics
32. Meta – View • People freak out when you need to use a tool to change the direction of your head • Try to limit how often camera needs to be used early one (experts need it!) • Teach it gradually, first using safe clumsy controls • FarmVille has taught users to deal with one kind of view/camera manipulation • Make view manipulation something that happens automatically (i.e. right mouse button)
33. Tinkercad lesson for view manipulation
34. Summing it up • Use Fantasy of familiar to build expectations • Use constraints to make 3D problems 2D • Use primary object interaction to enforce fantasy • Use secondary handles to do the rest direct manipulation • Use modality to simplify • Be aware of the meta
35. Tinkercad is hiring! @MikkoMononen mikko@tinkercad.com