DesignBais Tip – Image Toolbar

Using graphical elements familiar to end-users will enhance the value of your application and show that you really are taking that next step toward a real GUI. A toolbar is an example of the sort of thick-client UI feature that end-users are starting to expect in browser apps now.

To reproduce the look and feel of a thick-client toolbar, put a series of images across the page. For example:

As mentioned in this blog entry, rather than hard-coding the image name, use a generic name for each button. The Image File field names for each of the above could be something like BEGIN, BACK, FWD, END, SEARCH. When loading the form, in the AFTER.DISPLAY event, set the image values:
DBIMAGESPEC = ""
DBIMAGESPEC<1,-1> = "BEGIN"
DBIMAGESPEC<2,-1> = BEGIN.IMG
DBIMAGESPEC<1,-1> = "BACK"
DBIMAGESPEC<2,-1> = BACK.IMG
…

What kind of toolbars might you want? How you use toolbars is entirely up to you. The example above shows item navigation with a search icon for direct access. Think about thick-client applications that you use and the kinds of toolbars they include. The image to the right shows a collection of toolbars taken from Microsoft Word and a couple other applications. Note the assortment of Help icons that can be used (the ones with "?" marks), the usage of listboxes within the toolbar ("100%", "Final Showing Markup", "Show", etc), and the on/off toggle images (bottom) that can be rendered using the technique of image substitution as documented in my article on Radio Buttons.

In a typical green-screen application, developers tend to make a number of options available to users at the bottom of the data entry page. The bottom line might look something like this:
 [   ] Enter option: Sel#, (A)ccept,
       (D)elete, e(X)it,
       (V)iew details,
       (H)istory, (S)ales Recap
That entire bottom line can be removed in a GUI where the user can click an ID in an On Form Report to select a line item, buttons can be used for Accept, Delete, and Exit, and a toolbar can provide a set of clickable icons for all of the other features.

One thing to be concerned about when doing on/off toggles: Every click causes a round-trip to the server to process the request. A single click might take a second or two to reset the image and perform the intended operation, though some users might expect milli-second response time because the app "looks" more like a thick-client. Hey, all they did was click an icon, right? It’s a funny trade-off that the more your UI looks like a thick client the more users expect it to behave like one, and they might consider the UI slow because it doesn’t meet that expectation. DesignBais is an Ajax application like many others that are coming in vogue now and the bar for end-user expectations is rising. Unfortunately the technology hasn’t really changed, we’re just asking more out of it.

Similarly, some users will be tempted to double-click on icons – I have no idea at this point how DesignBais will react to this but I suspect the browser will discard the extra click. A little end-user education could help here to ensure they understand what to expect and that they don’t break the app with impatient and excessive icon clicking.

Another upcoming article, GUI for MV Developers, will follow-up on these techniques for making better use of images. I’ll provide some tips for better GUI development for people who are used to green-screen character-based user interfaces. Please e-mail your own tips, mistakes you’ve made and avoided, books or articles you’ve read, etc. (You have read some books and articles on the topic, haven’t you? ) I’ll be sure to use whatever info I can and credit contributors.