72
Human Computer Interface Design Pedro Mejia Alvarez CINVESTAV-IPN Based on the course on Software Engineering of Er-Yu Ding Software Institute, NJU

Human Computer Interface Design

Embed Size (px)

DESCRIPTION

Human Computer Interface Design. Pedro Mejia Alvarez CINVESTAV-IPN Based on the course on Software Engineering of Er-Yu Ding Software Institute, NJU. Main Contents. Why HCI Design? Objectives of HCI Design Basics of HCI Design Golden Principles and Rules of HCI Design - PowerPoint PPT Presentation

Citation preview

Page 1: Human Computer Interface Design

Human Computer Interface Design

Pedro Mejia Alvarez CINVESTAV-IPN

Based on the course on Software Engineering of Er-Yu DingSoftware Institute, NJU

Page 2: Human Computer Interface Design

Main Contents

1. Why HCI Design?2. Objectives of HCI Design3. Basics of HCI Design4. Golden Principles and Rules of HCI

Design5. Process of HCI Design

Page 3: Human Computer Interface Design

1.Why HCI Design?——What is HCI?

• UI design is not just about the arrangement of media on a screen

• It’s designing an entire experience for people, hence a “look and feel”

• Psychology: building a mental model• Ergonomics: facilitating navigation

Page 4: Human Computer Interface Design

1.Why HCI Design?

• System users often judge a system by its interface rather than its functionality.– User interfaces should be designed to match the

skills, experience and expectations of its anticipated users.

• A poorly designed interface can cause a user to make catastrophic errors. – A poor UI is often a reason why so many software

systems are never used.

• “A user interface is well-designed when the program behaves exactly how the user thought it would.” – Joel Spolsky

Page 5: Human Computer Interface Design

1.Why HCI Design?——We remember only the bad!• A good interface should be transparent• Bad interfaces cause user frustration

– “What was this product designer thinking?”

GOOD BAD

Page 6: Human Computer Interface Design

2. Objectives of HCI Design ——What is a good HCI interface design

• A good HCI interface design encourage an easy, natural, and engaging interaction between a user and a system.

• It allows users to carry our their required tasks.

• With a good user interface, users forget that they are using a computer.

How to judge good or bad?

Usability!

Page 7: Human Computer Interface Design

2. Objectives of HCI Design —— Usability attributes of an interface

• Usability is not a single, one-dimensional property of a user interface– Learnability: learn easily, user can do things

with it in little time– Efficiency: skilled users can use it with great

efficiency– Memorability: interrupted users can continual

use it ,do not need to starting from scratch– Errors: little errors, resume quickly from errors– Satisfaction: make users pleased

Page 8: Human Computer Interface Design

2. Objectives of HCI Design —— Learn Curve

Page 9: Human Computer Interface Design

2. Objectives of HCI Design —— Memory

• Involves encoding and recalling knowledge and acting appropriately

• We don’t remember everything – involves filtering and processing

• Context is important in affecting our memory• We recognize things much better than being able

to recall things– The rise of the GUI over command-based

interfaces• Better at remembering images than words

– The use of icons rather than names

Page 10: Human Computer Interface Design

2. Objectives of HCI Design —— Human Factors in Interface Design

• Limited short-term memory– People can instantaneously remember about 7 items of information.

If you present more than this, they are more liable to make mistakes.

• People make mistakes– When people make mistakes and systems go wrong, inappropriate

alarms and messages can increase stress and hence the likelihood of more mistakes.

• People are different– People have a wide range of physical capabilities. Designers should

not just design for their own capabilities.

• People have different interaction preferences– Some like pictures, some like text.

Page 11: Human Computer Interface Design

3. Basics of HCI Design ——User-System interaction

• Two problems must be addressed in interactive systems design– How should information from the user be

provided to the computer system?– How should information from the computer

system be presented to the user?

• User interaction and information presentation may be integrated through a coherent framework such as a user interface metaphor.

Page 12: Human Computer Interface Design

3. Basics of HCI Design —— Interaction styles

• Direct manipulation– Easiest to grasp with immediate feedback– Difficult to program

• Menu selection– User effort and errors minimized– Large numbers and combinations of choices a problem

• Form fill-in– Ease of use, simple data entry– Tedious, takes a lot of screen space

• Command language– Easy to program and process– Difficult to master for casual users

• Natural language– Great for casual users– Tedious for expert users

Page 13: Human Computer Interface Design

3. Basics of HCI Design —— An Example of Direct manipulation

Title

Method

Type

Selection

NODE LINKS FONT LABEL EDIT

JSD. example

JSD

Network

Process

Units

Reduce

cm

Full

OUIT

PRINT

Grid Busy

Control panel interface

Page 14: Human Computer Interface Design

3. Basics of HCI Design —— Direct manipulation

• Advantages:– Users feel in control of the computer and are not

intimidated by it.– User learning time is relatively short.– User get immediate feedback on their actions. Mistakes

can often be detected and corrected quickly.

• Problems:– How can an appropriate information model and

metaphors be derived?– Given that users have a large information space, how can

they navigate around that space and always aware of their current position?

– Interfaces usually are complicated.

Page 15: Human Computer Interface Design

Pop-up menu

Pull-down menu

Walking menu

3. Basics of HCI Design —— Menu Systems

• pull-down menus: – predictable, but need more screen

space– display the menu title. – User can select commands through

this menu.

• pop-up menus: – flexible, tailorable, may cause user

surprise– -They are associated with entities

(such as a field). – Selecting the entity then clicking a

mouse button --> cause the menu to appear.

Page 16: Human Computer Interface Design

3. Basics of HCI Design —— Menu Systems

• Advantages:– Users do not need to know the command names.– Typing efforts is minimal.– Some user errors can be avoid.– Context-dependent help can be provided.

• Problems:– Actions which involve logical conjunction (and)

or disjunction (or) are awkward to represent– Take care the structure of large menus.

• Solutions: a) scrolling menus, b) hierarchical menus c) walking menus, d) associated control panels

Page 17: Human Computer Interface Design

3. Basics of HCI Design —— Form-based interface

• Advantage– For structured data representation and filling in

• Problems– Just for structured data representation and filling in

Title

Author

Publisher

Edition

Classification

Date ofpurchase

ISBN

Price

Publicationdate

Number ofcopies

Loanstatus

Orderstatus

NEW BOOK

Page 18: Human Computer Interface Design

3. Basics of HCI Design ——Command-line interfaces

• Advantages:– Implementation is easy and simple due to the language processing.– It can support very complex systems with a lot of commands.– User interface needs a little effort.– Typing efforts is minimal.– Some user errors can be avoid.– Context-dependent help can be provided.

• Problems:– Users must learn and remember all commands.– Hard to learn the system and not easy for operations.– Users inevitably make errors.

Page 19: Human Computer Interface Design

3. Basics of HCI Design —— Natural language interfaces

• The user types a command in a natural language. Generally, the vocabulary is limited and these systems are confined to specific application domains (e.g. timetable enquiries)

• NL processing technology is now good enough to make these interfaces effective for casual users but experienced users find that they require too much typing

Page 20: Human Computer Interface Design

3. Basics of HCI Design —— Multiple user interfaces

Operating system

GUImanager

Graphical userinterface

Commandlanguage

interpreter

Commandlanguageinterface

Page 21: Human Computer Interface Design

Interactionstyle

Main advantages Main disadvantages Applicationexamples

Directmanipulation

Fast and intuitiveinteractionEasy to learn

May be hard to implement.Only suitable where there is avisual metaphor for tasks andobjects.

Video gamesCAD systems

Menuselection

Avoids user errorLittle typing required

Slow for experienced users.Can become complex if manymenu options.

Most general-purpose systems

Form fill-in Simple data entryEasy to learnCheckable

Takes up a lot of screen space.Causes problems where useroptions do not match the formfields.

Stock control,Personal loanprocessing

Commandlanguage

Powerful and flexible Hard to learn.Poor error management.

Operating systems,Command andcontrol systems

Naturallanguage

Accessible to casualusersEasily extended

Requires more typing.Natural language understandingsystems are unreliable.

Informationretrieval systems

Page 22: Human Computer Interface Design

3. Basics of HCI Design —— Interface Types

• Batch: without interaction– Copy, email-message, etc.

• Command: one-dimension interface– For skilled users with fixed tasks

• Full screen: two-dimension interface– form, menu, navigation key– For skilled users with limited number tasks

• Graphics screen: two and half dimension interface– Window, menu, icon, position devices (mouse, etc.)– Object-oriented, operate directly

• Next generation in the future: three or more dimensions interface– Additional dimensions: time, voice, etc.– More facilitative, more personalization

Page 23: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Golden Rules

• Place the user in control• Reduce the user’s memory load• Be consistent

Page 24: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Place the User in Control

• Define interaction modes in a way that does not force a user into unnecessary or undesired actions.

• Provide for flexible interaction. • Allow user interaction to be interruptible and

undoable. • Streamline interaction as skill levels advance

and allow the interaction to be customized. • Hide technical internals from the casual user. • Design for direct interaction with objects that

appear on the screen.

Page 25: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Reduce the User’s Memory Load

• Reduce demand on short-term memory. • Establish meaningful defaults. • Define shortcuts that are intuitive. • The visual layout of the interface should be

based on a real world metaphor. • Disclose information in a progressive fashion.

Page 26: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Make the Interface Consistent

• Allow the user to put the current task into a meaningful context.

• Maintain consistency across a family of applications.

• If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so.

Page 27: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Ten Principles ( 1)

• Compact and natural dialogue– Design graph and color– Few is much

• Using user language• Least memory needed for user• Consistent• Feedback

Page 28: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Ten Principles ( 2)

• Identify exit clear• Shortcut• Good error message• Avoid mistake• Help and document

Page 29: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

• Obtrusive Assistance

Page 30: Human Computer Interface Design

• If your program model is nontrivial, it’s probably wrong

(“invisible sheets” in Excel)

Click here This window comes to top!

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 31: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

• Bad Wizards

Page 32: Human Computer Interface Design

XEROX’s GUI (1981)

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 33: Human Computer Interface Design

• How do the following screen objects afford?– What if you were a novice user?– Would you know what to do with them?

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 34: Human Computer Interface Design

phones, remote controls calculators, computer keypads

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 35: Human Computer Interface Design

click

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 36: Human Computer Interface Design

floating menu bar huge system tray

How many users want these?

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 37: Human Computer Interface Design

vs.

(30% usability) (100% usability)

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 38: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 39: Human Computer Interface Design

vs.

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 40: Human Computer Interface Design

vs.

vs.

(no dialog)

Which is better for an intimidated user?

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 41: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 42: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 43: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 44: Human Computer Interface Design

4. Golden Principles and Rules of HCI Design—— Which Rules are there?

Page 45: Human Computer Interface Design

5. Process of HCI Design——Four basic activities

• There are four basic activities in interaction design:1. Identifying needs and establishing

requirements2. Developing alternative designs3. Building interactive versions of the designs4. Evaluating designs

Page 46: Human Computer Interface Design

5. Process of HCI Design—— User Interface Design Process

Page 47: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis

• Interface analysis means understanding – User

• Individual characteristics• User groups• Frequency of usage

– Work• Task features• Time constraints• Errors

– Content• Figure , graph or text

– Environment• General environment factors• Organization• Culture

Page 48: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: User• Why do we need to understand users?

– Interacting with technology is cognitive• We need to take into account cognitive

processes involved and cognitive limitations of users

– We can provide knowledge about what users can and cannot be expected to do

• Identify and explain the nature and causes of problems users encounter

– Supply theories, modeling tools, guidance and methods that can lead to the design of better interactive products

Page 49: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: User

• Usage profiles– Novice or first-time users

– Knowledgeable intermittent users

– Expert frequent users

• User characteristics– Age – Gender – Physical abilities – Education – Cultural or ethnic background – Training – Motivation – Goals – Personality

Page 50: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: User

• Are users trained professionals, technician, clerical, or manufacturing workers?

• What level of formal education does the average user have?• Are the users capable of learning from written materials or have they

expressed a desire for classroom training?• Are users expert typists or keyboard phobic?• What is the age range of the user community?• Will the users be represented predominately by one gender?• How are users compensated for the work they perform? • Do users work normal office hours or do they work until the job is done?• Is the software to be an integral part of the work users do or will it be used

only occasionally?• What is the primary spoken language among users?• What are the consequences if a user makes a mistake using the system?• Are users experts in the subject matter that is addressed by the system?• Do users want to know about the technology the sits behind the interface?

Page 51: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Work

• What tasks will a user of the system perform?– High level - why people use the system– Low level - tasks involved in using the system

• Tasks define basic interaction style– HCI design should be transparent to user– Business(user model ) .VS. Logic( designer

model)

Page 52: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Work

• Task profiles– Decomposition into multiple middle-level task actions, which are

refined into atomic actions

– task frequencies of use

– matrix of users and tasks helpful

• Interaction styles– Direct manipulation

– Menu selection

– Form fillin

– Command language

– Natural language

Page 53: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Work

• Task Analysis and Modeling– Use-cases define basic interaction– Task elaboration refines interactive tasks– Object elaboration identifies interface objects

(classes)– Workflow analysis defines how a work process

is completed when several people (and roles) are involved

– Layered representation according to task refinements

Page 54: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Work

• Answers to the following questions …– What work will the user perform in specific

circumstances?– What tasks and subtasks will be performed as the

user does the work?– What specific problem domain objects will the

user manipulate as work is performed?– What is the sequence of work tasks—the

workflow?– What is the hierarchy of tasks?

Page 55: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Content

• Terminology

• Prompts

• Menus

• Help screens

• Color

• Layout

• Capitalization

• Fonts

• Most frequently violated

Page 56: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Content

• Are different types of data assigned to consistent geographic locations on the screen (e.g., photos always appear in the upper right hand corner)?

• Can the user customize the screen location for content?• Is proper on-screen identification assigned to all content? • If a large report is to be presented, how should it be partitioned

for ease of understanding?• Will mechanisms be available for moving directly to summary

information for large collections of data.• Will graphical output be scaled to fit within the bounds of the

display device that is used?• How will color to be used to enhance understanding?• How will error messages and warning be presented to the user?

Page 57: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Content

Shape

Page 58: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Content

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar

Dynamic information display

Page 59: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Content

• Color Use Guidelines – Limit the number of colors and be conservative in their use.

• No more than 4 or 5 colors in a window.– Use color change to show a change in system status.– Use color to support the task that users are trying to perform.

• Color should emphasize the most important data.– Use color coding in a thoughtful and consistent way.

• Using red to indicate success is probably not a good idea.– Be careful about color pairings.

• E.g. Dark blue on black is not a good choice.– Avoid associating meaning with colors.

• Users may not see colors or associate with different meaning.

Page 60: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Environments

• Systems model

• Physical environments

• Culture ambience

Page 61: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Environments

• System model– Global– Temporary– Background

• Physical environments– Color– Noice– Etc.

Page 62: Human Computer Interface Design

• Cultural constraints– Learned arbitrary conventions

5. Process of HCI Design—— Interface Analysis: Environments

Page 63: Human Computer Interface Design

5. Process of HCI Design—— Interface Analysis: Environments

• Cultural constraints– How/what to represent the target culture?– Should designs impose foreign values?

Page 64: Human Computer Interface Design

5. Process of HCI Design—— Interface Design Steps

• Using information developed during interface analysis, define interface objects and actions (operations).

• Define events (user actions) that will cause the state of the user interface to change. Model this behavior.

• Depict each interface state as it will actually look to the end-user.

• Indicate how the user interprets the state of the system from information provided through the interface.

Page 65: Human Computer Interface Design

5. Process of HCI Design——Prototyping HCI Interfaces

• High-fidelity: implement it in Flash• Low-fidelity: use paper, glue, index cards, tape,

colored markers• Advantages of low-fidelity prototype?

– Easy and inexpensive to build– Easy and cheap to change, many times

• Disadvantages of low-fidelity prototype?– Don’t simulate computer response time accurately

Page 66: Human Computer Interface Design

5. Process of HCI Design——Prototyping HCI Interfaces:An example

Page 67: Human Computer Interface Design

5. Process of HCI Design—— Interface Design Patterns

• Patterns are available for:– The complete UI– Page layout– Forms and input– Tables– Direct data manipulation– Navigation– Searching– Page elements (Wizard)– e-Commerce

Page 68: Human Computer Interface Design

5. Process of HCI Design——HCI Design Issues

• Response time• Help facilities• Error handling• Menu and command labeling• Application accessibility• Internationalization

Page 69: Human Computer Interface Design

5. Process of HCI Design——HCI Design Evaluation

• Some evaluation of a user interface design should be carried out to assess its suitability

• Full scale evaluation is very expensive and impractical for most systems

• Ideally, an interface should be evaluated against a usability specification. However, it is rare for such specifications to be produced

Page 70: Human Computer Interface Design

5. Process of HCI Design—— Simple evaluation techniques

• Questionnaires for user feedback• Video recording of system use and

subsequent tape evaluation.• Instrumentation of code to collect

information about facility use and user errors.

• The provision of a grip button for on-line user feedback.

Page 71: Human Computer Interface Design

5. Process of HCI Design—— Design Evaluation Cycle

preliminarydesign

buildprototype #1

interface

evaluationis studied by

designer

designmodifications

are made

buildprototype # n

interface

userevaluate'sinterface

Interface designis complete

Page 72: Human Computer Interface Design

Conclusions