Menu Selection, Form Fillin, Dialog Boxes (Shneiderman and Plaisant Ch. 6) Interaction – Schema and Techniques (Dix et al., Ch. 3). from http://wps.aw.com/aw_shneider_dtui_7, 8 http://www.hcibook.com/hcibook/resource.html. Overview.
Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.
Menu Selection, Form Fillin, Dialog Boxes(Shneiderman and Plaisant Ch. 6)Interaction – Schema and Techniques(Dix et al., Ch. 3) from http://wps.aw.com/aw_shneider_dtui_7, 8 http://www.hcibook.com/hcibook/resource.html
Overview • What and why “frameworks (or theories) of interaction” • The big picture (again) - This time according to Dix et al. • Will compare Dix et al.’s “big picture” to others a bit, Shneiderman, Norman • As students, viewing alternative accounts useful • Overview of interaction styles • Command line, menus, …, WIMP, … • Direct manipulation last time • “Look and feel” • Details: • “Theory, principles, and (especially) guidelines” • Menus, form fillin
About Interaction (cf Dix et al., ch. 3) • Notion of interaction (again) • Interaction frameworks/schemas/accounts • Ergonomics • Or, human factors • Interaction styles • Command language, menus, direct manipulation • Context of interaction – social and organizational
System “work on task” “commands” “performs” “gives” Task User “feedback” Interaction Frameworks • Interaction: • Communication between user and system • Why have a framework? • or schema, or acccount • Recall last week’s account • Next slide • Allows “precision” in: • Explanation • Accounting for differences • E.g., gulfs of execution and evaluation • Detailing of ui elements • Presents global view • All elements receive attention System Model Interface Model User Model
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 stateactual presentation of this state
Interaction Frameworks, Dix et al. • from 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
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 computer systems • E.g., opening door • identifies all major components involved in interaction • allows comparative assessment of systems • an abstraction interpreted state intentions
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.
Recall, Interaction StylesAs provided by Shneiderman – will see Dix et al.’s take next • A basic element of design – • By what method (or style) does user interact with system • 5 main interaction styles • Each with advantages and disadvantages – and • such tradeoffs what design all about! • Direct Manipulation • Menu selection • Form fillin • Command language • Natural language • Usually blend, especially when users are diverse
System “work on task” “performs” “commands” “gives” Task User “feedback” Interaction Styles, Dix et al. • Again, interaction: • dialogbetween computer and user • Shneiderman • Command language • Menu selection • Form fillin • Natural language • Direct Manipulation • Dix et al. • Command line interface • Menus • Form-fills (and spreadsheets) • Natural language • Dialog boxes • Question/answer and query • “WIMP” – what is this?
Command Line Interfaces(Dix et al., 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? • Paradigm example last time
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 (more later): • 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” (or part) of full WIMP system
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 …”
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
Form-Fillin • Primarily for data entry or data retrieval • Screen like paper form • Data put in relevant place • Requires • good design • obvious correction facilities
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
WIMP Interface • Windows • Icons • Menus (or Mice) • Pointers (or Pull-down menus) • Default style for majority of interactive computer systems • Recall, Xerox Alto • Name not as clever as once was
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
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
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):
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
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!
Kinds of Menus, 2 • Cascading menus • hierarchical menu structure • menu selection opens new menu • and so on … • 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
WIMP “Look and Feel” • Lots of things user can interact when using “direct manipulation” ifs.: • Main WIMP components • windows, menus, icons • Buttons • Dialogue boxes • Palettes • … • Collectively, these elements known as widgets • “Window gadgets” • appearance + behavior = look and feel • Wikipedia: “… aspects of its design, including elements such as colors, shapes, layout, and typefaces (the "look"), as well as the behavior of dynamic elements such as buttons, boxes, and menus (the "feel").”
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
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
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 • As noted, 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
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
BTW, Old School Menu Design(UTPA, circa as late as 2006) • “Glass teletype” • Principle university database access • Top level – menu • Next - query with form fillin (not shown) • Finally, query results
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 • Hierarchies / tree structures • “Natural” for taxonomies • Ubiquitous • Powerful in organizing - log levels • Natural for menus • Single, etc. • E.g., WWW a cyclic network • Organization studied, e.g., alphabetical vs. frequency organization • Results: “it depends”
Single Menu Types, 1 • Binary Menus • Binary menus? • E.g., radio buttons, check boxes • Multiple-item Menus • Multiple-selection menus or check boxes • Pull-down menus (right) • Always available by making selections on a top menu bar • Cascading pull-down menus at right • Key board shortcuts
Single Menu Types, 2 • Toolbars and pallettes • Offers actions on a displayed object • Iconic menus (bottom) • Also, pie menu • Pop-up menus • Appear on a display in response to a check or tap with a pointing device.
Single Menu Types – For Long Lists • Menus for long lists • Scrolling menus • Display first portion of menu and an additional menu item, typically an arrow that leads to next set of items in menu sequence • Demos: • http://www.sitepoint.com/article/menu-scrolling-background • http://www.were-here.com/content/templates/articles.asp?articleid=707&zoneid=7 • Combo boxes • combine scrolling menu with a text-entry field • Sliders and alphasliders • Slider allows the selection of a value • “Alphaslider uses multiple levels of granularity in moving slider thumb and can support tens or hundreds of thousand of items.”
Single Menu Types – Fisheye • Fisheye menus • display all of the menu items on screen at once, but show only items near cursor at full size. • Demos • Java • http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml • Flash • http://www.samuelwan.com/downloads/com.samuelwan.eidt/fisheyemenu/FisheyeMenuDemo.html
Single Menu Types – 2-Dimen • Menus for long lists • Two-dimensional menus • “Fast and vast” • Give users a good overview of choices • Reduce the number of required actions • Allow rapid selection
Single Menu Types - Embedded • Embedded menus and hotlinks • Alternative to explicit menus • Natural to allow users reading about people, events, and places to retrieve detailed information by selecting menus in context
FYI - Combination of Multiple Menus • Linear menu sequences and simultaneous menus • Linear • Guide the user through complex decision-making process. • E.g., install • 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 • 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 • Menu Maps • E.g., site map • 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.
System “work on task” “commands” “performs” “gives” Task User “feedback” Content OrganizationShneiderman guidelines • “Meaningful” grouping and sequencing of menu items important in effectiveness • Want menu structure and items to map well to task • A “guidelines” approach • Shneiderman:
Content Organization - DetailShneiderman • 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 • Item Presentation Sequence • Order of items is important • Should consider natural sequence, as possible: • Time • Numeric ordering • Physical properties • When cases have no task-related orderings, designer must choose from such possibilities as: • Alphabetic sequence of terms • Grouping of related items • Most frequently used items first • Most important items first.
FYI - Content Organization – Menu Layout, 1 • 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 titles for next lower-level menu. • E.g. if a menu item is called Business and Financial Services, next screen should have that phrase as its title. • 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 • Graphic layout and design • Constraints • screen width and length • display rate • character set • highlighting techniques Guidelines from Shneiderman
FYI - Content Organization – Menu Layout, 2 • Establish guidelines for consistency of at least these menu components: • Titles • Item placement • Instructions • Error messages • Status reports • Techniques • Indentation • Upper/lower case characters • Symbols such as * or - to create separators or outlines • Position markers • Cascading or walking menus • Magic lens Guidelines from Shneiderman
Finally, Fast Movement Through Menus • Keyboard shortcuts • Supports expert use • Can make translation to a foreign language more difficult • Bookmarks in browsers • User configured toolbars
Data Entry Design Details • Menu item effective for choosing item from list, but there’s more … • Textual input in particular
Data Entry Design Details • Menu item effective for choosing item from list, but there’s more … • Textual input in particular • Form fill-in • Set of text input boxes • Format can be constrained, e.g., mm/dd/yyyy • Dialog box • Limited data entry coupled with menu selection • Often a standardized element with guidelines
Data Entry with Form Fillin • Appropriate when many fields of data must be entered: • Full complement of information 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 cursor • Error correction methods • Field-label meanings • Permissible field contents • Use of the ENTER and/or RETURN key
FYI - Data Entry with Form Fillin (cont.) • Form-Fillin Design Guidelines • Meaningful title • Comprehensible instructions • Logical grouping and sequencing of fields • Visually appealing layout of the form • Familiar field labels • Consistent terminology and abbreviations • Visible space and boundaries for data-entry fields • Convenient cursor movement • Error correction for individual characters and entire fields • Error prevention • Error messages for unacceptable values • Optional fields clearly marked • Explanatory messages for fields • Completion signal • Format-specific field • Coded fields • Telephone numbers • Social-security numbers • Times • Dates • Dollar amounts (or other currency)
FYI - Data Entry with Dialog Boxes • Combination of menu and form-fillin techniques, as Google example • 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 • 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
Novel Menu Designs • Novel designs combining menus and direct manipulation • Pie menus • Allows “walking out” for selection • Control menus • When pointer reaches some point, command is issued • Marking menus • Release of pointing device issues command • Flow menus • Return to central rest area triggers selection and allows further choice • Toolglass • Two hands, e.g., tool palette and tool use
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, e.g., phone trees! • 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 • Menu for small displays, e.g., cell phones! • 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
End • .