3461 UI Examples Real world user interface examples

3461 Giving the user choices is good? This issue may be important to a programmer but the user doesn’t care. Every time you provide an option you’re asking the user to make a decision. Don’t force the user to make decisions about things they don’t care about. Why is this dialog a “wizard”? Adapted from User Interface Design for Programmers, J. Spolsky, 2001

3461 Icon Design- A small change can mean a large difference 63% 91% Example from Highway Safety, percent of licensed drivers who can explain the meaning of each sign. From Smiley & Bahar, The Science of Highway Safety, Durham, March 2002

3461 Where’s Waldo?

3461 Error Message The message is entirely unhelpful, gives no indication of what the error is, what to do to solve it, or even the location of an error log if one existed.

3461 More Error Messages

3461 Requests for Proposals User Interface Requirements

3461 User Interface Requirements (1 of 3) Free Text to Use in Your Request for Proposals (RFPs) 1. The software should be usable without reading a printed guide. If the complexity of the tasks being automated cannot feasibly be embedded into the software interface, reading a printed guide may be unavoidable. In this case, the most that any individual user should have to read for a particular role is 50 pages-short enough to read in one sitting. 2. Users should be able to accomplish every task and entry with the fewest possible keystrokes. For instance, dates should not necessitate typing four digits for the year unless the context of the given field leaves considerable doubt as to which millennium might be intended. In many cases, keying in any characters at all for the year may be an unnecessary expense of the users' time.

3461 User Interface Requirements (2 of 3) Free Text to Use in Your Request for Proposals (RFPs) 3. The interface should enable all interaction techniques and input to be discoverable and chosen from a browse-able, hierarchical structure, arranged in order of the functions the user needs to perform. Until recently this simply meant supplying an exhaustive menu or menu-like outline of choices, supported by dialogs with options and click-able choices. More recently, this requirement is being satisfied by multiple graphical choices, in the form of icons and segmented, click-able graphics known by various names, such as imagemaps. In either case, what this requirement specifically precludes is reliance solely on any of the following techniques: command line syntax; parameter (INI) file options not built into the interface; techniques supported only by combination keystrokes, mouse techniques, or combinations thereof; techniques requiring knowledge of special, manually entered values.

3461 User Interface Requirements (3 of 3) Free Text to Use in Your Request for Proposals (RFPs)  4. The software should enable users to do things out of order without being penalized.  5. The software should enable users to make outright mistakes without being terminated, executed, canceled, re-booted, or erased.  6. The system should save all of what the users type, by default, meaning without extra steps.  7. Users should be forewarned when any work is over- written, undone, or erased.  8. The interface and messages should make it clear why the program does what it does.

3461 Gestalt Principles

3461 Gestalt Principles of Perceptual Organization (1 of 2)  Proximity: elements near each other tend to be seen as a group Gestalt Principle UI Example Rosson & Carroll, Usability Engineering, 2002, p. 113  Words on a menu bar, columns in a tabular display  Similarity: elements that share visual characteristics (shape, color, size, etc.) tend to be seen as a group  Overlapping windows, menus, dialog boxes  Toolbar icons  Closure: there is a tendency to organize element into compete closed figures

3461 Gestalt Principles of Perceptual Organization (2 of 2)  Area: there is a tendency to group elements in a way that creates the smallest possible figure Gestalt Principle UI Example Rosson & Carroll, Usability Engineering, 2002, p. 113  Icons on a screen  Symmetry: there is a tendency to see symmetric elements as part of the same figure  Paragraphs of text, justification of widgets  Window manipulation controls (e.g. Scroll bar, selection handles)  Continuity: there is a tendency to group elements into continuous contours or repeating patterns

3461 Documentation

3461 Paper-based Documentation  Familiar  Faster to read paper over screens  Highly portable, can be used anywhere  Easy to visual scan at varying levels of detail  Can easily take notes on it with normal writing tools  People like owning books and other manuals Advantages  Finding and turning to a page is an extra task  Paper is bulky, takes up office or desk space  Large manuals may seem intimidating to novices  Lack of coordination between paper and software  Fixed organization of content  Paper deteriorates over time Disadvantages Rosson & Carroll, Usability Engineering, 2002, p. 279

3461 Documentation  Manuals  Demo versions  Interactive tutorials  Paper and online manuals These are all types of things users do not want to spend their time doing- manuals are a last resort for most users. Instead, users today demand software which is “walk-up- and-use”. Users don’t read the manual.

3461 Support walk-up-and-use by...  Training-Wheels Environment. Reduced functionality interface where the user can do less and is protected from serious mistakes. By limiting actions available, user is redirected toward core functionality. Hiding the documentation in the UI  Icon Tooltips. Name or brief description which appears in a pop-up label box when the user pauses the mouse pointer over the icon.  Balloon Help. User can explicitly turn on and off pop-up help which provides assistance at a level of detail greater than found in tooltips.