1. Web Design IT 130 Robin Burke

2. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design

3. Good Design through Bad Example

4. Task #1 Arthur Murray Dance Studios What does Arthur Murray teach in its advanced classes? Find a dance studio in Illinois

5. Task #2 National Association for Child Development Find the address of the Chicago chapter of the NACD

6. Task #3 Monona, WI Pay your real estate taxes online. What's the weather in Monona?

7. What makes a design bad?

8. Usability Learnability first time user Efficiency speed of task performance Memorability next visit Errors accuracy of interaction Satisfaction pleasant to use

9. Problems "Mystery meat" navigation force user to memorize link locations "Shifting sands" navigation prevent users from learning navigation map Failure of organization difficult to learn, impossible to remember Efficiency "cool" graphics interfere with access to content

10. More problems Technology not user focus History Wired Busy-ness Arngren Electronics

11. Benefits of good design Confused customers leave lost sales Confused employees waste time training costs errors Spend 10% budget on usability 2x quality measures

12. How to have a good design Basic principles of user interface Good design process

13. Basic UI Principles Cognitive load "don't make me think" Information hierarchy organize content by importance Audience "not your problems, my problems" Effectiveness optimize user experience Content what do users want from you?

14. Design Process Understand what the site is for goal / purposes Understand who you're reaching audience Understand what the audience wants content functionality Structure and present content in pages Test your site usability

15. Goal Many possible purposes convince sell amuse aesthetic response Key site must effectively support goal

16. Audience A site will often have more than one audience Example: CTI site Audience effects age formality language

17. Content / Functionality Web site must deliver either or both Content information / media that the audience wants Functionality web applications that the audience wants to use Everything else is secondary

18. Testing Find typical users don't need many Have them use the design typical tasks Watch what they do just watch usually means record on video

19. Problem If we wait until the site is finished to test we may discover that many things are wrong expensive to re-implement If we don't have the site what do users test?

20. Prototyping Possible to test design without testing the finished implementation prototyping Low-fidelity prototyping works surprisingly well all on paper

21. Low-fidelity Prototype Hand-drawn pages Can test page organization labels / links navigation scheme

22. Exercise Low-fi prototype search for CTI internship possibilities what does the form look like? what does the response look like?

23. Layers of design Site Design overall picture what is the site to accomplish Content what will go into the site how to maintain / update Page what will be the look and feel of each page

24. Site Design what/who is the site for? what are the logical units of organization? what kinds of navigation are required? what parts of the site are dynamic/static? what parts of the site change most frequently?

25. Content Design Segment the site. For each part, what is the audience? what classes of documents exist? what content elements belong on each class of document? what design guidelines are relevant to the site? how will the navigation scheme be presented?

26. Page Design generate a template for each class of document how should the elements be arranged? what contents need emphasis? for each page, fill in the appropriate template

27. Example www.mlb.com audience content / functionality page design

28. Navigational metaphor Principle web pages have no "natural" organizing principle designer must supply this important content = 3 clicks from home page Consequences Navigation is an essential part of content organization Must be considered at each layer of design site = needs / metaphor content = content relationships page = placement and organization of elements

29. Page design Presenting content text form widgets images media Presenting navigational tools links other controls

30. Information hierarchy Some items on page are more visible more visible = more important Controlling visibility contrast whitespace position background

31. Contrast Contrast establishes visibility font size color background motion Only works if used sparingly and consistently

32. also, whitespace

33. Position Top left most important Bottom less important Off-screen (requiring scrolling) least important many users will never see

34. Use Information Hierarchy Principle Most visible items should be most important Least important items should be least visible Consequences Page should be structured to keep important items visible Navigation elements are almost always important

35. Examples anti-example animation hell example Sun Micosystems

36. Free-standing Principle Page may be seen out of context via a third-party link Page will usually need enough context to stand alone Consequences casual visitors should see basic information who / what / when / where repeating content headers footers navigation elements

37. Examples anti-example: internal page from NACD example: internal page from Microsoft

38. Consistency Principle understanding a design takes effort designer should amortize this effort Consequences build templates that can accommodate the whole range of content design repetition is not boring content changes

39. Examples anti-example: Monona example: amazon.com

40. Simplicity Principle web pages are small stick to the essentials don't try to pack everything in Consequence use meaningful links to avoid scrolling

41. Examples anti-example: Arngren example: Jakob Nielsen example? LA Times

42. Homework #6 Simple user-centered design exercise Design and draw 4 pages political site Get 4 subjects to use Report results Pair project

43. Important points Prototypes must be hand-drawn Report & prototypes must be submitted in class