Archive

Archive for the ‘Web Usability’ Category

10 Blog Usability Guidelines

March 29th, 2008

As someone who has studied usability analysis, I’ve come up with 10 usability guideline which all new bloggers should abide by to help generate subscribers and interest in their site.

  1. Clean, simple design - With the hundreds of widgets and scripts now available, a lot of bloggers clutter up their sidebar with numerous bits of functionality, which is fine as long as you don’t go over the top. The user is most likely reading your blog to find information which is written in the posts - not the sidebar.
  2. Linking - You should insert many links across your posts to encourage users to go and see what you’re talking about. For example, if I mention Techcrunch, the link will allow users who don’t know what I’m referring to, to go and find out. Links should also be blue and underlined as this is generally regarded as the default way of linking text. Users who see blue, underlined text will most likely assume it is anchored.
  3. Descriptive titles - Blog post titles are also page titles, so make your page title descriptive but not too long. Imagine you want to search for the content of your post in Google, what type of words would you search for? Try to get them in, but don’t turn it into a SERP.
  4. Use readable text - Using poor text is a usability problem that many bloggers get wrong. You should use a clear font like Arial or Verdana (which was designed for optimum Internet readability) and it should be at least size 11px. I’d recommend size 12px, which is what this blog uses. Make headings large and clear, even differ the font slightly from the main text if you want to, as this causes a greater division of content.
  5. Make content clear to users - When making a post you should use short paragraphs of about 5-6 sentences so that it is more readable.You shouldn’t be writing a thesis within a blog post, keep them short but relevant. Try to use black text against a white background to make it stand out more, and break up paragraphs by adding bulleted lists or pictures to demonstrate your points. Put wide enough margins around your posts so the text doesn’t run into the sidebar, and the general text area width shouldn’t exceed about 2/3 of the width of the page.
  6. Post finding & navigation - On sites with hundreds of posts it can take a long time to find what you’re looking for. You need to have a navigation of your posts preferably separated into categories, this way people can find your posts by looking in the right place. You should also include a search bar in case your users want to find something specific. Finally including an archives page on your site allows your users to browse your entire back catalogue. Some people include archive dates on their sidebar, but I think this uses up unnecessary space. Having a list of between 5-10 of your latest and most popular posts is a much more useful solution as it should stay automatically up-to-date.
  7. Frequent usage - A successful blogger would look to add at least one post per day to their blog to keep interest and activity in the blog going. However it is also easy to post too many in posts in one day, some of which will be irrelevant to the context of your blog, which will begin to deter users from reading your posts. Keep on=topic, relevant and try to be unique as duplicate or copied content can work against you in Google’s rankings.
  8. Author biography - You needn’t tell your life story, but a brief overview of who you are, what you do and why you are qualified to write your blog will go a long way towards validating your opinions and comments in the eyes of the user. Providing users with your credentials and experience will give them reason to trust what you say, and this will result in more users linking to and visiting your site.
  9. Clear blog title & purpose - To make sure you and your users know what you’re writing about you should aim to make it very clear what topic areas your blog. Keep the subject range quite narrow as users want to be reading about a particular subject. I used to have a blog about Science, Technology and Multimedia which was too broad so I narrowed it down to Web 2.0 & Usability, which I can focus more clearly on. Come up with a good title for your blog and make a nice clear heading so people can tell instantly where they are. Add this title to your <title> tag and make sure this is written into any links coming into your blog.
  10. Clear RSS feed - If you want more subscribers, there should be a prominent and explanatory RSS button, ideally situated in your header or near the top of your sidebar. Some users will not realize that there’s an RSS feed in the address bar, so you must make it easy for them to subscribe. You can create multiple RSS feeds by using applications such as MultiRSS, Feedburner, RSS Mixer, Yahoo! Pipes and many more.

I hope these blog usability guidelines were useful and appropriate to you. If I’ve missed anything out or you have an comments on the guidelines I’ve written, please leave a comment. I guess encouraging users to leave a comment as I’m doing now should also be a usability guideline. Well, I’ve done it now anyway…

by Adam Moss 

Gestalt Law of Proximity in Web Design

March 16th, 2008

Including Gestalt laws of user psychology can go a long way towards ensuring that your website caters for your user’s usability needs as they navigate through it. Psychologists have determined that the brain acts in a certain way when perceiving objects on a computer screen, and knowing this can help ensure your site is more concerned about the user’s needs than your own.

In the next few days I’ll go through each gestalt law; Proximity, Similarity, Continuity and Closure, one by one to show how they can be advantageous to website design. I’ll start with proximity.

Proximity

This law refers to the observation that objects appearing close together in space or time are perceived to be together. So basically the rule should be to group related items together so that related items are seen as one cohesive group rather than a bunch of unrelated elements. The dots below should demonstrate the point.The dots in the group on the left would be considered a ‘group’ rather than being individual dots that happen to be near. The ones on the right would be considered as three lines of horizontal dots due to the larger gap between rows than the columns. We can apply this process to web design.

In the case of navigation, proximity can be used to very subtlety, but effectively, distinguish different parts of the navigation. For example, Technorati separates parts of its navigation by splitting the row of links into two groups. The group on the left allows you to search through different blog topics, whereas the group on the left allows you to browse more content-driven topics. The administration and technical sections are kept seperate altogether from the main navigation as they wouldn’t be perceived as being part of the same ‘group’.

Another website I was impressed with is Hitflip.co.uk. This is a technique I have noticed a lot of news sites do also. There’s a column of boxed areas down the left side of the page, all with headings related to different product areas. Those categories are further categorized within each box. You know exactly what type of product you’ll find when you click on these links and they’re available from the homepage. Excellent use of proximity and usability, although the fact that the user must scroll down the page to reach them reduces the impact slightly, I feel.

Sticking with Hitflip, proximity comes into play again on the site footer. The screen shot below firstly shows a ‘greyed-out’ area which usefully separates it from the main content. Despite all the links inside this grey box being ‘boxed-off’ together, we don’t interpret them to all have the same meaning, simply due to how they are arranged. Nor do we see the links as individual elements, as we can clearly see there are five columns all offering administrative and support topics of different types. The footer links are then cleverly categorized into five groups and are placed under simple headings offering varying methods of user service.

These are just a few example of proximity on the Internet offering more usable website design. If you have any other examples or comments on the ones I’ve shown, please leave a comment and let me know.

Usability Vs SEO

March 13th, 2008

This article is an investigation into whether search engine optimisation and usability are compatible, enabling a user to find a website in a search engine, and then find what they’re looking for once they’ve found it.

Usability and search engine optimisation are both of fundamental importance when developing websites on for the Internet. SEO should be given precedence in the design of a website to improve the chances of users actually finding the site in the first place. Likewise, usability should be of high priority so that users aren’t put off using the site within seconds of finding it.

When optimising a website by maximizing keywords, it is essential not to disrupt the quality of content on the page being optimised. There is no point in spending time and money on directing traffic to your site if the user will back straight out. If you’re at all interested in repeat traffic, usability has to come first. (Peter V, 352media.com: 2007)
The result of poor quality text in a keyword-optimised website is a page that reads like a search engine result page and not one that’s content is centred towards the users’ interests. It should be the case, should it not, that search engines reflect the content of the pages they index, not the other way round? Writing page content that engages the user and speaks their language should not be borne out of a need to fit within Google’s requirements but rather a need to fit the users’ requirements. (J Gibbard, smorgasbord-design.blogspot.com: 2005)

However it is possible to use search engine optimisation to enhance the usability of a website without comprehensive UCD testing. Using descriptive links indicates to the user they are heading in the right direction, emphasizing words with bold text and headers highlights important elements of a website’s content whilst encouraging scanning. Inevitably, user-centred sites with consistent navigation, simple layouts and correct arrangement of keywords are more likely to attract links from elsewhere.

In a recent keynote speech in Barcelona, usability expert Jakob Nielsen predicted that simplification and resolution of basic problems is the key to a positive user experience. Nielsen underlined this point by demonstrating the changes Google has made to its search engine results pages over time, reducing the level of content, removing a left hand column and continuing to improve basic user experience elements such as page load times - from 0.23 seconds in 1999 to 0.08 seconds in 2007. (Jakob Nielsen, bigmouthmedia.com: 2007) With Web 2.0 technologies such as blogs, discussion boards and RSS now in the web design framework, all of which intend to encourage simplification of web processes and user-centred input, there’s scope for significant improvements for all involved.

To evaluate, it appears that SEO is still at a very early stage in website development and the likeliness of gaining a high search engine ranking is still largely determined by incoming links and brand awareness. User centred design however is a very established practice and only when SEO can be incorporated collaboratively into usability’s strict set of guidelines, can a worthwhile partnership be formed.

By Adam Moss