OSTI Redesign:
Begin with the End in Mind

OSTI Delivers Research Results

The Office of Scientific and Technical Information (OSTI) is a Department of Energy (DOE) program within the Office of Science.

OSTI's mission: To advance science and sustain technological creativity by making research and development (R&D) findings available and useful to DOE researchers and to the American people.


(Print this presentation to display expanded comments.)

We have a DOE-wide mission to deliver DOE research results.

First DOE Home Page

In 1994 OSTI created the first DOE home page, and in 1996 entered the Internet era full force, converting report literature to digital form.

Department of Energy Home Page circa 1994
(Links have been updated.)

The DOE home page was one of the first federal agency Web sites.

A Series of Fortunate Events

  • OSTI hired a new writer, a former newspaper reporter.
  • Gerry McGovern spoke about Killer Web Content.
  • Along came a standards & accessibility advocate.
  • Management asked for a redesign.
  • The advocate gleaned resources from InterLab 2004.

In the fall of 2004, several events came together contributing to the redesign of the OSTI Web site:

  • OSTI hired a new writer, Cathey Daniels, a former newspaper reporter who understood the way people scan for information.
  • One of our managers attended a Web Content Managers Workshop and heard Gerry McGovern speak about creating Killer Web Content. We were all moving toward the same understanding of how people read on the Internet. As Steve Krug says, "They don't read. They scan."
  • Responsibility for maintenance of the site was put in the hands of a standards & accessibility advocate, myself.
  • My management asked for a new look and improved design.
  • I was privileged to attend InterLab 2004.

InterLab Provides Resources



Don't Make Me Think

Don't Make Me Think
— Steve Krug

I had been studying usability and CSS positioning. InterLab 2004 provided even more resources. I want to especially thank Janice Nall for introducing me to "Don't Make Me Think" by Steve Krug. You should all have a copy of this book. It's a usability resource through all stages of Web site development: from planning through testing and implementation. (I think people at OSTI are actually getting tired of my references to this book.)

Lynx Viewer



See how your pages look in a text-mode browser!

http://www.delorie.com/web/lynxview.html

PNL's own Amanda Kissire gave a presentation on Optimizing Web Sites for Search Engines and shared valuable ideas such as including a search box and other navigation on 404 error pages.

She also told us about Lynx Viewer — where Web developers can get an idea of how their pages look in a text-mode browser. I find this tool very helpful when checking text and accessibility issues.

Armed with our resources and a sense of "mission", the writer, Cathey Daniels, and I were off and running.

Where to Begin?

To begin with the end in mind means –

To start with a clear understanding of your destination.
To know where you're going
    so that you better understand where you are now
    so that the steps you take are always in the right direction.

—Stephen R. Covey. The Seven Habits of Highly Effective People

This quote from Stephen Covey was repeated by Cameron Moll, who advises us to develop from the bottom up, creating content for the secondary pages first.

Bottoms Up!

To create a homepage that pulls, you need to develop from the bottom up, creating content for the secondary pages first. Then determine which of these pages should be emphasized and where to place appropriate links, images, and content on your site's homepage . . .

Determine the final pages on which your visitors should land, and emphasize those pages on your homepage.

—Cameron Moll

We determine these final pages on which visitors should land, then emphasize and link to them from the home page.

Not only was "begin with the end in mind" relevant to the hierarchy of the OSTI Web site, but also to it's content and coding. Our aim was a usable, standards-compliant, accessible site. We would begin from the bottom, with this goal.

Teamwork

  • Management listened.
  • The artist was patient.

I appreciate the collaboration of our team of Web developers, writers, server administrators, and managers.

  • Management listened as usability issues were explained.
  • Our artist, Joy Fender, was patient as I experimented with positioning formats.

Collaboration is Good


Logo for Office of Scientific and Technical Information

Joy was asked to enhance OSTI's logo, to more obviously reflect our organization.

She decided to use the OSTI acronym behind it, emphasizing the S and T in "scientific and technical." I really liked the first image she showed me.

Draft New Logo

 

Draft logo for Office of Scientific and Technical Information

But, this is where the benefits of collaboration really became visible. When we excitedly displayed the image to our manager, all she could see was a weapon! That became all we could see as well.

Much Friendlier

 

Redesigned logo for the Office of Scientific and Technical Information

The final image is much friendlier.

More Teamwork


team collaboration
  • Management listened.
  • The artist was patient.
  • The server administrator
    brainstormed.

Management listened, the artist was patient, and the server administrator worked with me as well.

The server administrator, Winston Holmes, brainstormed with me about ways to avoid link rot and broken URLs using a content negotiation system.

Changing a Web address should be done with the same level of care and frequency as that of a street address. How will people find you if you keep changing your address? I was concerned about linkrot and frustrating our customers.

Server Adjustments

Cool URIs don't change

What makes a cool URI?

  • A cool URI is one which does not change.

What sorts of URI change?

  • URIs don't change: people change them.

Some of the changes we had in mind could affect file extensions in our Web addresses. The World Wide Web Consortium (W3C) Style Guide includes the article, "Cool URIs Don't Change", which explains the use of a server content negotiation system (CNS). Winston studied this information and implemented it on our server.

With a CNS, you can format links without file extensions. The server returns the file with the name you specify. If there is more than one file by that name, say, interlab.html and interlab.shtml, preferences can be set as to which type of file to return first.

Ideally, you would not use the same filename more than once. Links formatted without extensions remain relevant for years as technology changes: index.html, index.shtml, index.jsp, and so on.

Linkrot

Any time one of your old URLs stops working, you are throwing away business.

It is like refusing entry to a shop for anybody who is dressed in last year's fashion.

— Jacob Nielsen. Fighting Linkrot

Winston made my job easier by setting up the server to allow server-side includes (SSI) instead of JavaScript files for a more accessible menu, even in files ending with .html. I could include the master files — menu, header, and footer — without changing the primary file extension to .shtml. But, in consideration of future technology, I used the CNS and formatted links on our site without extensions. Who knows where we'll go from here, what extensions we'll be using two years from now?

Just Do It

Advocating the quiet revolution

Fighting a solitary campaign for standards within any organisation must lead inevitably to frustration if the responses are either negative or apathetic. So my advice is to not fight one, but to take the path of quiet revolution.

. . . Simply use CSS layouts and valid markup wherever you possibly can. You will have a greater sense of achievement and your managers and clients will thank you in the long run. (You mean our site does use CSS? Wow! I never knew that!)

— Andy Clarke. And All That Malarkey

http://www.stuffandnonsense.co.uk/archives/advocating_the_quiet_revolution.html
The team at OSTI was open to changes and improvements focused on usability. I'm fortunate to be part of such a team. For those people in situations where change is not embraced, I recommend following Andy Clarke's advice: Take the path of quiet revolution. Just do it! "Simply use CSS layouts and valid markup wherever you possibly can. You will have a greater sense of achievement and your managers and clients will thank you in the long run."

OSTI 2004

  • Section 508 compliant, Priority Level 1
  • resizable text
  • good download time
The OSTI site already met Priority Level 1 of Section 508 compliance, had resizable text, and good download time. In the redesign, we looked for ways to enhance a feature most critical to delivering DOE research to citizens — our search feature.

Moving Forward

  • Format the site with usability in mind.
  • Include our search products in the menu.
  • Use resizable text rather than images for the menu.
  • Decrease the amount of text on the page and make it more scannable.
  • Give the site a one-step search box, available on every page.
Our recommendations for improvement were to
  • Format the site with usability in mind, placing items on the page in standard locations that users have come to expect.
  • Include our search products in the menu, where they are available on every page.
  • Use resizable text rather than images for the menu.
  • Decrease the amount of text on the page and make it more scannable, readable.
  • Give the site a one-step search box, available on every page.

Common Layout

For the vast majority of website design decisions, a convention or standard exists, which means that people will apparently know how to use the site when these conventions or standards are followed.

— Jacob Nielsen.The Need for Web Design Standards.
http://www.useit.com/alertbox/20040913.html

Use common elements that users expect.

— Steve Krugg. Don't Make Me Think.

Steve Krugg says that if you want to come up with something new, it had better be intuitive. Things that make sense to people and are easy to follow become standards, just like the traffic light. People know what to expect and the flow of information is more efficient.

Clear the Path to Research Results


Where's the menu?

Where's the search box?

Where's the news?

OSTI is not a design firm, where users come to see the latest and greatest bells and whistles on the Web. OSTI delivers DOE research results. By using layout standards with which users are already familiar, we can clear the path to that research information, and more efficiently accomplish our mission.

Appropriate Markup

Try to use text instead of images to display important names, content, or links. The Google crawler doesn't recognize text contained in images.

— Google. Webmaster Guidelines
http://www.google.com/webmasters/guidelines.html


Accessible = Indexable

I can't say enough about the appropriate use of text and markup. Search engines love text and the more accessible your pages are, the more indexable they are.

Search for DOE Research Results

"90% of companies report that search is the primary means of navigation on their site, and 82% of visitors use site search to find the information they need. . .

80% of visitors abandon a site if its search functionality is poor.

— Google. Enterprise Solutions.
http://www.google.com/enterprise/case_for_search_internet.html

A search box has become one of those standard features that users expect on every page of a site. OSTI serves DOE research results with excellent search products. Our recommendation for the redesign was to move the search box up a level and place it in the highly visible and expected upper-right location. You can now search for research in all of our products, directly from the home page.

Barebones Page

After our team reached consensus on the desired layout, I provided our artist with a barebones template. She designed images around that layout, and we worked together as I positioned all the elements in the stylesheet.

Here, is the result. You can see the barebones layout behind the design.

The Morning After

Internet Explorer 5.0

Netscape 4.7

<link rel="stylesheet" type="text/css" href="css/ostimain.css" media="all"/>

Our new Web site went online Thursday, September 29. On Friday morning, a colleague met me at the door with this image from one of the computers in the building. (IE5.0)

Even when you test your developing site on all browsers types and operating systems you can find, surprises can still happen the morning after.

You can imagine what happened to my sense of accomplishment. Someone wasn't getting research results very well. By the following Monday morning, I had figured out the culprit was a right-floated div outside of my maintext div. Internet Explorer 5.0 didn't like it. As soon as I moved the News Box inside my maintext div, the problem was solved.

The same computer that had IE 5.0 also happened to have Netscape 4.7. Here's how the page looked in that browser. (Show NN4) From what I've read, the best way to get stylesheet positioning to work in Netscape 4, is to hide it! Netscape 4 will recognize the stylesheet only if media="screen" or if there is no media attribute in the stylesheet link. Using media=all effectively hides the styles from this old browser. With the styles were hidden, the page is functional and usable. A note at the top encourages users to upgrade.

@import

Place the @import rule inside a plain .css file, which is linked in the <head> section of your page.

Different versions of the import rule have varying levels of support from older browsers.

@import "style.css"; — hidden from nearly all v4 browsers —

@import url('style.css'); —IE4 can understand, but not NN4 —

Just last week I learned that specifying media="all" creates accessibility issues with screen readers. So, when I get back home, I'll be following up on that and probably using the CSS @import rule. I understand it's a common workaround with Netscape 4.

This information came from the css-discuss Wiki, listed on your handout. (A companion to the CssDiscussList mailing list.)

I'm not advocating that you continue to support these older browsers. Look at your user base and your mission. We've recently found that 9.1% of our users are still using IE5.0. Only 3.1% are still using Netscape 4. If you can resolve these issues without too much trouble, go ahead and make your pages useful if your numbers warrant it. Continue to encourage these users to upgrade.

Increased Transactions

The number of transactions by citizens and scientists who avail themselves of DOE R&D research results from OSTI resources has increased substantially due to increased accessibility online.

Chart showing number of transactions per year, 1996 to 2005

As OSTI has increased online accessibility of DOE research, the number of citizens taking advantage of our resources has greatly increased.

In FY 2005, there were over 38 million transactions by individuals accessing OSTI resources — more than double the FY 2004 number. The research information is freely available on the Web.

The Future Drives the Present

The "end" we aim for is a moving target, it's ever-evolving — there's always more to learn.

Armed with the best information available and a clear idea of the standards we want to achieve, we BEGIN the process of developing the END, the Web pages on which increasing numbers of citizens rely.

(Print this presentation to display expanded comments.)