Graphical Usable Interfaces

Introduction

In my experience of working with various operating systems, I have also seen various graphical user interfaces. Although they almost invariably build upon the same elements (windows, buttons, icons, ...), they differ quite a bit in appearance and usability. This essay collects my thoughts and ideas about GUIs.

Of course, what makes a good GUI is subjective. The GUI that works well for you is the one that you are comfortable with, but it may be a horrible choice for me. Therefore, everything on this page should be taken with a grain of salt. But then, I believe everything in life should be taken with a grain of salt. There, another subjective opininon!

Things to Do

This section lists things that I think are good for GUIs.

Give Optical Clues

Graphical user interfaces can tell the user what's going on without the user having to read a lot of text. To take full advantage of this opportunity, we must strive to provide optical clues wherever possible. For example, standard icons and standard button colors can tell the user what the message is and what the available responses are, without having to read any text.

Provide Instant Access

If you've ever worked with a system that did not provide an instantly accessible list of open windows, you know what a boon to productivity such a list can be. For example, if your system provides a list of open windows at the bottom of the screen, switching to a specific window is as simple as locating its representation at the bottom of the screen, and activating it. By contrast, if no such list were provided, you would have to search through all your open windows to find the right one. Imagine that the window you're looking for is at the bottom of a stack of overlapping windows, and you will see what I mean.

Provide Keyboard Access

However many buttons we put on our pointing devices, and no matter how sophisticated our handwriting recognition becomes, we will never be able to match the versatility and speed of the keyboard for certain tasks. Since we need to use the keyboard anyway, we can further boost efficiency by using the keyboard as much as possible. Typing a keyboard shortcut is almost always quicker than accessing the same command with a pointing device, especially if you would have to move a hand from the keyboard to the pointing device first.

Use the Edges

Obviously, large targets are easier to hit than small ones. Objects at the edge of the display are virtually infinitely large, provided that the pointer does not move off the edge of the display. We can enhance productivity by using the edges as much as possible. Let's put the menu bar, a list of currently open windows, a list of common commands, and a list of commonly used applications at the edges of the display. This will make each of them quickly accessible by mouse.

Use Descriptive Labels

Too often, dialogs let the user choose between an Ok and a Cancel button. Ok or Cancel what? Well, you should read the text in the dialog. Wrong! The designers should have put descriptive labels on the buttons. If the button causes your document to be saved, why not write ‘Save’?

Things to Avoid

This section gives an overview of things I have observed in user interfaces, but that I believe are better avoided. Some of these can be good in moderation, but are often overdone.

3D

3D user interfaces are hyped by some as the next big thing in UI land. I believe they are a very bad idea. The reason is that our vision, and our computer monitors, are fundamentally 2-dimensional. You do not see what's behind the foremost surfaces. This is exactly what makes searching for objects on your Real desktop so time-consuming; you have to look under other objects to find what you're looking for. Carrying this paradigm to the computer desktop is a mistake.

Distraction

Don't you just love blinking text, wild colors, animations in the corner of your eye, and the like? Well, I don't. It's good no notify me of new events, but if I want to keep working before I take care of them, I should not be distracted until I take action just to get rid of the annoyance. If new mail arrives, you can play a little sound and put a little note (e.g. change the icon for the inbox). Bouncing icons or dancing penguins are too much, though.

Popups

It's very annoying when you're typing some text, then suddenly a new window springs to the foreground, takes the focus, and you find yourself inputting all kinds of garbage into that window. With a bit of bad luck, you'll even close the window before you saw what it's for, or select to execute an action you did not want to perform. Popups should be avoided whenever possible, and not allowed to steal focus if they occurr at all. This also applies to opening new windows; Display the new window as soon as possible, to avoid the user switching away to another task and later getting interrupted by the opening of the window.

Small Targets

Isn't it annoying when you click just beside the icon you wanted to click on? Especially when there's another icon right where you clicked, causing you to perform a different action from the one you intended? This would have been avoided if the designers had used larger icons. Of course, this allows them to fit fewer icons in the same space. But that's actually a Good Thing! It means you have fewer icons to search before you find the one you're looking for.

Example

I'm (on and off) working on a mockup that exemplifies some of the ideas I have described here. When it's done (or nearly so), I will post it on this page. Unfortunately, my artistic skills are somewhat limited, so it will take me some time to get the mockup to look anywhere near what I have in mind. Don't hold your breath.

The mockup will feature an interface that has a menu bar accross the top of the screen, icons that bring up things like the user's home directory and empty (new) documents on the right, icons for open windows along the bottom edge, and icons performing actions on the current document on the left edge of the screen. There will be a window which will exemplify visual cues by having different colors on buttons.