Scalari.net

I’ve touched before on the importance of prioritizing the end user when designing any kind of user interface and in my work with Novelty I’ve gained a keen interest in the science of GUI design. Coincidentally, I’ve recently stumbled across a few examples of really bad GUI. I first intended this post to be an attack on what I can easily say is the worst interface ever, but instead I opted to write a list of all the things I’ve learned and then it’s up to you to decide whether or not a particular piece of software abides to it or not.

So if you’re not a GUI nerd like me or even know what I’m talking about, spare yourself the trouble and stop reading. There be dragons ahead. A lot of the things I’m going to go through are the very basics, but you’d be surprised to see how some applications fail at even that.

Follow conventions

We’ve had graphical interfaces for over 20 years. During all this time we’ve been conditioned to expect certain interface conventions so why not do every user a favor and abide by them. A few examples are:

• Left mouse button – Selection, activate.
  Right mouse button – Secondary action, context menu.
• Use common keyboard shortcuts such as Ctrl+C, Ctrl+V, etc.
• Use common controls: menus, toolbars and dialog boxes for your target platform(s).
• Hover hints.

Separation

Arrange your functions in logical parts or modules, such as menus and windows. When a user is searching for a particular function, make sure that path is straight-forward and obvious. The user should not have to jump between modules to perform a single task.

Ideally you may want to only display the modules that the user needs at one moment. Prioritize modules by frequency of use. The most used couple of modules should probably always be displayed.

Abstraction

The user should not have to know every intricate detail of a system to be able to use it. Complicated functions and information may need to be visualized graphically if possible. If a common function requires a sequence of user actions you may want to wrap them up with heuristics to turn it into a single button press or a step-by-step wizard.

Assistance

Never assume that your user has used your software before or any similar software. One job of the GUI is to translate the complexities of your system and deliver functionality to all users, regardless of their previous experience. Regular functions should be placed in such a way that the user doesn’t have to search in frustration.
Help documentation is a necessity for any application, but should not act as a band aid for an otherwise bad interface.

Eligibility

Express your interface in “plain english”. Avoid technical jargon (see Abstraction), abbreviations and ambiguous wording. Be consistent. If you’re unable to properly label a button because it’s too small then make the button bigger. Never compromise on eligibility for the sake of layout. Icons should be meaningful and apply to their respective context.

Access

Functions should be accessed with as few actions from the user as possible. Offer multiple ways to access common functions. As an exercise, count how many ways you can access the copy-function in a typical Windows application.

Inference and default behavior

Don’t ask the user to supply information that the application can infer from other sources. Basically, if the application can make an educated guess or fall back on a default setting it should.

Bonus points

The following points aren’t things that may apply to all GUI’s, but if implemented could add an additional layer of usefulness:

• If the user can customize the user interface.
• If the GUI can adapt to different resolutions and size conditions.
• If the application/interface can detect and warn the user before an error occurs.
• If the user never has to read the help files.
• If the entire interface can be localized.

Gallery

A few of the GUI’s I looked at in preparation for this post:

Game maker

Blender

Novelty