CHAPTER 6 Menu Selection Form FillIn and Dialog

CHAPTER 6: Menu Selection, Form Fill-In, and Dialog Boxes Designing the User Interface: Strategies for Effective Human-Computer Interaction Fifth Edition Ben Shneiderman & Catherine Plaisant in collaboration with Addison Wesley is an imprint of Maxine S. Cohen and Steven M. Jacobs © 2010 Pearson Addison-Wesley. All rights reserved.

Task-Related Organization "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. " 1 -2 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -2

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 1 -3 © 2010 Pearson Addison-Wesley. All rights reserved.

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 © 2010 Pearson Addison-Wesley. All rights reserved. 1 -4

Interaction Frameworks System • Interaction: – Communication between user and system • Why have a framework? – Allows “precision” in: • Explanation • Accounting for differences – E. g. , gulfs of execution and evaluation k r o w “ Task System Model on e “p ta ” sk s” m r fr o “feedback” Interface Model “c om “g ma ive nd s” s” User Model – Presents global view • All elements receive attention 1 -5 © 2010 Pearson Addison-Wesley. All rights reserved.

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 1 -6 © 2010 Pearson Addison-Wesley. All rights reserved.

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 1 -7 © 2010 Pearson Addison-Wesley. All rights reserved.

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-blindness etc. © 2010 Pearson Addison-Wesley. All rights reserved. 1 -8

Interaction Styles, Dix • Interaction: – dialog between 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” © 2010 Pearson Addison-Wesley. All rights reserved. k” System s ta “c ” n s om o m rk rfor “g ma o ive n “w “pe s” ds” Task “feedback” User 1 -9

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? 1 -10 © 2010 Pearson Addison-Wesley. All rights reserved.

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 © 2010 Pearson Addison-Wesley. All rights reserved. • Some systems harder to use than others • Gulf of Execution user’s formulation of actions allowed by the system • Gulf of Evaluation user’s expectation of changed system state actual presentation of this state 1 -11

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? 1 -12 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -12

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? © 2010 Pearson Addison-Wesley. All rights reserved. 1 -13 6 -13

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 © 2010 Pearson Addison-Wesley. All rights reserved. 1 -14 6 -14

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 • Restricted form of full WIMP system – – purely text based, with options presented as numbered choices graphical selected by arrow keys graphical selected by mouse combination (e. g. mouse plus accelerators) © 2010 Pearson Addison-Wesley. All rights reserved. 1 -15

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 …” 1 -16 © 2010 Pearson Addison-Wesley. All rights reserved.

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 1 -17 © 2010 Pearson Addison-Wesley. All rights reserved.

Form-Fillin • Primarily for data entry or data retrieval • Screen like paper form • Data put in relevant place • Requires – good design – obvious correction facilities 1 -18 © 2010 Pearson Addison-Wesley. All rights reserved.

Spreadsheets • First spreadsheet VISICALC first – followed by Lotus 1 -2 -3 – MS Excel most common today • Sophisticated variation of formfillin – 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 1 -19 © 2010 Pearson Addison-Wesley. All rights reserved.

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 © 2010 Pearson Addison-Wesley. All rights reserved. 1 -20

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 1 -21 © 2010 Pearson Addison-Wesley. All rights reserved.

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): 1 -22 © 2010 Pearson Addison-Wesley. All rights reserved.

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 © 2010 Pearson Addison-Wesley. All rights reserved. 1 -23

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! 1 -24 © 2010 Pearson Addison-Wesley. All rights reserved.

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 1 -25 © 2010 Pearson Addison-Wesley. All rights reserved.

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 1 -26 © 2010 Pearson Addison-Wesley. All rights reserved.

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 1 -27 © 2010 Pearson Addison-Wesley. All rights reserved.

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 1 -28 © 2010 Pearson Addison-Wesley. All rights reserved.

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 © 2010 Pearson Addison-Wesley. All rights reserved. 1 -29

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 1 -30 © 2010 Pearson Addison-Wesley. All rights reserved.

BTW, Old School Menu Design (UTPA, circa 2006) • “Glass teletype” • Top – menu • Below - query with form fillin 1 -31 © 2010 Pearson Addison-Wesley. All rights reserved.

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 © 2010 Pearson Addison-Wesley. All rights reserved. – Results: “it depends” 1 -32

Single Menus • Binary Menus – Mnemonic letters – Radio Buttons – Button Choice 3. What is your marital status? o Single o Married o Widowed/divorced/separated 1 -33 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -33

Single Menus (cont. ) • Multiple-item Menus • Multiple-selection menus or check boxes 1 -34 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -34

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. © 2010 Pearson Addison-Wesley. All rights reserved. 1 -35 6 -35

Single Menus (cont. ) 1 -36 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -36

Single Menus (cont. ) • To see updates from friends, photos and feeds, the Zumobi Ziibii 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. 1 -37 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -37

Single Menus (cont. ) 1 -38 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -38

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 textentry filed. • Fisheye menus display all of the menu items on the screen at once, but show only items near the cursor at full size. 1 -39 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -39

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. 1 -40 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -40

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. 1 -41 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -41

Single Menus (cont. ) 1 -42 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -42

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. 1 -43 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -43

Single Menus (cont. ) 1 -44 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -44

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 1 -45 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -45

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 1 -46 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -46

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. 1 -47 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -47

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 1 -48 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -48

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. © 2010 Pearson Addison-Wesley. All rights reserved. 1 -49 6 -49

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. 1 -50 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -50

Content Organization (cont. ) • Menu layout 1 -51 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -51

Content Organization (cont. ) • Menu layout (cont. ) – Titles • For single menus, use a simple descriptive title. • For tree-structured menus, use the exact same words in the higher-level menu items as in the titles for the next lower-level menu. – E. g. if a menu item is called Business and Financial Services, the next screen should have that phrase as its title. 1 -52 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -52

Content Organization (cont. ) • Menu layout – Titles (cont. ) • Phrasing of menu items – Use familiar and consistent terminology – Ensure that items are distinct from one another – Use consistent and concise phrasing – Bring the keyword to the left 1 -53 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -53

Content Organization (cont. ) • Menu layout (cont. ) – Graphic layout and design • Constraints – screen width and length – display rate – character set – highlighting techniques 1 -54 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -54

Content Organization (cont. ) • Menu layout (cont. ) – Establish guidelines for consistency of at least these menu components: – Titles – Item placement – Instructions – Error messages – Status reports 1 -55 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -55

Content Organization (cont. ) • Menu layout (cont. ) – Techniques • Indentation • Upper/lower case characters • Symbols such as * or - to create separators or outlines • Position markers • Cascading or walking menus • Magic lens 1 -56 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -56

Fast Movement Through Menus • Keyboard shortcuts – Supports expert use – Can make translation to a foreign language more difficult – Bookmarks in browsers – User configured toolbars 1 -57 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -57

Data Entry with Menus: Form Fill-in, Dialog Boxes, and Alternatives • Form Fill-in – Appropriate when many fields of data must be entered: • Full complement of information is visible to user. • Display resembles familiar paper forms. • Few instructions are required for many types of entries. – Users must be familiar with: • Keyboards • Use of TAB key or mouse to move the cursor • Error correction methods • Field-label meanings • Permissible field contents • Use of the ENTER and/or RETURN key. 1 -58 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -58

Data Entry with Menus: Form Fill-in, Dialog Boxes, and Alternatives 1 -59 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -59

Data Entry with Menus: Form Fill-in, Dialog Boxes, and Alternatives 1 -60 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -60

Data Entry with Menus: Form Fill-in, Dialog Boxes, and Alternatives • Format-specific field – Coded fields • Telephone numbers • Social-security numbers • Times • Dates • Dollar amounts (or other currency) 1 -61 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -61

Data Entry with Menus: Form Fill-in, Dialog Boxes, and Alternatives • Dialog Boxes – Combination of menu and form fill-in techniques. – Internal layout guidelines: • • Meaningful title, consistent style Top-left to bottom-right sequencing Clustering and emphasis Consistent layouts (margins, grid, white space, lines, boxes) Consistent terminology, fonts, capitalization, justification Standard buttons (OK, Cancel) Error prevention by direct manipulation 1 -62 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -62

Data Entry with Menus: Form Fill-in, Dialog Boxes, and Alternatives • Dialog Boxes (cont. ) – External Relationship • Smooth appearance and disappearance • Distinguishable but small boundary • Size small enough to reduce overlap problems • Display close to appropriate items • No overlap of required items • Easy to make disappear • Clear how to complete/cancel 1 -63 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -63

Data Entry with Menus: Form Fill-in, Dialog Boxes, and Alternatives • Novel design combining menus and direct manipulation – Pie menus (example here) – Control menus – Marking menus – Flow menus – Toolglass 1 -64 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -64

Audio Menus and Menus for Small Displays • Menu systems in small displays and situations where hands and eyes are busy are a challenge. • Audio menus – Verbal prompts and option descriptions – Input is normally verbal or keypad – Not persistent, like a visual display, so memorization is required. – Request users can avoid listening to options 1 -65 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -65

Audio Menus and Menus for Small Displays (cont. ) • Menu for small displays – E. g. , entertainment, communication services – Learnability is a key issue – Hardware buttons • Navigation, select – Expect interactions – Tap interface – GPS and radio frequency identification provides same automatic input 1 -66 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -66

Audio Menus and Menus for Small Displays (cont. ) Telephone menus use soft keys to present context-dependent menu items. The convention used here is to consistently place selections on the left side and back or exit options on the right side. Hard buttons control the connect and disconnect functions. Dedicated buttons facilitate scrolling through lists. The current position in the list is indicated on the right side of the screen. 1 -67 © 2010 Pearson Addison-Wesley. All rights reserved. 6 -67

Audio Menus and Menus for Small Displays (cont. ) The Zumobi interface (http: //www. zumobi. com) on a mobile phone starts with four “tiles” using a two-level zoom interaction to see the tile details (left side). The user can specify which tiles are in their “zoomspace”. Then, when they become more familiar with the interface, they can add up to a total of 16 tiles using a three-level zoom interaction to smoothly go between overview, “zone” view, and detail view (right side). The application accommodates thumb use on touchscreens, numeric key pads for zone-based zooming, 4 -way D-Pads, and even thumb-roller controllers. © 2010 Pearson Addison-Wesley. All rights reserved. 1 -68 6 -68