PBDR.COM

About   -   Contact   -   Purchase   -   Search   -   What's New

 
 
Visual Cues
When using an application there often little features that can aid a user in performing a task, for example on a spreadsheet you can click in the little gap between the header of each cell and drag to enlarge and decrease the size of the cell to the left of the gap. Like all visual operations there is normally a manual method for performing the same operation. But the visual operation is simpler and quicker for the user and they can save time by using this feature.

However the visual operation is only quicker for the user if they know its there! So this article deals with how we can inform the user that these little features are available and how we an do this in a standard manner.

There are many ways of informing the user that a feature is available, you can add details in the help file or the manual, mention the feature in training, but relatively few people receive training on custom applications and even less read help files and manuals. Your application should be able to inform the user about the feature or at least give them an indication that there may be some special feature that they may know about.

Pointers
The easiest way to alert the user to a feature is by changing the pointer to something other than the standard mouse pointer. To go back to our earlier example of a spreadsheet, the most common way of informing the user about the cell resize feature is to change the pointer to a West East pointer when the mouse is moved over one of the header gaps. To be fair the user has to move the mouse over that location to find out about it but in the general course of using the application they will move the mouse around the screen to click on items and to access menus so very soon after starting to use the application they will see a sudden flicker of the mouse pointer to a different style. This visual cue is picked up by the user and they return their mouse to the same spot to see if the same thing happens. Lo and behold it does and the west east arrows give an indication of what type of function can be performed. The user can then experiment and and quickly they learn the cell resize feature without reading a help file or manual and no training.

We can use this concept in our own application to let the user know about some visual features or some hidden feature which may not be obvious or readily apparent. For example a lot of applications have a feature similar to a list view where you can click on a column header to sort the result set by that column. But how does the user know this feature is available? A solution is to include a small key on the column that the data is currently sorted but its still not obvious to the user that they can click on a header to sort the data. Setting the mouse to a pointer with the same small key included when the mouse hovers over a header at least gives the user a visual cue that there is more to the header than meets the eye.

Drag and Drop is another feature that most users do not realise is available to them, especially in custom applications, where you normally include left and right assignment buttons to perform the same task. By changing the pointer to a regular pointer with arrows pointing in the drag and drop direction will at least give the user a fighting chance to know they can drag and drop items.

More Pointers
The following images are some examples of standard pointers you can use in your application to give the user a visual cue that your application will let them perform an action with the mouse that they may not know is available:

dragdrop.gif (117 bytes) dragew.gif (113 bytes) dragns.gif (113 bytes) draw.gif (94 bytes)
General Drag Drop Drag East West Drag North South Draw Here
magnify.gif (109 bytes) panelew.gif (95 bytes) panelns.gif (84 bytes) point.gif (123 bytes)
Magnify Resize Panel East West Resize Panel North South Click Here or Hyperlink
quicsort.gif (112 bytes) resizeew.gif (93 bytes) resizens.gif (88 bytes) rmb.gif (124 bytes)
Click To Sort Resize East West Resize North South Right Mouse Button
slideew.gif (115 bytes) slidens.gif (119 bytes)
Slider East West Slider North South

If you have any standard pointers that you have designed then please send them in to share with other developers.

 

Top of Page

Legal Notice

Ken Howe 2011