The new version of Ångström codenamed Plato is available. We now support the Apple Watch. You can talk to your Watch about all the stuff related to unit, currency or timezone conversion. A picture from our lab:

We don’t have a Watch, so it’s all theory. If you do, let us know what you think.

For this to work we’ve improved dictation significantly. This works on the phones, too. Press the mic button on the keyboard to try the magic.

Say “five kilograms in pounds” or “seventy-eight Fahrenheit in Celsius”. Ask a question: “What time is it in San-Francisco when it’s five o’clock in London”. Or even: “What time is it now in Beijing” (we had to support this for the watch).

We also no longer automatically paste stuff from pasteboard (this confused many people). Tap the from value to get the Paste option. We will show the popup automatically if there’s anything new in the pasteboard when you open the app.

If you are not yet using Ångström, you should:

Download in the App Store for free

Apple loves native apps: they are faster, interact with the system better, work offline and feel real. Google loves web apps: they don’t require installation, work on any OS and get all the browser features for free.

In the future, there will be no distinction between native and web apps. The two worlds will merge.

Google is heading into the future much faster than Apple. Apple, it seems, doesn’t even see what’s wrong with native apps. Google, on the other hand, does see what’s wrong with the web, and gradually fixes it.

While I mostly prefer native apps to web apps, I feel like this is about to change. One should not be blinded with the current state of the web. I believe, it will become the universal platform of the future, and native apps will die.

Performance and access to system

Native apps are fast because they are written in a low-level language and work with the hardware in a more direct way. The web is slow because of the multiple layers of abstraction (it’s especially bad when reflow hits).

But these are just historical limitations. We will get over them. Performance-critical parts of the web could be written in C instead of JS, if needed. The same way as performance critical parts of server code could be written in C instead of PHP (or whatever).

The web will gain access to the system. It will use my camera and gyroscope the same way as native apps do. Insecure? But how is it less secure than for the native apps? The risks are the same. Apple is dealing with it with sandboxing and by asking for your permission before letting an app see your photos. The web will work the same way.

URLs

URLs are the power of web. The browser address bar will die, but the URLs will not. They uniquely identify (ok, locate) the resource. This makes linking, the main navigation tool, possible. The links could be open in tabs, saved to bookmarks, found by robots, sent to friends. Native apps can’t do anything like this unless specifically programmed to.

When developers of native apps start to develop for the web, they have hard time figuring out how to manage all the application states in a consistent manner. The user can open any URLs in any order regardless of the developers plan. “How do I pass a variable from a page to the next one?”, a web novice would ask. The very question shows that the person has no idea what they are doing. And then we get the stupid websites where you can’t just press Back or Reload: the browser asks you if you want to resend the forms data. It takes years of experience to appreciate and embrace the beauty of the web technologies and start developing with full understanding of them.

Native apps try to support deep linking, but this is very inflexible in comparison to the web.

Tabs

Tabs are a great invention of human interface. They let you use the app the way you like. You can open multiple states at once or group related things together in a free way.

The developers of native apps often can’t even make their app capable of running multiple copies. Some online banking sites, too, suffer from dumb limitations like an inability to open a link in a new tab. This is probably due to the fact that they were developed by the developers from the native world.

Apple has added tabs to the Finder, but I can’t even open a folder in a new tab in a reliable way. And it’s crazy that the Finder has to explicitly ”support tabs”. Facebook and Wikipedia also support tabs, no big deal! Only for the clumsy native apps tabs are an accomplishment. The web just uses URLs and gets tabs for free.

I very much miss tabs in Lightroom, iTunes, Mail and Evernote. It may well be that these apps will learn to support tabs some day, but each one will have its own unnecessary limitations. Tabs must be a responsibility of the OS. Also, if iTunes and Evernote do eventually support tabs, I still won’t be able to group them in one window, like I do with Facebook and Wikipedia without them even noticing.

Bookmarks and history

Bookmarks, as well as tabs, are just an effect of having URLs. Every UI window is identifiable, and thus we can save the identifier for quick access. I don’t understand why I can save a Google Docs document on a bookmarks panel, but can’t do the same with iTunes search results. Actually, I do understand why: it’s because iTunes is a stupid native app. It works only in a limited set of pre-defined ways.

The same thing with history. I can always find what I’ve been doing yesterday or a week ago, and websites don’t have to “support” it. The best we can get from the native apps in this regard is a list of recently open files (very short, not searchable). You can only dream about the ability to search for an obscure Photoshop checkbox that you’ve enabled last week. For this to work, Photoshop has to implement search and history in preferences, which is obviously an overkill. I’m not sure any of Facebook developers have even thought about such a feature for their product, but Facebook does have it anyway.

Installing

Installation is an example of UI evil, as website registration is. I just want to buy a book, why do I need to register in an online store? I just want to edit a photo, why do I need to install Photoshop? Today, this question may sound strange to some, but in the future people will not understand this ritual of “installing an app”. It’s just a meaningless waste of time.

I hate the need to keep hundreds of icons in iPhone folders. Why would I need an app of my preferred airline? Can’t I just buy a ticket by typing “air” into the search box? In the world of native apps, no, I can’t.

Meanwhile on the web: thanks to history sync, I can easily open on my laptop something I’ve been doing on my iMac three days ago without even thinking about what’s “installed”.

Accessibility

On the web, you can copy any text or save any image by just dragging it to desktop. Again, a website doesn’t need to do anything to enable this, it is just how it works. A native apps would not care when you try to select a text in a dialog box, unless this is specifically programmed.

On the web, you can zoom. On the web, you have full text search on any screen.

On the web, you can do automatisation: any service can go to any other one and do something with it.

Offline

For web apps to work, you need to be online. While native apps don’t require that, they become less and less useful when used offline. If a native app can’t sync with the server, the fact that it launches may not be particularly useful. But it’s important that a native app starts and shows at least something when offline. You see your calendar as it was when you were online the last time. You cannot send or receive mail, but you can read and reply. This is much more useful than seeing the “You’re offline” message in the browser.

Web apps are now almost capable of working offline as well as the native apps. See Jake Archibald’s talk on ServiceWorker (it can even do push notifications). Google supports this in Chrome.

Browsers

The biggest problem the web apps face are the browsers. Seriously. When you use a web app, you feel its webbiness (?) every single moment. It’s not real. You almost see the tags and scripts behind the pixels.

The browsers are bad. It’s 2015, and they still cannot fight the white screen of wait. This screen is particularly effective at saying “hey, it’s the crappy web, and if your Internet connection is down, well, tough luck!”

I want any app to have a Dock icon, so that switching to Facebook would look like switching to Photoshop.

The future of the OS

In the future operating systems, there will windows capable of displaying web content and merging into one with tabs. The same way as nobody is thinking about the WindowServer process on the Mac today, nobody will think about “the browser”. That’s why a browser vendor would never make an ideal browser. Only an OS vendor would.

Under Windows, Chrome can save web pages as “standalone apps”, but this feature didn’t get much traction. That’s because the web apps are not designed to make use of it. They assume there is a browser around them. It’s unclear what a “standalone” Gmail app should do when I follow a link in a mail. Also, these app wrappers usually hide the pages’ URLs, which is a shame. You can no longer do any of the stuff the web is good for.

While the term “browser” will gradually die, the Back and Forward buttons will become a part of any window in an OS, as the close and minimize buttons. All windows will learn tabs. The address bar will not be constantly displayed on the screen, but there will be a way to copy or edit the address of any window.

That will be cool.

The inventors of classical autocomplete cleverly used text selection to denote the suggested word remainder:

As you type, you overwrite the selection and the system updates the suggestion. If you press Enter, the whole text is submitted. If you press the right arrow, the suggestion remains in the field, unselected, and you can refine the input before submitting. This is how selection has always worked. There is no need to modify its behaviour for the suggested text.

This solution may seem obvious, but I’m not sure it came easy. At least, my first call would be to overload the text input with a support for a special kind of text: the suggestion. It would take an aha moment to figure out you could make do without it.

Still, recently it became common to show the suggestion as just grey text:

This design is better aesthetically, but is not as elegant logically since it does indeed add an extra kind of text. It is also unclear whether the suggested part will be submitted with Enter or not.

One popular Russian classifieds website uses this design and frustrates me with its search. Say you type “sno” and it suggests “wboard” with grey text. You press Enter — and get no results for “sno”. The classical autocomplete would not do that to you.

It takes years for controls’ behavior to settle and become standard. So far, the implementations of this modern autocomplete design vary. But I suspect that you can recreate the classical behavior by just changing the selected text styles with CSS.

Alex Babaev, with whom we make Ångström, suggested that we switch to the modern autocomplete design, and so we did In a recent update:

Works the same, looks better.

We’ve updated Ångström to version 1.4 for you:

This is a clean-up update after not-so-smooth 1.3. We didn’t even come up with a codename: were too busy fixing everything that was broken.

Unfortunately, we had to remove the Today widget. We rushed to add it in the fall, but had really hard time making it fast and reliable. We don’t want gimmicks in our app, so for now, no widget. We will get it back as soon as we figure out how to make it up to our standards. Sorry.

Also: numerous improvements to input. When changing a unit from “meters” to “Moscow time”, 3,57 would turn into 3:34 before, will now be 3:57 (tried to be smart, but it was useless). 357msk will also be automatically be treated as 3:57 msk. You can also type 007 without a decimal point now, it will be interpreted as 0,07 or 0:07 depending on the unit selected. Less taps, we like that.

People with large iPhones 6 and 6 Plus, we will use your screen real estate better now.

The Ukrainian currency, Hryvnya is now included in a free unit pack.

If you are not yet using Ångström, you should:

Download in the App Store for free

I will later publish the stories from Barcelona, Tarragona, Valencia and Sitges. Now, several examples of graphic design of Spanish official bodies.

The symbol of Barcelona city hall:

Street prohibition sign with it:

Sometimes it is used on a “big B” label:

Museum of Picasso:

Red on black looks cool (above the entrance):

This one is probably a simplified version of the same:

The grilled variant of the “big B” is used on everything that has to do with garbage. Garbage can:

Garbage truck:

Ministry of home affairs and police:

Barcelona city council:

The symbols of city halls of Tarragona and Sitges aren’t too interesting (here to complete the picture). The symbol of Tarragona city hall:

The symbol of Sitges city hall:

The symbol of Valencia city hall:

On a manhole cover:

Government of Valencia is the coolest:

Just great:

The shield:

On a beach in Vinaròs:

The government of Catalonia:

On a police car:

On a tax authority building:

With all the symbols of Catalan councils:

Cities have many means of transportation with fixed routes: underground, trains, buses, trams, jitneys. This is ineffective. Some buses run empty because at a particular moment nobody wants to go where they go. Some directions are not served at all when needed. City administrations try to minimise these issues by carefully planning the routes, but this process is too inert.

This system should become dynamic.

You tell your watch where you want to go. The data goes to the special city software. The software analyses the data of the citizens in real time and comes up with the optimal current routes so that everyone gets where they need to. The watch then tells you when to leave home and taps your wrist when your bus arrives.

An auction system will emerge: the more you are willing to pay, the quicker the system will get you where you want.

The system will be open for new players. Some will be just drivers who have a spare hour (Uber). Others will anticipate a long-lasting demand and build a whole underground line. There will be a continuum of the means of transportation, from buses (spacious, rather slow, cheap to ride, popular) to taxis (compact, usually fast, expensive, custom). The will be no route numbers for buses as there are no for taxis.

The route-planning software will want to forecast the demand for its services. So it will request access to your calendar. At some point you will no longer need to tell your watch anything, the system will just know where you want to go.

If you don’t feel like sharing your calendar with the transportation system, that’s not a problem. It is just that the rides will be more expensive for you, as the planner will not have enough data for optimisation. The majority will prefer to share in exchange for a discount, as it does prefer giving up some privacy to get the free Google services.

Since there will be no place for transport officials in this system, they will oppose it vehemently.

Please welcome Likely, the nice social sharing buttons:

Why:

• looks good;
• Twitter, Facebook, Google Plus, VK (Russian thing) and Pinterest;
• any text or no text;
• two themes, for dark and light background;
• three sizes;
• Retina support;
• 18 KB (including icons).

Everyone should use Likely. Tell your friends to use Likely (i. e. by socially sharing its page). If you’ve switched to Likely on your website, drop me a line at (ilyabirman@ilyabirman.net).

In a browser, when you enter a website address and press Enter, the first thing you see is white screen — no matter how fast your internet connection is. When you launch an app on an iPhone, you see the app immediately — no matter how old your phone is and how slow the app is. The trick is that every iPhone app includes a screenshot of its own initial state. Usually it is the app’s first screen without any content.

The browsers could copy the iPhone’s behaviour to improve the perceived speed of the web. In addition to the real page, a web server could serve an HTML file with a temporary content to show while the real page is loading. We’ll call it loading.html, but it could be anything pointed to by a link tag.

When the user goes to a site for the first time, the browser loads it in a regular manner. But if it figures out loading.html is available, it downloads the file and saves it locally. When the site is open again, the browser renders loading.html immediately and then replaces it with the real content when it becomes available.

This is not caching: browser shows loading.html while, not instead of loading the real page. And it will reload this file when it changes, like any other resource.

The difference between nothing and something is huge: immediate feedback, even approximate, is one of the main things that make user interface great. Enter:

The following aspects of loading.html should be considered:

• External resources. It seems sensible to disallow usage of any external resources for the file. They defeat the purpose of the file: the browser should not spend any time loading images or fonts for this temporary screen (which, hopefully, will be visible for only a second). The browser could cache those, but this may become a debugging nightmare. Embed all the styles, scripts and images — or make do without them.
• File size. Since a browser should store this file for every site you’ve visited, the file should be small. Also, its loading should not tax the visitors who open your site only once.
• Interaction and continuity. Interaction with a page that can vanish and get replaced with another one any moment seems strange. At first I though that it should be completely prohibited: no links, no listening to JavaScript events. But then I thought, what if I put a site’s menu in loading.html? If a user clicks a link, the browser could switch to loading it (it, by the way, could have its own loading.html, see also Scope). But badly implemented this could be frustrating. Say, a user is typing a search query into an input of loading.html when it gets replaced with a real page. The browser must make sure the typed letters are not dropped and the caret position is maintained.
• Progress information. It would make sense for loading.html to want to display a spinner or a progress bar itself instead of relying on the browser. For this to work, the progress information should be available to it. A way to implement this would be with an event sent to the page, i.e. onLoadingProgress (in which case disallowing all events is not an option).
• Location. From the point of view of the scripts on the loading.html page, its location should probably be the same as for the real page it’s temporarily replacing (even though in reality, obviously, loading.html was loaded from another URL).
• Cookies and localStorage. These should probably be available to loading.html as for the real page also. A use case would be showing the name of the signed-in user right on the loading.html page.
• Scope. A loading.html page might want to specify the scope of real pages it works as a loader to: only the one it is linked to, a range of pages, all pages on the given domain name.
• Expiry. A loading.html page might want to specify its expiry date.
• The switch. When should loading.html be replaced by the real page? Waiting for the full page to load is surely not optimal. Perhaps, a browser should use the same heuristics it uses now to start displaying a page when following a link. But I would consider giving a loading.html-aware pages some additional control over it.

I don’t have experience with Offline Web Applications APIs, but going by the description, I assume at least some of the described behaviour could be implemented with them. It would, however, be too complicated for anyone to bother.

This feature will probably be abused by some designers to show splash screens and ads. That’s not a problem. On the iPhone, some apps also show splash screens, and though this sucks, in no way is it a reason to remove the feature (actually, if we remove every feature that has a capacity of being abused, we’ll remain with nothing).

I’ve long been concerned with how web pages look and behave during loading, as you may have guessed looking at Emerge.js (just updated, by the way). There is a lot we can do as front-end developers. But to make things significantly better, help from the browser vendors would be required.

Traditionally an underline was used for emphasis:

Some logos use it to look important:

Above, underlines are part of the message: they interplay with the letters, drawing the readers’ attention to the underlined words.

But the use of underline for links, especially in paragraphs of text, is semantically different from this classical use. Such underline should not be an obstacle for the reader who choses not to care about the link. The design should only hint at the option to click the link, not scream about it. In fact, the words should not change their meaning the slightest when the linking is removed (i. e. when the text is printed).

In Crafting link underlines on Medium, Marcin Wichary says that an “ideal” link underline would look like this:

But this is not ideal, this is exuberant. You don’t want to break one underline into six stubs with funny optical effects at the gaps. You want the underline to be modest and quiet.

This is not as bad as the new Safari rendering though:

Only four lines here, but they are thick as logs. And the vertical distance from the text is smaller than the white area around the descenders. Only a blind person could come up with this crazy design.

To make the text and the underline both clear, put them in separate visual layers (see Tufte’s Envisioning Information, Layering and Separation). Make them ignore the existence of each other:

Notice how this underline is very thin. It resembles a hair on a piece of paper.

Why not thicker? Again, because it is not a part of the text, it should not divert the reader. It should be as thin as possible, as long as you can see it (see Tufte’s Visual Explanations, The Smallest Effective Difference).

In his books The Visual Display of Quantitative Information (page 140) and Envisioning Information (page 46) Edward Tufte shows a stem-and-leaf plot of volcanos’ heights:

As Tufte says, this plot “constructs the distribution of a variable with numbers themselves”. Numbers to the left of the stem represent thousands feet. To the right, hundreds, for each volcano. For example, 17 | 92 represents two volcanos of heights 17 900 and 17 200 (rounded).

This diagram has confused a lot of designers.

Usually, in a stem-and-leaf plot the values to the right of the stem are ordered. In the Tufte’s example, however, they don’t look so:

13 | 47830

On his own website, Tufte answers a question about this oddity, emphasis mine:

In the late 1960s John Tukey made the stem-and-leaf graphic by hand from an almanac that showed the volcano heights listed probably alphabetically. And so after finding the range of the data, and settling on intervals, John simply wrote down the next signficant digit on the leaves. Nowadays we would ask to the computer to sort the leaves in each bin in order.

However this answer is doubtful. The order of digits does not look completely random. Notice these descending ranges:

This diagram is also shown in another book, William S. Cleveland’s “The Collected Works of John W. Tukey”, as found by my colleague Vadim Yumadilov:

Here we see the full name of the almanac from which Tukey took his data: The World Almanac, 1966. Even the pages numbers are given. Unfortunately, I wasn’t able to find it online. It’s available for sale on Amazon, but I did not want to buy it, pay for shipping to Russia, wait for a month for it to arrive.

Luckily, I’ve found a couple of these almanacs on sale on Ebay and Abebooks. So I wrote to the sellers and asked them to send me the pictures of the pages 282 and 283. Soon, I got a response from Barbie Berquist:

I have attached 2 pictures of the pages on the volcanoes. I hope they help.

Yes they do.

So in the almanac the volcanos are not, in fact, ordered alphabetically. They are ordered by height, but also grouped by region. Hence the descending ranges in the Tukey’s diagram.

Here are, for instance, the volcanos corresponding to the line 13 | 47830 — in Cameroon, Hawaii, and three in Guamemala:

Mystery solved. But I am still confused by lack of curiosity by Tufte. How could he ignore the oddity twice in the books and then content himself with “probably alphabetically” in the forum?