10 really DARK & TRICKY UX patterns you should never use 😈
👇
1. Forced Continuity
There is a popular joke: "Why do you need my credit card if it's a free trial?"
The trick is that when your trial ends, you start getting charged.
Usually without reminders, and without an easy way to cancel the subscription.
2. Price Comparison Prevention
The retailer makes it hard for the user to compare the price of an item with another item, so they cannot make an informed decision.
For example, it's hard to compare weight (kg) and the package of pears (without knowing the package weight)
3. Sneak into Basket
This is VERY common in e-commerce sites.
You order something in a webshop, and apart from what you've chosen, you'll get few additional things in your cart.
E.g. some services, insurance etc. So that you have to manually deselect it.
4. Misdirection
It happens when the user’s attention is guided to a specific place so they won’t notice something else that is happening
So here we have a nice colorful picture, good description, big CTA.
And something else that is hard to notice...
5. Friend Spam
This occurs when the product asks for the user’s social permissions under the pretense it will be used for a good purpose.
But then it will use your contacts for something bad, e.g. targetings ads or spam.
6. Privacy Zuckering
“Zuckering Interfaces” are cleverly designed interfaces that trick users into sharing more personal information than they intend to.
And it's hard to do otherwise because the cancel button is hidden (e.g. under Learn More)
7. Roach Motel
Here the idea is that it's very easy to sign-up/subscribe, but it's very hard to delete your account or unsubscribe.
I personally had this: in order to delete the New Relic account, I have to write a message on their forum! 😡
8. Hidden Costs
This is a very common thing in e-commerce. You make an order and it says that the cost is $40.
But there is a trick: it didn't count shipping costs. So the resulting price will be higher.
Really common thing, along with the "Sneak into Basket" pattern.
9. Tricky questions
In this case, the questions are written in such a way that it's hard to get what they mean.
A lot of jokes were made here.
Are you agree not to subscribe? Don't you want to receive our newsletter? Don't you agree to decline our offer?
10. Disguised Ads
In this case, ads are disguised so that it's hard to distinguish original content.
Happens pretty often. In the past, it was ubiquitous when a site had multiple download buttons, but only one of them is the true button, while others are ads.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
🔷 the text on images is easy to read
🔷 it doesn't cover any important objects behind it (e.g. faces or products)
🔷 text contrast is good everywhere, not only on images
2/5. Navigation.
Don't hide navigation under hamburger icons on desktop devices.
I needed to make a pill component that should have had a 1px border.
But when on hover it should be doubled.
It wasn't that easy, and here is why.
If you simply make a 2px border on hover it will increase the height and width of the pill.
Since you don't know in advance what the width is, and probably the pill might be multiline, I don't think using fixed height/width is a good solution.
Instead, what I did is - I used shadows.
The first border is 1px shadow, and the second border (in the hover state) is 2px shadow.