1. 1 Interaction Styles Lecture 8 Date: 23 rd February

2. 2 Overview of Lecture Major interaction styles Direct manipulation Menu Selections, form fillin & dialog boxes Command Languages

3. 3 Interaction Styles Direct Manipulation Menu Selection Form Fillin Dialog Boxes Command Languages

4. 4 Menu Selection Form Fillin/Dialog Boxes Single menus Combination of Multiple Menus Content Organisation Data-entry with menus (Form fillin & dialog boxes) Menu Selection

5. 5 Menu Selection – Single Menus Binary Menus Mnemonic letters Radio Buttons Button Choice Multiple-item Menus Menu Selection

6. 6 Menu Selection – Single Menus Menu Selection Multiple-selection menus or check boxes

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

8. 8 Menu Selection – Single Menus Menu Selection

9. 9 Menu Selection – Single Menus Menu Selection Menus for long listsMenus 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. Sliders and alpha-sliders When items consist of ranges or numerical values, a slider is a natural choice to allow the selection of a value. The alpha-slider uses multiple levels of granularity in moving the slider thumb and therefore can support tens or hundreds of thousand of items.

10. 10 Menu Selection – Single Menus Menu Selection Two-dimensional menus Two-dimensional menus give users a good overview of the choices, reduce the number of required actions, and allow rapid selection.

11. 11 Menu Selection – Single Menus Menu Selection 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.

12. 12 Menu Selection – Single Menus Menu Selection

13. 13 Menu Selection – Multiple Menus Menu Selection 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

14. 14 Menu Selection – Multiple Menus Menu Selection 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

15. 15 Menu Selection – Multiple Menus Menu Selection 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. Acyclic Network Cyclic Network

16. 16 Menu Selection – Content Organization Menu Selection Meaningful grouping/sequencing of menu items along with careful editing of titles and appropriate layout design required Task-related grouping in tree organization Create groups of logically similar items Form groups that cover all possibilities Make sure that items are non-overlapping Use familiar terminology, but ensure that items are distinct from one another

17. 17 Menu Selection – Content Organization Menu Selection 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.

18. 18 Menu Selection – Content Organization Menu Selection

19. 19 Menu Selection – Content Organization Menu Selection Menu layout

20. 20 Menu Selection – Content Organization Menu Selection 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. 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

21. 21 Menu Selection – Content Organization Menu Selection Menu layout (cont.) Graphic layout and design Constraints screen width and length display rate character set highlighting techniques

22. 22 Menu Selection – Content Organization Menu Selection Menu layout (cont.) Establish guidelines for consistency of at least these menu components: Titles Item placement Instructions Error messages Status reports

23. 23 Menu Selection – Content Organization Menu Selection 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

24. 24 Menu Selection – Content Organization Menu Selection Fast Movement through Menus Keyboard shortcuts Supports expert use Can make translation to a foreign language more difficult Bookmarks in browsers User configured toolbars

25. 25 Menu Selection – Data Entry Data Entry Form Fillin 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.

26. 26 Menu Selection – Data Entry Data Entry

27. 27 Menu Selection – Data Entry Data Entry 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

28. 28 Menu Selection – Data Entry Data Entry Dialog Boxes Combination of menu and form-fillin 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

29. 29 Menu Selection – Data Entry Data Entry Dialog Boxes

30. 30 Menu Selection – Data Entry Data Entry 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

31. 31 Interaction Styles Direct Manipulation Menu Selection Form Fillin Dialog Boxes Command Languages

32. 32 Command Languages Earliest commonly used interactive style Distinguished by their immediacy and their impact on devices or information Differ from menu-selection systems in that their users must recall notation and initiate action Development of command languages have slowed dramatically due to emergence of direct manipulation and menu-selection interfaces

33. 33 Command Languages Examples: copy *.doc c:\data\ grep '^$' files.txt

34. 34 Command Languages

35. 35 Command Languages Command entry is used for a wide range of tasks: text editing electronic mail financial management airline or hotel reservations inventory manufacturing process control gaming

36. 36 Command Languages Features of Command Entry: Powerful: offer direct access to system functionality Flexible: various parameters/options offered with commands Difficult to learn Varies across systems

37. 37 Command Languages Command Language Guidelines:

38. 38 Command Languages – Natural Languages Command Languages Natural language interaction - the operation of computers by people using a familiar natural language to give instructions and receive responses Range from simple voice recognition menu-driven systems to more complex ‘natural language’ dialogues. Examples include search engines, advice-giving systems, help systems. Most recently, virtual agents at the interface, who converse with you, e.g. MicroSoft’s Clippy.

39. 39 Command Languages Command Languages – Natural Languages

40. 40 Command Languages Command Languages – Natural Languages Misunderstandings can arise when the system does not know how to parse what the user writes. e.g. child types question into natural language search engine: “How many legs does a centipede have?” and the system responds:

41. 41 Command Languages Command Languages – Natural Languages

42. 42 Summary of Lecture Interaction stylesInteraction styles refer to the ways in which users communicate or interact with computer systems Direct Manipulation Word Processors/Display Editors Spreadsheets Spatial Data Management Video games Computer-Aided Design Menu Selection Single menus Combination of Multiple Menus Content Organisation Data-entry with menus (Form fillin & dialog boxes) Command Languages References

43. 43 Terms of Reference Shneiderman, B. & Plaisant, C. (2005) Designing the User Interface Preece, J. et al. (2002) Interaction Design Benyon, D. et al (2005) Designing Interactive Systems Helander, M. et al (1997) Handbook of Human-Computer Interaction Norman, D. (1990) The Design of Everyday Things References