Effective GUI Design - by David Drake


Two Years Ago in LBNews
Effective GUI Design
Alternative to Graphics Printing
Liberty Basic Simple Help
New LB Programming Contest
Debugging by Simulating Breakpoints
Multi-Coloured Text Input Boxes

Think back to the last time that you used a text-based program. If you are a power user, or you frequently dwell in the domains of UNIX or Linux, you use text-based applications frequently. What about the rest of us? We couldn't function without graphical user interfaces (GUIs).

What is a text-based program? Text-based programs require the user to type in strings of commands to interact with the program. The computer responds, typically, with text. What is a GUI? The graphical user interface allows the user to run programs with "point-and-click" mouse operations. The computer, in turn, communicates with the user with text, images and even sound.

While the origins of the GUI (pronounced gooey) are confusing, most people attribute the first mass-marketed GUI-based operating system to Steve Jobs and Apple Computer. Jobs did not create the GUI -- he made it available. Of course, Microsoft came along a few years later and created Windows. Voila! The modern user-friendly personal computer was born.

Why GUI?

What does all of this mean for us as Liberty BASIC programmers? LB allows us to create completely text-based programs. Try the following example:

'Start of code 
print "Type in your name: "; 
input a$ 
print "Your name is ";a$ 
'End of code

This is a perfectly good text-based program. It asks the user for
input, the user types and response, and the computer delivers
information back to the user.

Rather bland, however.

Try this in you LB editor:

'Start of code 
WindowWidth = 145 
WindowHeight = 280 
statictext #main.statictext1, "Select your name:", 15, 17, 107, 20 
button #main.button2, "Alyce", [button1], UL, 40, 42, 60, 25 
button #main.button3, "Carl", [button2], UL, 40, 67, 60, 25 
button #main.button4, "Richard", [button3], UL, 40, 92, 60, 25 
button #main.button5, "John", [button4], UL, 40, 117, 60, 25 
button #main.button6, "Other", [button5], UL, 40, 142, 60, 25 
button #main.button7, "Quit", [quit], UL, 40, 197, 60, 25
open "Name" for window as #main 
print #main, "trapclose [quit]"
notice "Your name is Alyce." 
notice "Your name is Carl." 
notice "Your name is Richard." 
notice "Your name is John." 
notice "Your name is not listed." 
notice "Goodbye." 
close #main 
'End of code

Much snazzier, eh? Okay, so it isn't the most useful program in the world. It will do for demonstration purposes, however.

Popular programs tend to have the following features:

* They do something that people want.
* They work all the time.
* They are easy to install and remove.
* They are intuitive and easy to use.
* They look clean and professional.

It could be argued that someone could create a perfectly fine program that meets only the first three characteristics. One could also argue that even the world's greatest program will be made less appealing if it's hard to use or looks bad (or bland). Hence the need for graphical user interface. Really, who wants to use an MP3 player that requires that you type "play c:\music\amygrant\agetoage.mp3 /stopatend" to hear your favorite songs?

Basics of GUI Design

Begin with the end in mind. When creating a GUI, one must consider first what the program is supposed to do. Does the user edit an image? Type in a term paper? Enter information into a database? Play a game? Think about designing an interface suitable to the program. Look at what the professionals have already done. If you are creating an image editing program, fire up Paint Shop Pro or MS Photo Editor. See how the professionals have designed their GUIs. Businesses that create and sell thousands of copies of a program must be doing something right.

Remember that the user is NOT the programmer. Sometimes programmers will forget that those who use the program don't know everything that the programmer does. Try to design the GUI from the novice user's perspective.

Avoid putting too many functions on the top level. In other words, the menu or toolbar you create should contain only the minimum needed to get to the more advanced commands. Consider the LB editor. The menu contains File, Edit, Run, Setup and Help. Click on "Edit" and the dropdown offer Undo, Cut, Copy, Paste, Clear, Select All, Restore, Find/Replace and Find Again. Imaging having ALL of these editing features as buttons on the toolbar! Users are used to drilling down and finding the tools they need.

Avoid hiding your functions beneath obscure menu headings. Don't put editing commands under the "File" menu. Never hide your program help commands under "Options."

Avoid using common icons for tasks other than their conventional actions. For example, using an icon commonly associated with "Open File" for a task like "Search/Replace" will cause the user to uninstall your program from the computer.

Avoid using confusing titles in buttons. If you create a popup box that asks "Are you sure you want to quit?" and the response buttons read "Confirm" and "Exit," the user won't know what to do! It is best to use conventionally accepted button texts like "Yes," "No", "Okay" and "Cancel."

Be consitant with your design. Use similar layouts in all windows associated with a program. This lends a feeling of continuity and comfort as the user moves from window to window.

Be kind to the user. Make button text big enough to read. Use icons with clear images. Avoid crowding buttons together. Make buttons big enough to click.

Use keyboard support. Some people are unable to use a mouse. Others are faster with a keyboard. Make sure that you provide keyboard shortcuts for as many important program functions as possible. For other functions, ensure that the user can access then through a series of menu keystrokes.

Make it look good, but not too good. Balance, color and symmetry are important factors. When the user starts the program, he expects a pleasant and unsurprising window. If your user starts the program and says "Wow! Look at this," or "Ugh!" the GUI is probably detracting from its effectiveness. Here's the user response we really want: "". That's right! We want the user to instantly look PAST the GUI and into the program's functionality. Microsoft Word is an example of an effectively understated GUI.

Add some bells and whistles. Sound, used properly, can add to a program's effectiveness. Internet Explorer can "click" when browsing buttons are clicked. Subtle sounds that provide useful information to the user can make the program more useful and fun. Don't overdo, however. Provide some tips. ToolTips, those cool little text bars that pop up when you mouse over a button, will make your program more professional and user friendly. Freeform allows you to put ToolTips easily into your LB programs.

Select the right window type. Liberty BASIC provides several type of windows to the programmer. The following is taken from the Liberty BASIC help file:

open a graphics window
open a graphics window full screen (size of the screen)
open a graphics window w/no scroll bars
open a graphics window full screen, w/no scroll bars
open a graphics window with no sizing frame or scroll bars
open a text window
open a text window full screen
open a text window w/no scroll bars
open a text window w/no scroll bars, with inset editor
open a basic window type
open a basic window type without a sizing frame
open a window without a titlebar
open a dialog box
open a modal dialog box
open a dialog box without a frame
open a modal dialog box without a frame
open a dialog box the size of the screen
open a dialog box without a frame the size of the screen
open a dialog box without a titlebar
Style suffixes for window types (not all suffixes are supported for
each window type):
window is sized to fill the screen
window has no frame and cannot be resized by user
window doesn't contain scroll bars
contains inset texteditor
window contains no titlebar or sizing frame
window must be closed before another window can gain focus

Select a window type appropriate for your application.

There is help. For those who are stumped by GUIs, help is available.

Consider the following:
* The Liberty BASIC help file - The help file is well-written and will answer most, if not all of you GUI programming questions.
* The Freeform help file - Contains some more details on forms and form creation. Ships with LB.
* Mastering Liberty BASIC 3 - Excellent resource for all things LB, including GUI programming. Purchase this at Alyce's Restaurant:

See what other LB developers have done:
The Liberty BASIC Open Source Editor
(http://iquizme.0catch.com/lb/lb3/open.html) created by the LB community
Birthday Keeper (http://www.eaglesoartech.com/) by Eldron Gill
From the Liberty BASIC Yahoo Group Files area:
Winsult (http://groups.yahoo.com/group/libertybasic/files/Winsult.zip)
by Billy Earl Software and Marilyn Productions
(http://groups.yahoo.com/group/libertybasic/files/BillCalc.zip) by Jay
(http://groups.yahoo.com/group/libertybasic/files/HumbleCAD.zip) by
Tom Nally
David Drake
RPN Calculator (http://www.foundrysearch.com/downloads/rpn.zip)
created by David Drake

Additional cool tools and GUI resources for Liberty BASIC:

The Liberty Belle (http://libertybelle.0catch.com/lb3code.htm):
* Tab control
* Scrollable windows
* Easy ToolTips
* Easy toolbar

The LB-Connection (http://www1.freewebs.com/lb-connection/lb3.htm)
* Working with combo boxes and more

Freeform Developers' Forum (http://groups.yahoo.com/group/FreeForm3)
* Freeform 3 (ships with Liberty BASIC) - Build your own GUI windows
quickly and easily with Freeform 3. It ships with LB. Freeform is
under semi-constant development by the LB community.

Good luck with you GUI, and happy coding.


Two Years Ago in LBNews
Effective GUI Design
Alternative to Graphics Printing
Liberty Basic Simple Help
New LB Programming Contest
Debugging by Simulating Breakpoints
Multi-Coloured Text Input Boxes