The elements and practice cases of personality-affective design for products

"Editor's note" This article translates from the Smashing Magazine, the translator is @c7210, publishes in its personal blog beforweb. In this paper, the emotional design, the goal is to establish a relationship with the user at the level of personality, so that users in the process of interaction with the product to produce positive positive emotions.

The case shows how users can better use the product and show how to make a more enjoyable experience for the user to actively share and promote these positive experiences to others.

Flickr has a lot of interesting sign-in words for users, which is an easy to ignore detail, but Flickr's overall design style and product temperament are made up of many of these details. Perhaps, only when these details disappear from the product, we will find and begin to miss them.

I will pay special attention to these details because they can trigger a user's emotional response. If used properly, the little devils in these details can help us create more personal products and enable users to have positive emotional responses to interacting with them, and this positive attitude can effectively motivate users to actively disseminate and support your product. This design idea, which is associated with the user at the personality level, is also called "Affective Design".

a little theory

The term "affective design" is proposed by Donald Norman in his book of the same name. In designing for emotion, the author Aarron The emotional design to Maslow's hierarchy of human needs theory. Just as human physiology, safety, love and belonging, self-esteem and self-realization of these five levels of demand, product quality can also be divided into functional, dependence, availability and pleasure of these four from the low to high level, and emotional design is at the top of the "pleasure" level.

An effective affective design strategy usually includes two aspects:

you create a unique and excellent style concept, so that users have a positive response. You continue to use this concept to create a complete set of personality-level design.

Next, we will take a look at the elements of affective design and related strategies, take a look at some of the products in these areas are more representative; In addition, we will be through a number of case studies to experience the continuous use of emotional design ideas from the overall perspective of the product's "personality charm."

The constituent elements of

affective design

The goal of affective design is to establish a relationship with the user at the personality level, which makes the user produce positive emotion in the process of interacting with the product. This kind of emotion will gradually make the user have the joyful memory, thus is more willing to use your product. In addition, in the context of positive emotions, users are in a state of relative pleasure and relaxation, which makes them more tolerant of minor difficulties and details in the use of the process.

Affective design consists of the following key elements, from which we can integrate more positive emotions into our products. To be sure, the reactions that users will eventually produce will depend on their respective backgrounds, knowledge and skills, but the components we abstract are universally applicable.

enthusiasm surprise: provide some user unexpected things. Uniqueness: Differentiated from other similar products. (Related reading: IOS Wow Experience – Differentiated strategy for user experience) Attention: provide encouragement, guidance and help. Attraction: People who are attractive in some ways are always popular and the product is the same. Build expectations: Reveal to users what is going to happen next. Exclusive: Provide some additional items to a group of users. Responsiveness: A positive response to the user's behavior.

Now let's take a look at how these elements are refined and applied to the actual product.

Affective Design Product Example

In the following examples, we can see how the elements of affective design are applied to Internet products in different forms. Remember, the design of these examples may not be suitable for your product needs of the personality temperament, you can use these as a reference, and in combination with the actual situation to think more suitable emotional design scheme.

imitate human emotions

Smile

People who appreciate each other subconsciously imitate each other's behavior. When you see the person you like is smiling, you probably will. We can apply this to the design. The picture will, to a certain extent, affect people's emotional thinking, especially those that are subject to characters or events. Let's take a look at a picture of a product that includes both topics:

Through this picture, highrise shows us a happy person and the story of his use of the company's products. Smiles and compliments from actual customers are a very positive form of publicity that makes it easy for potential users to identify and expect to get their products.

Ordinary Happiness

Threadless's shopping cart will show a sad expression when there is no product, whereas it will be very happy. Such small details will make you feel ordinary and interesting, and even involuntarily laugh. Even if the user does not eventually produce the shopping behavior, they will remember this lovely shopping cart.

Retain users

Welfare

Once upon a time, if you try to unsubscribe at audible and tell them that your device is not enjoying their service, audible will send you a 100-dollar Amazon voucher, hoping you can buy the right reading device and continue to use his home service. Even if the user still chooses to unsubscribe at last, they will remember Audible's sincerity.

Music

Etsy will play Paul Young's "Every Time for Go Moz" after user unsubscribe. This is not a way for users to stay, but it can impress them. When users browse the Etsy platform again, most of them will think of this interesting little link, perhaps they can hear this song when they will think of Etsy.

Sharp Humor

The most classic example of this is Groupon's famous joke, "punishing Derrick." Although this scene occurs after the user confirms the unsubscribe, it actually pulls the distance between the user and the website through real characters and sharp and self-deprecating humor. After a more or less guilty joke, Groupon will encourage users to subscribe again. Although you know this is a trick they play, in the face of such a generational joke, most users will find it very interesting that positive emotions and state are fully mobilized.

Copy

Copywriting is the easiest way to show the personality of a product. Whether you want your brand to be more playful, serious, funny or stylish, copywriting can help you move toward your goal.

Compliment

In the "Everyday" application, if you haven't added a photo to the library, then the system will be very friendly to you to take photos of your "pretty face" and put them in the library--a simple word that defines the message or even the tone of the product, in other words, personality.

Contrast

Skitch's privacy tips are short, but they are used in two comparisons, one is the "pssst!" in the copy of the simulation warning sound, and the other is the color of the warning. The combination of the two makes the prompt information both in tone or visual effect on the page with the other content formed a sharp contrast, in the emotional attention of users, effectively conveyed the information content.

Similarly, in Cupid, when users enter their geographical location, the system will be very positive to respond, a "Ahh" on the expression of "good!" "or" We know, welcome your arrival! "The meaning of these aspects. Don't let this chance of "real" communication in the details.

Notes and Notes

The copy in the Hunch registration page is different from what we usually see, they'll tell you "spam is the devil, we don't do it" in the text box of the message, and you'll be prompted "It's worth reading, not too often." In these very ordinary places a little bit of thinking, create a few nuances, this will enhance the product's sense of being, so that users focus more focused, follow the design guidelines to complete the operation objectives.

The details of the milk home will make it easier for users to subscribe to their news messages. Their approach is similar to that of Hunch, which explicitly tells users about the importance of news messages in copywriting and is not frequent.

The following example comes from one of my personal projects where the user needs an invitation code to try this product. At the place where the application is submitted, I use "I want to get an invitation!" Instead of the traditional "submit" as a copy of the button, hopefully this will mobilize the user's mood and make them feel a more realistic and targeted interaction. In addition, I also drafted a simple description of the copy, so that users can rest assured that we will never send spam.

error Page

There is nothing more annoying and frustrating to users than the inability to use the service, especially when they need to use your product specifically to accomplish important things. If this situation is difficult to completely avoid because of some objective factors, then the affective design can at least alleviate the user's negative emotion to some extent.

Interesting copywriting Tips

Users will see the "Flickr is massaging" tip during system maintenance or upgrades on Flickr, and if they are interested, go to their official blogs or microblogs to see the current situation. Such a copy would be more acceptable to the user than a simple, rude error tip.

Say sorry and offer sincere treatment

Also from the Flickr case. When there are some more serious problems with the system, they tell the user: "Well, our pipes are clogged!" And then apologized for using very colloquial copywriting. In addition, they set up a small task for the user, that is, to print out the current page, fill the two rings, and then film it, wait until the site is back to normal to upload to Flickr; the Flickr team picks winners and gives them a year's senior account.

I'm sorry, but ...

There are other important things to do in life. Before Tumblr hung up, they told the user that the problem was in the midst of an emergency, and we were sorry to note that there were other more serious problems at the moment (the 9 earthquake in Japan in 2011) and maybe we could do something together.

Other troubles

Long page load times are also annoying, but in some cases the page or some of these features do take a relatively long time to load. When your site or application is busy sending and collecting data for presentation, you might want to place temporary hints on the interface to attract users ' attention and reduce their perception of response time.

The verification tool Captcha is now used by many websites, but this does not mean that users really like this thing, and many times captcha is really annoying and frustrating. We can't change the working mechanism of the tool itself for the time being, but at least we can explain it to the user by using an interesting picture, like Stack overflow, explaining to users why they want to use this annoying tool to get the user's understanding and reduce their negative emotions.

Intelligent

Intelligent response to the user output, which is an affective design strategy. I like to be able to get the intelligent personalized service that the system provides before I can enter my personal details.

The landing page of the Thermo application can determine the location of the user and, on the left, a highly visual representation to tell the user about the local temperature.

and 37signals through the upper left corner of the day greeting to simple and effective to narrow the relationship between the site and the user's emotional distance.

Email Design

Mail is a very useful tool, but most of the time, users use these emails as a distraction, hoping to receive only the most valuable product information. In fact, can be subscribed to the object is not limited to product information, we can use other aspects of the content to enhance the user's appreciation of mail letters.

Tell a Story

Zaarly in their mail letters with a few mysterious stories, which enhance the appeal of the message, so that users can not help the content and the service of the site to create curiosity, rather than blindly exclusion.

Personalized Content

Quora will recommend to users what he might be interested in in the email. If your site or application has enough data to support such personalized services, consider it.

Surprise

Reminders class messages usually don't have any flower heads, just play the role of informing. If you can add something special to it like a CD baby, the interest of the user can be driven. After the email was sent, "CD baby Private jets" produced more than 20,000 records in Google.

storyline

The storyline can be effective in attracting people's attention. Some of the products are fascinating to tell stories, and Ben The bodyguard is one of the good examples. This is an iphone application that protects the privacy data of a mobile phone, and the entire product concept is designed around a French private bodyguard role named Ben. Its minisite through the very wonderful interactive way lets the user follow this private bodyguard to walk in the street, along with the story plot development to understand this application characteristic, lets you involuntarily immerse in it.

And in the actual iphone environment, the app is still a story-character gesture that mimics French English speaking habits and communicates with users.

eggs

Eggs are usually enjoyable. Even the overall temperament of the relatively serious Google will occasionally add one or two interesting eggs in the product, such as the famous Let it snow snow effect.

Eggs are usually not directly related to product services, and their primary purpose is to make users feel pleasantly surprised and happy, stimulating their positive emotional state, and users in this state are very happy to share their findings with other people.

mascot

One feature of MailChimp's emotional design is his family's mascot, the gorilla Freddie. This guy will cheer you up after your profile page opens, and some random jokes or links will pop up every time you refresh the page.

But this emotional expression also has a precedent for failure. Remember the paper clips that come out of Microsoft Office every time you do something? By contrast, Freddie does not interfere with the flow of interaction between you and the service.

Login Page

Yes, the login page can also be designed to be interesting. Still take MailChimp as an example, every time a certain day, his home login page will be changed accordingly. This Flickr photo collection includes a variety of special login pages for MailChimp. True praise.

In many cases you may not need to be so special. Take pocket as an example, their login page has a strong "welcome" color, a huge background picture foil The use of the application scene, so that users feel immersive, emotional resonance.

in the details of the attraction

The details of the interface elements of the carving can reflect your belief in the product and respect for the user. Look at the quip dynamic loading icon.

The animation effect in this picture is circular, but in the actual site it only appears during the time that the data was loaded. In order to see the animation effect, I will even load the page repeatedly. Such icons also allow users to focus on cool animation effects while waiting to load, making them less aware of loading time. Of course, for this kind of ability to attract attention to the elements, if the use of improper, also can cause negative effects, interfering with the user's normal reading and use of the process.

Dropbox has just started a demo video on Digg, claiming that his product is "Google Drive killer from MIT." Although the tone is very large, but they carefully created a variety of interesting details in the video, firmly grasp the audience's eyes and emotions, such as in the demonstration of the function of uploading files using the name "Keira Knightley is hot enough!!" The picture.

A comprehensive case of

affective design

So far, we have learned some of the affective design elements in different products in a variety of representative forms of expression. Here's a look at three more comprehensive product cases.

case one: Gidsy

In Gidsy, users can spontaneously organize and explore localized activities such as sightseeing, shopping and seminars. Given the nature of the product, designers naturally have to consider how to make the site more attractive.

In color, the gidsy of the page to blue and white, such a combination of the overall style of the site clear and concise, people easy to accept and generate trust. So it's not a coincidence that Facebook, Twitter, LinkedIn, and many other sites will use a similar color scheme.

Gidsy's product personality is composed of a series of retro-style pictures, calmly natural copywriting and surprises.

Sense of the message: Gidsy is full of retro-style pictures, they repeatedly use the same style of visual elements to emphasize the quality of the product personality.

Surprise: Browse to the footer, you will find that encourage you to create free activities of the icon and copy, when the mouse hovers over the icon, a gorgeous rainbow will suddenly come out, its animation effect is directed to the user this action button.

Copy: The site is filled with short and humorous copy, such as "Hello, beautiful People!" "," Bam! Your photos were deleted. "And so on."

These details effectively molded a friendly personality temperament for the product. Also worth mentioning is that Gidsy also used the emotional design in its manual. It is well known that things like documentation and user manuals are usually tedious, but the gidsy approach changes the way people think.

Finally look at the Gidsy news message, this email happened to appear in my mailbox at this time.

It is also a retro photograph consistent with its site style. Also, notice the name of the mailbox they used to send the message? Unlike common practice, Gidsy uses "please-reply" to express his willingness to listen to the user.

Case 2:automattic

Automattic (products, including WordPress, etc.) incorporates a sense of humour into a field of lack of humour-code writing and, to the fullest extent possible, the spirit of Matt Mullenweg's "code like Poetry".

Humour: The Automattic "about" page is filled with a kind and humorous self-introduction, and interested users can feel their fun-filled work environment when they read.

Slogan: One of Automattic's slogans is "We're better at writing code than haiku." It is this seemingly serious sense of humour, or the seemingly humorous seriousness, that lays the tone of their product.

Copywriting: In the footer of the WordPress.com home page, there is a sign that will change every time the load pages are loaded, sometimes "products from automattic" and sometimes "music from the Automattic". This detail reflects their love for their products.

Surprise: In Automattic another product jetpack site, every time you open the home page will see three of the guy carrying a jet backpack to the sky to fly to the animation. This kind of intention and humor can not only bring interesting feelings to the user, but also deepen the impression that the meaning of the product name is related to the user's mind.

Egg: There is an egg in the Self-comparison of WordPress. To prevent the same version of the article from comparing itself, Automattic created a small mechanism in which both the copywriting and the visual style mimicked the scripts in the matrix. This article will teach you how to find this egg in WordPress.

In a product area with such a strong technical color, automattic is endowed with personality traits for its products through the effective application of affective design.

Case 3:clear

Good emotional design can transform users into product communicators, who share their good experiences with others and help build a reputation for your product. People like to talk about the interesting stories, and all you have to do is tell them a story.

A while ago, the to-do class application from Realmac clear is very hot. It's not the first hospitality app on the market, but it's smart to target iphone users, especially the designers who pursue personality. Minimized interface Design (reference reading: minimizing usability design) and unique interaction and visual effects make it significantly different from other similar applications on the market. This is exactly what the user community it is looking for.

Build expectations: Realmac launched a creative and surprising product demo video before Clear was officially released, effectively lifting the user's appetite, making them full of anticipation, and helping to spread the product ahead of time.

Fun: One of the key selling points of clear is the new and interesting way to interact. "Fun" has become a keynote for this product. In the guided view of the application (reference reading: A guided Mobile application interface design pattern), the designer also emphasizes the "play" concept.

Surprise, Exclusive: After you open the theme settings interface in your application, users who have installed Tweetbod will receive a message congratulating them on the extra topics they have enjoyed. These users are likely to be happy with special care and the role of this group in Word-of-mouth communication is considerable.

Also, if you follow the clear developer's Twitter account, you can get another bonus topic. The effect of this egg is still spread. People will share their enthusiasm and even talk about what topics they have acquired or missed.

This is one of the important effects of affective design. These surprises and exclusive elements will not only make people more like your product, but they will share their own pleasurable experiences. Look at what people are doing on Twitter:

Details: If the current to-do item is empty, clear will remind you to create it.

Once again, the prompts will change, citing an inspirational quote from Edison.

Benefits and risks

Everything has two sides, the emotional design of the same risk. When you apologize for a system error, a copy that is too easy and enjoyable may not make the user feel comfortable. Always remember their products to face the user group characteristics, and targeted to fully display the product personality.

We didn't talk about the relative failures in this article, but here's a little piece of advice: if you want your product to show an interesting and crafty personality, remember to watch the user's response. If some design elements do not have a positive effect, be sure to apologize and improve in a timely manner, so as to show your sincerity, show willingness to listen to opinions and correct the wrong attitude. This will ensure that your product is in the right position.

Again, for example, they offer a "party-mailchimp model" where people who don't have a humorous style can disable interesting design elements.

Or it could be the opposite, such as Facebook, which offers a "pirate" model that can turn traditional-style copywriting into a pirate-style term.

The core of all this is to allow users to better use the product, get a more enjoyable experience, and actively share and promote these positive experiences to others.

Original link: Personality for product-the elements of affective design and practice cases