# Presentation: 871754

## Lisa Zolly
USGS Center for Biological Informatics
April 17th, 2001

- Lisa Zolly
- USGS Center for Biological Informatics
- April 17th, 2001

**The Role of Usability Testing in Web Site Design: The National Biological Information Infrastructure’s Experience**

##    The NBII is an electronic gateway to biological data and information maintained by federal, state, and local  government agencies; private sector                 organizations; and other partners                   around the nation and the world.

***What is the NBII ?****** ***

## Challenges for Design of the NBII

***Challenges for Design of the NBII***

**NBII is a **_**distributed**_** network**

***Multiple developers + multiple formats = ***_***potential***_*** usability problems!***

## Challenges for Design of the NBII

***Challenges for Design of the NBII***

**Multiple audiences**
**Like many other federal Web sites, the NBII’s Web site has a wide variety of users with different information needs**
**Researchers**
**Natural resources managers**
**Policymakers**
**Educators**
**Students**
**Interested public citizens**

**Large amount of content**
**Management and organization are ongoing issues**

**Notes:**
Our users have different vocabularies – different levels of understanding – looking to site for different things, or different details
Mission of being a gateway to resources in this field makes large amount of content inescapable

## What is Usability?

**Usability**
**Site architecture**
**Site interface**
**“****It is not how much space there is, but rather how it is used.  It is not how much information there is, but rather how effectively it is organized.”     -Edward Tufte**

**Notes:**
Site architecture – grouping things to add value, convey similarities, make meaningful relationships
Site interface – how you use space – how you fill space – how you move around in space

## How Do You Measure It?

***How Do You Measure It?***

**Heuristics**
**application of accepted standards**
**Pros:  widely available; inexpensive if self-applied**
**Cons:  more generalized**

**Testing**
**-observing actual users**
**-Pros: concrete data; specific to your site**
**-Cons:  can be expensive; investment of time & resources**

**Combination**
**-****heuristics can correct obvious flaws**
**-follow-up testing can focus on specific tasks**

**Notes:**
Examples of heuristics:  fonts generally recognized as more legible for Web viewing; keeping default colors for active/visited/unvisited links, because most users recognize meaning of these colors; navigation for your pages should generally reside on the left side or top of the pages...
*Most heuristics, best practices, books & pubs on usability are biased toward e-commerce sites.  There’s very little out there to target government / non-profit sites who may have very large and audiences with different information needs from the site.
*We chose the combination-blended approach to usability.

## Original NBII Homepage

***Original NBII Homepage***

**Design of site doesn’t reflect mission**

**Navigation not persistent; poor labeling**

**Major tools & content available **_**only**_** on homepage**

**Overlapping thematic areas**

**Notes:**
 * navigation not persistent
Major content available only through home page
* labeling not descriptive / intuitive
*structure / groupings poor
* design outdated, didn’t really reflect mission of program (“Variations on a Rectangle”)

## Initial Redesign

***Initial Redesign***

**Complete “renovation” of site Jan-Jun 2000**
**New “look and feel” to better reflect mission**
**New interface features to provide feedback**
**New architecture to accommodate major content   expansion and inadequate structure**

**Five-month project**
**Core team of five members part-time**

**Accomplished through heuristic analysis**
**Redesign Team had usability experience**
**Former site was completely reworked and expanded**
** ****Usability testing would not have been beneficial at this point; would have focused on things **_**already**_** identified as problematic**

## Homepage after first redesign

***Homepage after first redesign***

**Launched July 2000**
**New interface**
**Revamped architecture**

**Graphics convey mission of site**
**Persistent navigation**
**User feedback for constant positioning**
**Fresh content updates to homepage**

**Notes:**
NBII Science Features intended to highlight important goings-on on both our site, and with our partners.

## How successfully does the site enable users of various backgrounds, and with different information needs, to find answers to their questions about natural resources?

***Why Test After Initial Redesign?***

**How successfully does the site enable users of various backgrounds, and with different information needs, to find answers to their questions about natural resources?**

## Setting Up the Study

***Setting Up the Study***

**Facility**
**	****- Bureau of Labor Statistics’ Usability Lab**
**	****- Reserved 2 months in advance**
**	****- Lab use free to federal agencies**

**Initial design of test**
**	****- Formulating questions: specific functionalities to test**

**Consultation & Hiring of Usability Specialist**
**	****- ****Professional review of our testing procedures**
**	****- Impartial, third-party facilitator to administer test**
**	****- Authoritative review of findings**

**Notes:**
Consultant help with Testing Methodology, procedures, very valuable for FIRST TIME.  From now on, we feel we could probably do the testing ourselves.

## Setting Up the Study, cont’d.

***Setting Up the Study, cont’d.***

**Recruited participants**
**	****- Did this ourselves to save money**
**	****- Needed to recruit from various user constituencies**
**	****- Methods included: contacting DOI colleagues; posting ****	****to listservs; posting notices in local universities; ****	****posting on the Web site**
**	****- Time-intensive:  sorting of responses, phone ****	****interviews, scheduling took about a week**

**NBII Personnel Involved**
**	****- 3 people over 2 days to record observations on checklist, ****	****operate video-recording equipment, summarize results**

**Notes:**
This activity can add significantly to cost of study if contracted outside.  There are many means by which you can recruit.  Even people within your own agency whose day-to-day tasks don’t involve regular use of the Web site can be candidates.  You’re looking for someone with fresh eyes who might be reasonably expected to use your resource for some information need.

## The Test

***The Test***

**14 participants recruited; 12 showed up for test**
**Each session lasted 45-50 minutes**
**Participants signed consent to be videotaped**
**Stressed that study was testing the site, **_**not**_** the user or his/her skills**
**Participants encouraged to “think out loud,” articulate thought and action processes**

**Notes:**
Because NBII has so many constituencies, we wanted to get a broad sample of users from various fields and with varied Web use experience. 
*All of our participants were familiar with the Web and used it for either job or personal needs. 
* Nielsen says 5 or 6 participants generally reveal 75% of site’s problems, and this proved true for us. General problems were very apparent by user #6.  But the extra people were definitely beneficial, because we got some very targeted feedback from various user constituencies

## The Test, cont’d.

***The Test, cont’d.***

**22 questions:**
**1-6 were “mouse-less”; asked for impressions about the  homepage**
**Where do your eyes focus at first glance?**
**What looks clickable?**
**What’s the goal of this site?**
**Do you sense an organization or structure?**
**Does the terminology you see make sense?**
**Is there balance or clutter?**

**Notes:**
Our first run at the test included no “mouse-less” activities.  These questions proved valuable, because they constitute “first impressions” that are critical for engaging and keeping users.  And often, their first perceptions here turned out to be incorrect.

## The Test, cont’d.

***The Test, cont’d.***

**22 questions, cont’d:**
**Questions 7-22 were task-based:**
**Locating recent news about a topic**
**Getting local information**
**Finding scientific resources**
**Searching for specific information**
**Locating educational resources**
**Getting information about site & sponsor**

**Few minutes left at the end for general comments about the site**

**Notes:**
Varied questions covered most user bases.  Some questions were harder for some people – selecting appropriate resources for scientific names, terminology, etc. tended to trip up some people.  But these revealed some barriers we could remove by more careful design. 

## Summary of data

-  7 news	    12/12	     100%
-  8 local	     6/12	      50%
-  9 name	     4/12	      33%
- 10 geo	     6/12	      50%
- 11 meta	     4/8	      50%
- 12 int'l	    10/12	      83%
- 13 search	     9/11	      82%
- 14 topic	     9/10	      90%

-      15 law		3/9	 33%
-      16 child	2/8	 25%
-      17 tourist	6/9	 66%
-      18 card	9/10	 90%
-      19 scope	7/10	 70%
-      20 sponsor	7/10	 70%
-      21 partner	10/10	100%
-      22 contact	10/10	100%

***Summary of data***

**Tasks common to general Web use ( find news, perform search, identify source) were easily accomplished.**

**Analytical tasks  (interpretation of terminology, selection of  “best source”) were more difficult.**** **

**Notes:**
Results were not necessarily surprising, as subject matter will, by nature, present some barriers.  But we need to do more to remove those barriers.  Lay users may need a simpler version of the same info that a scientist needs.  We shouldn’t prevent them from getting that info through bad design.

## So What Does It Mean?

***So What Does It Mean?***

**The Good**
**Users were able to locate information on timely and general topics.**
**Users liked the design of the site, and found it attractive and uncluttered.**
**In general, major thematic groupings held up. **
**They liked the “idea” of the site – a one-stop resource for biological data and information.**
**Users liked annotations to indexed resources, which provided context.**

## So What Does It Mean?

***So What Does It Mean?***

**The Bad**
**Sub-navigation unnoticed by users who didn’t differentiate it from the banner – colors blended.**
**Browser “alt tags” rendered over navigational rollovers irritated users.**
**Right-side, internal navigation for various thematic areas bothered users.**
**Too many pages had excessive scrolling.**
**Some areas had too many lists, without the context to aid in resource selection.**
**Eyes tracked to center of homepage, where links to partners took them off site immediately; not readily apparent what was linked resource vs. our content.**

**Notes:**
*Artifice sometimes works against you.  Site a bit “overdesigned.”
*Alt tags covering nav bar still a problem – even moving radio button over to left still leaves cursor over part of label.
*Many areas of the NBII index available resources.  These are human-selected, so it’s important for us to provide necessary annotations to help users select the best resource for their particular needs.
*Eye tracking was critical.  We took people off the site before we’d answered their info need.  They perceived central location as = supreme resource.  The location was an unwritten label “start here.”

## Colorful sub-navigation “merges” with banner graphic

- Biology in the News

**Colorful sub-navigation “merges” with banner graphic**

**External partner link occupied the choicest real estate; users jumped off here and didn’t come back!**

**Browser page “fold” cuts off primary navigation on left**

**Not one user read mission statement-too long**

**Notes:**
*No one used the sub-navigation at the top, even when they were deep into content areas.  When asked, they said that they “didn’t notice it.”  The colorful buttons made the sub-navigation “merge” with the colorful banner – users associated navigation with “green.”
*Some people never really saw the main navigation buttons “below the fold” of the page – bad, because “Search” was down there.
*We ended up giving external partners a lot of “free usability” testing, because these centrally-located partner links grabbed their attention immediately, and they zoomed off site.  It was sometimes difficult to get them back to our site, because they didn’t necessarily notice that they had “traveled” to another site.
*Not one user read the mission statement, even when they were asked “what is this site about?”  They would scan it for a second or two.  Some answered by repeating the Headline, but they still weren’t able to explain it, or figure out what the “nation’s biological information system” meant.

## What Does It Mean?

***What Does It Mean?***

**The Ugly**
**Labeling/naming of categories not intuitive for many users**
_**Education**_**=resources for beginners, teacher resources, or higher-education opportunities?**
_**Current**_** Biological **_**Issues**_**=Biology in the **_**News**_** for many**

**Search had many problems**
**Too many search tools (four)**
**Use of outside search agent brought in unrelated & unreliable results**
**Search-oriented users were easily frustrated**

**Text-heavy areas were ignored or poorly digested**

**Notes:**
*Labeling of categories was perhaps the biggest barrier to usability....and the most surprising, because we had spent a lot of time carefully naming these categories!  But we were too close to the content to see that the terms didn’t mean the same thing to all user groups, whereas we were intimately familiar with the content. This is the one area where some paper usability testing (a card-sort of sub-categories) by a few representative users would have been helpful during the initial redesign.  
*Scientific terminology must be explained for lay audiences to use resources.
*Bulleting, one-sentence areas easily scannable.  In process of converting all high-level pages to this format.

## “Aren’t news items “current biological issues?”

**“****Aren’t news items “current biological issues?”**

**Education =**
**General references?**
**Continuing ed/tutorials?**
**Teacher resources?**

**Notes:**
Biology in the News = newsmedia reports; search-engine for biological news repositories on Web; newsletters 
Current Biological Issues = complex resources developed in-house on hot topics in the biological sciences (declining amphibians, invasive species)
To us, these were distinct – but users saw no difference between terms “news” and “current issues”

## Implementation

***Implementation***

** ****Interface**** **
**Monochromatic sub-navigation (navigation, not design)**
**Site-wide navigation, key content “above the fold”**

**Naming conventions**
**Consolidate “similar-sounding” categories**
**Clarify vague terms**
**Education ********Teacher Resources**
**Biology in the News ******** a sub-category of Current Biological Issues**
**Systematics********Systematics / Scientific Names (jargon issues)**

## Partners highlighted prominently, but not centrally.

**Partners highlighted prominently, but not centrally.**

_**Internal**_** features highlighted, hot-linked, in key eye-space of page.  Highlights updated regularly.  **

**Headline clearly defines, reinforces purpose of site in one sentence.**

**Persistent navigation is “above-the-fold.”  One category deleted, one added.**

**Notes:**
Moved mission statement and content areas formerly on homepage (publications; presentations; program news)  to “About NBII”; ironic, because we deleted this category in original redesign !

## First redesign:  one page, five screens long; three screens of text and bulleted list of 40+ links.

**First redesign:  one page, five screens long; three screens of text and bulleted list of 40+ links.**

**New site: one and a half screens; content sub-categorized; one paragraph summary.**

**Note that sub-navigation buttons changed to flat green to convey “navigation”**

## Implementation, cont’d.

***Implementation, cont’d.***

**Bullets, highlights, focus points for intro areas; text-intensive area**
**Top-level pages contain easily scanned main points; paragraphs limited to one main concept; key terms hotlinked**
**Detail moved to inner pages**

**Consolidation of search functions**
**Four “search tools” cut down to two, with no loss of search capabilities**

**Notes:**
Still working on search issues, which are difficult because of the different formats, sources.  Trying to integrate all formats across distributed network is hard.  Plus, users want a search box, bottom line.  Don’t want to read anything or select multiple refinements.

## In Conclusion

***In Conclusion***

**By their nature, Web sites grow and change; thus, usability is a ongoing process, not a one-time concern.**

**Usability testing can uncover both interface problems and deeper, structural flaws.**

**Prioritize findings, and plan implementation carefully.**

**Accept that users’ experiences of your site will never be exactly the same, and that the perfect Web site does not exist.**

**Notes:**
Don’t make instantaneous decisions about non-cosmetic kinds of questions until you assess the impact of the change across the entire site.  We’re still implementing some changes, because we’ve had to proceed cautiously.  
*Our metrics seem to indicate that changes so far have helped.  No real changes to search engine usage, so we still probably have a lot of “browsers”; and deeper level pages are getting more hits, so people seem to be finding more stuff.  Contact Us feature has seen marked drop in the number of “do you have __” or “where can I find __ on your site” questions; most questions now focus on science issues, not how to use our site.
*What’s your timetable?  If you have multiple developers, changes to primary navigation systems must be coordinated to maintain consistency.
*Not much out there on best practices for usability on government sites.  Usability.gov is the only major resource to attempt suggestions of best practices.

## Resources Used by NBII

***Resources Used by NBII***

** ****Consultant for the NBII’s Usability Study**
**	****Human Factors International **_[http://www.hfi.com](http://www.hfi.com/)_
** ****Facility for Testing**
**	****Bureau of Labor Statistics Usability Lab**
**	****	****- available free to federal agencies**
**	****	****- use of room and equipment only**
**	****	****- users bring supplies and personnel**
**	****	****- BLS does not provide consulting**
**	****	****- BLS does not recruit participants**
**	****	****- contact John Bosley 202.691.7514**

## Print Resources

***Print Resources***

**Good Starting Points**
**The Web Usability Handbook – Mark Pearrow**
**Don’t Make Me Think! – Steve Krug**
**Designing Web Usability – Jakob Nielsen**
**Information Architecture for the WWW – Lou Rosenfeld**

**Advanced Topics**
**Contextual Design – Byer & Holtzblatt**
**User & Task Analysis for Interface Design – Hockes et al**
**Anything by Edward Tufte, Richard Saul Wurzman, and ****	****Donald Norman**

## Web Resources

***Web Resources***

**Web Sites**
**Alertbox / Useit.com (www.useit.com)**
**Usability.gov (usability.gov)**
**Usable Web (usableweb.com)**
**User Interface Engineering (world.std.com/~uieweb/moreart.htm)**
**Human Factors International (www.hci.com)**

**Listservs**
**ASIST&T’s Information Architecture SIG (www.asis.org)**
** ****ACM’s SIG-CHI (www.acm.org)**