Ben Bleikamp's blog about technology and college

Data Driven Design, Part 1

When I started designing websites in 7th grade everything I did was based on what “looked cool” (and I promise, none of it looked cool). When I started designing blogs and websites for clients, I still focused quite a bit on what “looked cool” and a lot less on information architecture, color choices, and other elements that make up designs.

It turns out, I was designing the wrong way. For the past two or three years I have slowly moved from throwing together some gradients and rounded corners in Photoshop to focusing on each design choice as the solution to a problem. Only at the end of my design process do I start adding subtle gradients, colorful icons, and worrying about what color a link is (it should usually be blue!).

If you’re reading this and thinking, “Yeah…duh, Ben” then you were ahead of me 3 years ago - congratulations. If you’re reading this and wondering “What data can you use as a designer?” then keep reading.

Be forewarned: I am not a math genius, I am not great in science - English was always my best subject and you can probably tell from my writing at Bleikamp.com that I’m not the next Mark Twain, William Faulkner, or Ernest Hemingway. Looking at data and making some inferences doesn’t take an IQ of 150 - it just takes some common sense, some logic, and the ability to read.

My Favorite Tools

CrazyEgg - http://www.crazyegg.com

CrazyEgg uses a simple piece of JavaScript code to track where and what people are clicking on your site and then shows you a heatmap of what’s being clicked. This is a great tool to analyze new designs and make sure people are doing what you want them to do.

It’s affordable, it’s useful, and it’s fun to look at - you should be using this or something similar on a regular basis if you own or operate a website.

Google Analytics http://www.google.com/analytics

If you aren’t using Google Analytics (or some advanced analytics software) - what are you thinking? The information you can learn from analytics software goes far beyond which sites are linking to you and how many page views you’re getting. In fact, those statistics are pretty irrelevant if you don’t know how users are using your site.

I won’t go into too much detail into how you can use Analytics in this post (it will be a full post later), but goal setting and tracking, bounce rate, time on site, pages per visit, etc. can all give you insight into how your users are interacting with your a given page and the overall website.

A/B Testing
There are a number of ways to do A/B testing with websites and track the different actions of users, but most designers never think to do it. It is a great way to test new ideas that might affect click through rate, earnings per click, etc.

Reports, reviews, studies, books…
I don’t have the money to pay users to use my websites and track where their eyes are moving, but other people do - so we can use what they learned and apply it to our own work.

Reading through eye tracking studies, use cases, and other papers about internet users is important for anyone working on the web.

You’ll learn how the average person reads a web page, you’ll understand why putting a search box in your footer isn’t very amusing, you’ll realize that 60 year olds use the internet differently than 20 year olds, and you’ll figure out some other general rules about user experience and user interface design that are essential to making useable websites.

What will we talk about in the next few posts about data driven design?

I will go over some examples of how I have used or do use the tools I listed above, list some resources that I think are essential to have in your bookmarks folder, and go over some examples of designs that I think don’t work…based on data.

If you’re not interested in web design, user interface design or user experience design, that’s okay. Hopefully you’ll pick up some hints on how you can use data to improve your craft.