Selected

Later Ctrl + ↑

iOS 7, flat transparent toolbars and clarity

Let’s talk about iOS 7 — it clearly has not been covered enough lately.

The new flat transparent toolbars have a curious quality: they create a problem which Apple specifically says they are made to solve.

Apple says nothing should distract you from your content. The user interface should not get in the way. In iOS 6, the website you are looking at or an email you are reading are squeezed between the heavy and overly decorated toolbars. They dominate the view, says Apple.

So in iOS 7 they make the content and the chrome indistinguishable. Before, though the chrome was indeed heavy, I was able to filter it out, because it was so different than the content. But now everything looks the same. It is so much harder to focus on my content.

The new user interface gets in the way.

Group characters in password input fields

When you enter a password, Terminal does not show anything:

This is bad as you get no feedback from the computer.

Displaying a bullet for each character is much better:

No one can see your password, but you can be sure that your input is being received by the system.

But if you password is long and you want to count the bullets to make sure you have entered all the characters, this display may give you a hard time. In most cases if you are unsure it is easier to just erase everything and enter the password again.

This can be improved by grouping the characters visually:

Now it is obvious that the password is 23 characters long. If you password is 24, then you have missed a character.

Alternative design:

If this is used ubiquitously, users will think of their passwords as of groups of terms, which will possibly not only make them easier to enter, but also easier to remember.

Large click areas for small elements

All user interface designers should know and apply the Fiitts’s law. It says that the larger and the closer the target area is, the easier it is (i. e. takes less time) to reach it. Immediate corollary: make buttons big.

What is not so obvious is that instead of making an element bigger, you can just enlarge the click area. I do this with the main menu on my site.

If I did not care, the click zones could have been like this:

They are actually three times larger:

This makes the links so much easier to click.

As visual designers do not usually denote the click areas, this is a trick for web developers to know.

By the way, making click areas too large does not pay off, as the Fitts’s function is logarithmic.

Dealing with legal all-caps

Some lawyers think they should shout at their readers by using all-caps text — this is how they communicate the idea “this is important”. Here’s a fragment of some Apple document:

Why do lawyers use all-caps?

The lawyers do disservice to themselves: all-caps text is much harder to read than normal one. If you are a designer, you are responsible for this, but unfortunately changing it is often beyond your power. So here’s what you do when no one is looking:

Dealing with legal all-caps

And all-caps becomes small-caps:

Here is how you avoid legal all-caps

The text still stands out, but it no longer looks ugly and most importantly it is noticeably easier to read. We’ve used this trick in Getwear’s terms of use and other similar pages. See also: Typography for lawyers.

Timed modes

As you may know, modes are bad. Even worse are timed modes often used in the human interface of consumer electronics.

A mode is a state of user interface in which the same user action leads to the same result; in different modes, results of the same actions are different. Photoshop is famous for its exuberant use of modes: a click within an open image may do anything depending on what tool and options you have selected. The problem with modes is that you are not constantly aware of the current mode, which leads to errors: you want to draw a line, but accidentally create a gradient fill.

Now imagine a TV remote. Left-right buttons change volume and up-down buttons switch channels. These four buttons are also used for menu navigation. Now, when you are in the menu and you want to make the TV louder, you press the right button through habit. Unfortunatelly, now the button means “make screen aspect ratio wider”. The menu is not just a mode, it is a timed mode: if you don’t press anything for 10 seconds, the menu will be closed. If you are trying to set up this TV with a help of a user manual, you will be very frustrated: every time you look up the manual, the menu disappears and you have to start over.

Timed modes in a car UI are not just frustrating, but can also be dangerous. To change the audio bass level, you have to go to the menu, find the EQ settings, select “bass” and then adjust it with a knob. By the time you get to the necessary menu item, the traffic light turns green, so you have to postpone the adjustments until the next traffic light. Chances are, you will then need to navigate the menu again. If you know that the interface will not wait for you until the next traffic light, you will be forced to adjust bass while driving.

If you cannot avoid modes in your user interface altogether, at least don’t use timed modes. If I have changed my mind and don’t want to set up the TV or adjust the bass, I will just press cancel myself.

The Home button problem of iOS

When presenting the first iPhone, Steve Jobs said that the Home button “takes you home from wherever you are”. The button was a genius invention of Apple designers.

Unfortunately, in iOS 3.0 Apple has ruined it. Since then it takes you home from wherever you were — unless you are on the Home screen already, in which case it opens the Spotlight screen. Before that, the Home screen was the base of the user interface, it felt comfortable and stable, and the Home button got you there, no matter what. Now that the Home button switches you between Home and Spotlight, it no longer feels predictable and reliable.

My iPhone 4 is more than two years old. It runs iOS 6 quite slowly and the Home button is not registering clicks sometimes. So when I press Home and nothing happens, I press it again. Now, there are three possible outcomes: nothing happens again (the button failed twice); the Home screen appears (the button failed only the first time, lucky me); the Spotlight screen appears (the button has worked both times, but the phone was being too slow to react on time). There’s also a contact bounce problem: sometimes a single click is registered as a double click, and the app switcher gets displayed. This is such a pain in the ass! As you may have guessed, when I want to make a real double click, the outcome is completely random.

I want back the power and simplicity of Home button. I even suggest removing the double-click app switcher. First of all, there’s no reason for it to even exist. I can switch to any app by going to the Home screen and tapping its icon. But even if the switcher has to exist, let me go to it by dragging from the bottom, the way I open the Notification Center by dragging from top. Oh, and by the way, kill the freaking Notification Center. Well, this is a different story.

Online video and opening titles

Online video does not require an opening title.

On television, opening title is the only way to introduce a program. It alerts the viewers that the program is about to begin, giving them several seconds to make themselves comfortable in front of the TV.

On the Internet, the video is introduced by the content of the page it is on. There is already a title and in most cases even a description. And it’s up to user when to hit “Play”. When she does, there’s no point in alerting her, it just irritates her by delaying the show.

If video is made to be used on many different sites and thus needs some sort of title within itself, it’s always better to use a signature in the corner or on a plate which fades out shortly.

Wireless DJ with a setup guide

Together with Evgen Bodunov we’ve just released an update to Wireless DJ. The new version 1.5 includes a step-by-step setup guide. While Wireless DJ has always been the easiest iPad DJ controller to setup, it still required the user to do a couple of non-obvious things described on our website. This may have alienated some DJs.

Now the app itself guides the user through the setup process:

And we also have a special offer: for three days we sell Wireless DJ for only eight bucks instead of ten.

You should buy Wireless DJ in the App Store.

Tomorrow does not begin at midnight

What I hate about all calendar and reminder apps is that they think tomorrow starts at midnight. I mean, come on. Not everyone goes to bed before midnight. Even if your office hours end at 6pm, it doesn’t mean you never touch a computer before going to bed. And for many creative professionals midnight is time when they (and by “they” I mean “we”) actually work sitting in front of their computer.

It’s very frustrating to see 15 reminders come up on the screen at 00:00 saying that today you have such and such appointments and things to do. No, stupid, it’s not today, it’s tomorrow. The day starts when I wake up.

It’s quite misleading when you see an email you got at 11pm get labeled “Yesterday” in Mail. No, stupid, it’s not yesterday, it’s just an hour ago. The day ends when I go to bed.

The Notification Centre behaviour drives me nuts the most. Here’s how it works. Some reminder appears on the screen at daytime. I have no time to deal with it right now (obviously), and so I want to postpone it. NC only lets you postpone for 10 minutes, which is useless, so I alt+click the NC icon to shut it up (it’s a shortcut for Do Not Disturb). At 00:00 all the notifications reappear, but I don’t want to think about them at midnight, so I alt+click NC again. NC says that “alerts and banners will resume tomorrow”:

By “tomorrow” the stupid machine means “the next time it’s 00:00”, so in reality I will see no reminders tomorrow. Well, until just before going to bed. And I will just alt+click it, again.

I think there should be a system-wide setting of when “tomorrow” begins like there is a setting for when a week begins (did you know that in Russia Monday is the first day of week?). And this setting should default to something like 4am. For those who go to bed at 10pm or 11pm this will work fine: they will still see all the reminders when they wake up. And for people who are like me, this will make computers much more useful.

I should submit this whole post to Radar, I guess.

Redesigning Moscow Metro map

The current official Metro map looks like this (feel free to reorder the letters in the word “this”):

The official map has always been quite bad, but this design (debuted September, 2012) is just embarrassing. It made the indignation spread from designers to the regular people, which means the design is really, really poor. In November the Moscow Department of Transportation announced a design competition for a new Metro map. The deadline: end of December. The prize: your map in the carriages.

I’ve actually been working on Moscow Metro map since 2006, and have released the first version in 2007. At first I thought I would send them my old map, but it turned out to be a bad idea: every competing design should have included a number of features my map did not have (i. e.: having all station names repeated in English). Adding all the features to the old map wasn’t possible due to its design. So I had to come up with a new map in two months.

Here’s the design I proposed:

The competition has just finished, and unfortunately my design hadn’t won. I took the 2nd place among 37 competitors, losing only to Art. Lebedev Studio, the most well-known Russian design studio. By the way, the 3rd place was taken by the Russian International News Agency (RIA Novosti), one of the largest state-owned news agencies.

I’ve completed a “case study” page for this project, and would like to invite you to read it: Moscow Metro map.

I’ve also been blogging in Russian during the final stages of the competition. If you are any curious, I invite you to look through the posts. As I said, they are in Russian, but there are many pictures. It’s one of my most important design works.

Earlier Ctrl + ↓