Design With Web Conventions

February 27, 2009, in Web Usability

web-design-conventionsWeb conventions can be used to improve the user experience of your web pages. The learned behavior of users surfing many websites web-wide has created some web design conventions that we can take advantage of in our page designs, easing the viewers journey with a sense of familiarity.

Hyperlinks

One of the first things we learn about the Internet is what those blue underlined links do, they don’t have to be blue, but I do believe you must differentiate them by giving them an underline or a background color. C

hanging the color only isn’t a great solution as users with color blindness cannot tell the difference. Visited links should usually change color, most commonly a nice purple, recently I have seen more sites using a strike through which seems to work well.

Heading Structure

Users are used to reading in a certain way, magazines and newspapers and now the web, lets take advantage of the nested information structure users are used too. Headings will ease users perception of the information structure allowing them to get a good overview of the information.

The heading could be larger, a different color or have extra space around it to signify its importance. After the main heading the sub headings should also follow a similar semantic order.

Headings should highlight in one or a few words what the following paragraph is about, on the web this ultimately creates scan-ability, something your users will appreciate.

Logo

The logo / site ID, should link to homepage of the website – though probably best to have a home link in the nav as well, the user will feel reassured as she knows there is always a way to start all over again. The logo is usually positioned top left side of the web page.

Buttons

Buttons are going to do something, actionable events, keep buttons for actions. A great element of their design is that they are three dimensional, so its obvious they are click able. I often don’t over style buttons on my designs, leaving the users web browser to style the buttons, this may offer the viewer a little extra familiarity.

Search

I’d recomend keeping your search forms simple, none of these extra tags for accessibility showing like the label, fieldset etc, and no confusing words like “enter keyword” or “quick search”, from a usability perspective the user wants to see the word “search”. If theres any further search criteria they should be straight forward and addiitional.

Main Navigation

The main navigation usually sits next tothe logo at the top of the web page and usually maps out the main sections of your website, or I like to say “the main features”. These links should all be internal too.

Secondary Navigation

Secondary navigation is often situated in the top left or right sidebar and more recently found directly underneath the main navigation showing sub page structure, this is usually a list of hyperlinks leading to category or even content pages.

Utilities Navigation

This navigation is usually at the top right of a web page and includes helpful links such as a Sitemap, Search, a link to the Home Page and Contact page, on a ecommerse site this would probably house the Shopping Cart and Checkout links too.

Images

If a photo has some text underneath it this usually means its a caption describing the image, or the photographers name. If you click on the image thumbnail it will show you a larger version of the image.

Skip to Top

A link at the bottom of the page to take the user back to the top of the page, I’d reccomned this link be aligned with the pages content and that its clearly displayed, I dislike websites that put this on right, I’d suggest this should be the first link in the footer.

Grouped Items

Similar items can be grouped into a list of hyperlinks to show they have a relationship, maybe they are in the same category of service or related products in an ecommerce website. Grouping similar items makes their associations clearer to the user.

Shopping Cart

Don’t call it basket, or carry bag, I’m English and I say “shopping bag” and not “shopping cart” but its the metaphor and wording that’s used the most across the web, so pick a side and stick with it. The shopping cart icon is also widely recognizable across the web, so you may not need the word “shopping Cart”.

Conclusion

Web conventions shouldn’t get in the way of progress and as a designer you must preserve your artistic license, be creative and progressive, and remember conventions had to start somewhere, its more of a web trend than an ideal of design, but if you want to create the best user experience then designing with conventions in mind will aid your users greatly.

There’s probably a good few web conventions I have missed, feel feel to comment and I’ll add them.

About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

9 Responses to Design With Web Conventions

  1. A nice set of general rules on how websites are formed there. Generally many people have become used to this structure, so changing it will more often than not loose the user.

    Firstly when designing a website, think of what you would want from it. Perhaps it is a shop. You will want to see all the colour options of that product and also a bigger image. The main thing is paying attention to what the user wants. It will usually be a very simple and functional site, but this can also be made into a beautiful design, without hindering the functionality and confusing the user.

    I pretty much abide by all the above points when designing. These together with an appropriate design, is usually a winner.

  2. Pingback: 7 Common Web Usability Problems | Design Reviver

  3. Pingback: What makes an effective IFA or financial adviser website? – part 2

  4. A lot of this stuff is fairly obvious. But it is always good to see it in a list so you can double check once the design is completed! Thanks

  5. ecco boots

    In my view, in fact, doing so is right, very supportive of your point of view.
    Feel your article is very unique, great, reading your article is a pleasure.

  6. Is there a web site that lists all conventions and expos going on in the US or worldwide?

  7. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations

  8. Pingback: Designing A Winning Navigation Menu: Ideas and Inspirations | Android News

  9. Pingback: Navigation for E-Learning Courses | Journey in Design

Leave a Reply

Your email address will not be published. Required fields are marked *