How to build
emotional websites?
a presentation by Mateus Pinheiro and Sibele Castro
+
our previous presentation in Desic

our artifact, an interactive website
that aims to help designers choosing
the best f...
Are we using internet’s
full potential?
“attractive things works better!”
triggers our
creativity

makes us more
tolerant 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 way
to connect with people”
Breaks the ice
Makes people feel comfortable
Humor

“be careful!”
Humor is difficult to generalize
What is funny to someone might be ridiculous or even offensive to ot...
Humor

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

“we try to relate everything we see
to ourselves”
If we recognize content on a website — such as a problem,
d...
Recognition
Dissonance

“patterns gives us ideas of
what to expect”
And we love to know what to expect!
Usability guidelines
Fit the u...
Dissonance

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

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

Users won’t mind breakin...
Dissonance
Tone of voice

“How you communicate with users
says a lot about your relationship
with them”
If you wrap a serious message...
Tone of voice
Engagement

“engaging people helps us build
relationships and positive
user experiences”
We don’t remind good usability an...
Engagement

“We love to interact!
We love to customize!”
Using a different form of interaction can make your
site memorabl...
Engagement
Time to review
A design can be...

Implementing emotion

Combining them...

Appealing
Effective
Pleasurable
Memorable

Hum...
Conclusions
●
●
●

We become more creative if we are
confronted with something attractive
This creativity helps us solve p...
Thank you!
Any questions?
Upcoming SlideShare
Loading in...5
×

How to build emotional websites

84
-1

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
84
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to build emotional websites

  1. 1. How to build emotional websites? a presentation by Mateus Pinheiro and Sibele Castro
  2. 2. + our previous presentation in Desic our artifact, an interactive website that aims to help designers choosing the best fonts for their projects.
  3. 3. Are we using internet’s full potential?
  4. 4. “attractive things works better!” triggers our creativity makes us more tolerant of minor difficulties
  5. 5. Do you remember?
  6. 6. Combining the 3 levels, you can make a design ... ● ● ● ● Appealing Effective Pleasurable Memorable
  7. 7. Implementing emotion
  8. 8. Humor “humor is an effective way to connect with people” Breaks the ice Makes people feel comfortable
  9. 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. 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. 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. 12. Recognition
  13. 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. 14. Dissonance “but what if we don’t do that?”
  15. 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. 16. Dissonance
  17. 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. 18. Tone of voice
  19. 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. 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. 21. Engagement
  22. 22. Time to review A design can be... Implementing emotion Combining them... Appealing Effective Pleasurable Memorable Humor, Recognition, Dissonance, Tone of voice & Engagement
  23. 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. 24. Thank you! Any questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×