Posts Tagged

design choices

UI Choices – Don’t Clickshame

Elizabeth Technology December 15, 2021

The phrasing of a ‘no thanks’ in dialogue boxes can be a real turn-off for potential customers.

Website newsletters, coupons, and other assorted pop-up boxes may ask you to sign up – and if you don’t, you click to decline the offer. Is it possible to word it in a way that changes the minds of customers?

I Don’t Want to Subscribe

In some businesses in Japan, employees are expected to gauge the response to an idea they had purely by tone. “Sure!”, “Sure.”, And “Sure… but it will be very hard.” are the only options, and ultimately, they are still all affirmatives – if the other person wanted to step on toes, they would make “sure…” sound like “sure!” and forge ahead, and they would have plausible deniability while doing it. Foreign business associates consulting with Japanese companies were sometimes a blessing because they lacked this context – they’d charge right in with a “no”. This took a lot of social pressure off of the middle managers who knew issues existed, had tried to bring them up before, but went ignored because of social rules stating they must minimize things, or phrase them in a way that isn’t unpleasant.

Being forced to say “I don’t like this” or “I don’t want that” is often uncomfortable, so many cultures have rules for how to say no. While not as extreme as Japan, even people in the U.S. would find it rude to just respond with “no”. This is why websites often say something like “No thanks” instead of just “No” or an X in the first place!

 It’s not rude, but it is short. As web design advanced, more and more websites began including the context; instead of a simple “no thanks”, they’d say “No thanks, I don’t want to sign up”. The decline then sounds human without being overly presumptuous, and it became the new standard.

More importantly, while these longer versions sound more human than simply saying ‘no’, it’s also reminding the more impatient users of what the box is for. Even if they didn’t read the pop up, they read the decline option before they clicked it. They know a newsletter or coupon is available now. This is a tried-and-true method. It’s neutral, professional, and clear.

Forced To Lie

Website designers strongly recommend simply stating facts when writing out the line, instead of trying to make the user feel guilty for clicking ‘no’.“No Thanks, I don’t want your newsletter”, or “No Thanks, I don’t want to stay up to date on X” are certainly easy to guess if that user declined to sign up for the service. These are statements of fact.

But not everyone follows expert advice! Where websites put themselves in danger territory is when they try to get sassy, or smarmy with their decline option. Websites, for seemingly no reason, will imply that their users are stupid, and have ugly clothes, and that they must enjoy staying that way if they don’t agree with whatever the box is pushing. If someone in a real, physical store told you that when you declined to sign up for email coupons, you’d probably leave a negative review!

They’ll tell users that they must hate fun, or want to live in their own little world:

Or more. There’s more, and a ton are worse. Barely anybody likes this. And yet websites still try it so often that there’s a term for it: Clickshaming! There’s a hashtag on Twitter, there’s a subreddit on Reddit, and there are tons of websites showcasing the worst of the worst when it comes to clickshaming.

Emotional Response

The theory is that by inciting emotion, they’ll catch people who are on the fence.

Tell the customer a joke, make them laugh, and they’ll like you more. Act busy in front of a customer and they’ll feel pressured to decide faster. Link up with good causes, and the client will feel better buying from your store, because they’ll be supporting those good causes indirectly. Emotions are very heavily tied into sales, and the feelings a customer has before, during, and after the pitch determines whether or not they actually go through with it.

When a website says “We’ll hate to see you go!” They’re trying to pull an emotional response, so that you’re more likely to come back. A good website designer tries to make the website feel good and comfortable to use. The problem is that “haha, you’re not leaving without spending money, right?” is only a joke if the salesperson can tell that their potential buyer finds that funny, and even then they have to deliver it right, or else it sounds desperate. Sarcasm during a sale is a delicate thing. A human could tell when it would be appropriate to deliver that line to other humans. Putting “Aw, you hate saving money?” in the bottom corner of a dialogue box doesn’t carry that joking tone, and so it comes off really aggressively.

Even giving them the benefit of the doubt, reminding customers that your product can be expensive (and they could save money) isn’t exactly the brilliant strategy it seems on the surface. As mentioned above, the option to leave the dialogue box is sometimes the only option the user is even looking at – those people want to get back to scrolling. Imagine having to click ‘I hate saving money’ so you can look at things you’re not even sure you want to buy yet. If they don’t leave out of spite, suddenly the website is on an uphill battle to sell something to this specific user, who’s been primed to think about saving money.

Emotional response is not a guaranteed hit, especially when the emotion is negative. Clickshaming is a bad idea!


How to make a bad UI – Dropdown Edition


I’ve seen all of these. Witnessed them with my own eyes. How can a fair and just universe allow such crimes?

Anyway… here’s how to make a bad UI for your fillable forms.


1) Be sure to use a dropdown wherever you can.


It is so much easier to just include a type-in text box than it is to try and imagine every. Possible. Response to your question. Exceptions are rare: countries, states, shipping speeds, and other static items are suitable for dropdown menus because their numbers are limited. Anywhere or anything else? A dropdown can be a nuisance, especially because you might still miss options if you’re trying to keep your menu short. There’s nothing more irritating than a question asking me to be specific when they don’t have my option!

Dropdowns should also be avoided if the user could want to select multiple items: dropdowns are for single choices. They aren’t meant to act like checklists. Picture trying to order a burger for online pickup, but the ‘extras’ selection menu is a dropdown. I can have extra onion or extra pickles, but not both without calling in the order. Why?!?


1.5) Mix unrelated items into the same dropdown menu.


Ryanair forces (or at least used to force) their users into adding insurance by putting the opt-out option in the same menu as the location choices. Users who didn’t want the insurance may have already given up on finding the opt-out option by the time they’re picking their insurance, only to discover it near the bottom of the menu. That doesn’t mean they now want the insurance. It just means they’re frustrated by Ryanair.  A yes/no question shouldn’t have the conditionals for ‘yes’ in the same list as a hard ‘no’.

Ryanair’s reputation is garbage because of decisions like these. Is the short-term money worth alienating customers?


2) Make the dropdown incredibly long, and don’t organize it alphabetically.


Once again, including a typed response or blank box ‘other’ option allows a business a lot more flexibility than listing out every. Possible. Response, but if you have to, arrange it in a way that makes sense. Some UI websites even recommend breaking down your menus into submenus, so Greek users looking for expedited service on your site can select the “Expedited” option from service levels, and then “Greece” from there.  Each menu is shorter and easier to navigate when broken down by relevancy. You don’t need to list Greece twice in the same drop-down for first-class and then expedited shipping.

If you want your users to suffer, don’t arrange your inputs in any logical manner! Numbers can be in any order you want! European countries should be mixed in with the Asian and African ones, and there better not be any alphabetizing going on! Don’t forget to put Sealand at the top!


3) No autofill.


We die like men, scrolling through that endlessly long dropdown with two or three options for every state or country, to get to where we want to be. Most good dropdowns allow the user to type the first couple of letters of what they want, so they can skip opening the menu entirely. On eBay, I

hit the keys “N V” and I get to NV without needing to even open the menu. However, that’s a good idea. And we’re not doing good ideas today. Bad dropdowns don’t accept typed input. If you’re really feeling evil, make sure the button presses interact with the page in a strange way, like highlighting questions or activating the ‘next page’ button. For some reason.


4) Don’t allow users to leave it on “select an option” or blank.

Listen, websites shouldn’t punish users for accidentally clicking on a drop-down only to realize it doesn’t apply to them. If the ‘leave blank’ option disappears after clicking, then it’s poorly designed – for those ‘leave blank’ slots, users should be able to un-click the box or leave it. For example: Users may be coerced into picking ‘sneezing’ if they really can’t leave this question blank.


This also applies to question trees. A user should always be able to go back and select ‘no’ for a question that comes with follow-up questions, without having to still answer the follow-ups. Accidentally selecting ‘yes’ to special instructions and then having to type N/A in the pizza delivery place’s special instructions box makes users feel like they’re being annoying!

Similarly, optional multi-choice questions should either be possible to uncheck or have a “none of the above” option. Don’t make users refresh the page to get their correct answer!


5) For necessary items, let users skim past.


On the other hand, some dropdowns shouldn’t default to an option that allows the computer to continue forward. If you’ve ever checked out from a small website before, you’ll know that sometimes they put the USA and Canada at the top in shipping – their most used options get to go first. However, the USA shouldn’t be in that blank select-a-place box automatically. Locations for shipping are one of the few things absolutely necessary to complete an order, and if the customer misses that, they’re going to have a bad time. After all, there’s a Paris in Texas and an Athens in Georgia! Don’t default to USA just because it’s the most used option, or skimming customers are going to be very angry when their package doesn’t arrive.


6) Don’t include Dialogue Boxes When Doing Negative Actions


Dialogue boxes prevent mis-clicks from destroying your user’s life, patience, and data. Even a single ‘are you sure’ prevents tons of data loss. Remember, around 30% of the data lost last year was due to human error, and that’s with verification – the number would be much higher without these checks in place.

If you want to do a bad job, go ahead and skip these altogether! No verification questions! No dialogue boxes! Clicking the little trashcan icon once makes the item disappear forever! Now your user is mad!

Alternatively, if you want to do a terrible job subtly, it’s always a bad idea to be vague. Be as vague as possible when designing your verification question. “Are you sure you want to X?” is too many words. Make that question as confounding as possible.

“Complete Action?” “Don’t Delete X?” “Delete?” “Keep X?” and so on. Only having the options of “Cancel” and “No” are also good for maximum confusion.

6.5) Include too many Dialogue Boxes


You could also use a dialogue box for every action to make a bad site.

Search for X.

Nice, I have results. Add to Cart? Are you sure you want to do that? Oh, you are? Okay. Oh, you want to add this to the cart too? Are you sure? Hmm, okay. How about leaving this page to go to the next one, are you sure you want to do that? No? See, I saved you a click! Oh, I’m sorry, you must have hit the wrong button, you really did want to go to the next page, heh. Do you really want to narrow down your search results? Are you sure? Are you sure, you’re sure? Are you-


7) Make the end user do too many things to access certain information.


If you want to waste everyone’s time, make the end user fill out the entire form to get to critical information, such as when appointments are held or what requirements must be met to enter the building. The end user doesn’t even know if they’re even interested in the service yet!

If the business needs to screen appointments, it can do that when the customer is actually going to make the appointment. If the business can only accept certain file types for printing, it needs to make that clear before the customer goes through all the work of selecting the style of banner they want.

If you want your end users to suffer, be completely opaque about whether or not your services will suit them. Heck, you could even go so far as to hide your business hours! “Hah, you’re looking for music lessons, and you want to know what kind of music instructors we have? Too bad, fill out this skill level form before we tell you that we don’t teach the flute here. Or adults, we’re kids-under-14 only.” Do that. If you want your website to cause frustration, do that.