Krug 8 Dialog Boxes Toolbars Jeff Offutt http://www.cs.gmu.edu/~offutt/ SWE 205 Software Usability and Design

Today’s Topics Web Developer Teams Arguing (Krug, Ch 8) Dialog Boxes Toolbars 12-Nov-18 © Jeff Offutt

Religious Arguments Engineering decisions vs. personal preferences UI teams often argue about design choices based on subjective opinions Few discuss choices objectively Ramifications Opinions don’t change Team spirit degrades and tensions emerge A major purpose of this class is to give you the knowledge to make objective engineering decisions 12-Nov-18 © Jeff Offutt

Web Designers are Web Users Many web designers have strong feelings about what they like and don’t like As users ! Being web designers make them think their feelings are relevant Even worse, web designers mistakenly think that most users have similar preferences First understand Then be understood 12-Nov-18 © Jeff Offutt

Differing Goals Conflict Management and Marketing want to increase revenue Hype Cool snazzy cuteness Engineers want to play with fun technology Managers think their opinions should be relevant Users just want to achieve a goal There is no “average user” 12-Nov-18 © Jeff Offutt

Let’s look at some more objective engineering principles … How To Solve This ? Know the users You must analyze the users to understand them You must meet the users Know & apply general engineering principles As discussed in this class … Test the UI on the users Debates waste time and disrupt teams User testing gives evidence Let’s look at some more objective engineering principles … 12-Nov-18 © Jeff Offutt

Today’s Topics Web Developer Teams Arguing (Krug, Ch 8) Dialog Boxes Toolbars 12-Nov-18 © Jeff Offutt

Dialog Boxes Dialog boxes are often inconveniently designed Unnecessary In the wrong place Labeled with confusing text Dialog boxes are interruptions Dialog boxes are excise Use dialog boxes for: Exceptional interactions Dangerous interaction Not for navigation … 12-Nov-18 © Jeff Offutt

Modal Dialog Boxes Only use modal boxes for emergencies Modal No other interaction is allowed until the dialog box is closed Modal boxes are: Easy to program Easy to understand Intrusive Too common Do not put error messages in modal dialog boxes Error messages should disappear with the next interaction Only use modal boxes for emergencies 12-Nov-18 © Jeff Offutt

Modeless Dialog Boxes Modeless The “owning” program continues Usually have terminating commands (“close”) Users must know when they will go away Find box is modeless Following their mental models Four types of dialog boxes … 12-Nov-18 © Jeff Offutt

(1) Property Dialog Boxes User can change settings of an object font printing options 12-Nov-18 © Jeff Offutt

(2) Function Dialog Boxes User performs some function find print spell checking 12-Nov-18 © Jeff Offutt

(3) Bulletin Dialog Boxes Gives the user some feedback error message confirmation messages Note that users do not request these! When opening Blackboard Our favorite 12-Nov-18 © Jeff Offutt

(4) Process Dialog Boxes Tells the user the system is busy Hour glass is not always sufficient Process box should: Explain to the user what’s happening Express that it is unusual State how much longer … this is hard! Provide a cancel 12-Nov-18 © Jeff Offutt

Today’s Topics Web Developer Teams Arguing (Krug, Ch 8) Dialog Boxes Toolbars 12-Nov-18 © Jeff Offutt

GUI Menus: Tool Bars A tool bar is a menu of buttons Permanent menu Designed for knowledgeable users Use to provide fast access to commonly used functions Three distinct toolbars 12-Nov-18 © Jeff Offutt

Tool Bar Tactics Use icons, not text Buttons should not disappear Text takes longer to read Text + pictures use a lot of space The little helper flags are great! Buttons should not disappear Inactive buttons should not “depress” when clicked They should be grayed out, if possible The worst error messages are those that say “you can’t do that now.” 12-Nov-18 © Jeff Offutt

Tool Bar Tactics (2) When tool bars are available, menus are used to teach Hmm … new users may never go to the menus … Types of buttons on tool bars Momentary (traditional) Push it and it activates something Used to start a function Latching Button stays depressed Used to change state Pop-ups Changes size of text 12-Nov-18 © Jeff Offutt

Tool Bar Tactics (3) Tool bars should be customizable Movable Reshapable Let users add / remove buttons Let users change size of buttons 12-Nov-18 © Jeff Offutt

Summary of Today’s Topics Web Developer Teams Arguing (Krug, Ch 8) Dialog Boxes Toolbars 12-Nov-18 © Jeff Offutt