Stop flipping around, put them side-by-side

Pause and organise your screen estate to reduce your cognitive load.

One of the bad habits I’ve been debating with my colleagues for years is how engineers flip their windows around when they work. They disagreed that I called this a bad habit, and I couldn’t articulate why this was bad for years. Recently I dove deeper into cognitive psychology, and I’ll try to articulate the reasons that way.

First, I’ll explain what I mean by flipping around, then why it isn’t good, propose an alternative, and end with some practical tips on what app to use.

The flippant flipping

To fully understand the issue, let’s first look at what I mean by flipping around. This gif illustrates creating an object in TypeScript based on Stripe’s documentation.

This habit of flipping windows around is not such a problem if you do it for a single window once or twice. The problem is when you’re doing it fairly frequently in your workflow. This is why I use the word flip, not switch or cycle. You’re literally flipping, very frequently, sometimes struggling to find the windows that you’re looking for. I also like this word because it reminds me of the word flippant; this habit seems clever and fast (it’s not).

Well, I see that some of you are giving me a tsk-tsk, creating an object structure based on documentation is so simple, you could have copy pasted that. This problem is not limited to object structure, some other examples:

1. Flipping test code and production code when coding.

2. Flipping Figma and browser and CSS files when changing UIs.

3. Flipping IDE and terminal when running tests.

4. Flipping between existing code and currently written code for inspiration or examples.

5. Flipping between the issue tracker and test file when writing tests.

Yes, what’s being flipped around is not limited to windows. You may flip tabs around in your IDE or the browser. You could also flip desktops, for example, in MacOS.

Addressing this simple habit seems difficult, yet I notice how it affects developer productivity. Whenever I watch someone doing this, it’s like watching someone trying to pull out the tablecloth fast without sending glasses flying, and every time I see those glasses shatter into pieces, just like their thoughts.

You may have a good reason to flip around if you have a small screen estate like a 13” monitor. But the problem is I frequently see engineers with big or dual monitors doing the same thing. We probably carry this habit because we’re used to flipping around smartphone apps? Nevertheless, we should utilise the available screen estate that we have.

Self-inflicted cognitive load

Now, let’s delve into the cognitive psychology behind this flippant flipping and why it burdens our heads. When you zoom in on this flipping phenomenon, you’ll realise that you’re rehearsing, trying to remember what you’re seeing, as if what you'll see will soon disappear. Think about the situation when someone handed you their phone number, you don’t have a notepad, and you attempt to remember that phone number, that’s rehearsing.

When you are flipping around, you’re rehearsing unnecessarily, because these windows won’t disappear like the phone number scenario, as long as you put them side-by-side! We, developers, dislike being interrupted by others, yet, we’re interrupting ourselves by doing this.

We also know that we have a limited working memory capacity. I notice that when I accidentally fall into the flipping trap, it also consumes my working memory capacity. Given that I needed to rehearse and remember, suddenly, all the high-level context I had in my head was gone, overridden by the tiniest detail I needed to rehearse.

Creating a view of what you need doesn’t take that long either, and once you do it more, you can do it fast, especially with keyboard shortcuts (I’ll cover that in the last section).

Side-by-side, input and output

This constant flipping is a self-inflicted cognitive load that reduces our productivity. Pay attention to what’s happening in your mind when you flip things around. What was the CSS property I was trying to modify? Flip… flip… What was that JSON structure look like again? Flip… flip… Is it similar to Figma now? Flip… flip… When you catch yourself doing this, stop. Put them side-by-side.

Many of the tasks we have as software engineer is crunching information from one medium to another. What I’d like you to try instead is to pause and make all the information you need to execute your task visible on your screen.

If you have one large monitor, organise your windows or tabs, and put them side-by-side. If you have two monitors, with the same principle, put them side-by-side, even if they’re on a different monitor. If you work with only one small monitor, you need more screen estate to work effectively. As Jeff Atwood said, choose your own path to happiness:

Choose own your path to happiness, whether it's upgrading to a single 30" display, dual 24" widescreen displays, or three standard 20" displays. As long as it results in more usable desktop space, it's a clear win.

With the idea that we engineers are crunching information from one medium to another, you can frame that our head is processing an input and spitting an output. Put the input windows on the left and the output windows on the right. It looks like this on my large monitor.

When working with a smaller monitor like 16”, I can bear writing on the left-hand side, but on a bigger monitor, I’ll have to turn my neck, and it’s uncomfortable.

Use keyboard shortcuts

Organising your windows can be painful because it is quite a mouse-heavy operation.

The following assumes the setup I’m currently having, which is on MacOS, have a 27” monitor, and uses VS Code, but you can apply the same idea to your setup too.

MacOS has a built-in feature to put apps side-by-side. However, I found this feature too slow and distracting for my workflow. To organise my windows, I use Rectangle. There are only a few shortcuts that I use:

• Left Half

• Right Half

• Center Half

That’s good enough when I only have two windows to manage, and that’s only three shortcuts to remember. I recently started to have three windows to work, then I use First Third, Center Third, and Last Third shortcuts in Rectangle.

When I use VS Code, there are only four essential shortcuts to remember:

• Toggle Primary Side Bar Visibility (Cmd + B)

• Toggle Terminal Visibility (Cmd + J)

• Split Editor Right (Cmd + \)

• Sometimes, I press Cmd+Shift+P, then type “Split down” to have even more interfaces on my screen.

Try it out

Once you've mastered your shortcuts, it's time to test how well you’re organising your screen! I find the most effective way to try this is by pair programming. When my pair flipped things around, I instantly got lost. I don’t know what my pair is looking at. At the same time, we work better when we spend 1 minute reorganising our screen, creating a view where all the needed information is on the screen. This also surprisingly helps us pair better when our remote pairing setup turns laggy.

The next time you notice yourself flipping things around rapidly, pause and put those windows or tabs side-by-side. It’s a small thing to do, it doesn’t take more than 1 minute, and you’ll save that 1 minute fast. Try it, and let me know your thoughts!