designing graphical user interfaces components of guis – icons, cursors, menus, dialogue boxes,...
TRANSCRIPT
Designing Graphical User Interfaces
Components of GUIs – icons, cursors, menus, dialogue boxes, form fillin,
error messages
Interface hardware - keyboards, pointing devices, speech, displays
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
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
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
Graphical User Interfaces (GUIs)
Dominant style of interface today Composed of widgets ...
WindowIconCursorMenusSliderForm
Dialogue BoxButtonsToolbarHotlinks
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
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
Designing Cursors
Design the cursor to provide feedback as to appropriate actions and progress
Designing Menus Choice of menu structure How to arrange items How to present items How to label items
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
Simplemenus
Pop up
Pull down
What is going on here?
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
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
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
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
A complex multi-level menu
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
Beyond this, broad generally better
than deepN = 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 = BD
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)
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
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
Exampledialoguebox
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
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
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
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
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
Devices
Keyboards Pointing devices Visual displays
Keyboards
Layout Scholes (QWERTY) Dvorak and ABCDE
Ergonomic keyboards
Function keys, arrow keys and number pads Phone? Calculator? ATM?
What is it?
Pointing devices Direct
lightpen touchscreen
Indirect mouse trackball joystick Touchpad and nipples
Visual Displays
Display technologies include: Raster-scan cathode ray tubes (CRT) Liquid crystal displays Plasma panels LEDs Video projection
Factors in choosing displays
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
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