Alright I’m pretty excited to bring today’s post. I’d like to use this category of posts to discuss my approach to progressive enhancement – a term us web nerds use to describe the process of managing and improving a website over time. In today’s post I’ll be using my own site as an example.
The story goes like this: I wanted to establish a blog category on my approach to progressive enhancement. I am a firm believer in letting analytics data determine where enhancements should be made, all tied back to established website goals. I didn’t have to wait very long to spot a concerning trend! As a website owner, you want your visitors to be drawn deeper and deeper into your site. If they are not, it always makes sense to look for bottlenecks and make efforts to remove them.
Case in point, I noticed in my own traffic patterns that while people get to the Services page, they rarely went past the more “introductory” services page. I spent a lot of time pouring over the content for the six individual service pages, so naturally its cause for concern that people aren’t compelled further down the rabbit hole. So with this issue unearthed, I took a look at my services page and attempted to identify potential bottlenecks.
My first thought is to throw the copy right under the bus. Maybe its not that compelling, or my copy is too “sales-y” and not specific enough on what I’m actually offering in terms of services. Though completely plausible, this issue will be addressed in a later enhancement when I am able to set up different variants of this page for testing. If these new service page variants outperform my original here, then we’ll have answered the question “does the copy suck.” Though certainly possible, there may be other reasons …
My second thought is that while its great to have a “graphics grid” with 6 mouse-over-able pictures, that perhaps some visitors might not realize that they are indeed an interactive element to the site, and that I intend for visitors to hover, click, and navigate to the individual service pages. One solution to this problem would be to make the title and subhead appear by default over each image, but that just didn’t seem as fun as what I came up with. It probably makes more sense for you to view it first, so check it out real quick. I’ll wait 🙂
I wanted a subtle “shuffle” effect that would sequentially fade the overlay in over the 6 service offerings images. My thought was that its a subtle enough effect to catch the users eye and let them know there’s more going on here than just imagery. And so as not to overwhelm with too much animation and motion, the second a visitor mouses over an image the whole behavior stops. Its really only there to cue visitors, and once they get that there’s more content, there’s no need to keep it going.
So hey, this might not be the solution to the original problem of people not looking at my individual services pages. But with a quick bit of custom coding, I’ve narrowed the field of potential causes. I am confident that if there are a subset of visitors who don’t realize the images are hover-able, this fix would most likely addresses that issue. Now the only question that remains is was that the actual problem, or do I need to take another pass at the content on the page to make it more compelling? (hint: the answer to this question is always ‘yes’ regardless.) Continuing to monitor the performance of visitors coming to the services page should help clarify the answer now that I’ve hopefully taken the “didn’t know the images were clickable” issue off the table. If I REALLY wanted to be sure, I would treat both pre-treatment and post-treatment pages as variants and split incoming traffic to see if the new page actually compels people deeper into the site for a direct comparison. All that said, since I like the effect, I’m just going to keep it.
In summation for this first progressive enhancement post, this is my approach. Crawl around in the visitor data to see if any interesting behaviors emerge, hypothesize about those behaviors, and make manipulations that serve a dual purpose of improving the site while simultaneously answering some important questions about visitor interaction. A website is never finished, and this kind of approach to the lifespan of your website will ensure you get the maximum value for all you paid for in that costly (re)design phase.
Extra Credit:
I have a follow up post to this one where I talk about the coding side of this solution for anyone more technically inclined.