A guest post by Pawel Grabowski
How to make sure that the site you work on is going to be easy to use to it’s visitors: an introduction to web usability for graphic designers
Have you ever got irritated with a site just because you couldn’t find any information on it? Or maybe you got lost within the site’s structure? Or simply didn’t know where you were and decided to abandon the site altogether?
Sure you have. Just like all of us. I don’t think there’s anyone who hasn’t felt this at least a handful of times.
But let’s go further. As a designer, have you ever had a client calling you saying that their users complain as they can’t use the site, can’t find the information they are looking for or maybe simply got lost?
Now, who’s going to be brave enough to say I have?
Well, it surely happened to me in the past and I know how terrible feeling it is. And after an initial shock my answer to that was to rethink my approach to web design. Before that I simply understood design for web as a continuation of my work as a graphic designer. Afterwards I discovered that design although important is only one of all factors of the website’s success.
It is the usability though, or how the definition puts it “the approach to making websites easy to use for the end-user without requiring him to undergo any specific training†that can make or break the site. In other words if your site can not be easily used by anyone, no matter how beautiful it is it will cause grief to it’s visitors and will most likely be quickly abandoned.
But how do you ensure that your user can use the site without undergoing a training beforehand?
Start by following those few steps. There is of course more to usability than that and I would recommend digging deeper into the subject but for now you should always remember to:
1. Design the site’s structure to be clear to the user, not you or your client.
You do not design for your client but for their users and always have that in mind. It’s very easy to create structure that only you and people you explain it to will understand.
2. Make sure that the navigation is clearly seen straight after logging onto the site and that it’s easy to use.
Avoid complicated navigation bars, make your navigation as simple for the user to operate as possible. Also place navigation in a prominent place on the screen. There are conventions for that and you probably can tell them already after viewing hundreds of sites. Stick to those conventions, they were created for a purpose.
3. Ensure that your visitor knows exactly what the site is all about after logging in.
Make sure that each page contains enough information to reveal what the company does. Remember to have that information on every page. You don’t know which page the user will land on first.
4. Tell the user clearly where he is within the site’s structure.
There are two proven techniques for that. Mark the page in the navigation where the user is. You’ve probably seen this many times before, the font may be bold and/or in different color. Or you may change graphics behind the button. The possibilities are endless but remember to mark the page the user is currently viewing.
5. Leave breadcrumbs on your track.
You have seen them many times as well, the “you are here:…†listing on a page. Breadcrumbs help the user to recreate the path they have taken to get to a place they are in now and may provide a great help, especially on large sites.
5+. Test test test
This is a crucial, yet most commonly forgotten step. Always test your site for usability. Run the site by some users, be it someone you know or ask your client to present the site to a handful of his clients. No matter what you go for, always test your site before it goes live and gather feedback.
Of course such testing is only a limited version of a proper usability test conducted in a lab but even with that you should be able to pick up some basic problems with your site.
Pawel Grabowski is a web usability and front end development specialist at think two, an Irish web consultancy working exclusively with designers and design studios. We help our clients win and deliver web projects of any size. He also publishes his own blog at www.papertopixel.org
32 Comments
I have found some site where i have to look at the page for 10 minutes or more before I can figure out how to navigate the site. Its rediculous to have a site so difficult to figure out.
Michael
good tips, I’d to recommand this post to my bf, because this is what he work on everyday. He’ll definitely love your blog
Even to this day the key usability book is Don’t Make Me Think! A Common Sense Approach to Web Usability by Steve Krug. It covers all points brought up by Pawel in his post in an easy to digest style.
Good tips. Even smaller sites sometimes make their sites unnecessarily ‘deep’ with really confusing nanigation.
I’m sorry, but I can not seem to find the information anywhere on the site…I’ve heard that refrain, and it is all too true. One of my pet gripes is the habit of many designers to make the logo the home button. I inadvertently end up looking for the non-existent button, before realizing what I’m doing and mousing over the logo. Lots of non-savvy people would just give up and go to another site.
Thank you for sharing information,Indeed it will increase the exposure to the users. Great work
Hi Guys,
many thanks for your comments, I appreciate them.
@Andy, yes Steve’s book is by far the best introduction to web usability. Well worth the investment.
Thanks
Pawel
Great introduction Pawel, good to see you were brave enough to admit to it. I know how much of a horrible feeling it can be and it does make you re-think how your structure your designs. I went through a stage of getting my girlfriend to test the sites beforehand, I would watch from a distance to see if and where she got stuck. Now it comes naturally and seems more like common sense.
That’s really great tips. I am agree with all those points. I have seen so many website that took too much time to open a page and rally hate that. Designing is good but I don’t think too much graphics is needed for a good website.
After reading this I will have to re-think the navigation on some of my sites. I think that is the reason for my high bounce rate.
I’ve always found it hard to get the balance right between looking good and usability, thanks for the tips Pawel.
Thanks for that. I find using mind-mapping a great way to see the site and all its connections. This is an example of one I used on my site:. There are quite a few going around, but my preferred one is from ConceptDraw.com
Yeah this is something that I have personally had to learn over the last few years. The navigation of a site is so important. It is a good idea to have somebody else check the site over for you as it is always easy to navigate your own site when you have designed it as you know how it works but first time visitors need to clarity when it comes to design otherwise they will just leave. I try to make things really obvious like having big roll over buttons for important areas or an image that clearly gives the information a first time visitor might be looking for.
Its also a good idea to design web pages without lots of different and confusing elements. Having drop down menus is a nice way to tidy up navigation rather than listing lots of page links.
Less is certainly more. If you design a site with a tidy layout with obvious and simple navigation plus emphasis the most important areas of information this usually does the trick. Awesome post, Thanks for the tips.
It seems such an obvious thing, but it really is amazing how many sites out there don’t heed this advice. Great article, thanks.
Thanks for your tips. It’s really surprising, that even some of the very well known internet shops are designed in a way that makes me angry when I’m trying to find what I need. It would be really interesting to calculate how much money they are leaving on the table this way.
I’m sorry, but I can not seem to find the information anywhere on the site…I’ve heard that refrain, and it is all too true. One of my pet gripes is the habit of many designers to make the logo the home button. I inadvertently end up looking for the non-existent button, before realizing what I’m doing and mousing over the logo. Lots of non-savvy people would just give up and go to another site.
Great tips on Usability, probably one of the most important areas of web development that doesn’t get a lot of attention. And for everyone that comment on “Don’t Make Me Think,” great book.
Another factor to consider is Content Management Systems – it’s all looks nice to include a fancy menu, but you’re going to struggle to add a new page to the website if the existing menu can’t be integrated with the content management system.
For some it’s the last thing designers may think of, primarily let’s get that eye candy web design out there. Have others always test your design. Great article, let’s see more of these.
Usually I concentrated only on graphics to impress the client and never thought about the end users who really are going to use the site. You posting made me to think about the usability criteria on desiging. Thank you Pawal! Thanks a lot! You have influenced my way of designing.
Common sense is not that common at all. Sometimes the creative minds get in the way of making sites more user-friendly.
Hi Guys,
many thanks for your comments, glad to be of help.
@Philip Ed: my pleasure,
@Joey: you are right. CMS systems and usability very often don’t go together very well. Although you can design a site to be CMS friendly from the start. It won’t go around all the potential problems but might eliminate the main ones. Check this post: http://www.papertopixel.org/2009/what-to-check-before-you-launch-a-website-2-content-managed-sites/
@PeterM; Peter, due to the nature of my work I know some of those figures. And believe me, they are frightening!
Pawel
Also I think keeping away from product names that aren’t clear (ie using order numbers instead of proper names to identify products) and also using terminology that only people in that market place understand (there by alienating the layman).
I think making a site clear simple and uncluttered also helps a lot, a clean tidy organised site breeds trust in the user. Also I think web sites should be organic and grow with the user and the company and this is only possible if companies and designers are open to honest feedback. It’s really the only way to progress.
The last point is key, if you keep testing what your doing then you will know what works and what doesn’t. If you know your users/audience then you will know what works best.
Hello people. Forgive this question if it seems nieve in any way, but I am considering taking an online course in web design. Obviously I use a Mac, however the course I’m contemplating requires the use of a pc for the tuition, the included software package Dreamweaver and Flash. The cost of the course is £1900 (gulp) plus whatever the pc will cost to run the software, which bu the sounds of it is not Mac compatible. My question is this…..Are all websites constructed on pc’s? As I’m being led to believe?
I think that when you have to appeal to the sitemap of a small site to find your way around, it is a sign that things are not going well in terms of usability.
thx for the tips, i already make sitemap on my website and make easy navigation…, and i’m used my website for online portfolio.
cheers.
Thanks for the tips – I like to keep my site as simple as possible! I think I would top myself trying to make a ‘large site’ – keep it simple stupid.
I like Don’t Make Me Think too.. I think generally the simpler the better. It only gets confusing when people start comparing brains
Great blog.
! I think I would top myself trying to make a ‘large site’ – keep it simple stupid.
Great to see usability advice given to graphic designers. As a client we often find that designers can make a site look great but don’t put in the thoughts on how it is going to be for the end user. This is particularly important for e-commerce sites where great design is of course vital, but the most important objective is to generate sales.
this is a common mistake made by some web designer when they try to add some fancy & flashy stuff to make the site looks better but in the process that certain website loose its credibility to the people & ultimately losing valuable customers,which is the main purpose of a site.so when a designer being asked to create a site for some one he/she needs to make sure that the site they are creating is simple but elegant,site content is related to the site category & make the navigation user friendly so people can easily go through one page to another without any hassle.