Graphical User Interface Design: Designing for Usability

Graphical User Interface (GUI) is how users interact with computers. Windows, menus, and icons are the design elements that users click with a mouse or touch with their fingers or a stylus with touchscreens. The design of GUI is a particular field where the designer is interested in aesthetics, only if it is highly usable.

Learn how to create desktop and Internet GUI Java programs at Udemy.com.

Although GUI Design and Web Design are connected and cross paths today, at their essence, they are not the same. Web Design can be beta tested and constantly updated. GUI Design by its very definition must be correct the first time as once it goes into the hands of users in the form of an operating system, there is only so much that can be done. The lines are blurred with online download capability, yet there is only so much that will be done with operating systems without further cost to the consumer. For instance, as a technical writer who needs Office and Adobe programs to do some of my work, I need a laptop to handle these programs. Windows 8 is designed for seamless use across several platforms. Yet with no touchscreen, no physical mouse, it was clunky at best until they released Windows 8.1. This upgrade assisted, yet it doesn’t always agree with the functional use of a non-touch screen laptop. This all has to do with GUI Design and usability.

Why GUI Design is Important

Old programmer wisdom dictated that if it was difficult to write, then it should also be difficult to use. It was the fault of the user if they couldn’t figure out a program; it’s just a learning curve. Yet is it? The science of usability says no. We can design interfaces to be usable.

Difficult interfaces are costly. The 2000 Presidential Election debacle in Palm Beach, Florida showed how an interface that’s too difficult to use can cause serious issues. The Journal of the American Medical Association published a study stating that a medicine ordering system led to 22 types of medication errors with difficult to read fonts, patients’ records on several pages, without their name on each page, and other issues which led to errors in dosage and subsequent deaths. Interface issues are often the cause of human error.

GUI can also be a marketing tool. A user-friendly interface can turn a first time visitor into a loyal customer. As a GUI designer, you have the choice between good enough and usable. Macintosh pioneer, Jef Raskin, said, “As far as the customer is concerned, the interface is the product.”

GUI Design

There are two major steps in GUI Design: design it to support users and not hinder them, and select the right controls for the user.

Usability

You are not only designing the look of an interface you are designing interaction. Users don’t sit down at the computer and think about the interface, how smartly or poorly its designed, what colors were chosen, and where the controls are. They just want to write an email. They expect that it will go seamlessly, that they will get it done in the time they planned to do it. They bought this interface, it must work for them.

GUI Principles

These principles will guide your on developing a GUI Design that is usable and pleasing to your users.

Simplicity

When focusing on simplicity, only go as simple as you need to for usability and no further. You lose power the more simply you go. For instance, Adobe programs are notoriously difficult to use, but they are professional programs that are extremely powerful. Office programs by comparison are much simpler, yet have enough power to handle great business tasks. Online publishing tools are extremely simple to use, but they are very limited in features and therefore limited at what you can do with them. It is important to know who your user is, what their education level is, what they want to do with your interface, and design accordingly.

Consistency

This principle is so easy to ignore, but when you design an interface to look and work a certain way, you must be consistent across all elements. You should follow consistency  in words you select, and in the orientation of objects.

Want to begin designing elements? Learn how to design interface elements in Photoshop today!

Accessibility

You must make your interface accessible. It is unethical to ignore this principle. We cannot alienate the disabled when designing interfaces. Vision, hearing, and mobility issues must be taken into consideration when designing.

Vision problems are the most common. Code the interfaces to respect user window settings allowing those with vision impairments to see the color combinations that they have set. To further assist this mission, make sure every image has a description, so that screen readers can tell those with vision impairment what the image is of. It does them no service for their screen reader to say there is an image and nothing else. You can also allow the fonts to be sizable for users.

For those with hearing impairment, make sure there is nothing in the interface which requires hearing to use. Don’t use sounds as signals without adding an additional feature for the hearing impaired.

People with mobility issues need the ability to use either a keyboard or mouse to control the interface. Depending on the disability one or the other will be difficult for them. Design so that both can be used to do the same functions.

Feedback

Users expect that they will have an indication that their task was logged. Have you ever placed an online order and not known if you actually pressed the order button, wondering if you should press it again? A simple change in the look of the button or an indicator that the system is processing would be ever so helpful.

When buttons are pressed in the physical world, we feel something. When we strike a key on the computer we feel the action. Buttons on screen cannot be felt. Some phone applications allow a vibrating action when a button is touched. You can simply change the look of the button so that the user knows their action was heard.

Create a GUI iPhone app design at Udemy.com.

Conventions

Existing interfaces have followed standards. The exit is the X on the top right. Menu and navigation is usually horizontally along the top, and sometimes vertically on the left. Conventions are different in other parts of the world so research when using icons, colors, and images and use conditional tags if needed. You can break convention, but only if it is better for the user to do so; coolness isn’t good enough.

Error-Tolerance

Users are error-prone, after all, they are human. Interfaces must be prepared to help the user when they make an error. A verification prompt appearing when something is deleted adds an area of protection. A cached area where things can be retrieved is also helpful. Something as simple as a back button can assist as well. We are conditioned to be able to fix these mistakes, don’t make your interface incapable of this convention.

Conclusion

If you think of the user at all points in the design process you will have a usable graphical user interface which will communicate with your user and meet their needs.