1. School of Engineering and Information and Communication Technology KIT305 Mobile Application Development Week 2: User-centred Design and Prototyping Dr. Rainer Wasinger, Dr. James Montgomery School of Engineering and ICT

2. School of Engineering and Information and Communication Technology Class Reading Tohidi, M., Buxton, W., Baecker, R., and Sellen, A. (2006). Getting the Right Design and the Design Right: Testing Many is Better Than One. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI). ACM, New York, NY, USA, 1243-1252. 2

3. School of Engineering and Information and Communication Technology Class Reading – Getting the Right Design… Question 1: What are the most important ideas in Tohidi et al? Question 2: What is the major strength of this paper? Question 3: And the main weakness? 3

4. School of Engineering and Information and Communication Technology User Interface and Usability Engineering 4 Acknowledgements: These materials are based on a lecture by Prof. Judy Kay (The University of Sydney), as well as other experts in interaction design, as noted on individual slides.

5. School of Engineering and Information and Communication Technology User-centred Design User-centred design involves four basic activities: 1.Identifying needs and establishing requirements (e.g. requirements gathering and data gathering). 2.Developing alternative designs that meet those requirements (e.g. via iterative prototyping). 3.Building interactive versions of the designs so that they can be communicated and assessed (i.e. coding). 4.Evaluating what is being built throughout the process (i.e. evaluation techniques like expert analysis and user participation). 5

6. School of Engineering and Information and Communication Technology User-centred Design 6

7. School of Engineering and Information and Communication Technology User-centred Design 7

8. School of Engineering and Information and Communication Technology User-centred Design Three characteristics of the process are that: 1.Users are involved throughout the development of the project. 2.Specific usability and user experience goals should be identified, documented, and agreed upon at the beginning. 3.Iteration through the four basic interaction design activities (on previous slide). 8

9. School of Engineering and Information and Communication Technology User-centred Design For an application to be successful, it must be: –Useful: i.e. it accomplishes what is required. –Usable: e.g. easy to use. –Used: i.e. people will want to use it. 9

10. School of Engineering and Information and Communication Technology User-centred Design Usability: There are six key aspects to a usable system: –Learnable on first use: Easy for new users to learn how to use. –Memorable on repeat uses Easy for new users to remember how to use. –Efficient: Fast to use. –Failure-resistant: Difficult to use improperly. –Forgiving: Easy to recover from improper use. –Satisfying: Enjoyable to use. 10

11. School of Engineering and Information and Communication Technology User-centred Design Don Norman’s Design Principles: –Visibility: Can the state of the application and its possible actions be seen? –Feedback: What is it doing now? What action has been performed? –Affordance: The perceived and actual properties of an object that gives clues to its operation. –Mapping: Relationship to controls and their effect in the world. –Constraints: Restricting the kind of interactions that can take place. –Consistency: Designing interfaces to have similar operations and use similar elements. 11

12. School of Engineering and Information and Communication Technology User-centred Design Jakob Nielsen’s 10 Usability Principles: 1.Visibility of system status 2.Match between system and the real world 3.User control and freedom 4.Consistency and standards 5.Error prevention 6.Recognition rather than recall 7.Flexibility and efficiency of use 8.Aesthetic and minimalist design 9.Help users recognize, diagnose, and recover from errors 10.Help and documentation 12

13. School of Engineering and Information and Communication Technology User-centred Design Ben Shneiderman’s Eight Golden Rules: 1.Be consistent 2.Enable frequent users to use shortcuts 3.Offer informative feedback 4.Design dialogs to yield closure 5.Offer error prevention and simple error handling 6.Permit easy reversal of actions 7.Support internal locus of control 8.Reduce short-term memory load 13

14. School of Engineering and Information and Communication Technology Prototyping 14

15. School of Engineering and Information and Communication Technology What is a Prototype? A series of screen sketches A storyboard, i.e. a cartoon-like series of scenes A PowerPoint slide show A video simulating the use of a system A lump of wood (e.g. Palm Pilot) A cardboard mock-up A piece of software with limited functionality, e.g. Balsamiq (http://balsamiq.com/) 15 Adapted from Rogers et al.

16. School of Engineering and Information and Communication Technology Why Prototype? In relation to others: –Evaluation and feedback are critical; –Stakeholders can see, hold, interact with a prototype more easily than a single static document or a drawing; –Team members can communicate effectively. For you: –You can test out ideas; –It encourages reflection; a very important aspect of design. 16

17. School of Engineering and Information and Communication Technology Prototyping: Low-Fidelity (lo-fi) Prototypes Quick to construct Easy to design alternatives Provide limited or no functionality Aim to show users the general look and feel, NOT the detail Helps communication and exchange of ideas with users 17

18. School of Engineering and Information and Communication Technology What is a Prototype? “A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” 18 http://www.computerhistory.org/collections/catalog/102716262

19. School of Engineering and Information and Communication Technology Types of Prototypes Prototypes are concrete representations of a design Prototype dimensions: –Representation: form of the prototype off-line (paper) or on-line (software) –Precision: level of detail (e.g., informal or polished) –Interactivity: watch-only vs. fully interactive –Evolution: expected life cycle of prototype e.g. throw away or iterative 19 Karem Suer PJ McCormick Source: CSE 440: User Interface Design, Prototyping, & Evaluation

20. School of Engineering and Information and Communication Technology Fidelity in Prototyping Fidelity refers to the level of detail High fidelity? –prototypes look like the final product Low fidelity? –artists renditions with many details missing 20 Source: CSE 440: User Interface Design, Prototyping, & Evaluation

21. School of Engineering and Information and Communication Technology Materials for very lo-fi prototypes Large, heavy, white paper (A3 or 11x17) 5x8 in./A5/A6 index cards Tape, stick glue, correction tape Pens & markers (many colors & sizes) Post-its Overhead transparencies Scissors, cutters… 21 Adapted from Landay, 2013. http://www.flickr.com/photos/latitude14/3651034642/sizes/l/in/photostream/

22. School of Engineering and Information and Communication Technology Storyboards Often used with scenarios, bringing more detail, and a chance to role play Can be a series of sketches showing how a user might progress through a task using the device Used early in design 22

23. School of Engineering and Information and Communication Technology Lo-fi Prototypes: Storyboards Storyboards/Tutorials/Manuals Manuals - storyboards set within textual explanations - people often read manuals of competing products to check: interface/functionality/match to task 23

24. School of Engineering and Information and Communication Technology High-Fidelity Prototyping Prototype looks more like the final system than a low-fidelity version. Danger that users think they have a full system. 24

25. School of Engineering and Information and Communication Technology High-Fidelity (Hi-fi) Prototypes Hi-fi prototypes: –Characterised by a high-tech representation of the design concepts –Resulting in partial to complete functionality. Advantage: –Enables users to truly interact with the system. 25

26. School of Engineering and Information and Communication Technology Problems with Hi-Fi Prototypes Take time to build -> higher cost Testers and reviewers comment on fit and finish issues Reluctance to change the design Software prototypes can set expectations that are hard to change Users may think they have a full system A single bug can lead to a complete halt in evaluation 26

27. School of Engineering and Information and Communication Technology Design Process & Prototyping 27 Brainstorm different representations Choose a representation Rough out interface style Task-centred walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Limited field testing Alpha/Beta tests Lo-fi prototypes Medium-fi prototypes Hi-fi prototypes Working Systems Early Design Late Design

28. School of Engineering and Information and Communication Technology 28

29. School of Engineering and Information and Communication Technology Usability Tasks and Success Requirements Measuring Usability: It is important to ensure that the design and implementation of our applications behave as we expect. This is the role of evaluation. –Usability test: One way to measure usability is to invite intended users of the system to participate in a usability test session. –Usability test tasks: During a usability test, a user is given a series of tasks to complete, typically without any assistance from the test facilitator. 29

30. School of Engineering and Information and Communication Technology Usability test tasks: –Tasks should represent the activities that people will do toward achieving their goals and sub-goals in your application. –Tasks need to be small enough that users can conveniently complete them, but not so small that they become trivial. Example: –T1: It is the end of the day. Record that you have sat for 7 hours and 15 minutes. 30 Usability Tasks and Success Requirements

31. School of Engineering and Information and Communication Technology Usability test tasks: –Tasks can vary in their abstractness, but should not lead the user. Abstract task: this is a general description of a whole class of task (e.g. provide details of your last physical activity; review your progress on doing physical activity). Concrete task: These are more defined (e.g. enter the 5km walk you just did; see how many kilometres you have walked each day over the last year). –It also often helps to relate a task to an overall scenario (e.g. consider that you have just read an article on the benefits of standing more and sitting less, and now wish to act on this information). 31 Usability Tasks and Success Requirements

32. School of Engineering and Information and Communication Technology Success requirements: –It is important to establish clear success criteria for the tasks and get stakeholder buy-in on the success criteria. Example (for an application to record sedentary behaviour). Participant must: –R1: Enter a new sitting time. –R2: View sitting history. –R3: Delete a sitting time. –R4: Edit a sitting time. 32 Usability Tasks and Success Requirements

33. School of Engineering and Information and Communication Technology Usability test tasks and success requirements: 33 Task / Requirement R1R2R3R4R5 T1X T2x T3xx T4x T5x Example Task: R1: Enter a new sitting time. T1: It is the end of the day. Record that you have sat for 7 hours and 15 minutes. Usability Tasks and Success Requirements

34. School of Engineering and Information and Communication Technology Class Reading – For Next Week Weiser, M. (1991). The Computer for the 21 st Century. Scientific American, 265 (3), 94-104. 34