14
University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost of system support makes users more productive a good user interface... allows people to learn by using the system allows the design to suggest the correct process mod builds on the user’s prior learning help users do their work efficiently and effectively • affordances • mapping functions • mental models • forcing functions • feedback • automatic learnin users care about... their interaction with the system usefulness of the system today and in the future

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

Embed Size (px)

Citation preview

Page 1: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1

why good interface design?• reduces input and usage errors• lowers the cost of system support• makes users more productive

a good user interface... • allows people to learn by using the system• allows the design to suggest the correct process model• builds on the user’s prior learning• help users do their work efficiently and effectively

• affordances• mapping functions• mental models• forcing functions• feedback• automatic learning

users care about...• their interaction with the system• usefulness of the system today and in the future

Page 2: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 2

interface (input and output) design is an iterative process

design

implementevaluate

inputs to interface design:• understanding of the users• best-practice considerations• evaluation with the users• evaluation without the users

user involvement:• task analysis• storyboards• dialogue charts• prototyping• etc.

source: Andy Cockburn University of Canterbury NZ

Page 3: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 3

design problems

• avoid design inertia - don’t let early bad design decisions stay bad• correctly distinguish between problems and symptoms in the user domain• it’s hard for users to communicate problems• designers are uniquely unqualified to evaluate their own designs• it’s not easy to distinguish between the designer’s model and the user’s model

source: Andy Cockburn University of Canterbury NZ

Page 4: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 4

design opportunities

• to get a good idea, get lots of ideas• delay commitment• try one or more of the following validation techniques

• storyboards• dialogue charts• prototypes• role-play• formal empirical evaluation• focus/test groups

Page 5: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 5

input from user/output from system

Page 6: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 6

inp

ut

fro

m u

ser

/ou

tpu

t fr

om

sy

ste

m

Page 7: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 7

Page 8: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 8

designing input

users and system designers care about:• data entry at source, without delays• data entered only once• data verified where/when input• automated data entry where possible• controlled access for data adds/changes• audit trail/log of all data changes

input design objectives• select best media and methods• develop efficient input procedures• reduce input volume• reduce input errors

Page 9: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 9

• keyboard• mouse• touch screen• graphic input device (light pen…)• voice input device• biological feedback device

• terminal• internet workstation• telephone• electronic whiteboard• digital camera• video input

• magnetic ink character recognition• scanner / optical recognition• data collection device

input device options

input decisions • batch VS online• centralized or distributed?• if online, data entry or data capture?

Page 10: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 10

when considering input options:

consider: • costs• security• volumes• accuracy• timing

for: • transaction entry• status update/adjustment• information retrieval

when considering user techniques:• menus • form fill• prompt screens (questions/answer, dialogue)• natural language• GUI

Page 11: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 11

• edits• repetition• business rules• conventions• totals• calculations• visual checks• audit trails• encryption

On error occurrence use:• error messages• error logs• error suspense file

input controls

GIGO GIGO GIGO GIGO GIGO GIGO GIGO GIGO GIGO GIGO

Page 12: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 12

output classifications and options

summarydetailturn-aroundinternalexternalexception

printerscreenplotteraudioe-mailthe webfaxmicroformother

Page 13: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 13

What’s this about?How recent is the information?Where does it come from?Is all of it here?How current is this?What time period does this information include?How much of the information is included or excluded?Is this an internal or external report?If it’s a turnaround document, how do I use it?Is this detailed information, a summary, or both?What do I do with this?Is the report showing something unusual?Is there bias imposed by sequence, limits or graphics?

questions asked when working with output

Page 14: University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 1 why good interface design? reduces input and usage errors lowers the cost

University of Toronto at Scarborough © Kersti Wain-Bantin CSCC40 user dialogue 14

Trillium Fashion Accessories OUTSTANDING ORDERS mmm dd, yyyy hh:mm OP1.24 Region xxx xxxxxxxxxxxxxxxx pg 9 customer id: xxxxxxx name: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx order line style qty $/unit ext.price line style qty $/unit ext.price xxxxx xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 order xxxxx ship date yyyy/mm/dd zz,zz9 items $zz,zzz,zz9.99 order line style qty $/unit ext.price xxxxx xxx xxx zzz9 zz9.99 z,zzz,zz9.99 order xxxxx ship date yyyy/mm/dd zz,zz9 items $zz,zzz,zz9.99 customer xxxxxxx zz9 orders zz,zz9 items $zz,zzz,zz9.99 customer id: xxxxxxx name: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx order line style qty $/unit ext.price line style qty $/unit ext.price xxxxx xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 xxx xxx zzz9 zz9.99 z,zzz,zz9.99 order xxxxx ship date yyyy/mm/dd zz,zz9 items $zz,zzz,zz9.99 customer xxxxxxx zz9 orders zz,zz9 items $zz,zzz,zz9.99 region xxx xxxxxxxxxxxxxxxx zz9 customers zz9 orders zz,zz9 items for $zzz,zzz,zz9.99 ALL REGIONS zz9 customers zz9 orders zz,zz9 items for $zzz,zzz,zz9.99

sample output mockup - printed report