Presentation Transcript

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
51. Physical Design Cont. - Wireframes Wireframes define: Basic page layout Screen components Wireframes are developed from flowcharts and paper prototypes They are basically more evolved paper prototypes that include detailed information about the interface elements Dewan Tanvir Ahmed
52. Physical Design Cont. - Wireframes Wireframes help to create template layouts that can be used to impose a consistent structure throughout the interface Dewan Tanvir Ahmed
53. Physical Design Cont. – Wireframes Web Formats Web sites from different domains use layouts particular to that domain Use page layouts that are common to the domain Use flexible design for Web pages Dewan Tanvir Ahmed
54. Evaluation – Functional Prototypes Functional prototypes are interactive prototypes that represent various degrees of functionality They can either be horizontal or vertical Functioning prototypes can be created using RAD environments, such as: Microsoft Visual Studio Adobe Flash Dreamweaver Director Dewan Tanvir Ahmed
55. Interface Design Standards These tools promote standards-based designs that have a consistent look and feel Graphical libraries User interface toolkits Visual interface builders Web development tools Working in a standardized environment increases efficiency and promotes learning (Cooper & Reimann, 2003) Dewan Tanvir Ahmed
56. Interface Design Standards Shneiderman and Plaisant (2005, 185) identified the following benefits from the use of high-level software tools User Interface Independence They separate interface design from internals. They enable multiple user interface strategies. They enable multiple-platform support. The establish the role of the user interface architect. They enforce standards. Methodology and Notation They facilitate the development of design procedures. They help in finding ways to talk about design. They create project management. Dewan Tanvir Ahmed
57. Interface Design Standards Rapid Prototyping The make it possible to try out ideas very early. They make it possible to test, revise, test, revise, . . . . They engage end users—managers and customers. Software Support They increase productivity. They offer constraint and consistency checks. They facilitate team approaches. They ease maintenance. Dewan Tanvir Ahmed
58. Mid-Term June 14, 2011 13:00-15:00 LMX 124 Dewan Tanvir Ahmed
59. Thanks! Dewan Tanvir Ahmed