Evaluating Your Design [Design]

The successful evaluation of designs are crucial for designers. A designer needs to go back and study a design’s strengths and weaknesses to better understand how it could be improved. This is never more apparent in the design of an ongoing project, like a blog, which may go through many redesigns in a short period.

In this article I will cover how to successfully evaluate your website design, determine what needs to be improved, why they need to be improved and most importantly what tools are available to help you.

two weeks ago a new design for dtsn was pushed live, since then a number of tests have been performed on this site to help evaluate how well the design is at achieving it’s goal.

Have a Goal

To be able to assess how well a design has been working a goal needs to be set at the start of the design process, this is often referred to as a design brief. Something along the lines of ‘This design will ….’, in the case of dtsn the design goal was to decrease the bounce rate, and increase the number of actions per visit.

This very basic premise can be scaled up for large webapp or even scaled down to something as simple as a form. You can’t design successfully without a purpose and this purpose is therefore fundamental to any design you create.

Execution

You can easily split up the evaluation of your design into 2 sections, layout and usability. The layout defines the page structure and the position of your separate components on the page, whereas the usability defines each component and how a user interacts with the component.

Layout

The layout is one of the simplest aspects of a design to be able to evaluate because there are many tools available to help you. One of the most popular is to use a heat map tool, such as crazyegg, but others are available in a normal standard analytic package, such as Google analytics. Tools such as the bounce rate, the user’s entry and exit, and the site overlay all provide measurable statistics to compare one layout to another.

In the example of dtsn I ran a test with crazy egg over 1 day with 200 visitors, out of the 200 visitors only 146 visitors clicked on the site and this created the heat map below. You can easily see which aspect of the site attracted the most clicks, and which need to be improved.

From viewing this heat map you can draw a number of conclusions about the design. Firstly the third column seems to have the fewest number of clicks. Secondly the RSS (subscribe) link still seems to have very few clicks.

Usability

Usability is very hard to successfully evaluate, especially if you don’t have the budget of Google behind you. Usability tests how easy a user finds it to use your site, or a particular aspect of your site. This can only really be successfully tested by using a group of friends or colleagues. Sit them in front of your computer and watch how they interact with your design.

There are two opposing viewpoints of measuring the usability of a site. On one hand it is useful to set a measurable goal. However if you are testing an entire site it may be best not to set any goal and let the user interact with your site as a normal user and not as a tester.

The best way to measure this is to use a webcam, alongside screen capturing software. This provides data in which you can watch a users facial expressions while they are interacting with your site. This has been wrapped up into a very easy to use Mac program called Silverback.

Conclusions

The points I have laid out in this article may be very simple points which every designer follows. However I believe that many designers are not performing these tests and are therefore loosing out on proper feedback and critique of their designs.

The tests that were performed on dtsn show that the bounce rate did decrease. However after running a few more test’s I further improved the design to decrease the bounce rate and increase the actions per visit. The heatmap above shows that the clicks are now more focused onto certain points and the actions per visit have increase by approximately 20%.