design principles and guidelines hints for good design

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!