Document

Transcript Document

Best Practices

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

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 system’s functionality – Acts as the

mediator

between user and system 3

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?

Communication flow between a user and a system

The arrows signify translations 5

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.

Separate hot and cold taps

single water outlet with temperature control

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 screen’s contents suit the task – Offer links to secondary tasks 8

Usability

• Relates to

how

user the system interacts with the • 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 9

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 10

Friendly Software Design

Easy-to-use software = “friendly” software Computer professionals write software for people who are not computer professionals 11

30 Principles of Friendly Software Design

1. 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 2. Know your audience — — — — — — Who are my users?

What is important to them?

How do they think?

Why are they using the software?

What do/don’t they know?

What are their expectations?

30 Principles of Friendly Software Design

Lever the user’s 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 user’s 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 13

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 user’s attention — Cursor in MicroSoft Excel – focuses user’s attention on the cell in spreadsheet — Screen clutter makes it difficult to identify what is important 14

30 Principles of Friendly Software Design

Anticipate problems in the user’s perception — Murphy’s 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

customer

rather than

record

— Microsoft Word = trying to save document — “The file

xxx

existing file?” already exists. Do you want to replace the — Prototype user interface — allow users to try it – to uncover misunderstandings 10. If you can’t communicate it, don’t do it 15

30 Principles of Friendly

— — — — —

Software Design

Maintain the user’s 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) 16

30 Principles of Friendly Software Design

11. Reduce the user’s 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 user’s decision provisional – support an exploratory environment 12. Give the user control — — — — — The user should initiate actions, not the software Be careful of asking the user for information at the program’s convenience Do not design SW for the developer’s convenience Offer an Undo feature Allow user to customize aspects of interface 17

30 Principles of Friendly Software Design

13. Support the problem-solving process — — should help the user do their work Should solve their problems 14. Avoid frustrating the user — — — Avoid having them refer to a manual Make SW obvious to use Don’t force user to wait 15. 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 18

30 Principles of Friendly Software Design

16. Respond to the user’s actions — — Make application responsive Users’ actions should be immediately visible 17. Don’t let the user focus on mechanics — Don’t let sw mechanics distract the user 18. Help the user to crystallize his thoughts — — SW should help user recognize what they want SW should provide visual clues 19. 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?

30 Principles of Friendly Software Design

20. Communicate in specifics, not generalities — Sum(A1,A5) 21. Orient the user in the world — Don’t leave your user disoriented — — — User: Where am I?

User: What am I doing?

User: What do I do next?

22. Structure user interface — — Menus help to describe a structure to the user Designer should ensure that menu items organized logically 20

30 Principles of Friendly Software Design

23. 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 24. 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 21

30 Principles of Friendly Software Design

25. Develop and maintain user rapport —

Tyre salesman

26. Consider first impression — SW product must capture the user’s interest and attention – it must be able to sell itself 27. Build a model in the user’s mind — — —

Cursor moving beyond edge of the window, spreadsheet shifted a column to the right Illusion: of a “window” into a large spreadsheet

30 Principles of Friendly Software Design

28. Make your design simple…and economical — Easier to maintain and use 29. But not too simple — A design should be kept simple even though the details might not be.

30. You need a vision of the sw product 23

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 24

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.

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 26

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 >7 27 menu items an a menu

How do we measure success?

Usability Factors

How do we measure success?

Usability Factors

How do we measure success?

Usability Factors

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 – “I’m trying to search for a customer. I’m looking for a search button on the toolbar. I don’t see one. I’ll look in the menu. There’s a

Find

button” 31

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.

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 system’s response and determines whether progress has been made towards completing the task 33

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 action’s 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?

Rapid-transit ticket machine

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 36

Usability heuristics

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

Online Hardware Catalogue

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 39 a user interface

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 40

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 41

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 42

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 43

Choosing an Output Technology

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

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?

General Design Principles

Shneiderman’s “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 46

General Design Principles (2)

Shneiderman’s “Golden Rules”: • Permit easy reversal of actions – Undo and reverse functions • Support internal focus of control • Reduce short-term memory load – Challenging user’s memory • Slows the speed of performance • Makes system more difficult to learn 47

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 • Don’t 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 48

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 • Don’t use computer and programming jargon – “AND”, “OR”, “hex”, and “record” 49

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 50

Other Important General Design Principles (4)

• Protect against mistakes and errors – System should protect itself from user mistakes that could cause it to fail.

• Don’t made the user feel stupid – System should treat the user with respect – Don’t 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.

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 52

Guidelines for Communicating Visually

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

Organization and Composition

• Hierarchy of information / placement based on importance – Which information is most important to the user?

– What are the user’s priorities when your application is started?

– What does the user want or need to do 1 st , 2 nd , 3 rd etc?

– Will the order of information support or hamper the user’s progression through the interface?

– What should the user see on the screen 1 st , 2 nd , 3 rd , etc?

• Focus and emphasis – Focal point to be identified (top-left corner of screen) – Related elements should be made to stand out 54

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?

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 56

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 system’s interface 57

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 58

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 <= 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 59

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 60

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” 61 – Use familiar terminology

User Interface Text (5)

• Define suitable title bar text – Use short, meaningful titles • Define quick access keys – (Alt+Underlined character) for the label of each control or menu item, except for

and

Cancel

(the

ENTER

and

ESC

keys serve as access keys to these buttons respectively) 62

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 control’s 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 63

Layout (2)

Layout (3)

• Organize command buttons – Stack buttons in upper right corner or in a row along the bottom – List default button first – Place

and

Cancel

other, in that order buttons next to each – If no

button, but one or more command buttons, place

Cancel

before the

Help

at end of buttons, but – If button applies a specific field or a group of fields only, group it with that field or group.

Layout (4)

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 67

Graphic images

• Define the graphic’s 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 68

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 69

Guidelines for Effective Displays

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

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 user’s level of experience?

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 user’s 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 72

General Form and Window Design (3)

• Provide an appropriate title • Provide an appropriate icon • Set a window’s initial position appropriately • Make windows sizable • Remove the maximize button, if appropriate • Consider using the user’s 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 73

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 74

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 75

General Form and Window Design (6)

• Distinguish between entry fields and read-only fields 76

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 77

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”

– Description, language, advice, consequences, non judgemental • Format and organize text • Format tables correctly • Use windows • Consider analogue displays, graphs & diagrams 78

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 79

Data Input (2)

• Indicate required fields • Minimize input actions – Support: First character typing, auto-tabbing, macros, shortcut keys • Don’t 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 80

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 81

Data Input (4)

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

Guidelines for User Interface Components

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

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 84

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 85

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 86

Dialog Boxes

• Provide a suitable caption and icon • Keep them small • Provide meaningful and understandable content • Provide

and

Cancel

boxes buttons on modal dialog • Use consistent exit buttons on modeless dialog boxes • Use consistent button placement and order across all dialog boxes 87

Dialog Boxes (2)

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

Message Boxes

• Provide suitable caption • Provide meaningful and understandable content – State problem, cause & how to resolve – Not > 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

information unless user asked to wait or retype – Avoid messages that tend to blame user or imply that user made mistake 89 • Use appropriate button

Command Buttons

• Use buttons of standard size • Use short but meaningful captions • Define quick access keys • Use the “<“ and “>” symbols • Use the “ellipses” standard • Use the “>> “ and “<<“ symbol to indicate window expansion.

Command Buttons

• Indicate direct access to a menu 91

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 label’s appearance • Limit the number of radio buttons • Avoid using an radio button like a command button • Assign quick access keys to radio button labels 92

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 label’s appearance 93

List Boxes

• Logically order list box items • Provide suitable label • Define a quick-access key for the list box • Disable a list box’s 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\inv050402.pdf

• Accommodate at least three to eight items 94

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 95

Guidelines for User Assistance

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

Guidelines for User Assistance (2)

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

Contextual Help

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

Contextual Help (2)

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

Contextual Help (3)

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

Contextual Help (4)

Help buttons • Display help according to button placement • Display the help in the HTML Help viewer • Don’t use the Help button as a replacement for What’s This? Help 101

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 102

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 103

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 104

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 105

Wizards

Special form of user assistance that automates a task using dialog with the user • Don’t 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” – Don’t tell users what to do, ask questions – Use short, common words – Use as few words as possible – Keep the writing clear, concise and simple 106

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 • … 107

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 user’s hard disk.

• Use the available “user folders” as default for you application 108

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 system’s GUI elements appropriately –

Start

menu should be reserved for frequently accessed items only – Avoid placing icons on desktop automatically 109

Guidelines for Supporting International Users

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

Web design guidelines

111