48
6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL MEDIA DESIGN II | SPRING 2015

6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

6.0 INTERACTION DESIGN

DESIGNING FOR EMOTION

DIGITAL MEDIA DESIGN II | SPRING 2015

Page 2: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 3: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

EVERYDAY EMOTIONS

Emotions play a critical role in our daily lives, helping assess situations as good or bad, safe or dangerous.

Positive emotions are critical to learning, curiosity, and creative though.

Negative emotions tend to create anxiety, narrowing one’s focus.

Page 4: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

SIGNIFICANCE

Emotional experiences are important because they make a profound imprint on our long-term memory.

Everyone is born with emotions, it is the “common language” of humans.

Page 5: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

DESIGNISM #16

EMOTIONAL DESIGN TURNS CASUAL USERS INTO FANATICS, READY TO TELL OTHERS ABOUT THEIR POSITIVE EXPERIENCE.– AARON WALTER

Page 6: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

BUILDING ON MASLOW

In his book, Designing for Emotion, Aaron Walter describes emotional design by building on Maslow’s famous hierarchy of human needs, which states that humans need to achieve elementary states of being, such as health and safety, before they can start thinking about higher-level needs, such as self-actualization.

Page 7: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

A product has to be functional, reliable and usable (in that order) before a layer of pleasure can be applied.

Emotional design, then, is the pleasurable layer that you put on top of a functional, reliable and usable product.

Page 8: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

DESIGN HIERARCHY

FUNCTIONAL

RELIABLE

USABLE

CONVENIENT

PLEASURABLE

MEANINGFUL

MEETS UNRECOGNIZED NEEDS(transformation)

MEETS DESIRES(success)

MEETS EXPECTATIONS(survival)

Page 9: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

EMOTIONAL DESIGN STRATEGY

An effective emotional design strategy has two aspects:

1. You create something unique that transcends your own style and that evokes a positive response in users.

2. You consistently use that style until it becomes a body of work, a personality layer.

Page 10: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

ATTRACTIVE THINGS WORK BETTER

Don Norman is the co-founder and principal of the Nielsen Norman Group, IDEO fellow, retired professor, former employee of Apple, etc., and an industry-leading advocate for human centered design.

In his book, Emotional Design, he describes why “attractive things work better”...

Page 11: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

Attractive products make us feel good, which triggers our creativity and ultimately

expands our mental processes, making us more tolerant of

minor difficulties.

Page 12: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

ATTRACTIVENESS BIAS

“Human beings have an attractiveness bias; we perceive beautiful things as being better, regardless of whether they actually are better. All else being equal, we prefer beautiful things, and we believe beautiful things function better.”

Page 13: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

We want those things we find pleasing to succeed.

We’re more tolerant of problems with things that we find attractive.

Page 14: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

RESEARCH

Recent studies into emotions are finding that we can’t actually separate cognition from affect.

In other words, how we “think” cannot be separated from how we “feel.”

This raises some interesting questions—especially in the area of decision making. In short, our rational choices aren’t so rational.

http://alistapart.com/article/indefenseofeyecandy

Page 15: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

DESIGNISM #17

FORM FOLLOWS FUNCTION, EMOTION FOLLOWS FORM.

Page 16: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

DON NORMAN

LEVELS OF EMOTIONALCOGNITIVE PROCESSING

VISCERAL BEHAVIORALREFLECTIVE

Page 17: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 18: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

Norman identified three cognitive levels of processing that designers can apply to their products.

REFLECTIVE

BEHAVIORAL

VISCERAL

Page 19: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

VISCERAL THE FEEL

The visceral level has to do with the initial impact of the appearance, touch and feel. This can be studied by observing people’s first impression.

The visceral level works instinctively, and both our personality and cultural values can influence how we perceive something.

Page 20: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

BEHAVIORAL THE USE

Behavioral is all about how things work and how we use and experience them.

What matters on this level is function, performance and the physical feel of something.

Page 21: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

REFLECTIVE THE STORY

On the reflective level, we interpret and understand things, we reason about the world, and we reflect on ourselves.

The reflective design defines our overall reflection of a product, since we reflect on all aspects of it.

Page 22: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

GOOD EMOTIONAL DESIGN

In good design, all three levels work together. They may not be equal, but they should all be addressed.

Page 23: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

THE CHALLENGES

Our opinion of a design after having thought about it might diverge from our initial impression of it.

Also, people interpret designs differently and have different preferences for the visceral, behavioral and reflective qualities of a design.

Page 24: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

IMPLEMENTING EMOTION

Page 25: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

POSITIVITY

Instilling positive memories makes users want to interact with your product in the future.

TOP 10 POSITIVE EMOTIONS

JOY PRIDEGRATITUDE AMUSEMENTSERENITY INSPIRATIONINTEREST AWEHOPE LOVE

Page 26: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

POSITIVE REINFORCEMENT

Positive reinforcement involves the addition of a reinforcing stimulus following a behavior that makes it more likely that the behavior will occur again in the future.

Page 27: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 28: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

HUMOR

Humor is an effective way to connect with people. A good laugh or even a little smile can break the ice and make people feel comfortable.

However, humor is also a delicate matter because it is extremely difficult to generalize. What’s hilarious for one person might be ridiculous, embarrassing or even insulting to someone else.

Page 30: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

RECOGNITION

We constantly seek emotional connections with others.

We know ourselves so well that we try to relate everything we see to ourselves.

When we see a face, we are automatically triggered to feel something or to empathize with that person.

Page 31: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

When we see a face, we are automatically triggered to feel something or to empathize with that person.

Page 32: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 33: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 34: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

We also recognize patterns and forms found in nature.

Page 35: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

FIBONACCI SPIRAL

Page 36: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

PATTERNS

Patterns help us understand and learn how things work, and they give us an idea of what to expect—and we love to know what to expect, because it makes us feel comfortable.

Page 37: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 38: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 39: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

TONE OF VOICE

How you communicate with users says a lot about your relationship with them.

While you communicate certain messages through words, your tone of voice reveals what you think of them and also what you want them to think of you.

Page 40: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 41: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 42: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 43: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 44: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

ENGAGEMENT

People want to be engaged, have fun, and be entertained. This engagement could take the form of playing, interaction or personalization of content.

Page 45: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 46: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 47: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL
Page 48: 6.0 INTERACTION DESIGN DESIGNING FOR EMOTIONfaculty.wwu.edu › schadeb › dsgn361 › website › images › DesigningE… · 6.0 INTERACTION DESIGN DESIGNING FOR EMOTION DIGITAL

DESIGNISM #17

I THINK THAT PEOPLE’S EMOTIONAL CONNECTION TO OUR PRODUCTS IS THAT THEY SENSE OUR CARE, AND THE AMOUNT OF WORK THAT HAS GONE INTO CREATING IT.– JONATHAN IVE, APPLE