7 Tools You Should Be Using For Better Web Designs

Feb 4 2010 by Mike Takahashi | 33 Comments

We’ve all come across websites with amazing designs only to be frustrated because it was hard to find things or confusing to use. As a web designer or developer, how do you know if this is happening to your website?

Statistical applications such as Google Analytics can help, but that’s not enough. To gain greater insight, you should take the time to engage, interact and understand your audience.

7 Tools You Should Be Using For Better Web Designs

There are several tools that can help. Using them will lead to a more effective design, improvements in usability, and ultimately, a better website.

1. Heat Maps

Heat Maps

Heat maps by companies such as CrazyEgg give a visual representation of what users are doing on your site by tracking each individual click a user makes. It even tracks clicks that aren’t links, something that Google Analytics does not provide. With heat maps, you can find out if users are using the site the way you intended and make changes where needed. For example, are users incorrectly clicking on text or images that appear to be links?

2. Online Usability Testing

Organizing users for traditional usability testing in a controlled environment can be a very time consuming and costly process. Several companies provide usability testing completely online in both a moderated and non-moderated style. This can save time and give more control over your testing scenarios.

In a moderated style, you create test scenarios, assign them to pre-screened users, and watch the results.

In a non-moderated style, no scenarios or tasks are assigned. Instead, visitors’ entire browsing sessions are anonymously monitored, recorded and studied.

Moderated

Moderated

With UserTesting.com you create a set of test scenarios, select the demographic profile of your target audience, and the amount of users you want. Pre-screened users provided by UserTesting.com then complete the test scenarios while every screen action, movement and spoken comment are recorded as a Flash video for you to view. This gives you insight on how users interact with your user interface.

Unmoderated

Unmoderated

ClickTale takes a different approach by providing the ability to record movies of any visitors’ entire browsing session while on your site. By inserting a small piece of JavaScript code into your pages, ClickTale can track every movement, click, scroll or pause. This can be very powerful. It can give you a greater picture and understanding of visitor behavior within the entire design of your site. You can find out exactly when and where a user left to determine if there are certain problem areas. For example, poorly designed online forms often cause visitors to leave. By showing every interaction a visitor makes with your page, you can carefully analyze what works and what doesn’t. Check out the ClickTale Demo video on YouTube.

3. A/B Testing

A/B Testing

Having trouble deciding which design for your home page will work the best? Google Web Optimizer can implement A/B testing on your site to help determine which one is most effective. It allows you to implement multiple designs of the same page, which are then randomly shown to visitors.

You can then compare the results and see which design is most effective. A/B testing takes the guesswork out by using real information to help make informed decisions about the design of your site. See this video on A/B Experiments with Google Website Optimizer on YouTube.

4. Crowdsourcing

Crowdsourcing

The Huffington Post takes A/B testing one step further by using crowdsourcing to determine how the crowd itself prefers the wording for headlines. Headlines are known to literally make or break an article regardless of its content. To help create the most interesting headlines that will capture the audiences’ interest, visitors are shown one of two different headlines randomly for the same story on a page. After the first 5 minutes of being posted, the headline with the most clicks is left as the final one everyone sees.

5. Internal Search Data

Internal Search Data

Google Analytics has a feature called Site Search that uses internal search data to track and analyze what visitors are searching for within your site. Internal search data is very important because it helps give insight into what your visitors want and why they are there.

Using this information, you can find out if your site has the content your visitors need. Site Search can also tell you how effective your content is organized and if it can be easily found.

For example, when visitors use your search, which link do they click on first within the search results? Is it the correct page? Or do they search for a few pages, then get discouraged and leave your site? These are just some of the important questions that Site Search can help answer to help manage your content.

6. Monitoring Services

What are people saying about your site? Listening and monitoring your audience through unsolicited feedback can be a very important tool to help understand them. These channels allow you to stay relevant with your audience. This way, you can create informed decisions about the direction and design of your website.

Google Alerts

Google Alerts

Google Alerts allows you select specific search terms and notifies you via email or an RSS feed anytime that phrase is found by Google. It gives you the ability to search within blogs, news, groups, video and the web.

Twitter Search

Twitter Search

Twitter’s search function allows you to monitor what people are saying in real-time. Additionally, within the advanced options, you can limit searches to particular locations, dates, and even if users are asking a question.

7. Blogs

The grandfather of all tools and something each website should always consider. By implementing a blog, you create an official channel of communication between you and your audience. You can keep them informed of changes or new features and encourage audience participation and feedback.

Conclusion

Often times many websites launch a new design and they think their work is done. Good designers and developers should constantly stay relevant with their audience. These tools will help you engage and interact with your audience. It will help you understand them more effectively, lead to greater usability, and deliver the most out of your website.

Additional Resources

Related Content

About the Author

Mike Takahashi is the Web Strategies Manager for Communications and Public Outreach at UCLA (University of California, Los Angeles). He is passionate about every aspect of design and how technology can help influence our lives in meaningful ways. You can follow him on his blog at TAKA DESIGNS.

33 Comments

Lee Fuller

February 4th, 2010

A very useful article, I already use some of these tools, (mostly the Google tools, plus a commenting system) all prove very useful, when designing and updating sites.

Some of the tools, I hadn’t heard of but will definitely give them a try.

Thank you again, for a great article.

Robert_M

February 4th, 2010

Ok that Heatmaps tool is pretty sick though IDK if I can convince my company to pay for it. I’ll just mention it’s like Predator vision. :)

StevenBullen

February 4th, 2010

I use most of these already. :)

Will be testing out ClickTale though.

Matthew Heidenreich

February 4th, 2010

i always use my google analytics to see where people are going on my site the most, to determine what kind of articles to add. I might look into the heat maps though, thanks for this share.

Codesquid

February 4th, 2010

This an excellent article! It’s always interesting to see how other people use your site.

Thai Yin

February 4th, 2010

Great info, although you’d need a good amount of traffic for statistically significant data.

Simon Carr

February 4th, 2010

Heat maps are a great tool… I also think the bit about writing effective headlines is very important.

@Mike – Thanks for sharing.

Orlando

February 5th, 2010

Hi mike!I think Heat maps are gerat tool by using this we come to know that what users are doing on your site by tracking each individual click a user makes.

Thanks for sharing the tools.

Yagnesh Ahir

February 5th, 2010

Hey Mike, thanks for sharing such a resourceful article. This article will help me for organizing my website and blog. Keep posting.

WebDesignExpert.Me

February 5th, 2010

Those are great tools! Good list, sure to be useful for the web design janta. I would also add these tools: ConceptFeedback.com, ClientShow.com, Vyoopoint.com, all useful during the initial design stages of a website to get feedback from clients and fellow web designers.

bono calacal

February 5th, 2010

Retweeted this. Thanks for sharing these tools. cheers

Max

February 5th, 2010

Thanks, Mike! Found some new services from your post! keep up good work and great content!

Ajay

February 5th, 2010

Great article! Thanks for sharing

Kunjal Kamdar

February 5th, 2010

Hi Mike,
Thanks for this amazing list.This will surely help. Also Retweeted this.

deerawan

February 5th, 2010

wow..thanks for writing this article. Heat maps is really awesome tool. I’m gonna check it.

Adam Fairhead

February 5th, 2010

Great post, thanks for sharing. I’m checking out CrazyEgg now :)

Omer Greenwald

February 5th, 2010

Great article! thanks. Usability testing can’t be overrated

Jordan Walker

February 5th, 2010

Not only helpful for web designers, but all internet professionals alike.

Barry McGee

February 5th, 2010

Nice article, will have to use more Analytics features in future..

Mike Takahashi

February 5th, 2010

Thanks everyone.

@WebDesignExpert.Me – ConceptFeedback.com looks like a another great use of crowdsourcing. Thanks for sharing.

Webtoolfeed

February 6th, 2010

Nice article, i like the heatmap.

Michael Slater

February 6th, 2010

Great list. One suggestion to add to the Blog item: use a platform that allows you to build the blog into your site, rather than it being external, so it is visually integrated and you gain the full SEO benefit of your posts.

Autonomy

February 6th, 2010

Wow, Heat Maps are freaking sweet! Great article.

Cairns Web

February 7th, 2010

Want to see something scary, use these tools and see how the end users are using the site, just watching everyday people use websites is scary.

Marc

February 7th, 2010

These are great tools, i personally use clicktale which has the best of the bunch in my opinion. Its heatmaps are second to none.

MorningtimeD

February 7th, 2010

Thanks for the A/B testing links, we’re aboutt to delve deeper into that world!

Derrick

February 8th, 2010

Wow! ClickTale is pretty amazing… Thanks for putting this together.

Subbu

February 9th, 2010

Thank you so-much for Great article. I subscribed your feed, I will be expecting such a nice articles from you.

viettel

February 10th, 2010

Great article! Thanks for sharing

Cre8tivegirl

February 11th, 2010

great article, great resources. Thank you!

Rob Loukotka

February 16th, 2010

Whenever I’ve used heatmaps, the maps ended up very inaccurate. I forget the service I used, it wasn’t the service listed in this article. Even the site overlay from Google Analytics is pretty off.

Has anyone used a service that yielded good heatmaps? I’d definitely be interested in some more solid data there.

Mike Takahashi

February 17th, 2010

@Rob – I’ve found Crazy Egg to be pretty accurate. They have a 30 day trial, so you can always try it out and see what you think.

Craig

September 20th, 2010

Thanks for the nice round up of tools, just starting to look at Google analytics a little more with the A/B testing and Site search, has been very interesting so far, and will have a look at the other recommended tools for better web designs.

Leave a Comment

Subscribe to the comments on this article.