Whitehouse.gov Usability: The Web Wing - WebReference Update - 010910 | WebReference

Whitehouse.gov Usability: The Web Wing - WebReference Update - 010910

((((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) September 10, 2001

_____________________________SPONSORS_____________________________

This newsletter is sponsored by: Rational Software, 802.11-Planet.com, FlashKit.com and Nanotech-Planet.com __________________________________________________________________

******************************************************************

Get Your Java While Itís Hot, Go to jRoundup.com Link to 1000ís of Java articles, applets, servlets, discussions, and more. New content daily. Click now and join the new Java community. http://www.jroundup.com

**********************************************************adv.****

This week we take a look at the usability of Whitehouse.gov. Newly revamped, the new administration has put a new electronic face on the White House. While definitely an improvement, the new site still has some usability problems, which we'll explore. We also asked Keith Instone of usableweb.com for his take on the new site. Also Wendy shows us how to organize your content effectively to spin gold from straw on your site.

http://www.webreference.com *- link to us today http://www.webreference.com/new/ *- newsletter home

New this week on WebReference.com and the Web:

1. GRAPHICS: That Darn Content 2. UPDATE: Internet License Plate Gallery 3. FEATURE: Whitehouse.gov Usability: The Web Wing

Like what you see? Get our front page e-mailed to you every business day with our HTML newsletter. Just send an e-mail to:

subscribe-html@webreference.com

or for this text newsletter:

subscribe@webreference.com

Spread the word! Feel free to send a copy of this newsletter to your friends and colleagues, and while you're at it, snap a link to WebReference.com.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. PRODUCTION GRAPHICS: That Darn Content

Sooner or later all site designers must accept the fact that their pages must contain content. (Either that, or they won't be designers long.) But long text blocks do not necessarily mean boring page displays. Wendy Peck shows you the difference.

http://www.webreference.com/graphics/column51/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. UPDATE: Internet License Plate Gallery

Thanks to your contributions, our license plate gallery continues to grow. Among the latest additions: a license plate advertising a site about license plates, and a snipped snipe.

http://www.webreference.com/outlook/license/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

******************************************************************

* Don't Miss the 802.11 Planet Fall 2001 Conference and Expo * Where Wireless Business and Technology Converge October 2-3 Santa Clara Convention Center, Santa Clara, CA. Whether you're steeped in 802.11 technology, or need a crash course in translating the alphabet soup, this is the premier 802.11 event for getting up to speed on the exploding industry of wireless networking and Internet access. Register Now and save $100 http://seminars.internet.com/80211/la01/

**********************************************************adv.****

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3. FEATURE: Whitehouse.gov Usability: The Web Wing

Along with a new administration we get a new and hopefully improved Web site for the nation's first house, Whitehouse.gov. President Bush's staff has eliminated much of the previous administration's content and reworked the design. The new site, although faster loading, still has some usability issues. Hopefully by exploring the usability and design problems of this prominent public site, we can show you what to watch out for in your next redesign.

The new design is definitely an improvement over the old one (remember those big oval buttons?). It has some good content, short blurbs for new stories, and a tighter layout. The page nearly fits into one screen, a big improvement over the old one. For navigation the page uses more text than graphics. This makes it more accessible. However, some common usability problems remain.

1. Fixed FONT sizes are used rather than relative 2. Fixed table widths (horizontal scrolling) 3. Too many graphics (slow load), non-working rollovers (Mac) 4. Overdone ALT text (Don't Make Me Think!) 5. Glaring HTML errors (

starts the source) 6. A hard-to-read cursive font 7. Inconsistent navigation

Using one big and complex fixed-width TABLE makes for a slow initial load (25 seconds to see anything at 31Kbps). Unoptimized HTML and perhaps worst of all numerous blocks of unused commented HTML bloat the home page unnecessarily.

A quick check with Websitegarage.com shows poor load time, and fair browser compatibility and HTML design. 72 HTML objects to grab and a total of nearly 90K for the home page make for a slow load over today's average connection speed, 56Kbps. I want to see where President Bush is now, not wait around for his page to load.

Some possible solutions would be to:

1. Use relative font sizes (let the user decide how to size fonts) 1a. Use CSS to control font sizes - linked stylesheet sitewide would make for easier maintenance 2. Use relative TABLE widths (fluid tables fit in more screens) 3. Consolidate nav bar graphics into one client/server side ISMAP 4. Tighten up ALT text (easier to understand with graphics off/Lynx) 5. Validate your HTML 6. Use a more legible font for graphic text, or use straight text and CSS hover, or table/DIV rollovers 7. Clean up navigation, have a usability audit (home page link on home page?) 8. Even better, use CSS to layout the page for newer browsers

Shouldn't this page set an example for other pages, especially .govs? What about section 508 of the ADA? Don't just take my word for it, other usability experts agree.

http://www.useit.com/hotlist/spotlight.html http://www.latimes.com/technology/la-000070719sep01.story http://www.io.com/persist1/logs/999571856.html LA Times/Useit.com/Ben Henick Weblog, Sep. 3, 2001

******************************************************************

** FlashKit Fall 2001 Developer's Conference Hits the U.S.** October 15-17th 2001- LA Convention Center- Los Angeles, CA Attend Flash Kit Fall 2001 and gain hands-on knowledge and business insights from expert speakers and gurus. From budding young designers to marketing professionals looking for creative new ideas, you need to be a part of this event! Register by Sept. 26th and Save! http://seminars.internet.com/flash/la01/index.html

**********************************************************adv.****

We asked Keith Instone of usableweb.com for his take on the new Whitehouse.gov site, here's what he had to say:

* The left-hand navigation feels like local navigation (links to stuff in the same section as where I am), so the "home page" feels like it is part of the News & Policies section. And the home page is actually almost exactly the same as .">http://www.whitehouse.gov/news/>. That is unusual, and may confuse people.

* In other cases where home pages have defaulted to a particular section like this site does, it is usually the most important section of the site. But here the top navigation seems to say that "President" is the most important section by its top-left positioning. So that could be confusing to people.

* If you wander into other parts of the site (like the Blue Room, the News & Policy aka West Wing connection is repeated on the left. So the left West Wing navigation start to become global navigation (on a lot of lower level pages) and not the local navigation that I guessed it was from the home page. I've never tested a site that did left navigation like this, so I am not sure if people get it or not.

* "Policies in Focus" is NOT a link in the left navigation on the home page, but if you go deeper (to the Tax Relief page, for example), then "Policies in Focus" is part of the breadcrumb. So there is a "Policies in Focus" index page, but you have to go down a few levels and then back up via the breadcrumb to get to it, as far as I can tell. A case of "you cannot get there from here."

* I am not sure why Search is a major section AND they have a search box. Are they different searches?

* The top, graphical navigation and the bottom, text-only navigation are not in sync. The top has 2 groups, as does the bottom, but they do not match at all. "Contact" is near "Privacy Policy" at the top but separated at the bottom. Poor Mrs. Cheney is only at the bottom. The top has "site map" and the bottom "help" - maybe those are the same thing? The bottom has "appointments" but that is not listed at all at the top, only on the left.

* I would visually group the major sections differently. The Prez, VP and First Lady feel like they belong together, then News and History together. Right now they alternate: person, thing, person, thing, person across the top. Added that the News section is so important that is gets repeated on the left on many parts of the site, it should probably stand out visually above the 3 big-wigs.

Your Government has a lot of content, so it might belong up there with in the "rooms." The Library is like the Site Map: just a way to find things, so I would put these together.

* The home page has a link to itself, via the presidential seal in the upper left. No Web page should ever have a link to itself. Ditto on the breadcrumbs: in Home > Vice President, "Vice President" should not be a link.

* It is great that the content is pretty up to date (1 day old) but it could be better. As I write this, Air Force One is flying over my house and landing at the Toledo airport. Yet I cannot find anything on the site about the Prez's trip to Toledo. The site has a lot of what has happened, but nothing on what is happening or what is going to happen.

* The Kids Only link could be in a different font or style to reflect that whitehousekids.org is a totally different site with a different design.

http://www.whitehouse.gov http://www.usableweb.com http://www.useit.com http://wdvl.internet.com/Authoring/Design/Basics/ http://webreference.com/authoring/design/usability/

Addendum:

Tom Brinck, usability expert at Diamond Bullet Design and author of "Usability Engineering for the Web," reports that Whitehouse.gov does comply with Section 508 of the ADA. He has a free online accessibility evaluation tool at:

http://www.retroaccess.com

Here's his take on the site:

>TB: I'd say the whitehouse.gov site is a dramatic improvement over the previous one, in terms of layout, navigation, and content. I'm also extremely impressed with its compliance with the federal guidelines for accessible websites (Section 508). I couldn't find a single flaw with respect to those guidelines (I tested it with our online evaluation tool at www.retroaccess.com).

I disagree with some design decisions that I feel make the site less ideal for the very broad spectrum of users the White House needs to work with. For instance, although the site conforms to the official accessibility guidelines, it has some remaining problems - the font size is not scalable, which means that people with poor vision will have difficulty reading it. The site is designed for 800x600 monitors, which means that people with older monitors will have trouble viewing the page (and these are likely to be the people less able to afford new monitors).

In any case, I think they're to be praised for an overall excellent job.

http://www.webreference.com/new/010813.html - "Usability Engineering" Review Diamondbullet.com

That's it for this week, see you next time.

Andrew King Newsletter Editor, WebReference.com aking@internet.com

******************************************************************

** Announcing NanoTech-Planet.Com and Conference & Expo** Get the latest news and developments focusing on the business of nanotechnology. Understand the current applications, and learn where this technology will take biomedicine, materials science, microelectronics and optics in the future. See the companies and labs behind nanotechnology and the VC firms and Gov't agencies reviewing/investing in this breakthrough field. Conf.- Boston 11/29-30 http://www.nanotechplanet.com

**********************************************************adv.****

webreference-update-text Is Powered By http://By.SparkLIST.com/ In-house vs. Outsourced Email List Hosting: Are you paying too much for your email list management? Download the FREE REPORT: http://SparkLIST.com/free-report/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Advertising: If you are interested in advertising in our newsletters, call Ian Flynn on 1-203-662-2876 or send email to mailto:nsladsales@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For contact information on sales offices worldwide visit http://www.internet.com/mediakit/salescontacts.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a Commerce Partner, contact David Arganbright on 1-203-662-2858 or mailto:commerce-licensing@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription visit http://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 160 Web sites are organized into 16 channels: Internet Technology http://internet.com/it E-Commerce/Marketing http://internet.com/marketing Web Developer http://internet.com/webdev Windows Internet Technology http://internet.com/win Linux/Open Source http://internet.com/linux Internet Resources http://internet.com/resources ISP Resources http://internet.com/isp Internet Lists http://internet.com/lists Download http://internet.com/downloads International http://internet.com/international Internet News http://internet.com/news Internet Investing http://internet.com/stocks ASP Resources http://internet.com/asp Wireless Internet http://internet.com/wireless Career Resources http://internet.com/careers EarthWeb http://www.earthweb.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - http://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Looking for a job? Filling an opening? - http://jobs.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This newsletter is published by Jupitermedia Corp http://internet.com - The Internet & IT Network Copyright (c) 2001 Jupitermedia Corp. All rights reserved. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~