User interface 

Ctrl + ↑ Later

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

Spacing separates, lines join 

People often draw lines to separate things. They should, instead, move the things apart.

Here is the Mac menu bar:

If you “separate” the items with lines, the effect will be the opposite:

   
2014   design   Mac   user interface
2014   quotes   user interface

The stupid “Compose New Message” Mail.app menu item 

Let’s say you’ve right-clicked the Mail.app’s dock icon and want to write a new mail:

Why, why is the menu item called “Compose New Message”? Why does it say “Compose”? No sane person would ever say: “Honey, I need to compose a message”.

In every other app on Earth there is no verb before “New”. Just “New Window” in Safari. Just “New Event” in Calendar. Heck, in iMessage it is just “New Message”. Who does Apple make me spend several seconds trying to find the line I need in Mail.app? This is one of those things you cannot get used to.

   
2014   Mac   rants   text   user interface

Why voice control is not the future 

Voice control is getting better and better. Siri understands the words I say quite well, and one day it will be good enough at understanding the meaning of those words, too. But even when it becomes as good as a human, it would still suck as user interface.

Just remember the last time you were trying to make a friend do something on a computer.

You just have to grab the mouse and do the damn thing yourself.

   
2014   design   user interface

Why and how to highlight hyperlinks on mouse hover 

Hyperlinks should be highlit on mouse hover. This provides feedback necessary for the user to feel that the element is clickable. It is equally good to highlight the borders of the images and other non-text elements. I use red as the highlight color, and it works well.

Interestingly, changing mouse pointer from an arrow to a hand is not quite enough. The pointer is my avatar on the screen, so changing it just reinforces the idea that I am aiming to click an element, not that the element is going to respond to my click.

Since CSS provided us with an easy way to add nice transitions to web pages, some designers have implemented fading in and out of the said highlight color. But using fade-in defeats the purpose of the effect: when an element’s color fades-in lazily on hover, the feeling of responsiveness disappears and a page starts to feel numb.

I use only the fade-out transition, i. e. instantly change an element’s color to red on hover, then gradually change it back to blue when mouse moves away. Here are some links to my previous posts to test the effect (will not work in your RSS readers, obviously):

   
2013   design   user interface

Delete at least the empty things without confirmation 

In The Humane Interface, Raskin explains that confirmations do not help prevent destructive actions, as people quickly form a habit of responding “Yes” to every “Are you sure?”. To protect the user’s data from their own mistakes, it is much more effective to implement the undo feature ubiquitously.

But if you are too lazy for that, at least check if the thing I am deleting is valuable. Adobe Lightroom is at least this smart: when you ask it to delete an empty folder, it does so stat. Apple’s Reminders, on the other hand, is very dumb: when you try to delete an empty list, it still wants to make sure you are sure.

   
2013   user interface
Ctrl + ↓ Earlier