from wps.aw/aw_shneider_dtui_7, 8

1. 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

2. 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

3. 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

4. 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

5. 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

6. 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

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 computer systems • E.g., opening door • identifies all major components involved in interaction • allows comparative assessment of systems • an abstraction interpreted state intentions

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. 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

10. 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?

11. 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

12. 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

13. 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 …”

14. 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

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

16. 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

17. 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

18. 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

19. 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

20. 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):

21. 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

22. 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!

23. 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

24. 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").”

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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”

31. 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

32. 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.

33. 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.”

34. 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

35. 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

36. 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

37. 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.

38. 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:

39. 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.

40. 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

41. 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

42. 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

43. Data Entry Design Details • Menu item effective for choosing item from list, but there’s more … • Textual input in particular

44. 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

45. 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

46. 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)

47. 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

48. 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

49. 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

50. End • .