GUI Design: Principles of Intuitive and Efficient Human-Machine Interfaces, Slides of Computer Science

Download GUI Design: Principles of Intuitive and Efficient Human-Machine Interfaces and more Slides Computer Science in PDF only on Docsity!

GUI Design

HMI design

• There are entire college courses taught on HMI (Human-Machine Interface) design
• This is just a very brief presentation on some of the points that I consider most essential
• The goal is (usually) to make the design:
  • Intuitive: It behaves as the user expects
  • Simple: Not cluttered
  • Complete: It lets the user do everything that the program is capable of doing
• From CIT591, day one: A program is elegant if it combines power with simplicity

“Intuitive” design

• An interface is intuitive if a new user grasps immediately how to use it
• It is impossible to make a very specialized task intuitive to someone who doesn’t understand the underlying principles - For example, 3D animation programs - Very few programs are of this nature
• What is “intuitive” varies from person to person
  • However, most computer users have some common expectations as to how common controls work

Principle of Least Surprise

• The Principle of Least Surprise says that the GUI should do the least surprising (= most expected) thing
• Users have strong expectations about how GUI elements, such as Buttons, work
• Users also have strong expectations about how and when files are opened and saved, and a host of other things - Anything that we “take for granted” in an interface should not be violated without very good reason

Active GUI elements

• The most common active GUI element is the Button - When you click a button, you expect something to happen - Buttons that only make settings for future use should not be Buttons
• Menu items may be either active or passive
  • Menu items that are just settings should have a checkmark in front of them when “turned on”
  • Menu items that change their labels (such as On or Off ) are just confusing - Does On mean the feature is on, or you have to click itDocsity.com

Feedback

• Everything the user does in a GUI should result in feedback as to whether it worked - Example: Checkboxes get checked, radio buttons get “pushed,” typing shows up in text areas, etc.
• Clicking a button should either show the results, display a message that the action occurred, start a “progress bar” going, or pop up a dialog box that says what went wrong
• Items that cannot be used at the moment should be made inactive (so that they are visibly “grayed out”) - This also solves the problem of what to do if the user clicks on one—it can’t happen - Items that cannot be used at the moment should not be removed, which will cause the user to waste time looking for them

Simple design

• Windows that do everything are too cluttered to use easily - For example, you should not put your preferences and your working elements in the same window - One ambulance company used a single window for maintenance information, keeping track of which employees were on duty, and dispatching ambulances
• Separate concerns—present windows that give the user the right tools for what they are working on now Docsity.com

Progressive disclosure

• Simple design does not mean less control
• The Principle of Progressive Disclosure says to hide complexity until it is needed - For example, look at the Preferences... menu on almost any large program - You don’t see all the possible settings at once - Settings are grouped according to what the user is probably trying to do—change the appearance, set security levels, etc.

The End