Web Usability

Our readings/videos this week were quite useful.  Steve Krug’s Don’t Make Me Think is an interesting book on conceptualizing web sites. I felt that he tried a bit too hard to be funny and catchy, but the overall point of the book was helpful. Web users are in a hurry, have short attention spans, and want to be spoon fed. So, design your website to be simple, pleasing to the eye, and easy to navigate. After reading the book, I feel validated in the decision I made to tear out the menu system on my website and rebuild it. Let me explain.

My site is constructed entirely with Omeka. I think Omeka is a wonderful tool, but it has one major flaw: it enables the creation of confusing menu systems. I will use a CHNM site as an example of this. Let’s examine the Gulag site. Let me say up front that I think this site is gorgeous, sophisticated, and full of fantastic content. The issue is that it has no less than 4 different menu systems running at the same time. Take a look at this page. You can see that there is a main navigation menu in the header. There is a slightly different navigation menu in  the footer. In the middle, where the content is, a vertical menu navigates to various sections of the exhibit, while a horizontal menu moves through the pages of each section. The page is visually appealing, but it becomes difficult to find your way around this rather large site. As an example…this site features wonderful videos of interviews with what I believe are survivors of the Gulag system. Can you find them? Honestly, I don’t know where they are or how to navigate to them. And there doesn’t seem to be a search box on this page to help me out. Again, I’m not picking on this site, because I think it is generally fantastic. I’m just using it as an example of Omeka’s menu functionality.

The first iteration of my Steel Navy website used a somewhat off the shelf Omeka menu system, tweaked only slightly. Here is a screenshot of that version of my site:

You can see that it has two menus running below the header. In fact, I had to hack the Omeka theme just to streamline it to that level. Out of the box, it had a third menu system running at the top.  I really didn’t like the idea of having two or three menus running through the entire site. I think it is confusing and distracting. So I decided to create a single, integrated vertical menu, as you can see I have now. The new menu actually contains a number of distinctly different pages created using Omeka. The home page is a manual reworking of the main Index.PHP file for the custom Omeka theme I’ve created. The section pages are Omeka “simple pages.” The detail pages are exhibit section pages. And the Browse page is yet another bit of Omeka functionality. To make it even more complicated, Omeka dynamically generates classes for each individual menu item, so I additionally had to write custom CSS to handle the formatting of this new menu system. But to the user, these are seamless links, and the site looks like regular old HTML pages with a simple menu bar.

I’m pretty happy with how it has turned out, and Krug’s book confirmed to me that I made the right decision. You can basically get anywhere on the site with a single click. Also, the full scope of the project is laid out in the menu system. So if a user comes to the site and has only marginal interest, or perhaps wants something very specific, they can quickly determine whether there is anything of interest to them.

Advertisements
This entry was posted in Clio Wired II. Bookmark the permalink.

4 Responses to Web Usability

  1. alesanu says:

    This week’s reading also determined me to modify the color and the weight of my navigational links. In particular, I got the point that it is important not to mix some standard colors, such as red and blue with the functions which are not suited for these colors. So, it is better at least to try not to use the blue color other than for the links.

  2. Pingback: comment « Historia Computabilis

  3. colamaria says:

    Hmmm, that’s a really good point that I had not considered. Thanks for pointing it out. I’ll have to rethink that color.

  4. Pingback: Screen Resolutions « colamariablog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s