How to buildemotional websites?

a presentation by Mateus Pinheiro and Sibele Castro

our artifact, an interactive website that aims to help designers choosing the best fonts for their projects.

+our previous presentation in Desic

Are we using internet’s full potential?

“attractive things works better!”

triggers our creativity

makes us moretolerant of minor

difficulties

Do you remember?

Combining the 3 levels, you can make a design ...

● Appealing● Effective ● Pleasurable● Memorable

Implementing emotion

Humor

“humor is an effective wayto connect with people”

Breaks the iceMakes people feel comfortable

Humor

“be careful!”Humor is difficult to generalizeWhat is funny to someone might be ridiculous or even offensive to others

Know the user and the context of useAvoid making people feel uncomfortableBe subtle

Humor

Mailchimp (Marketing mail system)Little jokes that doesn’t get in the way of the user’s workflowThere’s an option to turn off the jokes

Recognition

“we try to relate everything we see to ourselves”

If we recognize content on a website — such as a problem, dilemma, habit or whatever else — we feel connected and understood.

Recognition

Dissonance

“patterns gives us ideas ofwhat to expect”

And we love to know what to expect!Usability guidelinesFit the user’s mental models

Dissonance

“but what if we don’t do that?”

Dissonance

Users will be lost and frustrated(And you really don’t want that)

Users won’t mind breaking the habit. In fact they will like the distraction

Two possibilities

Sometimes the dissonance with their expectations can be a positive or fun experience.

(but be careful again)

Dissonance

Tone of voice

“How you communicate with users says a lot about your relationship

with them”

If you wrap a serious message in a humorous story, users might not take you seriously.

Tone of voice

Engagement

“engaging people helps us build relationships and positive

user experiences”

We don’t remind good usability and we are hardly surprised to find the content we are looking for.These are requirements!

Engagement

“We love to interact! We love to customize!”

Using a different form of interaction can make your site memorable.Gamification.Sometimes you need to be straightforward.

Engagement

Time to review

Implementing emotion

A design can be...AppealingEffective

PleasurableMemorable

Combining them...

Humor, Recognition, Dissonance, Tone of voice & Engagement

Conclusions

● We become more creative if we are confronted with something attractive

● This creativity helps us solve problems more easily

● Emotions give us positive experiences, making us happier and giving us better recall

● Internal design goals as well as the needs, expectations and context of users will determine how the designer should balance those three levels and what to emphasize in order to get the most out of the design

Thank you!Any questions?