NOAA National Ocean Service – Usability Case Study
For a small shop with a small staff, limited time, and a small budget, redesigning a website (and testing that redesign for usability) can be daunting. At least it seemed so to us when we redesigned the National Oceanic and Atmospheric Administration (NOAA)’s National Ocean Service website in November of 2013. We met the challenge by keeping things simple.
One solution was to adopt the popular, open-source Twitter Bootstrap framework, which is very flexible and well documented. On the User Experience side, I would call our usability testing process ‘iterative and informal.’ By iterative, I mean that we allow for mistakes and continually tweak our design. We know it’s not perfect. When we find a usability problem, we tweak our template. By informal, I mean that we haven’t used formal focus groups or third-party professional usability testing services. We rely instead on five elements:
- Analytics—Our two tools, Summary and Google Analytics, tell us what people are searching for, what is popular, how people are interacting with the site, and where our visitors are located.
- Collect Informal Feedback—For example, at a recent Open House I used an iPad to show four people our website. I asked these people to perform certain tasks on the site so I could watch them and see how they did.
- Website Feedback—We solicit feedback via an online, OMB-approved visitor survey and via email through our “Contact us” links.
- Content/Development Integration—We integrate the content, design , and development staff, under common management, working for a common purpose.
- Good Examples—We rely heavily on current Web best practices gleaned through sources like the Nielsen Norman Group, A List Apart, and Smashing Magazine.
With these points in mind, here are five examples of choices we made based on our usability testing.
1. NOAA National Ocean Service Home Page
Our old home page used drop down menus, which are generally considered tough to use on mobile. This type of menu can also be challenging for desktop users—especially nested menus with multiple levels. One slip of the mouse and you’ve lost your place. We also had a long list of ‘Featured’ links next to our slide show that (via informal user experience testing) we deduced was quite meaningless to most people. The links themselves were dense and hard to read, discouraging discovery.
The second tier of our site (the ‘Explore’ section) also presented text that was hard to read. Analytics showed us that this section was not at all popular, either. Our search field at the top of the page was sometimes missed by visitors because it doesn’t say ‘search;’ some visitors missed the word ‘Go’ or didn’t know what it was for. In general, our site’s narrow page width and text density made it very hard to quickly find what you were looking for. The rigidity of the page was a particularly bad experience on a mobile device.
NOAA Home page – Before
NOAA Home page – After
Our new home page attempts to correct these issues. The top navigation now contains no drop down menus. We also added icons to help provide visitors with visual cues about the type of content they’ll get if they click on a link. We decided to include our ‘Ocean Facts’ in our top navigation as well, as this is by far our most popular site content. Next, we chose to remove our search box. Now we send visitors directly to our DigitalGov Search page, which we’ve spent a lot of time tweaking to deploy all available features to help visitors get what they want. More on that shortly.
For our second row, we went with icons and text links to sought-after content (and as a place to highlight content that we want people to see and click on). Our third row is another opportunity to visually highlight content and encourage discoverability. The ‘Explore’ section, which used to be prominent on the home page, is now relegated to the bottom. Overall, the page is wider, fits a lot of different content elements, and flows well on mobile devices. Lastly, we decided to focus more effort on usage of big, bold, and attractive imagery—an emphasis that extends sitewide. Locating and preparing this imagery is time consuming, but it is generating more clicks.
2. NOAA Search page
GSA’s search platform, DigitalGov Search, is great and keeps getting better. We rely heavily on it and try to take advantage of all it offers. In addition to our global search button on our banner, we also offer search boxes relevant to specific pages (e.g., visitors may search just within podcasts when on a podcast page). We think this is making a big difference in helping visitors find what they need.
NOAA Current Search Page – (No Before Image Available)
3. NOAA Page Footer
In the spirit of long vertical scrolling pages, we decided to try out a current design trend and place more content in our footer to increase chances for visitor discovery of new content.
NOAA Page Footer – Before
We still have all policy-required links in our footer, but it’s now a more interesting place to visit.
NOAA Page Footer – After
4. NOAA Story Page
Our posts used to be very dense and hard to parse.
NOAA Story Page – Before
For our new design, we emphasize webfont usage, good imagery, increased line heights, and a tiered approach to the content. This last point, a tiered approach to content, is worth stressing. Given that most people only spend a few seconds on a typical page, we looked for ways to get our message across in ‘chunks.’ We have a headline with the main story idea, a sub-header that explains the significance of the story, a strong image to convey the story, a caption header to grab the visitor’s eye, and a caption that conveys the main point of the story.
Then we have the story. We also added an optional ‘Did You Know?’ sidebar box to convey related information about the story that isn’t integral but is nice additional information for motivated readers. We think this is a better approach to reach people, but it’s still too early to tell from our analytics if we’re having a noticeable increase in pageviews.
NOAA Story page – After
5. NOAA Longform Story Page
This example is a demonstration of our use of long vertical ‘scrolling’ pages instead of clumsy tabs. In general, our new design minimizes the use of special JavaScript functionality so that pages load faster and are easier to navigate (especially via mobile devices).
NOAA Longform Story Page – Before
The photo on this page is also minified, or compressed to minimize file size without losing image quality. This is a practice we’ve adopted for all of our large images to help our pages load faster, which is a particular concern on mobile. We use a low cost tool called JPEGMini to accomplish this, but there are many other available tools that do the same thing.
Note that minifying an image is an additional step that we do after ‘Save for Web’ in Photoshop. While Photoshop’s ‘Save for Web’ is also a compression process, it tends to leave images larger than they need to be. JPEGMini does a great job at shaving off additional bytes while keeping image quality in tact
NOAA Longform Story Page – After
Troy Kitch is the Managing Editor and Lead Designer for the National Ocean Service website, at the National Oceanic and Atmospheric Administration (NOAA).
See more Before and After case studies on our Usability Case Study page.
