My personal struggles with your user interface
Tags: a11y, ui
Published: 2024-01-01 11:36:08

---
title: My personal struggles with your user interface
published: true
# description: My personal struggles with your user interface
tags: accessibility, ui
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf5ed6k3f8eoi3e4geh0.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-07 16:48 +0000
---

## Left and right

I always have this problem, and I'm not even one of those folk who get left and right confused in everyday life.

![An AI-generated example of an instant messenger conversation. There are no indicators as to who is talking. The text is unimportant.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fslxbz71ze14ynm5ldhc.png)

Whenever I look at those funny screenshots on Imgur - or trawl through my own history when I'm trying to remember who I lent a book to - I have _no idea_ which person is on the left and which is on the right unless there's a name or avatar attached to it.

I'm not even sure if there's a convention. Is it different between WhatsApp and Teams? Who knows?

I have to take extra seconds to figure it out _every single time_.

### What's the solution?

Add avatars or names, or add column headings.

---

## Up and down

They've been around forever, but sometime earlier this century, a certain popular microblogging site popularised the reverse-chronological timeline.

It's hell. I used to use [bitlbee](https://www.bitlbee.org/main.php/news.r.html) to read posts using an IRC client running in a screen session on a VPS, because _programmer_. It might seem like a lot of hassle, but it meant that I could read what people were saying from top to bottom.

You know what makes the reverse-chronological timeline worse? Threads[^1]. They suddenly flip to "regular" chronological in the middle of your feed.

What is going on?

So at least things are the right way up in threads. Except, except in quoted posts...

My brain is full.

### What's the solution?

Be consistent, and allow users to set a preference for reading order. And make the option clear, don't bury it in a settings page three menus deep; this is _fundamental_ to how people understand your product.

---

## Above and below

In my Internet middle-ages, I got chastised for top-posting on email threads a few times, and I remember thinking people were over-reacting. It was because my email client defaulted to top-posting and I didn't pay enough attention to it.

Top-posting is ok for quick replies to quick things. For threads, it's _terrible_. You have to scroll to the bottom of the thread and then keep scrolling back up a bit, reading down, then repeat. If the email client collapses replies, then it's even worse, and you have to click to open each section, making the entire document move around. Why people put up with this is beyond me.

How does this manifest in modern times?

Let me tell you about a development example. At work we use Jira as our ticketing system. I have comments set to be displayed in chronological order, because I'm a human.

Now, since Jira collapses comments this makes it difficult to find your place, but people _expect_ things to be the way they're used to them. So a lot of comments say things like, "See my comment below", when for me, their comment is actually _above_.

### What's the solution?

I wrote a [Jira comment-uncollapsing Chrome extension](https://github.com/moopet/jira-comment-uncollapse) to fix this anti-feature[^2]. But tbh, it probably doesn't even work any more because they changed their UI a while back and someone's probably made a better one by now. I'm including it for completeness or full disclosure or something.

This time I think the issue is more down to us as users than the developers.

How could we fix this? Well, we have better words to use. "See my _earlier_ comment" is less ambiguous, isn't it? It narrows things down to half the thread at least, without me having to work out whether the other user is a top- or bottom-poster[^3].

---

## Parallel worlds

UI designers like **tabs**. Browsers are the most popular place to find them, they've been a feature for years... and yet there are still people who don't understand them.

I visited my mother a few years ago and used Chrome on her tablet. I thought it was weird that it didn't show a new tab when I tried to open one, and then I realised that I was wrong. The tabs existed, they were just not being shown as such. It was because so many sites she visited opened pages in a new tab and she had never noticed.
She didn't use the browser's "back" button because "it never works". Of course it never works if people keep spinning off new tabs!
I started closing them and after a few minutes I started counting. I manually closed over 400 tabs before the display started working properly, and that's not counting the ones I'd closed already.

### What's the solution?

Don't open stuff in tabs unless there's a reason to do so. Your client telling you to isn't a good reason to add `target="_blank"` all over the place. Explain to them the [principle of least astonishment](https://en.wikipedia.org/wiki/Principle_of_least_astonishment). Explain to them that they can't carry a pint of logic in a collander.

---

## Idolatry

Icons, emoji, meaning-through-colours, that sort of thing? It's difficult to understand. I see a bunch of icons and I have _no_ idea what they mean. It gets worse when different devices display different icon sets. Remember when [Apple changed their gun into a water pistol](https://en.wikipedia.org/wiki/Pistol_emoji)?

Does the flame icon mean something's good or something's about to be destroyed? Is it important that the tiny picture of a mammal is a beaver or a bear?

You see, what happens with icons generally goes something like this:

* Designer makes the 5 icons for 5 parts of your site.
* Designer gets a new job
* New site area gets built
* New designer tries to make something that fits in

Alternatively:

* Developer gets an icon pack and uses it for the main navigation
* New feature gets commissioned
* Developer can't find anything in the icon pack that matches the new functionality
* Developer chooses between switching packs and picking something neutral
* Site ends up with another _star_- or _document_- looking icon for something

Either way, I, as a user, have to rely on the alt text or title of the icon to figure out what it does. On a mobile device, I don't even get that affordance.

Last year, I got myself some varifocal glasses. They mean that in order to decipher the meaning of these arcane pictograms, I have to raise and lower my head all the time. Emoji are much more condensed than text, and a comfortable reading distance for text is much more relaxed than a comfortable interpreting distance for a picture.

You might say it tells a thousand words, but that's only useful if you can read those thousand words without zooming in all the time.

Otherwise, you're serving me [mystery meat navigation](https://en.wikipedia.org/wiki/Mystery_meat_navigation).

### What's the solution?

Don't rely on images to convey meaning. They might not even render on your users' devices, and if they do, they might not look like you expected. Use text. And while you're at it, respect people's choice of language.

[^1]: No, not the Facebook thing.
[^2]: Not my first choice; we have to use Chrome at work.
[^3]: Surely it doesn't matter because nobody would ever say, "see my later comment", you think? You'd think wrong, my friend.