There is an accessibility setting on the iPhone called “Reachability”. When you enable it, you can double tap the Home button or swipe down the Home indicator on the iPhone X to make the screen content move closer to you fingers so that you could tap it.

In The revolution in the mobile user interface I wrote that you should flip the UI so that all the meaningful controls end up on the bottom. But what if you have a full screen of tappable content? Then let the user overscroll it!

Look at this video for examples and read the explanation below:

1. This is how Reachability works on the Home screen of the iPhone X. App icons just move down so that you can reach the top ones. Notice though, that visually it looks as if you just scrolled the screen down.
2. This is what happens if you actually try to scroll the screen down. The icons blur away and the Search interface appears. But wouldn’t it be better if it actually just scrolled the icons down, revealing the search bar above them? This way, you wouldn’t even need Reachability to use the Home screen with one hand.
3. This is how Reachability works in Settings. The whole screen just shifts down, letting you tap user account settings or Airplane mode.
4. This is what happens if you actually try to scroll the screen down. Stuff just moves down, but unfortunately bounces back when you release your finger. But wouldn’t it be better if it actually just scrolled the items down even if there is nothing else above? This way, you wouldn’t even need Reachability to use lists.

Reachability should not be an accessibility setting, but a natural property of the design. If you’ve already flipped the user interface of your app, now it’s time to implement the overscrolling.

In the previous part you saw this picture:

This is Solna centrum, my favourite Stockholm metro station:

These people have just arrived and go about their business:

Nothing special:

A bench:

A view from one platform to opposite one:

Ads don’t spoil the image:

There is a compass on the floor:

Some elk, or whatever it is, above a glass. Because why not?

Artists’ signature:

There’s black in addition to red and green. Escalators:

A man descending:

On the other end there is also a lift. It doesn’t go vertically, but follows the stairs instead:

More ads:

View upstairs:

The pictures are from the trip in June 2016.

Continued

More Stockholm metro:

• Introduction
• Trains

Aegea 2.7 has been released. Aegea is a great blogging engine.

What’s new

There are several new design themes, which look like this:

All new themes are based on the existing theme Plain, but redefine some CSS variables:

Above is the code of the theme “Douglas”, which looks like this:

You can now easily preview the themes from Settings. There is a link that opens a special contrived page, which includes all sorts of blog elements to test. This makes building themes much easier as you can preview your CSS in one place instead of wandering around the blog looking for elements to check.

The editor now supports these Google Docs keyboard shortcuts, thanks to Igor Adamenko:

There are also multiple improvements to the features related to social networking, comments, search, RSS and JSON feed, uploading of images and audio.

About Aegea

An engine is a program that runs on the blogger’s website. It provides the writing tools to the author, shows the posts to the readers and lets them write comments. Medium.com (or similar) is simpler, but they can shut down and take all your posts offline. With an engine, the blog runs on your own website and you have access to the files and the database (you don’t have to deal with the files or the database, but you own all the data).

I want most people to have access to personal blogging in this way. That’s why it uses the most easily available platform: PHP with MySQL.

Aegea powers this and many other blogs. Among my favourites:

• Oleg Andreev, software designer and crypto-anarchy historian, on Bitcoin and related stuff
• Daniel Lesden on music production
• Death by Passive Voice, on writing, by Max Bears

With Aegea, you can use one of the built-in themes or customise it however you like (this blog is an example). Be flexible with comments: allow and disallow them globally or per post. Refine posts using Drafts. Add images, videos, audio or code to illustrate your point. Organise your writing with tags.

Designers, writers, musicians and software developers use Aegea to show their work, communicate and spread knowledge. They love it because it’s simple and fast yet does everything they need. Aegea is free for personal use and paid for business use.

Learn more and get Aegea at blogengine.me.

First read the introductory post about Stockholm metro. Now, let’s look at the trains.

The new train:

Stadion

The display above the door shows the destination station:

Mind the gap:

Inside:

Closer. Note the pictograms on the door:

Typesetting:

Different angle:

The line diagram on a transparent background next to the doors:

More pictograms:

At stations, the driver leans halfway out of the train to see the people when announcing that the doors are closing:

The old train:

Kungsträdgården

The train at the most incredible station:

Solna centrum

I’ll cover it in the next post.

Inside the old train:

The view in the opposite direction:

The diagram on the ceiling:

The transport system ads:

Simple but effective:

A freight train passes:

The pictures are from the trip in June 2016.

Continued

See also:

• Stockholm metro (introduction)

This is a kind of photos you usually see in blog posts titled “Stockholm metro”:

Rådhuset

You may think that all Stockholm metro is like this. But when you come to Stockholm and go to the metro, what you see is this:

Skanstull

Not all stations are fantastic, you must know where to go. I will get to the good ones, but will start with the other things.

The station entrances are denoted with the letter T, because metro is a “tunnel road” (tunnelbana). The entrance from the central rail station:

T-Centralen

In Swedish, the definite article is expressed as a suffix, including -n, so sometimes you see a funny word tunnelbanan (“the tunnel road”):

The entrance in the old town:

Gamla stan

Another one in the central part of the city:

Medborgarplatsen

The “T” thing itself is of a very nice form:

Gamla stan

And it is glowing at night:

Slussen

A lift at one of the stations:

The map of the metro and suburban trains:

You can find the stations Skanstull, Medborgarplatsen, Slussen, Gamla stan in the centre.

Ticket machines:

There is a unified graphic style for the transport system. I will show the airport and the central railway station later. They all use the same font, the Swedish text is always white and the English one is yellow. But on the metro, only the posters follow this style. Other elements are inconsistent in their design.

Let’s get it. A beautiful font:

A platform. The letters on the display are gigantic. Looks right:

This display informs about escalator direction:

One of the platforms at T-Centralen, where the central railway station is:

A station name:

Now let me guide you to a more impressive platform at the same station. Follow the signs:

Helvetica, rectangles, arrows (the display on the left says “not down”):

And here we are on the platform of the blue T10 and T11 lines:

T-Centralen, blue lines

We’ll get back to this later.

A standard hanging sign with the station name, Helvetica again:

And here’s another style, on a blue background:

The same style is used for remaining stations list:

Another one:

The pictures are from the trip in June 2016.

Сontinued

Here is my talk from FDConf, Minsk about feedback in the user interface:

All screenshots for this post were made by Rakhim Davletkaliev.

About:

Menu

File. It’s interesting that it was F2 to save, F3 to open, even though the order is already New, Open, Save — as on the GUI systems:

Edit. These keyboard shortcuts for clipboard were much better than Ctrl+K,K and Ctrl+K,B from Turbo Pascal 5.0:

Search:

Run:

Compile. It’s always bothered me that Run, which you always wanted, had a more complex shortcut (Ctrl+F9) than Make (F9), which you never wanted by itself.

Destination: Memory. An interesting menu item where the value is displayed inline.

Debug:

Tools:

Options:

Environment (we’ll get to the windows behind these items later):

Window:

Help:

File, Edit, whatever, Window, Help — Borland has copied this standard from the GUI OSes even though they didn’t have to. It was nice.

Shortcut menu:

File dialogs

Open:

Save:

Change directory (in MS-DOS, there always was a current directory):

Printer setup:

Window management

Cascade mode:

Notice how the active window has a double border.

Tile mode:

Window list:

No windows. Notice the background:

Working with code

A simple program:

Parameters:

Arguments (what is parameters, then?):

Compile-time error message:

Compiled successfully:

Information:

The full-stop at the end of a program is a nice quirk of Pascal.

Go to line number:

Find:

Message box:

Notice that the main window still has the double border when a dialog is open.

Replace:

Find procedure:

Debugging

Step-by-step:

Add breakpoint:

Breakpoints:

Call stack. Not a dialog box, so the unfocused main window gets the single border:

CPU:

Add watch:

Watches:

Output:

Evaluate and Modify:

Messages. I never knew what Messages were, and neither did the school teachers. And you couldn’t have just googled it:

Help

Pascal help:

The language syntax:

No search. Functions organised alphabetically in strange groups:

Error messages, by number:

There also was Turbo Help, the help system available from dialog boxes. For mysterious reasons it looked very different from the main Help:

Setup

Preferences:

Editor options. Editors of 2017 have so many options that you need search just for them:

Mouse options. This was not system-wide:

Startup options:

Colours. My favourite window:

Compiler options:

Memory sizes:

Linker:

Debugger:

Directories:

Tools:

Previous exhibit: Norton Commander 5.0

Someone has tweeted this and got several retweets:

What they mean is this: when the content is still, tapping the screen is interpreted as a tap, but when the content is in motion, tapping the screen just stops the motion. So is the behaviour modal? No, here’s why.

Most people think that an interface is modal when it has modes, i.e. when same user input produces different output depending on the state of the interface. However, that’s not the definition.

Let’s read Jef Raskin carefully:

An human-machine interface is modal with respect to a given gesture when (1) the current state of the interface is not the user’s locus of attention and (2) the interface will execute one among several different responses to the gesture, depending on the system’s current state.

Most people’s understanding includes only the (2), but not the (1). But they both equally matter. Perhaps, Raskin didn’t name the thing well, but we have what we have.

You unlock your iPhone and tap Messages:

But just as you are tapping it, you notice that it’s actually Shazam:

Oops, you are on a wrong page of your home screen.

In this case, launching of Shazam instead of Messages is a mode error: your gesture (tap in the top left corner) produced the wrong output depending on the current state (the page number), which was not your locus of attention. So, the iPhone’s home screen is modal.

Now let’s say you are in Contacts and tap the bottom left corner for Favourites:

Is there any chance you actually meant to go to a previously visited web page?

The gesture is the same (tap in the bottom left corner), and it produces different outputs depending on the current state (the active app). But here, the app is your locus of attention: you are fully aware whether you are looking for a contact or browsing the web. That’s why a modal error is not possible here, and this interface is not modal.

If we get back to iOS scrolling, it now becomes clear that it is not modal. When the scrolling animation is playing, it is the user’s locus of attention. The user is fully aware of the interface’s state: they are looking at the moving content. So the fact that the tap is interpreted differently during this animation is not a surprise and doesn’t produce a mode error.

It’s a common mistake to denote heading level by its font size only. The popular Bootstrap CSS framework does exactly that:

When you see this picture, it makes sense: the higher the level, the bigger the heading. The problem: this works only when you put these headings next to each other. But when you use six levels of headings in a real text, these styles will not help establish the structure. From the reader’s perspective, they would be just randomly-sized headings. To see an example, open the Bootstrap’s own documentation in the middle of its page.

Now look at this example from Wireless DJ help page:

The progression of sizes is not the only design tool here.

There is only one main heading (aka h1) on a well-edited page, and it’s on top. So from the structural point of view it doesn’t matter what it looks like. It makes sense to make it large though.

The second-level headings (h2s) are larger than the body text, but what’s even more important, they have generous margins around them, and the top margins are visibly larger than the bottom ones. This helps link the headings to their text and separate the sections from each other.

The third-level headings (h3s) are not just smaller than the second-level ones. They are actually of the same size as the body text, but are bold. Also, they have no bottom margins at all. This connects them very tightly with their text.

If you want more than three levels, you won’t be able to make do with just font size and margins. You will need to employ other tools:

This example is in Russian, but it’s even better if you can’t read it. Just see how headings of different levels have several attributes that help you recognise them: alternating typefaces, italics, rulers, numbering.

Such a complex hierarchy may be necessary in some legal documents (the example above is from the Russian Civil Code), but in most cases, three levels of headings must be enough.