In this webinar, Mediacurrent's Creative Director, Sheree Hill, will examine the human factors and basic principles of emotional design. Learn techniques to keep your audience engaged and converting on your website.
You can find the recording here: https://players.brightcove.net/pages/v1/index.html?accountId=1027729815001&playerId=default&videoId=5987663516001&autoplay=true
3. | 3
Mediacurrent is a full-service digital agency that
implements world class open source software
development, strategy and design to achieve defined
goals for enterprise organizations seeking a better
return on investment.
Who We Are
4. | 4
As Creative Director at Mediacurrent, Sheree
provides clients with an immersive and
engaging user experience through empathy
and behavioral science.
With 15 years of award winning agency
experience, Sheree has been privileged to
work with iconic brands including Harley-
Davidson, AT&T, Kellogg’s Special K,
Tupperware, Budweiser, The Home Depot,
Toyota Scion, Listerine, Dancing with the Stars,
American Idol, Southeastern Conference
Sports, NCAA and Sony Pictures.
Her work in higher education includes
University of Southern California, Alvernia,
Georgia Tech and Emory University’s School
of Business.
Sheree Hill
Creative Director
linkedin/in/shereehill/
@flutter
sheree.hill@mediacurrent.com
5. | 5
UX Design is centered in human behavior. By
understanding human wants and desires, we create a
tailored experience that speaks to fundamental human
needs, ultimately leading to a predictable path of decision.
50. | 50
Much like storytelling, brands who focus on holistic user
journeys rather than devices will set themselves apart in
2019. Thus, designers will need to adapt their approach in
step with the direction the industry is taking.
54. | 54
Emotional Design: GA Tech Brand Intimacy
Fulfillment: The brand promises the achievement of something desired.
55. | 55
Emotional Design: Guardian Brand Intimacy
Identity: the brand values that which the customer identifies with and projects a desirable lifestyle.
56. | 56
Emotional Design: Brand Intimacy
Enhancement: the brand promises to make life easier and to help the
customer to be smarter, as well as more effective, capable, and connected.
57. | 57
Emotional Design: Brand Intimacy
Ritual: the brand aims to become part of the customer’s daily routine.
58. | 58
Emotional Design: Brand Intimacy
Nostalgia: the brand offers attributes that are reminiscent of fond memories from a consumers’ past
59. | 59
Emotional Design: Brand Intimacy
Indulgence: the brand appeals to the senses; luxurious
63. | 63
Do you need support?
Please reach out to our speaker Sheree Hill with any questions.
Need help with a Design, Development, or
Digital Strategy project? Connect with us today!
Sheree Hill
Creative Director
Mediacurrent
sheree.hill@mediacurrent.com
Thank you for joining!
linkedin/in/shereehill/
@flutter
sheree.hill@mediacurrent.com
Welcome to intro to emotional design, i am so thankful to be here today with each one of you.
UX Design is centered in human behavior. By understanding human wants and desires, we create a tailored experience that speaks to fundamental human needs, ultimately leading to a predictable path of decision.
I want draw our focus to who we are.
Our humanity.
What does that look like to you?
I believe one way to view that is we are made up of three parts.
<Mind>
<Body>
<Soul>
Our process of acquiring knowledge and understanding through thought, experience, and the senses.
Human centered design, empathy (ETHOS) personas
How do we know our audience?
emotion is not opposed to reason; our emotions assign value to things and are the basis of reason
emotion is not opposed to reason; our emotions assign value to things and are the basis of reason
3 Levels of Emotion
According to Don Normon’s Theory of Emotion there are three levels of human emotion
Visceral
This our primal system, it is the system that we are born with, it is relational to deep inward feelings rather than to the intellect.
Viscera - The internal organs in the main cavities of the body, especially those in the abdomen, such as the intestines.
Neurotransmitters (chemical messengers in our brains) determine what emotions we feel and force a physical response. Raw and uncontrolled, these visceral reactions are something all people experience, making them a valuable tool for building reader empathy. Some examples would be shivering, adrenaline rushes, the heart rate and breath speeding up or slowing down, the stomach tightening, a flash of nausea, a flush of heat, and sweating. It is regulated by the autonomic nervous system, which is a control system that acts largely unconsciously and regulates bodily functions
Within the brain, the autonomic nervous system is regulated by the hypothalamus.
Spider in a drawer, slamming the drawer shut, screaming and running away
Scientists have explained it to be a result of evolutionary selection. This means that Arachnophobia is an evolutionary response, since spiders, especially the venomous ones, have always been associated with infections and disease.
To produce the fight-or-flight response, the hypothalamusactivates two systems: the sympathetic nervous system and the adrenal-cortical system. The sympathetic nervous system uses nerve pathways to initiate reactions in the body, and the adrenal-cortical system uses the bloodstream. This is why an image such as this, (or in real life) will quicken the pulse and create automatic response.
Primal instincts, such as attraction and sensuality can cause also cause physical reactions within the visceral system.
In addition, combining elements of dopamine eliciting stimuli can create stronger reactions, as in this example of a woman’s hand and melted ice cream.
The behavioral level emotion is how we use something, how we learn to understand it.
Can we predict to understand? Does it feel good?
Skill development occurs through behavioral repetition and practice that is both emotional and cognitive.
Our process of acquiring knowledge and understanding through thought, experience, and the senses.
The theory of multiple intelligences was developed in 1983 by Dr. Howard Gardner, professor of education at Harvard University. It suggests that the traditional notion of intelligence, based on I.Q. testing, is far too limited. Instead, Dr. Gardner proposes eight different intelligences to account for a broader range of human potential in children and adults. These intelligences are:
Linguistic intelligence (“word smart”)
Logical-mathematical intelligence (“number/reasoning smart”)
Spatial intelligence (“picture smart”)
Bodily-Kinesthetic intelligence (“body smart”)
Musical intelligence (“music smart”)
Interpersonal intelligence (“people smart”)
Intrapersonal intelligence (“self smart”)
Naturalist intelligence (“nature smart”)
This is the conscious level of emotion. It is experiential and historical.
This is where we think back on what we did or did not do
This is where our conscious beliefs live as well as experiential Learning
There can be no knowledge without emotion. We may be aware of a truth, yet until we have felt its force, it is not ours
This could be where the term “Walk a Mile in My Shoes” comes from.
Showing: hyperdex life-mapping examples (encourage reflection, lessons learned, balance tiers)
Our favorite objects tell a story that capture the mind heart and body. These are the things that people cherish the most.
Design is about fitting people’s needs, whatever they may need at that time.
I want to share with you about my children. I love to watch them play. Often times they go so lost in what they are doing, they are ever present, every delightful, ever full of joy.
I notice that after awhile they may begin to squirm or express in restrictive ways
They look a little like this;
I ask them if they need to go to the bathroom.
To which they reply “no”
I then tell them “Your mouth is saying something but your butt is saying another”
In user centered design and behavioral science, we watch what our users do.
In 1980 Robert Plutchik constructed a wheel-like diagram of emotions visualising eight basic emotions, plus eight derivative emotions each composed of two basic ones.
The 8 basic emotions that Plutchik devised were:
Anger
Disgust
Fear
Sadness
Anticipation
Joy
Surprise
Trust
Author/Copyright holder: xdxd_vs_xdxd. Copyright terms and licence: CC BY-SA 2.0
From this initial emotional theory Plutchik then developed a Wheel of Emotion. It was designed to help the user understand the nuances of emotion and how emotions contrast with each other. He developed both 2 and 3 dimensional models for this. The 3D model is the “cone-shaped model of emotion”. They were first described back in 1980.
The wheel can be used by designers to examine the complexities of emotion and to act as a “colour palette” for emotional design – with the idea being that blending different emotions will create different levels of emotional responseand intensities of that response.
The wheel focuses on the basic emotions that most designers are likely to want to elicit in their users and as such provides a useful starting point.
Anticipation + Joy = Optimism (with its opposite being disapproval)
Joy + Trust = Love (with its opposite being remorse)
Trust + Fear = Submission (with its opposite being contempt)
Fear + Surprise = Awe (with its opposite being aggression)
Surprise + Sadness = Disapproval (with its opposite being optimism)
Sadness + Disgust = Remorse (with its opposite being love)
Disgust + Anger = Contempt (with its opposite being submission)
Anger + Anticipation = Aggressiveness (with its opposite being awe)
emotion is not opposed to reason; our emotions assign value to things and are the basis of reason
With careful observation, emotions may be detected from non-verbal signs. Remember that these are indicators and not certain guarantees. Contextual clues may also be used, in particular what is being said to the person or what else is happening around then.
Happiness
Happiness occurs when goals and needs are met.
General relaxation of muscles.
Smiling (including eyes).
Open body language
How do we mirror community interactions to touch on human emotion within a design system?Through Micro-interactions - small moments with technology we often look but are anything but insignificant.
Conditioning: Positive reinforcement encourages an action by rewarding it.
There are two ways to use positive reinforcement in UX.
You can train your users to utilise it and master it by rewarding their interaction with it, by imposing rewards on the platform as a whole, this is not forming a particular behavior or habit. You simply want to encourage continued and repeated use of the website or mobile app in general. To accomplish this positively reinforce the key behaviors by rewarding the user when they complete them, ultimately cultivating a more engaging, enjoyable experience. These rewards do not have to be lavish or complicated. They may be as simple as giving the user a clear, concise confirmation that they have completed the interaction successfully.
When employing an
Unconventional design feature
A non-traditional navigation
Unfamiliar architecture
The little burts. The tiny explosions. The movement of icons. The popping of numbers. All of these are microinteractions, stimuli within our cerbral cortext that causes the release of dopamine and seratonin. MRI studies have revealed that cortical activation from the external stimuli of clapping. Medium’s simulation of the behavior paired with bursts, movement and numbers popping can cause cortical activation, which is stimulation of areas of the cerebral or cerebellar cortices. Attainment is possible through sensory arousal or mental tasks. Microinteractions have become an essential part of our digital life. From the time you wake up to your mobile alarm, to checking emails, liking your friends post on Facebook to playing songs on your iPhone- we live with microinteractions all day.
Anger
Sigmund Freud related frustration to goal achievement.
Our actions have a purpose or goal, and any interruption to this goal completion is upsetting. Other psychologists have linked frustration with the anticipation of a goal, rather than its actual achievement. If our expectations are thwarted as we pursue an aim, the hindrance blocks satisfaction and skews anticipations. Alternatively, as Roger Barker posits, frustration occurs when “an obstacle prevents the satisfaction of a desire.”
Neck and/or face is red or flushed.
Baring of teeth and snarling.
Clenched fists.
Leaning forward and invasion of body space.
Other aggressive body language.
Use of power body language.
Lack of indication can frustrate a users goal for process completion.
Frustration occurs when an individual continues to do an action in the expectation of a reward but does not actually receive that reward, and is associated with anger.
Uncertainty, Frustration
Good progress indicators always give some type of immediate feedback. They notify users that the app needs more time to process the user action, and tell (approximately) how much time it will take. They have two main advantages:
Reduce user’s uncertainty (app reassures the user that it’s working).
Offer a reason to wait and reduce users’ perception of time (app gives the user something to look at while waiting. Thus, makes users pay less attention to the wait itself).
A user’s wait time begins the moment when she taps the screen (initiates an action). Immediately, the system should give some visual feedback to communicate that it has received the request.
Many websites show a progress indicator or, even better, a page skeleton during loading, gradually unveiling the actual content as it’s being loaded.
In UX practice, use skeletons to show content piece by piece, continuously, gives a feeling that the loading process is fluid (and quicker).
Fear, anxiety and nervousness
Fear occurs when basic needs are threatened. There are many levels of fear, from mild anxiety to blind terror. The many bodily changes caused by fear make it easy to detect.
A 'cold sweat'.
Pale face.
Dry mouth, which may be indicated by licking lips, drinking water, rubbing throat.
Not looking at the other person.
Damp eyes.
Trembling lip.
Varying speech tone.
Speech errors.
Voice tremors.
Visible high pulse (noticeable on the neck or movement of crossed leg.
Sweating.
Tension in muscles: clenched hands or arms, elbows drawn in to the side, jerky movements, legs wrapped around things.
Gasping and holding breath.
Fidgeting.
Defensive body language, including crossed arms and legs and generally drawing in of limbs.
Ready body language (for fight-or-flight)
Other symptoms of stress
Humanizing UX: Using Friction in Error Prevention
Error prevention is a basic usability principle, and the most common use of friction in product design is to make it hard to do something by mistake (especially when it comes to nonreversible actions):
Purpose of Pain: Fear will focus users and eliminate distraction
In error prevention: CONFIRM ACTIONS WITH SEVERE CONSEQUENCES
From the user’s perspective, such confirmation is an extra step in the process (a friction, actually) but at the same time, they are assured that they will not accidentally perform an action that is hard to undo.
Sadness
Sadness is the opposite of happiness and indicates a depressive state, often can be caused by loss or failure.
Drooping of the body.
Trembling lip.
Flat speech tone.
Tears.
Empathy in UX
Neuroaesthetics is probing the relationship between art and the brain.
Mirror neurons are a type of brain cell that respond equally when we perform an action and when we witness someone else perform the same action.
A narrative conveys information from one person’s brain to another’s in an effective way. We can learn vicariously through another’s experience from a safe space, without really being involved, which is why storytelling is so powerful. Research has shown that, as humans, we are actually programmed to be enraptured by stories. When we hear a story, the neural activity in the brain increases fivefold, meaning that we are much more likely to remember the story and the message it’s trying to convey.
We can empathize with what the characters go through without suffering the full force of fresh heartbreak. Research shows that we tend to empathize more with characters in sad stories , and this may trigger hormones releated to consoling and bonding
Care.com uses the Hero area of their campaign sites to show an emotional story through the eyes of affected individuals
This campaign features content raising awareness on the THE HUMAN COST OF CUTS
Where New Analysis from Leading Humanitarian, Development and Global Health Organizations Calculates the Devastating Human Costs of Cuts to Foreign Assistance
Placing a face and emotional connection on the foreign assistance cuts may help raise awareness of the impact of such decisions.
Anticipation
Anticipation involves pleasure, excitement, or anxiety in considering or awaiting an expected event
More generally, anticipation is a central motivating force in everyday life — "the normal process of imaginative anticipation of, or speculation about, the future". To enjoy one's life, "one needs a belief in Time as a promising medium to do things in; one needs to be able to suffer the pains and pleasures of anticipation and deferral"
Some people seem to smile uncontrollably during this period
Others seem ill or sick
It is not uncommon for the brain to be so focused on an event, that the body is affected in such a way
It creates Delight, which is a high degree of gratification or pleasure, extreme satisfaction, joy.
Anticipation is used in UI and game design. Elements of surprise, delight, anticipation, can be effective in getting your audience to fall in love with your brand.
This is how bands can build memories through whimsy and surprise.
Surprise
Surprise occurs when things occur that were not expected.
Raised eyebrows.
Widening of eyes.
Open mouth.
Sudden backward movement.
In UX a Surprise is also an unexpected or astonishing event, fact or thing. It also creates Delight and joy.
Micro interactions is about designing for moments.
It’s about establishing an emotional connection with your users and reminding them that product they’re interacting with is designed by humans.
Each one of us possesses an amount of spatial intelligence, it is how we comprehend three-dimensional images and shapes. This is a primary function of the right side of the brain and is used when solving puzzles, figuring out maps and taking part in any type of construction or engineering project.(GISHTAHLT)Gestalt is a psychology term which means "unified whole". It refers to theories of visual perception developed by German psychologists in the 1920s. These theories attempt to describe how people tend to organize visual elements into groups or unified wholes when certain principles are applied.
These principles are as follows:
Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern. The example above (containing 11 distinct objects) appears as as single unit because all of the shapes have similarity. Unity occurs because the triangular shapes at the bottom of the eagle symbol look similar to the shapes that form the sunburst.
When similarity occurs, an object can be emphasised if it is dissimilar to the others. This is called anomaly. The figure on the far right becomes a focal point because it is dissimilar to the other shapes.
Continuation occurs when the eye is compelled to move through one object and continue to another object. Continuation occurs in the example above, because the viewer's eye will naturally follow a line or curve. The smooth flowing crossbar of the "H" leads the eye directly to the maple leaf.
Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, people perceive the whole by filling in the missing information. Although the panda above is not complete, enough is present for the eye to complete the shape. When the viewer's perception completes a shape, closure occurs.
Proximity occurs when elements are placed close together. They tend to be perceived as a group. The nine squares above are placed without proximity. They are perceived as separate shapes.
When the squares are given close proximity, unity occurs. While they continue to be separate shapes, they are now perceived as one group.
The fifteen figures above form a unified whole (the shape of a tree) because of their proximity.
The eye differentiates an object form its surrounding area. a form, silhouette, or shape is naturally perceived as figure (object), while the surrounding area is perceived as ground (background).
Balancing figure and ground can make the perceived image more clear. Using unusual figure/ground relationships can add interest and subtlety to an image.
The word “figure” is clearly perceived as figure with the surrounding whitespace ground.
In the image to the right, the figure and ground relationships change as the eye perceives the the form of a shade or the silhouette of a face.
Erik Erikson, a psychologist and psychoanalyst known for his theory on psychological development of human beings, defines intimacy as: “the ability to fuse your identity with someone else’s without the fear that you’re going to lose something yourself,” What we share of our identity are qualities, beliefs, personality, looks and/or expressions, which make each one of us unique.
As humans, we have a deep need to be seen for who we are and to be understood. Intimacy is a process of sharing whereby we feel truly seen, known by and connected to others. Understanding and sharing in our identities is vital to leading healthy and fulfilling lives. Knowing and liking who we are secures a sense of belonging and self. So how exactly does this apply to brands?
Laughter is contagious
In brand intimacy we want to reflect to our consumers
Brand Intimacy Parallels Human Intimacy
A brand can create intimacy by offering incremental improvements in the user experience. It does this by tapping into emotion to amplify relevance in the consumers’ lives, which builds deeper bonds. As a result, the investment in the consumer as an individual will lead to reciprocity, as in any human relationship, and the consumer will invest in the brand.
There are many patterns of persuasion that can be used when designing UX and content mapping. Brands use persuasive patterns to nudge behavior based on human need. These patterns foster the relationship between an individual and a brand, and they can be used to measure the character and nature of emotional bonds between the two parties. In branding this is done through a narrative of image, color, tone and story. All of these elements combine to create a personality, much as we humans have personalities of our based on our own values, beliefs and presentation.
Let’s take a look at six of these patterns.
The GA Tech Professional Education brand promises prestige with their brand statement, "Stand out in your profession with a credential from one of the nation's leading research universities."
Example: The Guardian Direct brand promises security with their brand statement, “Life is full of surprises. Everyone deserves a Guardian.”
Example: The Care Action brand promises a simple path to purpose with their brand statement, “Got 3 minutes today? If so, you can take action for Global change.”
Code and Theory partnered with the Today.com brand to reimagine their promise of belonging with their statement of being an all-day lifestyle destination.
The show has a loyal fan base of viewers and creating an experience that was familiar, but different, was top of mind. There are many product offerings, contests, and giveaways that aim to drive conversion and bring these viewers online. Code and Theory established a clearer hierarchy on the site that was easy to navigate, along with engaging hero treatments and wayfinding design, to created a seamless cross-platform experience that opens new possibilities for editors and advertisers alike.
Example: Code and Theory partnered with Burger King to create a movement by bringing back a product that teens and young millennials had been longing form. During its peak in Q1 2014, for every three times a consumer mentioned “Burger King” on social media, the phrase “Chicken Fries” was mentioned at least once. This was remarkable, as this product hadn’t been promoted or advertised since 2012. Millennials longed for Chicken Fries, and begged Burger King to bring them back. That’s when our big insight hit: We were depriving these consumers of a product that would give them a reason to start visiting Burger King again, and a reason to talk about the brand in a positive way on social.
Example: Code and Theory partnered with the Maybelline New York brand in their promise of safety/security. Their campaign statement Dare to Go Nude encourages audiences to consider nude shades not as “boring” color options, but rather as a bold new way to express your true self.
Talk about culture / belonging / identity
Shared Belief in Culture: The Truth Initiative
Mediacurrent, along with Code and Theory, partnered with The Truth Initiative to create an online experience focused on the vision for a generation for whom tobacco is a thing of the past. Their mission, to achieve a culture where all youth and young adults reject tobacco, is grounded in four core brand values: courage, curiosity, collaboration, and commitment.
The Truth Initiative’s website launched a limited-edition Vans sneaker to help promote the two brands’ partnership. Both brands were able to connect to consumers and evangelists by cross-promoting between product and initiative. Believers in the Truth Initiative’s mission were able to become actual “walking billboards.”
Strategic partnerships such as this one strengthen commonality across brands and collectives. Culturally driven campaigns, such as the Van’s We That Generation by Kevin Lyons helps raise brand awareness through experiential artwork and celebrity amplification. Campaigns that address issues people are passionate about drive engagement. This opens up a forum for brands to connect and fuse with their audience.
As we consider what it means to be present with one another, to listen and share, we must recognize the ripple effect of our exchanges, attributions and micro-interactions within systems and one another echo within the digital and material ecosystems.
Are there brands that you are intimate with? What about them is attractive? Consider the message that you carry forward for them.