Support for user interface design & usability evaluation Standards, principles & guidelines: Original by Jenny Le Peuple 2006, edited by Pen Lister 2009

User-interface design support Embodied in: underlying theory high level design principles guidelines standards documentation

Taxonomies and terms design rules guidelines standards Precise recommendations about specific areas of design Low in authority and more general in application Imposed by regulatory body principles Heuristics when used in practice, and Design concepts Smith-Atakan, 2006, & Preece et al, 2007)

Different taxonomies… Dix (1998) design rules http://bit.ly/Dix_et_al-HCI-googlebooks

Preece (1994 & 2007) guidelines Different taxonomies… Interaction Design, 2nd Ed, p.36

Newman & Lamming (1995) guidelines Different taxonomies… Newman, W. M. & Lamming, M. G. (1998) Interactive System Design. Addison-Wesley

Confused? another view... J Le Peuple, 2003

Standards World Wide Web Consortium International Standards organisation National Physical Laboratory Linux Apple Windows Open Source – is this a standard? The Open Group

Standards are: Prescribed models of presenting doing communicating to achieve consistency

Standards: importance to usability Ease of learning Ease of use Quality assurance Communication Safety Consistency Fulfilment of legal obligations

Standards: status in-house e.g. style guides/check lists proprietary i.e. developed & established by one particular manufacturer, e.g. Mac OS X, MS Windows proprietary standard may become de facto standard e.g. Motif (Unix GUI standard) de facto standards can become de jure i.e. formal, universally agreed, subject to legislation De facto is a Latin expression that means "by [the] fact". In law, it is meant to mean "in practice but not necessarily ordained by law" or "in practice or actuality, but without being officially established". It is commonly used in contrast to de jure (which means "concerning the law") when referring to matters of law, governance, or technique (such as standards) that are found in the common experience as created or developed without or contrary to a regulation. When discussing a legal situation, de jure designates what the law says, while de facto designates action of what happens in practice. (Ref:Wikipedia)

Standard-setting bodies ECMA European Computer Manufacturers Association NIST National Institute of Standards & Technology (USA) NPL National Physical Laboratory (UK) Various national & international organisations establish de jure standards, e.g.:

Standards: The Opengroup Criteria include: free distribution inclusion of source code allow modifications Examples: Linux; Mozilla Proprietary standard may become open* “The Open Group is a vendor-neutral and technology-neutral consortium, whose vision of Boundaryless Information Flow™ will enable access to integrated information, within and among enterprises,based on open standards and global interoperability.” http://www.opengroup.org * See also Microsoft Article: http://bit.ly/open-proprietary-standards Open Source Standards statement: http://www.opensource.org/osr-intro

W3C Founded in 1994.Jointly administered by: MIT Computer Science and Artificial Intelligence Laboratory (CSAIL)- USA European Research Consortium for Informatics and Mathematics (ERCIM) - France Keio University - Japan) + 15 “World Offices” Develops/maintains standards for e.g. transmission protocols (HTTP) HTML et etc Director is Tim Berners-Lee (who invented WWW) http://www.w3c.org World Wide Web Consortium

Other ‘organisations’ Dublin Core http://dublincore.org/ Open Source http://www.opensource.org/ Cynthia Says http://www.contentquality.com/ Section 508 http://www.section508.gov/ WCAG http://www.w3.org/TR/WCAG/ Apple Accessibility http://www.apple.com/accessibility/

Standards: ISO Worldwide federation of national standards bodies, includes some 130 countries Aims: promote development of standardisation facilitate international exchange of goods/services promote intellectual, scientific & economic activity International Organization for Standardization http://www.iso.org/

Standards relevant to usability ISO 9241 Office/VDT ergonomics ISO 11064 Control room ergonomics ISO 13406 Flat panel displays ISO 14915 Multimedia ISO 13407 Human centred design

ISO 9241 “Ergonomics requirements for office work with visual display units (VDTs)” 17 parts including: “classic” ergonomics (parts 2-9) software usability standards (parts 10-17)

ISO 9241- 11 Usability Specification Defines usability of whole system 3 factors: effectiveness efficiency satisfaction Measurable criteria, e.g. minimum times to complete tasks satisfaction rating must reach mean score of 2 on a 1-5 rating scale etc.

ISO 13407 “Human centred design process for interactive systems” Scope: design of interactive computer-based systems: covers hardware & software promotes human factors & ergonomics guidance for project managers complementary to ISO 9241

Design Principles

Design principles Features: high level underpin guidelines & standards widely applicable general based on established body of theory

Principles: categories an example: Smith-Atakan (2006, p 31-32) Learnability – can we learn it? Predictability –can we predict how to use it? Consistency – is the design ‘the same’? Flexibility – how well does it exchange info with us? Recoverability – can we recover from our errors? Responsiveness – how quick is it to do what we ask?

Principles: categories more examples - Dix (1998, p 162) Useful paper on comparisons from Cornell University Library archive: http://arxiv.org/ftp/cs/papers/0409/0409041.pdf

The five “Es” Quesenbery (2001) expanded ISO 9241 guidelines to five dimensions Effective completeness and accuracy with which users achieve specified goals Efficient the speed (with accuracy) in which users can complete the tasks for which they use the product Engaging pleasant and satisfying to use Error tolerant prevent errors caused by the user’s interaction & help the user recover from any errors that do occur. Easy to learn allows users to build on their knowledge without deliberate effort http://www.cognetics.com/papers/whitney/whitney1.html

Refining general guidelines into usability goals an example for a specific system (conference registration site) adapted from Quesenbery, 2003 You may find it useful, for your coursework, to group your usability goals under the same dimensions. Obviously there should be a lot more of them, since the above is just an example

Design guidelines Can take the form of: Hints & tips recommendations checklists style guides etc…

Guidelines derive from: Practitioner experience and/or empirical studies Most authoritative underpinned by theoretically derived principle

Guidelines – derived from principles

Problems with guidelines Can be too general e.g. “provide feedback” Can be too specific in terms of context e.g. web guidelines not much use for public access kiosks Can be contradictory/ambiguous e.g. “always display all the menu choices on one page” “never display > 7 menu choices” Can be inaccessible to designers or ignored for other reasons Validity & reliability how were the guidelines derived? Stifle creativity & innovation?

Hard to use? Suggest guidelines are hard to: access interpret contextualise Conducted work with interface designers approached guidelines in a different way deviations categorised as: mistakes lack of knowledge opinions designers claimed to acknowledge value of guidelines but: wanted to feel in control disagreed with some of the guidelines Löwgren & Laurén (1993) Löwgren, J. & Laurén, U. (1993) Supporting the use of guidelines and style guides in professional user interface design. Interacting with Computers, 5, (4), 385-396.

A mixed blessing/curse? Suggests: Standards/guidelines don’t cover all design decisions a specific, tailored HCI process required as well even ISO standards can be quite general Compliance increasingly used to “certify” usability does conformity assure usability? Standards/guidelines cannot address: specific user populations context of use in work environment Buie (1999) Buie, E. (1999) HCI standards: a mixed blessing. Interactions, March + April, 36-42.

A note about validity & reliability Validity are you really measuring the construct you think you are measuring? guidelines for ensuring “navigability” – is this what they really ensure? Reliability consistency of results would the same result be achieved over & over? The provenance of some guidelines (& usability testing techniques) is dubious in respect of validity & reliability See Hughes (1999) re ensuring validity & reliability of usability testing Applies to all instruments involving data measurement, collection, analysis etc. in this context, the derivation of usability guidelines:

HCI Patterns

Patterns: a relatively new approach “In essence, patterns are structural and behavioural features that improve the "habitability" of something -- a user interface, a Web site, an object-oriented program, or even a building. They make things more usable, easier to understand, or more beautiful; they make tools more ready-to-hand. As such, patterns can be a description of best practices within a given design domain. They capture common solutions to design tensions (usually called "forces" in pattern literature) and thus, by definition, are not novel. They aren't off-the-shelf components; each implementation of a pattern is a little different from every other. They aren't simple rules or heuristics either. And they won't walk you through an entire set of design decisions -- if you're looking for a complete step-by-step description of how to design a UI, this isn't the place!” Jenifer Tidwell (on the web site “Designing Interfaces”) http://www.designinginterfaces.com/

Patterns examples from Designing Interfaces This pattern is called “Visual Framework” http://www.designinginterfaces.com/Visual_Framework What: Design each page to use the same basic layout, colors, and stylistic elements, but give the design enough flexibility to handle varying page content. Use when: You're building a Web site with several pages, or a UI with multiple windows -- in other words, almost any complex software. You want it to "hang together" and look like one thing, deliberately designed; it should be easy to use and navigate. Contd…

Patterns examples from Designing Interfaces Why: When a UI uses consistent color, font, and layout, and when titles and navigational aids -- signposts -- are in the same place every time, users know where they are and where to find things. They don't have to figure out a new layout each time they switch context from one page or window to another. Have you ever seen a book in which the page numbers and headings were in a different place on each page? A strong visual framework, repeated on each page, helps the page content stand out more. That which is constant fades into the background of the user's awareness; that which changes is noticed. Furthermore, adding character to the design of the visual framework helps with the branding of your Web site or product -- the pages become recognizable as yours. How: Draw up an overall look-and-feel for each page or dialog in the thing you'ew building. Home pages and main windows are "special" and are usually laid out a little differently from subsidiary pages, but they should still share certain characteristics with the rest of the artifact. For example: * Color: backgrounds, text colors, and accent colors * Fonts: for titles, subtitles, ordinary text, minor text * Writing style and grammar: titles, names, content, short descriptions, any long blocks of text, anything that uses language

"You are here" signposts: titles, logos, breadcrumb trails, and Card Stack indexes such as tabs or link columns Navigational devices: sets of standard links, OK/Cancel buttons, back buttons, "quit" or "exit" buttons, and navigational patterns such as Global Navigation, Sequence Map, and Breadcrumbs. Techniques used to define Titled Sections Spacing and alignment: page margins, line spacing, the gaps between labels and their associated controls, and text and label justification Overall layout grid: the placement of things on the page, in columns and/or rows, taking into account the margins and spacing issues listed above. If you're familiar with graphic design concepts, you may recognize some of these as comprising a layout grid. A layout grid is a structural template for a set of pages or layouts. Each individual page is different, but all pages use specified margins and align their contents along invisible gridlines. A good Visual Framework does indeed include a layout grid, but it also includes other aspects of look-and-feel, such as colors, visual details, and writing style. Implementation of a visual framework should force you to separate stylistic aspects of the UI from the content. This isn't a bad thing. If you define the framework in only one place -- such as a CSS stylesheet or a Java class -- it lets you change the framework independently from the content, which means you can tweak it and get it right more easily. (It's also good software engineering practice.) All other pages or windows should also share the following, as appropriate: Patterns examples from Designing Interfaces

Patterns examples from Designing Interfaces Examples: The Windows and Mac OS look-and-feels help to implement a visual framework, since colors, fonts, and controls are fairly standard. But you need to add the higher-level structure, like the layout grid and language. These Excel screenshots both come from the same dialog -- Page Setup -- and they illustrate the concept well. All these characteristics are consistent from page to page: location of action buttons in the upper and lower right; margin size, indenting, and vertical distance between text fields; extension of text fields to the right edge; the use of labeled separators (such as "Print titles" and "Orientation") to delimit Titled Sections; and capitalization and grammar.

Patterns – Do they address some of the problems with guidelines? i.e. guidelines can be: too general too specific not accessible hard to interpret lacking in context lacking in authority etc… Whereas patterns tell us: What When Why How and give examples

Patterns – what are they made up of? Jared Spools Elements of a Design Pattern 'Pattern Name' Section 'Description' Section 'Context of Use' Section 'Where Used' Section 'How It Works' Section 'Specifications' Section 'Co-requisites' Section 'Related Patterns' Section 'Competitive Approaches' Section 'History' Section 'Source Code' Section 'Usability Results and User Feedback' Section 'Discussion' Section http://www.uie.com/articles/elements_of_a_design_pattern/

Additional References, Pen Lister Corrado, E, 2005, The Importance of Open Access, Open Source, and Open Standards for Libraries, Issues in Science and Technology Librarianship, USA Design Pattern Library #1 - http://www.welie.com/patterns/ Smith-Atakan, S, 2006, Human Computer Interaction, Thompson Learning, UK Spool, J, 2006, The Elements of a Design Pattern, User Interface Engineering, USA http://www.uie.com/articles/elements_of_a_design_pattern/ UI Patterns - http://ui-patterns.com/

References/further reading Buie, E. (1999) HCI standards: a mixed blessing. Interactions, March + April, 36-42. Dix, A., Finlay, J., Abowd, G. & Beale, R. (1998) Human-Computer Interaction (2nd Edition). Prentice Hall Europe. Faulkner, X. (2000) Usability Engineering. Macmillan Press. Gardiner, M. M. & Christie, B. (1987) Applying Cognitive Psychology to User-interface Design. John Wiley & Sons. Gerhardt-Powals, J. (1996). Cognitive engineering principles for enhancing human-computer performance. International Journal of Human-Computer Interaction 8(2) 189-211. Grose, E, Forsythe, C. & Ratner, J (1999) “Using Web & Traditional Style Guides to Design Web Interfaces” in Chris Forsythe, Eric Grose & Julie Ratner, Human Factors and Web Development, Lawrence Erlbaum Associates. Hughes, M. (1999). Rigor in usability testing. Technical Communication, Fourth Quarter, 488-494. Löwgren, J. & Laurén, U. (1993) Supporting the use of guidelines and style guides in professional user interface design. Interacting with Computers, 5, (4), 385-396. Mayhew, D. J. (1992) Principles and Guidelines in Software User Interface Design. Prentice-Hall.

Maguire, M. C. (1999) A review of user-interface design guidelines for public information kiosk systems. International Journal of Human-Computer Studies, 50, 263-286 Newman, W. M. & Lamming, M. G. (1998) Interactive System Design. Addison-Wesley. Monk, A. (2000) Noddy’s guide to consistency. Interfaces, 45, 4-7. Mullett, K. & Sano, D. (1995) Designing Visual Interfaces: Communication Oriented Techniques, SunSoft Press/Prentice Hall Preece, J. (Ed) (1995) Human-Computer Interaction. Addison-Wesley. Quesenbery, W. (2003). “The five dimensions of usability” in M. J. Albers & Mazur, B. (Eds) Content and Complexity. Lawrence Erlbaum. Reed, P., Holdaway, K., Isensee, S., Buie, E., Fox, J., Williams, J. & Lund, A. (1999) User interface guidelines and standards: progress, issues and prospects. Interacting with Computers, 12, 119-142. Redmond-Pyle, D. & Moore, E. (1995) Graphical User Interface Design and Evaluation. Prentice-Hall. Simpson, N. (1999) Managing the use of style guides in an organisational setting: practical lessons in ensuring UI consistency. Interacting with Computers, 11, 323-351. Stewart, T. (2000) Ergonomics user interface standards: are they more trouble than they are worth? Ergonomics, 43, (7), 1030-1044. References/further reading

University of Maryland http://www.otal.umd.edu/guse/standards.html Extensive links to information about standards & guidelines. Usability SIG http://www.stcsig.org/usability/topics/uistandards.html Special Interest Group of STC (Society for Technical Communication) – this page contains lots of links relating to standards & guidelines. Yale Web Style Guide http://www.webstyleguide.com/ Authoritative and practical guidance on web design (also available in book form). Designing Interfaces http://designinginterfaces.com/ the web site that accompanies Tidwell, J. (2006) Designing Interfaces. O’Reilly. Lots of useful design patterns. Some Standards and Guidelines Websites

READ Chapter 3, Design Guidance: principles, guidelines and standards in Le Peuple & Scane (2003). User Interface Design. Crucial. VISIT Usability.gov http://usability.gov Set up, initially, to improve the communication of cancer research. A surprising source of very comprehensive advice & links on usability. See esp. the research based guidelines at http://www.usability.gov/pdfs/guidelines.html Interesting “strength of evidence” scale for each guideline (see http://www.usability.gov/pdfs/chap.html ) IBM Ease of Use http://www-03.ibm.com/easy/page/558 The site includes design concepts & guidelines, tools, interface design information & references Activities for week 7

End