design principles and guidelines hints for good design
TRANSCRIPT
Design Principles and Design Principles and GuidelinesGuidelines
Hints for good design
Dec 02 2
Attributes of Good UIsAttributes of Good UIs
InvisibleThey don’t get in your wayUser focuses on task, not on the tool
Minimal trainingEasy to learnGood manual (perhaps online) emphasizing how users can meet their goalsTraining transfers easily to practice
Error savvyPredictable: NO SURPRISES!Prevent the user from making errorsEasy to recover from errors
Avoid information overload
Dec 02 3
Attributes of Good UIs Attributes of Good UIs (2)(2)
Allow people to perform their tasks wella good UI promotes efficiency!
FlexibleSeems “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 02 4
Design GuidelinesDesign Guidelines
There are helpful UI design guidelinesDesign guidelines are:
a set of design rules to followat multiple levels of design (e.g., early & late)obvious to users of poorly designed interfaceseasy to ignore when deadlines approachnot completehopefully built on psychological underpinnings and an understanding of users
Dec 02 5
Guidelines for Building Guidelines for Building Good UIsGood UIs
Follow graphic design principlesUse standard language conventionsMinimize load on short-term memoryDesign for consistencyProvide clear feedbackPrevent errors & provide error correctionUse sensible conceptual modelsLet’s discuss some of these…
Dec 02 6
From IBM’s RealCD application
Graphic Design & Colour Graphic Design & Colour ChoiceChoice
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 02 7
Graphic Design & Colour Graphic Design & Colour Choice (2)Choice (2)
Keep related objects togetherAppropriate 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 02 8
Bad?
Speak the User’s Speak the User’s LanguageLanguage
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 formsAvoid spatial-linguistic conversions, which can be extremely confusing for users
pick one or the other; examples…
Dec 02 9
Spatial - Linguistic Spatial - Linguistic ExamplesExamples
Placing objects on a canvasby specifying (X, Y) coordinates
linguistic, use keyboard to enter X, Y
by relative positions to other itemsspatial, use cursor/mouse
Selecting a quantityspecify a known value
linguistic, use keyboard to enter value
relative (more, less)spatial, use dial
Dec 02 10
Problem?
Less is MoreLess is More
The KISS Principle: “Keep it simple, stupid!”Use concise language; avoid verbiageAvoid extraneous pictures & information
fewer options and menu choicesreduce planning timereduce manual size, etc.avoid information overload!
Dec 02 11
Minimize User Memory Minimize User Memory LoadLoad
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 inputPrompts should provide formats for required dataDon’t require retyping of remembered infoUse pervasive, generic rules for common interactions, e.g., cut, copy, paste
Dec 02 12
Be ConsistentBe Consistent
Size, colour, wording, location, ordering of objectsSame command should always have same effect in different contexts.Following convention helps
e.g., Cut/Copy/Paste
Seems easy but it’s often not followedUseful since it allows user to generalize from their own experience
Dec 02 13
InconsistencyInconsistency
CMS - XEDIT Editorin one context, D10 means “down 10 lines”in another context it means “delete 10 lines”
Current selection (CS) in graphics editorcreate a new object, it becomes CSduplicate an object, the original remains CS
Dec 02 14
Lexical ConsistencyLexical Consistency
Make use of “words” consistent with common (real-world) usage Examples:
red = bad/stop, green = good/goleft arrow = less, right arrow = more
Use consistent abbreviation/capitalization rules
CONTROL, CTRL, Ctrl, Control which is it?
Use mnemonic names rather than codes
Dec 02 15
Syntactic ConsistencySyntactic Consistency
Error messages at same (logical) location in all situationsGive 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 menuMuscle memory helps the user here
Dec 02 16
Semantic ConsistencySemantic Consistency
Global commands should always be available:
HelpCancelUndo
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 02 17
Providing FeedbackProviding Feedback
Lexicalfeedback on ‘words’ that are used
Syntacticfeedback on grammar, i.e., the order in which ‘words’ are used
Semanticfeedback on the meaning of operations
It is vital to provide clear, consistent, meaningful feedback to users based on their inputsMore…
Dec 02 18
Lexical FeedbackLexical 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 imageKeyboard echo (e.g., don’t echo illegal words)Selection highlighting, e.g., for cut & paste or changing text style
Dec 02 19
Syntactic FeedbackSyntactic Feedback
Ensure that the sequence of “words” entered is grammatically validFeedback provided when the sequence is illegal
Examples…Wrong number of arguments providedMenu item under cursor in reverse video indicates it will execute if you release mouse button (absence of this means it will not execute)
Dec 02 20
Semantic FeedbackSemantic 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 02 21
Semantic Feedback (2)Semantic Feedback (2)
Command is completed:provide its resultsprompt 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 computationsIncomplete data might not be displayed
Dec 02 22
Feedback PlacementFeedback Placement
Put feedback where the eyes are!Examples…
Insertion point for textWhere the screen cursor is located.
Audio output can also provide useful feedback.
sounds on error, failure, successvoice, for more detailed responsesenvironmental conditions may not permit audio feedback
Dec 02 23
Error PreventionError Prevention
Preventing errors should take priority over correcting for them. Why?
Avoids “fear of failure” on the part of the userAllows the user to work faster
Things to considerKey placement “distance” between commands
menu items or typed names
Suppress unavailable commands where appropriateConfirm dangerous actions, e.g., delete files
Dec 02 24
Error CorrectionError Correction
Lexicaltyping mistakes (automatic in MS Word)
Syntacticre-specify just the parameter in error, orrestart at beginning of command (may be necessary if dependent words are used)
Semanticcancel the operation underwayundo previous command(s)
Dec 02 25
Layout is ImportantLayout is Important
From the Winter Olympics web site…
Samespacing Which one?
Click for“Full Story”
Dec 02 26
Mismatch Between Mismatch Between Designer & User Designer & User
Conceptual ModelsConceptual Models
Result in errors on the part of the userSlow the user downResult in a great deal of frustration on the part of the userComing 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 02 27
Why are Design Guidelines Why are Design Guidelines Insufficient?Insufficient?
Too specific and/or too generalthere 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 02 28
SummarySummary
UIs are hard to design!Guidelines can give us general principles to followGuidelines can be hard to apply (too specific or too general)
Course SummaryCourse Summary
Dec 02 30
Program CategoriesProgram Categories
SequentialEvent-driven Know..
• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 31
Types of EventsTypes of Events
User-initiated eventsSystem-initiated events Know..
• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 32
Java EventsJava Events
Event class hierarchy Event sources
E.g., mouse events, key events
Listening for eventsUsing Listeners vs. Adapters
Dec 02 33
Swing BasicsSwing Basics
AWT vs. SwingCreating a window using JFrameJFrame’s content pane
Dec 02 34
Wimp ElementsWimp Elements
WindowsIconsPointersMenus
Know..• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 35
Containment HierarchyContainment Hierarchy
Top-level containersE.g., JFrame
Intermediate containersE.g., JPanel
Atomic componentsE.g. JButton
Dec 02 36
MenusMenus
Recognize vs. recallParts
E.g., menu bar
TypesE.g., popup, cascading
Featurese.g., separators
Designing
Dec 02 37
WidgetsWidgets
ButtonsCombo boxesTool barsText componentsSlidersScrollbarsetc.
Know..• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 38
ButtonsButtons
PushRadioCheckboxModal
Know..• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 39
Text ComponentsText Components
Output (aka non-editable)LabelsLabeled bordersTool tipsMessage Boxes
Input/output (aka editable)Text fieldsText areasEditable combo boxesDialog boxes
Know..• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 40
Validating InputValidating Input
Keystroke-levelFocus-levelData-model level
Know..• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 41
Navigation TechniquesNavigation Techniques
Clicking with mouse pointerGenerates mouse/focus events
TAB keyGenerates focus event
ENTER keyGenerates key/action events
Know..• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 42
Widget/Component Widget/Component LayoutLayout
The task: determine size and position of each componentComponent size properties critical
These are…Preferred sizeMinimum sizeMaximum size
Used in different ways (sometimes ignored!) by layout managers
Dec 02 43
Widget Layout ModelsWidget Layout Models
Absolute (aka fixed)Control for component size and position
Struts and springsControl for component position
Variable intrinsic sizeControl for component size
Know..• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 44
Java’s Layout ManagersJava’s Layout Managers
BorderLayoutFlowLayoutGridLayoutBoxLayoutGridBagLayoutCardLayoutOverlayLayoutetc.
Know..• What they are• Advantages• Disadvantages• Features• Comparisons• Etc.
Dec 02 45
Output ModelOutput Model
Coordinate systemsDevicePhysical
Things to know about:Pixels, raster, display size, resolution, video RAM requirements, aspect ratio, dot pitch
Color modelsRGB, HSB
Dec 02 46
Java’s Graphics Java’s Graphics FeaturesFeatures
Drawing primitives for…Shapes, lines, curves, images, text
Text characteristicsFont family, size, styleFont metrics
ImagesFile formats
Dec 02 47
ImagesImages
ImagesFile formats
gif, jpg, tiff, bmp
Drawing images in panels
Dec 02 48
MVC ArchitectureMVC Architecture
ModelHolds & manages data
ViewImplements visual display of data/component
ControllerMaps input into commands
Dec 02 49
MVC and Java/SwingMVC and Java/Swing
Know how MVC is implemented in Swing component
View & controller combined into UI delegate
Dec 02 50
Design for HumansDesign for Humans
SR Compatibility S = Stimulus, the input device that is being manipulated or stimulatedR = Response, the visual, aural, or kinesthetic sense that is affected by the stimulusCompatibility refers to the correctness of the match between the stimulus and the response
Dec 02 51
Human Limits and Human Limits and CapabilitiesCapabilities
Bailey’s framework
SensesVisionAuralKinesthetic
Dec 02 52
Types of LimitsTypes of Limits
Sensory (visual/audio intensity/frequency)Responder (Fitts’ law)Cognitive (short-term memory)
Dec 02 53
UI Design in the UI Design in the WorkplaceWorkplace
Human factorsUser-centered job descriptionsUser-centered design processConceptual models and their differences
Dec 02 54
UI EvaluationUI Evaluation
Evaluation paradigmsEvaluation techniquesHeuristic evaluationCognitive walkthroughsUsability testingREAL framework
Dec 02 55
Characteristics of Good Characteristics of Good UIsUIs
ConsistencyLexical, Syntactic, Semantic
FeedbackLexical, Syntactic, Semantic
Use of hierarchy and groupingExplicitly shows states and state changesAvoids overload
Dec 02 56
ReadingsReadings
Java/Swing Tutorial MVC article by FowlerJava API (Swing components and other classes used in 3461)PowerPoint slidesDemo program code and documentation
Dec 02 57
What’s leftWhat’s left
No more classesOffice hour: Wednesday, December 4th, 2-3pmMore office hours next week (to be posted on the webpage)Exam:Thursday, December 12th, 7-9:30pm
Dec 02 58
Thank you!Thank you!