This is a collection of examples of bad (or even terrible) UX that I came across during my travels on the internet. The list will most likely be extended over time (but not too much I hope!).

It should serve as a lesson that both ancient looking but also great modern sites can fail to deliver a smooth user experience.

A pretty UI is not enough!

Datasport myDS

Datasport is a service provider for race timing, in my case for running competitions. To sign up for a race that uses their technology, you now are seemingly required to make an account with them on their myDS portal.

So far, so good. But how on earth do you log out again?

Let’s think. Usually that should be near the top right.

Ah, great! There is even an icon that is pretty much the Material Design’s exit_to_app icon.

Datasport screenshot

But wait! The link on that icon points to exactly the same site that we are already on?

Before we waste too much of our time, let’s look at their FAQ. Hooray! There we have an easy four step guide to logging out:

  1. Click on what looks like a logout icon
  2. Click on the Account tab (which is not preselected, why would it?)
  3. Scroll all the way down, past some other settings
  4. Click the Log out button

Done!

Datasport screenshot

Why did Datasport do this? Maybe they want to make sure that every time you log out, you come across your email, password, preferred currency and opt-in to additional offers. To ensure that you have a chance to check whether they are still up-to-date. How very useful! They change very often, don’t they?

Lessons learned:

  • Logging out is a very prominent action - one that every single user will need every single time she uses your service. It MUST be easily accessible.
  • Don’t misuse commonly known icons and give them a different meaning. Material Design is used all across Google’s products and many more Android apps, people already associate a different meaning with this icon.

Hostelworld

Hostelworld is to some extent for hostels what Booking.com is for hotels. A platform to search for and book hostels across lots of different cities.

Being young and exploring the world, I was using their service as well at some point. Having signed up and created an account I did what I usually do: check out all the possible settings. (I can recommend that since few companies set sensible defaults and many still do not respect GDPR’s Art. 25)

There I came across this gem:

Hostelworld screenshot

The two toggle buttons work as follows:

  1. You can NOT click a button if it is enabled. It does nothing.
  2. Hitting the disabled button enables it AND also disables the other.

Lessons learned:

  • Only use a single control element for two flags that are mutually exclusive.
  • Give the user feedback on why she cannot (or how she may) revert the action she just did (here: cannot disable the toggle button directly).

Your site here