This article provides guidelines on how to develop a 3D toolbar which is useable and accessible. The information in this article comes from Strata Live 3D's decade of experience designing user interfaces for 3D applications. It is also based on research sponsored by Strata Live 3D, conducted at Worcester Polytechnic Institute in 2004.

3D Toolbars are necessary for both interactive applets on web pages, and 3D PDF files. The PDF format is slightly less capable than Strata Live 3D's viewer applet, so the toolbar must be slightly different. These differences are highlighted, below.

Background

The user interfaces of most 3D applications are terrible. They generally rely on peculiar mouse gestures, not found anywhere else in user interface design. One of the reasons Strata Live 3D has been successful bringing 3D to consumer web sites is the application of good user interface design practice. For example:

• Strata Live 3D 3D control toolbars use a modal paradigm, in which the action of a left-button mouse drag is either to turn, pan, or measure, depending on the mode. This contrasts with traditional 3D interfaces that use different mouse gestures to move the model in different degrees of freedom (such as requiring the user to hold down both the left and right buttons together while dragging, in order to pan the view, or requiring that the user hold down keyboard keys while dragging the mouse to access different modes). Allowing strange gestures as shortcuts is fine for the advanced user, but novices should not be expected to know, or even be able to perform, these actions.
• The user can completely control the view of the object from the toolbar, without ever dragging. This is important for two reasons:

1.      Dragging on an image to change the view is an unfamiliar interaction for most computer users. Users are more accustomed to dragging scrollbars or clicking page up/down buttons.

2.      Dragging the mouse can be exteremly challenging for people with disabilities.

• Strata Live 3D interfaces rely on menus of actions to trigger different animations, rather than requiring the user to click on the 3D object itself. As with mouse dragging, this is because the "click on the image to see an animation" mode of operation is completely foreign to most web users. By placing the animations in a list, users can easily see what the 3D scene is capable of, and can easily trigger the animation they want without having to manipulate the scene just to find the magic trigger spot.

While most of these aspects of interface design were pretty obvious to us, the WPI research has definitively confirmed these assumptions, and identified some more subtle points which are worth taking into account. The remainder of this article gives straightforward design guidelines which ensure a good experience for all users, particularly those new to 3D interfaces, and users with disabilities.

General Guidelines

The following toolbars are exemplars for all the best practices described in this article:

Toolbar for 3D Applet

Toolbar for 3D PDF

Allow the user to select from 3 modes: rotate, pan, measure. The toolbar should give a visual indication of which mode is currently selected. If possible, design the toolbar such that the measure mode can be omitted.

Include a zoom control. For the interactive applet, this should include buttons to zoom in and out, as well as a slider to show the current zoom level. For 3D PDF, it is not possible to include a moving slider, so it should only have zoom in and out controls.

Include a reset button. This is extremely important, because novice users can easily get lost as they learn to use a 3D interface, and having to reload the entire page to get back to a good state is not reasonable.

All sensitive areas should be screen-aligned, non-overlapping rectangles. This is a requirement both for technical reasons (in PDF, sensitive areas can only be rectangular), and for usability reasons (users are not accustomed to strangely-shaped buttons, and therefore may not recognize them as buttons).

Text labels must not be "baked into the raster." To support internationalization, the labels or tooltips shown for each button must be dynamic text. If the graphic design anticipates placing this text in a particular place, be aware that the words used might be quite long. These are the worst-case lengths we have encountered:

• Reset: Opnieuw instellen (17 characters)
• Move: Verplaatsen (11 characters)
• Turn: Rotieren (8 characters)
• Zoom: Zblizenie (9 characters)
• Measure: Measure (7 characters)

Accessibility Recommendations

By following the remaining guidelines, the 3D toolbar will be much easier for 3D novices and people with disabilities to operate. Please refer to the above images for examples of these best practices.

Include push-buttons for 4 turn directions, and 4 pan directions. Specifically:

1.      Turn Left, Turn Right, Turn Up, Turn Down

2.      Pan Left, Pan Right, Pan Up, Pan Down

All buttons should be discrete and "button-like." This is a discovery made by the WPI researchers, and identified a defect in earlier Strata Live 3D toolbar designs. In the original design, each little blue arrow could be clicked to turn the object. It turns out that users did not understand that, even thought the arrows lit up when the mouse moved over them. In the new design, the individual controls look much more like active entities, because they are separate from the central "rotate" icon.

Sensitive areas should be as large as possible. It can difficult for many users to precisely point their mouse at a small area. A good heuristic is that all mouse-sensitive areas should be at least 5x5 pixels. In the example toolbar, the smallest area is 11x19 pixels.

Use intuitive icons. Not all users will be able to read text labels on controls, so try to make each icon's function as clear as possible. The example at right shows a 3D control icon we found being used by a competitor. Any idea whether that is a turn or pan control?

Use high contrast colors. It can be hard for some people with disabilities to discern symbols when the contrast is low. Also, avoid color combinations which can be difficult for people with color-blindness to detect.

Minimize movement and fading of controls. Some people have a lot of difficulty focusing on the 3D image if something is moving elsewhere on the interface.

Keep buttons that run animations separate from 3D view controls. Sometimes when there is just one animation available, or when there is one particularly important animation, graphic designers will want to put a control for that into the 3D toolbar. This can be very confusing to users, since the button does not behave like the rest of the tools.

Real-World Examples

The following toolbars were created by Strata Live 3D, our clients, and our competitors. For each, we note the accessability defects.

Strata Live 3D-Designed Toolbar for sonystyle.com

The main problem with this toolbar is the lack of clear buttons for turning in each of the four directions. The swooshing arrows light up when you mouse over them, but many users do not realize they can click them to turn the object. The "yin/yang" symbol is also an obscure choice of reset symbol.

Toolbar for dell.com, designed by another agency

This toolbar lacks individual controls for turning and moving the object. Thus, the only way for the user to control the view is by dragging the mouse, which can be very hard for people with disabilities. (And quite non-obvious for anyone new to 3D interfaces.) To compensate, we added a separate turn or move control (depending on the current mode) which would fade in and provide an alternative to dragging. This was a non-optimal choice, because the user might not notice that extra control off the toolbar area, and because fading controls should generally be avoided.

Competitor's Toolbar

This toolbar has independent turn and pan controls to allow the user to change the view without dragging. The design of these buttons would not work for 3D PDF, however, because rectangular sensitive areas around the individual buttons would overlap each other. The interface lacks a zoom slider, preventing the user from knowing how close they are to being zoomed all the way in or out. The reset icon is fairly obscure (it's the little button on the right). This toolbar features an animation button as well, which can be confusing because it changes the state of the object, not just the point-of-view. The toolbar lacks a measure mode button. Oddly, clicking on the pan button in this interface does not change the mode of mouse dragging to pan; dragging the mouse always rotates the view.

Competitor's Toolbar

This toolbar has independent turn and pan controls which are clearly buttons. The icons distinguishing rotate from move are not very intuitive. The zoom control is a little strange, because the zoom-in button seems to be pointing away from the user. Since users think of their controls as manipulating the object, one would expect a control that points away to make the object smaller. The interface lacks a measure control, and it lacks a zoom slider to show how close the current zoom is to the maximum value.