Small design decisions with a big impact

We might not realise it, but clever design choices are all around us. From the place of certain buttons on our phones to the colours used across various screens — a lot of thought goes into the bigger decisions, and for good reason. These decisions all influence the way we use and experience apps and content. But what if I told you there are also a lot of smaller decisions that actually have a pretty big impact? In this blog we take a look at exactly that — small design decisions with a bigger impact than you might expect.

Icon placement with optical perspective

This might be the most well-know, so let’s get that out of the way first. Imagine a button that’s used for both playing (or resuming) and pausing video at the same time. When the video is playing, you might display a ‘pause’ icon in the button. Vice versa, when the video is paused, you’d display a ‘play’ icon, right? So far so good.

When you give this task to a developer, they will do the most logical thing, and center the icon in the button. Both the play and pause icons are placed at the same position. I mean, let’s just look at it, and you’ll likely immediately see why this matters.

How does it look to you? At least to me, pause looks fine. But, the play icon looks a bit… off. It’s absolutely centred in the middle of the button, same as the pause icon. But you can clearly se that, optically, it looks like the pause icon is a bit misaligned. Of course, this can be explained. You will have guessed it, but the shape of the icon makes it look like it’s not positioned in the middle. While the pause icon has a very equal size on all sides of the icon, the play button doesn’t. The big edge on the left compared to the small pointy side on the right is creating an optical effect, making it look no centred.

The fix is of course very simple. By moving the icon a few pixels to the right side, thus actually placing it off-centre, you do create the illusion that it’s actually centred. Tell me, which of these two play icons looks to actually be centred?

Toggles: Current state vs state it goes to

While we are on the subject of buttons and toggles, what about the state you display inside the button? Taking a look at our earlier example, we have a play state and a pause state. They are not actually separate buttons. Rather, depending on the action you are doing or the current situation of your video (playing or paused), the state of the button is different. But… which icon do you actually show, and when?

There are a lot of lively debates and interesting posts to read about this conundrum. Because while it may sound simple, it’s actually not that simple at all. You can look at the state of a button in two different ways. It can either show the current state of the functionality the button is tied to, or it can show the functionality’s action the button is executing when clicked.

In our play and pause example, the first scenario would be: when the video player is playing, the button shows a ‘play’ icon, and when the video is paused it shows a ‘pause’ icon. The second scenario is the opposite of the first. When the video is playing, the button shows a pause icon. And of course, when the video is paused, the button shows a play button. With the play-pause example, it’s actually pretty clear, at least to me, which option to select. You’d want the second scenario, as the action it executes when clicked is distinctly different from one another. It’s more logical.

So let’s move to a different example, a button that functions more as a toggle to enable or disable a certain function. Let’s say we have a button that mutes or unmutes audio. Which icon do you now display when the audio is muted or unmuted? Let me demonstrate to make this clearer:

Errrrr… I’m confused now. Which button do I press if I want to unmute the audio? The left icon tells me the current state is actually that the audio should be playing at full volume, while the right says the audio is currently muted. But no, when I click the right icon it should actually mute the audio and the left puts it back to full volume again. See the problem? Both scenarios actually make a lot of sense!

I don’t think there is one clear solution to this problem, but it does matter. Following the wisdom of the internet, the only solution would be to show two buttons and move away from toggles all-together. I’d say that makes sense for mute/unmute where the state and action is not as clear, but not for play/pause where it is more obvious. So my advice: look at this per case and make the right decision for the functionality you’re designing.

Progress indication texts

Oh, another conundrum, that’s unfortunate! Let’s just dive right in with a demonstration, and a question to you. Down below is an example of a progress bar in a video player. The bar itself is not important, so you can ignore that. What is important though, are the texts on the left and right side of the bar. They signify the progress of the current video that’s being watched. But what number do they actually signify?

How was that for you? Do you have a clue of what the texts are meaning? I think if you show this to some of your colleagues, you might get a different answer depending on who you ask.

The left text I think doesn’t leave much for interpretation, let’s be clear. Of course, this is in a left to right reading setup, so this of course does change in right to left oriented user interface. Regardless of that, the left generally signifies the current progress of the video. You’ve watched 1 minute and 30 seconds. But of what have you watched 1 minute and 30 seconds?

This brings us to the second number. Depending on the person you have asked, you will likely get one of two answers. Either the 30 minute 35 is the total duration of the video, OR the 30 minute 35 is the remaining time left of the total video. So the video is either 30 minutes and 35 seconds long, or it’s 30:35 + 1:30 = 32:05 long. You see what I mean now?

Once again, depending on your interpretation of the numbers you get to a different conclusion. What doesn’t help you here in this example, is the fact that this is a snapshot of the progress. If the video was playing, you would either see both numbers move (making the right the remaining tie), or the right number would remain the same (making it the full duration of the video).

It can be a conscious design choice to go for one or the other. I bet the likes of Netflix or others might have researched this, sadly I haven’t been able to find anything on this (so if you have do please share, that would be great!). Because I’m almost certain there is a different experience and psychological reaction to seeing one or the other. So be mindful of what you might do with this powerful knowledge ;).

In the end

These are just a few examples of small design choices and considerations that have a real effect on how your application and experiences are perceived. Pixels actually matter, and our brains are easily tricked or influenced in a way that we might not always expect.

I do hope that this blog has given you some insights to better understand some of those influences. UX is not linear, so always try and do what’s best for your users. After all, their experience is what matters the most.

PS. Up for a chat about UX, development or anything else media, TV or OTT related? Find me on LinkedIn!