1. Making Your Website
Easier to Use: A
Usability Testing Case
StudyJason Samuels, IT director
Allison Wickler, web content
manager

2. National Council on
Family Relations
2
• Established 1938
• Publisher of the Journal of
Marriage and Family
• 3,400 members

3. NCFR Website - 1938
3

4. NCFR Website - 2000
• Multicolor HTML tables!
• Provided updates on the
organization’s major
program areas
• Provided online registration
for membership renewal
and conference registration
4

5. NCFR Website - 2006
• Look and feel of the
website had evolved
• Lots more information
posted about all aspects of
the organization
• Still just a brochure website
(though a large one)
5

6. NCFR Website - 2011
• Built on Drupal (Content
Management System)
• New features include:
– Professional Resource
Library
– Degree programs guide
– Conference schedule builder
– News feed & event calendar
– Blogs
6

7. NCFR Website - 2011
7
The 2011 NCFR website was
intended to move our
organization’s web presence from
being a brochure website to being
a go-to place for resources and
information about the field that we
serve.

8. NCFR Website
8
• Launched in February 2011 with 3,500
nodes of content
– (~ 1,500 of these were faculty listings for the
degree programs guide)
• By December this number had more than
doubled

9. April 2012 website survey
9
• What do you like most about the NCFR
website?
– quantity and quality of resources
• What do you dislike most about the NCFR
website?
– trouble finding specific resources
– difficult to navigate
• What features or improvements would you
like?
– clearer organization of the content
– greater ease of use

10. 10
Time for some usability
testing

11. Optimal Workshop
• Recommended by our web
developers
• Offers 3 testing products
– OptimalSort (card sorting)
– Treejack (sitemap testing)
– Chalkmark (click tracking)
• Cost is $109 per month per
service (unlimited use)
11

12. What is sitemap testing?
• Strips out all layout and
graphics, only shows your
menu choices
• Presents the test taker with
a series of questions, asks
them where they would
navigate to find them
• Simple as that
12

13. How to conduct a sitemap
test
13
1. Audit your web content
2. Produce a draft of the new sitemap
3. Setup the testing software
4. Invite participants and test
5. Analyze results
6. Revise sitemap
7. Test again
8. Analyze, revise, and test one more time
9. Implement!

14. Web content audit
• Spreadsheet
detailing your site
content
• 1st column:
numbering system
• 2nd column: title of
the page or section
• 3rd column: URL
14Template adapted from Content Strategy for the Web, by Kristina
Halvorson

15. Draft a new sitemap
• Add a column for
the new location
• Can hide URL
column if that
helps
• Re-arrange items
• Pro tip: use a
separate column
for each menu
level
15Template adapted from Content Strategy for the Web, by Kristina
Halvorson

16. Setup the testing software
16
• Can specify when the survey closes (date or
maximum number of responses reached)
• Paste in your sitemap tree
– If each item is in a different column, the
software will recognize this and structure it
accordingly
• Add tasks for users to complete, and
choose the “correct” answers for each
– Keep it reasonably short, 20 tasks = ~10
minutes
• Customize welcome message, instructions,
look, colors and post-test questions

17. Invite participants
17
• Recruitment - e-news announcements,
discussion listservs, and personal appeals
brought in ~160 volunteers
• Notification – everyone got a notice when
the test opened, and a reminder a couple
days before it closed
• Incentive – everyone who completed the
test was entered into a drawing for a $50
Amazon gift card. Got ~110 responses per
round.

18. 18
Analyzing Results:
It’s all about the Pietrees

19. Pietree example # 1
19

20. Pietree example # 1
20

21. Pietree example # 1
21
• Result: 91% Direct Success, 6% Indirect
Success, 3% Failure
• Analysis: Erika believed that this question
tested successfully, and we agree.
• Testing Action: Remove question from
testing round 2.
• Recommendations: Place a "Join NCFR"
promotion tile on the "About Us" page, and
a "Join Now" button on the membership
types page to capture the segment of
people who went to those sections looking
for this item.

22. Pietree example # 2
22

23. Pietree example # 2
23

24. Pietree example # 2
24
• Result: 4% Direct Success, 8% Indirect
Success, 88% Failure
• Analysis: I think most of the answers are
legitimately good answers. I'm not sure why
"Family newswire" is the only valid answer listed.
• Testing Action: Re-work this question and test
again.
• Recommendations: The intent was to get
people to a section where news from the field
(not from NCFR is posted). The question was not
well-phrased to be clear, but the menu item may
also be better off with a clearer title.

25. Big lessons
25
• Based on the answer patterns we learned
some big lessons
– Our users look for resources everywhere on our
website, so we did more to prioritize them
– Nomenclature is terribly important. Avoid
ambiguous menu titles, and be careful not to
name multiple items in a way that seems like
they lead to the same thing
– Sometimes there’s just going to be a split. Go
with the one that got the bigger share, but make
a note to link there from other high-percentage
choices

26. Iterate
26
• Revise the sitemap based on what you
learned from the test results
• Replace questions that tested well
• Rework questions that tested poorly
• Each test completed in a 5-day window
• 4-5 day turnaround to the next test
• Completed 3 testing rounds in a month

27. 27
Deep breath:
Take your time, do it right

28. Take your time, do it right
28
• In our case the web developers needed
time to design and build a revised layout
• Allison worked on the spreadsheet for
months, tweaking titles and sitemap
structure while using the test results as
her guide

29. 29
Ready, set, launch!

30. Launch!
30
• Because of the extent of our changes, all
of the work was done on a staging site
• Two-week content freeze: refrain from
updating or double-key in staging
• On launch day our developers copied the
staging website over the live site

31. NCFR Website - 2013
• Cleaner design
• Fly-out menus assist
navigation
• Homepage highlights
enterprise areas
• Resources throughout, but
also consolidated in library
31

32. 32
Questions?