{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Design", "_rss_description": "Ilya Birman’s blog on design, cities, music, and life", "_rss_language": "en", "_itunes_email": "ilyabirman@ilyabirman.net", "_itunes_categories_xml": "<\/itunes:category>\r\n<\/itunes:category>\r\n\r\n", "_itunes_image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764", "_itunes_explicit": "no", "home_page_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/design\/", "feed_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/design\/json\/", "icon": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764", "authors": [ { "name": "Ilya Birman", "url": "https:\/\/ilyabirman.net\/meanwhile\/", "avatar": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" } ], "items": [ { "id": "386", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/design-vs-evolution\/", "title": "Design is dead, it’s all evolution now", "content_html": "

There’s no design in digital products anymore. It’s been replaced by evolution.<\/p>\n

When I was reading Richard Dawkins about evolution, one example stuck with me: the giraffe’s laryngeal nerve. It connects the larynx to the brain, but in a giraffe it runs all the way down the long neck, loops around the aorta, and then comes back up. Logically, it should run straight from the head to the larynx. But the giraffe evolved from a short-necked ancestor that already had this loop around the aorta. As the neck grew, the nerve simply stretched.<\/p>\n

Here’s another example: Instagram. It used to be a timeline of photos from the creators you liked. Then direct messaging was added, and the feed got scrambled with ads and videos. Then the developers copied Stories from Snapchat. They didn’t really fit the feed, so they were stuck on top as little circles that live separately from the feed and use different gestures. Then, in various places, they shoved in live streams (not the same as videos), something called IGTV (also different), and Reels lifted from TikTok (different again). Reels got their own tab with its own set of gestures.<\/p>\n

\n\"\"\n
Design and evolution<\/div>\n<\/div>\n

There was a time when products were designed with intent. Sections were organized into a hierarchy, features were given logical places. You could feel a system behind the product: what parts it consists of, how screens are organized, what kinds of data it has. Users didn’t analyze it consciously, but it helped them navigate and gave them a sense of control.<\/p>\n

That’s not how it works now. Instead, teams make hundreds of random changes, keep the winners, roll back the losers. In the end, nobody sees any logic in the product. Users post the same photos in Stories “just in case” (because nobody finds them in the feed anymore, and users know that). Reels, in turn, somehow leak into the main feed (because lots of people never visit the Reels tab, and the developers know that).<\/p>\n

Just as a giraffe is a messy tangle of nerves, guts, and bones, Instagram is a mess of features with no logic, order, or plan. In neither case do you feel the hand of a Creator who carefully thought through how everything should be structured.<\/p>\n

This shift from design to evolution is happening in most digital products around us. Sometimes it’s framed as the change in the designer’s role: we’re told that a modern designer should test hypotheses and analyze metrics. But that work can’t be part of design; it’s literally the antonym of design. Nobody designs anything; instead, people take random steps and keep the ones that happen to work.<\/p>\n

You can call this evolution operator a “designer” if you want — words can change their meanings. But you don’t actually need a human at all to generate variants and see which ones survive: nature was doing it for billions of years before humans existed. Some people find the insides of a human more beautiful than the insides of a MacBook. That’s a matter of taste. The fact remains: to create human insides, a human wasn’t needed.<\/p>\n", "summary": "There’s no design in digital products anymore. It’s been replaced by evolution", "date_published": "2026-02-09T16:52:44+03:00", "date_modified": "2026-02-09T16:52:33+03:00", "tags": [ "design", "interface" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/design-vs-evolution.jpg", "_date_published_rfc2822": "Mon, 09 Feb 2026 16:52:44 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "386", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/design-vs-evolution.jpg" ] } }, { "id": "383", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/apple-future-hope\/", "title": "Hoping for a brighter future at Apple", "content_html": "

The internet is celebrating the news that Alan Dye, Apple’s head of design, is leaving.<\/p>\n

Alan has been the face of Apple’s interface decline in recent years. There was a time when the core principles of good interface design were easiest to explain using Apple as the example. Now Apple mostly serves to show how not<\/i> to do it. Dye ended up with enormous power despite minimal competence: he simply doesn’t understand what makes an interface good; he lacks the education and isn’t even aware of it. Looks and surface-level effects completely defeated depth and thoughtfulness, and things still work only thanks to the extraordinary foundation laid long ago. Dye neither understood nor respected that foundation.<\/p>\n

Steve Lemay is taking over. I hadn’t heard the name before, but he has been an interface designer at Apple since 1999, so there’s no doubt he actually understands what the job of an interface designer is. And judging by the reaction, the designers inside Apple can’t believe their luck and seem genuinely hopeful. Maybe he’s someone for whom “design is how it works” isn’t just nice-sounding words. And only a couple of weeks ago there was another rumor that this year Apple will focus on polishing and refinement rather than new features.<\/p>\n

I very much hope Apple is headed for a revival. Maybe window sizes will once again be chosen so that elements actually fit instead of triggering a three-pixel scroll bar. Maybe we’ll get back the wonderful world where elements and their labels aren’t pushed as far apart as possible. Maybe animations will once again work to explain spatial relationships or bringing joy, instead of being accidental artifacts of implementation.<\/p>\n

One more thing I hope for: Apple once led the world in making drag-and-drop a truly comfortable gesture. On Windows, it was basically unusable — if you dragged a file, nothing else worked until you finished. On the Mac, while “holding” a file with the mouse, you could scroll windows with the wheel to drop the file where you needed, and you could even hit space bar to activate an element under the cursor while the mouse button was already pressed. Today these things work only sometimes, in the places where Apple hasn’t yet broken them. Maybe Apple will suddenly remember the implications of Fitts’s law, and we’ll once again be able to drag files to the very edge of the screen to drop them into the Dock, instead of having to aim at the icon.<\/p>\n

When Steve Jobs introduced Quick Look about twenty years ago, he explained that PDF parsing was built deep into the system, so even complex PDFs opened instantly, like ordinary image files. Today on the Mac, not only PDFs — even a regular JPEG takes noticeable time to appear. Just open a folder full of JPEGs and press the down arrow key to move through them. On the old Mac, the JPEGs would flicker past your eyes as they changed. Today, the Mac waits until you release the key, and only then lazily draws the JPEG you stopped on.<\/p>\n

You simply have to not know how good things can be — how good they were<\/i> — to believe that today’s Mac is good. The only reason to tolerate this misery is that everything else is even worse. If only that stopped being the only reason. Please.<\/p>\n", "summary": "The internet is celebrating the news that Alan Dye, Apple’s head of design, is leaving", "date_published": "2025-12-06T11:20:47+03:00", "date_modified": "2025-12-06T11:20:34+03:00", "tags": [ "Apple", "design", "interface", "Mac" ], "_date_published_rfc2822": "Sat, 06 Dec 2025 11:20:47 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "383", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } }, { "id": "374", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/apple-watch-swimming-screen\/", "title": "Apple Watch swimming screen", "content_html": "

On the left is how Apple Watch displays a swim workout, on the right is how it could:<\/p>\n

\n\"\"\n<\/div>\n

And below is what you can see in both cases, if your goggles are fogged up (Photoshop simulation).<\/p>\n

Apple’s design is silly: what’s the point of using small type when you can use large type? But it’s especially silly that even if you enable enlarged fonts in the accessibility settings, it doesn’t apply to the workout screens anyway.<\/p>\n", "summary": "On the left is how Apple Watch displays a swim workout, on the right is how it could", "date_published": "2024-11-07T21:27:05+03:00", "date_modified": "2024-11-07T21:26:51+03:00", "tags": [ "accessibility", "Apple", "design" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/apple-watch-swimming@2x.jpg", "_date_published_rfc2822": "Thu, 07 Nov 2024 21:27:05 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "374", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/apple-watch-swimming@2x.jpg" ] } }, { "id": "370", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/tashkent-metro-map\/", "title": "Tashkent Metro map", "content_html": "

Check out our new Metro map for Tashkent, Uzbekistan<\/a>:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n", "summary": "Check out our new Metro map for Tashkent, Uzbekistan", "date_published": "2024-02-03T18:31:31+03:00", "date_modified": "2024-02-03T18:31:21+03:00", "tags": [ "design", "projects", "transit maps", "wayfinding" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tashkent-metro-train.jpg", "_date_published_rfc2822": "Sat, 03 Feb 2024 18:31:31 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "370", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tashkent-metro-train.jpg" ] } }, { "id": "360", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/chelyabinsk-transit-reform-communication\/", "title": "Chelyabinsk transit reform communication", "content_html": "

Check out the case about one of the stages in Chelyabinsk transit reform communication<\/a> — route changes from January 1, 2022:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n", "summary": "Check out the case about one of the stages in Chelyabinsk transit reform communication — route changes from January 1, 2022...", "date_published": "2023-08-08T14:24:33+03:00", "date_modified": "2023-08-08T14:23:30+03:00", "tags": [ "design", "projects", "release", "transportation", "wayfinding" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/chelyabinsk-transit-reform-communication.jpg", "_date_published_rfc2822": "Tue, 08 Aug 2023 14:24:33 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "360", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/chelyabinsk-transit-reform-communication.jpg" ] } }, { "id": "355", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/dom-toma-website\/", "title": "Dom Toma’s online store", "content_html": "
\n\n\"\"\n<\/a><\/div>\n

Check out my design project from 2019: an online store for ‘Dom Toma’<\/a>. I had to manage to show both the variety of the collection and the individuality of the items. Repost everywhere and come back for good design!<\/p>\n", "summary": "Check out my design project from 2019: an online store for ‘Dom Toma’. I had to manage to show both the variety of the collection and the individuality of the items", "date_published": "2023-06-25T13:52:20+03:00", "date_modified": "2023-06-25T13:52:15+03:00", "tags": [ "design", "projects", "web" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/dom-toma-cover.jpg", "_date_published_rfc2822": "Sun, 25 Jun 2023 13:52:20 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "355", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/dom-toma-cover.jpg" ] } }, { "id": "336", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/bus-lane-sign\/", "title": "Bus lane sign", "content_html": "

Together with Nikita Dubrovin, we made a new road sign<\/a>:<\/p>\n

\n\"\"\n<\/div>\n

The text says: “Dedicated lane only for fixed-route transport. In operation since 28th of August. Fine for entry: 1500 ₽”.<\/p>\n

In some cities public transit is just beginning to receive proper treatment. Many drivers are yet unaccustomed to bus lanes and may ignore the official sign 5.14 “Lane for fixed-route transport”. Our sign explains the idea of a dedicated lane in words, while also teaching standard signs and markings.<\/p>\n", "summary": "Together with Nikita Dubrovin, we made a new road sign", "date_published": "2022-10-09T17:22:47+03:00", "date_modified": "2022-10-09T17:20:40+03:00", "tags": [ "design", "projects", "road signs" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/bus-lane-sign@2x.png", "_date_published_rfc2822": "Sun, 09 Oct 2022 17:22:47 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "336", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/bus-lane-sign@2x.png" ] } }, { "id": "330", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/barprephero-ui\/", "title": "BarPrepHero user interface", "content_html": "

I designed the new user interface for the BarPrepHero app<\/a>. Now it stands out among apps for lawyers:<\/p>\n

\n\n\"BarPrepHero\n<\/a><\/div>\n", "summary": "I designed the new user interface for the BarPrepHero app. Now it stands out among apps for lawyers", "date_published": "2021-10-18T15:47:57+03:00", "date_modified": "2021-10-18T15:47:43+03:00", "tags": [ "design", "interface", "projects" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/barprephero-ui.jpg", "_date_published_rfc2822": "Mon, 18 Oct 2021 15:47:57 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "330", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/barprephero-ui.jpg" ] } }, { "id": "263", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/sayve-badge\/", "title": "Designing the “Badge” feature for Sayve", "content_html": "

In Sayve 1.3<\/a>, we added the ability to display a badge with the number of unsorted audio recordings:<\/p>\n

\n\"Designing\n<\/div>\n

This is for those of us who don’t like their audio recordings to pile up. Actually, we wanted this in 1.0, but it didn’t get there. Why? It wasn’t that easy to design.<\/p>\n

OK, this must be laughable: what even is<\/i> there to design? The badge is a system feature that has a fixed look, just take it. But you can’t.<\/p>\n

This is going to be a long and boring post, by the way.<\/p>\n

Since iOS 10, displaying a badge requires an app to have asked user’s permission for sending notifications. So if we just tried to just show it, the user would see the system dialog asking for the permission.<\/p>\n

We already ask for two<\/i> permissions on first open: microphone and speech recognition. For iOS these are two separate things, unfortunately. Before asking, we show this screen:<\/p>\n

\n\"Sayve\n<\/div>\n

This prepares the user for the system questions and helps us get a “Yes”. Microphone:<\/p>\n

\n\"iOS\n<\/div>\n

Speech recognition:<\/p>\n

\n\"iOS\n<\/div>\n

Notice that we can also add some of our own text in these dialogs to explain why we are asking for these permissions.<\/p>\n

We could add a “tutorial” screen before asking about notifications: explain that we are going to display a badge and only then ask for permission. But adding another such screen and third<\/i> permission question would make the first-launch experience really clumsy. And what’s more important, many users would still presumably press “Don’t Allow”, because at first launch they have no idea about how they would use Sayve and why a badge might be useful to them.<\/p>\n

And what should we do if the user answers “Don’t Allow”? You can ask for a permission only once. How would the user even know they could change their mind later? For comparison, when the user answers “Don’t Allow” to any of the two sound-related questions, Sayve just cannot work, and we show this screen until both permissions are given:<\/p>\n

\n\"Open\n<\/div>\n

We can’t do the same for the badge permission, because the badge is not necessary, it is just a preference. Some users would like it, others would not. So if the user says “Don’t Allow”, we would need to explain how to enable the badge later. But where and when? We don’t even have an About or Settings screen.<\/p>\n

We could go and add a Settings screen just for this one setting. See how this is getting complicated?<\/p>\n

Adding in-app Settings screen makes little sense: iOS already has notifications settings, and this is the only “notification” feature we use. So the next idea was to make this setting configurable only in the Settings app:<\/p>\n

\n\"Sayve\n<\/div>\n

Let’s just display a badge when the user has enabled notifications. And we could explain this option in the app’s description.<\/p>\n

This also didn’t work. Turns out, you can’t just put this “Notifications” element to the apps settings screen quietly — it would only be added there after your app has asked for a permission. So we have to ask for a permission even to get a “No”! By the way, the question starts with the text “Sayve Would Like to Send You Notifications”, which is not true:<\/p>\n

\n\"iOS\n<\/div>\n

We would not like to send any notifications, and we don’t even have them. As to the badge, we just can<\/i>, but not would like<\/i> to use it. To make things even worse, in this dialog, unlike the two previous ones, you cannot even put your explanatory text.<\/p>\n

But this is not something we can change: the question is asked by iOS, not us.<\/p>\n

So we added this icon to the top right corner:<\/p>\n

\n\"Sayve\n<\/div>\n

The idea was: when the user taps this icon, we would first ask if the user would like to see the badge, and if yes, we’ll ask for the system permission to enable notifications. And we would remove the icon then.<\/p>\n

Do you think this worked? Of course not. What would we do if the user declined the first time? There would no way to add the notification permission setting to the system Settings app then. So we cannot ask<\/i> the user if they want a badge, we must just tell<\/i> them that the notification permission dialog will follow and it is there to display a badge if they want.<\/p>\n

So, in 1.3, when you tap the icon in the top right corner, you’ll see:<\/p>\n

\n\"Sayve\n<\/div>\n

And after you press “OK” (which is misspelled as “Ok”, unfortunately), you see the actual, system notification permission dialog where you can decide whether you want the badge or not.<\/p>\n

After having shipped this, we see that it’s better to say “Continue” instead of “OK” in the box above, otherwise it may seem to the user that they have no choice.<\/p>\n

Is this the best design of a feature? I don’t think so. But that’s the best that we could come up with given the system limitations that we have.<\/p>\n

We hope you like Sayve (we are Mihail Rubanov, the developer, and myself).<\/p>\n

The button:<\/p>\n

Get in the App Store<\/a><\/p>\n", "summary": "In Sayve 1.3, we added the ability to display a badge with the number of unsorted audio recordings", "date_published": "2017-06-12T12:38:09+03:00", "date_modified": "2017-08-02T02:10:45+03:00", "tags": [ "design", "interface", "Sayve" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-notifications-dialog-IMG_9824@2x.png", "_date_published_rfc2822": "Mon, 12 Jun 2017 12:38:09 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "263", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-notifications-dialog-IMG_9824@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-badge@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-first-open@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-mic-perm@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-speech-perm@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-open-settings@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-settings@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-notifications-perm@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/notify@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/sayve-prepare@2x.png" ] } }, { "id": "285", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/monument-valley-2\/", "title": "Monument Valley 2", "content_html": "

During WWDC, the new Monument Valley<\/a> was released. It’s the most splendid game ever. I’ve finished it, having made some screenshots:<\/p>\n

\n\"Monument\n<\/div>\n

But the pictures show only a small part of the game’s beauty. In reality, everything is live and the sound is amazing. Go buy and play it.<\/p>\n", "summary": "During WWDC, the new Monument Valley was released. It’s the most splendid game ever. I’ve finished it, having made some screenshots", "date_published": "2017-06-11T10:53:59+03:00", "date_modified": "2017-06-11T10:53:55+03:00", "tags": [ "design", "iPhone" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/monument-valley-2@2x.jpg", "_date_published_rfc2822": "Sun, 11 Jun 2017 10:53:59 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "285", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/monument-valley-2@2x.jpg" ] } }, { "id": "278", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/unstable-alignment\/", "title": "Unstable alignment", "content_html": "

Sometimes my students would come up with a layout like this:<\/p>\n

\n\"Unstable\n<\/div>\n

It may seem that things are aligned, but they are not. Can you see what’s wrong? I would ask, how is the heading positioned? They would say, it’s centered:<\/p>\n

\n\"Unstable\n<\/div>\n

How is the text aligned then? They would say, it’s left-aligned:<\/p>\n

\n\"Unstable\n<\/div>\n

And how was the left margin chosen? They would say, it’s aligned with the heading. But this means that the position of text depends on the length of the heading. What would you do with this if the text changes on another screen?<\/p>\n

\n\"Unstable\n<\/div>\n

This doesn’t work as a system, because this structure is unstable. It reminds me of the fragile Windows Start menu:<\/p>\n

\n\"\"\n<\/div>\n

You must be careful enough not to breathe, or the whole thing will fall apart.<\/p>\n

So, generally, do not align a piece of text to an itself-unaligned part of another text:<\/p>\n

\n\"\"\n<\/div>\n

Because when you translate this text into a different language, really weird things will happen:<\/p>\n

\n\"\"\n<\/div>\n", "summary": "Sometimes my students would come up with a layout like this", "date_published": "2017-05-20T11:23:29+03:00", "date_modified": "2017-05-20T11:27:49+03:00", "tags": [ "design" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/unstable-alignment-1@2x.png", "_date_published_rfc2822": "Sat, 20 May 2017 11:23:29 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "278", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/unstable-alignment-1@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/unstable-alignment-2@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/unstable-alignment-3@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/unstable-alignment-4@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/windows-95-start-menu.gif", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/unstable-alignment-6@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/unstable-alignment-7@2x.png" ] } }, { "id": "270", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/transport-map-design-part-3\/", "title": "Transport map design. Part 3", "content_html": "

In part 1<\/a> I’ve covered the difference between the Beck’s London underground map, our Ekaterinburg metro map, and the Vignelli’s and Hertz’s maps of New York subway. In part 2<\/a>, I’ve highlighted the more subtle details specific to the transit maps of Barcelona, Paris, Oslo, Moscow and London.<\/p>\n

All these differences in maps were because of the differences in the cities or their transportation systems. But there is another reason for the maps to be different: aesthetics.<\/p>\n

The transport map is not only a tool, but also is a notable object of graphic design in a big city. So even if you can make do with the Beck’s design language, you will get a London map, no matter what you depict. The transport system must have a face, and aesthetics is as important as logic.<\/p>\n

The main feature of the Moscow metro map is the Circle line. It doesn’t fit the Beck’s language, but it’s very important to Moscow. This is not Moscow:<\/p>\n

\n\"Transport\n<\/div>\n

This, on the other hand, is:<\/p>\n

\n\"Transport\n<\/div>\n

London also has Circle line, but it has never been depicted as a circle. Today, it’s not even a closed loop:<\/p>\n

\n\"London\n<\/div>\n

These Circle lines are large elements and form the overall image of the map.<\/p>\n

But little details also influence the perception of a map.<\/p>\n

In London, the black rings of the transfer stations are noticeably thinner than the lines. The “corridors” are of the same width. The stations’ ticks are square, stick out at 2\/3 of a line’s width. The names are typeset with blue New Johnston:<\/p>\n

\n\"Transport\n<\/div>\n

In Moscow, the fat rings of the transfers are coloured with their line’s colour. The “corridors” are much thinner and have a gradient. Some transfers are circular. The station ticks stick out at full line’s width. The names are typeset with black Moscow Sans:<\/p>\n

\n\"Transport\n<\/div>\n

Look at this tram map:<\/p>\n

\n\"London\n<\/div>\n

It’s obvious that it’s a London tram map, not some other one. It follows the London transport graphic design standards — the rings, the ticks, the captions.<\/p>\n

When we see the beige background, the particular palette of the lines, the filled station disks and the distinct designation of the transfers, we immediately recognise the Paris map:<\/p>\n

\n\"Transport\n<\/div>\n

Jug Cerović follows an unusual 18-degree angle grid in his Luxembourg map. If you saw it once, you recognise it every time:<\/p>\n

\n\"Transport\n<\/div>\n

For the Chelyabinsk trams map<\/a> we’ve come up with these 3D terminals:<\/p>\n

\n\"Transport\n<\/div>\n

Why are they like this? The only reason is that we wanted this map to look special.<\/p>\n

It is not enough for a good transport map to just answer the question “how to get there”. Since it is used everywhere, it is part of a city’s image. And if its design is powerful, it influences the city in other ways.<\/p>\n

The Moscow’s Circle line in has inspired designers to create these beautiful wayfinding steles:<\/p>\n

\n\"Transport\n<\/div>\n

The round designations of the New York subway train routes are used in all the signage and have even made it to the dots above i in the pedestrian city maps (in the classic Helvetica these dots are rectangles):<\/p>\n

\n\"Transport\n<\/div>\n

And in London, the Tube Map has given birth to the graphical language of all the transport-related signage:<\/p>\n

\n\"Transport\n<\/div>\n

This graphical language is so iconic that you can even buy all sorts of souvenirs with its elements: t-shirts, umbrellas, shower curtains. This design has spread not only beyond the Tube, but beyond London. There are all sorts of maps done in this style:<\/p>\n

\n\"Transport\n
A playful depiction of cities listed in Mark Ovenden’s “Transit Maps of the World” book<\/div>\n<\/div>\n

Strong graphic design of the transport systems makes them more attractive. This helps cities get rid of private cars. People spend more time outside, interact with each other. This gives small businesses a boost and makes cities more pleasant to live in.<\/p>\n", "summary": "In part 1 I’ve covered the difference between the Beck’s London underground map, our Ekaterinburg metro map, and the Vignelli’s and Hertz’s maps of New York subway", "date_published": "2017-05-18T11:50:04+03:00", "date_modified": "2018-08-31T17:39:21+03:00", "tags": [ "design", "maps", "transportation" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-chel-terminal.png", "_date_published_rfc2822": "Thu, 18 May 2017 11:50:04 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "270", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-chel-terminal.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-moscow-square.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-moscow-circle.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-london-circle.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-detail-london.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-detail-moscow.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-tramlink.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-paris-fragment.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-luxembourg-inat.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-chel-terminal.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-kuzmost-circle.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-walk-nyc-i.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-tfl-posters.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/transport-map-design-cities.jpg" ] } }, { "id": "266", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/transport-map-design-part-2\/", "title": "Transport map design. Part 2", "content_html": "

In the first part<\/a> I’ve covered the difference between the Beck’s London underground map, our Ekaterinburg metro map, and the Vignelli’s and Hertz’s maps of New York subway. But even the maps that appear to be much more alike in principle, have many little details to serve their cities’ needs.<\/p>\n

On stations, there are tracks for opposing directions. In some cities, these tracks are marked with the names of a line’s terminals. Barcelona:<\/p>\n

\n\"\"\n<\/div>\n

The terminals are thus important for wayfinding, so they have to be emphasised on a map. In Barcelona, they put the terminals’ names on a background, whose colour matches the line’s:<\/p>\n

\n\"\"\n<\/div>\n

In Paris, they use bold font and put line number symbols:<\/p>\n

\n\"\"\n<\/div>\n

This is unnecessary in London, where instead of toponymics they use geographic directions (i.e. “Northbound”).<\/p>\n

In Oslo, a thick wisp of lines passes through the city centre. One of the lines forms a loop and passes several stations twice: first as line 4, and then as line 6. The transformation from 4 to 6 is shown with a gradient — not a typical element indeed:<\/p>\n

\n\"\"\n<\/div>\n

There is another detail in Oslo: the trains pass the Gulleråsen station only in one direction. This requires a designation, an element that was not used in any of the maps we’ve discussed above:<\/p>\n

\n\"\"\n<\/div>\n

Moscow has its own peculiarity: for historical reasons, the stations have different names on different lines (sick, but what can you do). In addition, the Moscow metro map has to use both Cyrillic and Latin scripts for its station names. Depiction of transfers turns into a problem. Here, eight<\/i> names should be positioned around the “Biblioteka imeni Lenina — Aleksandrovsky sad — Arbatskaya — Borovitskaya” junction, where four lines intersect:<\/p>\n

\n\"\"\n
Fragment of the official map. This place looks cleaner in my design<\/a><\/div>\n<\/div>\n

A whopping six lines intersect at London’s “King’s Cross St. Pancras” station; just one name suffices:<\/p>\n

\n\"\"\n<\/div>\n

There is not a single place on the giant London map where a station name intersects a line — there is always space around the lines. To achieve this in Moscow, one would need to dramatically reduce the font size and complicate the line geometry. That’s why Moscow metro map includes a device the London one does not: a transparent plaque for the station names crossing lines (see above).<\/p>\n

But London has its own complication absent in Moscow. The grey “clouds” designate the payment zones — something Moscow does not need since the price of a ride is fixed:<\/p>\n

\n\"\"\n<\/div>\n

Every city and transport network has lots of details which make it impossible to use the same exact graphical principles everywhere. But there is another reason for maps to be so different, which I will cover next time<\/a>.<\/p>\n", "summary": "In the first part I’ve covered the difference between the Beck’s London underground map, our Ekaterinburg metro map, and the Vignelli’s and Hertz’s maps of New York subway", "date_published": "2017-04-20T00:25:05+03:00", "date_modified": "2017-06-11T17:39:47+03:00", "tags": [ "design", "maps", "transportation" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/barcelona-la-pau-IMG_5972.jpg", "_date_published_rfc2822": "Thu, 20 Apr 2017 00:25:05 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "266", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/barcelona-la-pau-IMG_5972.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/barcelona-terminals.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/paris-terminals.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/oslo-loop.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/oslo-dir.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/bil.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/kc.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/london-mini.jpg" ] } }, { "id": "257", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/transport-map-design-part-1\/", "title": "Transport map design. Part 1", "content_html": "

For many people, a map of a transport network is a given, an expected part of a system, something that just is<\/i> — like a fire escape plan in a building. So when I say that I design transport maps, they don’t understand. What is there to design, even?<\/p>\n

The London underground map by Harry Beck was the world’s first transport map to use the principles of electrical circuit drawings:<\/p>\n

\n\"Transport\n<\/div>\n

All line segments were put to the angles of 45° and 90°. The distances between stations were equalised. I wrote about it in part three of my “Maps and reality” series, Diagrams<\/a>.<\/p>\n

This schematic approach was later adopted by many transport maps of the world. But not every time was this a good idea. This is one useless map (Samara, Russia):<\/p>\n

\n\"\"\n<\/div>\n

It adds almost nothing to just listing the stations:<\/p>\n

\n

Алабинская · Российская · Московская · Гагаринская · Спортивная · Советская…<\/p>\n<\/blockquote>\n

Beck’s design dealt with growing complexity and spread of London underground rail network. When there is just one line, it’s better to put this line in context. See our Ekaterinburg metro map<\/a>, for example:<\/p>\n

\n\n\"Ekaterinburg\n<\/a><\/div>\n

Every transport network requires a specialised solution.<\/p>\n

Let’s look at New York. The subway is large and complicated, but quite different from London: trains can have different routes, which are denoted by both numbers and letters. In 1972, Massimo Vignelli designed this map:<\/p>\n

\n\"\"\n<\/div>\n

In London, ticks are used to depict stations:<\/p>\n

\n\"\"\n<\/div>\n

Vignelli couldn’t have used them in New York. In London, lines rarely run together through the same stations. And when they do, all trains in a “wisp” stop at all of them — see Great Portland Street and Euston Square above.<\/p>\n

In New York, such wisps are everywhere, and some trains don’t stop at some stations. So when there is a stop on a particular route, Vignelli puts a black bullet in the route’s line:<\/p>\n

\n\"\"\n<\/div>\n

You can see that at some stations, not every line has a bullet.<\/p>\n

Vignelli’s map was beautiful, but, unfortunately, unsuccessful. People considered it too abstract. Having no geographical reference, the eye had nothing to catch on. Also, the stations named with street numbers looked identical — the font was just too small for that.<\/p>\n

This design was the closest to London’s that New York has ever seen.<\/p>\n

The successful design was the one by Michel Hertz (1979) — still in use. It includes parks, ponds, main streets and areas names:<\/p>\n

\n\"\"\n
Illustration from an interview with Michel Hertz<\/a><\/div>\n<\/div>\n

The related routes are denoted with just one line, not a wisp:<\/p>\n

\n\"\"\n<\/div>\n

But there’s a list of stopping routes at each station. Look at the red line, for example. Only route 1 stops at 18, 23 and 28 st., but all routes stop at 14 and 34 st.<\/p>\n

Hertz wanted his map to look geographical. But he knew that a “true” map would use the format very inefficiently. So his map is actually distorted significantly for everything to fit. Google Maps on the left, Hertz’s map on the right:<\/p>\n

\n\"\"\n<\/div>\n

Hertz’s map doesn’t look stylish. But it has proven to work well. This is a very specific, bulletproof design tailored to New York.<\/p>\n

Continued<\/a><\/p>\n", "summary": "For many people, a map of a transport network is a given, an expected part of a system, something that just is — like a fire escape plan in a building", "date_published": "2017-04-12T02:54:09+03:00", "date_modified": "2017-06-21T23:05:49+03:00", "tags": [ "design", "maps", "transportation" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/puchok-london.jpg", "_date_published_rfc2822": "Wed, 12 Apr 2017 02:54:09 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "257", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/puchok-london.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/london-mini.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/lu1933-over.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/samara.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/lu1933.gif", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/samara.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/ekaterinburg-metro-map-2017@fx.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/vignelli.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/london-wisp.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/vignelli-fragment.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/hertz-fragment.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/ny-fragment.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nymetro-compare.jpg" ] } }, { "id": "252", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/ui-ux\/", "title": "Why I don’t call myself a “UI\/UX” designer", "content_html": "

Many of the things I do are considered a job of a “UI\/UX” designer. But I haven’t ever called myself one.<\/p>\n

That’s because the term “UI\/UX” is badly designed: it’s tasteless and vague.<\/p>\n

Tasteless<\/h2>\n

The abbreviations are used in science and tech, but when normal people talk, abbreviations are out of place. A good user interface is humane.<\/p>\n

The way this abbreviation is constructed is wacky. First, it includes the word “user” twice. The good designer would not put a word twice where once would suffice. Second, it abbreviates “experience” with X instead of E. This comes from cheap marketing, where X used to sound “cool” and “trendy”. When a designer uses it, I feel like they disrespect the user and have shallow knowledge.<\/p>\n

Vague<\/h2>\n

There’s a “\/” in the middle, whose meaning is unclear. A slash usually implies an exclusive or<\/i>. So does this mean “UI or UX, but not both”?<\/p>\n

Good writers use conjunctions, not slashes. A slash is a way to slam two pieces together without thinking what sense the combination makes. This is not how you design a good user interface though.<\/p>\n

The lack of taste and inability to communicate well are not the qualities of a good designer.<\/p>\n

See also: Guy English on UX<\/a><\/p>\n", "summary": "Many of the things I do are considered a job of a “UI\/UX” designer. But I haven’t ever called myself one", "date_published": "2017-02-09T23:33:48+03:00", "date_modified": "2017-06-04T14:28:31+03:00", "tags": [ "design", "language", "myself", "work" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/ui-ux-cover.png", "_date_published_rfc2822": "Thu, 09 Feb 2017 23:33:48 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "252", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/ui-ux-cover.png" ] } }, { "id": "249", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/the-design-of-iphone-7\/", "title": "The design of the iPhone 7", "content_html": "

Somehow it’s become a common knowledge that the design of the iPhone 7 is almost the same as the design of the iPhone 6. This boggles my mind.<\/p>\n

How can you not see that the iPhones 6 and 7 are the most<\/i> different iPhones in the history of iPhones? The iPhone 6 is the ugliest iPhone ever created. The iPhone 7 is the most beautiful iPhone ever created.<\/p>\n

This is the original iPhone:<\/p>\n

\n\"Original\n<\/div>\n

It was beautiful. Everything was perfectly aligned. It would be better without the black stripe on the bottom, but it had to be there for the antennas to work.<\/p>\n

iPhones 3G and 3Gs were worse:<\/p>\n

\n\"iPhones\n<\/div>\n

They looked fine in pictures, but were plastic, felt cheap and often cracked.<\/p>\n

Then there were the iPhones 4 and 4s:<\/p>\n

\n\"iPhone\n<\/div>\n

These were special. They didn’t look nice in pictures, but were very attractive in person. The antenna lines bugged me a lot, but overall these were good ones. The glass back was really cool (I don’t break my phones).<\/p>\n

Since then, things went downhill. The iPhones 5 and 5s were ugly:<\/p>\n

\n\"iPhone\n<\/div>\n

The black stripes, unlike on the original iPhone, were completely out of place. The camera was misaligned.<\/p>\n

I wrote about it in The hope for a beautiful iPhone<\/a>.<\/p>\n

Then came the iPhones 6 and 6s, painfully ugly:<\/p>\n

\n\"iPhone\n<\/div>\n

The camera was not aligned with anything and sticked out. The rubber stripes were all over the back. How was this even possible? Imagine somebody showing it to you in 2008, after you’ve seen the first iPhones. You wouldn’t believe Apple would have shipped such a device.<\/p>\n

Definitely, these were the ugliest iPhones ever built.<\/p>\n

And then Apple showed the iPhone 7:<\/p>\n

\n\"iPhone\n<\/div>\n

Image from wylsa.com<\/p>\n<\/div>

How can you even compare it to the 6? This one is finally<\/i> beautiful, after several years of ugliness. The camera is aligned with the phone’s corner, for the first time after the iPhone 4! It still sticks out, but this time the phone is designed with this in mind. It’s not slapped on top of an unexpecting phone; it’s there because it was meant to be there. The same for the antenna lines: they are part of the design, not some crap put on top because it had to be.<\/p>\n

This is the first iPhone in years that you can enjoy just looking at. And unlike the iPhone 4, it looks great from every angle. It’s the opposite of the iPhones 6.<\/p>\n", "summary": "Somehow it’s become a common knowledge that the design of the iPhone 7 is almost the same as the design of the iPhone 6", "date_published": "2017-01-11T17:53:52+03:00", "date_modified": "2017-01-11T19:06:15+03:00", "tags": [ "design", "iPhone" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/iphone-original@2x.jpg", "_date_published_rfc2822": "Wed, 11 Jan 2017 17:53:52 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "249", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/iphone-original@2x.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/iphone-3g@2x.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/iphone-4@2x.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/iphone-5@2x.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/iphone-6@2x.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/iphone-7.jpg" ] } }, { "id": "232", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/moscow-metro-2016\/", "title": "Fifth version of the Moscow Metro map", "content_html": "

I made my first Moscow metro map in 2007. The official map was disgusting then, but nobody cared. My work inspired many designers to try to design their own map. I know several designers who gave up after they’ve appreciated how hard the task actually was. I had two major revisions of my map including the one for the official 2013 competition for the new map to be used on the system. In that version I’ve solved the problem of the Biblioteka imeni Lenina<\/i> junction and invented the Compass (more on that on the 2013 map’s page in my portfolio<\/a>). I took the second place. It took most of the 2015 to design the next version of the map: it used space more efficiently and the overall graphical design was improved.<\/p>\n

Here is the new version, with the new Circle Railway (Line 14) added:<\/p>\n

\n\n\"Fifth\n<\/a><\/div>\n

Compared to the official map, this map has almost 35% larger font when printed as same-size poster:<\/p>\n

\n\"Fifth\n<\/div>\n

See the project page<\/a> for detail.<\/p>\n", "summary": "I made my first Moscow metro map in 2007. The official map was disgusting then, but nobody cared. My work inspired many designers to try to design their own map", "date_published": "2016-09-05T17:56:24+03:00", "date_modified": "2016-09-05T17:56:04+03:00", "tags": [ "design", "moscow metro", "projects" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/mosmetro-map-2016-5.130@fx.png", "_date_published_rfc2822": "Mon, 05 Sep 2016 17:56:24 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "232", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/mosmetro-map-2016-5.130@fx.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/mosmetro-map-2016-font-size@2x.png" ] } }, { "id": "230", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/moscow-metro-process-3-to-4\/", "title": "The transformation of Moscow Metro map from version 3 to version 4", "content_html": "

I’ve made a video showing how my Moscow Metro map transformed from version 3<\/a> to version 4<\/a>:<\/p>\n

After the video has loaded (16 MB), you can scrub it.<\/p>\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
0:00<\/td>\n Changes inside the Circle and on the west<\/td>\n <\/tr>\n
0:02<\/td>\n Font size grows<\/td>\n <\/tr>\n
0:05<\/td>\n Font size grows<\/td>\n <\/tr>\n
0:10<\/td>\n The Circle becomes smaller<\/td>\n <\/tr>\n
0:14<\/td>\n Yellow line appears on the west<\/td>\n <\/tr>\n
0:15<\/td>\n The grid becomes narrower<\/td>\n <\/tr>\n
0:16<\/td>\n The northern and southern grids decouple<\/td>\n <\/tr>\n
0:22<\/td>\n Finding the right corner rounding<\/td>\n <\/tr>\n
0:24<\/td>\n Changes on the west<\/td>\n <\/tr>\n
0:27<\/td>\n Preparing the north to adding the monorail<\/td>\n <\/tr>\n
0:33<\/td>\n Butovskaya line on the south, monorail<\/td>\n <\/tr>\n
0:34<\/td>\n Even distribution inside the Circle<\/td>\n <\/tr>\n
0:36<\/td>\n It’s hard to position the Tretykoskaya and Novokuznetskaya stations well<\/td>\n <\/tr>\n
0:42<\/td>\n Transfers become bigger<\/td>\n <\/tr>\n
0:44<\/td>\n Font size grows<\/td>\n <\/tr>\n
0:47<\/td>\n Font size grows<\/td>\n <\/tr>\n
0:48<\/td>\n The northern and southern grids reunite<\/td>\n <\/tr>\n
0:54<\/td>\n The font changes to PT Sans Metro<\/td>\n <\/tr>\n
0:57<\/td>\n Transfers become nicer<\/td>\n <\/tr>\n
0:59<\/td>\n Adjusting the distances<\/td>\n <\/tr>\n
1:05<\/td>\n Layout...<\/td>\n <\/tr>\n<\/table>\n", "summary": "I’ve made a video showing how my Moscow Metro map transformed from version 3 to version 4", "date_published": "2016-08-18T22:15:01+03:00", "date_modified": "2016-08-18T22:14:57+03:00", "tags": [ "design", "moscow metro" ], "_date_published_rfc2822": "Thu, 18 Aug 2016 22:15:01 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "230", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } }, { "id": "229", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/buy-works\/", "title": "The “Buy” button should always work", "content_html": "

Here is one lesson I have learnt working on Envy, a cool Hawaiian car rental<\/a>.<\/p>\n

On a car page, there is a yellow price tag with a “Rent” button:<\/p>\n

\n\"The\n<\/div>\n

A typical way to get to this page is the following. On the front page a client chooses the desired rent dates, clicks “Find”, then selects from available cars. It is possible though, that by the time the client selects a car, somebody else books it already. Or the client reloads the car page in a couple of days, and the car is gone. One way or the other, a client can end up on the car page with the pre-selected rent dates, for which the car is no longer available, and they won’t be able to rent it.<\/p>\n

Also, on the front page we show the best cars we have. A client can click any of them and get to its page, having skipped the dates selection altogether. In this case, the dates won’t be specified, and the client also won’t be able to rent the car. We didn’t want the client to be confused by the disabled “Rent” button, so in addition to the front page, we put the dates selectors to this price tag itself.<\/p>\n

I presented the design of the car page to Ilya Sinelnikov (co-creator of Envy) and was talking about the price tag.<\/p>\n

I said, we didn’t like that the “Rent” button is disabled sometimes: the website is there for the people to rent cars. But how can you rent a car which is taken by someöne else? At first, we thought that we could automatically change the dates to the nearest available ones. But it can result in a disaster: what if the client doesn’t notice the change, pays for the rent, comes to pick-up the car, and learns that we don’t have it? I said, we were also thinking about some tool to explain the problem and help the client change the dates, but there was no chance to make it on time for the website launch. So, I said, for now I suggest just disabling “Rent” the button in this case.<\/p>\n

Also, I said, a car could become unavailable while the clients looks at its page. Therefore we needed to re-check the availability after the “Rent” button is pressed, and inform the client of a problem, if it occurs. For now, I said, we’ve designed this error page. In the future it would be better to suggest a date change or offer another car. But this is also not going to be implemented by launch...<\/p>\n

Ilya interrupts: “To hell with the dates, let’s just make the button always enabled.”<\/p>\n

What? There can be no car for the client when they come.<\/p>\n

“The client is willing to pay us money”, Ilya says, “and you prevent them from it by disabling the button. This is inefficient. Let them pay, and we’ll sort it out”.<\/p>\n

And then Ilya enlightens me. Envy as a business must be able to sort this out anyway. It is possible that a booked car is not available for the client, say, if the previous client breaks it, or whatever. In order to make the client happy, Envy offers them a better car for the same price.<\/p>\n

For Ilya, it all appeared as if I was trying to stop his client from paying him money with my UI. But from the business perspective my UI consistency hurdles are insignificant. Dates have accidentally overlapped? Oops, sorry, here’s a Mercedes instead of a Ford, no big deal. In the worst case, if there’s a super-picky client who won’t take anything<\/i> but the very car they’ve chosen on the website, we’ll return the money and apologise.<\/p>\n

So we made the “Rent” button always enabled. If by the time the client clicks it, the car becomes unavailable for the selected dates, the manager gets a notification about a problem, and it is their job then to contact the client and agree on a new car or dates. And if the dates are not selected at all, clicking “Rent” moves the focus to the dates fields and opens the calendar<\/a>, so that the client knows what to do.<\/p>\n

Principle:<\/b> the “Buy” button should always work.<\/p>\n", "summary": "Here is one lesson I have learnt working on Envy, a cool Hawaiian car rental", "date_published": "2016-08-12T01:35:27+03:00", "date_modified": "2024-05-20T10:42:03+03:00", "tags": [ "Bureau", "design", "service design", "web", "work" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/envy-rent-always.jpg", "_date_published_rfc2822": "Fri, 12 Aug 2016 01:35:27 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "229", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/envy-rent-always.jpg" ] } }, { "id": "228", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/envy-calendar\/", "title": "Envy.rent calendar", "content_html": "

We have recently published the work we have done for Envy.rent, a cool Hawaiian car rental:<\/p>\n