Emotional Design: How to design a web for users 'feels' good.

Beautiful website ... but why people are not bound? The problem that the designer and the owner of the web actually encountered

Have you ever felt like this? You dedicated both money and time to create a beautiful website. Complete function The design is also modern. But the result was disappointing ... The amount of users does not increase. The rate of reuse is small. Customers come in and go quietly. Like just stop by to say hello and then passed This problem is not to you alone. But it is a true story that many web people are facing We tend to be obsessed with "Aesthetics" and "Usability" until the most important dimension is the "Emotion) of users. The "heart" website is no different from the robot that works as ordered. But cannot make any impressions or bonds at all

-[Prompt]-

PROMPT for illustrations: The comparison image between the website A looks beautiful but lively with the website B, which has a simpler design, but there are elements that make the user smile (such as a cute Mascot or a friendly greeting message) with the graph that shows the Engagement A, the stable and the B -website.

-[/Prompt]-

Why does our website "without heart"? Piercing the roots that are overlooked

This problem arises because we tend to look at the web design as just "Logical and reasoning". We create the shortest user flow, put the button to find the most easy to find, use the most contrast colors. But all is the only logic response (Logic) We forgot that humans decided and created most memories with "emotions". According to Don Norman principles, the pioneer of User Experience explained in the famous Emotional Design that there are 3 levels of human perception: Visceral (instincts), Behaviral (behavior) and Reflective. BEHAVIRAL is "easy to use" but the exam fails to the Visceral level that must be "beautiful at first sight" and the level of Reflective that must "create good memories and meaning" for users that we focus on the function but lack emotional connection. Is like building a strong house but no one wants to stay Because it does not give the feeling of the word "house". The ignorance of the user's emotions is the root of the problem that makes our website only "tools" but not "friends" that users think of

-[Prompt]-

Prompt for illustrations: simple infographic images The human brain is divided into 2 parts: "Logic" (with a gear -shaped icon, graph) and "Emotion" (with heart -shaped icons, stars, smiling faces) with the arrows that most designs focus on the logic, but the arrows that point to Emotion is empty.

-[/Prompt]-

Let the website "dry" further ... more painful results than expected

If we continue to let our website be just a beautiful but exposed area The consequences were more serious than just "Sales are not bang", but it is a long -term corrosion brand. Imagine:

• Brand Loyalty is zero: When there is no emotional bond Customers do not have a reason to be loyal to your brand. He is ready to change to a competitor as soon as there is a little better proposal.
• No further (Word-OF-Mouth): People will share or tell what makes them feel "wow", "impressive", or "fun". The website that is just "can be used" will not be remembered or mentioned at all.
• Disappear in the sea of ​​competitors: in an age that everyone can create a beautiful website "feeling" is something that creates true differences. If your website is not emotional It will look no different from other websites. Millions in the market
• Loss of opportunities for creating Community: The common feeling is the foundation of community building. Heartless websites are not able to build a fan base that is ready to support and protect your brand.

Ignoring Emotional Design is like you try to add water to the leak. You may be able to get a lot of marketing budgets to draw people in. But in the end, they will flow out completely Because your website "Their feelings" can't keep their good ". Understanding The impact of the organization website on brand Will help you see the image more clearly why this matter is extremely important

-[Prompt]-

Prompt for illustrations: Before/After comparative images. The first side is a water tank with many holes. The water flowed almost completely. (It is like a customer that has passed away). The After side is a water tank that has been leaked with heart -shaped icons. And has a full tank (Like customers who are still with the brand)

-[/Prompt]-

Wake up your heart for your website! Starting from 3 levels of Emotional Design

The good news is ... We can wake up our hearts for our website to be lively! And the best starting point is to understand and apply the 3 levels of Don Norman's Emotional Design at Interaction Design Foundation. Let's see what each level is and where we can start:

• Level 1: Visceral Design (the design that affects instincts): This is "love first." It is the first impression that occurred in a second. The user will judge immediately that "likes" or "do not like" without even thinking. It is the story of "Look and Feel".
  Starting from here: Focus with the quality of the illustration, the use of the color that conveyed the brand's emotions, beautiful Typography, easy to read, clean and attractive layout.
• Level 2: BEHAVIRAR DESIGN (Design that responds to behavior): When the user starts "use" your website The feeling will change to the "ease" and "efficiency", your website makes his life easier? Used and felt smart and able to accomplish anything as you wish?
  Starting from here: making the website easiest to use (USBILITY), reduce complex procedures, allowing every user's actions to have a clear response (feedback), such as using lovely micro -inTerations
• Level 3: Reflective Design (the design that creates a reflection): This is the highest and most powerful. It is the feeling. "After" What user has been used from your website? Does it make him feel good about himself? Is it linked to the identity or the value that he holds? It is the creation of "stories" and "meaning".
  Start from here: Create a brand that is worth following, using UX Writing that shows understanding (such as a friendly error message), creating a feeling of brands, and giving "value" that is more than just the product or service.

The perfect design is to combine all 3 levels together. To create experiences that are not just "satisfactory" but it is a memorable ". If you need experts to help place strategies in this section, UX/UI design service is ready to give advice.

-[Prompt]-

Prompt for illustrations: 3 layers of pyramid pyramid, the bottom floor is "Visceral" (eye -shaped icon), the middle layer is "BehaVIoral" (hand -shaped icon, use) and the top floor is "Reflective" (the brain -shaped icon, the meaning/story) with short explanations in each layer.

-[/Prompt]-

Real cases from mailchimp: When "Monkey" creates world class bonds

If talking about the example of a company that uses Emotional Design, it becomes a legend of "Mailchimp". It must be first. Mailchimp is a platform for email marketing, which is a "boring" and "full technique, but they can make it" fun "and" friendly.

Starting problem: Email campaign is stressful and worried for marketers. You have to check and check again. Afraid to send mistakes And hope that the results will come out well

How to fix with Emotional Design: mailchimp understands this feeling well. And they designed the experience at all levels to change stress into happiness:

• Visceral: They use Mascot monkeys called "Freddie" with cute and playful characters, unique style, and friendly language. Makes it feel good
• Behavioral: Their platform is reputed to be very easy to use. The steps are clear, not complicated. Makes the user feel that "can do" and "control" everything
• Reflective: The most peak is "after" that you have already sent an email campaign. Instead of finding a boring screen, Mailchimp will show the animation of the Freddie monkey that is "Hi-Five" with you with a message to encourage this little thing to create enormous emotional impacts. It turns the most stressful moments into a time of "Celebration" and "good feelings". Many users even take pictures of this screen to share on social media with good feelings.

Results: Investment in Emotional Design makes mailchimp not just a "tool" but becomes a "partner friend" of the worldwide marketers. Until growing into billions of dollars This is the power of design that truly understands the "heart" of the user.

-[Prompt]-

Prompt for illustrations: Mailchimp screen model with Freddie Mascoting Freddie is fun acting (such as high -five) after some users work. With a graph showing the satisfaction of the customer (Customer Satisfaction)

-[/Prompt]-

Checklist can be used immediately! Wake your website to live in 3 steps.

Would like to try to apply Emotional Design to your website But don't know how to start? Don't worry! Try using this simple checklist. Can be divided into 3 levels so you can do it immediately.

Step 1: Modify "Visceral Level"

• [] High quality images: All images on the website are clear, beautiful, and communicate the emotions of the brand?
• [] Palette, the right color: the color used on the web is consistent with the personality of the brand and creates the desired feeling (such as blue = reliable, yellow = fun) or not?
• [] Fonts that are easy to read and have characters: The letters look good, read comfortably, and match Mood & Tone overall?
• [] White Space suitable: Is there a space for "breath"? Or everything is so uncomfortable?

Step 2: Create an experience that "Behavioral Level"

• [] Lovely Micro-International: Is there a little response that makes us use? (Such as the color changing button when pointing the mouse, the icon that can move). A good micro-inactions will help you get more ideas.
• [] Reducing ideas: Designed by taking into account Cognitive Biases or ideas to reduce the burden of users?
• [] Clear navigation message: The user always knows what to do next? Various buttons and menus Easy to understand or not?
• [] Feedback in a timely manner: When the user succeeds (such as filling in form), is there a clear and friendly confirmation message?

Step 3: Relationship "Reflective Level"

• [] Brands (About US): Page "about us" can tell a charming and inspiring story?
• [] UX Writing that understands: language that uses the user "as a human" and shows how much sympathetic? Especially on the Error Messages page that should be rescued, not aggravated Try to study more from the article. Writing a good error message
• [] Create a special feeling: give a special privilege, thank you, or specific content for regular customers to make him feel "important people"?
• [] Linked with higher values: What is your brand standing for? (Such as sustainability, helping society) and do you communicate that user?

Just start these checklist one by one. Your website will begin to have a "heart" and create better bond with users.

-[Prompt]-

Prompt for illustrations: Large checklist images that look beautiful and easy to use. With 3 main topics, Visceral, Behavioral, Reflective and has a cute icon Assembled in each item

-[/Prompt]-

Questions that people tend to wonder (FAQ) about Emotional Design.

We have compiled a question that many people wondered about Emotional Design with clear answers and easy to understand here.

Q: Emotional Design is suitable for every business? Or only suitable for the brand of lifestyle products?
Answer: Suitable for every business! Whether you sell B2B software, financial services, or consumer goods Your user is still a "human" who has feelings. Creating positive feelings such as reliability, safety, feelings of care All are important for every business. The design that understands the emotions will always help make the differences and advantages in the competition.

Question: If we have a limited budget Should start investing with Emotional Design first?
Answer: Start with small things. That can make a lot of impact Also known as "Low-Hinging Fruit", such as
1. UX Writing: Improve the text in the button (CTA), topic, and error messee to be more friendly and understand. This part uses the least cost but see results.
2. Micro-inverttions: Add a little animation when pressing the button or loading the webpage. To make the usage look more lively.
3. Picture: Selecting or taking the main image (Hero Image) that will be used on the first page. Because it is the first thing that users see and impress immediately

Question: How can we measure the success of Emotional Design?
Answer: Even "feelings" are difficult to measure. But we can measure through the changes of users, such as
- Time on Page (when used on the webpage): If the user feels enjoyable He will be on the web longer
- Pages Per Session (the number of openings per time): Good feelings will encourage them to explore your website more
- Conversion Rate (concentration rate): Positive trust and feelings directly to buy or contact
- Brand Mentions (Speaking of brands): Notice in social media. That someone is talking about good experiences On your website?
- Customer Satisfaction Surveys (Survey of satisfaction): Add questions about "feelings" to use in the survey.

-[Prompt]-

Prompt for illustrations: Large question mark icon (?) Surrounded by a small icon That conveys various questions such as budget, measurement, business type

-[/Prompt]-

In conclusion: It's time to stop creating "website" and then create a "feeling".

At this point, I believe that everyone will see the same picture that Successful website design in this era Cannot focus on "beauty" or "ease" anymore, but must go down to the creation "Good feelings" to happen in the minds of users. We have learned the 3 levels of Don Norman from Visceral (instinct), Behavioral (behavior), to reflective (reflection), which is an important green print to create a complete and memorable experience.

Investment with Emotional Design is not just a web decoration to look good. But it is an investment to create "Relationships" in the long run, it is a change from "visitors" to "fans" and change from "brand" to become a "friend" that users think and trust. Don't let your website be just a code and a lively pixel.

It's time to wake your heart for your website! Try to use the checklist that we give to use little by little. I guarantee that you will definitely start to see the changes. Start today To create a website that your user will "love", not just "use"! If you need a professional team to help create a website that is both beautiful and understanding the heart of users Consult the Vision X Brain UX/UI design team for free! We are ready to be a partner and create impressive results for your business.

-[Prompt]-

Prompt for illustrations: Powerful graphics Showing the hand of the designer, changing the sketch of the website (Wireframe) in a lifeless line to become a colorful website and a heart -shaped icon floating out. Conveying normal websites into a lively website

-[/Prompt]-

‍