Design Principles and Guidelines Hints for good design

Dec 022 Attributes of Good UIs Invisible They don’t get in your way User focuses on task, not on the tool Minimal training Easy to learn Good manual (perhaps online) emphasizing how users can meet their goals Training transfers easily to practice Error savvy Predictable: NO SURPRISES! Prevent the user from making errors Easy to recover from errors Avoid information overload

Dec 023 Attributes of Good UIs (2) Allow people to perform their tasks well a good UI promotes efficiency! Flexible Seems “intelligent” “do the right thing” without asking; remember user patterns People have to like it! “It is easy to make things hard. It is hard to make things easy.” -- A. Chapanis, ‘82

Dec 024 Design Guidelines There are helpful UI design guidelines Design guidelines are: a set of design rules to follow at multiple levels of design (e.g., early & late) obvious to users of poorly designed interfaces easy to ignore when deadlines approach not complete hopefully built on psychological underpinnings and an understanding of users

Dec 025 Guidelines for Building Good UIs Follow graphic design principles Use standard language conventions Minimize load on short-term memory Design for consistency Provide clear feedback Prevent errors & provide error correction Use sensible conceptual models Let’s discuss some of these…

Dec 026 From IBM’s RealCD application Graphic Design & Colour Choice A good UI will appropriately direct the user’s attention. How? One way: use colour and layout - black button on black background is bad colour choice - shouldn’t need label to tell you this is a button

Dec 027 Graphic Design & Colour Choice (2) Keep related objects together Appropriate alignment & spacing (readability) Decorations can provide extra information Use white space (vital in WWW design) Use only a few fonts & colours (5-7 colours max) Remember colour deficiency (5% of males are colour blind) A Toolbar from MS Word

Dec 028 Bad? Speak the User’s Language Use common words, not “techno-jargon” Use the vocabulary of the user Refer to the user’s objects when giving feedback, e.g., “your document…”, “your graph…” Allow full-length names in forms Avoid spatial-linguistic conversions, which can be extremely confusing for users pick one or the other; examples…

Dec 029 Spatial - Linguistic Examples Placing objects on a canvas by specifying (X, Y) coordinates linguistic, use keyboard to enter X, Y by relative positions to other items spatial, use cursor/mouse Selecting a quantity specify a known value linguistic, use keyboard to enter value relative (more, less) spatial, use dial

Dec 0210 Problem? Less is More The KISS Principle: “Keep it simple, stupid!” Use concise language; avoid verbiage Avoid extraneous pictures & information fewer options and menu choices reduce planning time reduce manual size, etc. avoid information overload!

Dec 0211 Minimize User Memory Load Short-term memory of people. capacity of 7 +/- 2 items, with decay of 30 seconds to 2 minutes Recognition is easier for us than recollection! Use menus rather than keyed input Prompts should provide formats for required data Don’t require retyping of remembered info Use pervasive, generic rules for common interactions, e.g., cut, copy, paste

Dec 0212 Be Consistent Size, colour, wording, location, ordering of objects Same command should always have same effect in different contexts. Following convention helps e.g., Cut/Copy/Paste Seems easy but it’s often not followed Useful since it allows user to generalize from their own experience

Dec 0213 Inconsistency CMS - XEDIT Editor in one context, D10 means “down 10 lines” in another context it means “delete 10 lines” Current selection (CS) in graphics editor create a new object, it becomes CS duplicate an object, the original remains CS

Dec 0214 Lexical Consistency Make use of “words” consistent with common (real-world) usage Examples: red = bad/stop, green = good/go left arrow = less, right arrow = more Use consistent abbreviation/capitalization rules CONTROL, CTRL, Ctrl, Control  which is it? Use mnemonic names rather than codes

Dec 0215 Syntactic Consistency Error messages at same (logical) location in all situations Give command first -- or last (e.g., after arguments to the command) Don’t change ordering based on context! The user will have more to remember Menu items at same location in menu Muscle memory helps the user here

Dec 0216 Semantic Consistency Global commands should always be available: Help Cancel Undo Operations should always be valid on all reasonable objects if object of class “X” can be deleted, so can object of class “Y” if it can’t be deleted, the user will want to know why

Dec 0217 Providing Feedback Lexical feedback on ‘words’ that are used Syntactic feedback on grammar, i.e., the order in which ‘words’ are used Semantic feedback on the meaning of operations It is vital to provide clear, consistent, meaningful feedback to users based on their inputs More…

Dec 0218 Lexical Feedback Legal input in the input “language” may be keyboard-based, mouse-based, voice- based, etc. Using the right tokens, gestures, clicks, etc. Feedback given using Cursor movement (e.g., valid keypresses only generate cursor movement) Cursor image Keyboard echo (e.g., don’t echo illegal words) Selection highlighting, e.g., for cut & paste or changing text style

Dec 0219 Syntactic Feedback Ensure that the sequence of “words” entered is grammatically valid Feedback provided when the sequence is illegal Examples… Wrong number of arguments provided Menu item under cursor in reverse video indicates it will execute if you release mouse button (absence of this means it will not execute)

Dec 0220 Semantic Feedback Command is understood: it may be helpful to restate the command, e.g., by echo or by highlighting the icon in some way Command is underway: provide a count-down or progress bar makes the processing appear faster (placebo)

Dec 0221 Semantic Feedback (2) Command is completed: provide its results prompt for next command All three forms of semantic feedback are not always necessary select one or more depending on the task of interest Examples: Progress bars not needed for short computations Incomplete data might not be displayed

Dec 0222 Feedback Placement Put feedback where the eyes are! Examples… Insertion point for text Where the screen cursor is located. Audio output can also provide useful feedback. sounds on error, failure, success voice, for more detailed responses environmental conditions may not permit audio feedback

Dec 0223 Error Prevention Preventing errors should take priority over correcting for them. Why? Avoids “fear of failure” on the part of the user Allows the user to work faster Things to consider Key placement “distance” between commands menu items or typed names Suppress unavailable commands where appropriate Confirm dangerous actions, e.g., delete files

Dec 0224 Error Correction Lexical typing mistakes (automatic in MS Word) Syntactic re-specify just the parameter in error, or restart at beginning of command (may be necessary if dependent words are used) Semantic cancel the operation underway undo previous command(s)

Dec 0225 Layout is Important From the Winter Olympics web site… Same spacing Which one? Click for “Full Story”

Dec 0226 Mismatch Between Designer & User Conceptual Models Result in errors on the part of the user Slow the user down Result in a great deal of frustration on the part of the user Coming up with good design models that mesh well with commonly held conceptual models is very difficult Have to know a lot about the users requirements and typical characteristics

Dec 0227 Why are Design Guidelines Insufficient? Too specific and/or too general there may be a huge number of guidelines that are not specifically focused enough to provide useful help A standard design might not address all the issues Macintosh standard UI could be all dialog boxes and menus. Who is to say that this will be sufficient for the users?

Dec 0228 Summary UIs are hard to design! Guidelines can give us general principles to follow Guidelines can be hard to apply (too specific or too general)

Course Summary

Dec 0230 Program Categories Sequential Event-driven Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0231 Types of Events User-initiated events System-initiated events Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0232 Java Events Event class hierarchy Event sources E.g., mouse events, key events Listening for events Using Listeners vs. Adapters

Dec 0233 Swing Basics AWT vs. Swing Creating a window using JFrame JFrame’s content pane

Dec 0234 Wimp Elements Windows Icons Pointers Menus Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0235 Containment Hierarchy Top-level containers E.g., JFrame Intermediate containers E.g., JPanel Atomic components E.g. JButton

Dec 0236 Menus Recognize vs. recall Parts E.g., menu bar Types E.g., popup, cascading Features e.g., separators Designing

Dec 0237 Widgets Buttons Combo boxes Tool bars Text components Sliders Scrollbars etc. Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0238 Buttons Push Radio Checkbox Modal Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0239 Text Components Output (aka non-editable) Labels Labeled borders Tool tips Message Boxes Input/output (aka editable) Text fields Text areas Editable combo boxes Dialog boxes Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0240 Validating Input Keystroke-level Focus-level Data-model level Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0241 Navigation Techniques Clicking with mouse pointer Generates mouse/focus events TAB key Generates focus event ENTER key Generates key/action events Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0242 Widget/Component Layout The task: determine size and position of each component Component size properties critical These are… Preferred size Minimum size Maximum size Used in different ways (sometimes ignored!) by layout managers

Dec 0243 Widget Layout Models Absolute (aka fixed) Control for component size and position Struts and springs Control for component position Variable intrinsic size Control for component size Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0244 Java’s Layout Managers BorderLayout FlowLayout GridLayout BoxLayout GridBagLayout CardLayout OverlayLayout etc. Know.. What they are Advantages Disadvantages Features Comparisons Etc.

Dec 0245 Output Model Coordinate systems Device Physical Things to know about: Pixels, raster, display size, resolution, video RAM requirements, aspect ratio, dot pitch Color models RGB, HSB

Dec 0246 Java’s Graphics Features Drawing primitives for… Shapes, lines, curves, images, text Text characteristics Font family, size, style Font metrics Images File formats

Dec 0247 Images Images File formats gif, jpg, tiff, bmp Drawing images in panels

Dec 0248 MVC Architecture Model Holds & manages data View Implements visual display of data/component Controller Maps input into commands

Dec 0249 MVC and Java/Swing Know how MVC is implemented in Swing component View & controller combined into UI delegate

Dec 0250 Design for Humans SR Compatibility S = Stimulus, the input device that is being manipulated or stimulated R = Response, the visual, aural, or kinesthetic sense that is affected by the stimulus Compatibility refers to the correctness of the match between the stimulus and the response

Dec 0251 Human Limits and Capabilities Bailey’s framework Senses Vision Aural Kinesthetic

Dec 0252 Types of Limits Sensory (visual/audio intensity/frequency) Responder (Fitts’ law) Cognitive (short-term memory)

Dec 0253 UI Design in the Workplace Human factors User-centered job descriptions User-centered design process Conceptual models and their differences

Dec 0254 UI Evaluation Evaluation paradigms Evaluation techniques Heuristic evaluation Cognitive walkthroughs Usability testing REAL framework

Dec 0255 Characteristics of Good UIs Consistency Lexical, Syntactic, Semantic Feedback Lexical, Syntactic, Semantic Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload

Dec 0256 Readings Java/Swing Tutorial MVC article by Fowler Java API (Swing components and other classes used in 3461) PowerPoint slides Demo program code and documentation

Dec 0257 What’s left No more classes Office hour: Wednesday, December 4 th, 2-3pm More office hours next week (to be posted on the webpage) Exam: Thursday, December 12 th, 7-9:30pm

Dec 0258 Thank you!