A well laid-out site tells visitors right away whether this site is going to give them what they want or not. And the best sites use conventions in their designs and layouts.
A convention (in this case) isn’t a crowded floor in a fancy hall. When speaking of convention in terms of web design, it means using basic signs, symbols and patterns that people recognize quickly. They’re familiar with them and expect to see them.
For example, when a driver see two signs crossed at the corner of an intersection, that person knows the signs usually indicate street names. When the driver sees a red sign, he knows it’s a warning to stop. He’s learned that a dotted yellow line on the highway means you can pass another car if it’s safe and that flashing lights in a rearview mirror means trouble.
We’ve become familiar with certain symbols and know what they mean without having to be told. We expect those yellow lines on roads, red stop signs at the end of streets and street names at intersections.
Without these familiarities, we’re lost. We hesitate at the intersection wondering if it’s safe to keep moving. We search for street signs and get frustrated when we can’t find them.
Driving Around Your Website
Conventions are the same for websites. A few very important conventions have evolved as the Internet developed. We expect to see the site’s name across the top of the page. We expect a navigation bar to be on the left, the right or at the top of the page just above or below the banner. We expect content to take up the bulk of a page and ads to be listed down the side of the site, laid out in a grid.
You could visit a website written in Russian and still be able to navigate because you have some sense of where elements might be – or where they should be.
When you start changing conventions and moving elements to unique places or creating designs that remove familiar buttons, icons and navigation, you’re inviting confusion. A change might strike a new trend or improve a convention, setting a whole new precedence.
Or it might just confuse visitors. They’ll leave.
There’s a problem when you make a change in your design or layout just for the sake of making a change. You’re not paying attention to the reasons that convention worked with people well in the first place.
Can you think of some design or usability conventions used in websites and blogs today? Let’s see how many we can all come up with!
I still don’t like sidebars.
However when I recently threw that convention in the trash I did have to make a concession to stay within another, very important convention. Going to a one column layout resulted in the text going way wide… about maybe 150 words per line?
That was too long, and most websites have narrow columns of less than 100 words per line for a good reason – it aids readability.
I responded by reducing the column width to a fairly standard width, so much so that there is plenty of space now for a sidebar if I want one in the future.
.-= Patrick Vuleta´s last blog ..Using the law to protect your own land =-.
There must be something about short posts today, mine was extra short as well…
More online conventions:
- underlined url’s/clickable links
- RSS on blogs (and if it’s not there, for heavens sake go and put it there!)
- having a contact page somewhere on the site, even if there isn’t a phone number on it….
I’m sure I’ll think of more later…..
.-= Melinda | WAHM Biz Builder´s last blog ..Knowledge vs Action – Getting the Balance Right =-.
Widgets !
Widgets on the sidebar for Microblogging (e.g. – Twitter), Bookmarks, Blogroll, Photos, etc. Now that I write this I think you want some widgets that matter to you and your visitors but not too many that may make them a distraction from your main content.
Mark, please, DO NOT get James started on the subject of cluttered sidebars!
.-= Melinda | WAHM Biz Builder´s last blog ..Knowledge vs Action – Getting the Balance Right =-.
Harry,
Excellent point. You can break with convention, but you do so at your own risk.
Every point at which a customer or reader has to think is one more nanosecond for them to click away—and 90% of the time that’s exactly what they will do if things aren’t instantly understandable. The other 10% of the time they need something you might have badly enough to suffer, or they came to the site pre-sold for some reason so they’re putting up with you.
I read someplace that Chinese food is always cut small not just so you can use your chopsticks, but because the philosophy is that the chef should do the work, not the diner. Same thing. The reader/ customer shouldn’t need to do the work for us.
Regards,
Kelly
.-= Kelly´s last blog ..MCE Round Table: Laugh! Cry! Real-Life Stories of Customer Experience =-.
Oops, forgot to subscribe to comments.
.-= Kelly´s last blog ..MCE Round Table: Laugh! Cry! Real-Life Stories of Customer Experience =-.
One thing I’ve found very useful in my blog tutorials is to highlight big huge
Step 1
Step 2
Step 3
……
Folks have commented to me in the past that they know anything I teach online can be understood by anyone, because I break things down to the most basic “Follow these steps” for success.
.-= Barbara Ling, Virtual Coach´s last blog ..How to make gratuitous profits with CommentLuv longterm – Part 1 =-.
Great article. It doesn’t even have to be a big change. Sometimes it’s just a matter of changing the conventions of the link names in the navigation. When someone goes to a website to get contact info, the expect to see a link that says, “contact us” or just “contact”, When you see a link titled “home” you know exactly where it’s going to take you. Mess with any of these standard names and you risk confusing and losing users.
Robert Scozzari
.-= Robert Scozzari´s last blog ..Tim Hortons in New York City =-.
Nice article Harry,
Some more conventions to add:
1. Pagination (usually in website sections that have lots of pages as news, events, search results)
2. Breadcrumb (when the website is big users need one to always know where they are)
3. News/Posts archive (both for websites & blogs)
4. Footer links (they are usefull, again more in big websites with heavy content pages)
5. Sitemap (some people tend to check sitemaps to find what they are looking for instead of main navigation)
6. FAQs – Help section (again in websites where help is needed, i.e e-commerce sites)
7. Search engine (If the website is big – should be above the fold line)
lemme add: creativity with content n conventionality with layout… i often get so frustrated when i have to recharge my brain cells to navigate through a site… there is one thing that I don’t understand: i have seen some of the high trafficked sites with such a complicated navigation that I wonder whether it really matters to the readers or not if the content is good by the end of the day
.-= write a writing´s last blog ..Inspirational Tips for Creative Writing Story Starters =-.
Navigation should be conventional and simple, and wordpress/themes/plugins pretty much take care of that. On my site, I’ve made sure that the reader can navigate to anywhere and from anywhere using the menus. A separate site map fills in details if needed. There is always the search. Categories are brief and sensible. Other than that it’s just content.
.-= Kaushik´s last blog ..My Really Big Marketing Mistake or What is this Site all About? =-.
We rely too much on conventions. How could we not? But then again, they continue evolving every now and then. Remember how during the 50′s smoking was fashionable and socially accepted? I guess if common sense is behind the wheel when it comes to change; then dumping old conventions and creating new ones can really improve things. As long as they’re for the benefit of everyone. What do you reckon?
@Melinda: Sometimes short and sweet is the way to go! I think lacking a contact page is a big one. I see so many sites that either don’t have one or you have to spend an hour trying to find it. The product or services would have to be really good for me to want to keep searching. Don’t lose potential business! Get a contact page!
@Patrick: Yes, narrower columns do help readability. There’s a reason why blog posts have short, quick paragraphs. Everything is more compact because the attention span is so short online and it’s also difficult on the eyes looking at the monitor for extended periods of time.
@Mark W: Absolutely! Don’t get carried away with widgets. So many people want to put everything but the kitchen sink in the sidebar and most of it’s crap. Keep it simple and stick to the basics and always, always remember, it’s not about you, it’s about your visitors!
@Kelly: You know, I think about that every time I eat Chinese, or Japanese food for that matter. It’s user friendly. And with the Japanese especially, it’s also about presentation, too. Both work in harmony to give the user the best experience possible.
@Barbara: When it comes down to usability on the web, the simpler the better. That’s not to say you’re dumbing down your site for anyone. Not at all. You’re providing a road map and it has to be as clear as possible so nobody gets lost.
@Robert: Clear not clever. That’s the key! The moment you start to get clever with any of your conventions you risk losing your audience. The real trick is to use just enough change to make it unique, yet retain some form of familiarity without causing confusion.
@Mariana: All very good points, especially when it comes to large websites with lots of pages. Nothing’s worse than getting lost in a site and you’re unable to find your way to where you started.
@Write a Writing: Usually if the content is worth reading and the site is hard to navigate I’ll use the feedreader
@Kaushik: The main navigation is key. That’s the one area where people are always going to look for direction and if you can fit all the basics in there, use that, and save your sidebars for other stuff.
@BebopDesigner: I think conventions should be changed slowly. It takes people some time to get used to them, and if they’re good ones, they’ll stick.
Excellent point! Conventions are definitely the way to go in website design. I know I wouldn’t want to go to a site and still have to figure out where the navigation bar is. Some conventions that I can think of: a search box definitely, a subscription box, a profile page with contact details or a contact form at least, and an archive of posts.
The simpler and less cluttered a site is, then the better. Readers would find it less likely to click away from your site. Simple doesn’t have to mean boring either. Sometimes the most striking and effective designs can be the simplest ones.
I write and produce TV for a living and though I am hired frequently for knowing how to be innovative and “oustide the box”, at the end of the day the guys are right – you have to use conventional signposting or risk confusion. The risk on TV is that if we push too far, people will change the channel. Online, they leave the site.
That said, if you are somewhat conventional in your site design (or how I present info in a TV show) you can experiment within the content. Something/someone that feels familiar is far more likely to be trusted as a source of inspirational information than someone/something that creates a sense of un-ease or confusion.
This is assuming that you are creating with the intention of inspiring growth in others, which certainly seems to be true of the community here at MenWithPens.
.-= Jerry Kolber´s last blog ..Stop Reading and Make Something =-.
In addition to having standard features in the right places, I think the “less is more” adage also applies to website design. I came across a site the other week with what appeared to be tons of useful information, but the layout was so cluttered that I had to click away.
.-= Stacy´s last blog ..Funny Dating Writer Wanted =-.
Great points. I hate not being able to navigate efficiently through various sites. I’m all about the efficiency, so this article took it right home for me! — thanks for the info! -alex
.-= Christian Leadership´s last blog ..Integrity: A Leader’s Most Important Quality =-.
Themed icons — for example, doodles, toys, retro, antique. Themed icons can be done well, but sometimes they’re done poorly — especially when the theme becomes more important than the purpose of the icon. For example, a retro calendar icon that looks more like a pin-up poster may not be perceived by the user as representing a calendar. Web designers need to careful when choosing icons. Some may make for good art, but not good design.
.-= Madeline Ong´s last blog ..10 annoying web problems (and how to solve them) =-.
I love unconventional designed websites. And I am not a designer at all. It engages me in very different ways than looking at “another” conventional, safe website (probably mine is another one too).
Contrast from Ireland has a very unconventional website http://www.contrast.ie/
To me, it’s all about coming up with ways to tell a story. If the website does that, I’d love to see more and more unconventional designs.
.-= Tak Hikichi´s last blog ..Need Employee Recognition Awards Ideas? =-.