User interface 

Ctrl + ↑ Later

Å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

The principle of one link 

Web services send notification emails. The links in such emails serve a sole purpose of bringing users back to the services’ websites. Therefore, there should always be exactly one link per such email. The flow: the receiver clicks the blue underlined text without even reading anything and ends up in the right place.

Example: an email to confirm registration by following a special link

Typical mistake (the links in the example don’t work, obviously):

Dear Ilya,

You have tried to sign up for the Exciting Service. To confirm your registration please follow the link. Make sure to subscribe to our blog to get the latest news and go try our great iPhone app!

Sincerely,
Exciting Service’s team

To take an action, I need to read and understand all the crap that the author has written here.

Here is the right way:

Ilya, confirm your registration:
Confirm and start using Exciting Service

Exciting Service

The right place to tell the user about the blog and the iPhone app is the website itself. You will have more room to talk about them, and the user will be much more motivated to check them out after he or she has completed the registration.

Example: an email to notify you about a shipped online order

Typical mistake:

Greeting from AwesomeBooks, dear customer Ilya!

You have ordered the book “How to Order Books Online” by James Writer (see your order history). The books has been shipped, and the tracking code is WTF4382430324.

Learn more about shipping and delivery, warranty and return policy. If you have any further questions, contact the support.

There are 0 items in your cart. Since you have bought the book “How to Order Books Online”, you might also be interested in “Underlining links: an essential design skill”, “What makes an email notification bad” and “What should one do if he cannot come up with a third stupid book name”.

Thank you very much!

Your AwesomeBooks

Notice how the only thing that interests me, the tracking code, is not a link.

Here is the right way:

Ilya, the book “How to Order Books Online” has shipped to you.
Track the delivery and see more recommendations

AwesomeBooks

The links leads to a page with tracking information, recommendations and all the service links.

It may seem hard to leave just one link in an email. What if you need both this and that? The solution is to change the approach: treat the whole email as a link. There is only one by definition. Ask yourself: “Where does this email lead?”, and it will all make sense.

Obviously, the principle is not applicable to email designed for reading and thus does not lead anywhere.

   
2013   design   service design   user interface
Ctrl + ↓ Earlier