Homework 2: Comparing Menu Designs
Assigned Monday, Jan. 27, 2014, due: Monday,
Feb. 17, 2014
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. 17, 2014. 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 Blackboard 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 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?
- 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?
- 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 "option button" 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:
- 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.
- 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.
- 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 photo of the menu using a camera.
- 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 exact key or mouse presses required to operate the menu. This discussion will be about a paragraph per menu.
- If you find disadvantages, bugs or barriers in the use of this menu, this would be important to describe.
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):
- The design issues regarding the different menus, especially the trade-offs among them. Which kinds of menus are better for what?
- 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.
- Describe the historical progression of the menus you found. Are any newer than others? Do there seem to have been refinements and improvements?
We also would like to show off a variety of menus in class on the day the assignment is due (Monday, Feb. 17, 2014) so be prepared to present your menus, if possible.