Imran Hussain University of Management and Technology (UMT)

Post on 31-Dec-2015

21 views 0 download

description

Virtual University Human-Computer Interaction. Lecture 25 Design Synthesis. Imran Hussain University of Management and Technology (UMT). In Last Lecture …. Prototyping techniques Low-fidelity High-fidelity. In Today’s Lecture …. Principles Guidelines Rules Standards Patterns - PowerPoint PPT Presentation

Transcript of Imran Hussain University of Management and Technology (UMT)

Virtual University - Human Computer Interaction1 © Imran Hussain | UMT

Imran Hussain

University of Management and Technology (UMT)

Lecture 25

Design Synthesis

Virtual University

Human-Computer Interaction

Virtual University - Human Computer Interaction2 © Imran Hussain | UMT

In Last Lecture …

• Prototyping techniques– Low-fidelity

– High-fidelity

Virtual University - Human Computer Interaction3 © Imran Hussain | UMT

In Today’s Lecture …

• Principles

• Guidelines

• Rules

• Standards

• Patterns

• Imperatives

Virtual University - Human Computer Interaction4 © Imran Hussain | UMT

Introduction

Virtual University - Human Computer Interaction5 © Imran Hussain | UMT

Let’s look at the design process again …

Virtual University - Human Computer Interaction6 © 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 Interaction7 © Imran Hussain | UMT

Techniques and methods on their own do not ensure product quality and success

we need something more …

Virtual University - Human Computer Interaction8 © 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 Interaction9 © Imran Hussain | UMT

Types of Guidance

• Principles

• Guidelines

• Rules

Virtual University - Human Computer Interaction10 © Imran Hussain | UMT

Design Principles

Virtual University - Human Computer Interaction11 © Imran Hussain | UMT

Principle

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

Virtual University - Human Computer Interaction12 © 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 Interaction13 © 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 Interaction14 © 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 Interaction15 © 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 Interaction16 © 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 Interaction17 © Imran Hussain | UMT

Design Principles (Norman)

• Visibility

• Affordance

• Constraints

• Mapping

• Consistency

• Feedback

Virtual University - Human Computer Interaction18 © Imran Hussain | UMT

Difference between design, usability principles and heuristics?

Virtual University - Human Computer Interaction19 © 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 Interaction20 © 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 Interaction21 © 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 Interaction22 © Imran Hussain | UMT

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

Virtual University - Human Computer Interaction23 © Imran Hussain | UMT

Common themes

• Giving the user control

• Striving for consistency

• Smoothing interaction with feedback

• Supporting the user’s limited memory

Virtual University - Human Computer Interaction24 © 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 don’t overtax users’ working memory• Use users’ words• Be consistent• Test for usability• Expect to revise

Virtual University - Human Computer Interaction25 © 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 Interaction26 © Imran Hussain | UMT

Design Guidelines

Virtual University - Human Computer Interaction27 © 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 Interaction28 © 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 Interaction29 © Imran Hussain | UMT

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

Virtual University - Human Computer Interaction30 © Imran Hussain | UMT

Design Rules

Virtual University - Human Computer Interaction31 © 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 Interaction32 © 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 Interaction33 © 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 Interaction34 © Imran Hussain | UMT

Guides & Standards

Virtual University - Human Computer Interaction35 © 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 Interaction36 © 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 Interaction37 © 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 Interaction38 © Imran Hussain | UMT

Design Patterns

Virtual University - Human Computer Interaction39 © 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 Interaction40 © 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 Interaction41 © 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 Interaction42 © Imran Hussain | UMT

Example of structural pattern

Virtual University - Human Computer Interaction43 © Imran Hussain | UMT

Design Imperatives

Virtual University - Human Computer Interaction44 © 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]