Give Your Website Soul With Emotionally Intelligent Interactions

Advertisement

What is it that makes us loyal fans of the websites and apps we love? When we sat down to answer this question for ourselves, we found that the websites and apps we truly love have one thing in common: soul. They’re humanized. They have emotional intelligence designed into the user experience. And this emotional intelligence is crafted through thoughtful interaction design and feedback mechanisms built into the website.

These elements give the website or app personality and earn a spot in our hearts. In our opinion, it’s not going too far to say that giving your website or app soul is the key to earning loyal fans. In this article, we’ll look at some of the best examples of these emotionally intelligent interactions and how they infuse personality and soul into the websites and apps where they’re found.

What Are Emotionally Intelligent Interactions?

An emotionally intelligent interaction is any state (or change in state) of a website/app where the messaging or functionality includes attention to details that create a user experience that feels organic and human. These interactions can be a big experience (like when an entire website is down), or a very small experience (such as when an error state on a form element appears). They can be derived from different elements, including messaging and copy, color and design, and responsiveness to user inputs and system outputs.

Combining each of these crafted experiences creates soul and personality for a website. And it’s that emotional connection with users that builds lasting loyalty, and raving fans.

Examples Of Emotionally Intelligent Interactions

Note: Several of the examples and images are from this brilliant website: Little Big Details1. It’s one of the many must-reads and I recommend adding it to your favorites if you haven’t done so already.

Bottlenose2
A new Web-based Twitter client that gives users a new way to explore and use Twitter. The app does a great job of walking users through the first run with the application, explaining the features in a way that is clear and humorous. The confirmation buttons use phrases like “Makes sense” and “Got it” which create a sense of personality and confidence with the user, a far better choice than the typical “Next.”

Bottlenose first run experience3

Wufoo4
Wufoo uses a combination of smart messaging and subtle touches on UI elements to create a more friendly and personable experience when creating Web forms. Here are just a few:

  • Each page title is accompanied by a line of poetry. While it may seem random, the poetry actually reinforces the elegance of the Wufoo solution. It’s a unique way to bring personality to an otherwise tedious task (creating forms).Wufoo adds a line of poetry under the page title.5
  • The new report button’s punctuation. Think of the word “report”, and you’re next thought is most likely “TPS.” But Wufoo adds an exclamation point to the button. This gives it an element of energy and fun, reinforcing its value as a reporting feature.Wufoo's new form button6
  • The reports screen with no reports. Instead of a blank screen, Wufoo takes the opportunity to deliver some true personality through its messaging, and gets you on your way towards building your first report.Wufoo blank report screen7

MailChimp8
As one of the best examples of emotional intelligence baked into a user experience, MailChimp takes every opportunity to infuse soul into its application, as well as giving you a pitch-perfect way to make it all disappear.

  • 404 Page:
    MailChimp’s 404 page is brilliant: excellent copy, empathetic design, and a prominent call to action to get users on their way. It’s clever, functional, and takes the sting out of 404’ing. Current MailChimp 404 Page9.MailChimp's 404 page10
  • Send Campaign:
    MailChimp celebrates and encourages the user just as they send out an email campaign. The copy “This is your moment of glory” is a perfect encapsulation of the fear and anticipation that goes into deploying this.MailChimp Send Campaign11
  • Twitter Page:
    Recently when MailChimp went down, they deployed a special background on their Twitter page that showed a sad chimp working furiously to fix the problem. Because people naturally turn to Twitter to learn about why things are broken, the background extended the personality of that service to their Twitter account, creating an emotionally intelligent experience for the user.

Pinterest12
This red-hot social network infuses personality into its website with a thoughtful interaction during account creation. Instead of using the typical password confirmation patterns, the app responds with “Looks good!” as passwords meet their requirements and match. It’s a small touch, but one that humanizes the sign-up experience, and empathizes with the user who is creating their account.

Pinterest login screen13

Path14
On Path’s original website, the icon for the sign-up button arrow changed to a smiley face when it was clicked on. This small change created a personal and welcoming moment during one of the first interactions a user had with the application. It’s a thoughtful detail added to a step that is often overlooked by designers and users alike, and it set the tone for the rest of the user’s onboarding experience.

path sign up screen15

Hootsuite16
The friendly owl mascot for Hootsuite is more than a cute face—the mascot is the representation of the service itself, much like the chimp from MailChimp. Hootsuite taps the Twitter API to pull data into its app, and because Twitter has API limits, Hootsuite intelligently stops making requests after long periods of user inactivity. When this occurs, the Owl lets you know that he has taken a nap, and will wake up when you need him again. It’s a clever way to turn a potential negative experience (non-continuous updates) into a positive one that brands the company, while providing the app with personality and soul.

hootsuite time out screen17

Feedburner18
For newly created RSS feeds in Feedburner, the stats page takes the lack of stats to create a personal interaction with the user. Many websites miss these opportunities because they feel this state isn’t core to the experience. But Feedburner knows that most new users are interested in seeing their stats right off the bat—stats that don’t exist yet. So when a user visits the page Feedburner has fun letting them know that stats aren’t quite ready yet, while creating an emotional connection with the user in this process. It’s a huge win for the company in light of the alternative: a lifeless, blank page with no data.

feedburner19

VisualHub
VisualHub takes advantage of the Mac installation screen for user interaction, encouraging users to get acquainted with their user manual. Move the app to the Applications folder, and move the manual to your brain. So often this install process is written, a necessary evil to get to the application. But as we’ve seen, smart developers leverage these initial interactions to set the tone with the user experience moving things forward.

Visual Hub install screen

OS X
Apple has long been about attention to details, but typically the details are in refinement (not necessarily emotional intelligence). But the Text Edit icon contains a small Easter Egg for Apple fans—the words of the “Think Different” manifesto are inscribed on the notepad. It pays homage to their legendary founder, and reminds people why they love Apple. It’s a small touch that makes Apple what it is.

osx thinks different

Highrise iOS
During the install of 37Signals Highrise iOS app, you can play a game of Tic Tac Toe against the computer. Not only is this a thoughtful way to give users something to do while the app undergoes the necessary evil of being installed, but it’s also an homage to the film War Games, a hacker classic. It’s a simple and effective way to display emotional intelligence during a typically “dead” point of an app’s user experience.

highrise tic tac toe

Mint.com20
Mint’s website maintenance page creates a charming experience for users during what could be a stressful time. Not being able to access your finances can create anxiety, and Mint uses that opportunity to create a fun yet effective notice that lets you know that your money and information is safe, even if the website isn’t accessible.

mint.com 40421
Image via Sean Percival22.

Deviant Art23
Deviant Art uses the portrait metaphor as part of the interaction in setting up your Deviant Art profile. Not only does it tie in with the theme of the website (and connect with its artist community), but it also is a compelling metaphor and mechanic that encourages new users to complete their profile.

deviant art welcome24

Tumblr25
When listening to an audio file on Tumblr, the URL is appended with an appeal to its users not to download the audio file, so that they can continue to offer this type of content on their website. It’s a clever way for communicating to its users without the typical JavaScript pop-up warning.

tumblr url26

Adding Soul To Your Website

Giving your website soul comes down to the interactions and the intentional craft you put into the design of those interactions. By being intentional about user experience in those small moments that are typically neglected, you can showcase the personality of your app, as well as building loyalty among users. Taking cues from websites and applications like those mentioned above will help you look for ways to infuse your project with emotional intelligence.

These services and developers have created loyal user bases due to their willingness to sweat out the details, and infuse their projects with emotional intelligence. The small things can really make a difference in the success of your website or application. Taking the time to create these well-crafted experiences is one of the most potent ways we know of to create fans, and bring your website to life with soul.

Feel free to share your thoughts in the comments section below.

Image used on frontpage: opensourceway27

(il) (jvb)

Footnotes

  1. 1 http://www.littlebigdetails.com
  2. 2 http://bottlenose.com/
  3. 3 http://bottlenose.com/
  4. 4 http://wufoo.com/
  5. 5 http://wufoo.com/
  6. 6 http://wufoo.com/
  7. 7 http://wufoo.com/
  8. 8 http://mailchimp.com/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2012/03/mailchimp-404.jpg
  10. 10 http://mailchimp.com/
  11. 11 http://mailchimp.com/
  12. 12 http://pinterest.com/
  13. 13 http://pinterest.com/
  14. 14 http://path.com/
  15. 15 http://path.com/
  16. 16 http://hootsuite.com/
  17. 17 http://hootsuite.com/
  18. 18 http://feedburner.com/
  19. 19 feedburner.com
  20. 20 https://www.mint.com/
  21. 21 https://www.mint.com/
  22. 22 http://www.seanpercival.com/
  23. 23 http://www.deviantart.com/
  24. 24 http://www.deviantart.com/
  25. 25 https://www.tumblr.com/
  26. 26 https://www.tumblr.com/
  27. 27 http://www.flickr.com/photos/opensourceway/6554314407/

↑ Back to topShare on Twitter

Chuck Longanecker is the CEO and co-founder of digital-telepathy, a user-experience design company passionate about creating products, like SlideDeck, Hello Bar and Impress, that make the Web more intuitive and compelling.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Jaune Sarmiento

    March 28, 2012 7:13 am

    Great article! Smashing UX should have more articles like these. My favorite is FeedBurner’s “playing with bubble wraps”.

    • 2

      Chuck Longanecker

      March 28, 2012 7:53 pm

      Thanks Jaune. The reference to bubble wrap actually brings back the mindless fun of popping those bubbles. So you automatically relate to the experience and perhaps even release a bit a of serotonin from the good memory.

  2. 3

    Really cool trend. Web becomes more friendly means user feels more comfortable.
    It good tendention, hope it will be not only USA and Europe trend but Russian too.

    • 4

      Chuck Longanecker

      March 28, 2012 6:26 pm

      Thanks Serge. I like to think that the friendly site of user friendly is the soul of the site. Agreed about more international sites taking up this trend.

  3. 5

    A lot of this reminds me of Microsoft Office’s “Clippit” et al.

  4. 6

    Scott Michael Harris

    March 28, 2012 9:24 am

    Soul – it seems to be one of the easiest things to add into a site when you’re small and just starting out, and one of the easiest things to lose as a site grows. Thanks for this article. It’s a great reminder.

    • 7

      Chuck Longanecker

      March 28, 2012 6:24 pm

      Great point Scott. We try to make all of our product and design decisions based on our fundamental philosophies and values. Even then with a small company – it’s not easy.

    • 8

      Thanks for any other informative blog. Where else may just I get that kind of info wrttien in such an ideal approach? I have a venture that I am just now operating on, and I have been at the glance out for such info.

  5. 9

    kenny rosenberg

    March 28, 2012 9:39 am

    Awesome post Chuck! One of the main reasons I’m captivated by websites & apps with soul is the fact that I can make a connection with its personality. It’s almost human. Apps with soul create a platform for emotion because this personality invites empathy in design. Humans are natural skeptics, but when we are able to make an emotional connection with an app or website, we are more comfortable about making task-oriented decisions and progressing forward.

    • 10

      Chuck Longanecker

      March 28, 2012 8:03 pm

      Thanks Kenny. You are totally right about the empathetic connection. Crazy, eh? How can we empathize with a program or device? How can someone “love” their iPhone? Perhaps they will start empathizing with us back some day? Paging HAL 9000….

  6. 11

    Excellent article. Tons of inspiration of subtle UI details for a new developer like me. You better believe Little Big Details made it to my bookmarks bar.

  7. 12

    Having developed corporate facing applications in the past it has always been an uphill battle in convincing stakeholders of the value in humanizing the experience. Fantastic balanced collection of emotional design examples. Nice work!

    • 13

      Chuck Longanecker

      March 28, 2012 8:00 pm

      Thanks Dan. Here’s one important thing to remember, if the stakeholders don’t have soul, then it’s nearly impossible for the business or website to do anything but reflect that.

      Here’s the good news – everyone has soul. You’ve just got to uncover it. Simon Sinek’s “Start with Why” is a good place to…start.

  8. 14

    I’ve been fascinated with Mailchimp’s use of personality since I first started using the service a few months ago and as it currently sits, I won’t use anything else when it comes to creating a mailing list. It really goes to show that adding a little bit of humanity to a website can really keep your users coming back for more.

    Cheers for this fantastic article!

    • 15

      Chuck Longanecker

      March 28, 2012 7:56 pm

      Thanks Kevin. It’s also fun to watch how MailChimp evolves sometimes on a daily basis with their communications. And don’t forget the wacky video links in top right corner of the app.

  9. 16

    I think you point out some great examples of smart, positive branding. However, 8 of those examples are purely “messaging” (not UX/interaction) and are due almost completely to having a very strong brand voice _and_ attention to detail.

    It’s not just a matter of paying attention to the tiny details; it’s a matter of making sure the macro (brand) and the micro (interaction copy) line up. I would argue that those are examples of companies who get it and deliver comprehensive brand experiences.

    • 17

      Chuck Longanecker

      March 28, 2012 8:12 pm

      Hey Sarah. Great point about UX playing a very large role. For the case of this article, “interaction” could also be viewed as “communication.” and does not necessarily refer to user actionable interaction. That being said, messaging/communication is a huge and vital part of UX.

      Many of these communications are placed at strategic interaction points of the user experience. For instance, the MailChimp 404 page or the FeedBurner incomplete stats notification. This enhances the UX both by informing the user of what just happened and relating to them at the same time.

  10. 18

    Great article! A good read that goes along with the same idea is the “Designing for Emotion” book in the A Book Apart series.

  11. 19

    Some really smart ideas here to make interaction more fun and part of the user journey. Will be thinking about this a lot moving forwards.

    Thanks guys.

  12. 21

    I loved this article. I specifically look for this type of interaction and it’s part of the reason I use many of the services you mentioned (aside from the fact that they’re excellent products in general.)

  13. 22

    Really cool one

  14. 23

    I personally love these examples, most of them are fun or quircky in a good way!

    However, just to play Devil’s advocate: isn’t this a bit like preaching to the choir? I mean, our daily jobs consists with all things “design” and thus we will quickly notice these kind of things, and we probably like them. But what will the average user think? Will they even care? If I look at how some members of my family use their computers and devices, I don’t think they would even notice things like a little smiley next to a button or a friendly text. Never ever have I ever heard someone other than a designer say “I really like this 404 page”, for example.

    Be that as it may, I think it is still fun to put some soul in our websites, even in the big corporate ones, and there is nothing against it. I just don’t expect it to do miracles and do not really expect things like this create more loyal customers. As Sarah Beckley said earlier, I think this has more to do with good and strong branding in general.

    • 24

      Chuck Longanecker

      April 3, 2012 11:25 am

      Hey Bert. All very good questions. Good design gets out of the way, right? Adding soul to your website shouldn’t be like adding a “hey look at me” effect. It should be noticeably unnoticeable and resonate with the user. We think of MailChimp as light-hearted and fun, but still powerful. It’s based on the whole experience and the personality they display in the smallest form and may be missed during the moment, but adds up as an impression of their brand over time.

  15. 25

    If it’s Mailchimp you like, then Aarron Walters “Designing For Emotion” is the book for you, as Julian says. Aarron, by the way, is the UX guy behind Mailchimp. It’s full of good examples and reasoning, with a bunch of additional resources in it too.

  16. 27

    My favorite has long been the hand animation on Photojojo.- click the little “do not pull” lever to the right of the product photo. They also have great site copy.

  17. 28

    I somehow think, adding a line of poetry without any function to every page draws the attention away from the really important things and makes users less productive. But being on a nice 404 Page, where you can’t be really productive is a good way to be personal and emotionally intelligent. There are to sides of the story. I’d be careful..

  18. 29

    Nice article – a bit of personality and humour can go a long way. It’s interesting how people often slip into a weird sort of ‘customerservice-ese’ when talking to customers, using jargon they’d never use in regular conversation.

    But it’s worth flagging up the risk of injecting this kind of ‘emotional intelligence’ into your brand. It can be very subjective. As Michael points out above, one man’s breezy and friendly is another man’s Microsoft Clipit.

    Innocent Smoothies (UK only?) is a good example. Some people love their cutesy branding, others want to puke.

  19. 30

    Personally, I use MailChimp. After seeing these “funny” messages two times, they just get annoying. Like another commenter said: It’s like MS Clippy. Cute to start out with, but quickly gets annoying. But that’s just my opinion.

  20. 32

    Great article! I wish more thought went into creating these kinds of experiences on the web. I do have one gripe with the article though:

    “Note: Several of the examples and images are from this brilliant website: Little Big Details. It’s one of the many must-reads and I recommend adding it to your favorites if you haven’t done so already.”

    This block of text looks almost exactly like the advertisement for Printed Smashing Book #3 a few paragraphs above it. The ad trained me to ignore blocks of text that begin with “Note:”. When the ad and the content look this similar, it makes me feel like the ads are camouflaged to try to sneak into my field of vision. It’s extremely frustrating.

  21. 33

    As a web designer for 12 years, I feel like I need to keep up with the latest trends more than often; even moreso than the Netscape / IE browser wars. Now we’re talking emotional trends? Yikes.

  22. 34

    I love your last sub-head “Adding Soul To Your Website” … I think too many think it has to be all business and that’s just not the way it should be anymore. Kind of relates to that adapt-or-die theory. I think showcasing personality is huge, after all that’s what people are drawn to. It’s amazing to see, just by adding this in, what your followers will do. That loyalty can seem evasive to those websites that just try to get by.

    Great post – thank you for sharing!

    Kadee
    @produxs

  23. 36

    Great Article will keep these in mind for all of my projects in the future :) Cheers !!

  24. 37

    Nice stuff.I really enjoy this article.Excellent works.Thank you so much.

  25. 38

    First of all – great article Chuck,

    I totally agree with adopting the human approach. I myself have used a number of services that you mention here and I was delighted even when I got an error message. Such a long way from the cryptic hexadecimal codes we used to get especially with Operating Systems :) What I could add is that this trend is also appearing on browsers such as Firefox and Chrome.

    Once again, well done!
    Justin

    • 39

      Chuck Longanecker

      April 3, 2012 11:28 am

      Thanks Justin. Great call on the browsers. To be honest, I use Chrome and think it could use a bit more. The “Oh snap” error is getting a bit old. How about a browser just owning up to the fact that it’s sucking up all your memory for no good reason?

  26. 40

    Great article.
    Mailchimp is a perfect example of a friendly fun brand, I have always liked their branding approach, fun but not over the top. And the video links are a great touch.

    Recently our company (Label Media, labelmedia.co.uk/404) have built a 404 page with a tic-tac-toe game.

  27. 41

    “Emotionally Intelligent Interactions”?
    I call this bullcrap.

    Those annoying pop-ins and messages are useless and make me waste my time.

    I agree with the need of non-cryptic error messages. However, since when do we need a fancy design + 2 long sentences + a new UI element to understand that the application has gone inactive? I hate this trend.

    • 42

      Hi ashorlivs, i can guess you have 0% people skills you have no idea how to persuade your audience to keep engaging. you may be have high IQ but very low EQ..
      please google that and comeback.

  28. 43

    Beautiful examples. The internet is becoming more human due to these small emotional touches.

  29. 44

    K . S . Karthick Murari

    April 3, 2012 11:25 pm

    Thanks for the great article. The moment of excitement when you encounter a little catchy thing while interacting with a website/app is a great feel and kudos to those who sweated it out to built it.

    To add to the list of examples quoted in this article, I wanted to add one from Skype. While you are doing a text chat on Skype with your partner, due to anxiety (or to annoy your partner) you had asked 2 or more questions in quick succession. It is very common that your partner has answered only the last one and had ignored the previous one, which you feel are important. You instantly copy the same questions again from the chat script and paste it into your text field. WOW that is when you feel the difference, the Skype immediately formats the chat script you had just pasted in a neat format with intuitive type face and alignment which when entered again, will show up in the chat window like a pull quote.

  30. 45

    Really good post, It’s a good insight into what little things the big guys are doing to make their apps just that little bit better. I will be looking everywhere for this sort of thing now!

  31. 46

    It’s hard to do this without feeling a bit cheesy, and even harder when I don’t have a funny personality, I’m always afraid of putting something stupid. But I am encouraged by this and think i’ll continue to give it a try :)

    and if all else fails, just put up a lot of smiley faces :) :) :)

  32. 47

    Good list! We also did our best to design our site in the way that makes it feel human.

  33. 48

    I am glad to see VisualHub up there, even though it hasn’t bee supported or updated in 5 years.

    It was one of the first times I saw someone go to the far end of this. When finished converting a video, the close button says “Nostalgia” instead of close. At first I didn’t know what it meant. But now I’ve grown to love VisualHub for all the very strange but endearing UI elements.

  34. 49

    Phil Hershkowitz

    May 31, 2012 8:16 am

    Ahhh. TPS = “Totally Pointless Stuff”

  35. 50

    This was a fantastic post, thank you!

  36. 51

    i like this post! this make your website standout than the rest who do not follow this type of practice

  37. 52

    Beatrix Willius

    June 1, 2012 2:40 am

    Do these little changes really make a difference? I can agree on the error messages like to 404 of Mailchimp. But especially the Chimpy-ness of Mailchimp gets so on my nerves quickly.

    A poem is supposed to be more human? You are kidding me.

  38. 53

    Brilliant article! where could I learn more about this?

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top