Presentation is loading. Please wait.

Presentation is loading. Please wait.

Designing Graphical User Interfaces Components of GUIs – icons, cursors, menus, dialogue boxes, form fillin, error messages Interface hardware - keyboards,

Similar presentations

Presentation on theme: "Designing Graphical User Interfaces Components of GUIs – icons, cursors, menus, dialogue boxes, form fillin, error messages Interface hardware - keyboards,"— Presentation transcript:

1 Designing Graphical User Interfaces Components of GUIs – icons, cursors, menus, dialogue boxes, form fillin, error messages Interface hardware - keyboards, pointing devices, speech, displays

2 Direct Manipulation Interfaces Use of a pointing device to directly manipulate visible objects on the screen resulting in real-time feedback Examples Graphical user interfaces  Office applications - wordprocessors and spreadsheets  Desktop/windows interfaces for operating systems  Web browsers 3D interfaces - virtual reality and games Tangible interfaces

3 Advantages of direct manipulation Continuous representation of objects and actions relies on recognition rather than recall Meaningful visual metaphors - can guess what to do and generalise from a few examples Rapid actions through physical actions rather than complex syntax - offload cognitive effort onto motor skills Immediate and reversible system response

4 Disadvantages of Direct Manipulation Focuses the user on only the simple/most obvious parts of the interface May encourage action rather than planning Can be time consuming for repetitive tasks May be difficult to combine commands into new commands Requires space for a large display and pointing device

5 Graphical User Interfaces (GUIs) Dominant style of interface today Composed of widgets... Window Icon Cursor Menus Slider Form Dialogue Box Buttons Toolbar Hotlinks

6 For how not to do it Check out the Interface Hall of Shame from from Isys Information Architects

7 Designing icons Represent object/action in a familiar manner Limit number of different icons Make icons stand out from background Ensure that selected icon is visible from nearby unselected icons Design icon movement animation Add detail to show properties of the object Design combinations of icons (e.g. file and trashcan) Make part of a harmonious family normal selected dragging

8 Designing Cursors Design the cursor to provide feedback as to appropriate actions and progress

9 Designing Menus Choice of menu structure How to arrange items How to present items How to label items

10 Small single-level menus Pull-down and pop-up varieties Highlight potential selection Use natural ordering if there is one Don’t change positions of items Grey-out rather than remove unavailable options Offer keyboard short-cuts for experienced users Pie menu can give rapid selection Open Load Save Close

11 Simple menus Pop up Pull down What is going on here?

12 Small menus using buttons Menus can be made using buttons Radio buttons support one selection only Check boxes support multiple selections Embedded links in hypermedia Iconic menus and palettes Provide default selections

13 Large single level menus Multiple columns where content allows Scrolling menus - one or two dimensional Alphasliders: Actor: Connery, Sean A C DE G H J KN O RS TV Z

14 Structured Menus Menu sequences guide users through complex decisions one part at a time Tree structured menus are commonly used for many choices with natural groupings Speed up access for experienced users with: type-ahead (BLT approach) bookmarks, menu macros and toolbars

15 Task Related Grouping Use information from Hierarchical Task Analysis Guidelines for forming menu trees create groups of logically similar items form groups that cover all possibilities make sure that items are non-overlapping use familiar terms, but ensure items remain distinct Guidelines for presenting items at each level consider ordering – importance or frequency keyword on the left

16 A complex multi-level menu

17 Breadth or depth? Depth = number of levels Ideally, no more than 3 to 4 levels More levels leads to navigation problems Breadth = number of items per level Ideally, no more than 8 items/level More than this leads to scanning problems

18 Beyond this, broad generally better than deep N = number of items B = branch factor at each level D = tree depth Time to select item at each level, t = k + c * log b Total traversal time, T = D * t However, also balance breadth and depth according to system response time and display rate slow response time suggests shallower slow display rate suggests narrower B D N = B D

19 A word about response times System response times may vary greatly, especially when networks are involved Too slow - users are frustrated Too quick - users make mistakes The ideal varies with user and task Visual indication of progress and estimated wait time is important for longer response times (e.g., web interfaces)

20 Menu maps and menu networks Users may benefit from: printed menu maps cross-links that turn trees into graphs But watch out for extra cognitive overhead

21 Designing Dialogue Boxes Dialogue boxes used for complex actions and may combine menus, buttons and forms top-left to bottom-right sequencing clustering and emphasis small enough not to obscure background display close to appropriate background items clear how to complete and cancel

22 Example dialogue box

23 Designing Form Fillin Meaningful title Comprehensible but short instructions Logical grouping and sequencing of fields Visually appealing layout Familiar field labels Consistent terminology and abbreviations Visible space and boundaries for data entry Convenient cursor movement Error correction for characters and fields

24 Error prevention Error messages for unacceptable values Optional fields clearly marked Explanatory messages for fields Completion signal Special formats for coded fields Telephone Times Dates Currency But watch out for multiple nationalities

25 Designing Error Messages Avoid words such as: ILLEGAL, BAD, ABORTED, ERROR, FATAL Positive tone and suggest how to correct Enable additional information to be quickly accessed Opinions divide over optimum placement near to source of error consistent position on screen dialogue box in middle of screen Careful use of sound may help Do not embarrass the user

26 Repair Mechanisms UNDO/REDO commands should be pervasive, applying to any operation where this is logically possible UNDO/REDO should be inverse operations UNDO/REDO sequences can be useful

27 Style Guides Detailed guidelines for a specific software or organisational environment Microsoft: Apple: Example guidelines from apple Use pop-up menus to present up to 12 mutually exclusive choices that the user doesn’t need to see all the time Don’t use pop-up menus For more than 12 items; use a scrolling list For 4 or fewer items; use radio buttons When more than one selection is appropriate (such as text styles in which you can select bold and italic); use checkboxes or pull-down menus in which checkmarks appear

28 Devices Keyboards Pointing devices Visual displays

29 Keyboards Layout Scholes (QWERTY) Dvorak and ABCDE

30 Ergonomic keyboards

31 Function keys, arrow keys and number pads Phone? Calculator? ATM?

32 What is it?

33 Pointing devices Direct lightpen touchscreen Indirect mouse trackball joystick Touchpad and nipples

34 Visual Displays Display technologies include: Raster-scan cathode ray tubes (CRT) Liquid crystal displays Plasma panels LEDs Video projection

35 Factors in choosing displays


37 Speech input Single word versus continuous text Speaker dependent versus independent Useful when hands are busy and/or eyes are occupied mobility is required difficulties using hands harsh or cramped conditions preclude use of keyboard

38 Speech output Maybe useful when user has limited vision message is simple and short environment badly lit or vibrating user is mobile user is experiencing high G forces or anoxia Watch out for interfering with human-human communication publicly revealing private interaction Note use of sound as well as speech

Download ppt "Designing Graphical User Interfaces Components of GUIs – icons, cursors, menus, dialogue boxes, form fillin, error messages Interface hardware - keyboards,"

Similar presentations

Ads by Google