GUI DesignHMI designDifferent needs“Intuitive” designPrinciple of Least SurprisePassive GUI elementsActive GUI elementsFeedbackMinimize effortSimple designwGetGUI v1.0FileMatrixProgressive disclosureUser testingThe EndJan 14, 2019GUI Design2HMI designThere are entire college courses taught on HMI (Human-Machine Interface) designThis is just a very brief presentation on some of the most essential pointsThe goal is (usually) to make the design:“Intuitive”--that is, it behaves as the user expectsSimple--not clutteredComplete--that is, it lets the user do everything that the program is capable of doingFrom CIT591, day one: A program is elegant if it combines power with simplicity3Different needsSomeone who uses the program only occasionally wants to be able to figure out how to use itSimple controlsClear, descriptive labelsHelp filesFrequent users want to minimize effortFew button clicks, little typingNo long sentences that must be readYou should know what audience you are designing forCompromises may be necessary, but with care you can design an interface that isn’t too bad for either groupNobody likes an interface that encourages mistakes4“Intuitive” designAn interface is intuitive if a new user grasps immediately how to use itIt is impossible to make a very specialized task intuitive to someone who doesn’t understand the underlying principlesFor example, 3D animation programsVery few programs are of this natureWhat is “intuitive” varies from person to personHowever, most computer users have some common expectations as to how common controls work5Principle of Least SurpriseThe Principle of Least Surprise says that the GUI should do the least surprising (= most expected) thingUsers have strong expectations about how GUI elements, such as Buttons, workUsers also have strong expectations about how and when files are opened and saved, and a host of other thingsAnything that we “take for granted” in an interface should not be violated without very good reason6Passive GUI elementsWhen text is entered, it just sits there until the user does something more--entering text does not cause something to happenFor example, there may be an OK button to use the textException: Very simple forms with only a text field may respond to the Enter key (even if an OK button is present)Checkboxes (squares) and radio buttons (circles) accept information from the user but don’t take any actionsSelection lists (for example, to choose a language) accept information but don’t themselves do anything with itException: Lists that modify the view (such as the font or the alignment) may have an immediate, visible effect7Active GUI elementsThe most common active GUI element is the ButtonWhen you click a button, you expect something to happenButtons that only make settings for future use should not be ButtonsMenu items may be either active or passiveMenu 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 Of) are just confusingDoes On mean the feature is on, or you have to click it to turn it on?Menu items that open a dialog box to get more information should end in an ellipsis (...), for example, Font...8FeedbackEverything the user does in a GUI should result in feedback as to whether it workedExample: 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 wrongItems 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 happenItems that cannot be used at the moment should not be removed, which will cause the user to waste time looking for them9Minimize effortOne common measure of the effort required to do something is “mouse clicks”Example: Compiling a program in BlueJ vs. Dr. JavaFor example, if the user’s action is successful, provide feedback, but don’t pop up a dialog box with a message such as “Your file has been saved. [OK]”Many editors use an asterisk or dot next to the name of any unsaved fileIf the user’s action is not successful, make sure that the feedback is highly visibleThis is a good place to use a dialog box10Simple designWindows that do everything are too cluttered to use easilyFor example, you should not put your preferences and your working elements in the same windowOne ambulance company used a single window for maintenance information, keeping track of which employees were on duty, and dispatching ambulancesSeparate concerns—present windows that give the user the right tools for what they are working on now11wGetGUI v1.012FileMatrix13Progressive disclosureSimple design does not mean less controlThe Principle of Progressive Disclosure says to hide complexity until it is neededFor example, look at the Preferences... menu on almost any large programYou don’t see all the possible settings at onceSettings are grouped according to what the user is probably trying to do—change the appearance, set security levels, etc.14User testingMost important in GUI design, even for experienced designers, is user testingHave a classmate or friend try out your programWatch as they do itDo not tell them how to use it; let them figure it outIf your test user cannot figure something out, explain how to do it; but make a note of the problem, and fix itEven a minimal amount of user testing can greatly improve the design15The
View Full Document