Posts Tagged

UI

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!

Sources:

http://www.ediplomat.com/np/cultural_etiquette/ce_jp.htm

https://www.business2community.com/email-marketing/digital-marketing-advice-how-to-avoid-rude-email-subscription-options-02159662

https://www.klaviyo.com/blog/email-pop-up-tips

https://philolu.com/2018/03/01/clickshaming/

https://blog.hubspot.com/sales/how-to-use-emotions-to-sell

Inconsequential Button Choices

Elizabeth Technology December 13, 2021

Cancel. Okay…?

Buttons. Buttons everywhere. Buttons for accepting cookies, buttons for declining cookies, buttons to warn and buttons to accept. Buttons are everywhere. Inconsequential choices add up to produce a functional website, but some still look and feel nicer than others. So altogether, they can’t be inconsequential! How do you assemble buttons the right way?

Left, or Right?

As an English-speaker, I read left-to-right. Latin-based languages go left-to-right. Book pages in English and European languages go left-to-right. The most logical way to design a page in those Latin languages is to put the ‘go back’ button on the left, and the ‘go forward’ button on the right. This applies to the buttons that approve an action, as well – in an online shop, the check-out button is usually on the right, as well as the finish-and-pay button on the next screen.

Even countries that don’t read left-to-right use this format! Japanese, Chinese, and Arabic online shops available to English-speakers also commonly use the right = forwards format. It’s become a principle of website design, rather than a choice based on language.

Decisions, Decisions

What colors should your button be when you’re not using red and green? Some cultures reverse the meanings of red and green – Red is lucky in many cultures, and while green is ‘good’ and ‘go’ to a lot of the Americas and West Europe, it’s ‘stop’ and ‘wait’ in others. Blue is a color of approval in some of the nations where green isn’t. Blue and red aren’t commonly yes/no coded in America, though, so the red button would be doing a lot of the heavy lifting, visually. Customers don’t like to read too much – that could be a problem!

But we’re not dealing with just plain old colored squares, here; there’s other information in the box. Some countries use a circle, instead of the classic check mark, to indicate approval.

Multi-national company Nintendo simply uses a green circle and a red X, which gets the message across pretty clearly. Other options include just using the green check/red X anyway, and assuming any possible users will be familiar with the concept. At the very least, they’ll know the red X part, right? Generally?

How do you decide what color the affirmative is if you don’t want to use green or red?

Many modern looks build this in: the affirmative is simply filled in with whatever secondary color the rest of the site is using, and the other button is the same color as the background. It highlights the ‘good’ option for the end user, without introducing new colors into the mix. It can be a little bland, and it fails to catch the eye if the entire website is just one or two colors, but it is an option.

Alternatively, introducing an accent color only used in the buttons looks disjointed, so be sure to use accent colors in more than one place if you’re going this route. The red/green option doesn’t count as extra colors in most customers’ minds, so it’s exempt from the accent color issue. Don’t make cancel buttons green, and you’re golden!

X or Decline, for Cookies?

You might notice that the pop-ups with a website’s cookie warning on it frequently come with no cancel button, only an ‘X’ in the top right and an ‘Accept’ center-stage.

Would a cancel button really help? Remember, these websites really want you to have their cookies, so they’ll do things that convince you to click ‘accept’. Including purposefully confusing the end-user as to what their options are.

Lately, I’ve been to websites that don’t offer up the ‘x’ for the notification at all! It’s either ‘accept cookies’ or nothing. Not clicking the box is taken as a pause, instead of a decline – the website’s still perfectly usable with the banner there, it’s just really annoying to have to zoom out on the website to see everything.

How badly do you want users to hit your button? Are you willing to annoy them for it? If so, go ahead and erase all traces of a cancel button. They can accept the cookies… or live with the bulky banner. Alternatively, adding a small ‘x’ in the top right corner is less annoying, and allows the user to avoid your cookies. While it might not get the desired number of cookies, users may be inclined to leave the site without it!

Cancel? Go Back? No? X?

Buttons should also be specific. If the buttons appear for a negative action (such as removing an item from an online shopping cart), the button to complete the action should be labelled with it, so that the user isn’t confused by the other button, which is usually ‘cancel’ or ‘go back’.  Asking an end user ‘Are you sure you want to cancel your order?’ with ‘yes, cancel’ and ‘no, go back’ is much clearer than ‘yes’ and ‘no’, for example. Correctly phrasing the question is also critical – there should be no confusion over what you’re asking the customer to do. “Task Failed” with options of “OK” and “Cancel” aren’t nearly clear enough – what does cancel do, here?

Color also comes in! Red is a great color for completing a ‘negative’ action. Customers don’t really like to read, and if they glaze over a ‘delete permanently’ button because it was in blue, well, they’re probably going to be upset. One article from UX Movement says 30% of data loss was human error. People either clicked the wrong button, or didn’t read thoroughly enough, and ended up causing themselves a lot of trouble when the designer could have made the buttons a little clearer. Sure, it’ll be slightly uglier, but if the item is truly critical, users won’t mind. Make your negatives brightly colored – red, orange, whatever, as long as it draws a lot of attention!

Just Words – Or a Box?

This one’s easy: do you prefer form, or function? Having just the clickable text sure looks snazzy, but it can easily annoy the end consumer who doesn’t know how much leeway they have. Even a slightly gray line around the area that’s clickable makes the consumer’s life much easier!

An expert in UI design, Nick Babich, suggests making buttons ‘look like’ buttons, because it makes it much easier to tell what’s clickable vs. what’s not. However, many sites just list out text and assume the user knows to click it via context. The words “book” or “locations” mean nothing if they aren’t clickable, but it assumes the user has some experience with other websites. It’s a safe bet now, but 90’s era websites didn’t have that guarantee, and so everything on cutting-edge websites was a button, not regular text.  

Alternatively, it’s possible to use both – highlight one button with a box, and leave the other un-boxed. Context clues again allow the end user to assume that the other option is also clickable. This has two benefits: it highlights the option the website wants the users to pick, and it saves space, so the buttons don’t have to be either tiny or weirdly narrow. Visually, a little bit of button padding surrounding the text looks nice – people like it best when that padding is the same all around.

See this example from the City of Las Vegas website:

The “Buy Tickets” button has an even surrounding of pink all around, and the “Learn More” button sits much closer to it than it would be able to if it were also boxed. Both buttons can be bigger as a result!

It’s important to be clear when the clickable object is a standalone. If I saw ‘See Availability’ and then a phone number in plain text when scheduling for a haircut, I might assume I would need to call. However, the website could be keeping their scheduling in a hidden menu only visible with the button, but I didn’t design the site, and I don’t know that. What seems obvious to the designer is sometimes hidden to the user. Standalone text should be button-like!

Sources:

(Credit to @designertom on TikTok for bringing up valuable points about buttons)

Bad UI – Button Edition

Elizabeth Uncategorized September 17, 2021

Do you want to make a button that suuuuuucks?

1) Make Sure There’s no Context.

Some buttons are self explanatory. “Check out now” could only mean the button goes to the checkout page. “View Location” sometimes leads to a map, or sometimes it leads to text, but either way, the user knows they’ll gain information about the business’s location when they hit that button. It would be bad practice to make the button lead to something other than it’s label, and it’s pretty obvious, so it doesn’t happen too often.

Similarly, it’s bad practice to label the button and then have no additional information surrounding it. That happens more often!

“Bowhair Frogs” on a menu with no dropdown options means nothing to viewers who stumbled upon the site. “Download Now” when the page doesn’t have any information about the actual download makes it seem scammy. The same goes for “Sign up now.” Sign up for what? The end user could guess it’d for the newsletter or something, but it could also be nearly anything else. Sign up to the website, for an account, maybe? Context is crucial. If you want to do a bad job, leave the buttons completely stranded in an enormous blank field, with no relevant instructions or text, and let the user guess what the button does or what it’s for.

2) Make the Options Vague.

I’ve covered this before in previous articles, but it’s really hard to overstate how much content viewers depend on clear, concise wording to make their choices. Just like context, content matters! A dialogue box is useless after clicking a button if it doesn’t sufficiently elaborate on what the button does. Make your options as clear as you can – ‘more words and clearer’ is better than ‘less words and not clear enough’.

3) Make the Button Visually Unresponsive to Clicks.

You might have noticed that many buttons simulate being pushed down when you click or tap them. That’s good design! It gives the viewer vital information, by letting them know that the button has indeed registered their input.

If you want to confuse users or accidentally generate multiple inputs, make it unclear if the button’s registered their input. No color changes, no animations, no nothing. The user will know their order has gone through when they get the email, right? That’s what bad designers say. When checking out from smaller websites, you might notice a screen warning you not to click the button again, or not to navigate away from the page until it’s complete, and that’s because this is still a very real issue with payment portals. Impatient users or users with slow internet would hit the button multiple times. They’re not necessarily at fault – that’s exactly what you would do to a button in real life if you thought it hadn’t responded!

4) Make the Button Very Small.

Experts say that the smallest you should make a button is about 10 mm by 10 mm, or 26 px by 26 px. This is about the same area as the tip of an average person’s index finger. This is an absolute minimum size! Customers viewing your site on mobile literally will not be able to push the button if the button was any smaller – their phone could pick up the input around the button and could misunderstand what they’re asking it to do. It’s also harder to hit something if you can’t see exactly where it is, and that little micro-button is well hidden underneath the user’s finger.

4.5) Make Small Buttons Close Together

One of the things that makes shopping at Amazon very fast and smooth is that the buttons are all gigantic, and they’re all pretty far apart. People new to designing webpages for mobile might assume that putting their smaller yes/no buttons close together would make the mobile experience more pleasant, when in reality, it’s the opposite. People like some amount of spacing between buttons, especially if they’re small. You can have small buttons, and you can have buttons close together, but too small and too close creates an unpleasant user experience. Pick one!

5) Make it Unclear What Options the End User Has

Write the ‘exit’ option in white text, or put the ‘x’ in a very light gray in the upper right corner. Don’t put a background, don’t draw attention to it, wait for the user to scroll over it as they jiggle their mouse in a fit of rage. Similar rules apply to ‘go back’ and ‘cancel’ options. Ads do it all the time! Do you like ads?

You could also make the website’s default page a ‘sign-up’ option, and make the log in option small, at the bottom of the page, so users aren’t sure if they’re in the right spot to log into their account. Remember, most users don’t like to read, especially if they’re trying to get somewhere fast – sometimes, highlighting something is the only way the end user ever actually sees the option. If you want to irritate or confuse your users, make it unclear where they’re supposed to actually look!

Twitter does this right. Twitter has both their log-in and sign-up buttons on the same page, one right under the other, and they’re the same size. Even though the ‘sign up’ option is highlighted, the right button for logging in is directly underneath it, so the user’s eyes are still drawn to approximately the right area. Meanwhile, on other platforms with Google and Facebook’s new ‘log in with (PROGRAM)’ buttons, the ordinary log-in button sometimes gets shuffled to the bottom of the pile. You’ll see Sign Up, the spaces for email and password, Log in With Google, Log in With Facebook, and then finally, at the bottom, the regular login button. Which then takes users to the next page so they can, y’know, log in. This isn’t ideal design, especially if the website’s older than the Google option – users may accidentally create two accounts before they realize what they’re doing.

6) Make it Unclear What’s Clickable or Unclickable

Here’s an otherwise great example of a sign-up box. It only appeared halfway through the article, it has both an ‘X’ and an “I’m not interested” button, and it doesn’t take up the entire screen. The only possible issue is that the larger text doesn’t necessarily look like a button – but given the context, it doesn’t really have to look exactly like a button, and it does highlight when I hover over it. This is a good example. I know it’s a button when I interact with it.

How do you do it wrong? Hide text, don’t allow the text to highlight when the user hovers over it, or otherwise obscure its true nature.

You could also write unclickable/uninteractive text in underlined blue as emphasis, instead of just the underline. Is your website’s primary color blue? This is still a bad idea – users understand underlined blue to be hyperlink text, so if you really want to highlight, do it in your secondary color. You could give unclickable words a hover-over option, which sounds good for things like word definitions, but can get really frustrating on mobile. They see a word, they think it leads to another page, they click it. If the hover-over is poorly configured, it won’t do anything. Well-configured hover-overs can still be frustrating on small screens, so nailing other aspects of your web page is critical if you plan to use them. Make the experience as mobile friendly as possible, and the desktop aspects will follow.

Sources:

https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

https://medium.com/nextux/design-better-buttons-6b64eb7f13bc

How to make a bad UI – Dropdown Edition

Elizabeth Advice, Ideas, Technology June 9, 2021

 

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.

Sources:

https://uxdesign.cc/the-ux-of-security-questions-4edbbb687e83

https://careerfoundry.com/en/blog/ux-design/10-classic-ux-design-fails/

https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116