User interface

Later Ctrl + ↑

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

Use without internet or use other network

Sometimes when you connect to a Wi-Fi network, a login window pops up, but it remains blank for a long time. So you give up and press Cancel. And you end up here:

Use without internet or use other network

This is the most frustrating menu in iOS. What am I supposed to do? First of all, I have just pressed Cancel and the system has ignored me. Instead of cancelling the process, it decided it should bother me with some additional questions.

As if it wasn’t bad enough already, the choice I am presented with makes no sense to me. There is no “Just Cancel” option. The Cancel button you see on the bottom will just Cancel the cancellation process I’ve initiated and get me back to the blank window. I don’t want to “Use Without Internet”: I need the Internet. I don’t want to “Use Other Network”: this is the only network available here. I just want to Cancel. Please? Just fucking leave me on 3G.

2016   iPhone   user interface

Don’t disable Undo after saving

There are programs where after saving an edited document you no longer have an Undo option. Ableton Live, for example, is guilty of this.

This is crazy. I don’t know what the developers of these programs are thinking, but this demonstrates a complete misunderstanding of the raison d’être of Undo.

Don’t do this.

2015   user interface

Save as Untitled-1.psd? Oops, no

It is 2015, and computers still suck. Here, Photoshop suggests saving a file as Untitled-1.psd:

Save as Untitled-1.psd?

I press Enter and get slammed in the face:

Oops, no

Hey, wasn’t that you who suggested the name? How about figuring out in advance that the name was occupied and suggesting, I don’t even know, Untitled-2.psd?

2015   Photoshop   user interface

Autocomplete with and without selection

The inventors of classical autocomplete cleverly used text selection to denote the suggested word remainder:

Autocomplete with selection

As you type, you overwrite the selection and the system updates the suggestion. If you press Enter, the whole text is submitted. If you press the right arrow, the suggestion remains in the field, unselected, and you can refine the input before submitting. This is how selection has always worked. There is no need to modify its behaviour for the suggested text.

This solution may seem obvious, but I’m not sure it came easy. At least, my first call would be to overload the text input with a support for a special kind of text: the suggestion. It would take an aha moment to figure out you could make do without it.

Still, recently it became common to show the suggestion as just grey text:

Autocomplete without a selection

This design is better aesthetically, but is not as elegant logically since it does indeed add an extra kind of text. It is also unclear whether the suggested part will be submitted with Enter or not.

One popular Russian classifieds website uses this design and frustrates me with its search. Say you type “sno” and it suggests “wboard” with grey text. You press Enter — and get no results for “sno”. The classical autocomplete would not do that to you.

It takes years for controls’ behavior to settle and become standard. So far, the implementations of this modern autocomplete design vary. But I suspect that you can recreate the classical behavior by just changing the selected text styles with CSS.

Alex Babaev, with whom we make Ångström, suggested that we switch to the modern autocomplete design, and so we did In a recent update:

Autocomplete in Ångström

Works the same, looks better.

2015   Ångström   user interface
2014   Apple   user interface

Stopping

When you cancel a Time Machine backup, it takes some time to stop:

Stopping Time Machine

Actions of programs have no inertia, they can be stopped immediately. If stopping something would leave a system in an inconsistent state, and you need to clean things up first, that’s what the user interface should say. But “Stopping” makes no sense. Just stop.

This problem is not uncommon, and I was thinking about writing a post about it for some time. But here is what happened recently. Mail in Yosemite Beta had already been “Disabling” my account by “Closing” something for several minutes, so I decided to cancel it — and got this:

Stopping Closing Disabling

I had to force quit it after a couple of minutes.

Added in August, 2016: And here, Dropbox is “Pausing”:

Dropbox Pausing
2014   rants   user interface

Ångström: the update animation

One of the objectives of the design of Ångström was getting the result as fast as possible. But we’ve confronted a problem with currencies: getting the current rates takes time.

We didn’t want to give up on immediate feedback. So we decided to show the result with the rates we have locally and use an approximate equality sign to hint at it:

Ångström: the update animation

While the currency rates were updated, a standard spinner spun in the phone’s statusbar. When the new rates were downloaded, we updated the result and replaced the sign with the strict equality one.

And then an idea came to our minds to make the process more fun: instead of showing a boring spinner, we have animated our equality sign. The wave oscillates during update, and when the data is loaded, its amplitude gradually decreases to zero:

Ångström: the update animation

This is how it shipped.

We like it how one element performs two functions: shows that the data is approximate and shows that the new data is coming. You don’t see this in the app often, as we periodically update the rates in the background, but it still appears sometimes if you are lucky.

2014   Ångström   design   user interface

Three states of a website menu item

A website menu item has three possible states.

Unselected:

Three states of a website menu item

We are not at “Swag” and can go there by clicking. The link is underlined, on hover it highlights and the cursor changes to a pointer, the link leads to the main page of the section.

Current:

Three states of a website menu item

We are at the main page of the “Swag” section. The text is put on a background, does not react in any way to hover or clicks.

Parent:

Three states of a website menu item

We are at one of the pages of the “Swag” section, but not on the main one. The link is put on a background and underlined, on hover it highlights and the cursor changes to a pointer, the link leads to the main page of the section.

This is an obvious and logical standard. Highlighting the current section with an underline or reloading on a click the page where the user already is, is an indication of a careless, unreasoned design.

2014   design   user interface

Immediate feedback when data is unavailable

Immediate feedback is one of the core principles of good user interface design. But what if the data is unavailable for the feedback?

When you increase the zoom level in Google Maps, you see the enlarged view of the data you had already downloaded:

And a couple of seconds later the view updates:

While blurry maps suck, having to wait for several seconds before seing anything would suck much more.

Another example would be Apple’s Safari on the first iPhone. The device had so little memory, it could not fit a whole webpage into it, so it had to render only the parts you were currently looking at. When you scrolled past the rendered area, you saw a checkerboard pattern:

And a couple of seconds later the page rendered:

While the pattern is not much fun to look at, this design is significantly better than if the browser would have to wait until the data was ready before responding to your touches.

Lesson learnt: when you cannot respond with a precise result immediately, show an approximation immediately, then the precise result a moment later.

2014   design   user interface
Earlier Ctrl + ↓