User Interface Design: Methods of Interaction

Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2. Consistency 3. Compatibility 4. Informative feedback 5. Explicitness 6. Appropriate functionality 7. Flexibility & control 8. Error prevention & correction 9. User guidance & support 10. Consideration of system usability problems

1. visual clarity Aids in reading and assimilating information 2. Consistency the system should look and behave consistently colour usage,information location cursor positioning (text boxes),dialogue styles (buttons, check boxes, & radio buttons) information formats (string or integer entry) 3. Compatibility adhering to user expectations of the real world and systems colour (red = alarm, stop) interaction compatibility (mouse and scroll-bars)

4. Informative feedback precise messages should be given provision of progress provision of error messages that are meaningful indicative progress prompts appropriate system responses (i.e. Message boxes with suitable content and context) 5. Explicitness is there an evident structure to the system appropriate screen sequences and metaphors 6. Appropriate functionality are devices well chosen are task functions suitably designed

7. Flexibility and control is the interface flexible in operation and control navigation operators –selection of information display rate –undo facility –short-cuts (&) –can the interface be tailored 8. Error prevention and detection does the system validate inputs & inform of error detection error handling (validate user inputs) providing error messages for errors (message boxes) making errors easy to correct avoiding problems by providing an example

9. User guidance and support good simple design online or available document support informative, easy to use system design good guidance throughout good help facilities (typically a screen or so 10. System usability problems working out the system simple structuring Users know what to do next

Practical Application Forms Windows Use of natuaral language commands and input Direct manipulation Metaphors Icons Menus

Designing Software Applications8 Form-filling Suitable for - all user types Advantages - quick and easy to create - easy to use and learn Disadvantages - unsophisticated - primarily suitable for data entry and retrieval

Designing Software Applications9 Form-filling example

Designing Software Applications10 Form-filling VB implementation –Tab index –Keypress Event to jump to next textbox –Use of conversion and standard error detection

Designing Software Applications11 Direct Manipulation Essential features Explicit actions - user points at, and manipulates objects directly on screen Immediate feedback - e.g. selected icon is highlighted, the effect is immediate Incremental effects - e.g. icon dragged across display moves continuously

Designing Software Applications12 Direct Manipulation Offers easily reversible actions Provides gradual learning –Layered functionality Pre-validation –only valid interactions have an effect –invalid operations are ignored examples: video adventure games, can only go where coded word processors only coded functions paint packages only coded functions In VB can characterised by using Scroll bars Check Boxes Windowing List Boxes Option Buttons Drag and Drop

Designing Software Applications13 Direct Manipulation Disadvantages - limitations of metaphor (can be fatal to interface) - ambiguity of graphical representation - use of screen space - difficult to design and program (exhaustiveness) - system facilities not explicit (all functionality is hidden) - cognitive complexity of holistic view of the system Design guidelines - follow general screen design guidelines e.g. avoid screen clutter, etc. (refer to lecture 9) - test metaphor limitations - test icon and visual design representations

Menus: All interaction choices available as on-screen prompts Types Pull-down (up) Cascading On-screen Type selection Menu 1. Weather 2. News 3. Sport 4. LifeStyle Press (1), (2), (3) or (4) to enter your choice

Menus Suitable for: - novice users, to access system options Advantages - easy to use (reduces memorization) - easy to learn - structures the user’s decisions - easy to program disadvantages - limited choices per menu - slow to use in large systems - full screen interference - slow response times

Menus Design guidelines - group logically related options - menu option order - operational order or frequency of use - limit options to 7 per menu approximately, and avoid excessively deep hierarchies - network structuring may save search time but will confuse cognitive model - avoid ‘where have I been?’, where am I now? - provide escape routes - provide short-cuts (function keys) - prevent serious selection errors

The Desktop Metaphor Virtual environment metaphor Metaphor - examples

Designing Software Applications18 Icons simple visual menus –Suitable for novice users, to access system options advantages - very easy to learn as visual - easy to use - language independent (to a degree) - provides holistic view of system

Designing Software Applications19 Icons Disadvantages uses a lot of screen space need text back up need good icon builder software to build effective icons abstract concepts difficult to design (show directory) Design guidelines must effectively map from user’s cognitive world to the world of the system must be visually distinct from each other (functions & families)

Designing Software Applications20 Icons Design structure - Objects - model principle visual features - Actions - add image to represent dynamic situations Best empirical results from concrete object and abstract symbol, - e.g. go to bottom of a document

Designing Software Applications21 Icons very abstract computing commands may be difficult to represent, e.g. show directory avoid visual complexity (increases search time) in time more experienced users rely on positional constancy of icon, rather than the icon design itself

Recap Interface design is the formal approach to one of the three main subject areas we are focusing on in this course –Interface considerations Input / Output –Data Storage variables files and structures –Process control Sequence Selection Iteration