User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2

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 Applications 8

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


Form-filling example


Form-filling• VB implementation

– Tab index– Keypress Event to jump to next textbox– Use of conversion and standard error detection


Direct ManipulationEssential 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


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


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


Iconssimple 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


IconsDisadvantages• 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)


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


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

Documents

User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2