Imran Hussain University of Management and Technology (UMT)

1. Virtual University Human-Computer Interaction Lecture 25Design Synthesis Imran Hussain University of Management and Technology (UMT)

2. In Last Lecture … • Prototyping techniques • Low-fidelity • High-fidelity

3. In Today’s Lecture … • Principles • Guidelines • Rules • Standards • Patterns • Imperatives

4. Introduction

5. Let’s look at the design process again …

6. Goal-Directed Design Process Research User and the domain Modeling Users and use context Requirements Definition of user, business& technical needs Framework Definition of design structure & flow Refinement Of behavior, form& content

7. Techniques and methods on their own do not ensure product quality and successwe need something more …

8. Guidance for Design • Design is creative process • Design depends on existing body of knowledge and expertise • Knowledge distilled from industry best practices and research • This knowledge provides guidance

9. Types of Guidance • Principles • Guidelines • Rules

10. Design Principles

11. Principle • A very broad statement that is usually based on research about how people learn and work

12. Principle • Guidelines for design of useful and usable form and behavior • Generally applicable guidelines that address issues of behavior, form and content • Represent characteristics of product behavior that help users better accomplish their goals • Applied throughout design process, helping to translate tasks that arise out of scenario iterations into formalized structures and behaviors in the interface

13. Principles Minimize Work • Optimize experience of user • In case of productivity tools and non-entertainment-oriented products this means minimization of work

14. Principles Minimize Work • Work minimized includes • Logical work • Comprehension of text and organizational structure • Perceptual work • Decoding visual layouts and semantics of shape, size, color, and representation • Mnemonic work • Recall of passwords, command vectors, names and locations of data objects, and other relationships between objects • Physical/motor work • Number of keystrokes, degree of mouse movement, use of gestures, switching between input modes, extent of required navigation

15. Principles and Levels of Operation • Principles operate at 3 levels of organization: • Conceptual level • Help define what a product is and how it fits into the broad context of use by the primary personas • Interaction level • Define how a product should behave in general and in specific situations • Interface level • Help define the look and feel of interfaces • Most principles are cross-platform, but some platforms (Web, embedded systems) have special constraints

16. Example of Principle • They state broad usability goals • Example • Be consistent in your choice of words, formats, graphics, and procedures

17. Design Principles (Norman) • Visibility • Affordance • Constraints • Mapping • Consistency • Feedback

18. Difference between design, usability principles and heuristics?

19. Design Principles (Nielsen) • Visibility of system status • Match between system and real world • User freedom and control • Consistency and standards • Help users recognize, diagnose, and recover from errors • Error prevention • Recognition rather than recall • Flexibility and efficiency of use • Aesthetic and minimalist design • Help and documentation

20. Design Principles (Simpson, 1985) • Define the users • Anticipate the environment in which your program will be used • Give the operators control • Minimize operators’ work • Keep the program simple • Be consistent • Give adequate feedback • Do not overstress working memory • Minimize dependence on recall memory • Help the operators remain oriented • Code information properly (or not at all) • Follow prevailing design conventions

21. Design Principles (Shneiderman, 1992) • Strive for consistency • Enable frequent users to use shortcuts • Offer informative feedback • Design dialogs to yield closure • Offer simple error handling • Permit easy reversal of actions • Support internal locus of control • Reduce short-term memory load

22. Design Principles (Dumas, 1988) • Put the user in control • Address the user’s level of skill and knowledge • Be consistent in wording, formats, and procedures • Protect the user from the inner workings of the hardware and software that is behind the interface • Provide online documentation to help the user to understand how to operate the application and recover from errors • Minimize the burden on user’s memory • Follow principles of good graphics design in the layout of the information on the screen

23. Common themes • Giving the user control • Striving for consistency • Smoothing interaction with feedback • Supporting the user’s limited memory

24. Document Design (Redish, 1988) • Ask relevant questions when planning manuals • Learn about your audiences • Understand how people use manuals • Organize so that users can find information quickly • Put the user in control by showing the structure of the manual • Use typography to give readers clues to the structure of the manual • Write so that users can picture themselves in the text • Write so that you don’t overtax users’ working memory • Use users’ words • Be consistent • Test for usability • Expect to revise

25. Document Design (Horton, 1990) • Understand who uses the product and why • Adapt the dialo to the user • Make the information accessible • Apply a consistent organizational strategy • Make messages helpful • Prompt for inputs • Report status clearly • Explain errors fully • Fir help smoothly into the users’ workflow

26. Design Guidelines

27. Guideline • Distilled from principles and are more specific goals • One principle can lead to many guidelines • Guidelines can differ for specific combinations of users, environments and technologies • Specific guidelines developed after specialists gain knowledge of a new area of HCI • E.g., windows-based software (a new HCI area)

28. Guideline • Example • Be consistent in your choice of words, formats, graphics, and procedures (principle) • Be consistent in the way you have users leave every menu (guideline) • Bye • Exit • Quit • End

29. Principle  guidelines • Write so that you don’t overtax users’ working memory (principle) • Put the parts of each sentence in logical order • Cross out unnecessary words • Untangle convoluted sentences • Use lists, tables, and step-by-step instructions • Use parallel sentence structure whenever you can, especially in headings, lists, and explanations of options

30. Design Rules

31. Local Rule • Rules • Low-level guidance that refers to a particular prescription that must be followed • Forces everyone working on the interface to be consistent in their use of ways

32. Local Rule • Rules for design • E.g., Provide an ‘Escape’ option in a dialog in which users may want to leave the dialog box without making any changes or selecting any options.

33. Local Rule • Rules for documentation • Use typography to give readers clues to the structure of the manual (principle) • Make the headings stand out from the text (guideline) • Make the hierarchy of the headings obvious • Use a short line length for the text • Indent lists and steps in procedures • First headings are used only for chapter titles. They are in boldface, 24-point, Helvetica, with a 2-point line (rule), flush left with the beginning of the text line. Each first-level heading starts with a new page. (rule) • Second-level heading …..

34. Guides & Standards

35. Guides (Standards) • User-Interface Design Guides (aka User-Interface Design Standards, aka Style Guides) • Compilation of principles, guidelines and local rules • Used by an organization that frequently creates products • Useful way to communicate HCI practices and to ensure consistency

36. Published Standards • Standards available if developing products in one the Graphical User-Interface (GUI) operating systems • Standards published by: • Apple • Microsoft • IBM • Open Software Foundation

37. (Preece, Ch. 1)

38. Design Patterns

39. Patterns • Exemplary, generalizable solutions to specific classes of design problems • Purpose • Capture useful design decisions and generalize them to address similar classes of problems in the future • Represent the capture and formalization of design knowledge • Benefit • Reducing design time and effort • Educating designers new to product • Educating designers new to field

40. Interaction Patterns • Architectural patterns (Christopher Alexander, 1979) • Building blocks that capture essence of architectural design that creates a feeling of well-being in the inhabitants of architectural structures • Interaction patterns similar to architectural patterns • Apart from structure and organization, also concerned with dynamic behaviors and changes in elements in response to user activity • Engineering patterns’ sole concern is efficient reuse of code

41. Types of Interaction Design Patterns • Postural • Applied at conceptual level and helps determine product stance • Structural • Related to management of information display and access • Ways containers of data and functions are visually manipulated • E.g., views, panes, element groupings • Behavioral • Solve wide-ranging problems related to specific interactions with individual functional or data objects or groups of such objects (widget level)

42. Example of structural pattern

43. Design Imperatives

44. Design Imperatives • These guide the design process, aka goals • Types • Ethical [considerate, helpful] • Purposeful [useful, usable] • Pragmatic [viable, feasible] • Elegant [efficient, artful, affective]