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

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

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

4. 4http://img.cs.man.ac.uk/stevens 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

5. 5http://img.cs.man.ac.uk/stevens 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.

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

7. 7http://img.cs.man.ac.uk/stevens 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

8. 8http://img.cs.man.ac.uk/stevens 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

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

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

11. 11http://img.cs.man.ac.uk/stevens 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

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

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

14. 14http://img.cs.man.ac.uk/stevens 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

15. 15http://img.cs.man.ac.uk/stevens 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

16. 16http://img.cs.man.ac.uk/stevens 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

17. 17http://img.cs.man.ac.uk/stevens 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)

18. 18http://img.cs.man.ac.uk/stevens 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

19. 19http://img.cs.man.ac.uk/stevens 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

20. 20http://img.cs.man.ac.uk/stevens 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

21. 21http://img.cs.man.ac.uk/stevens 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

22. 22http://img.cs.man.ac.uk/stevens 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

23. 23http://img.cs.man.ac.uk/stevens 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.

24. 24http://img.cs.man.ac.uk/stevens 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

25. 25http://img.cs.man.ac.uk/stevens 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