Late last week, pundit extraordinaire, Joshua Claybourn, mentioned that he was redesigning the website for the Evansville Museum of Art, History and Science. After a quick look at the original via the Internet Archive Wayback Machine, I’d say Josh has graciously provided a significant and much improved start, but there is still work that needs to be done for this worthy charity’s website.
So with Josh’s blessings, here is how I might apply some of Jakob Nielsen’s famous Ten Usability Heuristics to get the Evansville Museum of Art, History and Science website to be all things to all browsers, users and search engines.
First, while I like the simple and familiar banner across the top, menu along the left side, there are several nickel-and-dime issues here that can create a huge debt of confusion on the part of the user. For example, here’s a little tidbit I suspect Josh doesn’t know, that by using the file name “banner.gif” will create confusion for those visitors using conventional ad-blocking software, as ‘banner.gif, .jpg, .png’ are all blocked by default. And since he doesn’t use the ALT argument of the <IMG> tag to identify the image, the name of the site is not known to the visually impaired, those turning-off graphics, and search engines. Like I said, alot of little stuff that adds-up quick.
In fact, every image that is used for navigation should have textual information embedded in both the ALT argument of the <IMG> tag and the TITLE argument of the <A HREF=”…> tag. Doing this lets the user know what they’re looking out, and what is about to happen if they click.
Similarly, there is some confusion with some of the buttons along the left menu, and those placed in the center-left content. Take Exhibitions for example. Why are there two very different buttons to the very same URL? Do they load as two different pages? Two different sites?
Another “where am I” issue is raised by the link to the Evansville Courier and Press RiverCam … Yes, Josh does tell the user what is about to happen in the adjacent text, at least in Mozilla. But it isn’t clear to me what this has to do with the Museum. Is this a webcam sponsored by the museum or used by the museum? As a general rule, outslide links should not be given equal billing with on site highlights.
Speaking of the visibilty of status, I would suggest using the Girl Scout Program page as an example of how the rest of the sub-pages should look and feel. In other words, when I click on the button that says Girl Scout Program I go to a page who’s content is captioned with a bold title that is almost the exact same wording as the button clicked. In other words, make the button plural, or the page header text singular. Consistency goes a long way in helping a user know where they are and what they’re reading. For example, click on the “Migianella Rose” and there is no title on the resulting page. Instead, we must rely on the users recall, rather then giving them something that is quick and easy to recognize.
For all the header titles on all the pages, I would ditch the deprecated <center><b><font size=”+1″>Girl Scout Programs</font></b></center> in favor of something simpler, such as <h2 align=”center”>Girl Scout Programs</h2>. This would make quite a few search engines and browsers really happy.
Oh yes, I would also make sure that the <title> tags of each of the sub pages reads the same or at least similar to each page’s unique header title … again, this is not only reassuring to the reader, but is REALLY TRULY important in the world of search engines.
Once I took care of these important visibility, status and consistency issues, I think I would then do whatever it takes to reduce the load time of the pages. The homepage on a T1 line takes almost eight seconds … almost 50 if you’re dialing-up. On my beefy DSL line, I took about 16 seconds … which is about eight seconds too long if you want repeat visitors.
Perhaps the quickest way to do this is to eliminate any instance where graphics are used to display text. Starting with the scanned image of the schedule on the front page. This is a big no-no! Not only does this 51k monster gobble up valuable bandwidth and download time, this content is prone to change, so why not use an inner table to list this tabular data in fast-loading, easy to read, easy to change text that search engines love? In fact, here is an excellent time to use include files, so you need only edit/upload the small block of the schedule as it changes.
Then I would replace the menu buttons along the left side with text using CSS rollovers. Again, some nickels and dimes in terms of kilobytes, but they all add up to a slow-loading page that is also more difficult to maintain. Doing so would also eliminate the need to place obligatory text links along the bottom of the page … which, by-the-way, should be offered whenever you have graphical navigation for main menu sections.
I would also put some of the images on a diet. IrfanView comes to mind as a free tool that would help with bloated images, such as that for the Koch Planetarium … tough in the case of the Planetarium page, I would again, use <h2 align=”center”>Use a Text Header</h2> tag to let the user know where they are.
Finally, I might take a more blog like approach to the front page … perhaps use that instead of the scanned image of the schedule, not only to announce when, but give some compelling descriptions of what … sorta like what I’m doing on the frontpage for Redland Baptist
Like I said … the new site is head and shoulders better than the old site, but there are some serious usability and accessibility issues that need to be addressed. And though it sounds like alot of work, it really isn’t … but just in case you’re going to donate some time to Josh … here is how I personally would heal the site in 60 minutes:
- Replace left menu image rollovers with text/CSS rollovers — probably using an unordered list technique
- Make sure all sub-pages have headers atop the content
- Make sure all sub-page headers read the same text at the navigation button used to get there
- Make sure all title tags read the same as the sub-page headers
- Use text for the banner
- Replace the scanned image of the schedule with an embedded table
- Pick one or two exhibits and feature them with a paragraph each on the front page as the exhibit-of-the-month
- Color reduce all images
- Make sure all images are identified using the ALT argument
- Make sure all graphical hyperlinks are identified using the TITLE argument
- Hyperlink the logo in the upper left to return to Home Page