Designing Based on Data

After my last Usability course this semester a designer/peer, Andrea Richeson, were chatting. She asked me if the course had changed the way I think about designers. I did not have a good answer at the time because I fancy myself a bit of a designer: I’ve created several websites (MPC, SE, SSE, SethHolloway.com) and I constantly build/tinker in both virtual and physical spaces. Beyond considering myself a programmer and designer, I found usability testing to be an amazingly practical part of creating something for people. The methods are similar to my favorite software development methodology: agile development–get the requirements, do a small piece, fix what is broken and ensure people like the effort so far, repeat. After some reflection I can say the course did not really change my view on design, it gave me a framework for evaluating and altering design based on user data.

Fresh out of the class with a solid understanding of the art of usability testing, I was taken aback while reading a New York Times article about a designer who left Google and went to Twitter. He left Google because of their rigid adherence to trusting data. I am confused how a designer could disagree with trusting data. If you do not like this approach, you don’t believe in (1) the way they collect data or (2) trusting the users. The article does not explain how Google collects their data nor does it explain the designer’s disdain, but from what I read I think Google’s approach is perfect.

Google receives millions of unique visitors per day and they are known for changing elements on the page (think of the whimsical, dynamic elements like logo changes and the “Feeling Lucky” button), so it is not hard to believe that Google would put up different designs of the same page. Now, a fraction of the millions of users sees one design and another fraction sees the other design. From the web server’s standpoint, data collection is fairly easy–especially with AJAX-enabled dynamic pages: just stream events to the server for logging. Later, a human can analyze the data and make decisions. With sample sizes in the thousands, statistical validity is almost guaranteed!

The approach is wonderful: people’s behavior determines the best design for the job and the data is collected without the user’s knowledge. What’s better than getting people’s feedback without their knowledge? Hidden camera shows have always exposed wonderful insights, but we can only get at the truth when people let their guard down.

That is how I imagine the data is collected and the approach seems infalible, thus I must conclude that the designer does not believe in trusting users despite the flawless data collection methods. Even outlandish designs can yield positive results. I’m sure I’m missing nuances, but I side with Google. I believe in designing based on data because it keeps us moving towards usable, pleasing designs.

Let Google do the heavy lifting!

I love Google. They represent so many positive ideas about technology and offer an amazing suite of tools. Gmail is fantastic. I adore Google Calendar. Google Scholar is the only site I need for research. Google Reader is the best RSS feed reader on the market. Google Docs works a like a charm and is infinitely handy. I have entrusted my workflow to Google and had positive results. They’ve taken over the heavy lifting and ushered in an era of browser-based productivity that I agree with wholeheartedly. I’m excited today to use yet another Google server: I added Google Analytics to the site

In last week’s Introduction to Usability course we discussed good and bad websites, and one student selected Google Analytics as a good website. The Analytics page provides all the necessary statistics on your sites traffic including their IP address and corresponding location, the number of unique visitors, and timing. It was characteristically Google: clean, easy to use, and hugely useful. I had no idea the service was free!

Inspired by the class I checked into Google Analytics further and signed up. I added http://www.sethholloway.com to the service and they generated the necessary javascript–they even told me where to place it (though I already knew enough HTML to insert the scripts)

Here’s the generated javascript:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ?
                   "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost +
                          "google-analytics.com/ga.js'
                          type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
  try {
    var pageTracker = _gat._getTracker("UA-7555904-1");
    pageTracker._trackPageview();
  } catch(err) {}
</script>

And the only change necessary to gather statistics from across the blog is contained in header.php. From your WordPress admin panel click Appearance->Editor->Header (header.php). Then locate this bit of code and insert the generated code where I placed the comment below:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>

//PASTE GOOGLE ANALYTICS CODE HERE AND REMOVE THIS LINE

</head>
<body>
<div id="page">

That’s it! So simple! So useful! If you haven’t already signed up for Google Analytics, do it now. The service is free, incredibly helpful and easy to use; even better, installation will take you less time than heating up that Hot Pocket!

What’s new? Ads!

I hope my lovely, intelligent readers do not mind the two new ad panels (at the bottom of individual posts and in the sidebar); RSS readers should not notice any changes. This was a fun technical project that may make me a dollar over about twenty years

Here’s how I added ads to the sidebar and the end of single posts in my WordPress blog. You may be able to do it easily with a plugin, such as one of the ten featured in this article, but I chose to do it manually to learn more.

For ease, I used two tabs. In one tab I generated ads and another tab was used to edit pages.

Generating Ads. Google makes it easy with AdSense. You can see your options for ads here. First, sign up for AdSense then enter the AdSense Setup page, the Get Ads tab. Both my units are AdSense for Content; one Ad Unit and one Link Unit. After choosing the options I wanted, I was given sample code. I copied this code and switched to the other tab.

Editing Pages. First, get to the Theme Editor:

• Log into the administrative panel.
• Click the Design tab
• Click the Theme Editor

I put the banner ad at the bottom of the single post. To do so I copied the generated code then performed these steps:

• Selected Single Post (single.php)
• Pasted the following code above the line “<?php get_footer(); ?>”:

<!— Ad support. Added by Seth Holloway on Jan 9, 2009 —>
<div id=”ads”>
<script type=”text/javascript”><!–
google_ad_client = “pub-2003017988956692″;
/* 728×90, created 1/8/09 */
google_ad_slot = “5798236936″;
google_ad_width = 728;
google_ad_height = 90;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>

For the sake of looks, I then needed to edit the stylesheet in the following manner:

• Selected the Stylesheet (style.css)
• Added this to the code:

/* Ad support. Added by Seth Holloway on Jan 9, 2009 */
#ads {
text-align: center;
}

I then generated the sidebar link unit, copied the code, and followed these steps:

• Selected the Sidebar (sidebar.php)
• Pasted the generated ad unit to the code above the final “</ul>”:

<!— Ad support. Added by Seth Holloway on Jan 9, 2009 —>
<li>
<script type=”text/javascript”><!–
google_ad_client = “pub-2003017988956692″;
/* 120×90, created 1/8/09 */
google_ad_slot = “2887058896″;
google_ad_width = 120;
google_ad_height = 90;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</li>

And voila! We now have two unobtrusive ads on sethholloway.com.

Later, I would like improve the relevance of the ads and to add Digg, Reddit, and Sharethis buttons.

Any tips for items missing from the blog? Did you notice the ads? Do you hate them?

Do you have 10^100 good ideas? Let’s start with 1

I had an idea for a website that would cover one issue per day. Clean and simple; just one issue per day. The idea came after I got frustrated with the amount of clutter on various news sites, and while there is a lot of overlap, to really keep up with the world you have to visit a number of websites per day. Instead, why not have one thoughtful, easy to read post per day. Intellectuals could meet at the water cooler and discuss the topic. We’d gain exposure to important, interesting ideas all through a simple central location.

I never got very far with my project, but Google is doing a similar thing with their 10^100 campaign. To celebrate 10 years, Google wants to raise as many helpful ideas as possible. Google and CNN are collaborating, so the star power is there; now we just need some good ideas!