Imran Hussain

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 Todays Lecture

• Principles
• Guidelines
• Rules
• Standards
• Patterns
• Imperatives

4
Introduction
5
Lets 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 users 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 users 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 users 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 dont 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 dont 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
Concept Level of Guidance AKA How to Use
Usability Goals General Setting up usability criteria for assessing the acceptability of a system (e.g., How long does it take to perform a task?).
User Experience Goals General Pleasure factors Identifying important factors of the user experience (e.g., How can you make the interactive product more enjoyable?).
Design Principles General Heuristics when used in practice As reminders of what to provide and what to avoid when designing and interface (e.g., What kind of feedback are you going to provide at the interface?)
Usability Principles Specific Heuristics when used in practice Assessing the acceptability of interfaces, used during heuristic evaluation (e.g., Does the system provide clearly marked exits?).
Rules Specific Interface specifications To determine if an interface adheres to a specific rule when being designed and evaluated (e.g., Always provide a backwards and forwards navigation button on a web browser)
(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