Building Emotional Interaction Into Your Website
Of the many factors that must be considered in web design, emotional interaction is often neglected during the process. Unlike in the physical world where we experience the sensual interaction of design all the time, the digital world seems to be filled with emotionless websites. Think for a moment on the emotional engagement when you are behind the wheel of a luxury supercar. The comforting embrace of the driver seat and the curved, welcoming and friendly outline of the car. Don’t you feel emotionally attached to it already?
The luxury car can perform equally well without all these aesthetics. Yet this singular focus on emotional engagement is what separates luxury goods from the rest and cause consumers to have deep loyalty for the brands.
One of the great examples is Apple. Apple always has a meticulous eye for detail. They also focus a lot of the user experience and making sure their consumers are emotionally attached to their products. Just look at the queue outside Apple stores whenever there’s a new iPhone launch and you know they have succeeded in the emotional engagement factor.
Designing For Emotion On The Web
Although website lacks many sensual cues, it is still possible to create an emotional experience through colors, typography and animations.
CSS Transitions
CSS transitions are like the grease on the website. Without a transition, elements will just be flicking from one state to another. By having such transitions, you can ease the motion of an element over a few hundred milliseconds such that it feels inviting. In certain cases, transitions can make the website feel faster. These CSS transitions help to make interactions on the website more human. These transitions should encourage visitors to explore the website by tempting them to mouseover or click the elements to reveal more information.
However, important elements or content should not be hidden via CSS transition as you do not wish your visitors to be missing out on the most important information on your website. The rewards for exploring your website should be treated as a bonus and not a compulsory interaction. You have to understand that most visitors nowadays are very busy and might not have the time to explore your website.
Hover over the div element above, to see the transition effect.
CSS Animations
The CSS animations are like powerpoint animations. It reveals the content as you read, making your website not as dead as it is. The pleasant introduction of content appearing makes you feel invited as well. You can visit our homepage to see how we play around with the animations of the elements.
However, overusing of such animations can be very annoying as readers will have to keep waiting for every content to appear. An UX designer will be able to advise you on the appropriate amount of animations.
Feedbacks
Just like in the real world, when you are typing on the keyboard or clicking the mouse, you will hear a feedback sound for every click to acknowledge that your action has been received. It’s interesting to know that we want to feel acknowledged whenever we perform an action (just like a dog). Especially on a software, when we click on any options, we expect something to appear or at least indicating that the option is being clicked. If we don’t see it, we will keep trying. We will then feel frustrated and complain that the software is “lagging”.
Hence, on the website, you need to indicate with either colour change or revealing content when they click on any internal links on your website.
Having Human Photos
Sometimes, it can be as simple as adding real life photos on your website. It’s the easiest way to visualize emotions. A photograph of someone expressing his or her feelings – for example while using your product – will be much convincing than a bunch of descriptive text. Using a human face to carry the emotions felt is a great way to describe your products.
Make Your Visitors Smile
Last but not least, if you can put a smile on your visitor’s face, you have succeeded in having the emotional engagement on your website. One approach is to avoid being all serious about your business. Try to insert humor or cheeky lines to break the chunk of information. You can also use the element of surprise to present different panes of information like hovering over an image or perform certain actions to see the end results.
Conclusion
Once you connect with your customers through an emotional engagement, they will be more loyal to your brand; not because they think you make great products, but because they know you make the great products for them.