Successfully reported this slideshow.
Your SlideShare is downloading. ×

Web Content as Usability

Ad

Web Content as Usability

Ad

What do we mean when we say,
“This is a good web site”?
2
Web Content as Usability

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 51 Ad
1 of 51 Ad
Advertisement

More Related Content

Advertisement

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 https://www.slideshare.net/nchess/be-the-leslie-knope-for-content-in-a- website-redesign Video https://www.youtube.com/watch?v=pUUy4zg5b5I 50 Web Content as Usability
  51. 51. Susan Walker susanwrotethis.com @susanwrotethis Thank You

Editor's Notes

  • If we’re seeing a site for the first time and say this, what we mean is that it’s visually appealing to us. There’s no way in five or 10 seconds of looking at a site that you can make an informed judgment about whether a site is useful, if it has good content and it functions well. What we’re doing is the definition of judging a book by its cover. And we continue to be influenced by visual elements of a site when we’re trying to assess it.
  • The site’s long-term success depends on whether visitors find it useful, which is driven by the content, not the design. We need to focus on what’s essential to success.
  • If we had evolved without vision as we know it, would we have fashion? Would it be about how clothing feels, smells and sounds? Would we wear clothing at all? And if we assembled a development team of people who had been blind since birth and told them to create the best site possible, what would they come up with?
  • We tend to focus on elements such as fonts, colors, image placement, maybe the number of columns, as things we understand and communicate. This is particularly true of our clients.
  • How many people, given the choice between drawing a picture and writing an essay, would elect to write? The adult coloring book craze suggests that we find a particular pleasure in visuals.
  • In order to assess a site effectively, we need a way to remove the CSS, images from the equation without physically removing them, which would change the overall experience of the site.
  • I won’t go into the origin of 30 Questions in this presentation. It evolved from a previous job. I compiled the questions into a single assessment tool for Rutgers in 2013.
  • When the university decided to redesign, the administrator responsible for the site sought input as to what we should do.
  • This is what the site looked like at the time.
  • We agreed that we liked the look, but we didn’t really like the site beyond that and that it didn’t seem useful. Several of us said we never really used the site ourselves.
  • You can use menus, the search feature, any content on the page that looks promising – whatever the home page has to offer.
  • The questions cover most of the functions common to most colleges and universities.
  • When I did this exercise, I used the stopwatch on my phone to keep track of my time and put the information I gathered into a spreadsheet. It took more than 5 1/2 hours to complete.
  • Is it complete? Is it correct? Is it timely? Is it relevant? Is it easy to understand?
  • I also kept track of the path I took to get to my destination (assuming I found the information I was looking for).
  • If you do this, tell them up front this isn’t your work and if they find something to criticize, they should share it freely. Make sure they’re not afraid of hurting your feelings.
  • The people who completed these tasks didn’t compile the results into a single report because it was never meant to be a formal study, just an assessment tool. But when we met again to compare notes, we found our results were very much alike. I kept my documentation, and the findings presented here are based on that.
  • We’ll start with how long it took to find things. For myself it ranged from just under six seconds to more than 2 ½ minutes. The longest time recorded was 8 ¼ minutes looking for something before the volunteer gave up.
  • It’s hard to find guidelines for how long it takes to find information on a site. One resource suggested 15 seconds, another 30 seconds. They all seem to agree that more than a minute is a failure. By that standard we were failing on more than half of the tasks.
  • This is the tasks measured in clicks or steps to the destination. About 10 percent of the information could be found on or near the home page.
  • If more than three clicks is considered unacceptable, then the distance to one-third of the content is too far, and another 30 percent of the tasks could not be accomplished at all.
  • I’ve included a little about 14 tasks that raised the biggest red flags, though I’ll be talking about only one.
  • The one I’ll talk about is the login page for university email. Back in fall 2013, the university was running many different email systems, of which at least five or six were being used widely enough in Camden that we had to provide links and information. This made linking to a single login impossible. Even the OIT-Camden site had a webmail page that didn’t go directly to a login; it contained an essay describing who should use which system and listed links to each of them.

    Rutgers has since phased out the redundant systems. It has now has two: one for students and another for employees.


    If this sounds exceptionally dysfunctional, it’s actually pretty typical for higher education. The larger and more decentralized a university is, the more likely it is to have these sorts of problems.
  • The reason I touched on the email situation is because it illustrates what I call Walker’s Principle, which is: Dysfunction in your organization will manifest itself as dysfunction on your website. It may happen in any number of ways. For instance, if an organization has morale problems leading to high turnover, this will affect its ability to keep web content up to date.
  • The exercise yielded a number of unexpected discoveries. As you do this exercise, you find the visual elements become almost invisible to you except as they help accomplish a task. Certain areas will “light up” as you visit them over and over again, and others will become dark spots of content of no great relevance. That’s not to say the content is unimportant or should be removed from the site, only that it takes up an amount of screen real estate and prominence that’s not proportional to their overall usefulness.
  • These may have been the biggest findings of all because they profoundly impacted how all of us interacted with the site and created a frustration level bordering on fury. I implemented workarounds for both these issues on the WordPress sites. The main Camden site (which is in Drupal) adopted them later.

    I’d like to say that all of the issues have long since been resolved, but since many of them are problems with a central site in New Brunswick, and not the Camden site, we haven’t been able to fix everything. But we’ve made progress, and the exercise has affected how we think about all our sites.
  • So, how do you create your own 30 questions? And does it have to be 30? No, it doesn’t, but if you have fewer than about 15 and the site doesn’t have an exceptionally narrow focus, you’re probably shortchanging yourself.
  • Who are you? What do you offer? When are you open? Where are you located? Why would people be interested in what you have to offer? How do we contact you? These are all examples of basic questions.
  • Approach the formulation from the user’s point of view.
  • One of the mistakes universities make regularly is modeling themselves on their neighbors/competitors. Instead of recycling each other’s bad ideas, we need ask, “Who is doing this well and how can we emulate them?”
  • You want to track down the people who are dealing with customers directly, either face-to-face or by phone or online. Find out from them what the customers have to say, both negative and positive.
  • If you let management tell you this information, you won’t get the data. You’ll get their assumptions about the data. If they’re the source of the dysfunction, they may also be motivated to keep problems hidden.
  • I relied heavily on the messages that came in through the OIT-Camden help desk to rebuild its home page around the most common support requests. The most common requests for help were variations on “I lost my password; what do I do?”, so I made sure that information was directly available from the home page.
  • We found out the school of Arts and Sciences fields many questions about the nursing program. The school set up a page whose sole purpose was to to redirect to the School of Nursing so visitors will have found something useful, even though they’re looking in the wrong place.
  • These courses aren’t as much about writing as they are about gathering information, finding holes, organizing it and presenting it in a clear and concise way.
  • Content strategy groups don’t always focus on this topic, but they frequently have useful presentations that can expand your expertise.
  • If you’re looking for more steps to take beyond the 30 Questions, I highly recommend this talk from Content Strategy Philly. It begins with many of the ideas I’ve presented here and takes them a couple of stages beyond that.
  • Photo credits:

    Eiffel Tower by mrdanielweir, https://www.flickr.com/photos/15134271@N03/8303848410/
    License: (CC BY-NC 2.0), https://creativecommons.org/licenses/by-nc/2.0/

    Bird of Paradise by origami_madness, https://www.flickr.com/photos/ahudson/4192149430/in/photolist-7orRYs-dDj2mw-Su6h4v-rgSy83-5RsiAa-fEAKhU-QraomN-7EyuRp-pcswit-parjPw
    License: (CC BY-NC 2.0), https://creativecommons.org/licenses/by-nc/2.0/

    Crayola Study by Dion, https://www.flickr.com/photos/noodlenoodle/4759710622/in/photolist-8fAL9f-7Ht1Uk-8fxtMK-7JrXQe-7D6p3R-7D6s98-5qM3te-7YWzsq-7Da5km-55pRrT-7JrX38-2o1qWa-AKGyw-c7Sd49-awq6Fi-obyQgB-6mXtgm-AHjN8S-cUWzqd-nRmLgs-BJwNG-cUXrAs-42KPv-ot1Ziw-c7Ryaw-obxGdC-c7Ro4E-7JrYu2-2HgHzm-2HgH5Q-8mAigP-or1B8A-osLeLt-2Hcopn-osQqQN-ot21JN-2HgJ7h-2HcoPk-zQNnSD-7h285q-rQJj9t-7ztVKm-6JzHui-6mXsAb-c7RrEG-9kTsyQ-c7SFy9-bEuh3v-8mDqnd-akgr8H
    License: (CC BY-SA 2.0), https://creativecommons.org/licenses/by-sa/2.0/

×