CHAPTER 6: Menu Selection, Form Fill-In, and Dialog Boxes

1. Designing the User Interface: Strategies for Effective Human-Computer Interaction Fifth Edition Ben Shneiderman & Catherine Plaisant in collaboration withMaxine S. Cohen and Steven M. Jacobs CHAPTER 6:Menu Selection, Form Fill-In, and Dialog Boxes

2. Task-Related Organization "The primary goal for menu, form fill-in, and dialog-box designers is to create a sensible, comprehensible, memorable, and convenient organization relevant to the user's task."

3. Overview • What and why “frameworks (or theories) of interaction” • The big picture (again) • A number of cognitive theories have been developed that are immediately relevant to the design of interactive artifacts for widespread personal and commercial use. • Overview of interaction styles • Command line, menus, …, WIMP (Windows, Icon, Menus, and Pointing Devices) , … • Direct manipulation last time • “Look and feel” • Details: • “Theory, principles, and (especially) guidelines” • Menus, form filling

4. About Interaction (Alan Dix et al.) • Notion of interaction (again) Most work in HCI focuses on interaction in the small: where tasks take a few minutes or hours and individual actions receive feedback within seconds. Interaction in the large brings its own problems distinct from those of interaction in the small. • Interaction frameworks/schemas/accounts • Ergonomics • Or, human factors • Interaction styles • Command language, menus, direct manipulation • Context of interaction – social and organizational

5. System “work on task” “commands” “performs” “gives” Task User “feedback” Interaction Frameworks • Interaction: • Communication between user and system • Why have a framework? • Allows “precision” in: • Explanation • Accounting for differences • E.g., gulfs of execution and evaluation • Presents global view • All elements receive attention System Model Interface Model User Model

6. Interaction Frameworks, Dix et al. • Abowd and Beale • Their interaction framework has 4 parts • user • input • system • output • Each has its own unique language • interaction  translation between languages • problems in interaction = problems in translation

7. Interaction Frameworks, 2 • User intentions translated into actions at the interface translated into alterations of system state reflected in the output display interpreted by the user • General framework for understanding interaction • not restricted to electronic computer systems • identifies all major components involved in interaction • allows comparative assessment of systems • an abstraction

8. BTW – “Ergonomics” • Study of the physical characteristics of interaction • Also known as “human factors” • Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems • Examples • arrangement of controls and displays • e.g., controls grouped according to function or frequency of use, or sequentially • surrounding environment • e.g., seating arrangements adaptable to cope with all sizes of user • health issues • e.g., physical position ), lighting, noise, environmental conditions (temperature, humidity • Use of color • e.g., use of red for warning, green for ok, awareness of color-blindnessetc.

9. System “work on task” “performs” “commands” “gives” Task User “feedback” Interaction Styles, Dix • Interaction: • dialogbetween computer and user • Interaction styles (Dix) • Note: 7 vs. 5 of Shneiderman • Command line interface • Menus • Form-fills (and spreadsheets) • Dialog boxes • Natural language • Question/answer and query • “WIMP”

10. Command Line Interfaces(briefly) • Way of expressing instructions to computer directly • Using function keys, single characters, short abbreviations, whole words, or a combination • suitable for repetitive tasks • better for expert users than novices • offers direct access to system functionality • command names/abbreviations should be meaningful • Typical example: the Unix system (shell) • Recall, user intentions translated into actions at interface translated into alterations system state reflected in the output display interpreted by user • Are gulfs likely to be large or small?

11. Norman’s Account(Hutchins, Hollan, and Norman – last week’s paper) • Concentrates on user’s view of interface • (Norman’s) Stages: • user establishes goal • formulates intention • specifies actions at interface • executes action • perceives system state • interprets system state • evaluates system state with respect to goal • Some systems harder to use than others • Gulf of Execution • user’s formulation of actions actions allowed by the system • Gulf of Evaluation • user’s expectation of changed system stateactual presentation of this state

12. Norman’s Stage of Action: a different look at design • What makes something difficult to do? • What are you trying to do? • What are the ways can you achieve it? • How do you execute one of those ways? • What happened as a result?

13. Action • Start with goal (goal formation) 1) Goal; 2) what is done to the world: 3) Check • You have to do something (execution) 1) intention; 2) action sequence; 3) execution • Check to see that goal is made (evaluation) 1) perceive what happened; 2) interpreting it; 3) evaluating of what happened match what we wanted?

14. Norman’s Seven Stage of action, Types of Knowledge • The identified steps are: • Forming the goal • Forming the intention • Specifying an action • Executing the action • Perceiving the state of the world • Interpreting the state of the world • Evaluating the outcome Video on Action Cycle 2:21

15. Menus • Set of options displayed on screen • Options visible – less recall - easier to use – rely on recognition, so names should be meaningful • Selected by using mouse, numeric or alphabetic keys • Menu organization important • often options hierarchically grouped • organization relevant to task and use • organization much studied • E.g., alphabetical vs. task organization • Menu systems can be • purely text based, with options presented as numbered choices • graphical selected by arrow keys • graphical selected by mouse • combination (e.g. mouse plus accelerators) • Restricted form of full WIMP system

16. Natural Language • Familiar to user • Use speech recognition or typed natural language • Problems: • Vague • Ambiguous • Hard to do well • Solutions • try to understand a subset • pick on key words • … and “promise of the future …”

17. Query Interfaces • Question/answer interfaces • user led through interaction via series of questions • suitable for novice users but restricted functionality • often used in information systems • Query languages (e.g. SQL) • used to retrieve information from database • requires understanding of database structure and language syntax, hence requires some expertise

18. Form-Fillin • Primarily for data entry or data retrieval • Screen like paper form • Data put in relevant place • Requires • good design • obvious correction facilities

19. Spreadsheets • First spreadsheet VISICALC first • followed by Lotus 1-2-3 • MS Excel most common today • Sophisticated variation of form-fillin • grid of cells contain a value or a formula • formula can involve values of other cells • e.g. sum of all cells in this column • user can enter and alter data • spreadsheet maintains consistency

20. Windows • As you know … • Areas of the screen that behave as if they were independent terminals • can contain text or graphics • can be moved or resized • can overlap and obscure each other, • or can be laid out next to one another (tiled) • scrollbars • allow the user to move the contents of the window up and down or from side to side • title bars • describe name of window

21. Icons • Small picture or image • Represents some object in the interface often a window or action • Windows can be closed down (iconifed) • small representation  many accessible windows • Icons can be many and various highly stylized or realistic representations

22. Pointers • Important component • WIMP style relies on pointing and selecting things • Usually achieved with mouse • Also joystick, trackball, cursor keys or keyboard shortcuts • Wide variety of graphical images (and right bottom):

23. Menus • Choice of operations or services offered on the screen • Required option selected with pointer • Problem - menus can take up a lot of screen space • Solution - menu appears when needed

24. Kinds of Menus, 1 • More later … • Menu Bar at top of screen (normally), menu drags down • pull-down menu - mouse hold and drag down menu • drop-down menu - mouse click reveals menu • fall-down menus - mouse just moves over bar! • Contextual menu appears where you are (hovering) • pop-up menus - actions for selected object • Pie menus - arranged in a circle • easier to select item (larger target area) • quicker (same distance to any option) • … but not widely used!

25. Kinds of Menus, 2 • Cascading menus • hierarchical menu structure • menu selection opens new menu • and so in ad infinitum • Keyboard accelerators • key combinations - same effect as menu item • two kinds • active when menu open - usually first letter • active when menu closed - usually Ctrl + letter

26. WIMP “Look and Feel” • Lots of things user can interact with: • Main WIMP components • windows, menus, icons • Buttons • Dialogue boxes • Palettes • … • Collectively known as widgets • “Window gadgets” • In sum: • appearance + behavior = look and feel

27. More Widgets (or interface elements) • All familiar from personal use … • E.g., Buttons • Individual and isolated regions within a display that can be selected to invoke an action • Special kinds • radio buttons - set of mutually exclusive choices • check boxes - set of non-exclusive choices • E.g., Dialog boxes • Information windows that pop up to inform of an important event or request information • E.g., when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears

28. Social and Organizational Context • Interaction affected by social and organizational context • Other people - desire to impress, competition, fear of failure • Motivation - fear, allegiance, ambition, self-satisfaction • Note: Inadequate systems cause frustration and lack of motivation

29. Menu Design Details, 1 • Again, menus one “interaction style” • i.e., a way in which user can “tell the system what to do” • Advantage (vs. e.g., command line) that range of “commands” is all available • Though, of course, are not all displayed at once • Allows recognition vs. recall • Enhances usability for novice or infrequent users • Vs. direct manipulation • Which uses “model world” to represent system • Advantages • Possibly faster for expert users (as is command line) • Can structure task • Disadvantages • Lack of feedback of change in system state • Little metaphoric assistance in understanding task

30. Menu Design Details, 2 • As with any interaction style, need consider design issues such as: • Task-related organization • Phrasing of items • Sequence of items • Graphic layout and design • Shortcuts for knowledgeable frequent users • Online help • Error correction • Selection mechanisms • Keyboard, pointing device, touchscreen, voice, etc. • Will look at: • Meaningful organization of menus • Menu techniques • Single menus, combinations of multiple menus, etc. • Menu content • Fast movement through menu selection

31. BTW, Old School Menu Design(UTPA, circa 2006) • “Glass teletype” • Top – menu • Below - query with form fillin

32. Task-Related Menu Organization • Shneiderman: • "The primary goal for menu, form-fillin, and dialog-box designers is to create a sensible, comprehensible, memorable, and convenient organization relevant to the user's task.“ • Menu organization provides a structuring of choices • Also, revealing system and command structure through organization • Single, etc. • WWW is a cyclic network • Hierarchies / tree structures • “Natural” for taxonomies • Ubiquitous • Powerful in organizing - log levels • Natural for menus • Organization studied, e.g., alphabetical vs. frequency organization • Results: “it depends”

33. Single Menus • Binary Menus • Mnemonic letters • Radio Buttons • Button Choice 3. What is your marital status? o Single o Married o Widowed/divorced/separated

34. Single Menus (cont.) • Multiple-item Menus • Multiple-selection menus or check boxes

35. Single Menus (cont.) • Pull-down, pop-up, and toolbar menus • Pull-down menus • Always available to the user by making selections on a top menu bar • Pull-down menus (cont.) • Key board shortcuts • E.g., Ctrl-C important to support expert user efficiency • Toolbars, iconic menus, and palletes • Offers actions on a displayed object • Pop-up menus • Appear on a display in response to a check or tap with a pointing device.

36. Single Menus (cont.)

37. Single Menus (cont.) • To see updates from friends, photos and feeds, the ZumobiZiibii interface • (http://www.zumobi.com) allows users to choose between two styles of presentation. • On the left is a static list of text/image items with a gestural swipe used to control • paging, and on the right is a dynamic scrolling ticker (called “River”) which • horizontally scrolls titles and images across the screen.

38. Single Menus (cont.)

39. Single Menus (cont.) • Menus for long lists • Scrolling menus, combo boxes, and fisheye menus • Scrolling menus display the first portion of the menu and an additional menu item, typically an arrow that leads to the next set of items in the menu sequence. • Combo boxes combine a scrolling menu with a text-entry filed. • Fisheye menus display all of the menu items on the screen at once, but show only items near the cursor at full size.

40. Single Menus (cont.) • Menus for long lists (cont.) • Sliders and alphasliders • When items consist of ranges or numerical values, a slider is a natural choice to allow the selection of a value. • The alphaslider uses multiple levels of granularity in moving the slider thumb and therefore can support tens or hundreds of thousand of items.

41. Single Menus (cont.) • Menus for long lists (cont.) • Two-dimensional menus • “Fast and vast” two-dimensional menus give users a good overview of the choices, reduce the number of required actions, and allow rapid selection.

42. Single Menus (cont.)

43. Single Menus (cont.) • Embedded menus and hotlinks • Embedded menus are an alternative to explicit menus • It is natural to allow users reading about people, events, and places to retrieve detailed information by selecting menus in context.

44. Single Menus (cont.)

45. Combination of multiple menus • Linear menu sequences and simultaneous menus • Linear • Guide the user through complex decision-making process. • E.g. cue cards or "Wizards" • Effective for novice users performing simple tasks • Simultaneous • Present multiple active menus at the same time and allows users to enter choices in any order

46. Combination of multiple menus (cont.) • Tree-structured menus • Designers can form categories of similar items to create a tree structure • E.g., fonts, size style, spacing • Fast retrieved if natural and comprehensive • Use terminology from the task domain • Expanding menus maintain the full context of each choice • E.g., Windows Explorer

47. Combination of multiple menus (cont.) • Menu Maps • Menu maps can help users stay oriented in a large menu tree • Effective for providing overviews to minimize user disorientation. • Acyclic and Cyclic Networks • Useful for • social relationships • transportation routing • scientific-journal citations • Can cause confusion and disorientation.

48. Content Organization • Task-related grouping in tree organization • Create groups of logically similar items • Form groups that cover all possibilities • Make sure that items are nonoverlapping • Use familiar terminology, but ensure that items are distinct from one another

49. Content Organization (cont.) • Item Presentation Sequence • The order of items in the menu is important, and should take natural sequence into account when possible: • Time • Numeric ordering • Physical properties • When cases have no task-related orderings, the designer must choose from such possibilities as: • Alphabetic sequence of terms • Grouping of related items • Most frequently used items first • Most important items first.

50. Content Organization (cont.) Adaptive menus in Microsoft Office. A font-selection menu lists the recently used fonts near the top of the menu (as well as in the full list), making it easier to quickly select the popular fonts.