Designing Emotional Experiences for Mobiles Devices

69
. @UXforChangeUK #UX4G Designing Emotional Experiences for Mobiles Devices Hands-On Workshop (90 min) Sandra Gonzalez UX for Change Founder

Transcript of Designing Emotional Experiences for Mobiles Devices

Page 1: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing Emotional Experiences for Mobiles Devices

Hands-On Workshop (90 min)

Sandra GonzalezUX for Change Founder

Page 2: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

A Little Bit About Me

@uxcata

Page 3: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 4: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

http://tribune.com.pk/story/883683/restaurant-designs-plates-to-look-good-on-instagram/

Page 5: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Human Needs“No matter our age, gender, race, or station in life, we all have basic needs that must be met.“

Abraham Maslow

Designing for Emotion by Aarron Walter

Page 6: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

https://youtu.be/LtlVQ6ianCs?t=1m35s

Page 7: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 8: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion By Aarron Walter

.

.

.

.

.

.

.

.

.

.

.

.

Page 9: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Revolution Something Lost and Something Found

“As the machine found its place in our world, the human hand’s presence in everyday objects

slowly faded. “Aaron Walter

Designing for Emotion by Aarron Walter

Page 10: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 11: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 12: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Revolution Something Lost and Something Found

“We could reduce our industry to a commodities race, like those who manufactured the industrial

revolution.“Aaron Walter

Designing for Emotion by Aarron Walter

Page 13: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Revolution Something Lost and Something Found

“Or we could follow a different path, one paved by the artists, designers, and architects of the Arts and Crafts movement, who believed that

preserving the human touch and showing ourselves in our work isn’t optional. It’s

essential. “Aaron Walter

Designing for Emotion by Aarron Walter

Page 14: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 15: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

What is Emotional Design?

“Emotional design…uses psychology and craftsmanship to create an experience for users that makes them feel like there’s a person, not a machine, at the other end of the connection. “

Aaron Walter

Designing for Emotion by Aarron Walter

Page 16: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Users Needs“What if we translated Maslow’s model of human needs into the needs of our users? It might look something like this.“

Aaron WalterDesigning for Emotion by Aarron Walter

Page 17: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

by Aaron Walter

Designing for Emotion by Aarron Walter

Page 18: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Pleasurable Experiences

“Why do we settle for usable when we can make interfaces both usable and pleasurable?“

Aaron Walter

Designing for Emotion by Aarron Walter

Page 19: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

PERSONALITY

Chapter available on A List Apart

.

.

.

.

.

.

.

.

.

.

.

.

http://alistapart.com/article/personality-in-design

Page 20: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Let’s Use Personas to Evaluate a Brand

Page 21: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 22: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 23: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

THREE PRINCIPLES OFEMOTIONAL DESIGN

Page 24: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

LET YOUR BRAND PERSONALITY SHOWPrinciple #1

Page 25: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Let Your Brand Personality Show

“Emotional design turns casual users into fanatics ready to tell others about their positive

experience.“Aaron Walter

Designing for Emotion by Aarron Walter

Page 26: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Every single person in Uruguay RTEveryone in Slovenia Favorite it.

Page 27: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 28: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

http://mashable.com/2015/11/03/twitter-broke-my-heart/#fgefq7ZMWZqu

Page 29: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

BABY-FACE BIAS Principle #2

Page 30: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

“Evolution has given us baby goggles that help us look past such shortcomings and trigger waves of positive emotions when we see a little one’s face. “

Aaron Walter

Jeff Atwood

http://blog.codinghorror.com/on-parenthood/

Page 31: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 32: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 33: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

THE WORLD IS OUR MIRRORPrinciple #3

Page 34: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Have anyone seen Donald in Mathmagic Land?

https://youtu.be/AJgkaU08VvY?t=7m

Page 35: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 36: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 37: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Let’s play Emotional Design Bingo!

Page 38: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Think of your favorite brands

(1st row)

Page 39: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Think of your not-so-favorite brands

(2nd row)

Page 40: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Think of your brands

(3rd row)

Page 41: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Think of your “dream job” brands

(4rd row)

Page 42: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Let’s all come up withbrands

(5rd row)

Page 43: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Let’s go back to the emotional design principles

Page 44: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

STRATEGIES FOR IMPLEMENTINGEMOTIONAL DESIGN

Page 45: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

SURPRISE

Page 46: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 47: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 48: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

ANTICIPATION

Page 49: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 50: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 51: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

PRIME

Page 52: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 53: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 54: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 55: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 56: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

IS BETTER TO ASK FORGIVENESS…

Page 57: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 58: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 59: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

TELL A STORY

Page 60: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 61: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 62: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

GAMIFICATION

Page 63: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 64: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 65: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Page 66: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

USE OF COLORS

Page 67: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Designing for Emotion by Aarron Walter

Page 68: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Brain Teaser UX Game

Page 69: Designing Emotional Experiences for Mobiles Devices

.

@UXforChangeUK #UX4G

Great Job!

Don’t forget to

claim your

digital badge!