COMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes Menu Selection, Forms, and Dialog Boxes

Transcription

1 07 - Menu Selection, Forms, and Dialog Boxes

2 Menus

3 Overview Offer cues, users can categorize actions easier (no syntax recall required) Especially effective when users have little training, use the UI intermittently, are unfamiliar with the terminology or need help structuring their decision making process Can also be appealing to expert frequent users Goal: Create a sensible, comprehensible, memorable, and convenient organization relevant to users tasks Some issues/challenges: Space (often the number of choices is quite large), complexity, organization (e.g., alphabetical vs. frequency of use), categorization, phrasing of items, sequence of items, graphic layout and design, shortcuts, online help, error correction and selection mechanisms

4 Classification of Menus Single Menus Choice between two or more items, may allow multiple actions, may pop up on the current work area or remain permanently available Linear Menu Sequences Series of interdependent menus that guide users through a series of choices; effective for novice users (guidance, one decision at a time, e.g., Wizard, shopping cart, installation routine) Simultaneous Menus Present multiple active menus at the same time, allow users to enter choices in any order, effective for experienced users, require more display space Tree-Structured Menus Categorize similar items and create tree structure, mutual exclusive groups with distinct identifiers; Can be extremely large without cluttering the display (finding meaningful categories/grouping is crucial) Acyclic and Cyclic Menus (Network Structures) Provide access from a menu item from different menu branches, can be faster, potential of getting lost higher (WWW is a good example)

5 Different Menu Forms Pull Down Menus Always visible, usually on a top-menu bar Toolbars, Iconic Menus, Palettes Display all the actions, user can apply them to displayed objects Pop-Up Menus Appear on the display as a response to a click, usually context depending (i.e., the content of the menu depends on the location of the cursor/mouse pointer), can be organized in a circle (pie menu) Embedded Menus and Hotlinks Menu is part of the content (e.g., text, maps with embedded links), not explicit, no enumeration, very popular in Hypertext environments, permit items to be viewed in context, eliminate the need for a distracting and screen-space wasting explicit menu, help to keep the user focused on the task and objects of interest

6 Menus for long lists Problem: Limited screen space. If tree structured menus are not meaningful, here are some other options: Scrolling Menus (display only a portion of a menu) Combo Box as Addition (additional text entry possible) Fisheye Menus (all items displayed at once but only the items near the curser are enlarged, e.g., Apple s Dock ) Sliders (useful if numerical choices need to be expressed through a menu) Alpha-Sliders (slider that works with the alphabet, for instance, to locate phone book entries) Two Dimensional Menus ( multi column menus; provide a good overview, reduce the number of required actions and allow rapid selection; popular in webpage design in order to provide a single screen overview)

7 Content Organization Goal: Reduce time to learn Increase speed of performance Reduce error-likeliness Improve retention over time Can be achieved through meaningful: Grouping of menu items Development of presentation sequences of items Layout of menus and items

8 Content Organization Grouping of menu items Common problems: Overlapping categories, extraneous items, conflicting classifications in the same menu, unfamiliar jargon, generic terms Guidelines: Create groups of logically similar items Form groups that cover all possibilities Make sure that items are non-overlapping (e.g., Entertainment and Events (overlapping) vs. Sports and Concerts (non-overlapping)) Use familiar terminology and ensure that items are distinct from one another

9 Content Organization Presentation sequences of items If task-related ordering possible: Chronological, numerical (ASC vs. DESC), physical properties (INCR vs. DECR. - e.g., weight, volume, length, temperature) If task-related ordering is not meaningful: Alphabetical, grouping of related items, frequency of use, importance (e.g., emergency situations) Some empirical data: (A) Alphabetic vs. (B) categorical/grouping vs.(c) random Note: The nature of the instructions, the size of the menu and the familiarity with the items has crucial influence (A) is preferable if the items are known (B) is preferable in large menus or if the items are not known (C) is almost never preferable Frequency of use: Adaptation of menu to current usage pattern (Note: Careful, might undermine learning)

10 Content Organization Layout of menus and items - (A) Menu titles Need to be descriptive and memorable Single Menu: Simple description that identifies the situation Linear sequence menus: Accurate representation of the stages in the linear sequence Tree menu: If possible use terms that clearly indicate the root structure of a menu tree, use high-level menu items as titles for low-level menus (reassurance effect)

11 Content Organization Layout of menus and items - (B) Phrasing of menu items Item must be comprehensible (Note: individual words might not be familiar to some users) Some guidelines: Use familiar and consistent terminology (depending on user community) Make sure that items are distinct from one another Use consistent and concise phrasing Bring the keyword to the front in order to reduce scanning time

12 Content Organization Layout of menus and items - (C) Graphic layout and design Concerns issues such as screen-width, -length, display rate, character set, highlighting techniques,... Some Guidelines: Titles: Preferably left centered Items: Preferably left centered, number preceding item (if numbered), separate groups by blank line or separator line Instructions: Should be identical in each menu and placed in the same position (e.g., shortcut instructions) Error messages: Need to appear in consistent positions and use consistent syntax and terminology Status reports: If possible, indicate on what level in a menu structure a user is at the moment (indented, font size, position marker: +---, -+--, --+-, ---+)

13 Fast movement through menus Goal: Accelerate the movement through menus (in particular for expert users) Some means: Keyboard shortcuts (Note: Place shortcut instruction next to the menu item) Bookmarks Macros and toolbar shortcuts (possibly customizable) for repetitive tasks

14 Forms

15 Data Entry - 1/2 Meaningful title: Identify the topic and avoid computer terminology Comprehensible instructions (e.g., Type Address vs. You/user should type X, Type vs. Enter ) Logical grouping and sequencing of fields: Arrange related fields together, use sequence of fields that is consistent with common pattern (e.g, city, state, zip) Ensure a visually appealing layout of the form (alignment, margins,... ) Use consistent terminology and abbreviations Align visible space with actual boundaries of data entry fields Enable convenient cursor movement (e.g., tab-key)

16 Data Entry - 2/2 Error correction for individual characters and entire fields (easy repair possible) Error prevention (e.g., Integer field does not allow characters) Error messages for unacceptable values should indicate how to fix the problem Provide immediate feedback (e.g., real-time feedback vs. HTML submit ) Clearly mark optional fields (e.g., *) Provide explanatory messages for fields (e.g., pop-up textbox) Use a completion signal (e.g., submit button), avoid automatic submission, hence allowing for review

17 Format Specific Fields Text Alignment: entry left, display left Number Alignment: entry left/right, display right, line up decimal points Special fields: Phone number Social security number Time, date Amount (currency) Clearly indicate what to enter, label and arrange fields in a way that makes it clear what to enter where. Additionally: Provide help in form of pop-up calendars, maps,...

18 Dialog Boxes

19 Dialog Boxes Purpose: Interrupt user task to request user input (e.g., selection option, limited data entry, confirmation) Consistency is key! Prepare special dialog box guidelines. Examples: Title, alignment, size, aspect ration, standard margins within boxes, visual orientation (e.g., cancel button always on the bottom right) Other guidelines: Make size as small as reasonable Popup box should appear next to the click, not on top of it, never hide the context! Enable easy distinction between usual work area and dialog box Use multiple boxes or tabbed areas if a lot of content is to display

20 Audio Menus and Menus for Small Displays

21 Audio Menus Instruction prompts and list of options are spoken to the user. The user responds by using a keyboard, touch phone or by speaking Challenge: Audio menus commonly need to be memorized (visual menus are persistent). The user must compare each option with the goal and place it on a scale ( no match at all to perfect match ) Some guidelines: Provide functions to repeat the options, provide exit mechanism (e.g., if the user is inactive for a few seconds) Avoid complex menu structures (limit to 3-4 choices), however, this highly depends on the nature of the application Provide dial-ahead capabilities for frequent users Input: Simple voice recognition (e.g. press 9 or say nine ), more advanced recognition of key words, natural language recognition

22 Menus for Small Displays Overview 2 application domains: Entertainment (e.g., game boy) - involves long sessions of informal, content-intensive interaction Information and Communication services (e.g., calendars, address book, phones, inventory management) - repetitive, brief, and highly structured sessions Key challenge: Display size (UI becomes more temporal, only part of the information can be presented at a time) Key issues for such applications: Learnability (high competition!) Responsiveness

23 Menus for Small Displays Design considerations/guidelines Account for target domain Dedicated device means dedicated UI Allocate functions appropriately, consider usage frequency and importance Simplify: Focus on important functions, relegate others to other platforms (e.g., IPod/ITunes integration) Design for responsiveness (e.g., use dedicated buttons to allow fast access to common features), plan for interruptions, provide continuous feedback Eliminate unnecessary words, letters, spaces

24 The End Questions?