While developing Ångström, the unit converter for the iPhone (check it out!), Alex Babaev and I have come up with the Ångström Style System.

ÅSS (hey, why not) is a JSON-driven styling engine for Cocoa with Dropbox synchronization and shake-to-refresh. It is a great way to separate the code of the app from its look and feel. It helped me try out different aspects of the color scheme, the fonts, the spacings and, most importantly the animations, without making Alex rebuild the app every time I wanted to change something.

Playing with the text caret

One of the many things we were obsessing over in Ångström was the text caret animation:

This is an animated gif, make sure to download the app and look at the real thing.

I wanted the caret to stick out much below and above the text. I wanted it to move like an elastic and bouncy string (whatever that is). I wanted to make it stretch and squeeze, not just blink. There was no way I could explain this in technical terms to Alex. How far the line should stretch? How fast the animations should be? Who knows. I needed a way to play with all the parameters until it felt right.

So I wrote Alex a letter explaining my idea in vague terms. I asked for a way to control the length and the opacity of both the long and the short states of the caret and the transition times between them. After having played with this parameters for some time I figured out I could not make the caret behave exactly as I wanted. Six variables were not enough. We have gradually added the variables for animation easing, the delays and the caret width.

This is the final “stylesheet” for the caret, after hours of tweaking:

"cursor": {
  "showTime": 0.2,
  "hideTime": 0.2,

  "color": "@colors.textNumberColor",

  "period12": 0.4,
  "timingType12": "linear",

  "period21": 0.2,
  "timingType21": "easeOut",

  "height1": 48.0,
  "width1": 2.0,
  "delay1": 0.3,
  "alpha1": 1.0,

  "height2": 78.0,
  "width2": 1.0,
  "delay2": 0.1,
  "alpha2": 0.33
},

This fragment is actually about 3% of the whole Ångström’s stylesheet.

Dropbox sync and shake-to-refresh

The two things that make ÅSS particularly awesome are Dropbox sync and shake-to-refresh.

Moving the style variables from the code to an external file is a useful idea all by itself: I could have been playing with the parameters and rebuilding the app having no clue about Objective-C. As far as I understand, this is how Brent Simmons’s DB5 works.

But we wanted to make ÅSS a real pleasure to use (no pun intended), eliminating the need not only to rebuild, but even to restart the app. Here is how the process of refining something looked for me thanks to ÅSS:

1. Open the app on my iPhone and go to the screen I want to adjust.
2. Open the app’s ÅSS stylesheet from the Dropbox folder with Sublime Text on my Mac.
3. Change the parameters in the file and save it.
4. Shake my iPhone to see the change immediately.

So this is literally live tuning of a running app.

There is a different approach to styling: put sliders with the parameters to the Settings app during development. While this may look nice, we think it is very counter-productive. You don’t want to be constantly switching between the app you are designing and the Settings app. You don’t want to be scrolling through tens or hundreds of variables on the iPhone screen. You don’t want to struggle entering a color’s #rrggbb value on the iPhone keyboard. Sublime Text on a computer synced with the iPhone via Dropbox works so much better.

Alex has written a post on the internals of the system, check it out. It explains the architecture and features some code examples.

One of the most used wayfinding method is a phone call. A person calls their friend and gets some voice instructions on how to get somewhere. For this to work, the person should know the left from the right.

Some people have a hard time figuring this out. Here is a sign to help them:

My friend and a great iOS developer Alex Babaev approached me with an idea to make a unit converter for the iPhone. What? Aren’t there hundreds of them on the App Store already? But after a short discussion it became clear to me that none of the ones that existed were good.

All the converters had stupid menus with categories and icons, as if the designers were thinking about a nice Dribble shots instead of the utility of their apps. By the time you make it through the user interface and set it up for the conversion, you forget what you wanted to convert in the first place.

So we did it our way. Our product is called Ångström:

We have started from scratch. You have a number in your head, you want it converted stat. You do not want an endless list of categories distracting you.

We ask you for a number and strive to give you the answer with as little taps as possible. Ideally, with zero taps. That is why we check out your clipboard first. We use the units from the previous convertion before you change them. We show you your unit history before you have started typing the unit. We try to guess the target unit i. e. we know that it is natural to convert feet to meters, but miles to kilometers. We learn what you convert to make better guesses over time. We keep currency rates updated, but show you approximate values when offline. We support alternative spelling of many units.

The version 1.1 has just been released. We invite you to have a look at what we have done. Ångström has been “In Review” for five days. Presumably, Apple employees were playing with the equals sign and just could not stop.

Yep, we have had lots of fun with the animations and transitions. If nothing else, this alone is a good reason to test drive Ångström. Every tap is welcome. And if you don’t feel like tapping, you can just run the app and enjoy our text caret animation for hours. For some reason, I, personally, particularly love it.

Download in the App Store for free

The free version includes most units for daily use. An advanced unit pack is available as an In-App Purchase.

Following my original post with London Underground voice announcements, reader Yaroslav Eremenko and another reader who preferred anonymity have sent me several other recordings. Now I have announcements from the Northern line, which I did not have before.

A recording of a train operator explaining a delay with a red signal, the quality is very poor:

Central line

District line

Northern line

First, trains to Edgware:

Euston, both branches:

More Bank branch to Morden. This one is at King’s Cross, the beginning is omitted:

It is notable that on the Northern line, they say “this train terminates at S” instead of “this is a L line service / train to S”. I also like the expression “This train terminates at Morden via Bank” as a shorthand for “This is a Bank branch train and it terminates at Morden”.

Piccadilly line

Victoria line

National Rail

I have updated the original post with the new recordings, make sure to check it out for my whole collection.

By the way, still no Bakerloo, Jubilee, Metropolitan, Waterloo & City lines and DLR. If you have any recording in your collection or would like to make some, do not hesitate to share them with me. Thank you!

Some authors use footnotes too much. This usually takes the following form:

An exciting story on a subject ¹, blah-blah.

---

1. Another exciting story on the same subject. Or the boring details on the subject. Or an explanation on why some of the details are not actually true and how it does not matter.

How am I supposed to read this? Does the author want me to scroll down every time I see a superscripted number to read the footnote? Or should I ignore it?

When I follow a footnote, I lose track of the main narrative. This is no surprise, for if the footnote’s content fitted the main line, it would not have ended up in a footnote, and I would not have to scroll back and forth. So when I return from the footnote, I back up a bit to get back on track. When I encounter the same footnote again, I can finally connect the dots. Not exactly a smooth reading experience.

When I ignore a footnote, I feel I am missing something. And many writers prove me right: when I finish reading and glance over the footnotes, I often find them worth reading. This makes me re-read the parts of the main text to figure out how the footnote is related to it. Then I can finally connect the dots. Not a smooth reading experience either.

Galileo Galilei’s book, a scan from the Edward Tufte forums.

In a book, where no scrolling is involved, footnotes are not as irritating as on the web. But a good designer will still avoid them, prefering sidenotes, as on the spread above. They require no meaningless numbers, you just place them beside the relevant text. This design helps a reader quickly check out whether a note is worth his attention and continue reading practically uninterrupted.

If you use the parallel narrative often, this is what you should look into. However, most of the time footnotes on the web are a sign of inconsistent writing.

Uvildy is a lake about 100 km from my home city of Chelyabinsk, Russia. In winter, it freezes over. Where there is no snow on the surface, the transparent ice looks stunning.

I have made a video today:

And also took several pictures (original size; right-click to save and use as wallpaper, if you like):

Camera: iPhone 5s.