HCI Design with Users (1) PDF

HUMAN COMPUTER INTERACTION Dr. Bassam Hammo & Ammar El- Hassan Interface Design Learning Goals for Today  Have an overview of the Interaction Design process in general  Have a broad understanding of what “Design” means  Understand how users can be involved in t...

HUMAN COMPUTER INTERACTION Dr. Bassam Hammo & Ammar El- Hassan Interface Design Learning Goals for Today  Have an overview of the Interaction Design process in general  Have a broad understanding of what “Design” means  Understand how users can be involved in the design process  The UCD Process Interface principles that we already know  Interesting, pleasing, attractive, inviting  Effective to use  Intuitive  Gain user’s trust  Organized, hierarchically structured, clean  Help functions, Search, etc  Consistent form (design integrity)  Automatic assistance ◦ Completions ◦ Spelling Interface principles that we already know …(cont)  Lead the user ◦ Prompts ◦ Indicate nature of any problem ◦ Specific communication  Navigational aids: systems often huge Interface principles that we already know …(cont)  Meaningful error msgs ◦ Don’t send you elsewhere ◦ Give useful number ◦ Area of inadequate traditions  Multiple paths to a function  Keep it simple HCI is a Design Problem  Design is old subject  Well studied, and has rich traditions  Apply design methodologies to build better interfaces  So…we will look at design from this viewpoint Let’s Start What is Design  Not just problem solving  Messy – No right answer  Takes a point of view – or many  Calls for vision and multiple minds  Open attitude – many solutions  Learned from experience with reflection  Requires a feel for the materials  Starts with broadening, followed by narrowing  Requires ongoing mindfulness Need to take into account  Need to take into account: ◦ Who the users are ◦ What activities are being carried out ◦ Where the interaction is taking place  Need to optimize the interactions users have with a product ◦ So that they match the users’ activities and needs Need to take into account  Need to take into account what people are good and bad at  Consider what might help people in the way they currently do things  Think through what might provide quality user experiences  Listen to what people want and get them involved  Use tried and tested user-centred methods  Goals of Interaction Design Goals of interaction design  Develop usable products ◦ Usability means easy to learn, effective to use and provide an enjoyable experience  Involve users in the design process Usability goals  Effective to use  Efficient to use  Safe to use  Have good utility  Easy to learn  Easy to remember how to use Why go to this length?  Help designers: ◦ understand how to design interactive products that fit with what people want, need and may desire ◦ identify any incorrect assumptions they may have about particular user groups e.g., not all old people want or need big fonts ◦ be aware of both people’s sensitivities and their capabilities User experience goals satisfying challenging enjoyable supportive of creativity engaging enhancing sociability pleasurable rewarding exciting fun entertaining provocative helpful surprising motivating emotionally fulfilling boring annoying frustrating Good and bad design  What is wrong with the Apex remote?  Why is the TiVo remote so much better designed? ◦ Peanut shaped to fit in hand ◦ Logical layout and color- coded, distinctive buttons ◦ Easy to locate buttons  Interaction Design Process The Design Process  Design is inherently creative and unpredictable, regardless of discipline. In the context of interactive systems, successful designers blend a thorough knowledge of technical feasibility with an uncanny aesthetic sense of what attracts and satisfies users.  One way to define design is by its operational characteristics Design is a process; it is not a state, and it cannot be adequately represented statically. The design process is nonhierarchical; it is neither strictly bottom-up nor strictly top-down. The process is radically transformational it involves the development of partial and interim solutions that may ultimately play no role in the final design. Design intrinsically involves the discovery of new goals. What is involved in the process of interaction design  Identifying needs and establishing requirements for the user experience  Developing alternative designs to meet these needs  Building interactive prototypes that can be communicated and assessed  Evaluating what is being built throughout the process and the user experience it offers Core characteristics of interaction design  Users should be involved through the development of the project  Specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project  Iteration is needed through the core activities Design phases  Understand  Observe  Visualize and Predict  Evaluate and Refine  Implement Simple Iterative Model NEEDS DESIGN EVALUATE IMPLEMENT Analyzing the Needs NEEDS DESIGN EVALUATE IMPLEMENT Contextual Inquiry  Users and stakeholders  Context  At the interviewee’s workplace  Partnership  Designer is apprentice to Interviewee  Can be guided by interviewee Contextual Interviews  Interpretation and elicitation of needs  Observations must be interpreted by observer and interviewee  Focus  Short  Inquire about work behaviors  Intention is to design a new system  Focus on design goals Capturing the Data  Observer’s head  Written notes  Sketches and photos of the setting  Audio (or even Video) Generating an Idea NEEDS DESIGN EVALUATE IMPLEMENT Brainstorming  Group vs. Individual Creativity  More Ideas == More Creative == Better  Limited Time  Keep a Record  Brainstorming is not just a good idea but an endless source of inspiration and fresh thinking The Rules  Be Visual  Defer judgment  Encourage Wild Ideas  Build on the Ideas of Others  Go for Quantity  One Conversation at a Time  Stay Focused on the Topic Explore Design Ideas NEEDS DESIGN EVALUATE IMPLEMENT Sketches From a previous cs147 project… Flow Diagrams From a previous cs147 project… Prototyping NEEDS DESIGN EVALUATE IMPLEMENT Using Prototypes  Allows multiple parties to envision together ◦ Designers ◦ Users ◦ Engineering, marketing, planning,…..  Reflective conversation with the materials  Focus for identifying alternatives and tradeoffs Low-Fidelity “Paper” Prototype NEEDS DESIGN EVALUATE IMPLEMENT Tools  Paper, Cardboard, Transparencies  Tape, Glue, Rubber Cement  Pens, Pencils, Markers  Scissors  Plastic Tubes, Paper Cups, CD “Coasters”  Anything that you can buy in an arts and crafts store (and that a kindergartener would have fun using). Examples: Low-Fidelity Prototype Examples: Low-Fidelity Prototype User Testing NEEDS DESIGN EVALUATE IMPLEMENT Tools  3-4 group members  Facilitator  Computer (not necessary for low-fidelity testing)  2 Observers/Note takers  Prototype  Users!!!! Tools for prototyping  HTML & Javascript  Java Swing  Visual C#, Visual Basic  Flash MX, Director  Mac Interface Builder  others…or a mix of the above!!! Tools for prototyping  FIGMA Wireframes & Prototypes https://youtu.be/D4NyQ5iOMF0 Examples: Interactive Prototype From cs160 at UC Berkeley Examples: Interactive Prototype From cs160 at UC Berkeley Getting Users Involved NEEDS DESIGN EVALUATE IMPLEMENT USE User Centered Design  Users’ tasks and goals are the driving force behind development  Users are consulted throughout development  All design decisions are taken from within the context of the users, their work, and their environment Stages of User Involvement  Need finding  Design [Participatory design]  Implementation [End-user programming]  Evaluation  Use in the target setting Users can be involved in any of the stages of the Design Process! Why is Design Difficult? Why is Design Difficult?  1. Increasing complexity/pressure ◦ Number of things to control has risen dramatically ◦ Display is increasingly symbolic/artificial ◦ Feedback is more complex and subtle ◦ Errors are increasingly serious/costly Why is Design Difficult?  2. Marketplace pressures ◦ Time is money ◦ Adding functionality (complexity) is now easy and cheap ◦ Adding controls/feedback is expensive ◦ Design usually requires several iterations before success Why is Design Difficult?  3. People often consider cost and appearance over human factors design ◦ Style over substance ◦ Bad design may not be visible Why is Design Difficult?  4. Creativity is challenging ◦ Can’t just make a copy ◦ Want creativity, but want common sense Idea Creation  Idea Creation How do we create and develop new interface ideas and designs?  Ideas come Borrow fromfrom other fields ◦ Animation Imagination ◦ Theatre Analogy ◦ Information Observationdisplays of current practice ◦ Architecture Observation of current systems ◦...  Idea Creation How do we create and develop new interface ideas and designs? Analogy Imitation is the sincerest form of flattery  Idea Creation How do we create and develop new interface ideas and designs? Analogy Imitation is the sincerest form of flattery Monarch Chair by @santo_eduardo_garci a [IG] Idea Creation How do we create and develop new interface ideas and designs? - Imagination & Observation - Magnification & Adaptation - The Rest for a While Staircase by Jiahui Feng, Baojie Li, Shuikun Cai & Longin Ma⁣⁣ Idea Creation Methods  1. Consider new use for object  2. Adapt object to be like something else  3. Modify object for a new purpose  4. Magnify - add to object  5. Minimize - subtract from object  6. Substitute something similar  7. Rearrange aspects of object  8. Change the point of view  9. Combine data into an ensemble  Design Principles Design Principles  1. Use simple and natural dialog in user’s language ◦ Match user’s task in a natural way ◦ Avoid slang, techno-speak ◦ Present exactly info that user needs Insufficient funds to X.25 connection discarded due withdraw $100 VS. to network congestion. Local limits now in effect Less is more! Fewer unnecessary windows, prompts, dialogs Fun Examples Design Principles  2. Strive for consistency ◦ Sequences, actions, commands, layout, terminology ◦ Makes more predictable OK Cancel Help Done Cancel Apply Design Principles  3. Provide informative feedback ◦ Continuously inform user about what is occurring ◦ Most important on frequent, substantive actions ◦ How to deal with delays? Design Principles  4. Minimize user’s memory load ◦ Recognition is better than recall ◦ Describe required input format, include example and default Date _ _ - _ _ _ - _ _ (DD-Mm-YY, e.g., 02-Aug-93) ◦ Use small # of generally applicable commands Design Principles  5. Permit easy reversal of actions ◦ Undo! ◦ Reduces nervousness, encourages experimentation Design Principles  6. Provide clearly marked exits ◦ Don’t want the user to feel trapped ◦ Examples  Cancel button on dialogs  Interrupt/resume on lengthy operations  Quit - can exit anytime  Reset/defaults - restore on a property sheet Design Principles  7. Provide shortcuts ◦ Enable frequent users to perform often-used operations quickly - abbreviations - menu shortcuts - function keys - command completion - double click vs. menu selection Design Principles  8. Support internal locus of control ◦ Put user in charge, not computer ◦ Can be major source of nervousness Enter next command vs. Ready for next command Design Principles  9. Handle errors gracefully  10. Provide useful help and documentation