What kinds of design patterns do you see in the websites that you use every day? Are there some common kinds of things that you see in use?
Navigation position – generally at top or top left hand side under the logo on websites. Blogs appear to have varying navigation positions with the right hand side often favoured to navigate archived posts.
Links underlined – the convention of underlined text indicates to the user it is a link. Hence using underlined text on a website is not a good idea as it will almost certainly confuse the user into thinking it is clickable text leading to more content via a link. These days links don’t always display with a decorated underline, however if they don’t colour or other visual styling will often emphasis the interactive nature of text in relation to surrounding static text.
Breadcrumbs – as mentioned in the course notes breadcrumbs are often used to indicate the hierarchy of the displayed content as a trail. The use of breadcrumbs gives the user perspective indicating where they have drilled down into within the website, where the content can be found/how it is categorised and the ability to go back to the category or sub-category the content belongs to or indeed back home via the breadcrumb link.
E-commerce - often have step by step processes that indicate where in the process you are at the top of the page and what steps you have ahead of you for the transaction to be complete . Most steps would have continue or go back options, with the last step having a confirm or similar action button, once clicked the user would expect to receive confirmation on screen. In the case of service or product an email receipt would be expected for the users records.
Logo – the convention is generally to have the company/organisation logo in the top left hand corner, it is expected that the logo always links back to home page
Interpretable text links – link are what they say they are, describing to the user in simple terms where the link will take them e.g. Compare home loans vs More or Click here which are not user friendly.
Search box – mainly located in the top right hand corner of most standard websites. The text box should be large enough to accommodate a text string containing a couple of words and typically appended with a ’search’ or ‘go’ processing button. There is often the ability to perform an advanced search which is usually a small link under or beside the text box.
Login – typically located in the top right hand corner under search. Generally there is a convention that requires the username and password to be entered, with a forgotten password link to assist.
Radio buttons – indicate a boolean response: either/or, the user cannot pick more than one answer
Check boxes – determine the ability for the user to select multiple options that best suit their needs
Drop down menus – indicate a range of options to choose from of which one will apply.
Form fieldset – typically ends with a search, confirm, next or go button in the bottom right corner
URLs – .au: helps to identify to the user it is an Australian website as would another code determine a specific country of origin, .edu: an education website, .org: an organisation rather than a company, .com: a universal convention for a company website, often used for large brands e.g. coca-cola etc that span the world. http://mobile or /mobile at the end of a url will often determine you are browsing a mobile optimised version of a website
Iconography – is used to aid user cognition with associated text e.g. RSS icon is a recognisable convention across the internet indicating a link to an RSS feed (XML data).
Footer – About us, Contact us, Terms & Conditions, Sitemap links and copyright information are all widely used website footers.
Ads – island ads are typically placed on the right hand side of content. Banner and leaderboard ads generally appear at the top of a page with a tendancy to towards the right hand side. Ads have an expectation that they are infact clickable and will lead you through to further information.
Tags and Tag clouds – Tags determine categorisation of content via metadata e.g. http://www.flickr.com/ uses tags for its bank of images and Tag clouds use the tag metadata e.g. http://www.abc.net.au/news/tag/cloud.htm to indicate of popularity of content via a visual cue e.g. text gets larger the more popular or widely used a term or tag is
Captcha – a generated image of words and numbers used as a security device to lock-out web crawlers/robots that may cause spam by authenticating real users via an image task.
Perhaps look through some of the pattern libraries and see if you can spot any that are in use.
The pattern libraries are a great idea to assist designers of websites. I must say I really don’t like the layout of the Yahoo library, using a blog style navigation and putting the categories down the bottom seems to me counter-intuitive. Though I do think it is still a great resource.
I wasn’t aware of the others, so am glad to have some new resources at hand.
I find it is best practice to do your homework on what is commonly the convention for the specific task or element you are designing. It is often said ‘know the rules before you break them’ and ‘don’t reinvent the wheel’. I know these are cliches but they really make sense when designing user behaviours that often have a precendent or convention that is common in web culture.
Another pattern that NNG talk a lot about is a pattern of user expectation – feedback.
Every process or action requires a result or notification, it is expected and can be disorientating for the user if it does not occur.
For instance
You click on a flash movie, then you expect to be told what is happening if the movie takes a while to load e.g. the ‘loading 50%’ style of feedback often seen.
or
A payment is made over the internet, once submitted there is an expectation that there will be a notification of payment being processed and a confirmation of purchase / booking at the end of the transaction.
