table of contents

  • Design With Web Conventions

    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.

    February 27, 2009

  • H1 Tag as your Logo? Web Design and SEO

    I had an interesting chat whilst working on a web design project alongside Mike Jolley the other day, as we was working on Theme Slice a PSD to WordPress Theme conversion service – sorry had to get that in, our different styles of coding ignited an interesting topic; Should the H1 tag be used for a logo?

    We both class ourselves as semantic web coding types, but should the H1 tag be used as your logo? – on this conundrum we disagree.

    Mike along with most web designers work I view use the H1 tag as the logo, I do not, I often use an anchor with an image within it, and heres why:

    Anthony’s Argument

    Usually the first heading tag that your web browser and users encounters is the H1 tag and theres one on every page, the H1 tag semantically has the most grunt and is the premier tag you should use for the main heading for that web page.

    Notice I said “Web Page”, as this is where the problem with using a H1 tag and putting your logo within it lies. Every page on your website has different content and I believe the H1 tag should support this.

    For instance lets say you run a design agency called Dave’s Design and you have a web design services page. To identify to users and to the web browsers a fair reflection of what the content is on that page it makes sense that the main heading (H1) should say “web design services”.

    But if the H1 tag was used as a logo, as is often the case, then the web design services pages H1 tag would be Daves Design, actually in this scenario the H1 tag on every page of the Dave’s Design website would be H1, which does not reflect all the different content on each individual web page across the website.

    Therefore it is my belief that we should simply use a anchor tag with the logo within that anchor and leave the H1 tag to do its semantic duty as the foremost representative of the web pages content.

    Logo’s are always a vector or bitmap image and so I believe semantically should be represented that way, to say that an image is a heading to me just seems plain stupid.

    Who won?

    In case you was interested to know Mike won the argument in this instance, as Theme Slice is aimed at web designers we have coded in the most popular coding methods, everyone seems to use the H1 tag as a logo, so we followed like sheep, please share your view?

    October 18, 2008