The ABCs of User Interface Software
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In the spirit of having some fun, let's consider creating a helpful and easy-to-use tickler list of things to remember and things to do on software projects with a user interface (UI), usability issues, and using a User Centered Design (UCD)approach. Some things are common, regardless of the project, platform, and UI style employed. As one might expect, there are things unique to each project, platform, and UI style employed. The various items on the tickler list fall into technical, human, and social considerations.
Our purpose is to list various work items and considerations from the point of view of what needs to be considered during a project's planning, requirements analysis, design, prototyping, iteration, construction, test, and deployment. The UI tickler list forms the basis for a vocabulary and a potential glossary for UI, usability, and UCD.
Hyperlinks are employed on online tickler lists to support easy access or cross-referencing of more detailed information. For example, tickler list items can hyperlink to process, guidelines, code snippets, UI examples, or templates.
Furthermore, UI technology-related items can be grouped into a table with relevance to specific platforms indicated. The table provides a reminder of techniques relevant to supported platforms. Some techniques are appropriate for a hand-held device, and some are appropriate for a pure GUI. Some techniques that have been used in one environment are actually useful in other environments. For example, a Breadcrumb Trail can be used on GUI and HUI applications to provide a point of reference and ease of navigation.
An example of such a table is depicted below. In the context of a specific project, Y indicates that a feature applies, N indicates that a feature does not apply, and ? indicates that a feature may or may not apply.
|
Feature |
User Interface Style |
||
|
GUI |
WUI |
HUI |
|
|
Access Key |
Y |
Y |
N |
|
Breadcrumb Trail |
Y |
Y |
Y |
|
Clipboard |
Y |
Y |
Y |
|
Drag/Drop |
Y |
Y |
Y |
|
Hyperlink |
Y |
Y |
Y |
|
Icon |
Y |
Y |
Y |
|
Open (double-click) |
Y |
N |
N |
|
Shortcut Key |
Y |
N |
N |
|
Site (Application) Map |
Y |
Y |
Y |
|
Toolbar |
Y |
Y |
Y |
User Interface Styles
User interfaces have lots in common when evaluated in the light of the same application. Consider an Address Book application that displays a list of names and some common information and features. Figure 1 depicts four instantiations of an Address Book application.
){kind=link}
A conventional GUI-based application displays a simple alphabetical list. Data is displayed in a table with column headers. The visible data are Last Name, First Name, Middle Initial, and Phone Number. Detailed information about an item in the list is obtained via an Open operation.
A conventional PDA-like application displays a simple alphabetical list in a table. No column headers are displayed. As with the conventional GUI, the data displayed are Last Name, First Name, Middle Initial, and Phone Number. Detailed information about an item in the list is obtained via an Open operation.
A more visual GUI-based application uses a notebook control for organizing list information. As before, data displayed are Last Name, First Name, Middle Initial, and Phone Number. Detailed information about an item in the list is obtained via an Open operation.
A Web-based address book follows a model similar to the conventional GUI approach, although without an icon to represent object type. The data is basically the same, although two more columns of information are displayed. Detailed information about an item in the list is obtained via an Open operation (a hyperlink).
Figure 1 An address book using different UI styles.
The basic UI styles are very similar, as are the application UI styles. Data and functionality are very similar. Most differences are arbitrary. For example:
The Web-based address book can have graphics displayed for each object type, as well as a notebook model and a toolbar-like widget.
Hyperlinks can be used in the GUIs, as well as a visible search field and navigation menu (similar to an explorer model).
Some differences may be harder to overcome without specialized tools and programming—for example, pointer-based drag and drop of icons on today's Web interfaces.