1. Introduction to Human Computer Interaction
Menu Selection, Form Fillin, and Dialog Boxes
Early systems used full screen menus with numbered items
Modern menus
Pull-downs, check-boxes, radio buttons, hyperlinks
Menus offer cues to elicit recognition
Do not require the user to recall commands
Users point or use keystrokes and get immediate feedback
Welcome to Lesson 7 Part A. In this unit we will discuss menu selection, form fillin and dialog box interface elements
Early computer systems used full screen menus with numbered items.
The screen would display options and the user would select the desired option.
In the example the user can press “1” to “Start in MS DOS mode”, or “2” to start Windows, etc.
Modern menus include Pull-downs, check-boxes, radio buttons, and hyperlinks.
The advantage of modern menus is that the user can immediately identify that the desire items are contained within the menu
Specifically, modern menus Do not require the user to recall commands
The Users only needs to point and click to get immediate feedback as to their selection

2. Introduction to Human Computer Interaction
Menu Selection, Form Fillin, and Dialog Boxes
Simple menu selection is valuable when
Users have little training
Intermittent usage
Unfamiliar with the terminology
Assist in structuring decision making
Design also must consider
Task related organization
Phrasing of items
Sequence of items
Short-cuts
Selection mechanisms (viz., keyboard, pointing device, touch screen, voice)
Simple menus are especially valuable to the user when:
Users have had little training and must be able to quickly use the application
When users use the application occasionally and may not recall specific command (e.g., to change the font style)
When users are Unfamiliar with the terminology such menus are useful to provide more detail regarding their choices
Menus also Assist the user in structuring their decision making by clearly providing available choices
When using menus, a few items that the UI designer needs to keep into consideration include:
Task related organization (for example in the diagram the user can choose to print all slides or a sub-set of slides. If the user selects a subset, then the can specify which slides to print, in multiple ranges)
Phrasing of items is also important (for example note the bounding box in the print example. The terminology is “Print Range” where the user can respond with “All” or enter a slide range.
Sequence of items is also important in that the higher used items should be placed on the top of a drop-down list.
Short-cuts are also necessary in that as users learn the application, they should not have to use a drop-down list for the most frequently used items (e.g., crtl-c (copy) and ctrl-v (paste) from the Windows Edit menu)
Selection mechanisms (viz., keyboard, pointing device, touch screen, voice) also relate to how menus are displayed. For example, for non-touch cell phones the user must traverse menus to find items. For touch devices, the user does not have to traverse as many menus. This is due to the fact that for most touch devices, they are one touch actionable. This means for example that the user can press “Home” directly on the keyboard, and not have to highlight the “Home” button and then select OK.)

3. Introduction to Human Computer Interaction
Task-Related Menu Organization
Goal: create sensible, comprehensible, memorable, and convenient organization relevant to the user’s task
Hierarchical decomposition
Chapters
Biological Taxonomy
Restaurant Menus
Difficulty in classifying an item as belonging to only one category
Could lead to forming a network
The menu organization should support the task. The goal of the user interface designer should be to
create sensible, comprehensible, memorable, and convenient organization relevant to the user’s task
In many experiences information is hierarchically decomposed to facilitate our processing of the information.
Examples include:
Books that are organized by chapters,
Biological taxonomies and
Restaurant menus
In some cases an object can belong to more than one category. I this case, the relationships may be defined best by a network strucuture.

4. Introduction to Human Computer Interaction
Example: Music concert ticket system
Menus for types of sports (e.g., MLB Playoff, NFL football, etc.)
Menus for sports locations
Menus for dates
Search by team
Interface objects: tabs, hyperlinks, search boxes
Let’s look at stub hub as an example of a menu structure.
Menus are used to select type of event (e.g., sports such as MLB Playoff, NFL football, etc.)
Menus to specify sports locations
Menus to specify dates of events
Interface objects: used include tabs, hyperlinks, and search boxes

5. Introduction to Human Computer Interaction
Menu Systems
Binary Menus
Single and Multi-Choice Binary Menus
Menu systems include:
Binary menus (e.g., Save or Don’t Save)
Single Choice Menus which include
Option menus (e.g., a drop-down of fruits)
Combo menus (which combine drop-down and direct entry of data by the user)
Radio buttons (where the items are mutually exclusive)
Multi-choice menus include:
Check-boxes
Scrolling list field menus where the user can select multiple rows in the list

6. Introduction to Human Computer Interaction
Menu Systems
Pull-down
Always available via a top menu bar
Items that are not available can be grayed out
Short-cuts (e.g., Ctrl-S)
Cascade
Additional menu systems include:
Pull-down menus which are always available to the user on the top menu bar
Items that are not available from the list can be disabled (or grayed out)
Short-cuts can be associated with items that are frequently selected
Cascading menus structure information in a hierarchical manner

7. Introduction to Human Computer Interaction
Menu Systems
Cascade
Display icons to facilitate learning
Display short-cuts to facilitate learning
Enhancements to pull-down menus include:
Adding icons adjacent to the menu item
Adding short-cuts to frequently select items
Providing dots to indicate that if the an item is selected, then a dialog box will be displayed
Three dots to indicate leads to dialog box

8. Introduction to Human Computer Interaction
Menu Systems
Toolbars and palettes
Support single click action that applies to a displayed object
User controls items in the toolbar or palette
User controls location of toolbar or palette
Menu systems also include Toolbars and palettes.
The power of toolbars and palettes is that they both Support single click action that applies to a displayed object (e.g., save a file)
Most applications also support the User customization of items in the toolbar or palette
In additional most applications allow the user to control location of toolbar or palette (e.g., attached to main toolbar or detached)

9. Introduction to Human Computer Interaction
Menu Systems for Long Lists
List Boxes
Single vs. Multi-Select
Auto-complete
Fisheyes
Let’s look at three menu system that are designed to support long lists of items.
The first menu type List boxes. List boxes can be single select or multi-select as displayed in the diagrams.
Auto-complete takes the users input and matches the entry with a list of available items. Check out the Fisheye link to interact with a fisheye view menu.
Finally, a Fish-eye view uses zooming to expand sections of the list so the items can be easily located.

10. Introduction to Human Computer Interaction
Two-dimensional menus
Provides a good overview of the choices
Reduces the number of required actions
Allows for rapid selection
Useful for web page design (minimizes scrolling – single screen overview)
Two dimensional menus follow a grid layout. The advantage of two dimensional menus include
They Provide a good overview of the choices
They Reduces the number of required actions by the user
They Allow for rapid selection of items
They are Useful for web page design (since they minimizes scrolling and provide a single screen overview)
Note the two-dimensional menu in the diagram of the Peapod web-site

11. Introduction to Human Computer Interaction
Embedded Menus and Hotlinks
Permit items to be viewed in context
Keeps users focused on the task and objects of interest
The University of Delaware (UD) is the largest university in the U.S. state of Delaware. The main campus is located in Newark, with satellite campuses in Dover, Wilmington, Lewes and Georgetown. It is medium-sized — approximately 16,000 undergraduate and 3,000 graduate students. Although UD receives public funding for being a land-grant, sea-grant, space-grant and urban-grant state-supported research institution, it is also privately chartered.[1] At present, the school's endowment is valued at about $ billion US. The University of Delaware is ranked 71st by US News in the category of nationwide "Top Schools." [4] In 2008, UD was ranked No. 20 in the in-state category of Kiplinger's Personal Finance magazine's list of the 100 Best Values in Public Colleges.[2]
The school from which the university grew was founded in 1743, making it one of the oldest in the nation. However, the University of Delaware was not chartered as an institution of higher learning until Its original class of 10 students included George Read, Thomas McKean, and James Smith, all three of whom would go on to sign the Declaration of Independence.
The school has, among others, engineering, science, business, education, urban affairs and public policy, public administration and agriculture programs, as well as programs in history, chemical engineering, chemistry and biochemistry, drawing as it does from the historically strong presence of the nation's chemical and pharmaceutical industries in the state of Delaware. In 2006, UD's engineering program was ranked number 10 in the nation by The Princeton Review. It is one of only four schools in North America with a major in art conservation.
Embedded menus and hotlinks (such as hyperlinks) provide menu options to the user while the can view the information in context.
The advantage being that the users can keep their focus.

12. Introduction to Human Computer Interaction
Menu Systems
Single Menu
Linear Sequence
Welcome to Lesson 7 Part B
Menu systems pertain to how users navigate an application.
A single menu system involves the user making a choice within a single screen.
A linear sequence involves the user sequentially moving through an application in a series of menus.
An acyclic network involves the user making choices on specific screens and depending on the choice navigates to the next level of the application, however the user cannot traverse to a prior level
A cyclic network does permit the user to traverse to a previous level
Acyclic Network
Cyclic Network

13. Introduction to Human Computer Interaction
Acyclic and Cyclic Menu Networks
Mental model of the structure and of relationships between menus
Lack a single parent menu
Backward traversals toward the main menu may not map to a single parent
Acyclic and cyclic menus often become complex and make it difficult for the user for form a mental model of the application.
Also, each back step in the traversals toward the main menu may not map to a single parent. This may cause the user to lose orientation in the application.
Acyclic Network
Cyclic Network

14. Introduction to Human Computer Interaction
Linear Menu Sequence (e.g., wizards)
The following is an example of a linear sequence menu. These types of menus are often used for wizard type applications (e.g., set-up a printer)
Linear Sequence

15. Introduction to Human Computer Interaction
Simultaneous Menus
Multiple active menus on the screen
Choices can be entered in any order
Require more display space
Shopping.com
Simultaneous Menus allow the user to specify a criterion from multiple categories. In the example, the user’s task is to purchase a PC laptop. They can filter the criteria based on Price range, brand, processor type or other such criteria.
An advantage of this type of menu structure is that there are Multiple active menus on the screen
An additional advantage is that Choices can be entered in any order
However, one draw-back is that the menu structure Requires more display space
Check-out the Shopping.com website for an example.

16. Introduction to Human Computer Interaction
Tree-structured Menus
Dependent on the definition of categories
User familiarity improves performance
If groupings are unfamiliar, performance will suffer
Use terminology from the user’s task domain
Depth – number of levels (ideally less than 3 or 4)
Breadth – number of items per each level (ideally 4 to 8 items)
Breadth is preferred over depth
Tree-structured Menus are a commonly used selection mechanism.
The mechanism works well when there are well defined categories
The more familiar the user is with the categories, the better the performance
However, If groupings are unfamiliar, performance will suffer since the user will have trouble locating a specific function
For these types of menus, it is important to Use terminology from the user’s task domain
Tree structured menus have two dimensions: Depth – number of levels (ideally less than 3 or 4)
And Breadth – number of items per each level (ideally 4 to 8 items)
Breadth is preferred over depth in terms of having the user be able to quickly locate specific functions, and accessing those functions
Breath = 11
Depth = 2

17. Introduction to Human Computer Interaction
Content Organization
Task-related grouping in tree structures
Create groups of logically similar items
E.g., Countries = Level 1; States = Level 2; Cities = Level 3
Form groups that cover all possibilities
E.g., Ages = 0-9, 10-19, 20-29, > 30
Make sure items are not overlapping
E.g., “Entertainment and Event” versus “Concert and Sports”
Use familiar terminology
E.g., Day/Night versus 6am to 6pm and 6pm to 6am
Content organization is critical when using tree structures. As such, the following principles can assist the UI designer in improving the usability of their application:
Create groups of logically similar items
E.g., Countries = Level 1; States = Level 2; Cities = Level 3
Form groups that cover all possibilities
E.g., Ages = 0-9, 10-19, 20-29, > 30 and Make sure items are no overlapping groups
And Use familiar terminology
E.g., Day/Night versus 6am to 6pm and 6pm to 6am

18. Introduction to Human Computer Interaction
Item Presentation Sequence
Alphabetic sequence of terms
Grouping of related items
Most frequently used items first
Most important items first
Time (chronological)
Numeric ordering (ascending or descending)
Physical properties
Increasing/decreasing length, temperature, etc.
Adaptability
Automatically list most frequently selected to the top
Can be confusing
This form of adaptability is likely to have a negative impact on performance
Infrequently used items not appearing in drop-downs
Hybrid: Most frequent at top, alphabetic thereafter
Also, for tree structures, Item Presentation Sequence can be based on various criteria:
Alphabetic sequence of terms (for example, the diagram displaying font styles)
Grouping of related items (for example, the File menu: saving, printing, recently opened files)
Most frequently used items first
Most important items first
Time (chronological – most recent first, versus oldest first)
Numeric ordering (ascending or descending for number ranges in menus)
And Physical properties (e.g., Increasing/decreasing length, increasing/decreasing temperature, etc.)
Adaptability refers to menus that adjust to user previous selections.
One approach is to Automatically list most frequently selected on the top
However, this Can be confusing and is likely to have a negative impact on performance
Infrequently used items not appearing in drop-downs is a second strategy
A third approach is a Hybrid: where the Most frequently selected items are at top, and the other items are listed alphabetically thereafter

19. Introduction to Human Computer Interaction
Menu Maps (also site maps)
Menu maps, or site maps, provide an overall view of a website.
Specifically, the menu map does not use extensive graphics, but rather localizes the key hyperlinks and groups them into appropriate categories.

20. Introduction to Human Computer Interaction
Menu Layout
Titles
Single menus – use a title that identifies the situation (e.g., warning)
Linear menus – titles should represent the stage in the process
Tree menus – use a meaningful term for the root (e.g., “Main Menu”)
Menu layout has multiple design considerations. One consideration is the menu Title.
Single menus – use a title that identifies the situation (e.g., warning)
For Linear menus – the titles should represent the stage in the process
For Tree menus – the UI designer should use a meaningful term for the root (e.g., “Main Menu”, or in the example “Vodafone Live” with the main menu icons on display)

21. Introduction to Human Computer Interaction
Menu Layout
Phrasing of menu items
Use familiar, concise terms
The first word should allow easy discrimination between items
E.g., “Size of type” versus “Set the type size”
Graphical layout and design
Consistent layouts improve:
The locating of information
Predictability
Titles (typically left justified)
Item placement (typically left justified)
Error messages (consistent location)
Other principle related to menu layout include:
Phrasing of menu items, that is Use familiar, concise terms
As a general rule The first word should allow easy discrimination between items E.g., “Size of type” versus “Set the type size”
The menu objects should have Consistent layouts to improve the tasks of
The locating of information
An Predicting where items are to be located
In general:
Titles are typically left justified
Item are typically left justified
And Error messages display in a consistent location

22. Introduction to Human Computer Interaction
Menu Layout
Font Style as an indicator of level
Indicators of stage in a linear menu
Main Menu
Revenue Management
Denied Amounts
Payer
+-----
----+-
With regard to indicators as to where in the menu structure the user is located, some type of visual indicator should
Be used, for example:
Font Style (however, the UI designer should take care with over using both different font styles and different font sizes)
In a very simple example, note the indicator as to the stage in the process, where is it is easy to determine stage one from stage 5.
This concludes Lesson 7