A Better Way

Time spent in the project to improve software tool user interface and reduce integration effort can result in a highly productive and creative environment -- not to mention the frustrations it can save the design team.

An intuitive graphical user interface is generally standards-friendly, requires minimal steps, and exposes all options at a given stage in the workflow to complete creation of an asset. The user interface for tools with real time visual feedback adds a level of implementation complexity; however, the benefits to the user far outweigh the implementation effort.

The chart in Fig. 1 shows a step-by-step method for creating an efficient graphical tool. The first step toward UI design involves investigating current software applications and then conducting user interaction and look-and-feel studies. It is an observational study of commonly used software applications and interactive software tools.

We don't want to re-invent the wheel with UI design. Commonly used controls and interaction sequences will reduce the application usage learning curve.

Fig. 1

A user interaction study allows you to get a sense of user interactive behavior and lists UI controls that feel natural to the user. Such a study also highlights the importance of observing the look and feel of commonly-used software tools. That is what the user is already familiar with, so it will increase the comfort level and reduce the learning curve.

Furthermore, consistent UI design is crucial. If the user learns to use a particular set of UI controls scheme then a consistent design will automatically make it easy to use many features of the entire interface.

A user interface look-and-feel study lets you gather ideas for your application framework layout. Primarily, you need to observe what is standard or familiar to end users. Secondly, the layout should allow easy navigation to the tool's feature UI categories. In addition, workflow has to be kept in mind, so the user can sequentially go from one stage to the next during the tool use process.

Consistency in user interface look may be more important than the quality of the style itself. However, a customized look such as button icons and cursors help to achieve and retain user interface familiarity or associate a user's interaction learning with that interface. It also brings a level of user confidence in the professionalism behind the making of the tool.

Real-Time UI Design

UI design standards have matured over time and sometimes define what is intuitive. Design for real time UI is directly associated with the progression of the standards. But on the other hand, these standards must be molded to fit the needs for real time visual feedback.

The underlying principle to real time UI design is to have instant update or instant preview enabled on actual viewed, active content at all times and display the confirmation button only when really needed. The tool will update attributes as soon as the user changes them. Secondly, the design should be intended to reduce as many number of UI button clicks as possible, at least in the most frequently-used sections. There is also no real need for duplicated methods and UI to do the same operation.

Although UI for real time updates doesn't always follow the standards, it mostly only reduces the user interaction steps and does not generally introduce replacement or new steps. In other words, the user will still be seeing standard interface components such as buttons, lists, and text boxes. A user may follow standard steps to discover that some steps are no longer required. Here are a few examples of how user interface controls can be used for faster update.

Fig. 2

Data Entry. There are many instances where values can be updated using a slider instead of an edit box, Fig. 2. You may need to provide control over range if the range cannot be fixed. The nice thing about sliders is that values can be updated as the slider moves along, so the user will be able to see changes at each tick.

Color Picker. The standard color picker can be modified to update on mouse roll over or mouse button down. This way color update can occur while the user moves the cursor over the color swatch. Mouse roll over in the color swatch window will display the color on the content being modified or edited. The user will then click once to confirm the selection.

Edit Box. Not all numeric value entries can be converted to sliders. However, change events can be used to make updates effective as the user types in the new value. This way the return key press or update button press is not needed as an additional step.

Pull-Down List Box. An update can occur as a selection highlights in the dropdown list. The user will easily preview content with the different selections and be able to quickly pick the desired one.

Drag & Drop. This is another method that makes property assignment very simple. An example is to drag a property object and drop it on the asset being edited. The property object would instantly associate itself with the content and show the update instantly.