I had the pleasure of attending the RefreshDC presentation on Data-Driven Design that was given in May, 2011 and it really opened my eyes up to some of the great tools there to collect concrete data on how users are using your website.  What they are clicking on, where their focus is, how far down the page they are scrolling, and just how much of your site they are actually seeing. Also, if that button to get them to download your application was just a bit bigger, just a bit brighter, or labelled just a bit differently…would it matter?


This particular meeting was set up as a panel discussion in which Greg Robletto, The Motley Fool’s Director of User Experience moderated over a small panel that was comprised of:

• Paul Koch, Marketing Specialist at Viget Labs
• Jim Lane, Director of user Experience for AddThis.com at Clearspring Technologies
• Craig Green, Web Strategist at Network Solutions

The talk started out discussing a bit about Google Analytics, a crowd favorite that is well known by most people who work on the web, but then really focused in on various tools that are available for A/B Testing to allow web professionals to try out different elements, styles, and look and feels for a particular site, and gain statistical information on what users did or did not respond to. But so we all know about the wonder of Google Analytics, and the rich information that it can provide. We also know how to swap out controls and segment our users to see what works best – but do you know of all the tools out there to help you with A/B testing, and to help you collect actionable data from these tests?

So what other tools are out there?

Once the discussion got going, there was a bit of a free-for-all where various tools for data on your website was thrown out there and discussed.  Given that many of these tools are new to me, and not necessarily my area of focus, in some ways it would be a disservice for me to try and describe what they do and how well they work at their jobs. I think what may be more helpful is for me to point out some of the tools that were mentioned to allow you do do your own research on them, and go from there. To me, this is part of the job of helping you to tackle the question of  “How do you know what you don’t know?”


Take the following descriptions as you will, I’ve chosen in most cases to use the marketing lingo that each of them has on their website:

• Ninja buttons – Creae, test and optimize call-to-action buttons to convert more visitors inot paying customers. Allows for A/B testing of various buttons.
• Omniture – helps marketers quickly identify the most profitable paths through a website, segment traffic to spot high-value web visitors, determine where visitors are navigating away from the site, and identify critical success metrics for online marketing campaigns
• Google Analytics – A crowd favorite, I don’t think I need to describe all the wonderful things that this tool does
• UserTesting.com – The fastest, cheapeast way to find out why users leave your website
• SurveyMonkey – SurveyMonkey makes it easy for you to create you own Web-based surveys
• Google Website Optimizer” – Instead of guessing what your visitors respond to, get hard data on which images, headlines, descriptions, and layouts produce the outcomes you’re looking for. There was some discussion on how the data out of the A/B testing is not accurate.
• BTBuckets – allows websites to increase engagement and ultimately maximize conversion rate optimization in real-time, by segmenting and targeting strategic user groups.

Many of these tools seemed great, and were discussed by the panel, but really digging into them was left for the audience to do. One of the tools that was presented by Viget’s Paul Koch was ClickTale, and the benefits of this tool were readily visible.


Through the use of heatmaps that track where users move their mouse to, where these scroll to, and where they click on, ClickTale allows you to ‘watch’ all the users on your website without standing over their shoulders. It is well known that users tend to move their pointers to where their eyes are focusing on a page, and through these heatmaps, it is apparent that this hypothesis is true. Of course the question came up, but what about mobile? That remained an unanswered question for this panel.


But so now that you have tools to help you gather data on how your users are using your website and tools to conduct A/B testing on your site, should you just blindly follow the data? As designers and developers it isn’t just your technical abilities that make you valuable, but also your ability to reason through things and sometimes rely on your intuition. The data may be guiding you in a particular direction, but your expertise may tugging you in just the opposite way.


Not listening to the data – when do we want to do this?


I think that Paul put it best with the following:

“Even if a big ugly BUY button drives traffic if it detracts from the brand you may not want to do this.”

And this was backed up a bit by a real world examples where an online survey of the various widgets available for AddThis had the widget on a black background as the one that was most liked and stood out.


ClearSpring’s Jim Lane said that the AddThis UI gets rendered about 2.5 billion times a day. Even though the black background version won the A/B test it doesn’t mesh well with many sites and thus isn’t the default UI. That makes great sense when we think about websites that are out there, but is a great example of when we choose not to necessarily listen to the data.


But often they have listened to the data, as in their constant effort to make it easier for end users to download their widget. By gathering data from the user, they chose to remove steps/clicks to get to the AddThis code and increased usage by a measurable factor. Other testing that they have done includes a 32-way test on the “Grab This” button. different sizes, Colors, etc. Lucky for them with 2.5 billion renders a day, their userbase is large enough to get statistically significant data on such a large A/B test in under a week.


So the goal of this post is to arm you with various tools and methods to collect data on how your users are using your site, and what changes work best to attract your users.  Hopefully these tools help you determine what keeps them on your page, but the question still remains – how quickly you should make changes to your websites?


Do you do small changes in order not to throw off your regular user base, or do you lump all the changes in at once, and just throw in out there. Here are some thoughts:

“How quick to make a change to the User Experience for testing? A bit of an Art. Sometimes you’ve got to go large.”

“To get statistical data on a lot of changes can take a lot of time so sometimes it is easier to take a change at a time. – Paul”

But one strong word of caution came from the audience that I thought was especially relevant and may help you figure out how you may want to time out your changes:

“You have to be careful – working with these tools can get addicting and you can do tweaks forever and meanwhile the business is moving on.”

Optimizely

At the end of the session, one of the panelists tool one of the tools he had just heard about for a test run. The tool was Optimizely.com and it was pretty amazing how with just their “Get Started” tool on their front page, we were able to redesign the CNN website in just minutes. You should head out there and give it a try.

Staying Ahead of the Game

But so now that you are armed with various tools to get you stared down the path of data-driven design, how do you stay up to date on the changing world? How do you know when new tools are out there, and when some existing tools may not provide the most adequate data? I love the fact that the panel discussion ended with resources on how to stay up-to-date in this field. In fact, if I’m not mistaken, I believe Paul said that he found out about Optimizely.com from the first reference in the list:

• Kaushik.net
• KISSmetrics blog

And Jim was kind enough to provide his twitter handle, where he also adds information on Data-drive Design-@jimlanenova


Thanks to Viget Labs for hosting RefreshDC for the month, and OPower for being the food sponsor, and of course the great people who donate their time to keep RefreshDC going!

As a developer, I love the Manning “In Action” series books. For me they have become the defacto reference books of the last 5 years or so, even surpassing the O’Reilly books. But in general, I have felt that the “In Action” series has been really targeting the developer.

When I started reading the “iPhone in Action” book, I was quite surprised to find that a good portion of the book targeted the designer as well. Don’t get me wrong, its a great developer book as well, but there are many chapters devoted to discussing develop web pages and web-based applications for the iPhone platform as well.

I don’t want to give away too much, because the authors have worked hard on this book, but I thought I’d give the reader a feeling for the type of information that is in the book. I recommend anyone who is doing iPhone development – or is just interested in the websites they develop working well on the iPhone to read this book. From detecting that users are visiting their sites from the iPhone to making small adjustments to make their sites more iPhone-friendly, I think designers will find this to be a worthwhile investment.

Viewport size

The first point that the book drives home is the concept of the viewport. This is the viewable window on the iPhone which has a display resolution of 320×480 (or vice versa, depending on orientation). The iPhone maps a much larger virtual window to that screen when you run Safari. The default virtual window is 980 pixels wide, which is then scaled down by a factor of approximately 3:1 or 2:1. For this reason, many websites are viewable on the iPhone, but the user interaction may not be that friendly. Items such as links may be hard to press with the user’s finger – after all it is nearly impossible to just select a pixel or two with your finger.

Events

This brings up a very good point – your user is no longer using a mouse as their “pointer”. Initially you may not think that this is a big deal, but then you begin to think about events that may not work as you originally intended.

• document.onkeydown
• document.onkeypress
• document.onkeyup
• formfield.onmouseenter
• formfield.onmouseleave
• formfield.ondblclick

These are just some of the events that they cover that aren’t going to work as originally intended when a website is viewed on the iPhone.

And there are other events that work in different ways on Apple’s smartphone. Consider these:

• formfield.onmousedown
• formfield.onmousemove
• formfield.onmouseout
• formfield.onmouseover
• window.onscroll

All of a sudden that website that you thought would just work on the iPhone you start to question. At least I know that I did. I’d be surprised if the best of web designers didn’t learn a thing or two from this section of the book. While there are other sites for information on event capability between platforms, “iPhone in Action” helps you quickly see how to modify your sites for the iPhone platform.

Viewport tag

Going back to the viewport, if you do nothing else to have your pages adjust for the iPhone you should set the viewport size. This is done in the following way:




<meta name = “viewport” content = “width = 500″>




The viewport tag is provided by WebKit, which is used by Safari (and others, but not IE and Firefox at this time)

What size should your viewport be?

Deciding on the correct sitewide viewport size will take some fiddling and the size of your elements such as graphics or fonts may force you to select a certain value. If your site happens to use a navigation bar, you will probably use its width as your viewport size.

In the absence of any specific issues, a viewport size of 480 tends to work great. It will be readable in portrait mode (at a 3:2 scale) and very readable in landscape mode (at a 1:1 scale). You won’t want to go much lower than that, and you definitely shouldn’t go all the way down to a 320-wide viewport; a change that extreme will probably make your web page break in other ways, and also ignores the excellent clarity of the iPhone screen.

Detecting the iPhone

I think that most people working on the web today know that the iPhone will be a strong contender as far as a mobile web platform. Beyond setting the viewport, there are many other things that you may want to do to change your website when viewed on the iPhone.

The book in fact goes into how to make web-based applications for the iPhone that “look and feel” much like native iPhone applications. I’ll leave those details for you to discover from this excellent resource, but I’ll close with their two examples on discovering that your user is visiting using an iPhone.


Here is their example using PHP:




<?
if (ereg(“Mobile.*Safari”,$_SERVER['HTTP_USER_AGENT'])) {
$iphone = 1;
}
?>




and since most designers these days are well versed in CSS, and know its great benefits, here is the CSS example:




<link media=”only screen and (max-device-width: 480px)” href=”small.css”
type= “text/css” rel=”stylesheet”>


<link media=”screen and (min-device-width: 481px)” href=”large.css”
type=”text/css” rel=”stylesheet”>




Besides being the Apple supported way of doing things, this has the added benefit of working on other small-devices.


Personally I’m still working through the book, and will follow up here as I develop my first app for the iPhone, but I suggest designers and developers give this book a read. You may not be targeting the iPhone, but I’m sure that many of your website visitors are!

That was the answer back in the dot.com bust when I would hear “web developers” trying to separate themselves from the “secretaries” using an html editor.

We know that web design is much more then that.

What do you use? Just HTML/CSS in your favorite editor? Grids? Photoshop? Dreamweaver? Frameworks like Blueprint CSS, Compass, Ruby on Rails, Groovy on Grails?

What do you use to help get your job done? And for the people who say they do it all by hand with no tools because its better, what is the response to something like:

“Compass is exactly how I expect a CSS framework should work. Code less, do more. Wickedly cool.”
— Lorin Tackett

“[code written with compass] is amazingly beautiful! It is a complete pleasure to work around. I truly feel like it is the first big “whoa” I’ve had since I read Zeldman’s book years ago!”

— Margaret Shea

And as far as javascript, are you using Ajax? GWT? YUI? JQuery? Prototype/Scriptaculous? DOJO?

Thoughts...I want to hear what people are using.

Web Typography

I have a blog called translucent-development that focuses on my day-to-day thoughts and discoveries with the world of development, and I have a blog called translucent-design that deals with the fact that most developers are also part designer in this day and age of the web. I keep most of the posts on these blogs separate, but I thought this might be of interest to both.

Even though I’m an engineer, I’m surrounded by designers all the time – and I love their creative energy. I often rely on them to help me with various design tasks, but I also like to keep my own creative juices flowing. It is one of the reasons that I’m an active member of the RefreshDC group. We have regular meetings where various aspects of design are discussed. On November 20, 2008 Jason Cranford Teague came and presented at Viget Labs on Typography – more specifically, on Web Typography.

I’m sure that for most designers these are things that they know by heart, but there were quite a few things that I learned.

There are 11 core web fonts

We also discussed the Microsoft TrueType core fonts for the web, which are apparently no longer available for download.

So if there are only 11 core web fonts, why do you see so many fonts on there. So while there are only 11 core web fonts, depending on what OS your target audience is running and what software they have installed – you can utilize fonts that are already on their machine….but is that wise?

Web Safe Fonts

Windows XP – 9 fonts
Vista – 7 fonts in addition
Mac – 30 additional fonts
iLife – 13 additional fonts
Office 2007 – 121 additional fonts
Office 2008 Mac – 68 fonts
Office – 62 overlapping fonts between the OS
73 fonts that are websafe for mac and pc
200 Fonts that you can consider from his list – Western Fonts only
View them here and see where they are available. Pay special attention to their rank to see which ones you should consider using in your web projects.

In your CSS, you should list your default fonts PLUS fallbacks so that you control what your content looks like

CSS can download fonts as well
* issue is file format (.ttf, .otf)
* EULA (many don’t allow for font outside of an image on the web
* Embedded Open Type (.eot), but has DRM

Open Type Fonts – but are they being used?

Aha! Lorem ipsum was part of a passage from Cicero, specifically De finibus bonorum et malorum, a treatise on the theory of ethics written in 45 BC. The original reads, Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit . . . (“There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain . . .”).

– The Straight Dope

And its true…there is no one who loves pain itself.  Well, okay mostly true, but that discussion is for another blog.  Keeping up with the ever changing world of web design is a mix of pain and pleasure.  And part of the idea of this site is to help remove the pain.  And I’m sure there are quite a few designers looking at this site thinking “but this wasn’t created by a designer”.  And they would be right…well, sort of.

I’m a software developer – and there is plenty of design in our job.  Some of it is under the covers, but some of it is very similar to the work that web designers do every day.  Sure, most of us aren’t nearly as good at is as you, but that is also part of reason for this site.  To help us get better at making the web a beautiful place!

And besides the areas where our jobs overlap or intersect, there are lots of general technology topics that are of interest to both groups.  Like what open source tools are available on a particular platform, or what web hosting company provides us the resources that we need to perform a particular task.  Is Adobe Photoshop needed, or might we possibly get away with using Gimp for a particular task.  How good is the latest Manning book on JQuery, and do you need a programming background to use it?   Things like that.  So join me on this journey of exploring the world of design as I learn a few things, and who knows you may too!

* And if you don’t get the lorem ipsum reference, we’ll get to that at some point in time in the future…

How does one person stay up-to-date on everything that is going on in the world of web design?!?  Web 2.0, CSS, typography, the latest software, ajax, jquery….and it goes on and on.  Wouldn’t it be nice if there was some way to sift through everything out there and let you know what to concentrate your efforts on?  Rose colored glasses won’t do….but what about purple ones?