my background selfish tool user industrial design & sculpture design of tools motivated by my needs as a designer I prefer to work in visual realm, 3D “feels” more intuitive in some sense, 3D taps more into instinctual faculties whereas 2D uses more abstract/schematic notions this talk will use a sample application as a way to elucidate 3D UI design techniques - Theater Lighting Design constrained domain easy to gauge success
these answers are not THE solution these are ways to get ideas flowing think of this as a starting point often I will show a few alternatives general Vs.. specific I could present you with tons of general “process” guidelines BUT it is very difficult to go from abstractions of specific Instead. I take prototypical application and walk through its design hopefully specific design choices will show principles specific application should justify design choices 3D Theater Lighting Designer This assumes that you are in a product group and there is already a brief for the product set lights on poles in catwalk space import sets create simple sets run-through scenes -> preview lighting changes evaluate lighting --> refine
if you look at other people’s UIs (at first) you may be limited by them At first you should engage in free-association design, allow stream of consciousness pretend at first, that you can design the ultimate tool (ivory tower design) don’t overload each drawing -- don’t be afraid to make many drawings many simple drawings are better than few complex drawings draw out ever alternative it is too easy to discount ideas as soon as we have them if you commit an idea to “paper” you can always go back to it annotate your drawings let the annotations be your memory learn from multiple representations some things best expressed in text, some visually it is easy to be lazy when you stick with just one representation
Example words “ drag a new Light-Object from the Create-Panel into the 3D scene” Problems Q: how does the user know where in 3D they are dragging the light? Q: what happens when the user mouseUps? Answers draw a picture showing what kinds of feedback can be given during manipulation
gives you a way to judge your designs show to other people can seem “real” answer “what if” questions “ prove it” questions resolvability = can user perceive details of interface element visual = size on screen, color combinations audio = different from ambient sounds graspability = user is able to actually interact with your UI not too small discoverability = user can understand what a control does what controls/UI are for which is UI, which is data changes are apparent during and after rough Vs. finished look keeping prototypes rough can get people to focus on important aspects keeping prototypes rough may prevent developers from taking them seriously
watch people when they talk about something people often can’t articulate in words what they are doing watch what they do with their hands give them props which actions lead to temporary object relationships? ask someone find out what objects are underneath a particular object temporarily peeling back a sheet of paper Vs moving it aside listen to how they talk about it it is often difficult to come up with an abstraction at first often they use metaphorical language unconsciously “ I just want to find the object that I can’t see” - perhaps craft a UI which has that high-level feature we are used to breaking UIs down into select, cut, copy, paste, save, effects, etc. instead, we might want to step back and ask what the higher level tasks are most apps concentrate on EDIT. We need more emphasis on VISUALIZATION!
children have a way of simplifying NATURE: nature is good at expressing complexity: trees faces RELIGION: UI should inspire trust , faith that UI will do the right thing MACHINE: its a language we tend to understand buttons, levers, handles hinges signs Art
real world doesn’t require clicks CLICKS: combine related steps during Creation bind together specifying existence and position CLICKS: combine related parameters during Editing why separate X, Y, Z? We don’t separate them in the real world why separate translate and rotate?
each of these will be covered later on best to show these within context of consistent scenarios most channels are already taken color, size ANIMATION slide-ups animated cursors animated widgets - can prevent overly literal or complicated 3D icons/widgets easier to distinguish from data RENDERING DEFINE: wire, flat-shade, smooth-shade, transparency , can prevent clutter lend emphasis to different objects see through widgets to data ABSTRACTION show in place schematic to teach user more --> Visualization
THIS IS A LIGHT FROM A THEATER! don’t force users to manipulate objects to find out what the tools do the tool can be made smaller if animation is used to show function animation can even “train” users how to use tools be careful if animations are started too easily and too frequently, user will loose association between animation and object give additional feedback as to which object the animation is associated with
handles used to move object along a particular axis determination of which style to use should depend on complexity of surrounding scene realism of surrounding scene degree of motion: is user primarily watching or doing?
too abstract = hard to distinguish UI from data too abstract = too high a cognitive load in deciphering objects too realistic = users may focus on unimportant details during manipulation too realistic = too much clutter
This assumes that you are in a product group and there is already a brief for the product set lights on poles in catwalk space import sets from 3rd party app (modeler) create simple sets run-through scenes -> preview lighting changes evaluate lighting --> refine render stills w/ shadows and radiosity what it won’t do (IMPORTANT TO IDENTIFY THESE) no interpolated animation no continuous viewing changes rendering (stills) not tunable overall technology like 3D Movie Maker -> background bitmaps with embedded Z values
start to identify CUT LIST and QUESTIONS (what are consequences of adding a feature) Q: texture control over surfaces? the more constrained the space, the easier it will be to remain consistent “ any complete system must be inconsistent AND any consistent system can’t be complete” don’t worry about layout too much
some interactions questions will immediately present themselves Q: what happens when there are many lights? Q: what if we need more kinds of available lights? Q: how much “data” area will the UI cover over?
taking drawings to the next level shows you things you didn’t think of in ink
one panel (bottom) for managing lighting changes over time (intensity and scenes) one panel (right) for managing creation and non-time varying properties (gels, barndoors) maybe if UI panels are transparent they won’t obscure as much “data”? maybe transparency can set UI apart from data? what role will text play? start to look at size relationships
Q: can user determine which are “graspable” controls? Q: are there rendering issues?
in drawings, the UI panels were transparent discovered after mocking it up, that it wouldn’t distinguish UI enough from data things start taking up much more space text objects that give environment “grounding” start thinking about how to distinguish different parts of the application UI from data objects from environment graspable controls from control-containers
true test for application is Does it allow the designer to achieve desired lighting effects? most important view is what the audience sees Note for future Q: how much interaction could be accomplished from this view? Q: what are rendering issues?
next version of UI panel dispense with transparency solves some rendering issues easier to tell UI from data? what does a simple set look like? what are interactions between set and surroundings? lighting z-buffer how much of the surroundings can be simplified? bitmaps rather than 3D
start to show relationships between lights and effect of lights relationships between lights and surroundings
traditionally theater lighting designers use a “birds-eye-view” (lighting plot) why not give designers that? [ask audience what they think this is?] what would make this more understandable? what are lessons? need good transitions between different views need cues (when in a particular view) how to get in and out of it ( NAVIGATION) users have to know what view parameters they can change specific domains demand specialized views what parts of view can be shown in schematic curtains flats surroundings wings
show effect of light superimposed on stage (like lighting plot) problems: Q: what if lighting is so dim that it doesn’t show up on stage? A: do a bright highlight around perimeter of light effect
make a complex version to test out early assumptions lessons? cause-and-effect breaks down ( visualization) hard to select individual lights perceiving depth conflicts with need for orthographic view ( DEFINE? )
reports: # of lights used? # of lights over the number allocated? time required to install? # of different gels? these questions point out need to talk more to practitioners some of questions can be left unanswered till later they may not impact 3D UI sometimes it is good to have 3D UI and 2D UI separate
“ making the pictures move” starts to reveal more issues -> force decisions at details level “ click here, then click there, then drag, and make sure to highlight those objects” annotated storyboards -> animatics -> interactive prototypes
panel at bottom has sliders for controlling light intensity much like computer-based lighting control panel in real world numerical feedback for timing Q: is a timeline needed? sup-panel controls viewing-mode
subpanel on create/edit panel controls type of object being handled filters selection set (gray out unavailable objects) Q: what division between creation and editing? Q: how realistic should the icons be? Q: does this break down when there are more object types? Q: maybe it should mimic metaphor of “Store-room” or equipment cart?
Q: how much of the UI need be present in the different views? there is a need to show continuity during viewing changes, perhaps a stylized proxies can be animated during the transition
what happens when new user walks up to a particular setup of the application? Q: How can they determine where they are looking from? Q: how can they determine what the status of the data is? provide a “meta-view” to show user where they are looking from problems: yet another view for end-user to integrate meta-view may be too abstract for most users more clutter
TASK: user needs to place a light in a particular position on a pole indicate constraints during initial creation (bind together creation and placement) light has to plug into power-outlet some outlets are full some are too far from light show probable (simplified/schematic) effect of light during creation
knowledge of the application domain (theater) can help designer make simplifying assumptions flats are standard sizes flats are vertical flats should easily align together simplify more only allow simple creation allow simple cutting of holes (windows) allow simple extension of top border of flats
during creation (temporary) show feedback that helps user understand dimensions of object guidelines don’t move numbers during manipulation (don’t attach to cursor) make sure “rulers” aren’t obscured by other objects (wireframe superimposition if necessary) make location and appearance of ancillary cues predictable/consistant across interactions
existing objects that obscure objects undergoing creation or editing can be temporarily shown in wireframe make sure to show relationship between object of interest and surrounding objects highlight intersection between objects show shadows
Direct-Manipulation of lights is when user can just grab on light object and rotate it one-to-one relationship between mouse motion and object reaction effects of lights (light beam) should move in sync
handles add predictability user knows which is UI and which is object handles support poor update rates decouple user manipulation of handle from lighting update (update on mouseUp or when cycles are available) easy to integrate numerical feedback easy to integrate detents (“click-stops”)
instead of grabbing light-object, let user grab where light is cast of stage trace back to light-object supports user’s intended high-level task -> change where the light falls, make an object look a certain way
one of most common lighting-designer tasks is to change the color of a light (GELs) problems with RBG color picker artificial separation of related parameters cognitive and physical distance between UI and data/objects unpredictable relationship between “pure” color and resultant color in scenes can we borrow from actual color swatches? start to arrange the swatches to allow easy browsing certain arrangements may be aided by 3D
jukebox can live in scene easy browsing shows relationship between colors problems obscured/obscuring need to show link between tool and sample-swatch maybe difficult to distinguish tool from data/objects as number of swatches increases, tool becomes TOO large
only show slices through color space put the slices right on the object of interest possibly lets users see what effect of adjacent colors would be quick traversal of alternatives
easiest method is to let user change and light and observe result
provide better highlighting to indicate associations separate view may strengthen associations
let the user see a range of information at one time! diminish impact of information the farther it is from area of interest get rid of idea of selected Vs. non-selected degree of selection! highlight zones: show wires from lights to highlights in clusters of lights with falloff (of brightness/opacity) from center of focus Q: should cluster center be from light unit or from highlight? (show both!)
perhaps this is closer to what end-user desires start with results and then back-track to causes! highlight zones: show wires from lights to highlights in clusters of lights with falloff (of brightness/opacity) from center of focus
traditional selection and highlighting breaks down when many object 3D small objects overlapping object complex object (small parts)
user Magic! during rollover, highlight objects exaggerate color size relationship to other objects! animation wiggle lights? highlight the effect and any other information that can further user’s understanding of selected object!
