1. How to build
emotional websites?
a presentation by Mateus Pinheiro and Sibele Castro

2. +
our previous presentation in Desic
our artifact, an interactive website
that aims to help designers choosing
the best fonts for their projects.

3. Are we using internet’s
full potential?

4. “attractive things works better!”
triggers our
creativity
makes us more
tolerant of minor
difficulties

5. Do you remember?

6. Combining the 3 levels,
you can make a design ...
●
●
●
●
Appealing
Effective
Pleasurable
Memorable

7. Implementing emotion

8. Humor
“humor is an effective way
to connect with people”
Breaks the ice
Makes people feel comfortable

9. Humor
“be careful!”
Humor is difficult to generalize
What is funny to someone might be ridiculous or even offensive to others
Know the user and the context of use
Avoid making people feel uncomfortable
Be subtle

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

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

12. Recognition

13. Dissonance
“patterns gives us ideas of
what to expect”
And we love to know what to expect!
Usability guidelines
Fit the user’s mental models

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

15. Dissonance
Two possibilities
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
Sometimes the dissonance with their expectations
can be a positive or fun experience.
(but be careful again)

16. Dissonance

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

18. Tone of voice

19. 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!

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

21. Engagement

22. Time to review
A design can be...
Implementing emotion
Combining them...
Appealing
Effective
Pleasurable
Memorable
Humor, Recognition, Dissonance, Tone of voice & Engagement

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

24. Thank you!
Any questions?