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:

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:

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.

A website menu item has three possible states.

Unselected:

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:

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:

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.

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

Ugly mail defames the sender. It may later occur that the sender was a good person, but life is unjust: a book is judged by its cover.

Examples of ugly mail

Random line breaks, an unwelcome line in bold with a blue highlight, multi-level colorful signature — the first thing you want to do is wash your hands:

Two long links, a fly in the middle, no signature:

Shapeless text, strangely split paragraphs, three links in random places:

Lines start with lower-case letters, the signature is enormous — only ten percent of the body are actual information:

This one is just hell:

How to make a mail neat

You don’t have to be a designer. Starting sentences with capital lettres and splitting it into paragraphs is something everyone is taught in school.

This one is pleasant to read:

So, little advice:

1. Break text into sentences. A sentence starts with a capital letter and ends with a period, question mark or, rarely, an exclamation point. Sentences are separated with a single space. Excessive use of ellipses and parentheses blur the sentences boundaries.
2. Separate paragraphs with an empty line. For a start, a simple rule will work: if you press Enter, press it once again. Do not break line if you are not going to start a new paragraph. Do not start a paragraph with a left indent (an email is not the same as a book). Paragraphs separated by empty lines and left-indented are the worst.
3. Do not put long links inside a block of text. When broken into lines, such a link looks particularly bad. It is better to give it a dedicated paragraph. Or it can cling to the previous or the following paragraph, if it has to do with it.
4. Do not include the whole history of correspondence. Quote only the part you reply to. Nobody likes to hunt for meaning. The shorter your mail is, the quicker you will get a response.
5. Make your signature short. Does everyone need to know some obscure instant messenger ID you have long abandoned? Probably not.
6. Lay out the signature in a clean way. A bad example would be separating the signature with a line of hyphens. Do not put the signature in a box, do not use a logo (sure, your logo is awesome). Do not colorize the text: any added color, including grey, adds clutter. Grey signature with blue links attracts attention, while the opposite is required.
7. Leave two empty lines before signature. It is the simplest and the most effective way to separate the signature without adding noise.

It amazes me how some people pursue neatness in places where it does not matter (like in how the store their bills or how things are laid out in a car trunk), but don’t care how they look daily on the screens of others.

I was lucky enough to take part in sailing Aeolian Islands in the beginning of June. Here they are:

My mind was blown by the amount of new things I’ve learned. In marinas there are special stubs with electricity and water. This helps when you need to charge your iPhone or swab your deck. This one is in Portorosa where we’ve chartered a boat:

As we arrived at a Vulcano bay, we’ve found that there was no marina. I thought we would have to sail to one of the other islands, but it turned out you could moor without a marina! Special buoys designate points with available mooring lines. You leave your boat a hundred meters into the sea and go to the island on a dinghy. We didn’t actually have to float our dinghy. Giovanni, a local with a motor boat, brought us to Vulcano:

A Vulcano sunset:

After several hours on the island, Giovanni takes us back “home”:

A Vulcano sunrise:

In Lipari, there was a marina with electricity, water and even free Wi-Fi:

The Wi-Fi came in handy: the night at Lipari was the night after WWDC and I was able to watch the Keynote.

Sailing to Salina:

All the doors have hooks to fix them open:

Our boat (the closest one) at Santa Marina Salina:

Clothes-pegs are very useful on a boat:

Here, two are used to fix my bathing trunks to a jibsheet:

We were planning to sail next to Stromboli, an active volcano. Unfortunately, there was not only no marina on Stromboli, there weren’t any mooring buoys either. The skipper explained the anchorage theory, but later we decided to change the plan due to unfavourable weather. We booked a hotel and took a ferry to Stromboli.

A Stromboli beach:

The clouds form cute hats above the islands:

We returned to Sicily having one day of the charter left, so we used it to sail to a nice harbour not far from Portorosa and practice anchorage in a good weather.

I will probably write about the islands themselves sometime later.

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:

Alexey Blinov has updated our app Emcee with Spotify support.

With Ångström, we were thinking about a way to make the units you use most, accessible more easily.

The obvious idea would be to implement favorites. The user finds a unit he wants to convert, then taps a star. The starred units get into a special list. If a unit gets out of favour, you tap it again to remove it from the list.

But there is a problem. When you’ve got your result, you don’t want to think about adding the unit to a special list to simplify the task in the future. You want to get on with your life. Adding a unit to favorites would require discipline which most people don’t have: few people bother adding websites to Bookmarks, they just google them again and again. Nobody wants to manage their unit converter. User interface is evil.

We focused on the idea of maintaining conversion history and learning the user’s habits.

Here are the things we do:

1. When you open the app, we use the units from the last time. If you always convert the same thing, you will never need to enter the units.
2. If you press space after entering the value, we show the conversion history (see the screenshot above). If you always convert several of the same things, you will be able to see all the possible conversion results at once.
3. If you last used some unit long ago and had to actually type it again, we at least remember what you converted it to and use that.

These features let us be as helpful as we can without making the user babysit the app.

Here is my new atmospheric progressive house mix:

Guy J, Andre Sobota, Dosem, Egostereo, Marcelo Castelli and others. As usual, these are the best tracks of this particular mood that I have found over several years. Enjoy!

The popular way to make grids for your layouts is to account for gutters, like this:

The layout here is 760 pixels wide with six 100-pixel columns, five 20-pixel gutters and two 30-pixel margins.

Now, quick: what will the column width be if we increase gutters to 25 pixels?

This is an overcomplicated, highly impractical way of dealing with grids. Given the overall width and the number of columns, it is hard to calculate the column width. The width of n columns does not equal n × col width. Creating or changing such a grid a work in itself. This is nasty.

The better way is to get rid of gutters:

The layout here is 760 pixels wide with six guides at 120-pixel intervals and a 30-pixel left margin.

But wait, how do you make sure the text in adjacent colums does not collapse? Easy. You add a right padding to the containers:

This approach gives you the freedom of adjusting the paddings in relation to the font size. If your main text is twice bigger, the 20-pixel spacing will not be enough, so you can use bigger paddings for its (and only its) container:

Alternatively, you can specify the padding in relative units (i. e. 1.5 em).

Here is another example, this time without any visible guides:

On the web, you almost exclusively use flush left, so viewing the grid as a set of guides instead of as a set of columns makes sense. The only “grid” is the grid of the invisible lines by which the text is aligned. So do not mess with gutters, they are not worth your time.

You should follow me on Twitter, here