effective web design

Download Effective Web Design

Post on 11-Feb-2015




1 download

Embed Size (px)




  • 1. By Beth Spencer Effective Web Design
  • 2. Steve Krug Steve Krug is a website usability and interface design expert. His consulting firm, Advanced Common Sense, has tested a variety of sites including Apple, Amazon, Barnes and Noble and Netscape. Reviews for existing sites range from $3,000-8,000 for a conference call consultation. Krugs usability workshops cost $15,000, not including travel expenses.
  • 3. Krugs questions visitors should never have to ask
    • Where am I?
    • Where do I start?
    • Where did they put _______?
    • What are the most important things on this page?
    • Why did they call it that?
  • 4. What are the most important things on this site? We know what the most important stories are, even though the headlines are written in Arabic, thanks to visual hierarchy.
  • 5. Where am I?
    • There are several ways to let visitors know where they are on a website:
      • Pointers
      • Text color change
      • Bold text
      • Change in button color
  • 6. Where did they put _____? The word official is seems invisible since it is white on a mostly white background.
  • 7. Where do I start? Having two buttons could cause confusion and users may question which button to use. It would be better with only the search button. A simple button like this one works best. Effective web design will clearly convey where to begin to its visitors. The fewer words, the better. Useless words can cause confusion and frustrate users. The words search and go are the most clear ones to use with search buttons, according to Krug. Most people are fans of the search box, and they start there.
  • 8. How often do you use search boxes and on which sites?
    • Often, I love search boxes, pubmed, pitchforkmedia, all of them I guess.-Kathleen Biggs, VA medical center resident
    • I use search boxes on all sites that are run by a good search engine. It reduces search time when the engine is powerful.-John Campbell, financial analyst
    • I use them on Google and the Memphis website. Megan Mayo, U of M nursing student
    • Often, on most sites I regularly use.-Aaron Worcester, medical journalist.
  • 9. What is the first thing you look for when viewing a new website?
    • A search box.-Ty Hamilton, high school student
    • The info that prompted me to seek the site out.-Aaron Worcester, medical journalist
    • Design and information at the same time. John Polzin, professional photographer
    • Usually a menu, (with links to Home, news, photos) to see what type/how many pages the site has.-Megan Miller, U of M Spanish major
  • 10. Most user-friendly website Search capabilities. It kind of explains why Google is all powerful. Ease and time in finding the right information is almost as important as the information itself.-John Campbell, financial analyst I use Google for everything.-Sarah Gill, PR coordinator Normally I just type in stuff in the Google search box if Im looking for something, and I do that a lot.-Ali Boone, U of M advertising major
  • 11. Unclear navigation Navigation should be either top horizontal or left vertical. Those are the standard locations, and when we visit sites that do not follow that guideline, it causes confusion. Besides guiding visitors around the site, navigation also reveals the content of the site. Each link should have a short description about where it will take them. This home page is a good example of bad navigation tools. Not only are they in an odd location, visitors have no idea what will happen when their click one of the six choices.
  • 12. Make it obvious whats clickable. When visitors dont know what they can or cannot click, it is as if they are driving and all of the road signs are blank, according to Vincent Flanders, web usability guru. If visitors know what they can click, they dont have to ask as many questions. Similarly, if the road signs have directions on them, drivers know where they are headed .
  • 13. Bad Terrible navigation The navigation tools are splattered across the screen. They should be vertical or horizontal, never this way.
  • 14. Effective navigation Navigation always works best top-horizontal or left-vertical.
  • 15. Tab Navigation Steve Krug is a fan of tab navigation, because it is obvious what they are for. They also help divide the site into sections, while indicating where the visitor is in the site at all times. Yahoo.com uses tabs to separate different kinds of news stories.
  • 16. Tab navigation The Commercial Appeals tab navigation shows users other pages within each tab. My Fox Memphis uses this technique as well.
  • 17. Drop-down menus Quite a few news websites use drop-down menus. Users have to seek out drop-down menus, which can limit the sites usability. The menus can be tricky for users, since they disappear when the mouse moves. Saving space on the website is the only benefit from using drop-down menus. The Washington Post uses drop-down menus. CNNs color-coded navigation bar is much more simple and user-friendly.
  • 18. What do you think about drop-down menus?
    • They are confusing.-Sara Patterson, U of M internet journalism major
    • I dont really pay a lot of attention to them.-Ali Boone, U of M advertising major
    • As long as they work properly, I think they are useful.-Sarah Gill, PR Coordinator
    • They are annoying.-Megan Miller, U of M Spanish major
  • 19. Drop-down menus MSNBCs drop-down menus have too many choices, and they would be difficult to scan.
  • 20. Most important: readability, consistency or simplicity?
    • Six interviewees said they consider readability to be the most important feature of web design.
    • Seven said simplicity was the most important.
    • One considered consistency to be the most important feature of web design.
  • 21. Text color contrast The poor color contrast makes reading the categories difficult.
  • 22. Text color contrast The text color was later changed to grey, which is a tiny improvement.
  • 23. How much time do you spend on the internet?
    • Combined, they spend an average of 2.5 hours per day using the internet.
    • Five hours was the most hours spent (photographer)
    • 1.5 hours was the minimum amount spent on the internet (U of M Spanish major)
  • 24. What is your primary use of the web?
    • Half of my interviewees mainly use the w