Design 

Why I don’t call myself a “UI/UX” designer 

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

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

Tasteless

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

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.

Vague

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

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.

The lack of taste and inability to communicate well are not the qualities of a good designer.

   
Feb 10   design   language   myself   work

The design of the iPhone 7 

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.

How can you not see that the iPhones 6 and 7 are the most 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.

This is the original iPhone:

Original iPhone

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.

iPhones 3G and 3Gs were worse:

iPhones 3G and 3Gs

They looked fine in pictures, but were plastic, felt cheap and often cracked.

Then there were the iPhones 4 and 4s:

iPhone 4

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).

Since then, things went downhill. The iPhones 5 and 5s were ugly:

iPhone 5

The black stripes, unlike on the original iPhone, were completely out of place. The camera was misaligned.

I wrote about it in The hope for a beautiful iPhone.

Then came the iPhones 6 and 6s, painfully ugly:

iPhone 6

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.

Definitely, these were the ugliest iPhones ever built.

And then Apple showed the iPhone 7:

iPhone 7

Image from wylsa.com

How can you even compare it to the 6? This one is finally 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.

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.

   
Jan 11   design   iPhone

Fifth version of the Moscow Metro map 

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 junction and invented the Compass (more on that on the 2013 map’s page in my portfolio). 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.

Here is the new version, with the new Circle Railway (Line 14) added:

Compared to the official map, this map has almost 35% larger font when printed as same-size poster:

Fifth version of the Moscow Metro map

See the project page for detail.

   
2016   design   moscow metro   projects

The transformation of Moscow Metro map from version 3 to version 4 

I’ve made a video showing how my Moscow Metro map transformed from version 3 to version 4:



After the video has loaded (16 MB), you can scrub it.

0:00 Changes inside the Circle and on the west
0:02 Font size grows
0:05 Font size grows
0:10 The Circle becomes smaller
0:14 Yellow line appears on the west
0:15 The grid becomes narrower
0:16 The northern and southern grids decouple
0:22 Finding the right corner rounding
0:24 Changes on the west
0:27 Preparing the north to adding the monorail
0:33 Butovskaya line on the south, monorail
0:34 Even distribution inside the Circle
0:36 It’s hard to position the Tretykoskaya and Novokuznetskaya stations well
0:42 Transfers become bigger
0:44 Font size grows
0:47 Font size grows
0:48 The northern and southern grids reunite
0:54 The font changes to PT Sans Metro
0:57 Transfers become nicer
0:59 Adjusting the distances
1:05 Layout...
   
2016   design   moscow metro

The “Buy” button should always work 

Here is one lesson I have learnt working on Envy, a cool Hawaiian car rental.

On a car page, there is a yellow price tag with a “Rent” button:

The “Buy” button should always work

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.

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.

I presented the design of the car page to Ilya Sinelnikov (co-creator of Envy) and was talking about the price tag.

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.

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...

Ilya interrupts: “To hell with the dates, let’s just make the button always enabled.”

What? There can be no car for the client when they come.

“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”.

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.

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 but the very car they’ve chosen on the website, we’ll return the money and apologise.

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, so that the client knows what to do.

Principle: the “Buy” button should always work.

   
2016   Bureau   design   service design   web   work

Envy.rent calendar 

We have recently published the work we have done for Envy.rent, a cool Hawaiian car rental:

Check it out.

Here is one detail that brings me joy. It’s the calendar where the client selects the rent dates:

Notice how the sticky part works. The heading moves up and fades out, the weekdays come to stop, and the ruler under the weekdays stretches to touch the edges, thus separating the sticky part from the moving part. There is also a nice time slider.

The calendars for start and end dates drop down simultaneously. This is counter-intuitive, but very convenient.

   
2016   design   user interface   work

Karaoke button 

In user interface design, we define a Karaoke button as a button which exists solely to highlight the existence of some feature, often a gimmicky one. The button is visible on a product pictures or screenshots, so it’s more likely that the users will notice it and buy the product.

The Karaoke button

QuickShare, an example of a Karaoke button

Since Karaoke buttons do not solve any user problem, they do not make a product better. Actually, sometimes they make it worse, for they occupy space which could have been used better. But apparently they help sell the product.

On top of that, a particular class of Karaoke buttons is worse still: those that make product universally better when you press them. An example would be my air conditioner’s Quiet button. If it’s technically possible to do the same job quietly, why not just do it so all the time?

   
2016   design   user interface

The story behind the Ekaterinburg metro map 

Check out my post about the Ekaterinburg metro map for Smashing Magazine.

A large metropolitan underground train network might as well be a teleportation device: People don’t care how it gets them from A to B, just that it does. In London, Paris and Moscow, the map of the metro does not show surface geography, because there is not much empty space on the sheet.

The whole design process in detail.

   
2016   design

The fourth version of Moscow metro map 

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 junction and invented the Compass (more on that on the 2013 map’s page in my portfolio). I took the second place.

In the beginning of 2015 I saw many ways to make my map better. I wanted to use the space more efficiently and to improve the graphical design: remove the dirty gradients and pseudo-realistic shadows, use beautiful peanut-like transfers that I imagined. It took most of the 2015 to design the new map.

Here it is:

I like it on every level, it’s beautiful. I’ve spent much time to perfect the overall shape, the graphical rhythm, the relationships between the widths of the lines, ticks and circles. Inside the Circle line, I’ve found the most even distribution of captions and white space. This not only looks calm and unforced, but also makes possible a significant font size increase as the space is never lost.

I also had to engineer a special version of the PT Sans font for the map. I used PT Sans in the previous version and I like it. But it has a problem: the capital letters are too high. When you have a multi-line caption, you have to make its line height quite large, which is hindrance when you strive for density. So I had to create a version of PT Sans with lower capitals and slightly less prominent accents specially for the map. Thanks to Anna Danilova for help with this.

Go see the new map’s page in my portfolio. There you can also download a PDF to see the map in detail. Don’t forget to share.

   
2016   design   moscow metro   projects

Hand holding as a web design approach 

To create a successful web page about a product, try hand holding. In addition to saying what product you have, help the reader start using it: explain, guide, convince, clarify, warn.

Let’s say you are a bank and a you have a page about your savings account options. There are people who don’t know what deposits are or why they might want one. Others are afraid of having large amounts of cash on them and don’t want to go to the bank with it. Or they are just unsure which office to go to, what documents to have and how long the thing will take. Your job is to alleviate their anxiety, to raise their self-confidence and to help them make an informed choice. To get clients, help people become clients by hand holding. Explain why a deposit may be useful. Visualise the interest rate. Say how to transfer the money online from another bank. Show the nearest office on the map (include the business hours). Publish the contract with useful comments on the margins. Acquaint the reader with your managers.

Or suppose you install windows and you have a page with options for fittings and glass coating. Well, most people have no idea on how windows are installed. Or even what elements they consist of. What should I consider before ordering windows? How to gauge a window opening? Who will disassemble the old windows? How long will it take to do the whole house? Can this be done in winter? What if a new window does not fit? Can I pay with a Visa? To get clients, help people become clients by hand holding. Explain the whole process from step one to step done. Connect the options to real-life cases (the inner windowsill for kitchen could be made of a heat-resistant material). Say in advance what can go wrong and how to avoid it. Publish the contract with useful comments on the margins. Acquaint the reader with your managers.

Or maybe you are a web hosting provider and you have a page that lists services, plans and options. This may be good for an experienced web administrator. But if someone makes their first website, they probably don’t even know that a domain name and web hosting are separate services. They have no idea if they need CGI, SSL or mod_whatever. They have no clue how to make email work. To get clients, help people become clients by hand holding. Help them figure out which set of services will fit them depending on why they came. Explain what steps are necessary from subscribing to a hosting service to opening the website. Help understand and configure DNS, choose and set up an FTP-client. Publish the contract with useful comments on the margins. Acquaint the reader with your support team.

Yes, the answers can be found online. But if you rely on that, you didn’t do your job well. Your website should work like an experienced and attentive manager, not like an indifferent price tag.

Many people suffer from professional deformation: they think everybody understand their technical terms and work principles. I’ve even heard an opinion that such “hand holding” shows disrespect to a client by treating them like a child.

This is an error. Everybody likes feeling taken care of. If your hand holding feels patronising, your are just not caring sincerely enough.

   
2015   design   service design   web
Ctrl + ↓ Earlier