Home -> Programming -> Planning -> User Interface

User Interface

  1. What is it?
  2. Why is it Important?
  3. Principles of Layout
  4. Layout for Programs
  5. Windows Layout
  6. Windows Standards
  7. References

What is it?

User Interface tries to capture the interaction between the user and the computer and software. At first the existence of the concept of User Interface was not even acknowledged. As organizations tried to deal with criticisms that computers were hard to learn, the concept was articulated, developed and came to be widely understood. The User Interfaces used up to this point in time on personal computers are:

  1. Command Line Interface(CLI)

    This interface was the first one used after computers were equipped with keyboards and monitors for input and output operations. The operator would type commands on the keyboard which would appear on the screen as they were typed. When the command was completed the operator would press the enter or return key to cause the command to be executed. It was not even thought of as an interface because there were no alternative ways of interacting with computers. It simply was! At this point less than one percent of the population were using computers and no one was concerned about whether they were hard to use. It took about six months to become a proficient operator and it was seen as the price of admission to an exciting new field. It's strengths are simplicity and Ease of Use. It is still used today in certain computing circles.

  2. Menu Driven Interface

    Several decades after the development of the Command Line Interface, a new kind of computer was introduced. Initially called the MicroComputer, it is today more commonly called a personal or desktop computer. This event marked the beginning of computer use by the masses. It also spelled trouble for the Command Line Interface. While a learning curve of six months is not unreasonable for one's profession, it is totally unacceptable for a tool which is to be used routinely in everyday work. So a variety of people and organizations went to work on the problem. The result was the Menu Driven Interface. Its zenith is best seen in Lotus 123, the former kingpin of the spreadsheet world. In this program one typed a slash '/' character to access the menus of a program like Lotus 123. This caused the menus to activate. In Lotus they were displayed on the bottom line of the screen. By navigating through these menus you could do just about anything you wanted to. It was easy for a novice because you didn't have to remember a thing, just recognize the command you wanted and have some idea of where to find it. The latter became a problem that was not trivial as these programs developed and matured. The advantage of the Menu Driven Interface is Ease of Learning, but these programs lost their Ease of Use. In Lotus 123 it took 26 keystrokes just to print your spreadsheet! There are still a few programs using this interface today.

  3. Graphical User Interface(GUI)

    Preliminary work on the GUI was done by several people. Foremost among these were Doug Engelbart and Xerox corporation. Engelbart did preliminary research on use of the mouse and the use of windows as containers for programs during the 1960's at Stanford University. In 1969 a group of researchers in Xerox corporation began a line of research focused on finding more answers to the issues raised by the two interfaces cited above. They pursued this research at their Palo Alto Research Center (PARC) from then until the eighties. Xerox even produced and sold a computer with the new interface called the Xerox Star. It sold for more than $10,000 in the early eighties, and due to the price did not sell well. Apple computer did pay attention and secured permission to have some of their engineers tour PARC. They went on to license certain technologies from XEROX, and beginning in 1979 developed first the Lisa and then Macintosh, both based on the new GUI interface. Macintosh was the first successful commercialization of the Graphical User Interface. It remains the Gold standard to this day.

  4. One of the alternate acronyms used to describe GUIs is WIMP. It stands for Windows, Icon, Menus and Pointers. These terms also give a better idea of the components which go to make up a modern GUI. Everything is enclosed in a window. This allows a user to have several programs open at one time, much like being able to have more than one piece of paper on your desk. The graphical nature of the interface was enhanced by the use of icons, small distinctive images, which all by themselves told the user what kind of a file was represented. Menus in this system were different from the previous menu system. They were called Drop Down Menus to distinguish them from the previous system. The main menu options were always visible, but the commands within a menu only became visible when the menu was activated. This conserved screen space, and was even more transparent (easier to learn) than the older Menu Driven system. Pointers referred to the mouse, used to navigate the graphical environment. Using a mouse is slower than using just the keyboard, but it is more convenient as any newcomer to computers can tell you. You just don't need to explain the correlation between mouse movement and the cursor on the screen.The environment is called graphical because the basic unit of display became the pixel (dot) on the screen instead of a character which was what the previous interfaces used.

    Many computer professionals were quite interested in the release of Macintosh, and bought one to try it out. After six months these professionals came back to Apple and told them it was interesting, but just as slow and awkward to use as the Menu Driven Interface. Almost all of them preferred and used the Command Line Interface because it was easier to use than the newer interfaces. Apple responded by changing one thing: they added keyboard shortcuts to the most commonly used menu commands - and these were real shortcuts! To print you only needed to hold down the Command key and press p. One modifier key and one keypress was a huge improvement over the 26 keystrokes required in Lotus 123. The main advantages of the GUI are: simple to use, ease of use, and ease of learning. The disadvantage: they are much more complex than the old command line interface.

    One of the most important key concepts underlying modern Graphical User Interface (GUI) is Fitts Law. It is a model of human movement, predicting the time required to rapidly move from a starting position to a final target area, as a function of the distance to the target and the size of the target.(1) It has also been formulated mathematically for those who need the precision. It is named after Paul Fitts who first published the relationship in 1954. The principle is so obvious, once pointed out, that there are only two papers published on it, the first by Fitts in 1954 and a follow up in 1964. There was nothing more to say about the concept itself! However there has been a lot more to say about how to apply the idea in computer GUI interfaces. This principle had to be rediscovered by Operating System designers. Unfortunately, research in one field seldom becomes well known in another, even when it has obvious application. Even today among commercial software development teams, few people understand the significance of Fitts Law and fewer yet know how to make effective use of it. For example, when Microsoft introduced their GUI, Windows 95, They put a menu on each window reasoning that the proximity of the menu would make it faster to access than the Apple system with only one menu located at the top of the screen. Now avoiding patent disputes were probably a large inducement, but no one had bothered to understand that the edge at the top of the screen made Apple's menus effectively a huge target to point at. (The edge means you can't overshoot, the target is infinitely tall.) One Expert demonstrates that because of Fitts's law Macintosh users can access their menus five times faster than Windows users!(2)

    Another principle you need to keep in mind, when designing forms, is firmly established in the field of psychology. In studies of short term memory the magic number of pieces of information that can be remembered is seven plus or minus two.(3) The application to design should be obvious but is violated left, right and center by developers and web designers alike. First, do not throw too much information at the user at a time. They cannot handle it. Look at web sites where they have pop-up menus. Often they will have twenty or more selections. This is just too many choices for the average person to cope with all at once. Second, trying to split up say eight choices into four sets of two choices is also counter productive. Too little information and you are trying to spoon feed the user. Most users do not like this approach either. It is far too paternalistic. We often find web sites with pop-up menus, and only two or three items in the menu. You do not need a menu for that few items!

The creation of new terms to express ideas as we create new areas of expertise is common. It is also the hallmark of a developing field of study. In a new field of study there are few such terms and they have fairly general definitions. As the field matures, distinctions are created to separate shades of meaning that make it easier to express ideas, and communicate about the field with ones colleagues and the public. These new terms help everyone understand and articulate ideas in the field of study. A good example of this process in the area of User Interface is the emerging concept called User Interface Friction. For years Mac users contended that Macs were easier to use than PCs but when pushed to explain how, they had difficulty doing so. Because Mac users were unable to verbalize their experience, detractors dismissed it. Beginning in 2005 Andreas Pfeiffer started research which created the new term. This research helps everyone better understand what makes a User Interface good. More importantly, it points the way for predictable improvement in all platforms and all software. Of course it will take time for this development to be noticed, and evaluated before it will be used. Today most computer professionals have still not yet heard of this new term. This too is not uncommon. The explosion of knowledge in the last 50 years has made it increasingly difficult for even professionals to keep up in their own areas of expertise. No single person know it all - even about their own profession!

Why is it Important?

So why bring all this up? History is interesting, primarily to help understand why things are the way they are today. This understanding can always be achieved through a study of history. However, I have a much more pragmatic reason for bringing these ideas to this discussion. These basic concepts provide us with concrete guidelines for creating programs that are friendly, easy to use, easy to learn and look good too. An understanding of the principles involved allows us to achieve this objective without resorting to trying to follow a myriad of rules that are impossible to remember. So what are the lessons to be learned from the material introduced above?

Lessons from Fitts Law

You are going to be learning to program on the Windows platform. As such you should conform to the Windows Standards. These will be outlined in detail below. Within those standards you will have to make decisions about your interface. Fitts Law indicates that small icons are harder to click on than larger icons. It also indicates that distance traveled is a factor in speed of selection. The first lesson is simple. Don't make your controls too small, and keep controls that relate to one another near each other. The latter concept is dealt with further under the concept of Proximity. So there is a design reason for grouping items and an interface reason for grouping controls. One caution. Just because controls should not be too small, making them unreasonably large will destroy the esthetics of a good layout. You need to find a middle ground for the size of your controls. The second lesson is more subtle. While size of controls is usually determined by their actual size, there are some circumstances which alter the effective size without altering their physical size. This point can be understood by referring to the discussion about Mac versus PC menus above. Apple places their menu at the top of the screen where there is a boundary - the edge of the screen. Because of this edge it is impossible to overshoot the menu, effectively making it much bigger, functionally, than its physical size would suggest. A Windows menu can and often is overshot requiring a correction, and requiring extra time to make the menu selection. Toolbars placed below menus always require extra time to access them. The question is can they be placed somewhere else so as to make them faster to access, and where is that location?

Lessons from User Interface Friction

According to Andreas Pfeiffer, Microsoft's latest version of Windows, named Vista, has performance characteristics closer to Windows 98 and well below the better performing Windows XP. Now we can do nothing about the operating system itself, other than perhaps avoiding or delaying an upgrade, or in view of the research, is that a downgrade to Vista. There are, however, some things we can do to avoid similar poor performance in our own programs. The first lesson is to always use keyboard shortcuts and access keys for the benefit of those for whom performance matters. Most people seem happy to use the mouse, and prefer visual controls such as buttons and toolbars over controls that are tucked away such as drop down menus. There are a sizable number of people who need the programs they use to feel, and be, as responsive as possible. Shortcuts and access keys significantly improve responsiveness and performance. Furthermore these people are often more influential in recommending software to others based on their experience and expertise. Neglect them at your own risk!

Principles of Layout

This section is a summary of the principles of layout as has been established in Print and Online media. The general ideas expressed here also apply to creating a good program interface design. Some of these principles have been in use for hundreds of years. While you may occasionally find somebody breaking the rules, you should have a very good reason for doing so, and you should follow them 95% of the time! It is the fact that they are followed almost all of the time that makes the occasional breaking of the rules effective.

There are several schemas for expressing the ideas necessary for a good layout. The ones I have chosen to present here are the set created by Robin Williams in her book "The Non-Designers Design Book". The reason I have chosen this set of principles is that while some others are great for discussing how to do good design, these principles are the best I have seen for doing good design. The book is a small one and not very expensive. If you are going to do a lot of design of any kind, I heartily recommend it. It is Published by Peachpit Press Inc. and there is far more in the book than I can include here.

The main purpose of good design whether in print, online or in a program interface is to make things more readable, more presentable and more useable! Robin lists four principles of good design. She also tells an excellent story explaining why we need to name and learn the principles. Before I list and discuss the principles here is her story. The point is self-evident.

Many years ago I received a tree identification book for Christmas. I was at my parents' home, and after all the gifts had been opened I decided to go out and identify the trees in the neighborhood. Before I went out I read through part of the book. The first tree in the book was the Joshua Tree because it only took two clues to identify it. Now the Joshua Tree is a really weird-looking tree and I looked at that picture and said to myself, "Oh, we don't have that kind of tree in Northern California. That is a weird-looking tree. I would know if I saw that tree, and I've never seen one before." So I took my book and went outside. My parents lived in a cul-de-sac of six homes. Four of those homes had Joshua trees in the front yard. I had lived in that house for thirteen years, and I had never seen a Joshua Tree. I took a walk around the block and there must have been a sale at the nursery when everyone was landscaping their new homes - at least 80 percent of those homes had Joshua trees in the front yards. And I had never seen one before! Once I was conscious of the tree, once I could name it, I saw it everywhere. Which is exactly my point. Once you can name something, you're conscious of it. You have power over it. You own it. You're in control.

The Four Principles of Page Layout:

Notwithstanding these principles there are a couple other ideas which you need to keep in mind.

Layout for Programs

Now lets take a look at how these principles can be applied to program design. Naturally you need some knowledge of how VB's editor works especially the Toolbox which contains a wide variety of controls which can be placed on a form for user convenience. The latest version of VB also adds a feature known as automatic guides to help with the placement of controls. After you have placed a control on a form and are moving it around, as you near the edge of the form, or another control you will see blue dotted lines appear. This is meant to suggest the amount of spacing between different controls. Unfortunately they are not yet fully implemented. They work in some situations and do not work in others. For example they will suggest how far away from the edge of a form a control should be placed, but if you try to resize the form, no guides pop up to tell you when your edge is the suggested distance from an existing control. The guides also have a tendency to crowd controls together. While the principles outlined above suggest some control should be in close proximity, they also suggest that proximity is most effective if there is some space between elements that do not belong together. The guides do not reflect this fact so you will have to use the guides with discretion.

Start out by drawing up a form layout on paper. Your form must contain:

  1. All the controls we need to get all the necessary input for our program, and
  2. All necessary controls to display all desired output to the user.

The roles of inputs and outputs were discussed in the planning chapter. Keep related things together as suggested by the proximity principle. Sometimes you can use the same controls for both input and output, sometimes this can be a very bad idea. It depends on what you are trying to do, so the needs of the situation, that particular program, must take precedence. It is also helpful to remind new programmers that there is not one best one way to solve or present a particular program. You must keep in mind what your end output needs to be, and what input you will require from the user to create that output.

Draw the form as you want it to be for its final data display. Start with the end in mind as Stephen Covey would say. Then work backwards to where you are currently. In planning and in programming, trying to go from where you are to where you want to be, is an exercise in frustration. Planning and programming are best done backwards. Start at the end and then keep asking yourself what information you need, and what you processing will need to do, to get to your final display. Go backwards one step at a time until you reach your starting point. Remember the basics: In this culture people read from left to right and then from top to bottom. Design accordingly. Your two most important spots are the top left of the form and the bottom right of the form. Typically buttons that cause actions are place in the bottom right and requests for necessary input start at the top left.

Rather than give you an exhaustive list of Dos and Don'ts I refer you again back to the principles outlined above. To these I will add some rules of thumb that will clarify how things are commonly done. This method allows me to keep the lists short.

  • Do not crowd your form. It will give better contrast and make more effective use of white space thereby making the form more readable. Do not spread things out too much on your form. This is the reverse of crowding and just as bad.
  • When using check boxes and radio buttons, always enclose the group of buttons in a group box. Do not intermingle check and radio buttons, since their use is rather opposite.
  • Use labels as descriptive text on your form and place it adjacent to the label or text box it is describing, preferably to the left or above.
  • You may want to group your buttons, but I suggest you do not place them in a group box. If you really must have an enclosing structure, consider the panel, but no enclosing structure is necessary.
  • For very simple programs use buttons. They are visual and your users will appreciate the value of the button being immediately visible.
  • When you start creating more complex programs, and when space on your form becomes scarce, use menus and/or toolbars instead of buttons. Menus cause us to lose in the area of visibility, but free up a lot of space on our forms for other necessary controls. If you use toolbars, you must religiously use tool tips so the user is not expected to remember all those icons.
  • At the present time all text used on forms should be a Sans-serif font. Sans-serif fonts maximize letter recognition. The default font in the editor is Microsoft Sans.

Layout for Windows

The first thing you must learn about actually creating the layout is how to make the user's life easier. The two things to pay attention to in this area are: tab order and shortcuts.

Tab Order is set by the property named TabIndex and it is common to almost all controls. A value is automatically assigned to this property as you create controls on the form. The first control created gets a TabIndex of 1, the second created receives a TabIndex of 2 and so forth. The purpose of the TabIndex property is to determine which control next receives the focus when the user presses the Tab key. Since most people do not think about Tab Order when they are drawing controls on the form, it is simple to go back and manually change the TabIndex at any time. Remember, to have a particular control receive the cursor when the program fist stars up, that control should have the lowest TabIndex. We reserve 0 for this use. The other piece of information you need to know about TabIndex and focus, is that although every control has a TabIndex property, controls which the user is not permitted to interact with, can not receive the focus. This becomes important when combined with the next piece of information.

Shortcuts are methods of going to a particular control directly without having to traverse the Tab Order. Keyboard shortcuts for all controls are set by entering the ampersand '&' character in the Text property of a control. We select a letter to be the access letter for that control, and then type an & in front of that letter. The is how the shortcut is set. For an exit button this changes the contents of the Text property from Exit to E&xit. Shortcuts must be unique on the form, otherwise the second occurrence of the shortcut will never be activated, and that control never receives the focus. When the user holds down the Alt key, all shortcuts which the programmer has created become visible. An underline appears beneath the access letter. After pressing Alt, the user then types the letter, and that control receives the focus. Unfortunately, not all controls have a text property and in the case of some of them their text property is not available during design time. This is where that last piece of information mentioned about TabIndex becomes useful. Since we should always use Labels to describe all controls on our form, and Labels have a TabIndex property, but cannot take the focus because the user is not permitted to interact with them, we can place the shortcut in the label and the focus will jump to the control to the next highest TabIndex which is permitted to receive a focus.

In this way we create methods which allow the user to easily move through our form sequence by pressing the tab key, or by directly jumping to the control they want by using the access key. A good layout and the proper use of TabIndex and shortcuts creates a far superior program than one produced where these two methods have been ignored. When you are programming get these items set up correctly before you start coding. Since you will run the program frequently as you create your code, setting up the interface properly will save you a lot of time in reaching for the mouse, and clicking to place the cursor in the desired textbox.

Pay attention to other Windows programs you are using, especially the commercial ones. Most of them have a pretty good interface. This is partly because they follow the Windows Interface Standards. It is a good idea to do the same with your programs. The big advantage of doing this is that your users will be able to use what they have learned in other Windows programs in your program too. They don't have to relearn everything from scratch. It makes a huge difference. and is the simplest and easiest way to improve your program interface.

Windows Standards

There are a number of standards in the Windows world. I will attempt to list the most important ones without trying to turn this section into a lengthy or exhaustive enumeration.

  1. Use Windows commands not generic words or commands from other platforms. For example: Windows programs use the word Exit to terminate programs, so do not use a word such as Stop, or Quit which is used in Macintosh programs.
  2. For menus use the standard shortcuts on the standard menu commands. For Example: Open is Ctrl-O, New is Ctrl N, Exit is Alt-F4 and so forth.
  3. Forms are a standard shade of gray. This is done because of the prevalence of color blindness especially in the male population. Be selective in your use of color, and it should not be used as the only cue for an important aspect of your program interface.
  4. When using menus, use a standard menu layout. If the menu is no needed, omit it, but don't arbitrarily change its name or location on the toolbar.
  5. Consider whether your form should be maximized. If you design your form to be a specific size, then turn off the Maximize option in the form's properties.

References

(1) Wikipedia - Fitts Law
(2)
(3) Wikipedia - Hick's Law and The Magical Number Seven, Plus or Minus Two