When you cancel a Time Machine backup, it takes some time to stop:
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:
I had to force quit it after a couple of minutes.
Added in August, 2016: And here, Dropbox is “Pausing”:
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.
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:
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.
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.
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.
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.
Make your signature short. Does everyone need to know some obscure instant messenger ID you have long abandoned? Probably not.
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.
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.
