User interface

Later Ctrl + ↑

Designing the “Badge” feature for Sayve

In Sayve 1.3, we added the ability to display a badge with the number of unsorted audio recordings:

Designing the “Badge” feature for Sayve

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.

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

This is going to be a long and boring post, by the way.

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.

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

Sayve First launch

This prepares the user for the system questions and helps us get a “Yes”. Microphone:

iOS asks for microphone permission for Sayve

Speech recognition:

iOS asks for speech recognition permission for Sayve

Notice that we can also add some of our own text in these dialogs to explain why we are asking for these permissions.

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

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:

Open Settings

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.

We could go and add a Settings screen just for this one setting. See how this is getting complicated?

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:

Sayve Settings

Let’s just display a badge when the user has enabled notifications. And we could explain this option in the app’s description.

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:

iOS asks for notifications permission for Sayve

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

But this is not something we can change: the question is asked by iOS, not us.

So we added this icon to the top right corner:

Sayve badge icon

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.

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 the user if they want a badge, we must just tell them that the notification permission dialog will follow and it is there to display a badge if they want.

So, in 1.3, when you tap the icon in the top right corner, you’ll see:

Sayve talks about the badge

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.

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.

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.

We hope you like Sayve (we are Mihail Rubanov, the developer, and myself).

The button:

Get in the App Store

 50   2017   design   Sayve   user interface

The revolution in the mobile user interface

It’s about time to flip the mobile user interface vertically.

The revolution in the mobile user interface
I have no idea what language this is

It was easy to tap “Back” or “Edit” with your thumb on the original iPhone. On iPhone 5, it became harder. Since the 6, it’s almost impossible.

Apple has added two features to make things less bad. The first was a gesture where you slide from the left edge of the screen to get back. The second was Reachability, where you double tap the Home button to make everything on the screen shift down so you could reach the top row of buttons. This already felt like a duck tape fix.

The question is: why put buttons on top and then add obscure gesture to reach them when you could just put the buttons on the bottom in the first place?

Windows Phone has the browser’s address bar on the bottom:

 The revolution in the mobile user interface
On some screenshots it’s actually on top, so I’m not sure. Anyway, it should be on the bottom

Apple, when will you do the same?

It’s interesting that the revolution has already happened in Maps. Before and after:

 The revolution in the mobile user interface

The search field and results have moved to the bottom. Why did this change only in one app?

We’ve designed Sayve, the smart voice recorder so that all the important controls are reachable. A couple of intermediary user interface layouts:

 The revolution in the mobile user interface

At first, the audio controls were on top (the left layout). Then it moved down (the right layout).

Finally, all the user interface changed to gravitate towards the bottom:

 The revolution in the mobile user interface

I’m hopeful that Apple will do something similar throughout iOS 11.

When you turn the things upside-down, you may not like the result aesthetically at first. But our idea of what’s beautiful is largely formed by the technology.

The rule: in the mobile user interface, put the controls on the bottom.

 51   2017   iPhone   user interface

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.

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

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

 14   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:

 124   2016   iPhone   user interface

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.

 15   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?

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

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

 8   2015   user interface
Earlier Ctrl + ↓