This EPSScentral page describes the elements and features of an electronic performance support system. In designing a system, you should first consider the two basic elements of an EPSS: the performance path(s) and the interface design or appearance. The performance path consists of series of nodes (screens and windows) and links (buttons, menus, etc.) that enables a person to successfully navigate from a starting point to the completion of a task. The interface design refers to the arrangement of text and graphics on a computer screen or window. A person will use this interface information to select actions. An interface design is successful if most user select the actions that are appropriate for a given task.

Plotting the Performance Path

To perform a task with an EPSS, a user will activate links and enter information, while the system displays new nodes. This movement from node to node is called the performance path. The performance path may consist of many nodes and links or just a few.

A performance path can also have sidebar nodes. These sidebars can be a single node or a series of links and nodes that branch off of the main performance path and have a dead end. You can use these sidebar nodes to present supplementary information that a user may not always need to make a decision, but that can help the person to develop a more comprehensive understanding of the business.

In many cases you will want to create more than one performance path for a given task. One path may be designed for a novice user who needs more information to select the appropriate links for a given task. You can also design a path for the experienced users who understands the business and can make the appropriate choices with a minimal amount of supportive information.

Links and Nodes

What are Links and Nodes

From a user interface perspective, links and nodes are the basic building blocks of a computer program. They enable the user to change the content of the current screen or node. By changing the content the user will be able to display further information or a new set of links that in turn can be used to display even more information.

A “link” or “link activator” is any screen object or program element that will cause a computer program to

1. display a new node,
2. change some of the content in the current node, or
3. perform some form of data manipulation process.

These screen objects include features like buttons, hypertext link, menus, and graphics. A link can be activated by

1. clicking or double clicking a mouse button when the mouse pointer is on the element or object,
2. pressing a key or combination of keys,
3. moving the mouse pointer over an object or away from an object.

A node is a container object that holds links and information. A window is a common type of node. A message boxes and dialog boxes are also nodes.

Link features

Link Types

When selecting a style of link activator, you should ask yourself if your users will readily identify the object is a link activator. For example, a button is a very common type of link activator, and most users will quickly understand the function of this type of object. By comparison a link that must be activated by pressing a combination of keyboard keys, will not be obvious to most users. This type of link activator can be very efficient for an experienced user, but they will increase the time and cognitive effort required for new user to learn and accurately recall the required key combinations.

Some programs will change the style of the mouse pointer to indicate that a selected object is a link activator. This method of indicating a link activator can very effective because most users are constantly watching the mouse pointer or cursor and will notice any changes in the shape of the mouse pointer.

Area of Activation

The area of activation for many link activators is generally very obvious. For example a button has clearly marked boundaries and it is quite obvious that clicking the mouse button when the pointer is outside the boundaries of the button will not activate the link. The area of activation for radio button is somewhat less obvious. Most user will place the mouse pointer on the small circle, before clicking the mouse pointer. However in most systems, the link can be activated by clicking on the button as well as the text associated with the button. This feature however is not readily obvious.

Link Purpose

A link activator should contain some features or elements that indicate the destination or purpose of the link. Most user interface experts agree that buttons with a combination of text and graphics can improve performance and reduce errors. A text and graphic button occupied more screen area and thereby reduces the space available for the placement of other screen elements. Some systems use tool tips (a.k.a “bubble help”) in combination with a graphic button. Tool tips enable a developer to display a short text string that indicates the purpose of a graphical button. With this devise a developer can reduce button size and increase the number of buttons on a node.

Some systems will display a text message in the status bar when the user place the mouse pointer over a graphic button. While this performs the same basic function of a tool tip, it may be far less effective, because the user does not notice that the message in the status bar has changed. Status bars tend to be place at the bottom of the screen, which tends to receive much less attention.

Activation Method

When selecting the link activators, you must also decide how the links will be activated. The most common activation method are click and double click. To use these methods the user must place the mouse pointer within the activation area of the link and then quickly press and release the mouse button once or twice. In most systems buttons only required a single click, while a double click is required to activate a link in a list of links, such as list of files in a file dialog box. These types of links can also be activated by clicking once on the file name to select it and then clicking on a button to open or otherwise process the file.

Not all systems use the same conventions. For example in Lotus Notes, you must double click a hypertext link to activate it. A single click on a hypertext link will display a link message, but you must hold the mouse down to keep the message visible. While this activation method is unconventional, a developer can provide some addition information about the link destination and purpose in the pop-up message box.

Link Styles

Hypertext

A hypertext link is generally a word or series of words that may be within a sentence, paragraph or list. In the Windows Help hypertext system a hypertext link is any green text with a solid or dotted underline. With many Internet browser, a hypertext link is indicate with blue text and a solid underline.

Most experts tend to agree that the text select for the hypertext link should in indicate the possible content of the linked node. Using a style like “Click here to see more information about hypertext links.” is generally not recommended. In a hypertext document that may contain many hypertext links, this style tends to add unnecessarily redundant text.

With some hypertext development systems, like the Hypertext Markup Language (HTML) system, it is possible to create hypertext links with many different colors. While a user will be able to identify the hypertext link by placing a mouse pointer on the colored text, in an EPSS the use different colors may tend to reduce employee performance.

A link in a HTML document can

1. jump to or scroll the display to another part of the same document,
2. display another HTML document,
3. copy a file from a server to the workstation, or
4. activate another application, such as a wordprocessor or plug-in multimedia program.

A user will generally not know the purpose and destination of these hypertext links unless

1. they are able to read an interpret the test string that they system displays in the status bar when the user places the mouse pointer on the hypertext link or
2. the link context indicates its purpose and destination.

The difficulty of designing a HTML hypertext link that clearly communicates both purpose and desination is a significant limitation. It is a factor that contributes to the lost in hyperspace phenomena.

Buttons

In the Windows environment, a button is a very common type of link activator. The button usually contains either a single word or short text string, a graphic or a combination of words and graphics. Most interface experts agree that a button with words and graphics can improve user performance. The borders of the button clearly indicate the area of activation and because they are such a common devise, most users will clearly understand their basic purpose.

Graphics

Many software development system allow you to use a graphic as a link activator. The use of graphics for link activators is becoming an increasingly common practice on the Word Wide Web. In some cases it is difficult to easily distinguish between those graphics that are link activators and those that serve some other purpose. In most systems a user must place the mouse pointer over the graphics to determine if it is a link activator. If the graphic is a link activator, the system will either

1. change the shape of the mouse pointer,
2. display a tool tip message,
3. display a message in a status bar (usually at the bottom of the window),
4. highlight or change the color of the graphic, or
5. use a combination of these indicators.

The difficulty of using graphics for link activators can be compounded with the use of segmented graphics. These are graphics that contain more than one link activator. Each activator is associated with an particular area of the graphic and the area of activation generally does not overlap. These type of link activators generally rely on the graphic itself to communicate the area of activation. Frequently these segmented graphics contain text that helps to communicate the purpose of the link and its area of activation.

Menu

A menu is probably the most common type of link activator. It generally consists of a single word or a short phrase. The use of single word for the main menu may be sufficient for general use system like a word processor, but it may not be the best option for maximizing employee performance.

Under the Microsoft Windows interface, commercial software vendors have tended to adopt a standard menu structure. For example, the "Print" menu command can generally be found under the "File" menu item. This menu structure standardization can be very helpful when learning a new commercial software program. If the user is already familiar with other windows programs, they will be able to apply some their knowledge to a new application. The person will not have to remember that in one program the "Print" command is under the "File" menu and in another it is under the "Utilities" menu.

While this standardization may be very useful for commercial applications, it may not be the best technique for optimizing the usability of a business specific EPSS. When developing an EPSS in Windows, you may be tempted to utilize the Windows standard menu structure. This can turn out to be a case of fitting the business process to a standard menu structure, rather than fitting the menu structure to fit your business processes. Many business processes have their own unique descriptors or names. For example, where, within the standard menu structure, would you place a menu command for activating a process to "issue a credit to a customer". Is this placement going to be reasonably obvious to a new user?

Menus can be very useful because they do not occupy much screen real estate, but they can give you access to all the components and functions of a system. While this is very useful in a word processing program, it may not always be the most productive or efficient structure for all programs.

Hierarchy/Chart

A hierarchical list, as illustrated in the following diagram, is an expandable list of options that are organized into categories. The options in one category generally share some common characteristics. This devise can provide access to many choices without the need to change the context of the option list.

Often, a system will initially display only the options at the first or highest level of the hierarchical list. A user can then display the options in the second level by clicking or sometimes double clicking one of the first level options. This process is sometimes called "expanding" the list.

An option list will generally use some type of small graphic to indicate if an item can be further expanded (i.e. it is a category heading). These visual devises generally may use a "+" or "-" symbol, an opened or closed file folder image, or, as in the case of the Windows 95 help content screen, opened and closed books. Without such a devise, the user could waste their time and effort trying to discover if a category could be further expanded.

With an heirarchical list, you can provide access to many options without the need to change the screen context. Only the list will change, but the screen elements, including any help text, can remain constant. To use a hierarchical list as user will need to know the

1. method for expanding a category heading (e.g. double click catergory heading text, single click the expansion graphic, or single click the category heading to select it and then click an button to display the options in the category.)

2. the characteristic of the category so that they have a higher probability of expanding the category that contains the option they want, and

3. the method for selecting an option.

On the downside, a hierarchical list can be difficult to use if the user does not fully understand the categorization scheme. The user may have to expand several categories before find the desired item. This searching process forces a person to use the mouse extensively to scroll the list and double click an item to expand and contract the list. Buttons that expand and collapse all the category and topic headings can help to reduce the number of mouse movements and clicks, and thereby reduce the physical strain on the user’s hand and arm.

Scrollable List/Database

 

The following sections are still under construction

Tabs

Mouse Over Event

Secondary Mouse Button Click

Drag and Drop

Types of Nodes

WindowFramesDialog Box

Tabbed dialog box

Message Box

Tool Tips

Status bar

Tabbed Folders

Sidebar Window