Building numbers sometimes double as street lights, as they do in Helsinki:

1

Sings with arrows help find buildings inside the blocks:

2

3

The path on the right leads to the amazing Berghain nightclub:

4

Non-standard street name plate and a plan of the quarter:

5

In-quarter wayfinding with colourful shapes:

6

Street name is put on a wall. Schwedter Straße:

7

Bernauer Straße:

8

There’s a lot of bike rental shops with handmade signs like this one (there is still an “official” city-wide bike rentral):

9

“Window-blinds like these are prohibited”:

10

More signs and plates:

11

12

13

14

15

16

Apparently, a burger place is coming here:

17

Beautiful:

18

Nice posters:

19

Crazy posters:

20

Konzerthaus Berlin. Look at the event posters:

21

22

Photos are from the trip of May 2016.

More Berlin:

• Street name plates
• U-bahn
• U-bahn station names
• Coffee
• Planet Modulor

See an earlier post on Berlin U-bahn station lettering. Now, to the rest of the U-bahn.

Typical station entrance:

There is also a tram stop to the left and a train station above the road.

Stadtmitte station has its own entrance sign design:

A schedule at the entrance:

Elements of wayfinding inside the stations. The list of the remaining stations of a line:

Another one:

No turnstiles, as usual in Germany. To the left of the ticket machine (white and yellow), there is a small validator (yellow and white):

At the centre of a platform there is usually an element with the station name and exit guide:

A similarly design element, but wall-mounted:

Another exit guide design:

Time to the next train, service information and a clock:

A compact version:

Ads:

Train are yellow:

All trains have an external speaker (above a window) so that the announcement are heard from the platform. The windows are filled with the pattern of Brandenburg Gate.

Inside an older train:

Inside an newer train:

Line diagrams are grouped. 5, 8 & 9:

6 & 7:

Apparently, this reduces the production cost. But this format also makes the shown lines more “related” in the eyes of a passenger, even though transfers to other lines are no worse.

A button to open the doors:

The system map is on the ceiling:

Hermannplatz station:

Weberwiese station:

A train on an elevated structure:

The photos are from the trips of March and May 2016.

More Berlin:

• U-bahn station names
• Street name plates
• Coffee
• Planet Modulor

These are words that usually signal problems with the user interface.

Main and secondary

Variants: regular, general, basic, advanced, extended, miscellaneous, more
Examples: main section, basic options, advanced plan, miscellaneous settings

The line between “primary” and “secondary” is not defined. The user is looking for a particular thing and has no idea whether it’s “main” or “advanced”. “More” is usually a graveyard of elements that the designer didn’t find place for.

Useful

Variants: important, notable
Examples: useful hints, important information, notable changes

When you nominate some stuff important, this means all the rest is unimportant. Instead of stating the usefulness, explain the benefit: “How to start snowboarding”.

Article

Variants: post, entry, publication
Examples: add entry, next post

These, again, name the type of the content. The words can be useful among the editorial staff, but meaningless for the reader: there are no newspapers with an “articles” section.

Catalogue

Variants: list, archive
Examples: shoes catalogue, news archive

There’s no need to signal that a list is following. Just put the list with an informative heading: “Shoes”, “News”.

Click here

Variants: enter, select, go, follow, open, launch
Examples: click here to open, enter password, select country, follow the link

There is no need to explain how to use buttons, links, input fields and other standard user interface elements. Links should just name the places they lead to: “iPhone 7 review”. Form fields should just name the content: “Password”, “Country”.

Form

Examples: application form, inquiry form

A form is a table of fields to fill. The word “form” just names a type of screen, but the user already sees that it’s a form. Name it with the benefit in mind: “Job application: designer”.

Required

Variants: necessary, must, please
Examples: required field, you must agree, please specify the phone number

The user doesn’t care if a field is required. If the form doesn’t work without it, they will put in some garbage. Instead of demanding or begging, explain the benefit: “We will call to coordinate delivery time”.

Operation

Variants: process, transaction, request, step, state, module, function, data
Examples: process is not responding, bad request, step 5 of 12, module not installed, wrong data format

These words are handy to describe how something works technically. But there is no point in using them in the user interface: they just complicate the matters for the user. Write as a human being: “Spell check available in paid version”, “Due to an error, the app needs to re-open”.

Authorisation

Variants: authentication, authentification, identification, session, limit
Examples: please authorise, session timeout

Even programmers mix up the autho-whatever-s constantly. Use the verbs “to enter” or “to sign in”, or, even better, name the thing that’s inside: “Shopping history”.

Success

Example: operation completed successfully

If operation hasn’t completed successfully, it hasn’t completed, period. Write what’s been done: “Money sent”, “Update installed”.

If you know why a particular word from this list is not good, but in your case it makes perfect sense, leave it.

I visited three coffee places in Berlin: The Barn and two Bonanzas.

This is The Barn (Auguststraße 58):

Espresso, flat white and a cappuccino (I had the flat white as I always do):

Sugar (not for me):

This is the Bonanza at Mauerpark (Oderberger Straße 35). Great sign:

Inside:

Flat white and water:

This is the Bonanza in the yards of Friedrichshain (Adalbertstraße 70):

Nice building and the tables outside. Here’s their central office and the roastery.

Inside (menu on the mirror):

Almond thing, water, flat white:

Tasty pastry in coffee shops always tries to distract you from the coffee. I try to resist it, but don’t always succeed.

And this is not coffee, but a wrap and a smoothie in a vegan place Goodies (Warschauer Str. 69):

The photos are from the trip of May 2016.

More Berlin:

• Street name plates
• Planet Modulor
• U-bahn station names

A slider is a simple user interface control where you adjust some value by dragging a handle in a groove:

Most web developers can’t get it right. You may think that there is not much you can fail at with such a simple thing. But most sliders are bad. They don’t respect the Fitts’s law and don’t provide decent feedback.

I decided to write a manual. Let’s see what usually goes wrong and how to fix it. If you are reading this via RSS, please go to the browser to see the demos.

Fitts’s law

Common mistake is requiring to grab the handle to drag it. Logically, this makes sense. But a small handle is very hard to grab. Try here:

A tiny bit better is making the groove clickable:

But in this design the groove is so thin that it hardly adds anything — aiming is still a pain, particularly on a touch screen. Speaking of touch screens, some implementations would just forget about them and not handle the touch events.

You should be able to grab the handle from any point in the slider area:

Make this area at least as big as a comfortable button would be. Notice how the areas to the left and to the right of the slider also work, moving the slider to the minimal and maximal positions.

Feedback

In all the examples above the mouse cursor was changing to a pointing finger when you hovered over the draggable area of a slider. Sometimes this feedback is absent or inconsistent. Here, you can drag from anywhere, but the mouse cursor changes only over the handle:

Having no sign that the slider would work otherwise, many users would try to grab the handle. An even worse mistake would be requiring to drag the handle but displaying a pointing finger over the whole slider area.

Use feedback consistently, change the cursor over all slider area and make it all work:

The change of the cursor is the minimal feedback necessary for the user to understand how the slider works. But it’s better to also highlight the slider itself:

Notice how this one just feels nicer to use.

A small detail: the slider gets its red “hover” highlight, but also keeps it while being dragged, even when mouse is outside.

Continuous feedback

The slider should move continuously as I move the mouse. Some implementations would only repaint the slider when I release the mouse button:

Others would accept clicks in the whole slider area, but only move the handle to the click position instead of grabbing it (unless you grab the very handle):

Both feel broken.

The slider is usually there to control something else. In this case, the rectangle to the right of it. In some implementations, the slider would move continuously, but the external changes would happen only on release:

Everything should stay in sync: hover effects, the cursor shape, actual active areas; reaction to click and drag; feedback inside and outside the slider.

Feedback and slow data

Sometimes it may take noticeable time for the changes in slider to take effect somewhere else. You may need to make complex calculations or get data over the network. You may think you just can’t provide continuous feedback in such cases. But you must still aim to provide as much continuous feedback as possible.

In my examples, the slider controls the numeric value and the background colour. Let’s pretend they are slow to update.

In the worst implementations, the slider would get repainted only when the data is ready:

This is painful to use.

At least the slider itself should repaint continuously during the drag, no matter how long it takes for the change to take effect:

But we can do better. To fake continuous zooming, Google Maps shows at least a blurry map image (see my post on immediate feedback when data is unavailable).

What if only the colour is slow to update, but the number can change instantly?

Again, compare with the previous implementation — this one just feels snappier. So: always consider at least partial continuous updating. This is much better than waiting for a full update before making any change.

Notice that the data updates as fast as it can without the need to release the mouse button. If the data takes even more time to update, some progress indicator may be used, but the slider should never become unresponsive.

Reference implementation

There are too many sliders above. Which are the good ones?

This is the best, with full continuous feedback:

This is the second best, with partial continuous feedback when some data needs time to update (colour, in this example):

Please show this to your web development team.

In Sayve 1.3, we added the ability to display a badge with the number of unsorted audio recordings:

This is for those of us who don’t like their audio recordings to pile up. Actually, we wanted this in 1.0, but it didn’t get there. Why? It wasn’t that easy to design.

OK, this must be laughable: what even is there to design? The badge is a system feature that has a fixed look, just take it. But you can’t.

This is going to be a long and boring post, by the way.

Since iOS 10, displaying a badge requires an app to have asked user’s permission for sending notifications. So if we just tried to just show it, the user would see the system dialog asking for the permission.

We already ask for two permissions on first open: microphone and speech recognition. For iOS these are two separate things, unfortunately. Before asking, we show this screen:

This prepares the user for the system questions and helps us get a “Yes”. Microphone:

Speech recognition:

Notice that we can also add some of our own text in these dialogs to explain why we are asking for these permissions.

We could add a “tutorial” screen before asking about notifications: explain that we are going to display a badge and only then ask for permission. But adding another such screen and third permission question would make the first-launch experience really clumsy. And what’s more important, many users would still presumably press “Don’t Allow”, because at first launch they have no idea about how they would use Sayve and why a badge might be useful to them.

And what should we do if the user answers “Don’t Allow”? You can ask for a permission only once. How would the user even know they could change their mind later? For comparison, when the user answers “Don’t Allow” to any of the two sound-related questions, Sayve just cannot work, and we show this screen until both permissions are given:

We can’t do the same for the badge permission, because the badge is not necessary, it is just a preference. Some users would like it, others would not. So if the user says “Don’t Allow”, we would need to explain how to enable the badge later. But where and when? We don’t even have an About or Settings screen.

We could go and add a Settings screen just for this one setting. See how this is getting complicated?

Adding in-app Settings screen makes little sense: iOS already has notifications settings, and this is the only “notification” feature we use. So the next idea was to make this setting configurable only in the Settings app:

Let’s just display a badge when the user has enabled notifications. And we could explain this option in the app’s description.

This also didn’t work. Turns out, you can’t just put this “Notifications” element to the apps settings screen quietly — it would only be added there after your app has asked for a permission. So we have to ask for a permission even to get a “No”! By the way, the question starts with the text “Sayve Would Like to Send You Notifications”, which is not true:

We would not like to send any notifications, and we don’t even have them. As to the badge, we just can, but not would like to use it. To make things even worse, in this dialog, unlike the two previous ones, you cannot even put your explanatory text.

But this is not something we can change: the question is asked by iOS, not us.

So we added this icon to the top right corner:

The idea was: when the user taps this icon, we would first ask if the user would like to see the badge, and if yes, we’ll ask for the system permission to enable notifications. And we would remove the icon then.

Do you think this worked? Of course not. What would we do if the user declined the first time? There would no way to add the notification permission setting to the system Settings app then. So we cannot ask the user if they want a badge, we must just tell them that the notification permission dialog will follow and it is there to display a badge if they want.

So, in 1.3, when you tap the icon in the top right corner, you’ll see:

And after you press “OK” (which is misspelled as “Ok”, unfortunately), you see the actual, system notification permission dialog where you can decide whether you want the badge or not.

After having shipped this, we see that it’s better to say “Continue” instead of “OK” in the box above, otherwise it may seem to the user that they have no choice.

Is this the best design of a feature? I don’t think so. But that’s the best that we could come up with given the system limitations that we have.

We hope you like Sayve (we are Mihail Rubanov, the developer, and myself).

The button:

Get in the App Store

It’s about time to flip the mobile user interface vertically.

I have no idea what language this is

It was easy to tap “Back” or “Edit” with your thumb on the original iPhone. On iPhone 5, it became harder. Since the 6, it’s almost impossible.

Apple has added two features to make things less bad. The first was a gesture where you slide from the left edge of the screen to get back. The second was Reachability, where you double tap the Home button to make everything on the screen shift down so you could reach the top row of buttons. This already felt like a duck tape fix.

The question is: why put buttons on top and then add obscure gesture to reach them when you could just put the buttons on the bottom in the first place?

Windows Phone has the browser’s address bar on the bottom:

On some screenshots it’s actually on top, so I’m not sure. Anyway, it should be on the bottom

Apple, when will you do the same?

It’s interesting that the revolution has already happened in Maps. Before and after:

The search field and results have moved to the bottom. Why did this change only in one app?

We’ve designed Sayve, the smart voice recorder so that all the important controls are reachable. A couple of intermediary user interface layouts:

At first, the audio controls were on top (the left layout). Then it moved down (the right layout).

Finally, all the user interface changed to gravitate towards the bottom:

I’m hopeful that Apple will do something similar throughout iOS 11.

When you turn the things upside-down, you may not like the result aesthetically at first. But our idea of what’s beautiful is largely formed by the technology.

The rule: in the mobile user interface, put the controls on the bottom.