Nielsen s 10 Usability Heuristics. Heuristics evaluations and identifying heuristics violations

Size: px

Start display at page:

Download "Nielsen s 10 Usability Heuristics. Heuristics evaluations and identifying heuristics violations"

Lillian Mosley
5 years ago
Views:

1 Nielsen s 10 Usability Heuristics Heuristics evaluations and identifying heuristics violations

learning Programming education PhD research Industry

2 Introduction About me - background with HCI HCI/usability in educational software Game based and gamified language learning Programming education PhD research Industry partnership Online learning platform Adaptive and differentiated learning

3 Lab Outline Introduction Review heuristics & definitions Quick interactive activity Examples in various interfaces Assignment 1 preparation Practice heuristics evaluation - quizmaker Goal oriented evaluation

4 Learning Outcomes Be able to carry out a basic heuristics evaluation of an interface Be able to identify usability issues in interfaces Be able to relate usability issues to heuristics violations Be able to explain how usability is affected by heuristics violations This is a key part of Assignment 1...

5 The 10 Heuristics with Explanations

6 Review of heuristics & definitions Goal: Revise heuristics and definitions

7 Kahoot! and Usability How much of Kahoot! s success is due to usability?

Enhancing the explanatory power of usability heuristics.

8 Background Based on analysis of many more specific examples of usability issues that have been observed. Nielsen, J. (1994, April). Enhancing the explanatory power of usability heuristics. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems (pp ). ACM.

9 Good usability Some interfaces have extremely good usability. If you use the vending machines on campus pay attention why they are so usable. Does anyone know of vending machines that are more difficult to use than the ones on campus?

10 Viewing Examples of Heuristics Violations The next slides will show examples of heuristics violations. We will talk about why usability is affected and what heuristics have been violated. They are now accompanied by annotations for those who didn t see the tutorial.

11 Can you see any issues?

12 Non-standard positioning of contents Heuristic Violation: Consistency and standards This site has chapters on the left and a table of contents on the right. The table of contents helps navigate the large amount of content in the center of the screen. The positioning of the table of contents on the right is non-standard. Many users do not notice it immediately as people do not intuitively look to the right for navigation options.

13 How can I see more routes and options?

14 Unintuitive backstepping to other routes The key usability issue here is that many users clear their search when they just want to step back one step to view alternative routes. Heuristic Violation: Consistency and standards The placement of the More options & times is not where we would expect the common requirement of back-stepping to be. The + symbol on the button doesn t match the action of backstepping and it is not surrounded by a frame like the other buttons in the interface. Heuristic Violation: Recognition rather than recall It is very difficult to immediately recognise how to go back a step to view more routes; a user needs to memorise/recall the steps. Heuristic Violation: Flexibility and efficiency of use Even when you know the steps required to browse between routes they are inefficient; there could easily be a way of toggling between routes without having to go between different frames. Users using the app will often want to compare several different routes based on several different criteria and it is a lot more work trying to hold information about the individual routes in working memory as you go back and forth between viewing specific route information and selecting an alternative route to view.

15 Is anything ambiguous?

16 Heuristic Violation: Match between system and the real world Automatic is ambiguous wording. In this interface it actually means to schedule an event for now; however, many people think it means to automatically find a free spot. Automatic does not match real-world language a human would use to discuss holding an event now.

17 How can the user change their attendance status?

18 Can you see it now?

19 Heuristic violation: Flexibility and efficiency of use The option to change attendance could easily be accessible from the symbol that shows the user s attendance status. It would be more usable if options to change attendance status were accessible where the attendance status is displayed. Because the actual maybe option is displayed outside of the attendance frame it is not easily recognisable as relating to attendance.

20 If you wanted to find more courses where would you look?

21 Heuristic violation: Consistency and standards Home buttons normally take people to the base level of a site where most parts of the site are easily accessible. When clicking the home button in Code Academy you are taken to a page that shows only the courses you re enrolled in and a few others. Extra courses are found under catalog in the top right. Catalog is ambiguous as it is not immediately recognised to many as a catalog of courses. Many users who are not familiar with the content on Code Academy may not realise their home page does not show all courses and they would not know to look for extra options elsewhere in the interface.

22 All tasks seem to be complete, why can t the user click Up Next?

23 Heuristic Violation: Flexibility and efficiency of use The currently active task is hidden and requires scrolling to view. This is inefficient as it can take time for users to discover there is a hidden task; many users are used to searching for problems with their code when the next button is greyed out as there are not always tasks hidden at the bottom of the instructions frame. Heuristic Violation: Recognition rather than recall Users should be able to easily recognise where the next task is rather than have to recall that there may be more tasks when scrolling. It would be easy to add the functionality to automatically scroll to the next task.

24 Take note of the solution button

25 What problem could be created in this version

26 Confusion over functionality when the frame changes In this example, the solution button is displayed as a light bulb symbol; users are penalised for viewing solutions. A lot of users were observed clicking the solution button by accident. Heuristic Violation: Error prevention As many users automatically click the top-right to maximise windows having the solution button in the top-right of the smaller frame is problematic. Many users complained they were clicking it by mistake when they did not want to use it and were subsequently losing points. The habit of maximising windows and standard of having maximise buttons in the top-right of windows is more influential on interaction for some users than the fact that the light-bulb symbol is consistently used for solution usage within this website.

27 How would you navigate this site?

28 Heuristic Violation: Consistency and standards This site uses a compass symbol and the word DISCOVER ; it is in the top-left. Normally search uses a magnifying glass accompanied by a input box. This means that many users do not realise there is a search option and simply rely on the primary navigation menu at the top. The main navigation menu only goes to a small portion of content. Heuristic Violation: Flexibility and efficiency of use Because there is no input box accompanying the discover symbol it means that users have to click on the symbol and wait for a separate input screen to load.

29 What major error could happen here? Detailed blog post about this here: at-blogger-and-tumblr-get-right/

30 Heuristic Violation: Error prevention In this example an extra OK still needs to be clicked even after the user has set a time and date. Without clicking ok it will still publish immediately despite a date and time showing in the interface. This can easily cause users to accidentally publish something immediately and they may overlook the OK button.

31 Cost of early release...

32 Has the user fixed the error?

33 Heuristic Violation: Visibility of system status The interface is still showing an error state even though the error has been fixed. This can mean the user will be unsure whether the error has been fixed and spend time searching for other things that can be fixed.

34 Are these questions saved?

35 Heuristic Violation: Visibility of system status The interface is still showing an error state even though the error has been fixed. This can mean the user will be unsure whether the error has been fixed and spend time searching for other things that can be fixed.

GOCONQR.COM - Practice Heuristics Evaluation Look for specific problems with heuristics in goconqr.com 1. 2. 3. 4. 5. 6.

36 GOCONQR.COM - Practice Heuristics Evaluation Look for specific problems with heuristics in goconqr.com Go to Sign-up Create a multi question quiz Run your quiz Go back to the homepage Try to find where your quizzes are

37 Alternative Quiz Website A simpler and older quiz maker website; can be used if there are problems with the first one or as an extra example. Go to tinyurl.com/2bybfuq Or google webwinder quiz

38 It can get worse... Google the slide rule universe or go to: niverse.html

39 Tips for Assignment 1 For each heuristic problem you find: List the heuristic problem Describe how the heuristic is violated Clearly communicate how it affects usability

Heuristic Evaluation of NUIG Participate Module 1

Heuristic Evaluation of NUIG Participate Module 1 Nielsen s 10 Usability Heuristics (Nielsen & Mack, 1994) 1. Aesthetic & Minimalist Design Pages should not contain information which is irrelevant or rarely