Homework 2: Comparing Menu Designs
Assigned: Thursday, Feb. 3, 2022; Due Thursday, Feb. 17, 2022 at 1:25pm ET
Overview
In this assignment, each student will evaluate at least four (4) different designs for menus, and write up a report on the results. (Possible extra credit for more kinds of menus.) The menus must be ones you can access and run yourself (that is, it is not sufficient to be able to read about them in a document or see a video demonstration. This is because you need to be able to investigate and report on the low-level details of the operation, which is often not reported in demos.
You will turn in your report in pdf format on Canvas.
Menus:
Menus are everywhere in computers, games, smartphones, and consumer electronics. And there are a lot of different designs for menus. The goal for this assignment is for you to find as many different kinds and behaviors of menus as possible, and document their properties.
Examples of menus include:
- the menubars at the top of windows or the screen,
- popup menus of various kinds,
- all the other menu-like widgets on PCs,
- all the menu-like widgets in apps or settings on a Smartphone or tablet,
- selecting specialized values like dates and countries on Smartphones,
- selecting among options on a smart-TV, DVR, or cable-box using a remote,
- selecting items or categories implemented in html and/or CSS in various web pages,
- selecting months, years, and many other values on web pages that are part of embedded controls,
- any many, many others.
Categories and Dimensions of Menus:
The textbook in section 7.2 discusses many Categories of menus, and in section 7.3 discusses many dimensions over which menus can differ. A goal of this assignment is to select representative menus that differ across as many of these categories and dimensions as possible.
Report
Your assignment is to collect 4 examples of different kinds of menus. Ideally, all the examples you find will differ on the various categories and dimensions. Try to cover as broad a range of menus as possible. (Possible extra credit for more kinds of menus - up to +5 for each extra, up to +10 max total.)
As with Homework 1, your pdf file should be named: lastname_firstname_ixt22_hw2.pdf. For example, mine would be: myers_brad_ixt22_hw2.pdf.
NEW: You can also turn in videos of your menus. They must be very short, and in mp4 format. The audio should explain what you are doing (e.g., "I am pressing down on the left mouse button, moving the mouse, letting up the button", or "I tap on the screen and release..."). If you have videos, please create a Google Slides presentation and imbed the videos in it, or just put the mp4 file or files in a Google Drive folder. Name your file(s) or folder similarly to the pdf file, like lastname_firstname_ixt22_hw2_slides or lastname_firstname_ixt22_hw2_folder or lastname_firstname_ixt22_hw2_menu1.mp4, etc. Make sure your "Sharing" settings are appropriate, preferably: Carnegie Mellon University: Anyone in this group with this link can view, but at least so the TA and I can view. Finally, you need to provide the names of these these files/folders, preferably with hyperlinks to them, near the top of your pdf file. Note that submitting videos is NOT a substitute for carefully describing the behavior of the menus textually in the body of your report.
Title & Introduction:
- Don't forget to have a title with the assignment, course, and your name.
- You can have an introductory paragraph to your report if you want
Part 1: Analyze 4 menus:
For each of the 4 (or more) menus, in your report, you should include at least the following information. Please label the sections so we can easily find them:
For each Menu:
- Source: Where that menu came from, in sufficient detail so that we could find it as well. If it is on a web page, then give the full URL. If in a PC or Macintosh OS or application, include full details such as the version number. If possible, identify the date that this menu was first used.
- Pictures: Screen shots of the menu in various states, such as before activated, when the mouse hovers, when pressed down, etc. These should be pasted directly into your report. You need to provide at least 4-5 images for each menu, showing it before you start interacting, and at least one picture of how it looks while interacting in each of its states. Number (e.g., Figure 1) your pictures so you can refer to them in the later sections of the report (see below).
- Ideally, you can get screen shots directly from the device (e.g., using the "PrintScreen" key on a PC, or pressing the power + volume-up buttons at the same time on an iPhone).
- If that doesn't work, then you might just take a good-quality photos of the menu using a camera.
- Menu Category: Which category is your menu in (textbook section 7.2). Explain why if it isn't obvious. If your menu fits multiple categories (or no category), explain why.
- Menu Dimensions: Explain where your menu falls with respect to the dimensions in section 7.3. If any of the dimensions are silly or obvious (e.g., "where the menu is displayed" is just going to be "screen"), you can just answer with a word or two.
- For the graphic design, refer to the appropriate pictures to explain how your menu looks in all of its different states (hover, mouse/finger pressed down, something selected, etc.)
- For the behaviors, you need to analyze and report on your menu in detail. How many states does it have? What does hover, pressing down, moving in and out, releasing in and out, typing on a keyboard (if applicable), etc., all do? You need to report the exact pointer and/or key sequences required, and what happens. Refer to your pictures which should show what all the states look like.
- If there are submenus, how are they invoked, and how accurately does the user need to move to get into them and from one to another?
Part 2: Heuristic Evaluation:
Next, you will do a Heuristic Evaluation to identify problems with at least one system's menus.
- Pick a set of menus to evaluate: First, you will need to select which menu or menus to evaluate:
- Ideally, you can find a really bad menu or set of menus on some website or app, due to their poor design and implementation (e.g., it is hard to get to the submenus, the graphic design is unclear, etc.) and not just the labels in the menus (e.g., more than just that the menu items have confusing names). Note that this is specifically about menus, not about bad usability of the app or website in general.
- If not, you are allowed to use historical menus, as shown in the All the Widgets video (see the schedule for the time codes).
- For example, the menus for the Information Technology Center's Andrew system (around time code 24:19) might be a good choice. Another video that shows Andrew is here (22:49): https://www.youtube.com/watch?v=VADfxl3MfcU, but the use of menus is distributed throughout.
- You might evaluate a "set of menus", or a "system's" menus, since you might be evaluating the menu mechanism for a website, app or system, not necessarily just one menu on one page. For example, the entire Andrew system menu structure might be the problem. However, if you find a particularly bad single menu, you can use that for your analysis.
- Analyze the menu or menus based on Nielsen's 10 Heuristics. You need to identify at least four (4) different heuristics that the menus violate -- that is, it would not be sufficient to identify 4 different places where the menus violate #1: "Visibility of 1 System Status"; you have to find violations of at least 4 of the 10 different heuristics.
- The heuristics are summarized in Figure 21.1 of the textbook.
- Much more information and descriptions of them are available from here:
https://www.nngroup.com/articles/ten-usability-heuristics/
including articles on each heuristic, videos, etc.
Part 3: Discussion:
- As a final section of the report, you should have a discussion section that shows that you have command of the following topics from the class syllabus, with respect to the menus you studied and any other menus from the textbook, videos and discussions in class. The discussion section will be about 1 page (single spaced):
- Advantages/Disadvantages: Compare and contrast the advantages and disadvantages of the design of each of the menus you analyzed in parts 1 and 2. Include any bugs or barriers in the use of the menu for any group of potential users.
- Performance: In this assignment, you are not required to test any of the menus. Nevertheless, you should discuss how one might appropriately test the performance and effectiveness of a menu design. What would be measured and how?
NEW: As with your report, you can now send me videos for this extra credit. The videos must be very short, and in mp4 format. The audio should explain what you are doing (e.g., "I am pressing down on the left mouse button, moving the mouse, letting up the button", or "I tap on the screen and release..."). Please create a Google Slides presentation and imbed the videos in it, or just put the mp4 file or files in a Google Drive folder. Name your file(s) or folder something like lastname_firstname_ixt22_hw2_slides or lastname_firstname_ixt22_hw2_folder or lastname_firstname_ixt22_hw2_menu1.mp4, etc. Make sure your "Sharing" settings are appropriate, preferably: Carnegie Mellon University: Anyone in this group with this link can view, but at least so the TA and I can view. Finally, you need to email me with the URL of the file(s) or folders.
Grading
The various parts of this homework will be calculated as follows, so you know how much each part is worth:
- 5 points - Overall structure and following directions
- 4 points - Having 4 menus that are sufficiently different
- 76 points (19 points for each of 4 menus) - analysis of each menu
- 10 points - Heuristic Evaluation of a bad menu
- 5 points - Final Discussion
- Extra Credit (up to these values)
- +10 points: up to +5 for each extra menu tested (up to +10 total), if menus are sufficiently different from the main four menus analyzed
- +5 points: for sending an interesting menu to the professor before 1:25 on Wednesday, Feb. 16, 2022