Virtual University - Human Computer Interaction 1

Imran Hussain | UMT

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



Virtual University - Human Computer Interaction 2
Imran Hussain | UMT
In Last Lecture
Prototyping techniques
Low-fidelity
High-fidelity
Virtual University - Human Computer Interaction 3
Imran Hussain | UMT
In Todays Lecture
Principles

Guidelines

Rules

Standards

Patterns

Imperatives
Virtual University - Human Computer Interaction 4
Imran Hussain | UMT
Introduction
Virtual University - Human Computer Interaction 5
Imran Hussain | UMT
Lets look at the design process again
Virtual University - Human Computer Interaction 6
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 7
Imran Hussain | UMT
Techniques and methods on their own do not ensure
product quality and success

we need something more
Virtual University - Human Computer Interaction 8
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 9
Imran Hussain | UMT
Types of Guidance
Principles

Guidelines

Rules
Virtual University - Human Computer Interaction 10
Imran Hussain | UMT
Design Principles
Virtual University - Human Computer Interaction 11
Imran Hussain | UMT
Principle
A very broad statement that is usually based on research about how
people learn and work

Virtual University - Human Computer Interaction 12
Imran Hussain | UMT
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

Virtual University - Human Computer Interaction 13
Imran Hussain | UMT
Principles Minimize Work
Optimize experience of user

In case of productivity tools and non-entertainment-oriented
products this means minimization of work

Virtual University - Human Computer Interaction 14
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 15
Imran Hussain | UMT
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

Virtual University - Human Computer Interaction 16
Imran Hussain | UMT
Example of Principle
They state broad usability goals

Example
Be consistent in your choice of words, formats, graphics, and
procedures

Virtual University - Human Computer Interaction 17
Imran Hussain | UMT
Design Principles (Norman)
Visibility

Affordance

Constraints

Mapping

Consistency

Feedback
Virtual University - Human Computer Interaction 18
Imran Hussain | UMT
Difference between design, usability principles and
heuristics?
Virtual University - Human Computer Interaction 19
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 20
Imran Hussain | UMT
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

Virtual University - Human Computer Interaction 21
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 22
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 23
Imran Hussain | UMT
Common themes
Giving the user control

Striving for consistency

Smoothing interaction with feedback

Supporting the users limited memory
Virtual University - Human Computer Interaction 24
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 25
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 26
Imran Hussain | UMT
Design Guidelines
Virtual University - Human Computer Interaction 27
Imran Hussain | UMT
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)

Virtual University - Human Computer Interaction 28
Imran Hussain | UMT
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


Virtual University - Human Computer Interaction 29
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 30
Imran Hussain | UMT
Design Rules
Virtual University - Human Computer Interaction 31
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 32
Imran Hussain | UMT
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.
Virtual University - Human Computer Interaction 33
Imran Hussain | UMT
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 ..
Virtual University - Human Computer Interaction 34
Imran Hussain | UMT
Guides & Standards
Virtual University - Human Computer Interaction 35
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 36
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 37
Imran Hussain | UMT
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)
Virtual University - Human Computer Interaction 38
Imran Hussain | UMT
Design Patterns
Virtual University - Human Computer Interaction 39
Imran Hussain | UMT
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
Virtual University - Human Computer Interaction 40
Imran Hussain | UMT
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


Virtual University - Human Computer Interaction 41
Imran Hussain | UMT
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)

Virtual University - Human Computer Interaction 42
Imran Hussain | UMT
Example of structural pattern
Virtual University - Human Computer Interaction 43
Imran Hussain | UMT
Design Imperatives
Virtual University - Human Computer Interaction 44
Imran Hussain | UMT
Design Imperatives
These guide the design process, aka goals

Types
Ethical [considerate, helpful]
Purposeful [useful, usable]
Pragmatic [viable, feasible]
Elegant [efficient, artful, affective]