User interface

Later Ctrl + ↑

Securige operator user interface

I’ve designed the UI for the panel protection program Securige. It’s a program where operators see if someone’s broken into your apartment and send the rapid response team if they have. That’s what it looks like:

My favourite moment of the project was when I was sitting at the operator’s post quietly (it was the condition to let me in), and the operators are like “if you have questions, just ask!”. And so I started asking. That’s where I’ve learned why the keyboard is almost never used. Otherwise I wouldn’t have come up with the Fitts-law-optimised search bar on the left.

Also, when I asked what irritated the most in the existing program, everyone said: “it’s fine”. But when I gave examples of possible improvements, they said: “wow, can this be done?”.

Very interesting project. A whole book on user interface can be written just on the examples from this one. Read a more detailed description.

2017   projects   user interface   work

User interface for Mimic 2.0

A web application’s front end (what the user sees) and back end (what happens on a remote server) are often developed separately. If the back end of some feature is not ready yet, the front-end developer is very limited in what they can do.

I’ve designed the user interface for Mimic 2.0, a web developer tool for mocking server responses in a browser. With Mimic, you can develop as if the server was alive. It’s very easy to set up a simple mock. Say, you want to pretend the server responds with a line of JSON:

It lets you set up very advanced mocks, adjusting HTTP headers, timeouts and what not:

The great thing about Mimic is that you don’t need to set up a local server and change request URIs in your application. It works with the existing applications as they are, right in the browser. And you don’t even need to install browser extensions: you just link one script to your application and that’s it.

Read more about the user interface on the project page.

2017   projects   user interface   web

UI Animations: four things

Here’s a video of my recent talk about UI Animations at AngularJS-IL meetup in Tel Aviv:

The video quality is not good because this wasn’t even meant to be recorded. I am lucky to have the video at all. Also, this was my first public talk in English — sorry about some slips.

2017   talks   user interface   video

Create a new contact or add to an existing one?

Boy do I hate this question:

Create a new contact or add to an existing one?

Sometimes I tap “Create New Contact” and end up with two records for one person. One with an email, one with a phone number. Turns out, I had this contact already.

Sometimes I tap “Add to Existing Contact” and end up not finding the person in the contact list. Turns out, I was wrong to believe I had had this contact already.

When I don’t remember for sure, I have to flip a coin. But why should I occupy my brain with this? For a programmer INSERT and UPDATE are different database queries. This purely technological difference degrades the user interface. It should be hidden from the user.

In most cases a computer knows a name and can at least suggest adding to a contact if it exists. But even if the name is unknown, just show a searchable contact list and a “+” button together. When I press “+”, put my search query into the contact name field.

Previously in the stupid questions series:

2016   iPhone   user interface calendar

We have recently published the work we have done for, 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

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
Earlier Ctrl + ↓