Design With Web Conventions
February 27th, 2009, Category: Web Usability
Web 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.
Claire
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.
7 Common Web Usability Problems | Design Reviver
[...] reading: Design With Web Conventions Top 5 Web Conventions Design with Consistency Why Consistency is [...]
What makes an effective IFA or financial adviser website? – part 2
[...] if you rely solely on colour to make them stand out – what about the colour blind? Anthony Brewitt explores some more web conventions on his blog, which I’d advise you [...]
Umang
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