User I nterf ace Design User I nterf ace Design a user t o make cat - - PDF document

SLIDE 1

1

1

User I nterf ace Design User I nterf ace Design

Designing ef f ect ive Designing ef f ect ive int erf aces int erf aces f or sof t ware syst ems f or sof t ware syst ems

2

I mportance of user interf ace I mportance of user interf ace

• Syst em users of t en j udge a syst em

Syst em users of t en j udge a syst em by it s int erf ace rat her t han it s by it s int erf ace rat her t han it s f unct ionalit y f unct ionalit y

• A poorly designed int erf ace can cause

A poorly designed int erf ace can cause a user t o make cat ast rophic errors a user t o make cat ast rophic errors

• Poor user int erf ace design is t he

Poor user int erf ace design is t he reason why so many sof t ware syst ems reason why so many sof t ware syst ems are never used are never used

3

Graphical user interf aces Graphical user interf aces

• Most users of business syst ems

Most users of business syst ems int eract wit h t hese syst ems t hrough int eract wit h t hese syst ems t hrough graphical user int erf aces (GUI s) graphical user int erf aces (GUI s)

– – alt hough, in some cases, legacy t ext alt hough, in some cases, legacy t ext -

• based int er f aces ar e st ill used

based int er f aces ar e st ill used

4

GUI characteristics GUI characteristics

• Windows

Windows

• I cons

I cons

• Menus

Menus

• Point ing Devices

Point ing Devices

• Graphics

Graphics

5

GUI advantages GUI advantages

• They are easy t o learn and use

They are easy t o learn and use

– – User s wit hout exper ience can lear n t o User s wit hout exper ience can lear n t o use t he syst em quickly use t he syst em quickly

• The user may swit ch quickly f rom one

The user may swit ch quickly f rom one t ask t o anot her and can int eract wit h t ask t o anot her and can int eract wit h several dif f erent applicat ions several dif f erent applicat ions

– – I nf or mat ion r emains visible in it s own I nf or mat ion r emains visible in it s own window when at t ent ion is swit ched window when at t ent ion is swit ched

• Fast , f ull

Fast , f ull-

• screen int eract ion is

screen int eract ion is possible wit h immediat e access t o possible wit h immediat e access t o anywhere on t he screen anywhere on t he screen

6

User User-

• centred design

centred design

• User

User -

• cent red design is an approach t o

cent red design is an approach t o UI design where t he needs of t he UI design where t he needs of t he user are paramount and where t he user are paramount and where t he user is involved in t he design process user is involved in t he design process

• UI design

UI design always always involves t he involves t he development of prot ot ype int erf aces development of prot ot ype int erf aces

SLIDE 2

2

7

User interf ace design process User interf ace design process

Analyze and understand user activities Analyze and understand user activities Produce paper- based design prototype Produce paper- based design prototype Evaluate design With end- users Evaluate design With end- users Produce dynamic Design prototype Produce dynamic Design prototype I mplement f inal user interf ace I mplement f inal user interf ace Executable prototype Executable prototype Design prototype Design prototype Evaluate design With end- users Evaluate design With end- users

8

UI design principles UI design principles

• UI design must t ake account of t he

UI design must t ake account of t he needs, experience and capabilit ies of needs, experience and capabilit ies of t he syst em users t he syst em users

• Designers should be aware of people

Designers should be aware of people’ ’s s physical and ment al limit at ions (e.g. physical and ment al limit at ions (e.g. limit ed short limit ed short -

• t erm memory) and

t erm memory) and should recognize t hat people make should recognize t hat people make mist akes mist akes

• UI design principles underlie

UI design principles underlie int erf ace designs alt hough not all int erf ace designs alt hough not all principles are applicable t o all designs principles are applicable t o all designs

9

User interf ace design principles User interf ace design principles

Principle Description

User familiarity The interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system. Consistency The interface should be consistent in that, wherever possible, comparable operations should be activated in the same way. Minimal surprise Users should never be surprised by the behaviour of a system. Recoverability The interface should include mechanisms to allow users to recover from errors. User guidance The interface should provide meaningful feedback when errors occur and provide context-sensitive user help facilities. User diversity The interface should provide appropriate interaction facilities for different types of system user.

10

Design principles Design principles

• User f amiliar it y

User f amiliar it y

– – The int er f ace should be based on user The int er f ace should be based on user -

• or ient ed
• r ient ed

t erms and concept s rat her t han comput er t erms and concept s rat her t han comput er concept s. concept s.

• For example, an of f ice syst em should use concept s

For example, an of f ice syst em should use concept s such as let t ers, document s, f olders et c., rat her t han such as let t ers, document s, f olders et c., rat her t han direct ories, f ile ident if ier s, et c. direct ories, f ile ident if ier s, et c.

• Consist ency

Consist ency

– – The syst em should display an appropriat e level The syst em should display an appropriat e level

• f consist ency. Commands and menus should
• f consist ency. Commands and menus should

have t he same f or mat , command punct uat ion have t he same f or mat , command punct uat ion should be similar, et c. should be similar, et c.

• Minimal sur pr ise

Minimal sur pr ise

– – I f a command oper at es in a known way, t he user I f a command oper at es in a known way, t he user should be able t o predict t he operat ion of should be able t o predict t he operat ion of comparable commands comparable commands

11

Design principles Design principles

• Recoverabilit y

Recoverabilit y

– – The syst em should provide some resilience t o The syst em should provide some resilience t o user errors and allow t he user t o recover f rom user errors and allow t he user t o recover f rom er r or s. This might include an er r or s. This might include an UNDO UNDO f acilit y, f acilit y, conf ir mat ion of dest r uct ive act ions, ' sof t ' conf ir mat ion of dest r uct ive act ions, ' sof t ' delet es, et c. delet es, et c.

• User guidance

User guidance

– – Some user guidance such as help syst ems, on Some user guidance such as help syst ems, on-

• line manuals, et c. should be supplied

line manuals, et c. should be supplied

• User diver sit y

User diver sit y

– – I nt eract ion f acilit ies f or dif f erent t ypes of I nt eract ion f acilit ies f or dif f erent t ypes of user should be support ed. For example, some user should be support ed. For example, some users have users have seeing seeing dif f icult ies and so larger t ext dif f icult ies and so larger t ext should be available should be available

12

User User-

• system interaction

system interaction

• Two problems must be addressed in

Two problems must be addressed in int eract ive syst ems design int eract ive syst ems design

– – How should inf or mat ion f rom t he user be How should inf or mat ion f rom t he user be pr ovided t o t he comput er syst em? pr ovided t o t he comput er syst em? – – How should inf or mat ion f rom t he How should inf or mat ion f rom t he comput er syst em be pr esent ed t o t he comput er syst em be pr esent ed t o t he user ? user ?

• User int eract ion and inf or mat ion

User int eract ion and inf or mat ion present at ion may be int egr at ed present at ion may be int egr at ed t hrough a coherent f ramework t hrough a coherent f ramework

SLIDE 3

3

13

I nteraction styles I nteraction styles

• Direct manipulat ion

Direct manipulat ion

• Menu

Menu-

• based (Menu select ion)

based (Menu select ion)

• Form f ill

Form f ill-

• in

in

• Command language

Command language

• Nat ural language

Nat ural language

Advantages and disadvantages Advantages and disadvantages

Interaction style Main advantages Main disadvantages Application examples

Direct manipulation

• Fast and intuitive

interaction

• Easy to learn
• May be hard to

implement

• Only suitable where

there is a visual metaphor for tasks and objects

• Video games
• CAD systems

Menu selection

• Avoids user error
• Little typing

required

• Slow for experienced

users

• Can become complex if

many menu options

• Most general-purpose

systems

Form fill-in

• Simple data entry
• Easy to learn
• Takes up a lot of screen

space

• Stock control,

Personal loan processing

Command language

• Powerful and

flexible

• Hard to learn
• Poor error management
• Operating systems,

Library information retrieval systems

Natural language

• Accessible to casual

users

• Easily extended
• Requires more typing
• Natural language

understanding systems are unreliable

• Timetable systems
• WWW information

retrieval systems

15

Direct manipulation Direct manipulation advantages advantages

• Users f eel in cont rol of t he comput er

Users f eel in cont rol of t he comput er and are less likely t o be int imidat ed and are less likely t o be int imidat ed by it by it

• User learning t ime is relat ively short

User learning t ime is relat ively short

• Users get immediat e f eedback on

Users get immediat e f eedback on t heir act ions so mist akes can be t heir act ions so mist akes can be quickly det ect ed and correct ed quickly det ect ed and correct ed

16

Direct manipulation problems Direct manipulation problems

• The derivat ion of an appropriat e

The derivat ion of an appropriat e inf ormat ion space model can be very inf ormat ion space model can be very dif f icult dif f icult

• Given t hat users have a lar ge

Given t hat users have a lar ge inf ormat ion space, what f acilit ies f or inf ormat ion space, what f acilit ies f or navigat ing around t hat space should navigat ing around t hat space should be provided? be provided?

• Direct manipulat ion int erf aces can be

Direct manipulat ion int erf aces can be complex t o program and make heavy complex t o program and make heavy demands on t he comput er syst em demands on t he comput er syst em

17

Menu systems Menu systems

• Users make a select ion f rom a list of

Users make a select ion f rom a list of possibilit ies present ed t o t hem by possibilit ies present ed t o t hem by t he syst em t he syst em

• The select ion may be made by

The select ion may be made by point ing and clicking wit h a mouse, point ing and clicking wit h a mouse, using cursor keys or by t yping t he using cursor keys or by t yping t he name of t he select ion name of t he select ion

• May make use of simple

May make use of simple-

• t o

t o-

• use

use t erminals such as t ouch t erminals such as t ouch-

• screens

screens

18

Advantages of menu systems Advantages of menu systems

• Users need not remember command

Users need not remember command names as t hey are always present ed names as t hey are always present ed wit h a list of valid commands wit h a list of valid commands

• Typing ef f ort is minimal

Typing ef f ort is minimal

• User errors are t rapped by t he

User errors are t rapped by t he int erf ace int erf ace

• Cont ext

Cont ext -

• dependent help can be

dependent help can be

• provided. The user
• provided. The user ’

’s cont ext is s cont ext is indicat ed by t he current menu indicat ed by t he current menu select ion select ion

SLIDE 4

4

19

Problems with menu systems Problems with menu systems

• Act ions t hat involve logical

Act ions t hat involve logical conj unct ion (and) or disj unct ion (or) conj unct ion (and) or disj unct ion (or) are awkward t o represent are awkward t o represent

• Menu syst ems are best suit ed t o

Menu syst ems are best suit ed t o present ing a small number of choices. present ing a small number of choices. I f t here are many choices, some menu I f t here are many choices, some menu st ruct uring f acilit y must be used st ruct uring f acilit y must be used

• Experienced users f ind menus slower

Experienced users f ind menus slower t han command language t han command language

20

Command interf aces Command interf aces

• User t ypes commands t o give

User t ypes commands t o give inst ruct ions t o t he syst em e.g. UNI X inst ruct ions t o t he syst em e.g. UNI X

• May be implement ed using cheap

May be implement ed using cheap t erminals. t erminals.

• Easy t o process using compiler

Easy t o process using compiler t echniques t echniques

• Commands of arbit rary complexit y

Commands of arbit rary complexit y can be creat ed by command can be creat ed by command combinat ion combinat ion

• Concise int erf aces requir ing minimal

Concise int erf aces requir ing minimal t yping can be creat ed t yping can be creat ed

21

Command interf aces problems Command interf aces problems

• Users have t o learn and remember a

Users have t o learn and remember a command language. Command command language. Command int erf aces are t heref ore unsuit able int erf aces are t heref ore unsuit able f or occasional users f or occasional users

• Users make errors in commands. An

Users make errors in commands. An error det ect ion and recovery syst em error det ect ion and recovery syst em is required is required

• Syst em int eract ion is t hrough a

Syst em int eract ion is t hrough a keyboard so t yping abilit y is required keyboard so t yping abilit y is required

22

Command languages Command languages

• Of t en pref erred by experienced

Of t en pref erred by experienced users because t hey allow f or f ast er users because t hey allow f or f ast er int eract ion wit h t he syst em int eract ion wit h t he syst em

• Not suit able f or casual or

Not suit able f or casual or inexperienced users inexperienced users

• May be provided as an alt ernat ive t o

May be provided as an alt ernat ive t o menu commands (keyboard short cut s). menu commands (keyboard short cut s). I n some cases, a command language I n some cases, a command language int erf ace and a menu int erf ace and a menu-

• based int erf ace

based int erf ace are support ed at t he same t ime are support ed at t he same t ime

23

Natural language interf aces Natural language interf aces

• The user t ypes a command in a

The user t ypes a command in a nat ural language. Generally, t he nat ural language. Generally, t he vocabulary is limit ed and t hese vocabulary is limit ed and t hese syst ems are conf ined t o specif ic syst ems are conf ined t o specif ic applicat ion domains (e.g. t imet able applicat ion domains (e.g. t imet able enquiries) enquiries)

• NL processing t echnology is now good

NL processing t echnology is now good enough t o make t hese int erf aces enough t o make t hese int erf aces ef f ect ive f or casual users but ef f ect ive f or casual users but experienced users f ind t hat t hey experienced users f ind t hat t hey require t oo much t yping require t oo much t yping

24

Multiple user interf aces Multiple user interf aces

Command language interpreter Command language interpreter GUI manager GUI manager Graphical user interf ace Graphical user interf ace Command language interf ace Command language interf ace Operating system Operating system

SLIDE 5

5

25

I nf ormation presentation I nf ormation presentation

• I nf ormat ion present at ion is

I nf ormat ion present at ion is concerned wit h present ing syst em concerned wit h present ing syst em inf ormat ion t o syst em user s inf ormat ion t o syst em user s

• The inf ormat ion may be pr esent ed

The inf ormat ion may be present ed direct ly (e.g. t ext in a word direct ly (e.g. t ext in a word processor ) or may be t ransf ormed in processor ) or may be t ransf ormed in some way f or present at ion (e.g. in some way f or present at ion (e.g. in some graphical f orm) some graphical f orm)

• The Model

The Model-

• View

View-

• Cont roller approach

Cont roller approach is a way of support ing mult iple is a way of support ing mult iple present at ions of dat a present at ions of dat a

26

I nf ormation presentation I nf ormation presentation

I nf ormation to be displayed I nf ormation to be displayed Presentation sof tware Presentation sof tware

Display

27

Model Model-

• view

view-

• controller

controller

Controller State Controller State Controller Methods Controller Methods View State View State View Methods View Methods Model State Model State Model Methods Model Methods User I nputs Model edits Model queries & updates View modif ication messages

28

I nf ormation presentation I nf ormation presentation

• St at ic inf ormat ion

St at ic inf ormat ion

– – I nit ialized at t he beginning of a session. I nit ialized at t he beginning of a session. I t does not change dur ing t he session I t does not change dur ing t he session

• Dynamic inf ormat ion

Dynamic inf ormat ion

– – Changes dur ing a session and t he Changes dur ing a session and t he changes must be communicat ed t o t he changes must be communicat ed t o t he syst em user syst em user

• Bot h may be eit her numeric or

Bot h may be eit her numeric or t ext ual t ext ual

29

I nf ormation display f actors I nf ormation display f actors

• I s t he user int er est ed in pr ecise

I s t he user int er est ed in pr ecise inf or mat ion or dat a r elat ionships? inf or mat ion or dat a r elat ionships?

• How quickly do inf or mat ion values change?

How quickly do inf or mat ion values change? Must t he change be indicat ed immediat ely? Must t he change be indicat ed immediat ely?

• Must t he user t ake some act ion in r esponse

Must t he user t ake some act ion in r esponse t o a change? t o a change?

• I s t her e a direct manipulat ion int erf ace?

I s t her e a direct manipulat ion int erf ace?

• I s t he inf or mat ion t ext ual or numer ic? Ar e

I s t he inf or mat ion t ext ual or numer ic? Ar e r elat ive values impor t ant ? r elat ive values impor t ant ?

30

Alternative inf ormation Alternative inf ormation presentations presentations

1000 2000 3000 4000 Jan Feb Mar April May June Jan 2842 Feb 2851 Mar 3164 April 2789 May 1273 June 2835

SLIDE 6

6

31

Analog Analog vs. digital presentation

• vs. digital presentation
• Digit al present at ion

Digit al present at ion

– – Compact Compact -

• t akes up lit t le scr een space

t akes up lit t le scr een space – – P r ecise values can be communicat ed P r ecise values can be communicat ed

• Analog

Analog present at ion present at ion

– – Easier t o get an ' at a glance' impr ession Easier t o get an ' at a glance' impr ession

• f a value
• f a value

– – P

• ssible t o show r elat ive values

P

• ssible t o show r elat ive values

– – Easier t o see except ional dat a values Easier t o see except ional dat a values

32

Dynamic inf ormation display Dynamic inf ormation display

1 3 4 2 10 20 Dial with needle Pie chart Thermometer Horizontal bar

33

Displaying relative values Displaying relative values

100 200 300 400 25 50 75 100 Pressure T emperature

34

Text highlighting Text highlighting

The filename you have chosen has been

• used. Please choose another name
• Ch. 16 User interface design

!

OK Cancel

35

User documentation User documentation

• As well as on

As well as on-

• line inf ormat ion, paper

line inf ormat ion, paper document at ion should be supplied document at ion should be supplied wit h a syst em wit h a syst em

• Document at ion should be designed

Document at ion should be designed f or a range of users f rom f or a range of users f rom inexperienced t o experienced inexperienced t o experienced

• As well as manuals, ot her easy

As well as manuals, ot her easy-

• t o

t o-

• use

use document at ion such as a quick document at ion such as a quick ref erence card may be provided ref erence card may be provided

36

Document types Document types

• Funct ional descr ipt ion

Funct ional descr ipt ion

– – Brief descript ion of what t he syst em can do Brief descript ion of what t he syst em can do

• I nt roduct ory manual

I nt roduct ory manual

– – P resent s an inf ormal int roduct ion t o t he syst em P resent s an inf ormal int roduct ion t o t he syst em

• Syst em r ef er ence manual

Syst em r ef er ence manual

– – Describes all syst em f acilit ies in det ail Describes all syst em f acilit ies in det ail

• Syst em inst allat ion manual

Syst em inst allat ion manual

– – Describes how t o inst all t he syst em Describes how t o inst all t he syst em

• Syst em administ r at or

Syst em administ r at or ’ ’s manual s manual

– – Describes how t o manage t he syst em when it is Describes how t o manage t he syst em when it is in use in use

SLIDE 7

7

37

User interf ace evaluation User interf ace evaluation

• Some evaluat ion of a user int erf ace

Some evaluat ion of a user int erf ace design should be car ried out t o assess design should be car ried out t o assess it s suit abilit y it s suit abilit y

• Full scale evaluat ion is very expensive

Full scale evaluat ion is very expensive and impract ical f or most syst ems and impract ical f or most syst ems

• I deally, an int erf ace should be

I deally, an int erf ace should be evaluat ed against a usabilit y evaluat ed against a usabilit y specif icat ion. However, it is rare f or specif icat ion. However, it is rare f or such specif icat ions t o be produced such specif icat ions t o be produced

38

Usability attributes Usability attributes

Attribute Description

Lear nabilit y

How long does it t ake a new user t o become product ive wit h t he syst em?

Speed of Operat ion

How well does t he syst em response mat ch t he user’s work pract ice?

Robust ness

How t olerant is t he syst em of user error?

Recoverabilit y

How good is t he syst em at recovering f rom user error?

Adapt abilit y

How closely is t he syst em t ied t o a single model

• f work?

39

Simple evaluation techniques Simple evaluation techniques

• Quest ionnaires f or user f eedback

Quest ionnaires f or user f eedback

• Video recording of syst em use and

Video recording of syst em use and subsequent t ape evaluat ion subsequent t ape evaluat ion

• I nst rument at ion of code t o collect

I nst rument at ion of code t o collect inf ormat ion about f acilit y use and inf ormat ion about f acilit y use and user errors user errors

• The provision f or on

The provision f or on-

• line user

line user f eedback f eedback