Category Archives: Interaction Design

Positive Reinforcement In UX Design

Positive Reinforcement In UX Design

Recently, I was asked to summarise UX design in just one word. It felt like an exercise in futility – I have always maintained that UX design is a complicated, sometimes convoluted, amalgam of differing industries, skill sets, and disciplines.

I still do not think I have a definite answer, but there was one word I kept returning to – interaction.

Interaction is so inextricable from a platform’s UX design that the term “interaction design” is sometimes used as a synonym (though there are some willing to argue the semantics).

Poorly designed graphic aside, interaction design is key to UX (Image source: Interaction Design Foundation)

Too often we describe the user experience as monolithic — a seamless, fluid, uninterrupted entity. In reality, that is not the case. A user experience consists of thousands of minuscule exchanges between user and platform.

That is right: the fundamental unit of UX design is an interaction. That is why I find the word to be such an apt embodiment. So how do we create “good” interactions? If you are looking for the simplest way to do it (and as UXers, we always are), then look no further than positive reinforcement.

What Is Positive Reinforcement?

When you think positive reinforcement, you might think of Pavlov’s dogs, the famous behavioural psychology experiment. It was Pavlov who coined the term “reinforcement” after he was able to condition dogs to salivate at the ring of a bell.

I am sure you are familiar with the story. It is the archetypal story of classical conditioning, and the mechanism behind it was positive reinforcement. Pavlov rewarded his dogs with the ring of the bell and was able to form a habit (salivate) from it.

In short, positive reinforcement is only encouraging an action by rewarding it. If you mow the lawn, I will give you $20. If you hit 30k in sales, your commission rises. In short, do X and receive something good.

How Do I Use Positive Reinforcement In UX?

In the UX world, we can use positive reinforcement in two ways. The first, if you are employing an unconventional design feature, a non-traditional navigation, or unfamiliar architecture, you can train your users to utilise it and master it by rewarding their interaction with it.

The second, and much more widespread, application is to impose it on the platform as a whole. You are not forming a particular behavior or habit. You simply want to encourage continued and repeated use of the website or mobile app in general.

To accomplish this, think back to interactions, the base unit of your platform. Try to positively reinforce the key ones by rewarding the user when they complete them, ultimately cultivating a more engaging, enjoyable experience.

These rewards do not have to be lavish or complicated. They may be as simple as giving the user a clear, concise confirmation that they have completed the interaction successfully.

(Image source: Quora)

Let the user know when the form they have filled out was submitted without issue. For ecommerce sites, inform shoppers that an item has been successfully added to the cart with a short animation or overlay, or let them know what stage they are at the in checkout process with a progress tracker.

Rewards in web design do not have to be fanfare or relentless, back-patting “great job”s. In UX, the best currency, and thus the best reward, is often simply information.

The Wrong Kind Of Reinforcement

It is important to discern the difference between positive reinforcement and just providing positive feedback. Do not inundate the user with pointless, saccharine pop-ups congratulating them for every action. It could come off at best annoying, and at worst condescending.

Additionally, do not refrain from informing the user when they have made a mistake. Making error messages obvious, and offering a solution, is actually positive reinforcement. Do not coddle the user. Merely point them in the right direction.

Finally, since we have spent so much time discussing positive reinforcement, I would be remiss if we did not at least address the other side of the coin: negative reinforcement. If positive reinforcement is “do X to receive something good”, its counterpart can be thought of as “do X to stop something bad”.

Negative reinforcement means that “something bad”, that consequence, is already present and affecting the user. Its removal is the motivator behind the action. And while it does work in some applications, it fails in the UX domain.

Do not purposefully sabotage the user by inserting a consequence, obstacle, or otherwise malevolent component to your experience to motivate them or change their behaviour. Users are fickle – they will immediately abandon the platform.

Conclusion

Positive reinforcement is the mechanism behind positive interactions, the building block of your user experience.

Each interaction the user makes with your platform, no matter if it is as seemingly inconsequential as typing into the search bar or a major process like onboarding, is another brick in the wall of your experience.

I am not saying you should run to your developers and have them pore over every pixel, optimising every interaction with a positive reward. But you should consider reviewing interactions in key processes like checkout, onboarding, or conversion, and optimising them with positive reinforcement,

Interactive Sarcasm

Surfing through various UX posts, I found this handy (and profane) tutorial on common UX tools. He’s pretty dismissive of the tools in an offhand way, but at least he leaves Fireworks alone. RIP Fireworks, my longtime go-to. For the record, I use paper, Fireworks, Axure, Flinto, Adobe XD and Sketch. Not in that order.

 

The Ideal Design Workflow

As designers, we are constantly experimenting with tools and processes in an attempt to find the one that works best. After a great deal of experimentation, I’ve discovered the perfect design workflow, and I’m going to share it with you now. Design is a process and the process I’m going to share is the one I’ve used on all my projects to build habit-forming products that people love.


1.) Sketching (paper and pen) — every great design begins on paper. Get out that paper and pen and start drawing some shapes.

.>Flawless.

2.) Your next step is to take photos of your sketches on your smart phone and throw those babies into POP so you can test your prototype.

3.) Your next step is to make wireframes. Having sketches is never enough. Wireframes are a must 100% of the time. There is simply no way around it. Go ahead and open Omnigraffle and make your wires.

4.) Now realize you need a dropdown menu so re-do those wires inBalsamiq.

Good when designing for 3rd graders.

5.) Next, realize you f***ing hate Balsamiq and redo them in Axure.

6.) Next, realize you f***ing hate Axure so switch over to Adobe Illustratorand use that UI Wireframing kit you bought for $89.

7.) Now export those wires to PNGs and import them into Invision so you can share them with your team.

8.) Wake up the next morning and cry into your bowl of Honey Bunches of Oats because of all the mean comments that Jonathan left on your Invision prototype.

This shit’s delicious.

9.) Agree to never use Invision again ever. Because f**k Jonathan.

10.) Redo your prototype in Marvel and hope that Jonathan can’t figure out how to leave comments on Marvel.

11.) You succeeded. Wireframes are finally approved. No thanks to Jonathan. Time to start working on a higher fidelity prototype.

12.) Grab the same stock photos that everyone else uses and then usePhotoshop to optimize them.

Looks pretty optimized.

13.) Now, open up Sketch and start creating the UI for your app. It’s starting to look like a real product now!

14.) Now export these as PNGs and import screens into Flinto Lite.

15.) Realize you need gestures so pay $99 for Flinto for Mac so you can add Gestures.

These are different people! Very important!

16.) Your CEO/Stakeholder/Client “doesn’t need another app on his phone” and refuses to download the Flinto app for iphone.

17.) Import your designs into Principle and add the interactions.

18.) Realize Principle exports as a f***ing video? and give up for a brief moment. It’s going to be OK, right?

19.) Download Pixate because its free and why not?

20.) Try to learn how to use Pixate. (good luck with this one.)

21.) What you’re going to want to do is bash your computer. I would say, if you can, resist the urge to do this. It’s all part of the creative process. You need to get knocked down before you get back up again. They’re never going to keep you down.

22.) Once Pixate has driven you to the brink of insanity, switch gears and download the free trial for Framer.

Looks promising!

23.) Now go get some lunch. You’ve earned it.

Tacos sound good.

24.) Come back from lunch and realize your Framer trial has expired. (Seriously, they give you a 32 minute trial)

25.) Rebuild your prototype in Justinmind.

26.) Get roasted by your teammates for sending them a Justinmind file that no one can open because no one knows what the f*** Justinmind is.

27.) Consider jumping off the building, but realize that it’s ok because your friend tells you about a brand new awesome prototyping tool they heard about at that meetup/conference/blog post/TED talk/Product Hunt.

That’s you.

Thanks for reading. I hope this helps my fellow designers out there.

Shoutout to Krishen Kotecha for inspiring this post and putting up with my sarcasm in general.