Blog

Later Ctrl + ↑

Typing your password over a button

Apple came up with this interface behavior that would seem strange before.

When biometric authentication is available, the password input field is hidden. But if something goes wrong, you can still enter your password. However, you can start typing the password even before pressing the “Use Password...” button — any input will take the window to the next state.

Apparently, the password interface is hidden initially for the sake of beauty, and also not to give people the false impression that the password must be entered.

The only annoying thing is that the two states of the window are of different heights, that is, when you start typing the password, the window gets bigger.

Moscow Metro Map for 2030

Together with Roman Mochalov, Nikita Dubrovin, and Di Logvinov we solved the most difficult information design problem of our time: we made Moscow Metro map for 2030. The map is very beautiful and faithful to the radial-ring geometry of Moscow:

Automatically Close Tabs in mobile Safari

Mobile Safari has a feature that automatically closes tabs. It reveals the ill-conceived nature of the interface as a whole:

The problem: tabs pile up indefinitely. This is because there is no reason to close a tab after you got from it all you wanted. However, when you create a new tab, the old ones vanish from view entirely, and don’t get in the way. It’s just that once every two months you’re horrified by the list of open tabs.

Apple’s solution: symptomatic treatment. Let’s clean up the list the user is horrified by! That is, delete user data for the sake of the pretty picture.

Scaling faces in a set

“Polytech” writes about scientists with disabilities and shows this cover image:

It’s a widespread design flaw: you put a set of similarly-shaped pictures of people side by side, but forget to adjust the scale of those pictures, and they end up very different.

It’s more neat when all faces are the same scale (colour, lighting). Minor differences in perspective or headdress can add a touch of life:

“Wired” once broke the rule of scale, but they put everyone at the same desk, dressed them in black, and colorised them in the same cinemtic teal-orange:

Matching the typography of the three languages in Israel

In Israel, many signs are given in three languages: Hebrew, Arabic, and English. The three writing systems are very different, but sometimes designers try to find somewhat similar fonts to make all three work together.

The idea is good in itself, but the result is often poor.

The first picture is of the light rail station in Tel Aviv:

Everything seems to be equally low-contrast, straightforward, and close to pure grapheme. But the line heights and the stroke widths are all different, so it looks very sloppy.

The second picture is of a beautiful sign at the Rehovot police station:

Each writing system is being true to itself instead of trying to mimic a foreign one, but the whole thing still looks very consistent due to the same range of stroke widths.

Signs in an Israeli train bathroom

A couple of days ago I visited Beersheba, a city in southern Israel.

In the train bathroom, there are two signs, one above the toilet, one above the button:

Both are dumb.

The sign above the toilet wants you to not throw paper and diapers in the toilet as there is a bin for that:

But what do you really see? The toilet is crossed out (there is no toilet?). At a glance, you just see a green checkmark and a hand that throws stuff. So, it’s OK to throw stuff. Nobody cares that there is a bin on the sign: the sign itself in placed above the toilet. The proximity is more powerful than the pictogram of the bin.

The sign above the button is dumb in a different way. The pictogram explains that it’s a button next to the toilet:

Oh really? I had no idea that it’s a button next to the toilet!

One spinner is enough

In user interfaces, a spinner is a normal indicator of thinking or loading. However, the modern web is often build from blocks that could be loading independently. As a result, you got multiple spinners spinning:

Not good.

The application architecture should account for the fact that multiple things could be loading at once. Where would the spinner be displayed? In the case of multiple instances of the same block type, it’s enough to show the spinner in lieu of the first one. When the blocks are diverse, in general it’s best to put the spinner in the largest or the top-most block.

The classic iPhone used to have a loading indicator right in the status bar:

If memory serves, there was an API for an application to tell the status bar: “Hey, I already have an indicator in my interface, so don’t show yours”.

But the art of thinking of how to avoid rubbish on the screen, has long been forgotten even at Apple, so you can’t expect this level of care from Twitter.

Using timezones in Calendar in remote teams

Those who have remote colleagues and clients sometimes struggle with timezones and don’t know how to use Calendar.

Here’s what you do. Turn on timezone support if it is off for some reason:

When you add a meeting, specify its timezone (unless it’s the one you are in):

In the toolbar, select which timezone to display your calendar in and create events by default:

To be honest, I have no idea how come this “timezone support” is an option and what happens when it’s off.

How to do Offset Path in Figma

I’ve learned how to do Offset Path in Figma. Say you have a path, and you need to make another one parallel to this one at an offset x:

You copy the first path and give it a stroke width of 2x:

Then you do Outline Stroke (⌘⇧O) and adjust the stroke to your liking:

And then you remove the unnecessary points:

Done! Crazy, but better then “you can’t do it”.

Resizing Mac Windows

If you start dragging a window’s border, the window will start to resize horizontally or vertically in that direction. And with the Option key pressed, it will resize symmetrically in the opposite direction as well (like in Photoshop, yes).

If you start dragging a window’s corner, the window will start to resize both horizontally and vertically in that direction. And with the Option key pressed, it will resize symmetrically in all directions.

If you double click a window’s border, the window will grow from that side to the edge of the screen. If you double click a window’s corner, the window will grow to the corresponding corner of the screen.

Therefore, to make a window cover the whole screen (but not go into the dumb full-screen mode), just alt-doubleclick any of the window’s corners.

See also:

Earlier Ctrl + ↓