Lecture 5: HCI Design

Lecture 5:Alternatives Design The Process of Interaction Design  Designing alternatives This activity can be viewed as two sub-activities: ❑ Conceptual design: describes an abstraction outlining what people can do with a product and what concepts are...

Lecture 5:Alternatives Design The Process of Interaction Design  Designing alternatives This activity can be viewed as two sub-activities: ❑ Conceptual design: describes an abstraction outlining what people can do with a product and what concepts are needed to understand how to interact with it ❑ Purpose: The goal of conceptual design is to establish a high-level vision of the system’s purpose, structure, and functionality, based on the needs and goals of users.  Designing alternatives ❑ Concrete design: considers the detail of the product including the colors, sounds, and images to use, menu design, and icon design ❑ The goal of concrete design is to translate the high-level ideas of the conceptual design into specific, tangible details. ❑ This phase focuses on how users will interact with the system  Prototyping ❑ Prototyping is a crucial step in human-computer interaction (HCI) design, where you create mock-ups or simulations of your interface to test and evaluate with users. ❑ One of the most powerful tools for design exploration, visualization, and testing ❑ They let us ‘see’ and ‘feel’ interactivity (simulated or real)  Physical Representation ❑ series of screen sketches ❑ a storyboard, i.e., a cartoon-like series of scenes ❑ a cardboard mock-up ❑ a piece of wood (e.g., PalmPilot) ❑ a piece of software with limited functionality written in the target language or in another language ❑ a video simulating the use of a system ❑ a Powerpoint slide show  Why prototype? Implementation is expensive, if no prototyping ⇒ any design errors are built in to the first implementation you can test, and it is expensive to make changes ⇒ design errors may be left in the final product  Prototyping emphasize specific aspects of a product being explored by prototype, and help designers to develop their ideas through external representations  Types of Prototyping Low-fidelity prototyping ❑ Not look very much like the final product ❑ Use a medium which is unlike the final medium, e.g. paper, cardboard, etc. ❑ Quick, cheap and easily changed ❑ Can be sketches of screens, storyboards  A storyboard example of Quiz  Paper prototypes A hand-drawn mock-up of the user interface (usually) on multiple sheets of paper of varying sizes  Why Paper Prototyping? ❑ Faster to build Sketching is faster than programming ❑ Easier to change Easy to make changes between user tests, or even *during* a user test No code investment - everything will be thrown away (except the design) ❑ Focuses attention on big picture Designer doesn’t waste time on details Customer makes more creative suggestions Wizard-of-Oz Prototype  Wizard-of-Oz Prototype ❑ The Wizard-of-Oz prototype is a process that allows a user to interact with an interface without knowing that the responses are being generated by a human rather than a computer by having someone behind-the-scenes who is pulling the levers and flipping the switches. ❑ “Wizard-of-Oz” Simulates the machine behavior with a human operator  Types of Prototyping High-fidelity prototyping ❑ Use materials that expect to be in the final product ❑ High-fidelity prototypes can be developed by integrating existing hardware and software components ❑ Much more expensive to build ❑ More time is spent with graphic design than interaction design  Prototyping Can be classified into 2 types ❑ Throwaway: The name rapid throwaway refers to the fact that each prototype is completely discarded and may not be a part of the final product. ❑ Evolutionary: This approach uses a continuous, working prototype that is refined after each iteration of customer feedback.  The 8 Golden Rules of Interface Design 1. Strive for consistency 2. Seek universal usability 3. Offer informative feedback 4. Design dialogs to yield closure 5. Prevent errors 6. Permit easy reversal of actions 7. Keep users in control 8. Reduce short-term memory load  The 8 Golden Rules of Interface Design Strive for consistency This rule emphasizes the importance of creating a consistent design throughout the interface. Consistency means that similar actions or words should always have the same meaning and result, which helps users recognize patterns, reduces the need to learn new operations, and creates a more intuitive interface Instagram's design has been consistent from 2009 to 2020,  The 8 Golden Rules of Interface Design 2. Enable frequent users to use shortcuts ❑ Designers should provide shortcuts to frequently used actions or functions that experienced users can learn and use to increase their productivity. ❑ Shortcuts can be achieved through keyboard shortcuts, mouse gestures ❑ providing shortcuts allows users to work more efficiently, save time, and have a more positive experience with the interface  The 8 Golden Rules of Interface Design Offer informative feedback For *every* human action, there should be an interface feedback This golden rule is crucial for creating interfaces that are easy to use and that provide a positive experience for the user.  the trail is "Products > Furniture > Sofas > Fabric Sofas > Three-seat sofas > EKTORP 3-seat sofa," it effectively guides users to a specific product on Ikea's website.  The 8 Golden Rules of Interface Design Design dialog to yield closure This rule emphasizes the importance of providing users with a sense of closure when interacting with the system, particularly in situations where the user needs to make a decision or complete a task.  The 8 Golden Rules of Interface Design Offer Simple Error Handling This rule emphasizes the importance of designing error messages and handling errors in a way that is simple, clear, and understandable to the user. By offering simple error handling, designers can help users to quickly and easily understand and resolve errors. This can reduce frustration and confusion for the user and enhance the overall user experience  The 8 Golden Rules of Interface Design Permit easy reversal of actions Designers should design interfaces or a feature relieves anxiety that provides clear and easily accessible options to undo or reverse action.  7. Keep the User in Control (Support internal locus of control) Users should be able to start, pause, or stop a process at any time, and the system should respond quickly and predictably to their actions. Additionally, designers should provide clear and concise feedback to help users understand the consequences of their actions. By keeping the user in control, designers can help users feel more comfortable and confident in using the system. This can lead to a better user experience and increased user satisfaction.  Reduce Short-Term Memory Load This rule emphasizes the importance of designing interfaces that minimize the amount of information users need to remember in order to complete a task. Another aspect of "reducing short-term memory load" is to design interfaces that allow users to easily retrieve and review the information that they have already entered or accessed. Example  Example Error Handling  Example Strive For Consistency  Evaluation ❑ Evaluation in the process of interaction design is a crucial step that involves testing and assessing how well a design meets users' needs, expectations, and usability standards. ❑ This stage helps designers validate ideas, identify issues, and refine the design to enhance user satisfaction and experience.  Types of Evaluation Methods A/B Testing: Used to compare two or more versions of a design to see which performs better in terms of user engagement, satisfaction, or other metrics.  A cognitive walkthrough A cognitive walkthrough involves the evaluators performing the sequence of actions for each task and evaluating their learnability and usability from the users' perspective. Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user interfaces in independent walkthroughs and report issues. Types of Evaluation Methods  Types of Evaluation Methods ❑ Formative Evaluation: Conducted early in the design process, this helps identify initial usability issues and refine the design based on user feedback. ❑ Summative Evaluation: Performed toward the end of the design process, this evaluates the overall user experience and determines if the product is ready for release.