Give This Web Page Some LIFE!

Steve Krug has written the number 1 usability book in America. Here are some of the key factors that he covered in his book:

Chapter 1

Things That Make Us Think:

In this section, Krug talks about the importance of making links, buttons, and other navigation so obvious that users will not have to chink about what the object does and were it will take them. You can see an example of this by going up to the breadcrumbs to see the pointer from the mouse or over to the quick navigation on the left. You can even go up to the logo and see the same thing; it is consistent to the whole site.

The names for the navigation are also self-evident of the page names and what they hold. You can check that by looking at the quick navigation.

Chapter 2

We Don't Read Pages. We Scan Them:

the reality of reading on the web is that people don't read every single thing that is put on the web page. Users scan them. One purpose of most pages on my assignments portion of the web site is to fulfil the objectives of the assignment. So not all pages meet the standard of less is more. However, almost all the Alertbox Overview articles have:

  1. Clear headings
  2. A quote that gives the feeling of the article
  3. Ordered lists and unordered lists
  4. Bolded keywords at the beginning of the the lists and throughout the page

Some examples of these can be found through my Alertbox page or specific Alertbox articles like Alertbox 9 and Alerbox 6.

Chapter 3

Create a Clear And Visual Hierarchy

On every page in my web site it is clear of the use of appropriate headers throughout the page. As you can see on this page, there is the main header, Think Text Proofs which is a h1, the "chapter" headers which are h2 and the sub headers that explain the concepts with a h3. You can check out the source code to see the use of headers.

You can also see that the side navigation is ordered in a clear hierarchy of assignments first then subsections of Alertbox Overviews, Proofs, and posted papers and presentations.

Conventions Are Your Friends

As you may have noticed - as far as conventions go - the navigation is set to the left side, the logo is in the top left corner, the footer with the contact information and copyright is at the bottom, and the breadcrumbs are near the top to the right. This is how most web sites are created so there is a familiar feeling that says, "HEY! This is a web site!". This is done on every page.

There is not much to the following items covered. As far as Breaking Up Pages Into Clearly Defined Areas, Make It Obvious That It Is Clickable, and Keep The Noise Down to a Dull Roar there isn't much to the pages on my web site. The links and the logo are the only clickable things on the web site and it is obvious that you can click them. The pages is broken up into mainly content and navigation.

Chapter 4

Mindless Choices

This is one step that I really tried hard to focus on, which was to make all names of navigation on the page and even in the source code plus headers, titles, and such to keep them to convention so that people wouldn't have to think about what the page is doing or what they all meant. CLick on any Alertbox page and you'll find that the title of the page and the link to the actual article are the same so you never have to wonder if they are related.

Chapter 5

This has been a hard chapter for me to follow because of what the assignments entail. The rest of the site follows a little better of writing for the web. Once the Mike and Brittany page and Our Family History page are finished you can see that they follow the standards of Omitting Needless Words and Blah, Blah, Blah Text.

Chapter 6

Street Signs and Breadcrumbs

this section again goes over navigation and following the conventions of how navigation is designed.

Don't Look Now, But I Think it's Following Us

You may have noticed that the navigation and logo had changed from the home page a bit. This was done to be kind of like a router to the many other pages and projects that are out there. Once you get into Assignments Main page, the Nature's Nook Test Site, or the Mike and Brittany page the navigation and logo follow the same conventions of just about every page that is associated with that section of web pages.

The Sections

The best example to see this is the menu bar that is on the homepage where the navigation breaks down the sections and subsections to every project site.

A Way To Search

On every page, there is the option to search the site or to search the web. That way people can find what then want when they want it. You can see it by going to the top and you'll see the search feature. You can also go to all the main page sites and their subsection to see the search feature.
You'll notice also there are no fancy words to explain the search feature; it follows conventions.

Secondary, Tertiary, and Whatever Comes after Tertiary

I think the best example of this is seeing how the breadcrumbs and side navigation work. Its simple. The other project sites that I am working one probably have a better idea of how this works but because I am not finished with them yet, this assignments section will have to do. There are three main sections to assignments; Alertbox Articles, Proofs, and Papers and Presentations. All have reference to each other with the side navigation on every page and all have the breadcrumbs leading back to the home page.

Page Names, Or Why I Love to Drive in LA

Every single page there is a clear page name that tells you what page it is in. They are all in an xx-large font size and near the top of the body content. You can check it out on this page or go to Alertbox page, Proofs page, Papers and Presentations page, or an of their sub pages.

"You Are Here" and Breadcrumbs

Every page has the "You Are Here" and breadcrumbs-help so that users know where they are at. You can go to the Mike and Brit page to see it or any page for that matter. Go see the Alertbox 10 article to see the depth of this example.

Four Reasons Why I Love Tabs

The best example for this is on the Mike and Brit page. This is the main navigation for that page and the techniques spoken of in the book also follow every page there. Look at the Mike page and the Brit page to see the difference. Remember that the pages are not quite done yet.

Chapter 7

This chapter was big on the home page being the number one thing that tells the user what the site is all about. I believe that my homepage is clear that it is a personal site that I use for homework and work on other web projects. You can check out the home page to see it.

How To Get The Message Across

As you may have seen, there have been a few tag lines here and there and there is a welcome blurb on each of the main pages to the following material so that way people wont have a doubt what the content is all about.

Home Page Navigation Can Be Unique

This was an easy one for people to see. By making my home page navigation different that all my other told the user that this in the mother page of all the baby pages.

The Trouble With Pull downs

I had almost been tempted to put in a drop down list because of the number of pages that I had incurred over time but decided against it because of the pointers in the text:

  • you have to seek them out
  • they are hard to scan and
  • they are twitchy

Conclusion

I hope this helps you understand the importance of sound usability and the time put into the usability process. This is only a smidgen of things that can be done in order to serve the user better but it is a good start.