47
MAKE THE USER SMILE Emotional Webdesign

Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Embed Size (px)

DESCRIPTION

My first presentation at the UX Camp in Berlin in 2010 about Emotional Webdesign. Or how you can make your user smile.

Citation preview

Page 1: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

MAKE THE USER SMILEEmotional Webdesign

Page 2: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

ME – Remy Blättler

Bachelor in Computer Science from Switzerland

Master in Computer Engineering from Chicago

6 Year of New York fun Now back in Switzerland with my

own company Supertext

Page 3: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Supertext

The first copywriting and translation agency on the Internet

Page 4: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Maslow's hierarchy of needs

Physiological

Esteem

Love / Belonging

Safety

Self-actualization

Page 5: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

User's hierarchy of needs

Functional

Usable

Reliable

Plesurable

Missing

Page 6: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Emotions make the difference

Humans are not rational beings.

A human is a walking sack of squishy meat and liquids, awash in chemicals.

Page 7: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Avoid

Music Flash Intro Fullscreen New windows Lost passwords during sign-up

Errors

Page 8: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 9: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

R.I.P Clippy 1997 - 2007

Page 10: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Good examples

Page 11: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Feathers

Page 12: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 13: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 14: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 15: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 16: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 17: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 18: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 19: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Team Pages

Good place to be a little playful

Ideas Handwritten signature Automatic daily horoscope Mouse-over pic with something funny

behind

Avoid: Too personal information

Page 20: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

First a boring one

Page 21: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 22: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

And some fun ones

Page 23: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 24: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 25: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 26: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 27: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Personal not personalized

Be personal in e-mails, newsletter and on your webpage.

Personalization is often just another feature that clutters the interface

Du / Sie in German. Track it in your CRM

«Hey Remy» sounds so much better than «Dear Mister Blättler»

Page 28: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Greetings and goodbye

Boring Hello Remy

In the morning Good Morning Remy Almost time for lunch?

Afternoon We hope you’re on the way home

soon?

Page 29: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Greetings and goodbye

Evening Wow, still at work, Remy?

Before a holiday Instead of always «Kind regards» We wish you happy Estern Enjoy your long weekend!

Page 30: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Numbers and Dates

Bad:1 Comments, 2 Comments, 45 Comments

BetterOne Comment, Two Comments, 45 Comments

You have no new messages.You have one new message.You have five new messages.

Page 31: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Numbers and Dates

Bad:17.05.10

Better:Monday, 17. May 2010

Best:Last Week, Yesterday, 2 Min ago

Page 32: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Errors

Page 33: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Error Pages

Avoid them Plan for all use cases, check logs,

analytics Use same design

Page 34: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 35: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Error Pages

Avoid them Plan for all use cases, check logs,

analytics Use same design Apologize and calm the user down

Page 36: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 37: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Error Pages

Avoid them Plan for all use cases, check logs,

analytics Use same design Apologize and calm the user down Help with the next step / recovery Allow for feedback

Page 38: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 39: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Bills (Supertext Reminder)HeyI’m the Computer at Supertext. During the cleanup of my harddrive I found the following open payment:

{ Payment Information }

Nobody knows about this here yet, please pay quickly so it stays that way.

Page 40: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

Risks

Emotions are Emotions!

Some will hate them. Some will love em.

Be careful where you use them. If used properly they can be a very powerful way to create an identity and a connection to your brand.

Page 42: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

You can download this presentation fromblog.supertext.ch

Page 43: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010

THANK YOU, THANK YOU!The end.

Page 44: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 45: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 46: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010
Page 47: Make the user smile - Emotional Webdesign - UX Camp Berlin 2010