Design

1. Design Dewan Tanvir Ahmed, PhD University of Ottawa dahmed@site.uottawa.ca

2. Outline • Technology Myopia • Conceptual Design • Physical Design • Evaluation • Physical Design Cont. • Interface Design Standards Dewan Tanvir Ahmed

3. Technology Myopia • It is based on a socio-technical perspective that does not focus myopically on technological solutions, but looks at interaction design from a global perspective • Interaction designs must be sensitive to: • Human-human communication • Implicit Knowledge • Non-technical aspects of work Dewan Tanvir Ahmed

4. Technology Myopia • Facts: • Substituting human conversations with an electronic communication • Technological solutions may not always be the best for all aspects • Printed out may be suitable for electronic documentation for meetings in which people need to make annotations and mark-up Integrate technology and human activities carefully Dewan Tanvir Ahmed

5. Conceptual Design • Conceptual design involves • Structuring the information space • Creating of alternative solutions • Determining which design concept to pursue Dewan Tanvir Ahmed

6. Conceptual Design • The tools involved in conceptual design: • Brainstorming • Card sort • Semantic networks • Personas • Scenarios • Flowcharts • Cognitive walkthroughs • Use cases Dewan Tanvir Ahmed

7. Conceptual Design - Brainstorming • One of the staples of any design project is brainstorming sessions • Team members get together and work out possible ideas and solution • Which are pursued in greater depth and brought back to the table for further refinement • Most techniques involve • Paper and pencil drawings • Post-it notes • Blackboards • Whiteboards or • Any tool easy to use and modify during sessions • Brainstorming sessions generate a lot of material that must be filtered and organized Dewan Tanvir Ahmed

8. Conceptual Design - Brainstorming • Many approaches (Team activity) • Stream-of-consciousness • Semantic networks • Storyboarding • Props • Storyboarding • Useful during session • Props can be used along with storyboarding • Helps to have on hand objects that represent various aspect of the concept • Some use props to generate ideas and some use role playing to work out alternative solutions. Dewan Tanvir Ahmed

9. Conceptual Design – Card Sort Card Sorting can be used to discover user-centered groupings • Card sorting can be used to organize the information collected in the discovery phase • Used to define groupings for menus, controls and Web page content • Used to generate labels for menus, buttons and navigation links Dewan Tanvir Ahmed

10. Conceptual Design – Card Sort • Word processing example Font size Underline Cut Page number Italic Bold Image Insert Columns Font face Font Style Spelling Paste Grammar Word Count Table Creation Copy Font Color Find/replace Line Spacing Dewan Tanvir Ahmed

11. Conceptual Design – Card Sort • Result of a card sort Dewan Tanvir Ahmed

12. Conceptual Design – Card Sort • Participant organizes cards in whatever way seems logical • Then create labels for each pile • Participants may have trouble grouping all of the cards • You should explore the issue and try to understand why they are problematic Dewan Tanvir Ahmed

13. Conceptual Design – Card Sort • Advantages of card sorting sessions: • They are quick and easy to perform. • They can be done before any preliminary designs have been made. • They will let you know how people organize information. • They will expose underlying structures. Dewan Tanvir Ahmed

14. Conceptual Design – Card Sort • Disadvantages of card sorting sessions: • They only involve the elements that you have written on the cards. • They suggest solutions that imply structures. • They become difficult to navigate with more categories. Dewan Tanvir Ahmed

15. Conceptual Design – Semantic Network • A semantic network is a web of concepts that are linked through association. • Less user centered than card sorting • Useful for • Grouping related items • Building menu structure Dewan Tanvir Ahmed

16. Conceptual Design – Semantic Network Dewan Tanvir Ahmed

17. Conceptual Design – Semantic Network • Advantages of semantic networks: • They allow an easy way to explore the problem space. • They provide a way to create clusters of related elements. • They provide a graphical view of the problem space. • They resonate with the ways in which people process information. Dewan Tanvir Ahmed

18. Conceptual Design – Semantic Network • Disadvantages of semantic networks: • They require knowledge of the problem space. • They can lead beyond the problem space. • There is no formal semantics for defining symbol meaning. Dewan Tanvir Ahmed

19. Conceptual Design – Personas • A persona is basically a user profile with • a face • a personality • a history • a skill set, and • a back story • Personas are archetypes of actual users, defined by the user’s goals and attributes. “Personas are derived from patterns observed during interviews with and observations of users and potential user (and sometimes customers) of a product” (Cooper & Reimann, 2003, 67) Dewan Tanvir Ahmed

20. Conceptual Design – Personas • A persona is created by • identifying the primary stakeholder and • creating an identity based on the stakeholder profiles and other collection activities such as interviews and surveys. • A persona is a detailed description complete with as many personally identifying attributes as necessary to make it come to life. • The persona is given a name, personality characteristics, and educational and employment histories. You can use a photo to represent each persona Dewan Tanvir Ahmed

21. Conceptual Design – Personas Personas should be a strict reflection of the information derived from the collection activities. • If you cannot point to a direct one-to-one relation with an observed user behavior, then that particular persona characteristic is either unnecessary or, more importantly, erroneous and will lead to incorrect design decisions. Example - A profiles describes an infrequent user with a beginner level of computer literacy Persona: • a desktop user • a common suite of productivity tools – word processor • AOL for email • Play games that comes with the system • Goes to neighborhood computer dealer for problems like viruses, spyware etc. Dewan Tanvir Ahmed

22. Conceptual Design – Personas • Advantages of personas: • They are quick and easy to create. • They provide a consistent model for all team members. • They are easy to use with other design methods. • They make the user real in the mind of the designer. • Disadvantages of personas: • They can be difficult to create if the target audience is international. • Having too many personas will make the work difficult. • There is a risk of incorporating unsupported designer assumptions. Dewan Tanvir Ahmed

23. Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs • Scenarios • A description of a typical task • It describes • The basic goal • The conditions that exist at the beginning of the task • The activities in which the persona will engage • The outcomes of those activities Scenarios afford a rich picture of the user’s tasks Dewan Tanvir Ahmed

24. Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs • Flowcharts can be: • Simple network diagrams that identify the pages of a Web site and the navigational links between them, or • Sophisticated diagrams that capture conditional junctures and computational processes Dewan Tanvir Ahmed

25. Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs • Usage • Can capture more complex interactions • Can find dead ends • Can improve navigation efficiency Dewan Tanvir Ahmed

26. Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs • Cognitive walkthrough - the evaluator follows the various scenarios using the flowcharts or the low-fidelity prototypes • The evaluator takes the part of the primary stakeholder and tries to accomplish that stakeholder’s various tasks Dewan Tanvir Ahmed

27. Physical Design • Once the conceptual design has evolved sufficiently we can start physical design • There is no clear-cut distinction between conceptual and physical design. • It’s a natural progression • Like JPEG files progressively renders on a screen • Physical design involves: • The What it will look like • What components it will require • How the screens will be laid out Dewan Tanvir Ahmed

28. Physical Design • We use the following tools during this phase: • Low-fidelity prototypes • Evaluations • Wireframes • Functional prototypes Dewan Tanvir Ahmed

29. Physical Design - Low-fidelity prototypes • Nielsen distinguishes between two types of prototypes • Horizontal • Vertical Dewan Tanvir Ahmed

30. Physical Design - Low-fidelity prototypes • Horizontal Prototypes that represent the breadth of functionality of the proposed design It shows the design’s surface layer without specifying details about the subsequent functionality. Dewan Tanvir Ahmed

31. Physical Design - Low-fidelity prototypes • Vertical Prototypes that represent a specific area with a complete drill-down to the lowest levels of functionality It does not show the broad picture Dewan Tanvir Ahmed

32. Physical Design - Low-fidelity prototypes • Made by hand, can be made by simple paper and pencil. • The three main criteria for low-fidelity prototypes: • Easy and inexpensive to make. • Flexible enough to be constantly changed and rearranged. • Complete enough to yield useful feedback about specific design questions. Dewan Tanvir Ahmed

33. Physical Design - Low-fidelity prototypes People are more comfortable criticizing paper prototypes • You will have to make some decisions before you begin: • What feedback do you need at this point in the design process? • How much of the design should you prototype? • Should you cover all of the areas but without great detail (breadth vs. depth)? • Should you cover one area in great detail? • These questions will help you to define the scope of the prototype and focus on what you want to accomplish Dewan Tanvir Ahmed

34. Physical Design - Low-fidelity prototypes • How to create low-fidelity prototypes • Use a sheet of paper for each screen of an application/web page • Draw boxes and labels that represent controls and content • Use sticky notes to represent pull-down and pop-up menus Dewan Tanvir Ahmed

35. Physical Design - Low-fidelity prototypes • Advantages of paper prototypes: • They can be used early and often. • They are inexpensive and easy to create. • They make design ideas visual. • No special knowledge is required; all team members can create them. • Disadvantage of paper prototypes: • They are not interactive. • They cannot be used to calculate response timings. • They do not deal with interface issues such as color or font size. Dewan Tanvir Ahmed

36. Evaluation Begin evaluations early in the design process. • Evaluation is an integral part of the development process and can take the form of an informal walkthrough or a more structured heuristic evaluation. • Formal usability testing can begin once a prototype has been developed. • Discuss some of the benefits of starting the evaluation process early in the design phase • Completeness Dewan Tanvir Ahmed

37. Evaluation – Heuristic Evaluation • Heuristic evaluations are performed by usability experts using a predetermined set of criteria designed to measure the usability of a proposed design. • The evaluator follows a scenario through the design and tests each step against the heuristic criteria. • The evaluator makes recommendations to the design team either through a written document or during a team meeting. Dewan Tanvir Ahmed

38. Evaluation – Nielsen’s Heuristics • In collaboration with Rolf Molich, Jakob Nielsen developed a set of 10 heuristics for interface design. • The revised set based on an analysis of 249 usability problems. http://www.useit.com/papers/heuristic/heuristic_list.html Dewan Tanvir Ahmed

39. Evaluation – Nielsen’s Heuristics • Given: • A prototype or a working system • A set of usability heuristics • A few evaluators • Outcome: • A usability evaluation of the system Dewan Tanvir Ahmed

40. Evaluation – Nielsen’s Heuristics • Visibility of system status • Match between system & real world • User control and freedom • Consistency & standards • Error prevention • Recognition rather than recall • Flexibility & efficiency of use • Minimalist design • Help error recovery • Help & documentation Dewan Tanvir Ahmed

41. Installing Evaluation – Nielsen’s Heuristics • Visibility of system status Dewan Tanvir Ahmed

42. Evaluation – Nielsen’s Heuristics • Match between system & real world Do you want to keep this file? Do you want to keep this file? Keep Keep Delete Delete Dewan Tanvir Ahmed

43. Evaluation – Nielsen’s Heuristics • User control and freedom • Provide exits for mistaken choices • Enable undo, redo • Don’t force users to take a particular path Please confirm the transaction. Name: Dewan Ahmed Visa: 45… …. … … 1 Amount: $879 Cancel OK Please confirm the transaction. Name: Dewan Ahmed Visa: 45… …. … … 1 Amount: $879 Modify Cancel OK Dewan Tanvir Ahmed

44. Evaluation – Nielsen’s Heuristics • Consistency & standards Help OK Cancel Help Cancel OK OK OK Cancel Cancel Help Help Dewan Tanvir Ahmed

45. Evaluation – Nielsen’s Heuristics • Error prevention • People make errors Do you want to update the software? Deleting old files: Do you want to update the software? This process will delete all contents … Are you sure? No Yes No Yes 42% No Yes Dewan Tanvir Ahmed

46. Evaluation – Nielsen’s Heuristics • Recognition rather than recall • Minimize the users’ memory load Dewan Tanvir Ahmed

47. Evaluation – Nielsen’s Heuristics • Flexibility & efficiency of use • Provide short cuts • Enable macros • Provide multiple ways of accomplishing the same thing • Normal mode vs. Advanced mode Dewan Tanvir Ahmed

48. Evaluation – Nielsen’s Heuristics • Aesthetic and Minimalist design • Dialogue should not extra information Dewan Tanvir Ahmed

49. Evaluation – Nielsen’s Heuristics • Help error recovery • Error message should be plain – no codes • Poor error messages can mean that a user rejects rather than accepts a system • Messages should be polite, concise, consistent and constructive Dewan Tanvir Ahmed

50. Evaluation – Nielsen’s Heuristics • Help & documentation • Even though it is better if the system can be used without documentation Ability to use system Minimum or no documents + Good usability Dewan Tanvir Ahmed