Crafting 3D User Interfaces for the Web Mikko Mononen May 16th 2012 –Webshaped 2012

• 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

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!

Agenda 1. World & Constraints 2. Expectations 3. Meta

How does 2D look in 3D?

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

Perspective Perspective projected 3D space is truncated pyramid Ortho Perspective

Moving 2D Object with 1D Mouse

1. We could slide along wall

2. ...or along bumpy surface

3. The object could be connected to an arm

4. The object could contain extra arms to allow pulling.

5. We could rotate the view and reuse our existing knowledge

• 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

Point-and-click

Spore Editor

World Structure Environment Environment Object Action Point Action Point Proxy Object Proxy Relates Constrains

Constraints Curve 1D Plane 2D Surface 3D

Circle, Sphere & Surface constraints to orient an organ.

Plane constraint to position spine.

Surface & screen constraints to position limbs.

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

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)

1. World & Constraints 2. Expectations 3. Meta Expectations

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

Fantasy of Familiar in Games

Zen Bound

Tinkercad

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

1. World & Constraints 2. Expectations 3. Meta Meta

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

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)

Tinkercad lesson for view manipulation

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

Tinkercad is hiring! @MikkoMononen mikko@tinkercad.com