Lesson-VI Design Principles PDF

DESIGN PRINCIPLES FOR HUMAN-COMPUTER INTERFACES Prepared by: MR. REY MARTIN D. ESPERIDA OBJECTIVE By the end of this lesson, students should be able to: Understand the key principles of user-centered system design. Analyze the importance of trade-offs in interface design....

DESIGN PRINCIPLES FOR HUMAN-COMPUTER INTERFACES Prepared by: MR. REY MARTIN D. ESPERIDA OBJECTIVE By the end of this lesson, students should be able to: Understand the key principles of user-centered system design. Analyze the importance of trade-offs in interface design. Apply design principles to create user-friendly human-computer interfaces. Overview of HCI Design: Discuss the goal of designing effective interfaces that enhance usability and user satisfaction. Emphasize the importance of considering both technology and user needs when creating systems. Introduction to Donald A. Norman: Briefly introduce Donald A. Norman's contributions to the field of HCI and his focus on cognitive science. DON NORMAN'S PRINCIPLES Visibility: Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use. DESIGN PRINCIPLES FOR HUMAN-COMPUTER INTERFACES Prepared by: MR. REY MARTIN D. ESPERIDA Feedback: Feedback is the principle of making it clear to the user what action has been taken and what has been accomplished. Many forms of feedback exist in interaction design, including visual, tactile, audio, and more. The key is to design the experience to never leave the user guessing about what action they have taken and the consequence of doing so. Here’s a brief video showing the many ways that Google’s Material design pattern encourages you to provide feedback to the user on the actions they are taking in a mobile app. bit.ly/YouTubeFeedBack Constraints: Constraints is about limiting the range of interaction possibilities for the user to simplify the interface and guide the user to the appropriate next action. This is a case where constraints are clarifying, since they make it clear what can be done. Limitless possibilities often leave the user confused. Conversational interfaces are all the rage these days because they provide the opportunity to speak to a computer via our natural language, which feels far more natural than the traditional user interface methods. However, to-date these interfaces have struggled with a lack of constraints: with limitless possibilities of what you could potentially say to the conversational interface, it becomes impossible to know what kind of queries the interface actually supports. And given the technology today fails to be able to answer every possible query, the endless possibilities are frustrating to the user since it becomes difficult to even know how to use it. Mapping: Mapping is about having a clear relationship between controls and the effect they have on the world. You want this mapping to feel as natural as possible. Stove tops are a great example here. When you see the first image, the mapping is not very clear because it’s difficult to determine which control operates each burner. Versus the second image, it’s far clearer the control that controls each burner, which has a better mapping. DESIGN PRINCIPLES FOR HUMAN-COMPUTER INTERFACES Prepared by: MR. REY MARTIN D. ESPERIDA This slider also has a strong mapping, since it’s clear moving it to the right will increase its value versus moving it to the left will decrease it. Consistency: Consistency refers to having similar operations and similar elements for achieving similar tasks. By leveraging consistent elements throughout your entire experience, you make your experience far easier to use. This consistency is important not only within your interface, but across the many interfaces users are using across their devices. This is a simple example of poor consistency when you are using so many different styles for actions within your interface.  DESIGN PRINCIPLES FOR HUMAN-COMPUTER INTERFACES Prepared by: MR. REY MARTIN D. ESPERIDA Affordance: Affordance refers to an attribute of an object that allows people to know how to use it. Essentially to afford means to give a clue. The physical button on a mouse gives a clue that it can be clicked to perform an action. When an object has strong affordances, it’s very clear how to use it. Don Norman talks at length about how doors often have poor affordances. When you come up to a door, it’s not always clear do you push or pull the door? One convention used is to put a sheet of metal at around arm height on the side of the door that needs to be pushed to make it clear that it must be pushed instead of being pulled. When you do this, you are giving the door a strong affordance to indicate it should be pushed instead of pulled. 15 DIFFERENT PRINCIPLES THAT HCI RESEARCHERS USE TO EVALUATE AN INTERFACE. These principles were developed by Don Norman, Jakob Nielsen, Larry Constantine and Lucy Lockwood. 1. DISCOVERABILITY — Relevant interface functions should be made visible, instead of requiring a user to read about them in documentation. There is a natural tension between discoverability and simplicity. 2. SIMPLICITY - The interface is easy to understand and use, irrespective of a user’s experience, knowledge, or level of concentration. The interface is not cluttered with unnecessary information that distracts from accomplishing the primary task. 3. AFFORDANCES - Interfaces that “hint at” the way they are meant to be used. The interface’s perceived affordance might be at odds with its actual affordance (e.g. a door with a handle seems like it should be pulled, but the door actually needs to be pushed). You can add  DESIGN PRINCIPLES FOR HUMAN-COMPUTER INTERFACES Prepared by: MR. REY MARTIN D. ESPERIDA signifiers to the interface to help a perceived affordance match the actual affordance (e.g. a label next to the door handle that says “push”). 4. MAPPING - Used in HCI to describe the relationship between the interface and real world equivalents. Interfaces should speak the language of the users who use it, favoring language in their terms vs system-oriented language. e.g. we use cut, copy, paste instead of duplicate, since this maps better to terms and actions that users already know. 5. PERCEPTIBILITY - The user’s ability to perceive the state of the system. Are they closer or farther away from accomplishing their goals? This is very important with digital systems, so users do not feel helpless when attempting to accomplish their tasks. 6. CONSISTENCY - Design interfaces using familiar components which behave the same, so users do not need to re-learn your interface from scratch. Consistency is generally the best option, unless a design alternative provides a 10x improvement in usability. 7. FLEXIBILITY - An interface should accommodate a wide range of users with varying levels of expertise. Allow users to use your interface in ways that fit with their standard workflows: e.g. some users are more comfortable copying and pasting using the right-click menu commands instead of keyboard shortcuts. Both accomplish the same task, but fit in to different user workflows. 8. EQUITY - An interface is useable by users with diverse ranges of ability (accessibility). 9. EASE - The design can be used with minimal amounts of fatigue. 10. COMFORT - Users of varying physical sizes, postures, mobility, can use the interface without strain. 11. STRUCTURE - A user interface should be architected in a way that is organized and makes sense to the end user. e.g. information layout on a page is often made consistent with standards adopted from the newspaper industry. 12. CONSTRAINTS - Preventing a user from performing erroneously in the first place by constraining their possible behaviors. Password reset flows with client-side validations are a good example of this: they prevent the submit button from being made available until the user has successfully met password requirements. 13. TOLERANCE - The user interface should be designed such that errors that inevitably occur do not cause too much setback for the user in accomplishing their primary task. Supporting standard functions like undo and redo give users a sense of security when using an interface, and make them more likely to engage and explore. 14. FEEDBACK - Users should receive clear and direct feedback in response to errors generated by operating the interface. Oftentimes, vague or confusing feedback is worse than no feedback at all, since it can be distracting, misleading, and anxiety provoking for users. 15. DOCUMENTATION - Some documentation is likely inevitable. This documentation should be built around use cases for tasks that the user wants to accomplish with your system, instead of describing every possible system function out of context. KEY DESIGN PRINCIPLES User-Centered Design (UCD): Define UCD and explain its emphasis on focusing the design around the user’s mental model and the system image they form.  DESIGN PRINCIPLES FOR HUMAN-COMPUTER INTERFACES Prepared by: MR. REY MARTIN D. ESPERIDA Discuss how the system should align with user expectations, guiding the user to develop the right mental model through its interface. THE FIVE SLOGANS OF DESIGN Trade-offs are inevitable: No single solution fits all cases; trade-offs must be made depending on the system's use. All operations are iterations toward a goal: Errors should be viewed as steps toward reaching a goal. The design must support users in recovering from mistakes. Low-level protocols are critical: Consistent interactions (button presses, commands) can help users feel familiar with the system. Activities are structured: User actions should be grouped in ways that make sense for their goals. The system should provide support and structure for those activities. Information retrieval dominates activity: Interaction with computers involves retrieving information. A well-designed system makes this easy and intuitive. DESIGN STRATEGIES Awareness of User Needs: Designers must understand and prioritize user needs, but awareness alone isn't enough. Practical methods are required to implement user-centered designs. Providing Methods and Guidelines: Quantitative methods and guidelines should be developed and used to ensure interface consistency. Software Tools for Interface Design: Designers can embed design principles into software tools to make the interface easier to manage and adjust over time. Modularity in Interface Design: Interface design should be separate from core programming tasks, allowing designers to make changes without altering the entire system. This modular approach also empowers users to customize their interface. Introduction to Trade-offs in Design: Explain the concept of trade-offs in HCI, where a design may excel in one area but may have drawbacks in another. Example: Larger menus may provide more options but take up valuable screen space and slow down performance.  DESIGN PRINCIPLES FOR HUMAN-COMPUTER INTERFACES Prepared by: MR. REY MARTIN D. ESPERIDA REFERENCES S. Rekhi, “Don Norman’s Principles of Interaction Design,” Medium, Jan. 23, 2017. https://medium.com/@sachinrekhi/don-normans-principles-of-interaction-design-51025a2c0f33 B. Ambielli, “15 Principles for Human Centered Design,” Bambielli’s Blog, Aug. 06, 2018. https://bambielli.com/posts/2018-08-06-fifteen-principles-for-human-centered-design/ D. A. Norman, “Design principles for human-computer interfaces,” Proceedings of the SIGCHI conference on Human Factors in Computing Systems - CHI ’83, 1983, doi: https://doi.org/10.1145/800045.801571.