The official Mouse Eye Tracking blog, covering the latest news, tips and features along with broader topics of usability, web design and online marketing. met.picnet.com.au

Main menu

Post navigation

Improve the use of social media buttons on your website

In theory, social media share buttons are great way to engage customers and show a track record of testimonials and recommendations. But let’s face it – many senior execs are resistant to the idea of adding social media buttons to company websites for fear of them being useless. So are they a waste of time or can one implement share buttons on a website in an effective, meaningful way?

Before I get into this, let me just say that this post is in part a response to the recent call to remove social media buttons from websites. There seems to be a backlash against them in the design community and while I can understand their reasons, I think this issue could do with a bit of closer examination.

When you think about it, a single button to immediately share things is a great idea, (so great in fact, that Apple decided to integrated them into their latest OS) so if things are so great, why the desire to remove them? (That was rhetorical by the way)

Over at Net Magazine I commented that I think the problem with these buttons isn’t the buttons themselves (nor the idea behind them) but rather that they’re poorly implemented. They’re treated as little more than an afterthought, the result of a 2 minute cut and paste job. Now, they’re plastered all over the web, we’re tired of seeing buttons in stupid, inappropriate places, duplicated multiple times through a page, they’ve become the new banner ad, a black hole we’ve learnt to block out and despise.

But I still feel these buttons hold some value (and certainly more than banner ads). I feel that social media buttons are a great UX design challenge – how can one integrate these buttons into the user experience? How can a designer include them in common sense ways that are appropriate and meaningful for the user?

I am still growing and learning everyday as a designer and this is by no means a perfect example, but I thought I’d share an approach to putting social media buttons to better use.

First of all, identify your most popular pages. This can be done via any analytics software package. If you’re using Mouse Eye Tracking, choose the page with the highest amount of pageviews. For us, the PicNet Table Filter has been a hugely successful plugin that gets thousands of unique views a month, so that’s the page we’re focusing on today.

Next, use the attention heat map mode in Mouse Eye Tracking to determine the ‘hottest’ spot on the page.

Click for full res

You should place your social media share buttons as close to this area as possible. Here you can see the hottest spot on the page is in the center on the ‘Try the demo’ button. To get the most out of this, I decided to place our social media panel here and push the demo button lower. I wasn’t concerned with users not being able to find the demo button, it is still quite prominent and our audience of software developers are tech savvy enough to find what they need.

Click for full res

Finally, I didn’t just copy and paste the default buttons in there. I placed them inside a well presented panel that speaks to the visitors. Remember that you do have an audience of real people visiting your website. So be sure to communicate with them about your social media presence. It may be a simple ‘Hi, don’t forget to check us out at the communities below!’ or something more detailed. In our case, we used an honest, straightforward approach stating that the plugin is free and that we’d really appreciate feedback. Whatever you do, make sure you are personable, genuine and appropriate for your audience.

Since we’ve implemented that message, we’ve gone from 0 Facebook recommendations to over 40. We’ve also gotten 8 Google places reviews, over 100 LinkedIn followers and countless Tweets. Granted they’re not staggering numbers, but I feel confident in saying they’re more than we would have gotten had we not done this.

Hopefully this example has shown how social media buttons can be more than just an afterthought to your website. By putting a bit of effort into the user experience, transforming what is normally just a bunch of tacked on buttons into a message for your audience and placing it in the best position possible, you can maximise your social media effectiveness.