Interface Design Guidelines & Web Design

1. Interface Design Guidelines &Web Design

2. General design principles • Design principles apply to everything.Some principles are of particular importance to computer interfaces. • Following general design principles can ensure meeting basic human factors evaluation criteria.

3. General HCI Design Concepts • Visible affordances • Visible constraints • Mapping • Causality • Transfer effects • Population stereotypes/idioms • Individual differences

4. Affordance • How do the following objects provide affordance?

5. Visible Constraints • Limitations of the actions possible perceived from object’s appearance Eg date field example (which format??) • Sim City2000 (see “hall of shame”) where some toolbar buttons (not all!) have submenus associated with them, available only when the user holds the mouse button down for a period of time after clicking on the toolbar button.

6. Mapping • Why is this a poor mapping of video control buttons? • Is this better?

7. Causality • the thing that happens right after an action is assumed by people to be caused by that action • interpretation of “feedback” (more on this later) • false causality • incorrect effect • starting up an unfamiliar application just as computer crashes • causes “superstitious” behaviors • invisible effect • command with no apparent result often re-entered repeatedly • e.g. mouse click to raise menu on unresponsive system

8. Transfer effects • People transfer their learning/expectations of similar objects to the current objects • positive transfer: previous learning's also apply to new situation • negative transfer: previous learning's conflict with the new situation

9. Idioms • Populations learn idioms that work in a certain way • red means danger • green means safe • But idioms vary in different cultures! • Light switches • America: down is off • Britain: down is on • Icons may not transfer well eg trash (word and symbol)

10. Individual differences • There is no average user =>Difficult/impossible? to cater for everyone well, so design often a compromise • Rule of thumb: • design should cater for 95% of audience (ie for 5th or 95th percentile) • but means 5% of population may be (seriously!) compromised • Designing for the average is a mistake • may exclude half the audience • Examples: • computers and visibility: • font size, line thickness, color for color blind people?

11. Interface Design Guidelines • Human factors design principles provide good basis for design. More specific computer interface design guidelines have also been developed by evaluating common design problems across many systems. • These guidelines can be used in the design process and also to evaluate an interface for usability.

12. General Interface Design guidelines. 1. Consistency and predictability 2. Provide shortcuts 3. Provide helpful feedback 4. Completions and exits clearly indicated 5. Prevent errors 6. Allow action reversal 7. Give user a sense of control 8. Minimize memory/cognitive load (Shneiderman, 1998)

13. Be consistent • Consistency of effects • same words, commands, actions will always have the same effect in equivalent situations • Predictability • Consistency of language and graphics • same information/controls in same location on all screens / dialog boxes • forms follow boiler plate • same visual appearance across the system (e.g. widgets) • e.g. different scroll bars in a single window system! • Consistency of input • consistent syntax across complete system Ok Cancel Cancel Ok Ok Done Never Mind Accept Dismiss Cancel CONNECT MODEM

14. Be Consistent These are labels with a raised appearance. Is it any surprise that people try and click on them?

15. Shortcuts • Should provide fast way for experienced users – eg: • Auto completion of commands • Functions keys • Skipping instructions - Eg bill paying over phone, choice for new/experienced users

16. Feedback • Keep user informed about what is happening • Includes sound, highlighting, animation and combinations of these • Eg. The hourglass tells user something is happening, but not how long its going to take. Has it hung? Or is it just taking a long time?

17. > Doit > Doit This will take5 minutes... 5: Provide feedback • Continuously inform the user about • what it is doing • how it is interpreting the user’s input • user should always be aware of what is going on What’s it doing? Time for coffee.

18. Feedback • Should be as specific as possible, based on user’s input • Get users attention (is the feedback noticed?) but don’t drive them crazy! (eg harsh tones, large intrusive pop-ups, constantly blinking text)

19. 6. Provide clearly marked exits How do I get out of this?

20. Exits • Users often change mind, are interrupted, or become confused about a process => Offer easy way out wherever possible • Cancel button (for dialogs waiting for input) • Undo (can get back to previous state) • Quit (for leaving the program at any time) • Defaults (for restoring to known state)

21. Prevent errors! • Design it so its hard to make mistakes!! • Menu selection vs form fill-in • No alphabetic characters where numbers expected • Check before proceeding with major actions (eg save before exit prompt) • Feedback for errors including simple specific instructions for recovery

22. Designing for error Many strategies for reducing error problems • Make errors detectable • feedback on effects of action; evaluation of goal • Reduce potential for slips • E.g., simplify and indicate modes • Reduce potential for mistakes • E.g., make system state visible • Reduce consequences of error • E.g., make actions undo-able

23. Give user sense of control. • Use the user’s own language - simple, user- friendly - e.g cd player vs DNS configuration ( “techspeak”) • Present exactly and obviously the information the user needs • remove or hide irrelevant or rarely needed information as it competes with important information on screen • Provide help Online, context-driven help

24. Short term memory/Cognitive load • Don’t make navigation and window management excessively complex • Use meaningful mnemonics, icons, and abbreviations ie promote Promote recognition over recall • eg File / Save • Cf icon with Ctrl/S

25. Short term memory/Cognitive Load • Describe required input format using example, and provide default eg calendar • Don’t require users to remember data from one screen for use on another

26. Web Design • Knowing basic interface design guidelines is just the beginning of designing a good interface. • Web design has three main components: • Information Architecture (site content) • Navigation Structure (site navigation) • Graphical Design • General screen layout, Legibility and readability (typefaces), Icons, Colour, Data Display & Data Entry (eg menus, forms, dialog boxes) • Must also consider use of specific guidelines for: Other interface components such as • Use of animations, audio, video • Degree of automation

27. I1 Content is king • Ultimately, users visit your website for itscontent. Everything else is just the backdrop. • Jakob NielsenDesigning Web Usability, p. 99

28. I2 Essential strategies for web writing • concise • easy to scan • objective "A common thread between conciseness, scannability, and objectivity is that each reduces the user's cognitive load, which results in faster, more efficient processing of information.” Morkes & Nielsen, 1998

29. I3 Be concise • “Every sentence, every phrase, every word has to fight for its life” • Crawford KilianWriting for the Web, pp. 58-9 • omit unnecessary sentences in a paragraph • omit unnecessary words in a sentence • use a short word over a long one

30. I4 Be concise “Happy talk must die” Steve Krug Don't Make Me Think, p. 46 • get rid of welcome messages and introductory text • don’t waste words telling users where they are or what they can do • don’t waffle on with explanations of what’s on the site

31. I5 Example of ‘happy talk’

32. I6 Getting rid of ‘happy talk’

33. I7 Be concise • “Instructions must die” • Steve Krug • Don't Make Me Think, p. 46 “The main thing you need to know about instructions is that no one is going to read them--at least not until after repeated attempts at 'muddling through' have failed”.

34. I8 Improve scanning • use simple sentence structures • keep paragraphs short • one-topic per paragraph1 • opening sentence in a paragraph should be the topic sentence

35. I9 Techniques for longer text • normal style of writing… • introduction • background material • details/facts • conclusions • … needs to be reversed • Conclusion first, then details, then other background info.

36. I10 Online documentation “help doesn’t!” “It’s just not acceptable for web sites to come with documentation”. Jakob Nielsen, Designing Web Usability, p. 129. user interface problems can not be corrected in the documentation

37. I11 Minimise eye movement Need to minimise eye movement is even more important online: • users’ attention span is short • harder to read from screen • users’ don’t read, they scan

38. I12 Eye movement during reading The way we are taught to read has implications for how we scan a screen: • left to right • top to bottom

39. I13 Eye movement and shapes Position elements to minimise eye movement Source:Yale Style Manual

40. I14 Design ‘above the fold’ ‘above the fold’ = newspaper term Make sure important informationcan be seen in first screen view

41. I15 Scrolling behaviour Early studies (19954/5) showed that users would not scroll Not true of users now, but… • users will only scroll if they think they are on the right page

42. I16 ‘Above the fold’ (example 1a)

43. I17 ‘Above the fold’(example 1b)

44. I18 Page length and scrolling as a rule of thumb level one page – one screenful level two page – two screensful beyond that – ok to be longer Caution: pages can be directly accessed!

45. G1 Grids • Horizontal and vertical lines to locate window components • aligns related components • Organization • contrast to bring out dominant elements • grouping of elements by proximity • show organizational structure • alignment • Consistency • location • format • repetition • organization Format of variable contents Widget to widget spacing Message text in Arial 14, left adjusted Standard icon set Window to widget spacing No Ok Fixed components

46. Message text in Arial 14, left adjusted Standard icon set Apply The file was destroyed Cancel No Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. ! Ok G2 Grids Do you really want to delete the file “myfile.doc” from the folder “junk”? ? No Ok

47. G3 Another grid • Two-level Hierarchy • indentation • contrast Logic of organizationalflow Alignment connects visual elements in a sequence Grouping by white space

48. Warning Tip of the day: Monday, Mar 12 mmmm mmm mmm ! mmmm mmm mmm Help Dismiss Okay mmmm mmm mmm mmm ? Okay G4 Visual Consistency • internal consistency • same conventions and rules for all elements of the GUI unless strong reason • set of application-specific grids enforce this • external consistency • follow platform and interface style conventions • use platform and widget-specific grids • deviate from conventions only when it provides a clear benefit to user

49. Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: G5 Relationships between screen elements • Link related elements, disassociate unrelated elements • proxemic clusters • white (negative) space • alignment • explicit structure

50. G6 Webforms Bad alignment Poor choice of colors to distinguish labels from editable fields