Best Practices

1

• Best Practices

2

• Rely on customer satisfaction as one
  determinant in the ultimate success of a system

3
Building Interactive Systems

• Interactive system
• System that supports communication between user
  and computer
• User interface
• The part of the system that provides access to
  the systems functionality
• Acts as the mediator between user and system

4
Give careful thought to these questions

• Who will be using the system?
• What do the users need to accomplish?
• What will the users need from the system to
  accomplish this?
• How will the system satisfy their needs?

5
Communication flow between a user and a system
The arrows signify translations
6
Examples of unnecessary translations

• The sizes of documents are measured in bytes, not
  pages or words that the user is familiar with.
• Entering simple data, such as date, may require a
  translation into an obscure format
• Interpreting error messages may involve dealing
  with codes such as C5 and knowing that this
  means that the printer is out of paper.

7
Separate hot and cold tapsvs single water
outlet with temperature control
8
Inductive User Interface (IUI)

• User questions
• What am I supposed to do now?
• Where do I go from here to accomplish my next
  task?
• Designing software using IUI
• Focus each screen on a single task
• State the task
• Make the screens contents suit the task
• Offer links to secondary tasks

9
Usability

• Relates to how the system interacts with the user
• Not merely the appearance of the user interface
  (button, menus, list boxes, colors)
• Neglecting the usability issue can negatively
  impact on
• Efficiency
• Effectiveness
• Learnability
• User satisfaction

10
User-centered design

• Early focus on users
• Understand needs of users early in design process
• Integrated design
• All aspects of design should evolve in parallel,
  rather than sequence
• Early and continual testing
• Allow users to give feedback on design before
  product released
• The design works if real users decide it works
• Iterative design

11
Friendly Software Design

• Easy-to-use software friendly software
• Computer professionals write software for people
  who are not computer professionals

12
30 Principles of Friendly Software Design

• Know your subject
• Understand the relevant subject
• To design a word processor understand typing,
  typesetting, hyphenation etc
• To design accounting package have an
  understanding of accounting
• Know your audience
• Who are my users?
• What is important to them?
• How do they think?
• Why are they using the software?
• What do/dont they know?
• What are their expectations?

13
30 Principles of Friendly Software Design

• Lever the users knowledge (newspaper example)
• Speak their language
• Use metaphors that they are familiar with
• Use a consistent interface (this levers the
  knowledge user gains by using the software
• Speak the users language
• Carefully select words and phrases used by your
  software
• Jargon used by the user can communicate precisely
  and effectively
• Familiar jargon makes the user feel comfortable

14
30 Principles of Friendly Software Design

• Communicate with metaphors
• use effective and intuitive metaphors triggering
  the desired knowledge and experience in the mind
  of the users
• metaphors and knowledge based on computers are
  different from those of your users
• Metaphor for deleting files with the possibility
  of being recovered later wastebasket
• Permanent deletion paper shredder
• Focus the users attention
• Cursor in MicroSoft Excel focuses users
  attention on the cell in spreadsheet
• Screen clutter makes it difficult to identify
  what is important

15
30 Principles of Friendly Software Design

• Anticipate problems in the users perception
• Murphys Law If something can go wrong, it will
• Reinforce the intent of a command
• ask for confirmation rather than just deleting
  record when user presses Delete key
• mention what will be deleted supplier or
  customer rather than record
• Microsoft Word trying to save document
• The file xxx already exists. Do you want to
  replace the existing file?
• Prototype user interface
• allow users to try it to uncover
  misunderstandings
• If you cant communicate it, dont do it

16
30 Principles of Friendly Software Design

• Maintain the users interest
• Design software to be engaging as possible
• Decreasing waiting time
• Displaying something interesting an useful
• Display results as soon as they become available
• Restructuring the interface to avoid the wait
• Communicate Visually
• Use icons that represent familiar things
• Display data in visual ways (graphs)

17
30 Principles of Friendly Software Design

• Reduce the users defensiveness
• Make the communication descriptive instead of
  judgmental Illegal command describe users
  problems instead of evaluating his actions
• Communicate from empathy instead of superiority
• Make your users decision provisional support
  an exploratory environment
• Give the user control
• The user should initiate actions, not the
  software
• Be careful of asking the user for information at
  the programs convenience
• Do not design SW for the developers convenience
• Offer an Undo feature
• Allow user to customize aspects of interface

18
30 Principles of Friendly Software Design

• Support the problem-solving process
• should help the user do their work
• Should solve their problems
• Avoid frustrating the user
• Avoid having them refer to a manual
• Make SW obvious to use
• Dont force user to wait
• Help the user cope
• Describe their problems and help them to solve
  them
• User search results in Not Found- rather
  display list of closest matches

19
30 Principles of Friendly Software Design

• Respond to the users actions
• Make application responsive
• Users actions should be immediately visible
• Dont let the user focus on mechanics
• Dont let sw mechanics distract the user
• Help the user to crystallize his thoughts
• SW should help user recognize what they want
• SW should provide visual clues
• Involve the user
• Is my user involved?
• What is preventing him from becoming more
  involved?
• What else can I do to get my user involved?

20
30 Principles of Friendly Software Design

• Communicate in specifics, not generalities
• Sum(A1,A5)
• Orient the user in the world
• Dont leave your user disoriented
• User Where am I?
• User What am I doing?
• User What do I do next?
• Structure user interface
• Menus help to describe a structure to the user
• Designer should ensure that menu items organized
  logically

21
30 Principles of Friendly Software Design

• Make your product reliable
• A system should never let its users down
• Losing work is frustrating
• Systems should prevent or minimize such damage
• Ensure SW is well designed
• Programming for reliability
• Checking for correctness of SW
• Testing extensively
• Using quality assurance techniques
• Serve both the novice and the experienced user
• SW needs to be easy enough for the novice user
  and versatile enough for the expert user

22
30 Principles of Friendly Software Design

• Develop and maintain user rapport
• Tyre salesman
• Consider first impression
• SW product must capture the users interest and
  attention it must be able to sell itself
• Build a model in the users mind
• Cursor moving beyond edge of the window,
• spreadsheet shifted a column to the right
• Illusion of a window into a large spreadsheet

23
30 Principles of Friendly Software Design

• Make your design simpleand economical
• Easier to maintain and use
• But not too simple
• A design should be kept simple even though the
  details might not be.
• You need a vision of the sw product

24
Understanding the Human

• Skill level and behavior
• Users with different skill level using the same
  interface
• User start as novice, move to intermediate or
  advanced
• Make interface simple enough for novice yet
  powerful enough not to frustrate the intermediate
  / advanced user
• For novice able to extract data by using options
  on pull down menu
• For intermediate use menu interface to build
  query to extract custom data not available
  through novice menu
• For advanced able to extract data using a query
  language

25
Understanding the Human

• Input/Output channels
• Vision or sight
• Human brain interpret visual information based on
  size, shape, colour, orientation, movement, etc.
• Information extraction influenced by text size,
  font type, text line length, capitalization,
  location and colour.
• Bear in mind limitations of vision.
• Reading from computer screen is slower than from
  book
• 8 of males and 1 of females suffer from colour
  blindness cannot distinguish between red and
  green.

26
Understanding the Human

• Ability to reason and solve problems
• Drawing conclusions using our knowledge
• Use analogies to solve problems using old
  knowledge to solve new problems

27
Understanding the Human

• Human memory
• Information extracted from interface, must be
  stored for later use
• Human memory working memory long-term memory
• Long-term memory stores factual information,
  rules, regulation etc.
• Capacity unlimited
• Slow access time
• Working memory
• forgets a lot of what it sees
• Fast retrieval
• Avoid requiring user to remember more than 6 or 7
  items of information at a time for too long
  avoid placing gt7 menu items an a menu

28
How do we measure success?Usability Factors
29
How do we measure success?Usability Factors
30
How do we measure success?Usability Factors
31
How do we measure success?- Empirical Methods -

• Involves performing usability tests in
  laboratories with users and recording and
  analyzing test results
• Requires a prototype to be built and users to be
  actively involved in testing
• Users might be recorded or be asked to think
  aloud / verbalize actions while using system to
  expose hidden usability problems
• Im trying to search for a customer. Im looking
  for a search button on the toolbar. I dont see
  one. Ill look in the menu. Theres a Find button

32
How do we measure success?- Analytical Methods -

• Cognitive walkthroughs
• offers a means of analyzing designs for systems
  to be used by people without prior training or
  systems that have been changed or extended
• Heuristic evaluation
• a usability inspection whereby an inspection of a
  design is carried out and a list of problems that
  could affect usability is identified.

33
Analytical Methods- Cognitive Walkthroughs -

• The user will explore the user interface, looking
  for actions that might help perform the task
• The user selects the action whose description or
  appearance most closely matches what he or she is
  trying to do
• The user interprets the systems response and
  determines whether progress has been made towards
  completing the task

34
Analytical Methods- Cognitive Walkthroughs -

• Examine users success rates in completing task
• Examine users ability to recover from errors.
• Q1. Will the correct action be made sufficiently
  evident to the user?
• Q2. Will the user connect the correct actions
  description with what he or she is trying to do?
• Q3. Will the user know if he or she has made a
  right or wrong choice?
• Questions with No answer identifies design
  flaw

35
Rapid-transit ticket machine
36
Analytical Methods- Heuristic Evaluation -

• When analysing designs where the method of
  operation is not fully predictable user is not
  complete novice
• Involves a team of evaluators
• Requires design heuristics to guide evaluation

37
Usability heuristics

• Simple and natural dialogue
• Speak the users language
• Minimise user memory load
• Be consistent
• Provide feedback
• Provide clearly marked exits
• Provide short cuts
• Provide good error messages
• Prevent errors

38
Online Hardware Catalogue
39
Prototyping

• Useful tool to
• design user-friendly software
• perform usability testing
• Types of prototyping tools include
• Paper sketches Illustrations of the user
  interface can be created
• Storyboards Sequences of ketches that illustrate
  specific processes
• Prototyping software prototyping tools or
  standard development tools can be used to build a
  user interface

40
Aesthetics A Key Player

• Concerned with the look and feel of something
• Aesthetics boils down to making simple choices
• It is not about the number of colours you use
  rather choose two / three complementary ones
• It is not about pretty pictures, rather using
  only those elements to convey your message

41
User Interface Design Guidelines

• UI Design Guidelines - Draw on past experience to
  offer advice regarding design problems and
  suggest solutions
• Examples
• Ask for verification of any non-trivial
  destructive action
• Use bold and italic fonts sparingly
• Define quick access keys
• Group related elements
• Avoid forcing users to scroll horizontally

42
Five broad categories of guidelines

• General principles that apply to any user
  interface
• Guidelines that apply to interactive display
  layouts, including those that use color
• Guidelines for use with specific interaction
  styles, such as forms fill-in interaction and
  voice-based interaction.
• Sets of guidelines offered in style guide
  associated with proprietary systems and standards
• Guidelines for the design of individual user
  interface components menus icons

43
User Interface Design Guidelines

• Combine user interface design guidelines with
  design principles, task analysis, prototyping and
  usability evaluation to ensure usability of your
  product
• Reasons why you cannot rely on guidelines alone
• guidelines can be too general
• guidelines can be too specific
• Guidelines may conflict with one another

44
Choosing an Output Technology

• Speed
• Cost
• Portability
• Flexibility
• Storage and retrieval possibilities

45
Questions for choosing an output method

• Who will use the output?
• How many people will need the output?
• Where is the output needed?
• What is the purpose of the output?
• How quickly is the output needed?
• How frequently will the output be accessed?
• For how long will the output be stored?
• Are there any production, storage, or
  distribution restrictions?
• What are the initial and ongoing costs of
  maintenance and supplies?

46
General Design Principles

• Shneidermans Golden Rules
• Strive for consistency
• Consistent format for menu selection, command
  input, data display etc.
• Common functions, Copy command
• Consistent words and phrasing for similar
  situations Press the enter key Hit carriage
  return
• Consistent meaning and behavior of metaphor
• Offer meaningful feedback
• Provide indication that the task has been
  completed
• Indicate the status of a processing task
• Specify error and warning messages

47
General Design Principles (2)

• Shneidermans Golden Rules
• Permit easy reversal of actions
• Undo and reverse functions
• Support internal focus of control
• Reduce short-term memory load
• Challenging users memory
• Slows the speed of performance
• Makes system more difficult to learn

48
Other Important General Design Principles

• Keep it simple
• Simplify the interface without sacrificing
  functionality
• Take advantage of users existing knowledge
• Hide information that is not needed
• Dont interrupt the user unnecessarily
• Maintain currency and consistency
• Currency the display must be an up-to-date
  reflection of the state of the system
• Consistency information in successive displays
  must be consistent

49
Other Important General Design Principles (2)

• Use modeless windows where possible
• Modal windows no user input can occur in any
  other form or in the menu until the modal form is
  closed
• This restriction does not apply to Modeless
  windows
• Use modeless where possible, but always use modal
  windows for dialog boxes displaying important
  messages
• Eliminate unnecessary dialog boxes and message
  boxes
• It interrupts user
• Makes user less effective
• Dont use computer and programming jargon
• AND, OR, hex, and record

50
Other Important General Design Principles (3)

• Ask for verification of any non-trivial
  destructive action
• Deleting a file? Ask for confirmation
• Organize tasks according to function
• Categorize activities by function and organize
  screen accordingly
• Run long processes in the background
• Seek efficiency in dialogue, motion and thought
• Minimize keystrokes and mouse clicks
• Minimize distance between mouse click targets
• Support input from both the mouse and keyboard

51
Other Important General Design Principles (4)

• Protect against mistakes and errors
• System should protect itself from user mistakes
  that could cause it to fail.
• Dont made the user feel stupid
• System should treat the user with respect
• Dont tell them that they failed You have
  failed to choose an acceptable option try
  again.
• Make the software remember
• If the user made a choice before, consider making
  the software remember this choice for future use.

52
Other Important General Design Principles (5)

• Provide a toolbar
• Provides experienced users with a quick way to
  access frequently used functions
• Include short, meaningful tooltips
• Provide adequate keyboard support
• And logical tab navigation
• Provide help facilities
• Provide context-sensitive help
• Provide authentication for multi-person use
• Seek user identification by means of an
  authentication procedure

53
Guidelines for Communicating Visually

• Organization and Composition
• Color
• Fonts
• User Interface Text
• Layout
• Graphic images

54
Organization and Composition

• Hierarchy of information / placement based on
  importance
• Which information is most important to the user?
• What are the users priorities when your
  application is started?
• What does the user want or need to do 1st, 2nd,
  3rd etc?
• Will the order of information support or hamper
  the users progression through the interface?
• What should the user see on the screen 1st, 2nd,
  3rd, etc?
• Focus and emphasis
• Focal point to be identified (top-left corner of
  screen)
• Related elements should be made to stand out

55
Organization and Composition (2)

• Structure and Balance
• A good visual design cannot compensate for a poor
  structural design
• Structure the use of size, spacing placement
  of elements
• Without structure and balance visual design
  will lack order and meaning
• Relationships between visual elements must be
  clear
• Readability and flow
• Could the idea or concept be presented more
  simply?
• Can the user easily step through the interface?
• Do all the elements have a reason for being
  there?
• Unity and integration
• How do all of the different parts of the screen
  work together?

56
Color

• Use color as a secondary form of information
• Avoid using color as the only means of conveying
  information
• Other means text labels, shapes, patterns
  location
• Use a limited set of colors
• Using too many colors can cause visual clutter
• Muted, subtle, complementary colors better than
  bright, highly saturated colors
• Provide options to change colors
• Color choice subjective
• Allow user to change colors

57
Fonts

• Ensure chosen fonts are readable
• Avoid italic and serif fonts
• Limit the number of fonts used
• Using too many fonts can cause visual clutter
• Use bold and italic fonts sparingly
• Overusing bold fonts will distract the user
• Use bold fonts to attract attention only
  titles, headings
• Italics decrease emphasis and make text less
  readable
• Use the standard system font
• Use standard system font for consistency with
  systems interface

58
User Interface Text

• Text must be readable and understandable
• Write clear, consistent, informative and well
  written text
• Avoid using abbreviations
• Always use the full word / phrase the first time
  it appears and include abbreviation (abbr.) in
  parenthesis
• Avoid using abbr. in headings
• Define acronyms with are not well-known
• Spell out the acronym the first time it appears
  and include the acronym in parenthesis
• If acronym used in heading, spell it out in the
  first sentence after the heading

59
User Interface Text (2)

• Use appropriate capitalization
• Book title capitalization capitalize the first
  letter of each word, except
• Articles (a, an, the)
• Coordinate conjunctions (and, but, for, not, or,
  so, yet)
• Prepositions lt four letters (at, for, with,
  into)
• Use book title capitalization for Column
  Headings, command button labels, icon labels,
  menu names, tab titles, title bar text, tooltips
• Sentence style capitalization capitalize only
  first letter of the initial word
• Use sentence style capitalization for Alternate
  text, check box labels, file names, group box
  labels, list box items, messages, radio buttons,
  status bar text, text box labels

60
User Interface Text (3)

• Use ellipses properly
• Format introductory or instructional text
• Used in dialog boxes wizard pages
• Align numbers properly
• Right align a column of whole numbers
• For others align at the decimal point
• Follow normal rules for punctuation

61
User Interface Text (4)

• Use an appropriate writing style
• Brevity
• Keep text brief without sacrificing clarity
• Language
• Use clear, concise grammatically correct
  language
• Parallel construction
• Same grammatical structure for items in lists,
  groups of check boxes and radio buttons
• Sentence construction write simple sentences
• Voice
• The system cannot edit a read-only document
  instead of
• A read-only document cannot be edited
• Use familiar terminology

62
User Interface Text (5)

• Define suitable title bar text
• Use short, meaningful titles
• Define quick access keys
• (AltUnderlined character) for the label of each
  control or menu item, except for OK and Cancel
  (the ENTER and ESC keys serve as access keys to
  these buttons respectively)

63
Layout

• Follow normal layout conventions
• Left-to-right
• Consider your users minimum screen resolution
• Use buttons and tabs of consistent length
• Maintain good spacing and positioning
• Maintain a consistent margin from the edge of
  window
• Place a controls label above or to the left of
  the related control
• Group related items
• Use group box (frame) controls, separator lines,
  or spacing to show relationship between items

64
Layout (2)
65
Layout (3)

• Organize command buttons
• Stack buttons in upper right corner or in a row
  along the bottom
• List default button first
• Place OK and Cancel buttons next to each other,
  in that order
• If no OK button, but one or more command buttons,
  place Cancel at end of buttons, but before the
  Help
• If button applies a specific field or a group of
  fields only, group it with that field or group.

66
Layout (4)
67
Layout (5)

• Use correct alignment
• With vertical positioning align fields by their
  left edges
• Left-align text labels and position them above or
  to the left of the related controls
• With text labels to the left of text boxes
  align top of the text with text displayed in text
  box
• Left-align controls in group boxes with the text
  label for the group
• Align buttons at the top right or right-align
  them at the bottom
• Center buttons in message boxes

68
Graphic images

• Define the graphics purpose and use.
• Will the graphics help the user carry out a task
• Be consistent
• Make scale, orientation and color consistent with
  other objects
• Use good real-world metaphors
• Scissors representing the action to cut
• Design icons for recognition and recollection
• Use perspective and dimension to communicate a
  real-world representation an icon using
  lighting and shadows to portray 3-dim. Use light
  source from upper left
• Avoid using people, stereotypes, faces, gender or
  body parts as icons might be misinterpreted or
  offensive

69
Graphic images (2)

• Avoid using a triangular arrow
• Similar to the one used in cascading menus,
  drop-down controls and scroll arrow, unless
  further information will be displayed
• Ensure interactivity is obvious
• A graphic representing interactive content
  obvious to user
• Consider cultural differences
• Avoid letters or words in graphics differing
  meanings to different countries / cultures
• Accommodate the visually impaired
• Use image only to reinforce information already
  conveyed through text
• Consider hiring a good graphic designer
• Requires experience skill

70
Guidelines for Effective Displays

• General Form and Window Design
• Information Display
• Data Input

71
General Form and Window Design

• Plan first, design second
• Why is the form needed?
• Who will use the form
• When will it be needed or used?
• Where will it need to be used?
• What does the user want to accomplish when using
  this form?
• What data needs to be collected from the user?
• What is the users level of experience?

72
General Form and Window Design (2)

• Critically analyze your design
• Will it serve its intended purpose?
• Will it be meaningful to the user?
• Will it support the users activity?
• Will it request the right amount of input?
• Will it request input from or deliver output to
  the correct person?
• Will it deliver input to the system and output to
  the user on time?
• Keep it simple
• Create aesthetically pleasing displays

73
General Form and Window Design (3)

• Provide an appropriate title
• Provide an appropriate icon
• Set a windows initial position appropriately
• Make windows sizable
• Remove the maximize button, if appropriate
• Consider using the users color and font
  preferences
• Ensure that the application reacts appropriately
  when the display resolution is changed
• Ensure graphics and icons are clear at different
  resolutions

74
General Form and Window Design (4)

• Do not present unnecessary information
• Use appropriate alignment
• Group information
• Highlight information when necessary
• Standardize screen displays
• Use familiar screen layouts
• Use screen geography effectively
• Avoid forcing users to scroll horizontally

75
General Form and Window Design (5)

• Format and organize text
• Use font promoting readability of text
• Upper and lower case text more readable than
  upper case text
• Optimal spacing between lines
• Break long sequences of alphanumeric data into
  small groups
• Use vertical lists
• Format tables correctly
• Meaningful column headings
• separate from table data
• Right-justify numeric data align decimal
• Alphanumeric text left justified

76
General Form and Window Design (6)

• Distinguish between entry fields and read-only
  fields

77
General Form and Window Design (7)

• Make appropriate use of graphics
• Display summarized data using graphs
• Use pictures to increase interest understanding
• Make use of icons
• Differentiate items using color carefully
• Order items using color carefully
• Choose colors carefully
• Ensure strong contrast between background and
  foreground
• Use familiar color codings red for stop or
  danger
• Ensure that effect will be achieved despite color
  difference in display / printers

78
Information Display

• Design self-explanatory displays
• Display relevant information
• Maintain consistency
• Maintain visual contact
• Provide meaningful error messages
• Error missing data in field1 and field2 X
• Description, language, advice, consequences,
  non-judgemental
• Format and organize text
• Format tables correctly
• Use windows
• Consider analogue displays, graphs diagrams

79
Data Input

• Format labels correctly
• Static text label followed by colon to indicate
  label
• Ensure that all labels are meaningful
• Group related input fields
• Indicate whether data must be entered in a
  certain format
• (xxx) xxx-xxxx
• Use appropriate input controls
• Maintain consistency between input and output

80
Data Input (2)

• Indicate required fields
• Minimize input actions
• Support First character typing, auto-tabbing,
  macros, shortcut keys
• Dont request unnecessary data
• Eliminate retyping whenever possible
• Residential address postal address
• Provide default values
• Eliminate Mickey Mouse input
• .00 for non fraction amounts, values which can be
  calculated from available data
• Provide for logical and smooth navigation

81
Data Input (3)

• Define quick access keys
• Allow errors to be corrected
• Reduce data entry errors
• Avoid requiring valid data entry before
  navigating away from control
• Alert to invalid input using error audio tone /
  msg box
• Example of data input can be provided
• Ensure enough space for data entry
• Allow for customization
• Offer flexibility

82
Data Input (4)

• Give users control
• Indicate what must be done upon completion
• Dont save data until the user requests it
• Provide help

83
Guidelines for User Interface Components

• Designing
• Menu Interfaces
• Dialog Boxes
• Message Boxes
• Command Buttons
• Radio buttons
• Check Boxes
• List Boxes
• Toolbars Status Bars

84
Menu Interfaces

• Menu bar menu titles menu items
• Menu titles
• Use single words
• Use unique menu title names
• Create meaningful menu titles
• Use quick access keys
• Disable a menu title when appropriate

85
Menu Interfaces (2)

• Menu items
• Organize menu items by frequency
• Group related menu items
• Disable menu items when they are available
• Use unique menu item names
• Use short descriptive menu item names
• Define quick access keys
• Follow book title capitalization rules
• Format item names carefully
• Indicate keyboard short-cut keys
• Use the ellipsis standard

86
Menu Interfaces (3)

• Pop-up menus
• Include only directly associated command
• Include only frequently used commands
• Avoid using them as the only option
• Order menu items carefully
• Group related commands
• Follow the right-click standard
• Cascading menu
• Provide a visual clue
• Create an effective hierarchical structure
• Use cascading menus sparingly
• Organize menu items carefully

87
Dialog Boxes

• Provide a suitable caption and icon
• Keep them small
• Provide meaningful and understandable content
• Provide OK and Cancel buttons on modal dialog
  boxes
• Use consistent exit buttons on modeless dialog
  boxes
• Use consistent button placement and order across
  all dialog boxes

88
Dialog Boxes (2)

• Ensure correct placement of buttons on tabbed
  dialog box
• Set a default button
• Remove minimize and maximize buttons

89
Message Boxes

• Provide suitable caption
• Provide meaningful and understandable content
• State problem, cause how to resolve
• Not gt 2 lines, include Help button
• Replace system-supplied msg with your msg
• Instead of Are you sure you want to rather
  provide what effect of choice will be
• Use complete sentences punctuation
• Avoid technical terminology
• Consistent Not enough memory Your computer
  does not have enough disk space
• Avoid using Please unless user asked to wait or
  retype information
• Avoid messages that tend to blame user or imply
  that user made mistake
• Use appropriate button

90
Command Buttons

• Use buttons of standard size
• Use short but meaningful captions
• Define quick access keys
• Use the lt and gt symbols
• Use the ellipses standard
• Use the gtgt and ltlt symbol to indicate window
  expansion.

91
Command Buttons

• Indicate direct access to a menu

92
Radio Buttons

• Group related buttons in sets of two or more
• Label each radio button
• Use sentence style capitalization
• Write label as phrase not sentence
• Avoid repeating words in different labels
• Include colon if control follows radio button
• Indicate unavailable options by modifying labels
  appearance
• Limit the number of radio buttons
• Avoid using an radio button like a command button
• Assign quick access keys to radio button labels

93
Check Boxes

• Group related check boxes
• Label each check box
• Use sentence style capitalization
• Write label as a phrase, not a sentence
• Avoid repeating words in check box labels
• Include colon if control follows check box label
• Indicate unavailable options by modifying labels
  appearance

94
List Boxes

• Logically order list box items
• Provide suitable label
• Define a quick-access key for the list box
• Disable a list boxs label when the list box is
  disabled
• Use sentence-style capitalization
• Ensure the list box is wide enough
• To allow visible portions of entries to be easily
  distinguishable
• Use an elipsis () in the middle or end of items
  to be shortened\My Documents\...\Invoices\inv0504
  02.pdf
• Accommodate at least three to eight items

95
Toolbars Status Bars

• Include ToolTips
• Group related toolbar buttons and status bar
  elements
• Allow toolbars and status bars to be configured
  by the user
• Consider making toolbars movable

96
Guidelines for User Assistance

• Keep it simple
• Organize it well
• Use appropriate capitalization and punctuation
• Demonstrate operations
• Return users to where they were

97
Guidelines for User Assistance (2)

• Contextual Help
• Procedural Help
• Reference Help
• Conceptual Help
• HTML Help
• Wizards
• Online Tutorials

98
Contextual Help

• Provides assistance to users in a way that does
  not require them to leave the context in which
  they are working
• Whats This? Help
• ToolTips
• Status bar messages
• Help buttons

99
Contextual Help (2)

• Whats This? Help
• Be brief and specific
• Use meaningful descriptions
• Format descriptions properly
• Avoid Whats This?-help for inactive elements
• Editable elements or labels
• Status bar elements that do not have text labels
• Toolbar buttons and controls
• Menu items

100
Contextual Help (3)

• Status bar messages
• Be brief and specific
• Use meaningful descriptions
• Format descriptions properly
• Use them for secondary or supplemental help

101
Contextual Help (4)

• Help buttons
• Display help according to button placement
• Display the help in the HTML Help viewer
• Dont use the Help button as a replacement for
  Whats This? Help

102
Procedural Help

• Provides steps required to carry out a task
• Be brief and specific
• Display the help in the HTML Help viewer
• Include all topics in the index and table of
  contents

103
Reference Help

• Serves as an online reference book
• Use reference help in combination with other
  forms of help
• Display the help in the HTML Help viewer
• Include all topics in the index and table of
  contents

104
Conceptual Help

• Provides backgroundinformation, feature
  overviews, or process overviews providing
  what and why information
• Split long topics into sections
• Separate Conceptual Help from Procedural Help
• Display the help in the HTML Help viewer
• Include all topics in the index and table of
  content

105
HTML Help

• Windows provides support for creating help
  interfaces using HTML
• Follow Web standards and conventions
• Use pop-up help
• Organize entries in the contents properly
• Provide an extensive index

106
Wizards

• Special form of user assistance that automates a
  task using dialog with the user
• Dont user wizards as tutorials
• Use wizards to hide complexity
• Use wizards as supplements
• Clearly identify its purpose
• Use a conversational writing style
• Use words such as you and your
• Dont tell users what to do, ask questions
• Use short, common words
• Use as few words as possible
• Keep the writing clear, concise and simple

107
Online Tutorials

• Learning tools that should provide step-by-step
  instructions
• Take the user through a series of steps
• Explain the meaning of each step
• Anticipate where user might get lost

108
Guidelines for Installation and Setup

• Make installation and setup simple
• Name it Setup.exe or Install.exe
• Check for sufficient disk space before commencing
• Provide a progress indicator
• Allow user to cancel at any time
• Avoid requiring to restart computer
• Allow the user to become productive quickly
• Provide a way to uninstall your application
• Organize the application properly on the users
  hard disk.
• Use the available user folders as default for
  you application

109
Guidelines for Installation and Setup (2)

• Never hard code paths in your application
• Maintain the growth of temporary files
• Use file types correctly
• Use the operating systems GUI elements
  appropriately
• Start menu should be reserved for frequently
  accessed items only
• Avoid placing icons on desktop automatically

110
Guidelines for Supporting International Users

• Consider localizing your application into other
  languages
• Handle operating system configurations that
  differ according to location

111
Web design guidelines