Information Systems Development and Usability

1. Information Systems Development and Usability A Torturous Lecture by Colin Furness, PhD Candidate Faculty of Information Studies University of Toronto FIS 1311 November 21, 2005

2. Outline 1 • Introduction: Relevance and Importance for Professional Practice • Introduction to Systems Development • Introduction to Website Development • Stages of Development • Introduction to Usability • Evaluating Website Effectiveness

3. Introduction: Relevance and Importance for Professional Practice 2 • Information systems are ubiquitous in information-intense environments • Information systems development must be driven by users’ … • Needs (task characteristics and objectives, information needs, human factors) • Behaviour (information seeking, information use) • Setting (time and space considerations, • Information professionals can be involved in development as domain experts • Information professionals often must act as advocates for the needs of users • Abdicating responsibility to technical people courts disaster

4. Introduction to Systems Development 3 The “Waterfall” model vs. The “Corkscrew” Model Prototype Evaluate Evaluate Evaluate Evaluate Define Specify Build Refine Refine Refine Finalize Build

5. Introduction to Systems Development 4 Corkscrew Prototyping Iterations Goals Definition Functional Requirements Non-functional Requirements System Concept Information Design Interaction Design Final Prototype

6. Introduction to Website Development 5 • Web site development is similar to any systems development: • Choice of waterfall vs. corkscrew model • (corkscrew is superior but waterfall is much more common) • Many variations on both models exist in industry • Version presented here was developed in Silicon Alley, New York • and probably represents best practice in industry • Roles: Producer: manages development process, gathers content Information Architect: performs interaction design & information design Art Director: Creates “look and feel” of site Graphic Designer: implements “look and feel” for every page Content Engineer: writes the HTML code, javascript for each page Programmer: creates databases and/or other functional parts of site

7. Stages of Development: Overview 6 Four Principal Stages of Development • Discovery • Planning • Design • Implementation & Completion • Purpose of the site • User characteristics and needs • Business needs • Constraints • Information architecture • Iterative prototyping, usability testing • Maintenance planning • Technology choices • Graphic design • Insertion of content • Usability testing • HTML and programming • Quality Assurance testing

8. Stages of Development: Discovery 7 Discovery is the process of learning that happens prior to design work • About Owners • What are their motivation and goals? • Whom do they wish to design for? • What constraints are there? • What aspects of the environment • need to be considered? • About Users • Who are they? • How many different individuals, groups? • What are their characteristics, abilities, • and limitations? • Why will they use this system? • How often will they use this system? • For what purpose(s) will they • use this system? • About Environment • What are/have others done in a • similar setting? • What regulatory or ethical • considerations are there? • About Technology • What choices are available? • What tradeoffs need to be considered? • What are the costs, and what is • cost-effective?

9. Stages of Development: Planning 8 • Good planning … • Is led by an Information Architect but involves Art Director and technical staff • Involves users very early and continuously in an iterative process • Begins with what has been learned in Discovery • Ends with the creation of a final, rapid prototype of the entire site that • specifies the information architecture • These must reflect what has been learned in Discovery • Information Architecture = Information Design + Interaction Design

10. Stages of Development: Planning (cont’d) 9 Information Design Information Design = Organization + Representation • Organizing information = classification • Classification = labeling • Two main rules of classification: • Mutually exclusive categories • Collectively exhaustive categories • Programs • Projects • Products/Initiatives • Strategy • Consider the following intranet classification • list from a company called BankCo:

11. Stages of Development: Planning (cont’d) 10 Information Design • Labels are crucial: • they can support or undermine an information organization scheme • they can properly define a functional feature or can disguise it • Semantic Confusables: • Consider these elevator control buttons: • Things that are cognitively very similar require considerable • additional mental processing to discriminate • Example: Flooz (internet “currency”) SPEND FLOOZ SEND FLOOZ (buy Flooz) (use Flooz)

12. Stages of Development: Planning (cont’d) 11 Information Design Metaphors & Icons • Metaphors can convey powerfully a mental model of how something works • Eg the “deskttop” metaphor for Mac O/S and Windows • Eg the “cassette player” metaphor for audio & video files • Eg. the “radio button” metaphor for that selector interaction style • Metaphors can confuse and undermine clarity • Eg “global village” internet information service research • Icons can leverage visual cues for clarity • Eg file folder icons • Icons can often confuse the user instead • (Poor rendering, culturally rooted, need to be learned) NB: research comparing icons, semantics, labeled icons: icons alone are worst

13. Stages of Development: Planning (cont’d) 12 Interaction Design • Interaction design refers to the various controls (or “widgets”) that the • user must manipulate in using the information system • Interaction Design is closely related to industrial (physical) design • (See Donald Norman’s book, The Design of Everyday Things) • Three Key Principles: • Affordances • Features of an object that convey how it is to be used • Constraints • Attributes of an object that prevent its incorrect use, or prevent errors • Mapping • The arrangement of controls for an object that has natural spatial meaning

14. Standard buttons Stages of Development: Planning (cont’d) 13 Interaction Design: Affordances For the finger For the tool Online Examples: Target graphics that look ‘pressable’ Blue underlined hyperlinks check boxes

15. PREVIOUS NEXT Stages of Development: Planning (cont’d) 14 Interaction Design: Constraints • Constraints are passive • Good constraints are rarely noticed Lip constrains Items from falling no typos here ext.

16. Stages of Development: Planning (cont’d) 15 Interaction Design: Mapping The classic mapping example: stovetops (from Norman, The Design of Everyday Things)

17. Stages of Development: Planning (cont’d) 16 Interaction Design: Mapping

18. Stages of Development: Planning (cont’d) 17 Interaction Design A story of two taps Which doorknob is better? The best of intentions gone awry

19. Stages of Development: Planning (cont’d) 18 A rapid prototype example: Harper’s Bazaar

20. Stages of Development: Planning (cont’d) 19 A rapid prototype example: Harper’s Bazaar

21. Stages of Development: Planning (cont’d) 20 • Maintenance Needs • There are many critical maintenance issues that must be considered early • human time to respond to requests for information • creating and uploading new content • removing content that has expired • Often, “remote publishing tools” are created to assist with • content maintenance • The development process for such tools is identical to website development • Technical Specifications • Describes the prototype formally in terms of what has to be programmed • Contains very specific and detailed information • (eg what browsers to support, data requirements for databases, etc) • A technical specifications document can run to hundreds of pages

22. Stages of Development: Design 21 • A rapid prototype provides the blueprint for graphic design • Graphic design can support and enhance usability, or it can cripple it • Graphic design for online spaces is fundamentally different from • graphic design for print media • Emphasizing certain elements for function rather than for aesthetics) • Colours are different • Resolution of images is different • Art Director, Information Architect & technical staff must work • together from the start • To ensure that final prototype allows for good design • To ensure that the final design allows for good usability • To ensure that both prototype and design are technically feasible

23. Stages of Development: Design (cont’d) 22

24. Stages of Development: Design (cont’d) 23

25. Stages of Development: Design (cont’d) 24

26. Stages of Development: Design (cont’d) 25

27. Stages of Development: Implementation and Completion 26 • Rapid Prototype is “locked” as a blueprint for implementation • Involvement of users is usually over by now • All content engineering and programming is done • Sometimes in this phase, a previously unknown technical problem emerges, • which can affect cost and effectiveness • Quality Assurance testing is a crucial final step • Testing for correct functioning • Testing for appearance and function with different browsers and hardware

28. Introduction to Usability 27 Q: What makes something usable? A: It depends … • Traditional Criteria: • ease of learning • efficient/ergonomic use • minimal errors • retention over time • subjective satisfaction • Some Human Factors: • users’ computer aptitude • users’ computer experience • users’ computer expertise • users’ domain expertise • frequency of users’ use of the tool • physical coordination & health • Some Technology Factors: • de facto standards • display factors (eg screen size) • interactions of software • and hardware • Individual Differences • All users are not the same! • We think about “homogeneous target • user groups” • Distinguishing between individual and • group differences is not easy Websites for the general public tend to show low usability …why?

29. Introduction to Usability (cont’d) 28 • Imperatives and Goals • Constrain errors? • Instant learning? • Complex task management? • Speed of task completion? • Usability Goals are always Tradeoffs, and conflict with one another Low power Rapid learning Safety/error constraint Awkward/extra steps Subjective satisfaction for novices Extreme irritation for experts • Many “design guidelines” exist that claim to ensure usability • Such guidelines can be dangerous …why? • Usability is perceived, not ascribed. • BUT there are some universal principles for good design and bad design • e.g. USB connectors

30. Introduction to Usability (cont’d) 29 • Automatic Learning • Very important cognitive principle in interface design • Refers to user’s ability to use tool without having to think through each step • Actions can be performed like a reflex • Examples: turning a key, tying your shoes, etc • Can also be dangerous: sometimes you need to PREVENT automatic learning • Examples of dangerous automatic learning? • So how do you know if something has high usability? • Usability Goals can and should be operationalized, e.g. • User should exhibit error-free performance on second time using interface • User should be able to complete task X in Y seconds • Effective training on how to use the device should take no more than 8 hours

31. Evaluating Website Effectiveness 30 Effectiveness = usability + usefulness • Evaluating Website effectiveness first requires looking at: • user characteristics, needs, behaviours • Purpose of the site • Alternative means Two main approaches: Involving Users Involving Experts • Focus Groups • Task-Based Usability Testing • First Impression Testing • Exploration Testing • GOMS • Task Analysis • Usability Inspection • Cognitive Walkthroughs

32. Evaluating Website Effectiveness (cont’d) 31 Task Analysis • T.A. is the deconstruction of how something gets done into hierarchical • unit tasks and subtasks. • This is often done at the “keystroke” level when trying to optimize performance. • Example: Printing a document Access information system turn on computer log into computer enter login name enter password start microsoft word Open document press open locate correct directory move up tree or move down tree double click document or highlight/enter Issue print command access file menu select print verify settings choose correct printer choose number of copies Verify successful print walk over to printer examine pages

33. Evaluating Website Effectiveness (cont’d) 32 Task Analysis • Not all tasks are linear and sequential: • sometimes we want to be able to interrupt one task to do another • This is known as task interleavability. • (sometimes tasks can be interleaved with other tasks before being completed) Eg. electronic banking: bill payment Hey wait, didn’t I pay this already? • Unit Tasks: • Select payee • Select account • Select amount • Schedule date • Confirm & submit Whoa! I have to set up this new payee! Um, do I have that much in my account? Wait, what date is the second Thursday of the month?

34. Evaluating Website Effectiveness (cont’d) 33 Task-Based Usability Testing • Purpose is to observe and measure performance of users on a set of tasks • Tasks are devised ahead of time • A rapid prototype can be used, or a finished interface can be used • The partcipant is read a script containing any needed information • Participant is asked to “think aloud” during task performance • Observers watch to see what the user does, what mistakes are made and • What (s)he is saying while working. • Often this session is videotaped looking over the user’s shoulder. • This is harder than it seems: demand characteristics must be dealt with. • Task examples: a library catalogue interface: • Is there a journal devoted entirely to tigers? • What was the most recent item published by Chun Wei Choo? • Has anyone ever done a doctoral dissertation on pop-up windows?

35. The End Questions?