Anatomy of a Usable WebsiteI 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:
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.
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 :)
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" :)
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.
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.
As simple as it is, this cheat-sheet surely is comprehensive. Thanks Dr. Pete!
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
Dr.Pete sounds good.Thanks for this helpful article .
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.
i think its really helpfull article . jumping is good as well
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
Great post thanks very much for this article.
a great article to describe the anotomy of a website.Great Post
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.
Great article, thanks you very much for sharing it
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...
Great post! Good design.
Thanks very much for this article.
realy nice tutorial, big THX !!
This is useful, and well built ! An amazing & helpful tutorial !
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).