Secrets to Achieve a More Emotional UI Design

Humans are used to being entertained constantly, everyday, anywhere. An app is a product nobody expects to be boring and if it is, users will probably ditch it. I am not saying apps need to be hilarious but they ought to be, at least, gentle. This is why you need to include emotional components.

Users need to feel some sort of connection with the app in order for it to be successful. Donald Norman, the director of The Design Lab at University of California, San Diego, explains it really well in his book Why We Love (Or Hate) Everyday Things. His fundamental thesis is: attractive products work better. Beautifully designed products make people feel good, be creative and find solutions. It’s not about filling every screen with decorative elements but to create a certain look and feel that lets people relate to products.

Functionality is, of course, the central issue on any app. Apps have to work well, they need to solve a problem. There are many apps that are horrible and really hard to navigate that we still use. But that is probably because there are no competitors or because we are attached to them in some way. A very clear example of this is bank apps. They are complex, they don’t always work, they are not nice but it’s even more uncomfortable to actually go to the bank. Anyway, when we develop apps that solve problems other apps also solve, we need to bet on differentiation in order to attract users.

One way to do this is by achieving some empathy between the product and the users. This idea fits in well with the state-of-the-art literature in cognitive science that shows that emotions are inseparable from and a necessary part of cognition. Beyond the app’s functionality, designers ought to accommodate aesthetic elements that appeal to the users’ emotions. This process is critical in the development of a human-centered design.

Well designed products evoke positive emotions, have an easily decipherable functionality and let consumers maintain an innate sense of identity while using the product. The interaction of these three characteristics leads to emotional design. This design becomes critical in a competitive market where opportunities for differentiation of functionality are scarce. Designers need to think which is the reaction they want to trigger on consumers. Is it a “wow” or just a “cool” or maybe an “awwww”.

Illustration

Stock images are completely out of date. Illustration is emotional because it communicates more than what’s directly associated with the themes you are dealing with. They are witty, playful, imaginative and personal. The old saying “a picture is worth a thousand words” is still relevant to today’s UX.

Contrary to popular belief that UI Design is highly technical it actually allows creativity while adding meaning and user delight with proper use of illustrations. They can attract users’ attention and deliver critical information in an easy-to-understand way. Thy engage users too, illustrations make the product interesting!

Illustrations can turn a boring onboarding process into an engaging experience without too much text on the screen.

Also, when facing a problem, illustrations can be used to add a little sense of humor and humanize the problem.

Inflight & Illustration

Inflight is a platform where mentors and founders can be matched online across the world, without physical or scheduling barriers in order to solve professional trouble. It’s a global toolbox of resources for entrepreneurs in every stage, increasing their chances of success and enhancing their journey as founders.

The resources used in the previous versions of the platform were disorganized, inconsistent and had problems when showing system feedback and errors. With the new and improved visual hierarchies and branded illustrations, Inflight achieved a brand evolution and solved usability issues. An app that allows people from different parts of the world to connect and talk about their professional careers, future plans and business should be expressive and warm and construct itself as a safe and friendly environment that makes users feel close to each other.

Inflight illustrations.

Animation

Every UI may use a form of animation. And I recommend it. It’s natural and spontaneous. They are useful in order to direct the users’ attention, to make them learn how to use a product and for emphasis or surprise. When using animation, you should maybe try to get out of transition animation and try something new.

Shazam & Animation

Concentric circles outward and inward. This similarity to an audio speaker makes the interface almost tangible, physical as if you’re blasting your favorite album on a powerful sound system.

With Shazam’s latest redesign listening animation was implemented. Smooth animations and seamless transitions were also added. They used a robust but flexible architecture that allowed defining different state animations independently but also supported transitioning between them.

They used two core components: the choreographer, responsible for generating relative vaues that define the look of each part of the button on each frame and the renderer, responsible for translating values into concrete measurements and draw commands.

Check out George Venios story for more info on this topic: Behind the scenes of the Shazam animation

Gamification

Gamification has been defined as a process of enhancing services with motivational affordances in order to invoke gameful experiences and further behavioral outcomes. In defining gamification, Huotari and Hamari in “Defining gamification: a service marketing perspective” highlight the role of gamification in invoking the same psychological experiences as games do.

The point of gamification is to trigger certain emotional responses that push users gently into having certain behaviors such as keep coming back to the app, post on social media or buy in-app products. Your interface needs to be as enjoyable as it can in order to imply a pleasurable experience for users.

Lima & Gamification

Lima is an app created by Lateral View to improve the user’s well being by generating small changes in their physical activity and nutrition. Its aim is to promote changes in habit without putting the user through a great deal of sacrifice, such as impossible workouts and extreme dieting.

Visual gratifications encourage gamification for the user to have a pleasant experience while changing their life habits. Clear data visualization and user engagement are the key to a successful UX.

Incorporating Lottie library helped them add animations easily and this generated a consistent UI. Visual gratifications when user goals were reached and illustration badges and animations reflected user movement and helped the team to work on the app’s gamification.

Lima.

Are you interested in Lima and are in Barcelona next week? It’s your lucky day!

Humor

In order to create memorable experiences you need to make a significant change in users’ lives. Humor in design can create a positive UX. Of course, there are boundaries. You shouldn’t turn into Jerry Seinfeld or format all your FAQs as knock-knock jokes. You can incorporate humor in your design while maintaining the branding and without looking like you are trying too hard.

Users enjoy and are used to Internet humor. Let me be clear, this does notmean you need to turn your product into a funny gif or meme. You don’t have to become goofy or ridiculous but you can use an edgy tone. You need to surprise your users with something they weren’t expecting. Flickr, for example, uses in order to explain down-time phrases such as “Flickr is having a massage”. It’s funny and “naughty” but it isn’t too much or invasive. MailChimp is also a great example. It’s a funny name, they have funny messages and they have a funny mascot: Freddie von Chimpenheimer (we’ll get back to mascots later on).

These details instantly bring a smile to the users’ face and they may even cause users to share your product with their friends, colleagues and so on. It’s all about connecting with users. If you have any doubt about the importance of humor, you can check out Webbys “humor category” for its annual website awards or the Shorty Awards’ category “best use of humor”.

When many websites look and feel the same across industries humor can set your UX and UI apart from others and make your brand memorable.

Slack & Humor

A great UI example of humor is Slack. Christina Janzer, head of research at Slack, said on a Slack Medium story: “What would it look like to bring more humanity, fun, and delight into the tools we use for work?”. And they’ve certainly worked on that issue.

An important signal of employee engagement lies in how people feel about the tools they use at work. Slack cracks a joke every now and then but they play it safe with some puns and simple jokes that don’t make you laugh out loud but maybe smile a bit or take a screenshot. What’s really clever about Sack is that they have really good timing. They know when a joke can be inappropriate and when it is a good fit.

Mascots

Cute characters have existed in web design since its beginnings. Mascots in UI can be intrusive when they make the user lose focus. Let’s examine Clippy, the infamous Microsoft Office assistant. He was bright, in-your-face and unbelievably annoying.

Clippy was introduced in 1996 and refined three years later in Microsoft Office 2000. In 2002 he went into retirement and stopped randomly interrupting the Prince of Persia to ask if you needed help writing a letter. Clippy went down in history as one of the worst UI ever deployed to the mass public.

Clippy and Bill Gates.

Clippy shouldn’t discourage the mascot building game. It’s just an example of what’s not to be done. Mascots are nicely designed creatures which are supposed to evoke sympathy and strengthen the sense of belonging to a certain product. People easily personify things even if but lifelike creatures are easier to relate to.

These little characters can make your website more personal, authentic, trustworthy, fun, and engaging .An animated mascot can have a certain personality that enhances the product’s brand identity. They should be playful and helpful and can come in handy specially when the product that’s being created is far from being emotional. Timing is the key to success. The mascot shouldn’t appear uninvited. You need to learn when it creates a positive user reaction for the mascot to show up.

Freddie von Chimpenheimer from Mail Chimp even has his own website: http://freddiesjokes.com/

Polished is no longer enough for UI. Polish is just what’s expected but humane details are what makes a product great. Not all products are inherently fun. Apps that deal with repetitive tasks often struggle with retaining users. But utilities don’t need to be boring. You can add positive components to make products interesting.

Visit Elevate: a publication by Lateral View.

Let’s Talk

CONTACT US