Effective Web Design


Published on

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Effective Web Design

  1. 1. By Beth Spencer Effective Web Design
  2. 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. Krug’s usability workshops cost $15,000, not including travel expenses.
  3. 3. Krug’s questions visitors should never have to ask <ul><li>Where am I? </li></ul><ul><li>Where do I start? </li></ul><ul><li>Where did they put _______? </li></ul><ul><li>What are the most important things on this page? </li></ul><ul><li>Why did they call it that? </li></ul>
  4. 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. 5. Where am I? <ul><li>There are several ways to let visitors know where they are on a website: </li></ul><ul><ul><li>Pointers </li></ul></ul><ul><ul><li>Text color change </li></ul></ul><ul><ul><li>Bold text </li></ul></ul><ul><ul><li>Change in button color </li></ul></ul>
  6. 6. Where did they put _____? The word “official” is seems invisible since it is white on a mostly white background.
  7. 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. 8. How often do you use search boxes and on which sites? <ul><li>“ Often, I love search boxes, pubmed, pitchforkmedia, all of them I guess.”-Kathleen Biggs, VA medical center resident </li></ul><ul><li>“ 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 </li></ul><ul><li>“ I use them on Google and the Memphis website.” Megan Mayo, U of M nursing student </li></ul><ul><li>“ Often, on most sites I regularly use.”-Aaron Worcester, medical journalist. </li></ul>
  9. 9. What is the first thing you look for when viewing a new website? <ul><li>“ A search box.”-Ty Hamilton, high school student </li></ul><ul><li>“ The info that prompted me to seek the site out.”-Aaron Worcester, medical journalist </li></ul><ul><li>“ Design and information at the same time.” John Polzin, professional photographer </li></ul><ul><li>“ 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 </li></ul>
  10. 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 I’m looking for something, and I do that a lot.”-Ali Boone, U of M advertising major
  11. 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. 12. Make it obvious what’s clickable. When visitors don’t 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 don’t have to ask as many questions. Similarly, if the road signs have directions on them, drivers know where they are headed .
  13. 13. Bad Terrible navigation The navigation tools are splattered across the screen. They should be vertical or horizontal, never this way.
  14. 14. Effective navigation Navigation always works best top-horizontal or left-vertical.
  15. 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. 16. Tab navigation The Commercial Appeal’s tab navigation shows users other pages within each tab. My Fox Memphis uses this technique as well.
  17. 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 site’s 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. CNN’s color-coded navigation bar is much more simple and user-friendly.
  18. 18. What do you think about drop-down menus? <ul><li>“ They are confusing.”-Sara Patterson, U of M internet journalism major </li></ul><ul><li>“ I don’t really pay a lot of attention to them.”-Ali Boone, U of M advertising major </li></ul><ul><li>“ As long as they work properly, I think they are useful.”-Sarah Gill, PR Coordinator </li></ul><ul><li>“ They are annoying.”-Megan Miller, U of M Spanish major </li></ul>
  19. 19. Drop-down menus MSNBC’s drop-down menus have too many choices, and they would be difficult to scan.
  20. 20. Most important: readability, consistency or simplicity? <ul><li>Six interviewees said they consider readability to be the most important feature of web design. </li></ul><ul><li>Seven said simplicity was the most important. </li></ul><ul><li>One considered consistency to be the most important feature of web design. </li></ul>
  21. 21. Text color contrast The poor color contrast makes reading the categories difficult.
  22. 22. Text color contrast The text color was later changed to grey, which is a tiny improvement.
  23. 23. How much time do you spend on the internet? <ul><li>Combined, they spend an average of 2.5 hours per day using the internet. </li></ul><ul><li>Five hours was the most hours spent (photographer) </li></ul><ul><li>1.5 hours was the minimum amount spent on the internet (U of M Spanish major) </li></ul>
  24. 24. What is your primary use of the web? <ul><li>Half of my interviewees mainly use the web for email </li></ul><ul><li>Social networking was the most popular answer, and according to the study, 6 out of 7 people use the web for that purpose. </li></ul><ul><li>News, shopping, sports, work and communication were all popular answers. </li></ul>
  25. 25. Most common mistakes new web designers make? <ul><li>“ They make the website too aesthetic and not functional enough.” Tim Bass, law student </li></ul><ul><li>“ Sometimes there’s too much stuff to load and pop-ups. I don’t want to get 900 pop-ups from clicking the wrong thing.”-Ty Hamilton, Central High School student </li></ul><ul><li>“ Aesthetics should not be neglected, but usability should be the primary focus, and sometimes it seems that sites are designed the other way around.”-Aaron Worcester, medical journalist </li></ul>
  26. 26. Pop-ups Too many pop-ups can send visitors clicking on the competitors’ sites.
  27. 27. Too much focus on aesthetics This magazine website site was designed for visual appeal, and users view each page by clicking the corner, as if they are reading a magazine. It may seem like a good idea in theory, but people do not read web pages that way.
  28. 28. What is the most important element of web usability? <ul><li>“ If it solves the problem or question fully and quick.”-John Polzin, professional photographer </li></ul><ul><li>“ Intuitive navigation.”-Sara Patterson, U of M internet journalism major </li></ul><ul><li>“ I like being able to easily read about a certain subject but also skip to a different subject quickly via a menu on the side of the web page.”-Bryan Shipman, MTSU computer engineering major </li></ul>
  29. 29. “ If it solves the problem or question fully and quick.” USA Today’s site is simple, has a search box and displays visual hierarchy.
  30. 30. How could designers make sites more user-friendly? <ul><li>“ More organization, more help features and search boxes.”-Kathleen Biggs, VA Medical Center resident </li></ul><ul><li>“ Know &quot;who, what, why, and how many times&quot; the basics of the project and carry it through the design.”-John Polzin, professional photographer </li></ul><ul><li>“ Keep it simple.”-William Pentecost, optometrist </li></ul><ul><li>“ Sites are more user-friendly when information is tucked away and simplicity is the focal point.”-John Campbell, financial analyst </li></ul>