.UX{}

Mostly bad user experiences. Sometimes good ones too.

[ther-ine]

Effortless Icons

I’m an accessibility nerd and probably use that as a shield to explain away my pea brain’s ability to decipher icon pictures into meaning. I’ve even written about it before.

But the below illustrates how bias makers can be about the understandable component of our own designs. A receiver 📞 icon isn’t what phones 📱 look like anymore... so maybe make a little more effort when labeling icons.

[ther-ine]

Just Because You Can...

...doesn’t mean you should

I’m a developer. And today, I was asked if it was possible to put icons with tooltips inside of a tooltip. Which was a difficult question to answer because (as with most things in the non-physics-limited html UI world) it is possible but that doesn’t mean it is a good idea by any stretch of the imagination.

I’m also an ex-mac developer. One of my not-so-fond memories of my mac was the time my pro broke and had to be sent away for repair because out of no where, all the keys were re-mapped and it was impossible to un-scramble the mappings. ...and that re-mapping is a feature. that someone spends time maintaining. What? Yes, you can mindlessly remap keys and ruin someone’s laptop too -- just google it.

Why would anyone want to remap the functionality of labeled keys?

Answer: to prank your fraternity brother since dropping them off in the wilderness with no way to get home is so early 90′s.

For real, most questions here are rhetorical, but this one I want real answers to. Why would someone want to make keys labeled “QWERTY” type something else?

Why would my podcast player (pictured above) allow users the ability to map keys to do different functions? Giving a play button the “next” action would ruin symbol recognition of the right-pointing triangle. So why allow it? Why maintain that feature?

As product owners and designers, we need to say “no” to some features and say “no” to letting users configure themselves into corners. Do not make things so flexible that they become broken and unusable.

And as a final note--so as to not always leave on a grumpy note--here is a meme about "just because you can, doesn't mean you should." Feel free to tattoo the mantra across your heart.

So What Should I if There is So Much I Can?

Here are just a few things to ask yourself when deciding if a feature should be built:

Does it bring user value? Is it solving a user’s problem? Will anyone use it? How many “anyone”s?

Do you want to maintain it? What is the effort to include this? Short and long term?

Is it the most important thing? Are there other things you would rather spend time, money and effort building? Is this the highest priority?

Are there revenue goals attached? Did someone (*cough* sales) promise? Would people pay for this feature?

Does this fit into our mission? How does this align with our values and our trajectory for the future?

How do you know? Is there evidence to back up your above answers? Can you measure success?

Now go forth and build things that you should build!

[ther-ine]

Your Order Of... [NOT] These Items

☝️I am proud of myself for sticking to a new year’s resolution to budget -- which means I have somehow been living without Amazon Prime since February.

I am still as active as ever with online shopping, so just need to bundle up my orders to meet the minimum free-shipping threshold. An order of mine with 5 items has slowly been trickling in with shipments sporadically dispatching with single items or a couple of items in the same envelope.

Me this morning:

checks email

sees email that amazon package has shipped

thinks “hm I wonder which items shipped”

opens email

scrolls to look for items

has mini-freak out that items in the email aren’t things I’ve ordered

☝️ what? a laptop stand and dental flossers? ☝️

I did not order a laptop stand or dental flossers! Why are there things I didn’t order in my “order shipped” email? I understand marketing, but this is confusing!

I don't think I would even hate the cross-sell if my actual order items were in the email, but if the only items in the email are ones that I didn’t order... what am I supposed to think @amazon? This for sure feels like a dark pattern and a play on emotions to drive customers to return to the site. It is a big UX no-no.

[ther-ine]

What Goes Left, Must Go Right?

When it comes to elevators, what goes up must go down. But what about the UX of that movement?

Breaking up elevator wells into top floors versus lower floors seems like a favorable innovation (we have two in my condo building; so there are two dedicated elevators for the top grouping of floors, and two elevators for the other grouping of floors). But what about all the new scanners, touch-screens and talking things? I’m not so sure I’ve bought in to all of them yet.

Regardless, I live on the 21st floor and work on the 9th, so the vertical-moving box is unavoidable.

However, I did start to wonder after a little while why I always want to press the wrong button when going to my parking deck on P3...

...It is right there!

The P3 button...

It’s

obviously

on

the

bottom

left...

...oh wait...

While I’m affirmed that I am not crazy for getting switched up with the button moving places, I really have to ask why? I can only assume identical configurations would have been technically simpler to implement.

The hard part about these small UX snafus is how they leave the user feeling. I  feel dumb every time I cannot find a button that I press daily -- something I want to be able to do without thinking, but cannot since it changes (senselessly) depending on how the dice roll for which elevator I’m stepping into.

*Sigh* a big UX fail for the P3 button

[ther-ine]

Microcopy Times: Rando Facto

I love Mozilla for a handful of reasons -- the dev tools scratchpad and DOM event hints, their attention privacy, the gradients on their logo design, and the list goes on...

...but recently, my love has only been solidified further with the microcopy they have put into the “blank tab” screen when you open a new tab.

Pictured 👆 above is a “fun fact” with the line “if we have to know that, you have to know that” which is a funny and playful way of sharing random information.

This isn’t the first time I’ve screen-shotted one of these info bars! Below 👇 is an older screen from last summer (6+ months ago - oh my!) that I shared with our office - which has a handful of sock enthusiasts.

I love that the Firefox browser and Mozilla are taking advantage of a notifications area for furthering their brand personality and substituting in user delight for admin messages.

[ther-ine]

Design “Dis“ Makes a Difference

I know UX designers aren’t inherently content creators, but the dis prefixing the agree underneath option 5 makes this an unusable design. D- on the report card from me!

Lesson: have someone else QA your work before putting it out into the universe (sometimes you, yes you, have been looking at it for too long)

[ther-ine]

You Paid for a Touchpad. Better Use All of It?

Take a look at the two layouts for the Apple Mac App Store. They recently introduced dark mode which is great, but the navigation between screens is not so great.

Look at how far apart the two different back / done buttons are. Both address the same user need and execute their “exit” or “return” intention, but the location is completely different.

If you view a collection, look to top right to exit back...

If you view an app, look at the top left of the store frame to go back...

I honestly don’t care which side it is on. Someone should read the HIG and figure it out. But the button definitely doesn’t belong on both and shouldn’t change with screen changes. Eek!

[ther-ine]

One Size Doesn’t Fit All Use Cases

Have you ever had an email or password prefill and a form button stay disabled until your cursor enters and exits the field? 🙋‍♀️

The more I work on web apps, the more it drives me crazy that someone would assume that a user enters fields in a certain order and by moving their cursor between fields... but here is a puzzling one:

Have you ever had “one size” be counted as “not a size”?

Apparently you can only check in-store availability if there is a size selected... Apparently the only size available is one size... Apparently one size is not enough to search for store availability...

So now I will never know where I can purchase whatever one-size item I was shopping for 🤷‍♀️

[ther-ine]

Sort...

IRL, I think we can agree it is worse for someone to say they will do something and then not do it than if they were honest and didn’t say they would do it.

It’s the same on the web. If you say you’ll sort price low to high but do what Amazon does, then... you’re left with a bad UX

[ther-ine]

When an Icon is Not Iconic

We “fixed” an icon at work recently from showing the copy icon to showing the clone icon (the feature does propagation).

Those small details are what scares me about companies (**cough, cough** startups) throwing up apps without designers or design-trained eyes looking over what is being shipped. The point of icons is to be bring in universal understanding -- without needing to search/investigate deeper to understand... which is a great concept so long as everyone universally applies the meaning.

What happens when an icon is misused? The meaning is broken, and users no longer look to that icon to have that single definition anywhere they see it going forward.

The Mystery NextDoor Icon

I can appreciate that NextDoor has a simple set of features. I actually like that you can only do a certain number of things on their site (so bravo on a lean, focused product). I cannot appreciate the message center’s user controls.

Inside of an actual NextDoor inbox message, I can only send information -- no “marking unread” or “forwarding,” etc. So how do I delete something? The only action I could find was by hovering over the message  in the message list.

What is that box with a down arrow?

It is an “archive” button...

...an “archive button that looks like a “download” button

How do I know it’s an archive button? Literally the only way to find out was by testing it. Forcing a user to either abandon their task or turn their workflow into a set of guess-and-check experiments is terrible. Some users may click and try, but others may be afraid -- especially with this scenario where I was trying to delete something: guessing wrong could potentially be catastrophic.

Icon Buttons = Blah

Icon-only buttons are my least favorite buttons. It feels like I’m gambling in Vegas (and cause some “what happens in Vegas” moments when undoing undesired behavior). For example, the above list of icons Tumblr provides for navigation ... what is the compass? and what is the lightning? and what could be the difference between an envelope and chat bubble?

Thank goodness I’m not alone in feeling this way, and there are some articles out there which defend this better than I can ever hope to:

https://www.nngroup.com/articles/icon-usability/

https://medium.com/@philipardeljan/use-words-not-icons-for-button-labels-950a36efa0c1

https://uxplanet.org/tips-for-using-icons-in-your-app-541a6728e7d4

https://uxdesign.cc/do-icons-need-labels-6cb4f4282c00 (super interesting findings)

https://ux.stackexchange.com/a/1803/86554

[ther-ine]

Marriott Welcomes Guests with Dark Patterns

A recent stay at Marriott of course included the experience of getting on the hotel WIFI... something no guest (and nothing makes you feel like a guest -- an outsider) than having to declare yourself a visitor and fill out digital paperwork.

Not null? Who is null? Null is the value for “my software developer and designer forgot to account for an empty state.”

1. I bet this bug has existed and will exist for a very long time 2. If this bug exists, I’m really not excited for what is to come...

Agree to Upgrade by Default

I haven’t seen this dark pattern in a while. I want to think it because people have stopped using it, but I probably shouldn’t be no naive.

The above screen shows after someone logs in to the internet portal (which has an expired signature BTW) and before their access is granted. Someone on auto-pilot or fatigued from all the steps in login/create account will be very likely to hit “confirm upgrade” -- which would charge them another $4 per day. Even those who pause to soak in what is being asked may feel a little irked that they are being re-asked to choose a WIFI tier (this decision has already been made by the user).

It is not obvious that the upgrade is optional and it feels like the user is being nickel-and-dimed to upgrade internet for $4. There aren’t even any nice WIIFM (What’s In It For Me) sales points for why I would want an enhanced service other than getting rid of $4 that is burning a hole in my pocket.

I can only imagine someone looking at the numbers and being so happy that the number of opt-ins have gone up; however, the numbers won’t show the violation of trust and damaged relationship when a hotel guest inadvertently chooses to be charged, or the feeling of being cornered a user experiences when the opt-out is not clear.

Bad patterns and dark-UX make my blood boil - Marriott, you get a triple thumbs down from me!

Can You See the Light?

It would not take much to solve the dark patterns (and the “not null” bug). It would just take re-framing of the question and adding some more copy to inform the user of the decision they are making [again]:

1. Make “Continue with Current” a primary action instead of a secondary/hidden option

2. I’m not a copy writer, but engaging the user with some story-telling or WIIFM content can help encourage them to upgrade -- without being black-hat

Example:

[ux-studio]

If I Can't Do What I Want Right Now, I Will Just Close Your App

“You have to click on the menu button on the top right corner of the page. Nobody found it.” Case study: http://uxstudioteam.com/ux-blog/if-i-cant-do-it-right-here-i-will-just-close-your-app/?utm_source=Social&utm_medium=referral&utm_campaign=ownsocial

[ther-ine]

I just found myself using CTRL+F in a browser to search for a website's 'search' bar

[ther-ine]

If I Can’t Trust You With This...

Most sales teams work hard at making trial periods and pre-sales processes as polished and seamless as possible. Why? Because if a user cannot trust you with a small thing -- a ten day trial, an email without type-os, a succinct sales pitch, a whatever -- then how can they trust you to deliver once they have converted?

Which is why I’m questioning if I will show up to UserZoom’s webinar after filling out this form...

I am sure this form is just an embed from another tool, BUT I still cannot stomach the though of taking advice on creating a user-centered design from a site that has a form with

placeholder text acting as labels

tooltips as error messages

single-field validation on form submit

an exclamation point for promotion sign-up

Okay, so I’m just kidding about the last one, but very serious about the others. If you cannot make a sufficient web form to sign up for an online event then how can I trust that your event is going to have reliable content?

Andddddd I think I’ve just talked (blogged?) my way out of attending

[ther-ine]

UX Timeline

[ther-ine]

Ain’t No Error Like a Not Error

If you’ve been around the UX block, you may have heard the phrase “ain’t no error message like a not error message” to talk about the situations when there is not an error but an error message appears.

What? Yes, this is real. See the below “Warning - You have zero overdue items!” message that the library leaves hanging around for me. Or the above “You didn’t do the optional newsletter sign up” message.

Do you feel trolled? I feel trolled. So let’s review the takeaway...

If there is not an error, do not leave a message that appears to be an error.

What Could Be Worse? An Is-Error Not-Message?

On the other hand, I also run into the opposite scenario... when there is an error but the error message does not exist (thanks pinterest). 

Or how about an error message you have to hunt for? Creative Market has a peek-a-boo tool tip on their submit button for error messages, so a user must (1) see that the little side-teardrop (2) hover over it -- assuming you have a way to do that with a cursor (3) read the error message, interpret it, locate the actual error (since the tooltip is on the button and not specific to a field) and then correct it. 

Did someone just take the help out of ‘help text’? I believe so.

[ther-ine]

Microcopy Times: We’re Good. Good Looking.

I don’t know if the boys at your middle school ran around saying “you’re pretty... pretty ugly!” but this is not an article about those boys.

This is a highlight of Ghostery (now built into Firefox)’s release notes notification.

"Our uncommonly attractive team” -- great microcopy and communication of tone/voice. 10/10 stars for the attractive team at Ghostery