Homework 2: Comparing Menu Designs
Assigned Wednesday, Feb. 6, 2019, due: Monday, Feb. 18, 2019
Be sure to see the policies for grading, late turn-in, cheating etc, on the homework policy page.
NOTE: TURN IN THIS ASSIGNMENT IN HARDCOPY IN CLASS on Monday, Feb. 18, 2019. Please print out your entire report on paper, staple it together, and bring it to class. (If you have to miss class for any reason, you can turn in your hardcopy in advance in my office, NSH 3517, or if necessary, upload your assignment to Canvas to demonstrate that you have it done on time.) Be sure your name is on your report!
In this assignment, each student will evaluate at least five (5) 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.
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,
- selecting among options on a smart-TV, DVR, or cable-box using a remote,
- selecting categories implemented in html and/or CSS in web pages,
- selecting months, years, and many other values on web pages that are part of embedded controls,
- selecting dates and other properties on Smartphones,
- any many, many others.
Below are some different dimensions by which menus can differ. There may be many other dimensions as well.
Types of Menus:
The KIND or TYPE of menu:
Contents of Menus:
How many items are there in the menu? How are the items (content) in the menu arranged?
- Issues of different lengths of menus, and how this type of menus deals with this size (is the number of items: 2, 10, 50, 100, 1000, etc.)
- What happens when too many items to fit?
- Inactive items – removed or grayed out?
- How are the items arranged in the menu?
- Arranged alphabetically (apple, bread, crackers, ...)
- Arranged in groups by topic (apple, pear, |, crackers, cheese ...). Another example is the typical Edit menu: Undo, Redo | Cut, Copy, Paste | ...
- Arranged hierarchically by topic (fruit>, snacks>, ...)
- Arranged randomly
Interactions with the Menu:
How does the user interact with the menu?
- Which specific mouse buttons or keyboard keys, touches?
- How is the menu initially invoked?
- Fixed menu, always on the screen.
- At the edge of the screen, like on the Macintosh, versus somewhere else, like on Windows.
- Also includes palettes, toolbars of icons, etc.
- Popup menu with a particular mouse button over any relevant object. For example, the right-mouse context menu.
- Popup menu from a specific icon or widget. For example, an "combo box" like for fonts
- How does the user interact with the items in the menu?
- Press and hold, move to item, release on item
- Press and release ("click") to start, click again to stop
- What is the feedback to the user for:
- Hovering the mouse over an item without clicking
- Pressing down over an item
- Releasing over an item
- How does the user get to sub-menus, if any?
- Slide out of an item to get its submenu.
- Click on an item to get its submenu.
- If the menu scrolls, how is that done?
- If there are multiple ways of using the same menus, then describe the alternatives. For example, are there keyboard accelerators? Do the menus work with the keyboard arrow keys?
Report
Your assignment is to collect 5 examples of different kinds of menus. Ideally, all the examples you find will differ on the above dimensions. Try to cover as broad a range of menus as possible. (Possible extra credit for more kinds of menus.)
For each of the five (5) menus, in your report, you should include at least the following information. Please label the sections so we can easily find them:
- 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 2-3 images for each menu, showing it before you start interacting, and at least one picture of how it looks while interacting.
- Ideally, you can get screen shots directly from the device (e.g., using the "PrintScreen" key on a PC, or pressing the power + Home button 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 Behavior and Properties: Discuss the properties of the menu, with respect to whatever dimensions are relevant (such as the dimensions mentioned above, or others you think of). The properties must include the behavior including the exact key or mouse presses required to operate the menu. This discussion will be about a paragraph per menu.
- Advantages/Disadvantages: Discuss both the advantages and disadvantages of each menu's design. Include any bugs or barriers in the use of this menu for any group of potential users.
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 other menus from the readings, videos and discussions in class. The discussion section will be about 1/2 page (single spaced):
- Design Issues: The design issues regarding the different menus, especially the trade-offs among them. Which kinds of menus are better for what? Compare your 5 menus to each other.
- 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?
Possible Extra Credit: Please email pictures of any interesting menus you find to the professor before the assignment is due (before 1:30 on Monday, Feb. 18, 2019) so they can be shown in class. Be sure to include the source for where the menus are from.