Blog

Later Ctrl + ↑

Rådhuset Stockholm metro station

Previously: Västra skogen, Huvudsta and Stadshagen stations.

This is my second most liked station (after Solna centrum), Rådhuset:

You’ve already seen this photo in the introductory post:

The coolest thing here is this gygantic column:

Wow:

Note the tunnel decoration:

All in all, an ordinary station. With ads:

Some kind of tubes:

Conveniently, there is also a bar:

Continued

More Stockholm metro:

Designing declarative APIs

The video of my Piter CSS conference talk “Designing declarative APIs” has been published:

I’m talking about why declarative APIs are great and give examples of their use in my own projects:

At the time of the talk, the new Jouele Pro was still in development. Now it is available.

Thanks to the conference organisers.

The new Chelyabinsk Trams diagram

Over ten years ago I made the diagram of Chelyabinsk trams and trolleybuses. That design turned out to be very successful: dozens of designers used it as a reference for building their own diagrams. It wouldn’t be as good if not for Artem Gorbunov’s generous help.

Three years ago, together with Alexander Karavaev we made a new version of the diagram. It had a lot of design inventions: the “pencil-drawn” layer for buses and trolleybuses, the “watercolour” rivers and lakes, 3D terminals, the new shape of the stops’ ticks. With that diagram, a logo for chelyabinsk trams was born: the city’s coat of arms decorated with a pantograph.

Then Polina Lesnikova joined the team. She re-drew the map to account for the changes in routes. Together with Alexander, they changed a lot of details after testing the legibility of the previous version. Thus we arrived at the new diagram:

Some landmarks were added. The bus-and-trolleybuses layer gave the previous version some visual richness, and it was interesting to scrutinise. Unfortunately, it didn’t provide any notable utility, so we decided to remove it. This helped to simplify the geometry of lines and make the fonts bigger. The new diagram looks stronger.

Designed by Polina Lesnikova and Alexander Karavaev, art-directed by myself.

Why Photoshop still matters for UI design

In Sketch, you can easily make smooth round corners instead of radial ones. Or you can easily set a background blur on some surface:

Illustration by Konstantin Dubrovsky

It’s natural to use and love Sketch. The progress should go on, routine tasks should be done instantly. But a designer who is seriously saying that Photoshop is now irrelevant, is second-class.

These features are in Sketch, because some designers had invented them with Photoshop some day.

Västra skogen, Huvudsta and Stadshagen Stockholm metro stations

Previously: Näckrosen and Hallonbergen. Now let’s look at what’s in the other direction from Solna centrum.

Västra skogen station:

The main feature of this station is these colourful mosaic patterns here and there:

More:

If you ask Lightroom to make this photo level, it will turn in at 45°:

Wayfinding:

Transfer:

You may think that it’s a Stormtrooper helmet there:

But it’s actually god knows what.

Huvudsta station:

Seems to be nothing special compared to the neighbouring stations. But there is this stripe along the platform and some ribbons on the ceiling:

And a gigantic green blot, for some reason:

And some cylinders:

Stadshagen station:

In addition to blood stains on the walls, there are these pictures:

Depending on the view angle, you see different things:

Another one:

The escalators are colourfully illuminated:

The pictures are from the trip in June 2016.

Continued

More Stockholm metro:

Redesigning Hawaii missile alert user interface

A couple of weeks ago Hawaii residents got a shocking alert on their phones:

It turned out to be false.

A state employee accidentally sent the message while testing the alert system.

It’s natural to blame the employee for impermissible negligence. But here is the user interface that they were using:

Instead of selecting “DRILL-PACOM BLAH BLAH”, they chose “PACOM BLAH BLAH”.

Firing the employee will not help avoid this mistake in the future, another employee is as likely to err.

The user interface is the problem.

Some commenters suggested adding a confirmation dialog. But confirmation dialogs are only good at one thing: forming the habit of pressing “Yes”. Testing the alert system is a daily routine, so after a couple of days the effectiveness of a dialog will be zero. Even if we require confirmation only for the real alert, but not for the test and drill alerts, the error is still quite likely: people see confirmation dialogs too often and are trained to ignore them. Also, sending even a drill message by mistake is probably not desirable.

Here is how to really fix the interface.

Selecting the right option

In the current interface, the two options that the employee has mixed up, look almost the same: just a line of meaningless all-caps text. Instead, the drill options should be clearly separated from those that send real alerts. The text should be edited for absolute clarity. All abbreviations, parentheses and repeated words (“state only”) should be removed.

Ideally, what should remain is the actual text that will be sent, and to whom it will be sent:

If the employee wants to send a real alert, they have to explicitly choose that. Then everything should look really serious:

Undoing the wrong action

But most importantly, undo should be implemented.

How can you undo sending of a state-wide alert? Easy, the same way you undo sending an email in GMail:

For a short period of time, the mail is not really sent, giving the user the chance to correct the accidental mistake.

After the employee selects to send an alert, the next screen should say what has happened in a way that makes the employee’s job look completed, but still leaves the option to prevent the actual alert:

Notice how there is no confirmation button: there is nothing to confirm, the command has been accepted without confirmation. And since there is no way to close this screen before the timeout is over, the habit is not being formed to do it.

***

The problem with the modern world is that there is this stupid separation of “UI” and “UX” design, in which the important stuff gets lost. Good user interface design used to be about understanding how humans operate and helping them do their job better. And now, it’s undefined.

“UI” designers are now supposed to be thinking about beautiful buttons, fonts, and animations. This is too narrow. It’s hard to justify this work if you are designing software for use by a few government employees. “UX” designers are now supposed to be thinking about the user experience, whatever that is. This is too abstract. Caring about how “satisfied” or “engaged” the user is, again, not something a government could afford to think about. The “UI/UX” separation is bullshit. Between “UI” and “UX”, someone has to do the actual work.

See also:

Sources of images:

If Apple Notes stop syncing

Has it ever happened to you that Apple’s Notes just stopped syncing reliably via iCloud?

For me it happens like this: the Mac stops uploading local changes to some notes to iCloud, so I don’t see them on my phone. I know that the problem is really in uploading from the Mac because the web version of iCloud continues to sync normally with my iPhone. Also, the new notes that I create on the phone, appear on my Mac.

You may have found several fix suggestions online, most futile. Signing off iCloud and then signing back on helps, but this way you lose all the local changes that haven’t been uploaded to iCloud.

What I’ve found to be a working and safe solution is to select the “All iCloud” folder in Notes, then sort notes by date changed, then move all the notes that hadn’t been uploaded to iCloud to the “On My Mac” account (you must enable it in Preferences) and then move them back to the iCloud account.

Näckrosen and Hallonbergen Stockholm metro stations

Previously: Solna centrum.

I forgot to tell that it was really cold on all the “special” stations. I visited Stockholm in June, it was over 20° and sunny outside, so I was wearing a t-shirt. The five minutes that I spent on the stations between the trains made me almost freeze to death.

The next station is Näckrosen:

This station is all about the stones.

On the one hand it’s beautiful. On the other, it looks unhealthy, as if the station had a really bad rash:

Pictures on the ceiling:

Art:

A bench:

The next station is Hallonbergen:

Cardboard structures:

And kid’s drawings:

A platform. The metal elements are painted pink:

Exit. A compass on the floor:

The perspective:

The pictures are from the trip in June 2016.

Continued

More Stockholm metro:

Reachability by overscrolling

There is an accessibility setting on the iPhone called “Reachability”. When you enable it, you can double tap the Home button or swipe down the Home indicator on the iPhone X to make the screen content move closer to you fingers so that you could tap it.

In The revolution in the mobile user interface I wrote that you should flip the UI so that all the meaningful controls end up on the bottom. But what if you have a full screen of tappable content? Then let the user overscroll it!

Look at this video for examples and read the explanation below:

  1. This is how Reachability works on the Home screen of the iPhone X. App icons just move down so that you can reach the top ones. Notice though, that visually it looks as if you just scrolled the screen down.
  2. This is what happens if you actually try to scroll the screen down. The icons blur away and the Search interface appears. But wouldn’t it be better if it actually just scrolled the icons down, revealing the search bar above them? This way, you wouldn’t even need Reachability to use the Home screen with one hand.
  3. This is how Reachability works in Settings. The whole screen just shifts down, letting you tap user account settings or Airplane mode.
  4. This is what happens if you actually try to scroll the screen down. Stuff just moves down, but unfortunately bounces back when you release your finger. But wouldn’t it be better if it actually just scrolled the items down even if there is nothing else above? This way, you wouldn’t even need Reachability to use lists.

Reachability should not be an accessibility setting, but a natural property of the design. If you’ve already flipped the user interface of your app, now it’s time to implement the overscrolling.

Earlier Ctrl + ↓