Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Content as Usability


Published on

Slides from the December 2017 WordCamp US presentation on the 30 Questions exercise for discovering how usable your web content is.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web Content as Usability

  1. 1. Web Content as Usability
  2. 2. What do we mean when we say, “This is a good web site”? 2 Web Content as Usability
  3. 3. When we see a site the first time and say it’s good, what we mean is that it’s attractive. 3 Web Content as Usability
  4. 4. The problem: Your design is not your content. 4 Web Content as Usability
  5. 5. Our Preoccupation with Design Reasons We are visual creatures. We spend millions of dollars annually on architecture, visual arts, home furnishings and fashion. 5 Web Content as Usability 1 2 3
  6. 6. Our Preoccupation with Design Reasons Web development is so abstract and difficult to communicate that we latch onto design elements as the closest things to tangible objects we can understand and control. 6 Web Content as Usability 1 2 3
  7. 7. Our Preoccupation with Design Reasons The visual aspect of the web is fun. It’s 16 million crayons and an unlimited paper supply. Content production — especially writing content — is tedious. It’s work, not play. 7 Web Content as Usability 1 2 3
  8. 8. So how do we stop design from influencing our judgment? 8 Web Content as Usability
  9. 9. 30 Questions 9 Web Content as Usability
  10. 10. 30 Questions In November 2013, Rutgers-Camden was planning for a redesign of its main site — not for a specific purpose, but because it was “time to redesign”. Camden staff members involved in web and digital content were asked for ideas about what should be accomplished and how to proceed. 10 Web Content as Usability
  11. 11. 11
  12. 12. 30 Questions The consensus was that it was one of the most beautiful and polished sites ever created for Rutgers, yet nobody was truly happy with it. It didn’t “feel” right. To better understand the site and try to identify what needed work, several staff members participated in the 30 Questions exercise. 12 Web Content as Usability
  13. 13. 30 Questions: How it Works For each question, start from the site’s home page and try to find the information using any search or navigation tools it offers. 13 Web Content as Usability
  14. 14. 30 Questions: Can You Find … 1. The phone number for campus security. 2. A map or directions to the cashier’s office. 3. The login page for the university’s online learning system. 4. Additional admissions requirements for international students. 5. The bookstore (to buy required textbook for freshman English). 14 Web Content as Usability
  15. 15. 30 Questions: Can You Find … 6. Information on facilities rental. 7. Campus events for one week from today. 8. Graduate program tuition and fee information. 9. The next deadline for scholarship applications. 10. A list of student organizations, with descriptions, membership requirements and contact information. 15 Web Content as Usability
  16. 16. 30 Questions: Can You Find … 11. The student handbook. 12. Contact information for the IT help desk. 13. The most recent issue of the student newspaper. 14. Child-care services on campus, with hours and rates. 15. The office location, phone number and email address of a biology professor (pick one before starting). 16 Web Content as Usability
  17. 17. 30 Questions: Can You Find … 16. Campus parking guidelines. 17. Information on where to order a transcript. 18. The current continuing education course offerings. 19. Contact information and guidelines for accessibility services. 20. The score from the most recent football/basketball/baseball game. 17 Web Content as Usability
  18. 18. 30 Questions: Can You Find … 21. The login page for university email. 22. Information on where to take the SAT. 23. A list, with descriptions, of athletics/PE facilities. 24. The catalog of current courses for the history program. 25. A list of job opportunities on campus for students, with application instructions. 18 Web Content as Usability
  19. 19. 30 Questions: Can You Find … 26. Current library hours. 27. This week’s menu for the dining hall. 28. Current (non-student) job openings on campus. 29. The catalog of current courses for the history program. 30. The university’s online application, with admissions requirements. 19 Web Content as Usability
  20. 20. 30 Questions: Record Your Results First, record your ability to find the information. ✦ Did you discover what you were looking for? How long did it take? If not, how long did you look before giving up? ✦ How many clicks/searches did it take to get there? ✦ Once you reached your destination, were you able to return easily to the home page? 20 Web Content as Usability
  21. 21. 30 Questions: Record Your Results Next, record the quality of the information you found. ✦ Was the information complete? ✦ Did it appear to be current and accurate? ✦ Was it easy to understand? 21 Web Content as Usability
  22. 22. 30 Questions: Record Your Results Jot down any incidental details such as obvious accessibility issues, broken links, content errors or related content that would have been useful. 22 Web Content as Usability
  23. 23. 30 Questions: Get Outside Help For fresh viewpoints I invited Facebook friends to help with the project. Each volunteer got five of the questions. The volunteers ranged in age from mid-20s to nearly 70, and their experience with the web was equally diverse. None was associated with Rutgers or familiar with the Camden site. 23 Web Content as Usability
  24. 24. 30 Questions: the Findings 24 Web Content as Usability
  25. 25. 23.3% 23.3% 20.0% 16.7% 6.7% 10.0% <30 seconds 30-60 seconds 1-1.5 minutes 1.5-2 minutes 2-2.5 minutes >2.5 minutes Performance on Tasks, in Seconds 25 Web Content as Usability
  26. 26. 23.3% 23.3% 53.3% <30 seconds 30-60 seconds >1 minute *acceptable performance levels Performance on Tasks, in Seconds* 26 Web Content as Usability
  27. 27. 10.0% 13.3% 13.3% 20.0% 13.3% 30.0% 0-1 clicks 2 clicks 3 clicks 4 clicks >4 clicks not found Performance on Tasks, in Clicks 27 Web Content as Usability
  28. 28. *acceptable performance levels 36.7% 33.3% 30.0% 0-3 clicks >3 clicks not found Performance on Tasks, in Clicks* 28 Web Content as Usability
  29. 29. 30 Questions: the Findings Finding for: information on where to take the SAT (3:23) The participant finally gave up. She reached the admissions site, which stated only that scores are needed for admission. It provided no information about taking these tests or links to college testing services. Finding for: campus parking guidelines (1:41) It took four clicks to reach this information. The participant wasn’t clear as to which lots were approved for which drivers. The map was too small to read. 29 Web Content as Usability
  30. 30. 30 Questions: the Findings Finding for: a map or directions to the cashier’s office (1:04) It took three clicks to reach the cashier’s page. The participant found the address but no map or directions. Finding for: current continuing education course offerings (2:24) Nothing useful was found on the main site. A search on "Camden continuing education" led to the Continuing Education site in New Brunswick. It contained no listings for Camden. The participant pursued several dead ends. 30 Web Content as Usability
  31. 31. 30 Questions: the Findings Finding for: graduate program tuition and fee information (:51) Nothing useful was found on the Graduate Admissions page. From the main menu she found a Net Price Calculator tool, but it takes 10-15 minutes to complete and requires access to various financial documents she did not have in hand. Finding for: information on facilities rental or reservations (2:32) It took five clicks to reach this information on the Events Office page. To get to this page, the participant passed through the Conference Services page, described as “useless”. 31 Web Content as Usability
  32. 32. 30 Questions: the Findings Finding for: additional admissions requirements for international students (1:34) It took five clicks to reach this information on an Application Process page. At one point the participant fell into a loop sending her back to the Apply Now page. Finding for: the next deadline for scholarship applications (:50) The information was found in two clicks, but it provided information for first-year and transfer students only. There was no comprehensive list and description of scholarships. 32 Web Content as Usability
  33. 33. 30 Questions: the Findings Finding for: the most recent issue of the student newspaper (1:02) Nothing was found on the main site or under student organizations. A search on “Camden student newspaper” turned up the Gleaner as the first result, but it was a dead site. She learned later that the newspaper had moved to Tumblr and didn’t notify anyone. Finding for: a list, with descriptions, of athletics/PE facilities (:25) The participant found the page in four clicks, but it contained no list or descriptions. The page had an image rotation and a story on the facility opening dated four years previously. 33 Web Content as Usability
  34. 34. 30 Questions: the Findings Finding for: the catalog of current courses for the history program (2:13) It took nine clicks to reach this information. The participant described the entire Brochures & Catalogs section as “a mess”. Finding for: this week’s menu for the dining hall (:59) The page containing menus was three clicks from the home page. The menus themselves were PDF files buried on the page. No nutrition information was available. 34 Web Content as Usability
  35. 35. 30 Questions: the Findings Finding for: the login page for university email (2:34) Nothing of use was found on the main site. A search on "email" turned up six possibilities in the top seven results with no clear indicator which system was which. None were ScarletMail. Finding for: the student handbook (1:37) Nothing was found on the main site. A search of "Camden student handbook" turned up only a nursing handbook. Is there no university/campus general student handbook? 35 Web Content as Usability
  36. 36. Dysfunction in your organization will manifest itself as dysfunction on your website. 36 Web Content as Usability
  37. 37. 30 Questions: Surprise Findings! Wasted space: an enormous amount of the Camden site’s prime screen real estate was dedicated to content irrelevant to the tasks: ✦ Civic Engagement ✦ Our Vision ✦ Global Rutgers-Camden ✦ Faculty & Research ✦ Office of the Chancellor ✦ Custom Services for You 37 Web Content as Usability
  38. 38. 30 Questions: Surprise Findings! We discovered two major problems related to the search function: 1. It defaulted to a people search. A visitor had to manually switch the search type to web search — which took several tries to figure out. 2. The search results page disabled the browser’s Back button. The only way to get back to the Camden home page was to retype the URL. 38 Web Content as Usability
  39. 39. Adapting 30 Questions 39 Web Content as Usability
  40. 40. Adapting 30 Questions Start with Journalism 101 questions: the 5 W’s and the H: ✦ Who ✦ What ✦ When ✦ Where ✦ Why ✦ How 40 Web Content as Usability
  41. 41. Adapting 30 Questions As you formulate questions, make them task-oriented. Instead of asking, “Are the operating hours on the site?” try, “How late are you open tonight?” 41 Web Content as Usability
  42. 42. Adapting 30 Questions Look at comparable sites for ideas. Don’t get hung up focusing solely on competitors in the immediate area. If the site is for a bakery in Flagstaff, Arizona, see what the bakeries are doing in Springfield, Oregon, or Sarasota, Florida. 42 Web Content as Usability
  43. 43. Adapting 30 Questions Ask the people in the know: receptionists, administrative assistants, interns, problem solvers. What do they get the most calls, emails, complaints, inquiries about? 43 Web Content as Usability
  44. 44. Adapting 30 Questions If you can interview front-line employees, pull them together in informal small groups for feedback, away from managers. Follow up with an alternative research method such as an online survey. Extroverts will talk first and dominate groups. Introverts will want to think first and answer privately in their own time. 44 Web Content as Usability
  45. 45. Adapting 30 Questions If there’s a support email or a help desk, can you get a summary of the requests they’ve fielded in the past month? Six months? 45 Web Content as Usability
  46. 46. Adapting 30 Questions If you’re working with an existing site, dig deep into Google Analytics for a clearer idea of who the visitors are and how they behave. A high bounce rate at an unexpected point may indicate they’re having trouble with the site. 46 Web Content as Usability
  47. 47. Adapting 30 Questions If you’re working with an existing WordPress site, the Relevanssi plugin is helpful because it logs the search terms used on the site. 47 Web Content as Usability
  48. 48. Adapting 30 Questions If you want to strengthen your skills in these areas, try auditing an Intro to News Writing course, which will help you organize facts and identify holes in information. An Interviewing course will help you in almost any field where you need to interact with clients and obtain useful information. 48 Web Content as Usability
  49. 49. Adapting 30 Questions Check whether there’s a content strategy Meetup in your area. There’s one in Philly! 49 Web Content as Usability
  50. 50. Adapting 30 Questions A related presentation from Content Strategy Philly: How to Be Leslie Knope for Content in a Website Redesign. Slides website-redesign Video 50 Web Content as Usability
  51. 51. Susan Walker @susanwrotethis Thank You