Published on <a href="https://blog.prototypr.io/designing-emotional-ux-34283550b7ac?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Chris Bam Harrison 
<h4>The best products never fail to make us feel genuine emotion</h4>
Most, if not all, really truly successful products create a genuine, powerful emotional connection with their user.
Sometimes this is a simple thing — Band T-shirts or sports jerseys make the wearer feel connected to the thing they love. The first coloured iMac made the home computer feel personal and fun.
<img alt="" src="https://cdn-images-1.medium.com/max/360/0*L2tDQZPfR5tug9W0.jpg">Honestly, I’d still buy this computer.
Sometimes, it’s more subtle or more complex. The sweet ‘click’ of a ballpoint pen that makes you want to click it a hundred times in the middle of a meeting. The way a good flip-phone snaps open like some sort of secret agent gadget.
These artefacts work because it evokes a feeling from the user. The feeling itself almost doesn’t matter — what matters is that it changes the users state.
This is no different to software. Think about the first time you zoomed in on an image using your fingers on a touch screen — it was so novel, not only because it was a neat technological trick, but because it literally made you feel closer to your pictures, to your memories.
Microtransactions are so popular in apps these days because they do this too. Mailchimp’s a great example — the ‘Send’ button evokes a sense of stress and panic, and therefore, is a relief to finally hit:
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*61ejJZRDppg724UNQ6UuJg.gif">Funny how a button that’s so stressful to click can feel so good when you finally do.
<a href="https://uxplanet.org/best-practices-for-microinteractions-9456211aeed0">There’s a really great article about this by </a><a href="https://medium.com/u/bcab753a4d4e">Nick Babich</a><a href="https://uxplanet.org/best-practices-for-microinteractions-9456211aeed0">, here.</a>
<a href="http://www.florencegame.com">I recently played a mobile game called Florence.</a> It’s a short, sweet tale of a couple’s journey from the start of their relationship to the end.
It’s absolutely phenomenal, and you should stop reading this article and go play it.
Seriously, go and play it. <a href="https://itunes.apple.com/us/app/florence/id1297430468?mt=8">iPhone </a>or <a href="https://play.google.com/store/apps/details?id=com.mountains.feathertop">Android</a>. It’s fantastic and will only take an hour or so.
If you’ve played it, let’s continue:
Shortly after Florence first meets Krish, they have the quitessential first date experience: awkward small talk.
Everyone can relate to this, even if it’s just meeting new people in general — you try to talk about them, and yourself, and somewhere along the way you find some rythem.
Soon, the conversation gets easier. It flows. You’re not thinking about what to say anymore, you’re simple having a conversation.
Florence captures this feeling perfectly:
<img alt="" src="https://cdn-images-1.medium.com/max/406/1*vK71mHr7uvc1g0m7rQl3SQ.gif">
The date begins, and just like in real life, you’re trying to figure out what to say. It’s a puzzle: “Do I mention the cat? Is he ever a cat person? What if he hates cats? I’ve been quiet for a while. I should say something”.
As the conversation moves forward, it gets easier:
<img alt="" src="https://cdn-images-1.medium.com/max/406/1*tLvLWW8s_6oYX3DOrlHhzQ.gif">
Finding the right thing to say gets easier, quicker. You don’t have to think about it too much, because it just ‘makes sense’.
<img alt="" src="https://cdn-images-1.medium.com/max/406/1*NBcrz3o67wCy0fAeIjvJUg.gif"><img alt="" src="https://cdn-images-1.medium.com/max/406/1*2uwwMmy7m1AgNhrRS5t2CA.gif">
And finally, it eventually just clicks. It’s a perfect simile for this, and it’s such a beautiful way to portray this feeling in a user interface. It’s emotional, and human.
Later, when you have your first big fight, the mechanic is used again in a new, unique way:
<img alt="" src="https://cdn-images-1.medium.com/max/406/1*BTUFqJPqXh68VU4NX5zdSA.gif">
Just like your words, the puzzle pieces are sharper, more aggressive as the fight goes on. It feels like a race to say your piece, to get the last word in, to overwhelm your opponent.
There’s another great moment in the game as Florence and Krish discuss their dreams. As the music of the game plays, you uncover Krish’s hopes for himself:
<img alt="" src="https://cdn-images-1.medium.com/max/406/1*rSKh_sY9rG-o4cQqxiDOog.gif"><img alt="" src="https://cdn-images-1.medium.com/max/406/1*nwjcu0bqqQf4j3v_PsIFVQ.gif">
Not only is this way more interesting than speech bubbles, it actually eloquates on the way we learn about each other. We don’t instantly understand the dreams of those around us — we uncover their desires, their fears, their needs. It’s a process.
Late, this is used again. Krish has been going to music school, and Florence sees this as a path for him to really embrace his artistry and become the man he wants to be in his dreams.
<img alt="" src="https://cdn-images-1.medium.com/max/406/1*xbyTDcwMkZxmJ9EoNfCiPA.gif">
The truth of it is very different, however. The same mechanic shows Florence rediscovering that this path, that she thought would grant Krish what he wanted in life, has in fact led him to be disenfranchised and tired of his music.
It’s a wonderful piece that really translates that moment of revelation and frustration of a loved one not getting what they want in life.
The last piece I’ll leave you with, though, is during the final moments of the game. Florence and Krish are fighting more, and it feels as though if you, the player, don’t look after them, then they’re sure to break up.
<img alt="" src="https://cdn-images-1.medium.com/max/406/1*CuC8a2MsAQDs20hesBy4Gw.gif">
The game asks you to put a puzzle of them back together. The first time this mechanic is presented, it works. You fit them together, and the relationship lasts just a little longer.
The last time, however is different. No matter how many times you try, the pieces simply wont stay together. The drift apart, and eventually, you realise you simply can’t put it back together.
Genuine emotional connections are the lifeblood of any truly memorable experience. It’s certainly not always going to as dramatic as Florence, but there’s still so much we can learn from this.
Next time you’re designing a sign up form, make the user really feel a sense of achievement for having filled in all 21 fields. If they’re posting a photo, make their contribution feel valued.
Good products make us feel something, and great UX should too.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=34283550b7ac" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/designing-emotional-ux-34283550b7ac">Designing Emotional UX</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing Emotional UX

The best products never fail to make us feel genuine emotion

Top Stories