AETC NRC Website: Taking an Iterative Approach to Design
August 2, 2011
The National Resource Center website has nearly 1,000 active pages and many "moving parts." Even though it uses modern technical approaches that make updates easier than they would have been in the old days, (e.g., cascading style sheets, a version control system, and templates) implementing site-wide updates is a tricky process. Last month we introduced a few design updates that were made in order to get the site ready for our new blog area. Because we don't have the time or budget for a full redesign every year, we try to take what is called in the industry an "iterative" approach to improvements, fitting in a few each year. Here's what's new:
- Bigger pages. The top banner and the standard width of the content is wider (went from 850 pixels to 980 pixels). Since we last updated the site layout, monitor sizes and screen resolutions have come a long way. The biggest benefit is that we can fit more content onto the page, and introduce a more balanced grid to the pages.
- Floating pages. The page "floats" in the center of your browser rather than being wedged in the upper left corner. This design has been available to web developers for several years, and we took advantage of the banner redesign to make this change. It better frames the page and looks a bit more modern.
- Tag line. The top banner now has a "tag line" to give users information about the site's goal from any page. Since most visitors get to our site from search engines, and may not see the home page, this is a usability "best practice."
- One banner. The top banner is the same on every page. This speeds download times a bit, as the image is saved in your computer once and cached. It also standardized user experience and makes updates easier in the future.
- Color adjustments. The home page area is now white rather than green/beige/khaki -this improves readability. The green in the banner was lightened a bit.
- Internal navigation. The internal left side navigation is no longer against a green/beige/khaki background, both for readability reasons and for page balance now that the site is floated and not left-aligned.
We also made some changes to content based on usability testing that we did at our annual NRC Advisory Committee meeting. On one level, these updates could be seen as “no brainers,” but if we hadn’t taken the time to do the testing, we wouldn’t have realized that we had pages that were navigation dead-ends for no good reason.
- Key program information is featured on the home page (using those 130 pixels that we freed up!). This was previously on the map page, which some testers thought was confusing and missed.
- Region list includes states served. We asked our testers to find the Cincinnati, Ohio LPS. Most of them went to this page first: http://aidsetc.org/aidsetc?page=ab-02-00, which at the time did not list the states covered. Many people thought Ohio would be part of the Midwest AETC (MATEC) and had to do extra clicking to find it in Pennsylvania/MidAtlantic. In addition, our map only helps if you know your geography well enough to find Ohio on it ;-) so we’ll be looking at adding state labels in the future, as well.
I have been involved with the AETCs since 2002. I am the manager for the National Resource Center website, and have been involved in many technology-related network activities over the years. I got my feet wet with Web technology in 1996 when I worked with other UCSF faculty and staff to launch HIV InSite.