Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011

“The thinking processes
that guide our
commercial choices are
complex and
emotional, not logical
and linear.”

Emotional Design

MAKE THE USER SMILE

About me

Remy Blaettler
«Chief of the System»

 Engineer
 Spent some time to study and work abroad
 Now back with my own company Supertext

Maslow's hierarchy of needs

Self-
actualization

Esteem

Love / Belonging

Safety

Physiological

User's hierarchy of needs

Missing

Pleasurable

Usable

Reliable

Functional

Why?

 Only bad usability leaves a lasting impression
 Good usability is taken for granted

 We are looking for the little perky smile
 No wow effect is needed

How?

 Gameification
 Simplicity

 Context Sensitive
 Humor, Irony
 Surprising
 Personal & Personality

How not

R.I.P. Clippy 1997 - 2007

Context Sensitive

Morning:
 Good morning Mister Blättler

Late evening greeting
Wow, working hard today, Remy?

Before a holiday
Happy Easter!
Enjoy your long weekend!

Give automation a
personality
 Emails are signed with «Boxed Ice Robot
Llama» at Boxed Ice
 Don’t do the noreply thing

And be personal

 Sign e-mails with your name and your e-mail
 Address the customer with his name
 Use the appropriate greeting (Du/Sie)
«Hey Remy» sounds so much better than
«Dear Mister Blättler»
 Make sure this is stored appropriately in your
CRM

 But then people might write back?!

Copywriting

Which is the most interesting way to describe a
4,700-pound chandelier?

A. Blinged out
B. More brilliant than a studious Christmas tree
C. A death trap
D. Really big and shiny

Copywriting

“The Tooth Fairy is a burglarizing fetishist
specializing in black-market ivory trade, and
she must be stopped. Today’s Groupon helps
keep teeth in mouths and out of the hands of
maniacal, winged phantasms.”

Copywriting

Pikante Sauce
EUR 1.95

Vulkanausbruch auf der Zunge
EUR 1.95

Copywriting

Nil-Kreuzfahrt, 14 Tage,
al inclusive, EUR 699

Liebesurlaub auf Kleopatras Spuren.
14 Tage, all inclusive, EUR 699

The next level:
Emotional CRM
“Emotional customers are not problematic
customers. They are customers who care.”

 Track your customers emotions
 From feedback
 Product reviews
 Social Networks
 And ACT upon them!

Write me

 remy@supertext.ch

 @swissghostrider

Links

Examples
 Little Big Details

Link Collection
 http://mem.to/t/g/63Cvwe644

Better copywriting
 http://blog.supertext.ch/2010/01/referat-im-
technopark-zurich/

 Supertext AG

 The first copywriting and translation agency
on the internet.

Emotions make the difference

Humans are not rational beings.

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

Bad emotions are the worst

 Music
 Flash intro
 Full screen
 New windows
 Lost passwords during sign-up

 Errors 

Team Pages

Good place to play around a little

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

Avoid:
 Information that is too personal

Personal not personalized

 Be personal in e-mails, newsletters and on
your webpage.
 Personalization is often just another feature
that clutters the interface

 Du / Sie in German. Track it in your CRM
 «Hi Remy» sounds so much better than
«Dear Mister Blättler»

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?

Greetings and goodbye

Evening
Wow, still at work, Remy?

Before a holiday
Instead of always «Kind regards»
Happy Easter!
Enjoy your long weekend!

Error Pages

 Avoid them 
 Plan for all cases, check logs, analytics
 Use the same design

Error Pages

 Avoid them 
 Apologize and calm the user down

Error Pages

 Avoid them 
 Apologize and calm the user down
 Help with the next step / recovery
 Allow for feedback

Bills (Supertext Reminder)

Hi.
I’m the computer at Supertext. During the
cleanup of my hard drive, I found the following
open payment:

{ Payment Information }

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

Risks

 Emotions are emotions!

 Some will hate them. Some will love them.

 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.

Links

 Cool 404 Error Pages
 404 Best Practices
 Fab404

 Emotional Interface Design
 Don’t listen to Le Corbusier

You can download this
presentation from
blog.supertext.ch

The end.

THANK YOU, THANK YOU!

Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011

More Related Content

Viewers also liked (16)

Similar to Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011 (20)

More from Remy Blaettler (6)

Recently uploaded (20)

Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011

Editor's Notes