Strategic Web Usability

Anatomy of a Usable Website

I was thinking recently about all of the elements that can go into a modern website and started sketching out a picture of it in my head when I realized that it might make an interesting resource. A few hours later, I had come up with this:


Download 1-page PDF (625KB)

Essentially, it's a road-map for what a typical, usable website might contain. It's not a design guide, per se - more of a cheat-sheet for the pieces that any site should consider having. Of course, not all pieces are relevant to everyone, and I don't claim this is 100% comprehensive. Any comments are welcome, as this is something I'll consider revising as time goes by.

MikeTek

 · Tuesday, April 28
Killer resource Dr. Pete! I just forwarded it along to my designer.

Dr. Pete

 · Tuesday, April 28
Thanks, Mike. I'm curious to hear what designers will think. They'll either love it or hate it, I imagine. I just hope nobody rushes out and designs a site that looks exactly like the sample :)

Hannah_Bo_Banna

 · Tuesday, April 28
I love this - I'm all for a cheat sheet. As you say, you wouldn't necessarily want to design something precisely like that - but it's a good thing to have from a sense-checking perspective to make sure you've not missed anything vital.

Dr. Pete

 · Tuesday, April 28
@Hannah - That's exactly it: it's a way to make sure you're not missing anything important. I hope no real web-page would ever look exactly like this. I also hope that no company's real logo has Superman in his underpants and the word "LOGO" :)

Avinash Kaushik

 · Tuesday, April 28
I love it! So nice.

I wish I could disagree with something, I think you have really nailed it here.

I am not for all websites looking the same, but every design tip you have provided is on target and I hope that as creativity gets unleashed that people remember these simple rules. They can solve for them in any way they want to of course.

-Avinash.

Dr. Pete

 · Tuesday, April 28
Thanks, Avinash - I definitely don't want a one-size-fits-all world, but the sample site felt like the best way to drive the message home. Truthfully, most of these cheat-sheets and checklists are things I designed for myself, so I don't forget the details.

Jun

 · Tuesday, April 28
As simple as it is, this cheat-sheet surely is comprehensive. Thanks Dr. Pete!

Steven Bradley

 · Thursday, April 30
Well done. I can't disagree with anything either. Your timing is actually great too since I'm working on a short article on a similar topic and this posts is generating some ideas.

Dr. Pete

 · Thursday, April 30
@Steve - Sounds interesting; let me know when you finish the post.

Christian Watson

 · Thursday, April 30
What do you think to including the "Home" button in the main navigation?

I would say that this is still a good usability recommendation as enough people still don't realize that the logo is a link back to the home page.

Some sites try to get around this by putting the logo in line with the main nav, but if you don't, do you think a "Home" button should be a requirement?

Dr. Pete

 · Thursday, April 30
@Christian - I started running out of space a bit on this design concept, but I do think the "Home" button is still relevant for most sites, as long as they have a useful, well-defined home-page (not a splash or purely cosmetic page). In some ways, it's probably getting more important, as search, social networking, and other types of referrals are landing people in the middle of sites more and more often. This is also why clear landmarks and options like breadcrumb links are important.

Jestep

 · Tuesday, May 19
You forgot the flash landing page, 2Mb's of Javascript, 3 banners, 15 videos, adsense and auto-playing sound...

I will print this out for sure.

Dr. Pete

 · Tuesday, May 19
@Jestep - Thanks, I'll definitely consider that for version 2 ;) Seriously, maybe what I left out is more telling to some site owners than what I included. I'm amazed when I still hit sites with auto-playing music. I actually landed on one the other day, forgot that my speakers were turned up (pretty loud), and just about had a heart attack.

David Hopkins

 · Thursday, May 21
A usability cheat sheet would be really useful - maybe with different sheets for different types of websites and or aims.

Craig Melbourne

 · Friday, June 5
Dr Pete I applaud your efforts.

I think this is a particularly useful tool for people outside of the UX disciplines. Marketing, Customer Services and Development depts could all do with something like this. Might save a lot of pointless arguments.

I've started a collection of UX resources for non-UX people, I'll be adding a link to this on that post.

One little thing. I think breadcrumbs are a bit of a design cop out. But that's just my opinion.

Jennifer

 · Sunday, June 7
Thanks for this - really cool. (and hello - don't think I've commented here before, have been lurking a little while.)

@ Craig - curious what you mean by breadcrumbs being a cop-out. I've been pondering whether I really need them or not on my current project, as the site is not very "deep" and most of the time people will probably know where they are anyway. So would be interested in what you think is the better/best way to orient visitors, and whether I'm already doing it :-)

Dr. Pete

 · Sunday, June 7
@Craig - To be fair, I think a lot of design elements can be cop outs if they're used to mask bad architecture or poor planning. I do think breadcrumbs can have unique value, though. One area I see them being especially useful is for virtualizing paths for people who land in sites midstream, let's say from a Google search. If I search Google for "Canon 8MP cameras", for example, and land directly on a product page, a breadcrumb trail like:

Electronics > Cameras > Canon > 5-8 Megapixel

...can help me understand the site architecture quickly and jump to any desired location, making it more likely I'll stay. Essentially, the breadcrumb trail has created a path that I never actually took. Any traditional design/architecture, even a good one, would essentially require me to either start over from the menu or run a search.

Vaidy

 · Thursday, June 25
Thanks for this awesome post. I'm printing the image for sure.

One question though: as regards the menu links on the left, shouldn't one of them be highlighted to show the "current" one?

Dr. Pete

 · Thursday, June 25
@Vaidy - One of the oddities about trying to put everything on one page was how to combine a tab-based navigation and more traditional navigation. I opted to show both, which in all honesty, I probably wouldn't use on one site, at least as main navigation. So, I did the hightlighting just for the tabs and left it off of the left-hand navigation. This is really more of a conceptual exercise than a design template.

Jean-Paul

 · Friday, June 26
Hi Dr. Peter,
Thanks for the tips.We have a nice website and I wonder how we can insert our SiteMap.Do you any tips to share or best practices for SiteMap?
Thanks in advance

Jean-Paul

Dr. Pete

 · Friday, June 26
@Jean-Paul - Site maps are admittedly a little situation-dependent. Some people will argue that a good architecture doesn't require a site map, but I think that's often too simplistic an attitude, especially for a complex site. Also, having an overview of your site can be beneficial, even with good navigation, and having text links to site areas often benefits search engine spiders.

I don't think your site map has to be front and center, but having access to one along with your privacy policy and other incidentals (as they apply to your site) is often a good way to go. The map itself doesn't have to include absolutely everything on the site, but should convey the general navigation/category structure of the site and link directly to any core content that may otherwise be 3-4 steps away.

Joni

 · Sunday, June 28
WOW, love this road map to a better website. Do you mind if I include it in the CD I send my logo clients with their logo image files? Too many of them haven't a clue about how their website should be setup.

Joni

 · Sunday, June 28
If I could be so bold as to suggest a couple of usable items that I find helpful when I visit a blog type site. Like on this site I would find it helpful if there where avatar images with the comments. Why? Because it make it easier for me follow the people commenting at a glance -- like the post author. Also find it helpful when the author's comment box is a bit different in design -- like a different background color.

Another useful items is an easy way to Tweet the post so I can pass it on with easy (I did tweet this post).

Dr. Pete

 · Monday, June 29
@Joni - Suggestions are always welcome. Like any small-biz owner, I sometimes have to find the time to practice what I preach. The blog is home-brewed, code-wise, so I've been pondering the avatar situation. Gravatar seems to be catching on pretty well and easy for end-users, so I may go that route. I will be looking to add Twitter and probably StumbleUpon icons soon, since those are the two social networks I personally use the most.

Haberler

 · Tuesday, June 30
Dr.Pete sounds good.Thanks for this helpful article .

live online poker tournament

 · Thursday, July 2
There are many great points in here. One other point to consider is to build a site that reflects your personality and/or design “aesthetic.” If your portfolio features a lot of color, etc it probably doesn’t make sense to build a black and white site, etc.

seo services

 · Friday, July 17
i think its really helpfull article . jumping is good as well

betclic

 · Thursday, July 30
Excellent article, thank you for this great post! However, I have a question regarding the menu links on the left, should not be one of them pointed out to show the "current" one hour?
Thank you for this sharing

quizzila

 · Friday, August 28
Great post thanks very much for this article.

Software Developer

 · Saturday, September 5
a great article to describe the anotomy of a website.Great Post

poker ligne

 · Saturday, September 19
it's a good idea, I think just follow this logic for most of my sites. Although no structure is correct, we find very often badly done sites on the Internet.

betclic fr

 · Monday, September 21
Great article, thanks you very much for sharing it

Webdesign Hamburg

 · Tuesday, September 22
Nice sketch, looks great. What it is lacking is a visual hierarchy though. The most important elements on a webpage should always be displayed larger or in a more prominent position. But that's just my personal taste...

Webshop számlázó

 · Tuesday, October 6
Great post! Good design.
Thanks very much for this article.

Daniel Meyer

 · Sunday, October 18
realy nice tutorial, big THX !!

pari sportif

 · Tuesday, October 20
This is useful, and well built ! An amazing & helpful tutorial !

Adam Hayes

 · Monday, June 21
What a great, compact example of basic usability. It looks like you have compiled the best of Jakob Nielsen's work with slightly better graphics than he normally uses (hehe).
©2014 User Effect, Inc. · Home · About · Services · Contact · E-book · Blog · Archive