Designing Graphical User Interfaces

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 • http://homepage.mac.com/bradster/iarchitect/shame.htm

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. Open Save Load Close 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

11. Simplemenus Pull down What is going on here? Pop up

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: A C DE G H J KN O RS TV Z Actor: Connery, Sean

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 D N = BD B

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. Exampledialoguebox

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: msdn.microsoft.com/library • Apple: developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines • 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 • 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