Last week UX is a series of articles that I’m planning to write about the user experiences I come across on various products each week. This will be the first-ever issue of what I hope will be of many more to come. It’s mostly UX issues that stood out to me but I’ll try to include things that impressed me as well :)

Let’s make better forms ✍🏼

I wanna kick things off with some issues that I faced while filling up some forms online.

Are.na

To start things off, we have Are.na, a “creative research” platform. As many of you designers must know, Are.na is a place to store your inspirations or organize your moodboards.

I love the product and have been using it for a while. But recently, I wanted to make an account with my work email and came across a pretty annoying UX issue.

As you can see, the form is pretty minimal — it goes with Are.na’s design system and it’s totally fine. The labels are in the input fields themselves, which is acceptable, but it’s what happens after you start typing that is an issue.

The label completely disappears once you start typing. This is expected, but what if you wanted to recheck what the input field was about?

This is exactly what happened to me. By instinct, I thought I’m typing my first name and then noticed the next field is supposed to have that. So what am I filling out now?

There’s no cue for me to find out. Guess I have to erase the entire line to see where I am.

This is highlighted by one of the heuristics principles: recognition over recall. It’s easier for people to recognize something than to recall something from memory.

The experience could be a lot better if the label minimized to the top once I started typing. Like something Google does in their signup form:

CDKeys

The next one comes from CDKeys.com. For those who aren’t familiar with it, it’s a marketplace for game keys.

When I was trying to add my card to make a payment, it kept throwing me an error that said my card details were not complete. To be completely honest, I still don’t remember wondering where the other fields were.

Apparently, the input areas for them were on the right side of the same field as the account number. It’s more visible in the screenshot because I had to cover my card details, but at first glance, it's very easy to miss.

We are used to certain things and we expect to see them the same way when we encounter them the next time.

Therefore it’s important that we make experiences familiar to what the user is already using in other places.

The best thing to do in this scenario is to give the classic “card detail input fields” as most other forms already do.

Moving on from forms 🚛

Dropbox

Up next is a table I came across on Dropbox Paper. The “select all” feature could use some improvement.

Since I was starting from scratch, my Dropbox already had some junk files it came with. I wanted to select them all and delete them.

After selecting all the files, I didn’t know which button I had to click in order to delete the files. It’s apparently in the three dots next to the “download” button on the right.

The experience would be a lot better if they added a delete button that aligns with the table so that its obvious for the user to know where to click. So this can be on the top right or even somewhere below the table.

The “download” button can also be mistaken for something on the right sidebar.

After checking the experience while writing this, I noticed that Dropbox have actually fixed that issue 😃

The new experience looks a lot better:

Good job Dropbox 👏🏼

Not done with Dropbox yet 😉

Another thing I came across when signing up for Dropbox is the way they encourage the users to download the native app.

Theres no real way to “skip” this screen. You either have to download from the link and continue or type in dropbox.com in the URL bar again — which I think is a pretty frustrating experience.

Let’s talk about something I DID like ❤️

To wrap things up, let’s talk about an experience that I thought was designed really well.

I’m talking about a product page on the workspace messaging app Flock.

When we talk “workspace messaging apps” it’s common knowledge that Slack is king. That’s the most used app of this category by a big margin.

Flock knows this, and they want to push the fact that Flock offers a bunch of new features but for a lot less.

In their “pricing” page, they emphasize this well by highlighting how much you can save by switching to Flock. That is pretty damn convenient!

When I first saw the app, I was wondering why people would use this over Slack. After visiting their site, I had an idea about one of the main reasons. So good job to the UX designers and writers on Flock for this one!