The problem is really two-fold: on one hand you have the design community; experts in the use of Photoshop and making pretty pictures. On the other hand, let's face it – there's far more "me too" than innovation in this industry. This isn't just a matter of the often similar portfolios seen at any number of designer's websites, but of the business models and approaches taken by webmasters that would rather post a "what's hot?" thread on a message board than do their own research.
A specific case in point is the debate over whether or not a "traditional" paysite tour with multiple pages works better than the so-called "reality" or "video" tour that will typically consist of a single, long scrolling page featuring a number of "episodes" from inside the member's area. The question, and its answer, is misleading. For example, a webmaster may switch from one tour style to another and note an increase (or decrease) in the site's overall conversion ratio. For him, the answer of which tour style works best is easy – but is it really? Consider that both tours were likely entirely different: beyond the format, the images, text, colors, styles and more, may have been changed, so determining the exact factor that truly influenced the change in results isn't as simple as saying "the video tours work better" (or not).
What I'm really talking about here is the difference between opinions and facts and how they relate to web design. Opinions are simply ideas, based upon guesswork, "feelings" and emotion. Facts are opinions that can be proven. Let's take a closer look:
I've recently begun using a variety of advanced techniques and testing a number of usage metrics in an attempt to improve the performance of my paysite. For many webmasters, "testing" means making a bunch of changes and watching the conversion ratio; but as in the example above, this masks much of what you need to know. For example, you might be spending a lot of time tweaking the sales text or images on that long reality tour page, and judging your success by watching sales; but are you sure that surfers are even reading that text or scrolling far enough to see the photos? How do you know?
A Mainstream Solution
Not knowing the answer to these questions sent me off into a search that resulted in a study of eye-tracking, heat maps and click clustering – tools that large, forward-thinking, mainstream sites are using, but that heretofore I've seen nothing in adult circles about.
While I previously blogged about one of these solutions, Eyetools, (www.eyetools.com), which uses targeted-user focus groups and eye-tracking to see where surfers are looking (but not necessarily clicking) and where they're not even bothering to look, as a small operator, I don't have the Google-sized budget needed to make use of the technology.
This hasn't stopped me however, since I found a less-featured but far more affordable solution in the form of a monthly subscription to the ClickDensity monitoring service (ClickDensity.com). With the addition of a small JavaScript snippet, ClickDensity collects information about where my site's visitors are 'hovering,' clicking – and trying to click. The hover stats tell you what interested the surfer, the click stats reveal where the surfer actually clicked. While server logs can tell you that x number of people clicked a certain image or clicked-through to hit a certain page, they can't tell you that folks are clicking an image that isn't linked to anything (and thus should be), or which of multiple links on a single page to a target page are being clicked.
For example, a paysite's tour page may have any number of links to the site's join page; including links from navigation bars, as well as links from thumbnails and other graphics – or in the case of that long scrolling page, links from each depicted episode preview. Trying to determine which of these links resulted in the click-through to the join page can be quite problematic, and even when possible, extremely hard to visualize.
ClickDensity places a transparent overlay on top of my webpage, showing areas that were clicked as small green plus signs, and areas where clicking was unsuccessfully attempted (because the image or other element was not linked to anything), as a small red plus sign.
Toggling another switch overlays red "page fold" lines, showing the vertical height of the page visible at 800x600, 1024x768 and 1280x1024 resolutions – an aid in understanding why click clusters may occur in certain areas. Overlaying a heat map gives an easy view of what your visitors are actually doing – which may not be what you think they're doing.
For example, I've been wasting my time on tweaking the bottom of that long tour page – most visitors aren't scrolling that far down! This isn't an opinion; as I now have the data to prove it, and will redesign this page accordingly.
Changing a page isn't enough, however; the changes need to be tested and validated to see if the change was for better or worse. Smart webmasters know that you should change only one element at a time, since multiple changes open multiple places to lay the credit – or the blame – for the resulting performance difference. To be certain of what worked or didn't, you should make one change and then test it; and this is another area in which ClickDensity shines, as its A/B comparison feature lets you automatically swap elements, showing half of your visitors the "A" version, and the other half the "B" version, and then displaying the performance difference.
For example, will your join button get more clicks if it says "instant access," "join now" or "click here to enter"? How will changes to its size, shape, color or location affect its click-through rate? A/B comparison tests will give you concrete data on which approach works best on your site, and with your traffic.
Analyze This
While I'm in love with ClickDensity, it's by no means the only tool I'm relying upon for design metrics; with my other favorite being Google Analytics. I know many webmasters use this free service as a simple leak-free "hit counter," but it is so much more than that – for those dabbling in AdWords, it's a must-have tool, but its uses go much further.
For example, one of my main uses of Google Analytics is the easy way in which it allows me to visualize certain performance goals, as defined in my "conversion funnels" that let me, for instance, measure the percentage of visitors clicking through from my warning page into my tour, or from a given tour page onto my join page. This micro view of user data is much more useful than the macro view of conversion ratios commonly discussed by webmasters: it's one thing to say "my site converted at 1:500 before I made changes and now it converts at 1:600" – but what were the specific implications of those changes?
Using the warning page example, I monitored my conversion funnel and saw that going from my COPA-compliant warning page which blocked 85 percent of visitors from ever entering my site, to a more user-friendly warning page, inversed the ratio, so now we're only turning away 15 percent and allowing 85 percent through. Sure, I could extrapolate this figure from my server stats, but Google makes it easy.
Another example involves the percentage of visitors hitting the join page. This is a much better indication of your tour's effectiveness than is the overall conversion ratio, since a poor conversion ratio could be the result of excess scrubbing on the part of your IPSP, or the fact that your pricing is too high (or low), or you don't offer enough payment options, or something entirely different. Conversion ratios tell you about your sales volume, but the funnel tells you where the problem is: for instance, if 80 percent of your visitors are hitting the join page, you know you've got a great tour; but if only a small percentage is joining, then you know the problem is with your join page or the issues outlined above...
Pushing the Speed Limit
One of the other factors I looked at is the overall speed of the website and how it affects user response. When I first began building websites, I was chastised because my pages would get as large as 50k (including all of the images). "50k – are you trying to stall out the surfer's computer?" Yes, it was a long time ago. Now, I'm hovering around 750k on some pages and wondering if that's way too large. My stats reveal that around 85 percent of my site's visitors are on a high-speed broadband connection, which is comforting; and while my site loads nicely on my 6mbps pipe, switching to my backup dial-up connection makes for a frustratingly slow user experience – so slow in fact that if it wasn't my own site I was testing, I'd shut the browser and move onto the next site. But that's me – what about other users?
One way to get a handle on what your visitors will tolerate is to take a look at what your competitors are doing. This isn't necessarily another example of "me too" designing, but of gauging the state of the market. I do this easily by visiting other similar sites (so that you're comparing paysites to paysites, or TGPs to TGPs, etc.) and hitting the "Save page as…" button, which saves the entire page, including all remotely called files such as any cascading style sheets, PHP includes, external JavaScript files and the like, to an ".mht" file on my desktop. Give the file one click in Windows Explorer and look at your status bar: the total page size will be displayed. The results: 750k isn't out of line for a paysite tour page, though 100-300k can be more typical; while I've found thumbs-based MGPs with pages that run well over 3mb.
As a side note, I keep a log of my main page sizes using this technique and update it whenever the design or other elements are changed, allowing me to gauge whether or not the site is getting more (or less) bloated, and by how much. On another note, this is an area where server stats don't tell the whole story, since page elements may be called by a surfer's browser and thus recorded in your server log, but that doesn't mean the surfer waited long enough for them to load…
For a much more robust look at your website's load time parameters, check out the free tool at WebsiteOptimization.com/services/analyze/.
As you can see from all of this, there's more to effective web design than making pretty pictures. Cross-browser, standards-compliant coding is just the beginning: color issues, multiculturalism, language, accessibility and much more all play a role. Fortunately, you no longer have to rely on guesswork and "the way it's always been done" to guide your efforts; let technology guide your technologically-based business: you won't be sorry.
