Lecture 6: HCI - PDF

Lecture 6: Evaluation The Process of Interaction Design  What is evaluation? ❑ Evaluation helps test whether the interface meets the set requirements or not. ❑ A design evaluation highlights problems before the design is sent for the final implementation. ❑ evaluation shou...

Lecture 6: Evaluation The Process of Interaction Design  What is evaluation? ❑ Evaluation helps test whether the interface meets the set requirements or not. ❑ A design evaluation highlights problems before the design is sent for the final implementation. ❑ evaluation should not be left to the end of the design process. Instead, it should be a continuous activity where individual interface components are assessed during the design process.  Goal ❑ Evaluation:« Evaluation tests the usability, functionality and acceptability of an interactive system» According to the design stage According to the initial goals Along side the different usability dimensions Using a range of different techniques ❑ identify and correct issues as soon as possible  Evaluation techniques The techniques to perform evaluation can be broadly divided into two categories: ❑ Evaluations that require expert analysis. ❑ Evaluations that require involving user participation.  Evaluation through expert analysis ❑ This approach relies on experts assessing a system or product based on predefined criteria or frameworks. ❑ It includes the following methods: Cognitive walkthrough: Evaluates a system's usability by analyzing how users complete tasks. Heuristic evaluation: Uses heuristics or usability principles to identify usability issues. Model-based evaluation: Applies formal models to predict user interaction with a system. Using previous studies: Leverages findings from prior research or evaluations.  Cognitive walkthrough  Evaluation through user participation ❑ Experimental evaluation: Conducts controlled experiments to test hypotheses about user behavior or system performance. ❑ Observational techniques: Observe users interacting with the system in real or simulated environments. ❑ Query techniques: Gathers user feedback through interviews, surveys, or questionnaires. ❑ Physiological responses: Measures physical responses (e.g., eye-tracking, heart rate) to understand user experience. Monitoring physiological responses  10 Nielsen’s Usability Heuristics #1: Visibility of system status systems should always keep users informed about what is going on, through appropriate feedback within reasonable time. Example: Video playlist on YouTube  Example: Video playlist on YouTube When we watch a playlist on YouTube, we’re informed of everything that happens on one screen. The player bar shows a lot of information in so little space: ❑ How much of the video is already loaded. ❑ Where you are in the video. ❑ how long it has played. On the right side, you can see which video you’re playing now, which ones have been watched, and which are next.  #2:Match between system and the real world ❑ Systems should speak the users' language with familiar words, phrases, and concepts rather than system-oriented terms. ❑ Use familiar metaphors and language ❑ Interfaces that follow real-world conventions and make information appear in a natural and logical order demonstrate empathy and acknowledgement for users. #3:User control and freedom ❑ Users often make mistakes or change their minds. ❑ Allow them to exit a flow or undo their last action and go back to the system’s previous state. Undo can be supported in many ways on an interface, not just through a simple Undo button. For example, if users add an item mistakenly to a shopping basket, they should be able to undo that change by removing the item.  #4:Consistency and standards ❑ Users should not have to wonder whether different words, situations, or actions mean the same thing. ❑ systems should adhere to both internal consistency external consistency  Internal Consistency user will customize text in the same way across Word (top), Excel (middle), and PowerPoint (bottom) Internal Consistency Internal consistency relates to consistency within a product or a family of products, either within a single application or across a family or suite of applications. External Consistency External consistency refers to established conventions in an industry or on the web at large, beyond one application or family of applications.  Layers of Consistency ❑ There are several layers of consistency to consider when designing your application. ❑ 1. Visual The symbols, iconography, and imagery used should be consistent across the site. If you’re using images, make sure they’re all given a similar visual treatment. For example, the border color and weight should be consistent across all images on the product page.  Layers of Consistency 2. User-Entered Data When asking users to input information such as dates, phone numbers, or locations, use the industry standards rather than reinventing the wheel. 3. Page and Button Layout You’ll likely have several different types of pages on a site, but there are components that will remain consistent across pages  The Impact of Consistency ❑ The benefits of consistency go beyond having a well-designed user interface for your application. Meet User Expectations Lower Learning Curves Users should be able to transfer their knowledge from using other websites and applications, which will lower their learning curve when interacting with a new website.  #5: Error prevention ❑ prevent the occurrence of the errors or any situation that leads the user to make a false or any unwanted decision. ❑ The Design of Everyday Things has much detail about the 2 types of error Slips Mistakes  Slips Slips are the kind of errors that are generally happened by the expert users Example 2, Gmail- Website In Gmail, if the user deleted an important email by mistake they can undo that action by simply clicking on the “Undo” action button  Mistakes Mistakes are the kind of errors that are generally happened by the users who has incomlpete information about the task or any event and the mismatch of the mental model.  #6: Recognition Rather Than Recall-Simplified There are 2 types of memory retrieval i.e., Recognition & Recall. 1. Recognition It means recognizing the information, thing, or event as familiar in our memory.  How to apply recognition to UX design Context images: Those first impression images on the top of interfaces are valuable elements that set the mood of what is to come  Walkthroughs Utilizing images and texts, these features familiarize users with a new app, because they bring elements from other apps,  ❑ 2. Recall ❑ To recall is to build up information without context being given. In other words, recall asks you to retrieve information from memory without any cues being provided. Search bars  #7: Flexibility and Efficiency of Use ❑ The user interface should be designed in such a way that can be easily used by beginners as well as expert users. ❑ the user needs to be provided the “shortcuts” or “Accelerators” which helps to perform the task quickly & more efficiently. ❑ For the inexperienced user, it might be a problem to learn or to remember the shortcuts Adobe Photoshop- Windows Software  Medium- Website The most common shortcut used worldwide is to make the fonts-Bold(Ctrl+b), Italic(Ctrl+i) & Underline(Ctrl+u).  #8: Aesthetic and Minimalist Design Each and everybody needs relevant, clean, and clear things in front of their eyes, especially in digital platforms. Example: Apple website  #9: Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.  Diagnose ❑ The error message must use simple language when describing the problem to the user. ❑ Errors should be presented in everyday language, not using code or jargon.  Recover ❑ Designs need to help users recover from errors by providing actionable ways to fix them ❑ One of the most common ways of allowing users to recover from errors is to provide the user with an undo or back button  #10: Help and documentation In simple terms, we should provide the help & documentation to the users even if the system or the product was designed in the easiest to use without any help. Practice Exercises Which Nielsen’s heuristic(s) is being applied in each of the following figures (Justify your answer) Answer: Visibility of system status: User is informed about the change in state of the flight times (departure/arrival) and position. Also, UI indicates whether the flight on time or delayed Which Nielsen’s heuristic(s) is being applied in each of the following figures (Justify your answer) Answer: Error prevention: UI is preventing a problem from occurring in the first place by checking and confirming the users’ action before committing them Answer: User control and freedom: UI allows user to quit from the current running task and even offering an emergency exit after doing the task (in case of choosing a system functionality by mistake) Answer: Matching the system with the real world: UI matches the conceptual model and user expectations by designing the iBook library to be pretty much the same as the physical book-shelf.