The Connected Consumer

Design principles for building mobile commerce ad formats that make a connection .

yiming
Bytesized Treats
Published in
6 min readSep 21, 2015

--

Our mobile devices are with us everywhere we go. We expect to access free content in the moment and on the go. Although being a major part of our content experience, mobile ads rarely make a connection with us. In fact, most of them make us quite annoyed. A lot of times, our eyes are calculating constantly to predict the next coming ad placement — so we can precisely skip that ad without splitting any precious attention.

Why do we get annoyed? Why is our first reaction to mobile ads fight or flight? Is it because they take too much space on our screen or take too much time to finish? Possibly. Is it because the technology involved in delivering those ads is still immature? Could be. Are those reasons the ultimate answers? Maybe not.

Recently an awkward ‘interactive’ banner ad from a well-known department store gave me some new thoughts. The ad started as a pink “sticky footer” (known to the digital ad industry as an “adhesion unit”) with a brand logo. Then a clipping of a pretty model animated in from the bottom. It stayed a second, and hid so quickly as if the model felt embarrassed. The whole experience somehow amused me and reminded me of whack-a-mole game, which is a far cry from representing this upscale brand’s image.

Why did I get disturbed? The ad took a quarter of the screen with the clipping image. It blocked some content for sure. But if this brand were on a cross-page campaign between magazine article pages, I wouldn’t feel bothered. Similarly, if this brand had a TV commercial, I might pay half-minute’s attention. So if I have no problem in giving a beloved brand some time and space, is it because the funky animation? As a designer working on mobile experience, I quickly realized no matter how elegant the animation could be, it just won’t be the right solution. I was expecting much more than an auto-play sticky footer.

We live in a time when broadcast information is no longer passively received. We actively seek, browse, and discover new content to consume. Meanwhile, our relationship with information has become more personal and intimate. The change in media has drastically impacted our expectations of how we engage with content. We expect a more dynamic experience more than ever. And we are getting there thanks to powerful advances in digital tech and a boom in best practices for user experience design.

Although our expectations are constantly rising on account of the digital design revolution, user experience usually falls flat when it comes to mobile advertising. This is the real reason we get annoyed with most mobile ads out there. The design lag in mobile advertising is a big missed opportunity for brands/products to establish and maintain relationships with consumers through the channel where they spend most time on.

New principles for designing mobile ad formats are necessary in order for brands/products to effectively communicate their audience.

Compared to other digital products, ad formats is a different kind of animal: it co-exists with publishers’ pages. Consumers don’t appreciate ads that interrupt the content. They expect the ad knows when to shine, so it deserves the real attention for its politeness. Furthermore, as consumers are now in charge of choosing what message they desire, they expect to be in control of initiating an ad experience. Also, once they choose to interact with something, they expect to get feedback from every single input they give away.

In order to craft better mobile ad experience around consumers’ expectations nowadays, here are some principles we have developed and applied, along with examples of some Yieldmo ad formats.

Be polite. Greet consumers in a respectful way.

Nobody comes to the pages for ads. Any loud announcement of the ad presence would be rude. However, a good ad should arouse consumer’s curiosity so it could get the message delivered to the right audience. Since an ad co-exists with the page, it should introduce itself when people interact with the page.

The blurred image background as a nice intro for the ad.

An image can be a good introduction as it is easy to digest and visually appealing, but often times a simple image is not enough. Given the limited space on mobile, it’s difficult to accommodate both a large image and additional text unless adding time as another dimension. At Yieldmo, one design pattern we have developed is an image that brings up an ad experience. It blurs and fades back to support the rest of the brand message as people continue to scroll the page.

Besides scrolling, there are more interactions that could happen on pages. By studying consumers’ behaviors when they interact with publishers’ content, we are able to create tangible design patterns that represent a polite and attractive introduction.

Be modest. Stage the way you reveal information.

Excessive information is draining. People will not appreciate a blast of unwelcome information, which even pushes potential customers away. Therefore, modesty is the best policy. Once the ad gets curiosity and attention, it should leave the space for exploration.

Most digital ads are flat. There is rarely room to go anywhere deeper than just the surface. To make things worse, marketers often cram messages in a rigid small space, or force people wolf down chunks of information with auto-play. None of this is helping the core message. Sensible design decisions are necessary to play a role in creating depth for digital advertising.

Stacked product cards
Product cards carousel

This kind of depth becomes quite desirable in mobile commerce. Consumers respond to clear and direct messaging, but also want to explore an offering at their own pace. In order to lead consumers to the ideal destination, mCommerce ad formats should extend from the surface. And consumers should decide whether or not to dive deeper.

Using Yieldmo mCommerce ad formats as an example, we use product cards as a basic element to build up choreographic structures for consumers to discover more - cards are often arranged in a carousel, a stack, or even become expandable, thus providing different paths and experiences for exploration.

Be astute. Respond to consumers’ action with visual feedback.

Once the consumer decided to invest attention, it is important to recognize their input and engagement with proper visual feedback. Applying feedback does more than just bringing delightful details — it serves as a signal of listening and a sign of respect. There is so much noise out in the digital space, thus responding with tangible design feedback becomes more ubiquitous as a way to improve user experience.

Still using the product card as an example. In the Carousel format, physics is added to enhance the sense of control. When people swipe through the cards, each card has its motion while moving as a whole. Also, the card that is directly interacting with the user becomes the anchor point for other card’s movements.

These micro-interactions used to be bonus tracks. People considered them as ‘fancy’ design add-ons. However, great interaction design in prominent and popular digital products has set the bar higher and higher. Consumers now expect these ‘delightful’ details to validate their input. These moments of feedback will be standard, expected and mandatory to engage consumers.

Writing down these principles made me think: good mobile ads are like those dream guests you want to connect with at a cocktail party: they are pretty enough to be noticed, while not over-dressed to show off; they are smart enough to hold conversations, while never over-communicate. Like those guests who impress people with pleasant conversations, great mobile ads will impress and effectively communicate messages through tangible interaction design patterns.

Special thanks to David Goligorsky and Shawn Sprockett

Stay tuned for more thoughts on mobile commerce, ad formats design and beyond.

Your feedback and opinions are most welcome.

--

--