Groups for Lab Classes

1. Groups for Lab Classes • http://www.cs.man.ac.uk/~alanw/LABS/2352-groups.html http://img.cs.man.ac.uk/stevens

2. Interaction Styles CS2352 Lecture 9 Robert Stevens http://www.cs.man.ac.uk/~stevensr http://img.cs.man.ac.uk/stevens

3. Introduction • A dialogue between human and computer • Interaction style influences nature of dialogue • Command line • WIMPS • Natural language • Form fill-in http://img.cs.man.ac.uk/stevens

4. Command Line • Textual, keystroke driven dialogue with computer • @Words, part-words, function keys etc used to talk to computer • Direct access to system functionality, rather than indirection through hierarchical menus • Combined together into scripts • Flexibility through options (counterpart in dialogue boxes) • Can be applied to many items at once • Good for repetitive tasks http://img.cs.man.ac.uk/stevens

5. Costs of Command Line • Difficulty in use and learning • No cues for recognition • Alleviate with memorable and consistent terminology • Commands should be terms from the task language (remove, copy, move, make directory, etc.) • Commands often obscure and vary across systems: grep, awk, sed, bif, rm, del, etc. http://img.cs.man.ac.uk/stevens

6. Command Line: The Find Command $find –name cs2352* $find –name cs2352* -print Cs2352-exam.doc Cs2352-script.doc Cs2352-model-ans.doc $ http://img.cs.man.ac.uk/stevens

7. Natural Language • Natural to use • Problems are myriad – Pragmatics, context, anaphora, ambiguity • “Robert does his research on drugs” • “The business man leant on the bank” • Real natural language unlikely and perhaps not desireable • Restricted forms of language possible • These still have to be learnt • User should be aware of their limitations • Can be successful http://img.cs.man.ac.uk/stevens

8. Question/Answer or Query Dialogue • Narrow domain, precise questions with limited answers • Install Wizards – Ask limited questions, offer choices, allow movement back and forth, choices determine further questions • Narrow range of applications • User led through task • Also general query interfaces e.g. SQL • Specific syntax, choice of values for attributes & complexity of Boolean expressions http://img.cs.man.ac.uk/stevens

9. Form Fill-In • Form-based question & answer • User guided to fill out question • Offered values • Can change mind etc. • Spreadsheet an extreme version http://img.cs.man.ac.uk/stevens

10. Body Mass Index Form Fill-In http://img.cs.man.ac.uk/stevens

11. Windowing Systems • Most common form of interaction • Language of Menus, buttons, text fields, pick lists, check boxes, etc. • Windows, icons, menus & pointers • Web uses a variant – “point and click” • Elements of the WIMP interface are “widgets” • Different WIMP interfaces display and use widgets in their own manner • Gives Look and Feel http://img.cs.man.ac.uk/stevens

12. Three Dimensional Effects http://img.cs.man.ac.uk/stevens

13. Elements of the WIMP Interface http://img.cs.man.ac.uk/stevens

14. Windows • Bounded areas of screen • Act as a thread of dialogue • Act as separate terminals • Multiple windows on a screen • Multiple tasks accessible • Moveable, re-sizeable, scrollable (Window small view on large world) • Title bar, maximise, minimise and close http://img.cs.man.ac.uk/stevens

15. Icons • Windows closed and lost or iconised • Small picture representing the task • Allows increased availability of tasks • Act as reminder • Icons for many attributes of UI: Waste bin, drives, tasks, programmes, etc. • Images real world, styalised, abstract • Need to be easy to recognise http://img.cs.man.ac.uk/stevens

16. Pointers • Used to point and select • Different pointer shapes indicate mode of use • Also display system activity • Pointer has hot-spot where click acts • Lack of visible hot-spot is a design flaw http://img.cs.man.ac.uk/stevens

17. Menus • Offer choice of tasks to be performed • Offer recognition rather than recall • Thus meaningful, consistent naming • Pointer indicates which option is to be selected • Further task, such as clicking, activates option • Long menus inefficient (Fitt’s law), so casscading menus used • Top-level options often always available; sometimes as tool-bars for frequent tasks • Pop-up menus give contextual or global tasks • Pull-down, fall-down pin-up menus • Keystroke accelarators and shortcuts to short-cut menus for experts (should be usable in menu to reinforce learning) http://img.cs.man.ac.uk/stevens

18. Grouping in Menus • Menus group tasks together • Should not be too long • Should not be too many menus • Some items could come in more than one place • In pull-down style, name should reflect overall functions of options (“exit” in /file menu • Consistent across applications to aid learning • Ordered by importance, frequency and task sequence?) • Opposing functions kept apart http://img.cs.man.ac.uk/stevens

19. Buttons • Isolated & individual regions of screen selected to invoke task • Resemble mechanical push-button • Meaning related by icon and/or textual label • Toggle buttons for alternative states (bold/italic) • Radio buttons for range of mutually exclusive options (bold/italic,regular;point sizes) • Toggle buttons sometimes checkboxes http://img.cs.man.ac.uk/stevens

20. Tool Bars • Applications have rows of buttons offering commonly used functions • Editing, drawing and formatting tools • Similar to menu, but icons allow more to be displayed • Contents of icons fixed, but contents of tool-bar can customised http://img.cs.man.ac.uk/stevens

21. Modes • A mode places interpretation upon an action • VI has command mode and edit mode • “:wq” is “write and quit” in command mode • Writes “:wq” in edit mode • IN file menu, “s” saves a file, writes “s” in edit window • Mode must be visible to user – not shown in VI • Explicit, clumsy modes seen as bad, but modes are ubiquitous http://img.cs.man.ac.uk/stevens

22. Palattes • Palattes make mode apparent • Offer collections of icons, button, etc that make mode apparent to user • Drawing mode offers collections of drawing tools • Palattes often customisable • Tear-off menus form palattes • Common in graphical tasks • Mode is part of system state http://img.cs.man.ac.uk/stevens

23. Dialogue Boxes • Information windows to draw user’s attention to some change of state – “file not saved” • Sub-dialogue of larger task – “save as” dialogue • Windows provide separation of task threads • Dialogue boxes are separations of sub-tasks etc. • Often have variety of interaction styles vbia various widgets: Text fields, menus, buttons, checkboxes, etc. http://img.cs.man.ac.uk/stevens

24. Screen Design • The way widgets are put together • Ergonomics, cognition via graphical design • Presents tasks and promotes correct dialogue with system • Kinds of information: Text, numbers, maps, pictures, etc. • Technology: Characters, graphical displays, size, etc. • Purpose: File displays by name, type, date, thumbnails, etc. • Much knowledge from graphic design for static material – transfers well • Interactive systems choice of presentation is possible – Windows “view” menu arranges file windows http://img.cs.man.ac.uk/stevens

25. Presentation • Colour used to reinforce information • Aligned colums: • Text aligned left • Integers aligned right • Reals aligned on decimal point • Shape of column then gives indication of size • Data emtry layout as import as data presentation • Text entry fields should be aligned: Not jagged due to labels! • Remember task analysis for order, dependencies and values • Cultural dependence of viewing order for labels • Beauty and utility http://img.cs.man.ac.uk/stevens