It’s a fact that design is about aesthetics and taste. You may have already seen some mobile web design guides that talk about these things, but did you know that an optimized mobile web design also needs emotion?


Photo courtesy of Daniel via Flickr

Although there’s no secret that design has to take account of visual techniques and client requirements, changes in consumer behavior mean that changes must be made regarding mobile web design.

Changing Times, Changing Designs

As a matter of fact, designing with a mobile-first strategy is essential in this era of cross-platform behavior, especially since mobile use is taking the lead. As Gary Illyes, Webmaster Analyst at Google points out, 77% of mobile users search products and services using their mobile devices. Not only that, but the time spent by consumers on their mobile apps has increased, such that the mobile consumer has emerged.

According to The Cross-Platform Report by Nielsen for 2013, all smartphone users spent 89 percent of their mobile media time in Q4 2013 using mobile apps. Thus, giving utmost attention to optimized mobile web design as a startup is a must, if you want to distinguish yourself.

Moreover, catching the interest of your target market is more difficult in the age of globalization. Due to the influx of goods and services, markets have become more saturated, and low-cost technologies only make such offers look similar to one another.

Catch Up on Catharsis: Why Emotion?

One thing you need to understand about this concept is it that it shifts the attention back to the human aspect of design.

In other words, while things like big data and ROI are important to startups like yourself, you cannot master mobile web design if you don’t understand that essentially, you are catering to human beings who thrive on emotions.

In “Consumers’ Emotional Responses to Brands and Branded Products,” written by Armaan Karahanolu and Bahar Sener for Design Principles and Practices: An International Journal, they assert that emotions play an important role in people’s lives, since they guide, enrich, and enable life, and provide meaning to everyday existence.

More importantly, tapping into consumers’ emotions is a long-term investment. It can do wonders for your brand and ensures that you sow the seeds for brand loyalty.

Beyond Skin Deep: 6 Emotions to Tap Into

A word of advice: when reading about these crucial emotions to tap when crafting mobile web design, keep in mind that the spectrum of human emotion is much wider and more varied.

However, identifying these specific emotions is an advisable way to making your way toward optimized mobile web design. As you will see later on, it is possible to combine certain seemingly opposing emotions to captivate user attention.

1.) Joy


Photo courtesy of Amanda Timton via Flickr

Spreading happiness is one thing you ought to aim for. As noted from the above points, creating positive user experience inspires your visitors to spread the feeling with others.

Your product or service aims to be solutions for consumers. Such offers put them at ease, and/or delight them. In turn, your website should use a mobile web design that they can associate with the same feel-good emotional association.

Take a look at Indego Africa’s mobile website, which immediately greets the user with the words “Empowering Women is What We’re All About” and then following it up with phrases such as “We’re Celebrating Entrepreneurs This Month!”

Not only does the mobile site greet users with a worthy cause, it does so with a basis on joyfulness, and by assuming that the user is also interested in experiencing the joy that comes with helping women.

2.) Pleasure


Photo courtesy of Christina Alexanderson via Flickr

Pleasure is important in using emotional design for mobile web because it is a basic trigger in human behavior. In fact, it underlies the motivation for every single action we take on a daily basis.

Even tasks which seem difficult can become sources of pleasure. Take for instance challenging activities like wall climbing. Although physically exhausting, such activities carry the seed of pleasure in them.

When it comes to emotional marketing and optimized web design, it is only possible to give mobile users a sense of pleasure if you know who exactly your target audience is and what they want so that you can tap into their pleasure principle.

One way to get started is to remember that people derive pleasure from the prospect of doing or learning something new. Dr. Emrah Düzel of the University College of London says, “When we see something new, we see it has a potential for rewarding us in some way.”

One good example is Squarespace, which uses a mobile app capitalizing on the pleasure of novelty. Currently, it uses “Build It Beautiful” and “Get Started” to imply the concept of a fresh new project to mobile users, which is an effective way of inducing a pleasurable emotion.

Frank Spillers, a web and software usability expert, discusses how a perception of pleasure encapsulates the usability experienced, the attitudes formed, and the emotions felt during product appraisal. As such, the experience you give to mobile users must be hinged on pleasure that satisfies on two levels.

  • First, your mobile web design needs to satisfy in terms of appearance or aesthetics, as well as usability, also known as user interface.
  • Second, it must satisfy at the level of user personality or socio-cultural context, product meaning or historic context, environment, or physical context, and interaction.


3.) Surprise – Anticipation


Photo courtesy of Johan Viirok via Flickr

Although surprise and anticipation can be separate emotions, you may think of them as working together hand-in-hand. The element of surprise not only provides amusement, but also builds a connection. Use aesthetics that are interesting to hold user attention and entertain.

Note, too, that by surprising mobile users, you effectively use a bit of fear and happiness to establish a pleasant emotional association. To build on that association, keep them wanting more.

Anticipation works much the same way that “coming soon” cinematic attractions do. They keep mobile users at the edge of their seats. In your case, your mobile design should feature exciting coming-soon pages. This encourages visitors to keep coming back just to see what you have in store for them.

Ben the Body Guard’s mobile website makes excellent use of the anticipation principle. By enticing the user to “Enter the mean streets,” the mobile website builds on the anticipation of how Ben can protect a user’s passwords, photos, and contacts on his or her iPhone.

4.) Trust


Photo courtesy of Daniel Zedda via Flickr

Just as in all your other marketing efforts, you want to establish your startup as the reliable answer to the wants and needs of your target market.

To do this, your mobile web design should also foster trust. Consumers need to know that they can rely on you. More importantly, consumers must believe that you are trustworthy.

As always, market research is essential to prove yourself. Start by noting what consumers expect from a startup such as yourself. To establish trust, it is crucial to meet these expectations with consistent brand experiences.

It is also important to remember that trust isn’t built on visually-pleasing design alone. Performance is also a must. For example, compared to Tumblr or Pinterest, which rely on graphics, Twitter may not look as visually pleasing, but its usability is commendable on a mobile phone. This way, like Flickr, Twitter makes good on its promise to deliver concise sound bites with only 140 characters and earns the trust of mobile users.

5.) Attention


Photo courtesy of Gabe via Flickr

Catching the attention of consumers is both a must and a challenge these days, especially since the average attention span has decreased from 12 seconds in 2000 to a mere 8 seconds in 2013.

To attract attention, a startup such as yourself would need to impress and interact with mobile users. In this case, attracting attention translates to something more long term than a passing glance. It means attracting mobile users to the point of engaging with them. One way to do this is to pull off something unexpected using your visuals. This lures them in and converts their curiosity from something momentary to an actual user experience.

Take a look at the online portfolios at Behance, which use animated transitions. This is an effective way of hooking users so that they’re curious enough to find out what else is in store for them. More importantly, it impresses them and encourages them to stay and learn more about you.

6.) Exclusivity


Photo courtesy of Tetsumo via Flickr

Giving mobile users a feeling of exclusivity makes them feel pampered. Tapping into this emotion encourages them to repeat their experience with you. This is, of course, because everyone wants to feel special.

When it comes to mobile web design, you need to capitalize on the nature of exclusivity unique to mobile. Deals implemented on this platform are inherently exclusive, so once word spreads about it among mobile users, you have better chances of garnering visitors and perhaps even lifelong customers.

In 2014, French atelier Christian Dior launched one such deal on its mobile site, called wonDiorland. This move aimed to encourage customers to visit the site, which until that point had less visitors compared to desktop sites among other luxury brands.

The deal consisted of having to enter a four-digit code on wonDiorland, which would let the consumer find additional content about Dior Addict, which was then the brand’s latest fragrance.

Designers behind the mobile site also made sure to use cutting-edge concepts and visual techniques to create a design that would allow the mobile site to go viral. As you can see, a feeling of exclusivity on your mobile site can go a long way, as it also taps into the related emotion of uniqueness.

Tip-Top Shape for Trends

However, it is not enough to simply tap into the above emotions.

Your mobile web design also needs to consider how to best use these emotions with the emerging trends on design. Take note that the following are bound to dominate 2015 mobile web design:

  • More emphasis on hidden or “hamburger” menus
  • Mobile fold effects—either horizontally or vertically
  • Mobile menu transitions and animations
  • More emphasis on scrolling instead of clicking

Such trends are important to note, as every startup would need to discern how best to follow through, without alienating mobile users. After all, using these emotions are crucial lessons to a mobile-optimized website. In the end, crafting your mobile design as a startup depends on how well you can evoke emotion and interweave such with the latest web design trends. By using emotional intelligence with trendy designs, you can be sure to make a heartfelt mark on mobile users.