Demac Media Demac Media Brand Demac Media Brand



The Little Big Things : This Time it’s Personal – Microinteractions

Timer Icon 11 Mins

Design & User Experience

I know that it might seem like it’s a long way away, but we all know that while right now we’re basking in the 4-ish months of sunlight and patios afforded to us, Back-to-School, Black Friday, and holiday craziness are right around the corner. As with most things, the best defence is a great offence. Considering that most businesses do the vast majority of their business during this time, it’s worth investing the time into ever facet of your business that you can to put your best foot forward.

Unfortunately, I can’t give you that one magic bullet-proof product that’s going to be flying off the shelves. However, what I can give you, are a list of small little details and microinteractions that might help you not only win customers during the time when it counts the most, but have them (and this is the most important part) coming back for more.

First, let’s point out the obvious: I just threw the term “microinteraction” out there. Who do I think I am, throwing these newfangled terms out there like it ain’t no thang? Don’t worry, microinteractions isn’t the name of some latest and greatest that you need to check out. Microinteractions are, at their most basic level, exactly what they sound like: small interactions with the user.

Related: Don’t Go! Why Your Bounce Rate is so High

Can anything be a microinteraction?


Technically yes, but I put my would-be micro-interactions through a simple test: does adding this in potentially take away from the user interacting with some other part of the site? The answer to this must categorically be a “no”. Once something passes the first test, I also ask myself if this adds something to the experience for the user. Think of microinteractions as the little things about you, that make you “you” (on three: one, two, d’awww).

Now, in the words of revered venture capitalist Chris Sacca: “Only invest in things that are already awesome”. Why am I bringing this up? The answer is that you should be thinking of your site in the same way – you’re going to need to invest your time and resources into developing these microinteractions, and your principle (meaning you initial investment, in this example, your site) should already be awesome. At the end of the day, a half-baked cake with a tonne of icing on it is still a half-baked cake, right? So with that said, think of microinteractions as embellishments on a product that’s already developed to the highest level that it could be. Phew!

Well, now that I’ve got that out of the way, let’s start taking a look at some micro-interactions and personal touches you can add to your site to help turn would-be passer-bys into brand evangelists.

Related: Guidelines For Better Navigation

Keep them Coming Back for More During the Holidays


As previously mentioned, the late fall/early winter is where the bulk of all yearly business is done, so it’s absolutely paramount that you leave each and every customer feeling like they want to come back. More pointedly, it should (ideally) be the case that every customer of yours should need to come back. You might ask why, and the answer is that a) we’ve already established that, as a barrier to entry, you’re awesome b) you’ve left the customer, in some way, feeling special. So, the most obvious question after that is where to start. Perhaps at the end.

Let’s take a Look Back

Younger whippersnappers out there might not believe this, but there was a time when people actually had to pay for music before they listened to it. Shocking, I know, but these were different times, my friends. The soundtracks to my youth were inscribed into artifacts known as CDs (which nowadays serve as period pieces or makeshift coasters), and before that, cassette tapes (these would sometimes serve as a sacrifice to your tape deck, which seemed to have a voracious appetite that coincided with when you wanted to listen to a tape the most – I’ll never forget you, Ace of Bass, I’ll never forget you).

Nevertheless, during this time, when this little thing called The Internet was in it’s formative years, there existed a site called CD Baby. If you were anyone who was anyone who had any kind of music to sell, you were on CD Baby. Given that CDs are fairly antiquated (CD Baby is now also involved in the digital space as well), it seems odd that I would bring this up. However, consider that CD Baby really was a pioneer of e-commerce considering the time that it originated (1997), and it also happens to have one of my favourite order confirmation pages of all time (source):

Thanks for your order with CD Baby!

Your CD has been gently taken from our CD Baby shelves with sterilized contamination-free gloves and placed onto a satin pillow. A team of 50 employees inspected your CD and polished it to make sure it was in the best possible condition before mailing. Our world-renowned packing specialist lit a local artisan candle and a hush fell over the crowd as he put your CD into the finest gold-lined box that money can buy. We all had a wonderful celebration afterwards and the whole party marched down the street to the post office where the entire town of Portland waved “Bon Voyage!” to your package, on its way to you, in our private CD Baby jet on this day.

We hope you had a wonderful time shopping at CD Baby. In commemoration, we have placed your picture on our wall as “Customer of the Year.” We’re all exhausted but can’t wait for you to come back to CDBABY.COM!!

Thank you, thank you, thank you!


We miss you already. We’ll be right here at patiently awaiting your return.

Now, I don’t know about all of you, but I actually laughed aloud while reading this. Order confirmation pages are to me what buffet food is to cruise ship patrons: usually has the (mental) nutritional profile of drywall, but it’s still part of the process, and sometimes leaves a weird semi-greasy aftertaste.

I can’t say that any other order confirmation page has ever made me laugh aloud. The reason that’s significant is that in a swipe-left, swipe-right world, you’d think that this kind of message would be overlooked, and truth be told, it might. However, for geeks like me, this is one of the highlights of the whole buying experience, so much so that I’ve brought it up to friends (the fact that I’m even writing about it should say something in itself), and turning me into a fan of the brand, not just the product.

All in the Process


With the end of the purchase out of the way, let’s move back further in the process. You’ve managed to capture the attention of one of your prospective customers, but there’s a slight hitch in the plan: they’d like to speak to someone. Not to worry, you’ve planned for this and included a support phone number on your website! You sit back at ease and can’t wait to answer this person’s questions, give them a product they love and have them elated, singing your praises from the rooftops.

Well, that would be great if they could actually get a hold of you.

I can’t count the amount of times I’ve seen a phone number on a website, and had to either dictate the number aloud and hope that I, or any surrounding company, could remember the number before I had to switch to my phone keypad and enter the number in. There’s an equal chance that I can be found doing my very best neurosurgeon impersonation – zooming in on my phone, trying to use my thumbs to copy and paste the phone number from the website to my phone keypad. Not a very practical technique for someone like me, who has the dexterity of a three year old, and has about the same success rate as dictating the phone number. This is costing the customer time, frustration, and concentration, ultimately eating out of your bottom line.

My friends, I come bearing a solution.

Sneaky JavaScript? Nope. Crazy modules that use the phone’s geolocation to triangulate the probability of you dialing in the number on a Tuesday? Try again… Black magic? I like your enthusiasm, but there is a much more elegant with less magical overhead.

The solution is actually something that’s native to HTML, but for some reason is rarely used. I’d like to introduce you all to my friend tel:. Who/what is tel:? Well, like I mentioned, it’s native to HTML, and it’s what you’re going to include in the href attributes from now on. What it does is automatically dial the number into your phone when you click on the link.

Related: Home Page Conversion Optimization Tips

For reals?

In the words of the immutable Oscar Gamble: “They don’t think it be like it is, but it do”.


If you know a thing or two about paying attention to details, you know that Johnny Cupcakes is famed for his insane attention to detail. Experts* have called him “the Walt Disney of streetwear”. Why? Well his stores – which doesn’t sell any baked goods, despite being themed around the bakery concept, much to the dismay of hungry passer-bys – display all the t-shirts on baking sheets encased in bakery-style display windows. When you first walk in, you’ll immediately notice that the store smells closer to a Cinnabon than a streetwear empire – a result of the vanilla-scented air fresheners placed throughout the stores. He’s even filmed fake movie trailers for films that don’t even exist to promote special edition t-shirts (and of course, he shipped them in VHS boxes).

*By “experts”, I mean me, right now

Given Mr. Cupcakes’ (?) hyper-attention to detail, I wasn’t surprised to see that on his site he’s using the tel" “trick” I was telling you about earlier. Let’s look at how this all plays out.

Johnny Cupcakes tel link

This was an example from my desktop computer, but the principle is the same. As you’ll notice in the above example, my computer immediately began opening FaceTime (the part that you didn’t see is that the number was already dialed in). You can read more about this in this article from Google on the topic. This is a very easy thing to implement, and it might seem trivial, but these are the little things that can really break the fluidity of a user’s experience, and ultimately cost you potential customers.

Sell Them on Your Brand


Stepping back even further in the purchasing process, let’s look at your listing page. When users hit this page it’s really your chance to sell them not on your product, but on your brand. Allow me to explain. It’s easy enough to impress someone with a product that has a lot of features, however, we’re not focused on creating a one-hit-wonder, we’re focused on creating a strong brand for yourself. Given that, the listing page is a chance for you to show off what your brand is about, leaving the user to find individual products that appeal to them.

Pure Fix Cycles knows this, and used it to their advantage. For some context: Pure Fix is a company that sells bicycles. Where there differentiate themselves is, in addition to offering “traditional” bicycles, they also offer glow-in-the-dark cycles (this is what some researchers are calling “the dopeness”). Pure Fix saw their chance and ran with it, the results are below:

Pure Fix Cycles Glow Bikes


As you can see, this allows Pure Fix to show off their product in a really unique way, making their first impression a very strong one. I can think of very few, if any, companies that offer glow-in-the-dark bicycles, and if they do, they certainly haven’t shown them off in this way.

Surprisingly, despite looking impressive, this is the kind of thing that’s actually fairly easy to implement, and really showcases the greatness of the product. If you have a product such as this, that has some kind of attribute that differentiates itself from any similar products, don’t wait until the product view page to show it off – let your freak flag fly!

Turn people into brand evangelists this Holiday Season!


Remember, the goal is to turn people into brand evangelists, and the best way to do that is to give them something to talk about. Hopefully I’ve given you at least a few things to ponder over, especially as we’re gearing up to get ready for the approaching holiday season. As in life, it’s often the “little things” that are actually the big things. Why is Amazon so popular? At least part of it is the fact that the service is easy to use and requires very little on the user’s part. Any other eCommerce store should be the same way – not asking much of the user.

Related:Designers, Holidays, and Themes, Oh My! A Front-End Guide To A Good Holiday

Subscribe to the Blog

Stay updated with 20,000+ eCommerce leaders in our community

Sign Up

Let’s talk about your 10X return

Icon/Social/Phone Contact us for pricing information