1 / 62

CS101 Introduction to Computing Lecture 25 Web Design for Usability

CS101 Introduction to Computing Lecture 25 Web Design for Usability. During the last lecture …. We looked at the role of heuristics in architectural (or high-level) design We also became familiar with a few popular design heuristics. Heuristic. Rule of thumb learned through trial & error

faye
Download Presentation

CS101 Introduction to Computing Lecture 25 Web Design for Usability

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS101 Introduction to ComputingLecture 25Web Design for Usability

  2. During the last lecture … • We looked at the role of heuristics in architectural (or high-level) design • We also became familiar with a few popular design heuristics

  3. Heuristic Rule of thumb learned through trial & error Common sense lesson drawn from experience

  4. Caution!Caution!Heuristicsdon’talways lead to the best resultsAt times they even lead to the wrong ones, but mostly to results that are good-enough

  5. Given many parts of a system to be designed/built,do thehardpart1st

  6. Today’s Goal:Web Design for Usability • To become able to appreciate the role of usability in Web design • To become able to identify some of the factors affecting the usability of a Web page

  7. When I look at a Web page it should beself-evident, obvious, self-explanatoryI should be able to ‘get it’ - what it is &how to use it - without expendingany effort thinking about itexcerpt from Steve Krug’s bookDon’t Make Me Think

  8. don’t make me think!

  9. Usability!

  10. What’s a Good Site? • The one that achieves the result that it was designed for • Generally, that result can only be achieved by giving the user what s/he wants, as quickly as possible, without her/him expending much effort • One definition of usability: Let the user have what s/he wants, quickly, without much effort • “Quickly” is important!

  11. speed!

  12. Users don't read; they scan Users don't make optimal choices; they look for the first good-enough solution Users don't figure out how things work; they muddle through

  13. thinkroadside billboardrather thanDewan-e-Ghalib

  14. Design is Important! • 62% of shoppers gave up looking for the item they wanted to buy online (Zona Research) • 40% visitors don’t return to a site if their first visit was a -ive experience (Forrester Research) • 83% of users have left sites in frustration due to poor navigation, slowness (NetSmart Research) • Simple designs have greater impact: they can be understood immediately! (Mullet/Sano)

  15. Simplify, simplify,simplify!

  16. Designs should be consistent & predictable(unified)

  17. Elements of Website Design • Navigation scheme • Layout of information • Overall look and feel

  18. Website Navigation • The interface/controls that a Website provides to the user for accessing various parts of the Website • It probably is the most important aspect of the design of a Website

  19. A Few Navigation Design Heuristics • Put the main navigation on the left of the page • It should be ‘invisible’ until it is wanted • It should require an economy of action & time • It should remain consistent • Use text for navigation labels. If you must use icons, put a description underneath each icon

  20. Navigation Design Heuristics (contd.) • Labels should be clear, understandable • Labels should be legible • Do not play with standard browser buttons & features • Provide search capability

  21. 1- clicknavigation ?

  22. Now, let’s take a look ata few good designs …

  23. A good solution to a problem somehow looks nice&elegant

  24. Good designs assist the user in recovering from errors

  25. Assisting the User Recover from Errors • Location, post code mismatch • Credit card number errors • Phone numbers • Spelling errors

  26. A few constructive recommendations Let’s look at a few Web sites and see how we can improve their usability

  27. Enter Dragon’s Lair All rights reserved, 2002.

  28. WWW

  29. LOADING … RESTART SKIP Click here to go to the main page directly

  30. A few more Web design heuristics

  31. 1. Designing (arranging) Display Elements

  32. Making Display Elements Legible • Elements must be large enough tobe processed visually • Elements must contrast sufficiently with their backgrounds

  33. Making Display Elements Legible • Related elements should be visuallygrouped through the use of space, color, or graphical boundaries • The relative levels of importance among elements in a display should be revealed graphically

  34. 2. Ensuring Text is Readable

  35. Use sans serif (e.g. Arial, Helvetica, Verdana) typefaces for display on screen • Display type intended for continuous reading at 10 to 14 points • Avoid the overuse of bold and italics • Avoid setting type in all caps

More Related