Emotional Webdesign am Internet Briefing 2013 in Bern

74
Usability is so 2012...
  • date post

    17-Oct-2014
  • Category

    Design

  • view

    420
  • download

    1

description

Mit Usability ist es nicht getan. Damit der User zurück kommt, braucht es Emotionen.

Transcript of Emotional Webdesign am Internet Briefing 2013 in Bern

Page 1: Emotional Webdesign am Internet Briefing 2013 in Bern

Usability is so 2012...

Page 2: Emotional Webdesign am Internet Briefing 2013 in Bern

MAKE THE USER SMILE Emotional Design

Page 3: Emotional Webdesign am Internet Briefing 2013 in Bern

About me

Remy Blaettler

Spent 8 years across the ocean Then back with my own translation

agency Supertext Chief of the System

Page 4: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 5: Emotional Webdesign am Internet Briefing 2013 in Bern

User's hierarchy of needs

Functional

Usable

Reliable

Pleasurable

Missing

Page 6: Emotional Webdesign am Internet Briefing 2013 in Bern

Why?

Only bad usability leaves a lasting impression

Good usability is taken for granted

We are looking for the «Have you seen this» effect

Page 7: Emotional Webdesign am Internet Briefing 2013 in Bern

Skeuomorphismus

Isn’t flat design bad for emotions?

Page 8: Emotional Webdesign am Internet Briefing 2013 in Bern

Lets do it

Page 9: Emotional Webdesign am Internet Briefing 2013 in Bern

R.I.P. Clippy 1997 - 2007

Page 10: Emotional Webdesign am Internet Briefing 2013 in Bern

Be context sensitive

Time Weather Place Etc.

Page 11: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 12: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 13: Emotional Webdesign am Internet Briefing 2013 in Bern

Feathers

Page 14: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 15: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 16: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 17: Emotional Webdesign am Internet Briefing 2013 in Bern

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 18: Emotional Webdesign am Internet Briefing 2013 in Bern

Greetings and goodbye

Evening Wow, still at work, Remy?

Before a holiday, instead of «Regards» Happy Easter! Enjoy your long weekend!

Page 19: Emotional Webdesign am Internet Briefing 2013 in Bern

Use humor

Page 20: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 21: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 22: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 23: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 24: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 25: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 26: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 27: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 28: Emotional Webdesign am Internet Briefing 2013 in Bern

Give automation a personality

Emails are signed with «Boxed Ice Robot Llama» at Boxed Ice

Don’t do the noreply thing

Page 29: Emotional Webdesign am Internet Briefing 2013 in Bern

Or be personal

Sign automated emails a name Address the customer with his name Use the appropriate greeting

(Du/Sie) Hey Paul Dear Mister Smith

Make sure this is stored appropriately in your CRM

But then people might write back?!

Page 30: Emotional Webdesign am Internet Briefing 2013 in Bern

Error Pages

Page 31: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 32: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 33: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 34: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 35: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 36: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 37: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 38: Emotional Webdesign am Internet Briefing 2013 in Bern

Copywriting

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

A. Blinged outB. More brilliant than a studious Christmas treeC. A death trapD. Really big and shiny

Page 39: Emotional Webdesign am Internet Briefing 2013 in Bern

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

Page 40: Emotional Webdesign am Internet Briefing 2013 in Bern

Copywriting

Pikante SauceEUR 1.95

Vulkanausbruch auf der Zunge

EUR 1.95

Page 41: Emotional Webdesign am Internet Briefing 2013 in Bern

Copywriting

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

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

Page 42: Emotional Webdesign am Internet Briefing 2013 in Bern

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.

Page 43: Emotional Webdesign am Internet Briefing 2013 in Bern

Next: 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!

Page 44: Emotional Webdesign am Internet Briefing 2013 in Bern

Next: Experience Design

Motion Sensor: Switches on the light, when you enter the room

Path: No check-in necessary, the app dectects automatically if a user stays in one place.

Netflix: Who’s watching the movie? Me, my wife or my friends? Recommend accordingly.

Page 46: Emotional Webdesign am Internet Briefing 2013 in Bern

Links

Examples Little Big Details

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

Better copywriting http://blog.supertext.ch/2010/01/refe

rat-im-technopark-zurich/

Page 47: Emotional Webdesign am Internet Briefing 2013 in Bern

THANK YOU, THANK YOU!The end.

Page 48: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 49: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 50: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 51: Emotional Webdesign am Internet Briefing 2013 in Bern

Supertext AG

The first copywriting and translation agency on the internet.

Page 52: Emotional Webdesign am Internet Briefing 2013 in Bern

Emotions make the difference

Humans are not rational beings.

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

Page 53: Emotional Webdesign am Internet Briefing 2013 in Bern

Bad emotions are the worst

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

Errors

Page 54: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 55: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 56: Emotional Webdesign am Internet Briefing 2013 in Bern

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

Page 62: Emotional Webdesign am Internet Briefing 2013 in Bern

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»

Page 63: Emotional Webdesign am Internet Briefing 2013 in Bern

Error Pages

Avoid them Plan for all cases, check logs, analytics

Use the same design

Page 64: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 65: Emotional Webdesign am Internet Briefing 2013 in Bern

Error Pages

Avoid them Plan for all cases, check logs, analytics

Use the same design Apologize and calm the user down

Page 66: Emotional Webdesign am Internet Briefing 2013 in Bern

Error Pages

Avoid them Plan for all cases, check logs, analytics

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

Page 67: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 68: Emotional Webdesign am Internet Briefing 2013 in Bern

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.

Page 70: Emotional Webdesign am Internet Briefing 2013 in Bern

You can download this presentation fromblog.supertext.ch

Page 71: Emotional Webdesign am Internet Briefing 2013 in Bern

Set the stage right

Page 72: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 73: Emotional Webdesign am Internet Briefing 2013 in Bern
Page 74: Emotional Webdesign am Internet Briefing 2013 in Bern

Typography

Blackrock Western Store

Blackrock Western Store