Here is my talk from FDConf, Minsk about feedback in the user interface:
Recently: Stopwords in the user interface · Implementing a slider well · The revolution in the mobile user interface · Introducing Aegea · Map and reality · Why are browsers so slow? · The “Buy” button should always work · How accidental promises hurt reputation
Here is my talk from FDConf, Minsk about feedback in the user interface:
All screenshots for this post were made by Rakhim Davletkaliev.
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:
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.
Environment (we’ll get to the windows behind these items later):
File, Edit, whatever, Window, Help — Borland has copied this standard from the GUI OSes even though they didn’t have to. It was nice.
Change directory (in MS-DOS, there always was a current directory):
Notice how the active window has a double border.
No windows. Notice the background:
A simple program:
Arguments (what is parameters, then?):
Compile-time error message:
The full-stop at the end of a program is a nice quirk of Pascal.
Go to line number:
Notice that the main window still has the double border when a dialog is open.
Call stack. Not a dialog box, so the unfocused main window gets the single border:
Evaluate and Modify:
Messages. I never knew what Messages were, and neither did the school teachers. And you couldn’t have just googled it:
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:
Editor options. Editors of 2017 have so many options that you need search just for them:
Mouse options. This was not system-wide:
Colours. My favourite window:
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 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’s 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.
All screenshots for this post were made by Rakhim Davletkaliev.
The canonical view of two directories in the Left and Right panels:
The right panel is active — you see the cursor and the highlighted path in the title. Use arrows to navigate the files. Change currently active panel with Tab.
Alt+F1 or Alt+F2 changes the displayed volume in Left or Right panel respectively:
MS-DOS uses drive letters for volumes, and the letters A and B are reserved for the floppy drives. Most computers had just one, and then the main hard drive was C.
Hide the panels with Ctrl+F1 or Ctrl+F2:
In MS-DOS, the filename’s length is limited at 8 characters, and the extension, at 3. The dot between the file’s name and extension is not shown. Unlike the command prompt, Norton Commander displays filenames in lowercase letters and directories in all-caps. There is a special halftone pattern separating the extension of the system files like Io.sys and Msdos.sys (also they have their first letter capitalised).
Ctrl+O hides both panels, for work with the MS-DOS prompt:
The main menu is the one displayed on the bottom, with keys F1 to F10 mapped to the most-used functions.
F1 for Help was a standard for many MS-DOS programs. I’m not sure if Norton Commander originated it.
F2, User Menu. The items can be programs for quick access. Here, the User Menu is empty:
The user has to edit a text-based configuration file to add items to this menu (press F4 while in this F2 menu):
The main panels are blue, the menus are cyan and the dialogs are grey. Unless they are error messages:
F3, View. Opens text view of the currently selected file:
Of course, for executables it shows “garbage”. But as far as I remember this version has the ability to set up external file viewers, so you can make it display images as actual images.
See the Mark item in the main menu inside the editor? It has something to do with a clipboard. There was no system-wide clipboard, of course, and the programs that had this feature used very different keyboard shortcuts for it. In Turbo Pascal 5.5, I remember, there were crazy combinations like Ctrl+K,B and Ctrl+K,K.
The Copy command opens the Copy dialog where the user enters the destination path. The input is pre-populated with the name of the directory in the opposite panel, and normally the user doesn’t edit it.
F6, Rename or Move (shortened to RenMov in the menu line):
Why Rename or Move is one command? Because from the system point of view it’s the same: while you are within the same drive, it just changes the full name (i.e. including the path) of the file. Again, the input is pre-populated with the path of the directory in the opposite panel, so just press Enter to move there. Or type a name instead of the path to rename the file in-place. Or add the new name to the end of the path to move and change name at the same time.
Moving between volumes involves actual copying and then deleting the original, but it was also done with this menu.
F7, Make Directory:
Interestingly, the window has no confirmation button, unlike the previous ones. Just press Enter. Also notice that in the main menu bar it’s called Mkdir, not MkDir. Why? Probably, because that was the name of the MS-DOS system command to make a directory.
F8, Delete. No question mark:
Before invoking the file operations like Copy or Delete, you could select many files with the Insert button, and they would display in yellow:
When files are selected, the bottom line changes to reflect this state.
The top menu, or the “Pull-down menu” is shown when the user presses F9 (or clicks the top line of the UI, if your computer has a mouse).
The Left menu sets up the Left panel. You may see many options of what to display in the panels, then how to sort it and more:
The Files menu lists many elements that have nothing to do with files, including Quit — not dissimilar to how the File menu is used in today’s applications:
Right, same as Left:
As you see in the menu, the panels could display a Brief or a Full view. The Brief view just shows the files, in three columns (as in the previous screenshot). The Full view shows one column of files with details:
In this mode, each line looks exactly like the bottom line in the panel, so why not just remove it to show two more files?
You could also set up file filters:
Use a panel for file preview:
Or for search results:
Or for item information. Directory:
Go to file (in the current directory) by typing a couple of letters of its name:
Find File. The dialog windows that have other dialog windows inside, are cyan, not grey — for contrast:
The inputs are shown with square brackets and dots between them. The focus is shown with a black background. Advanced search options — this window is grey:
Notice how checkboxes differ from radio buttons.
NCD (Norton Change Directory? I’m not sure), a fancy way to navigate the folders on your disk:
Commander Disk Cleanup helps find files to delete:
Honestly, I don’t remember this feature at all (but I didn’t use Norton Commander at that time because there was DOS Navigator, which is a whole different story).
Found something. Here, files are displayed with the dots in the names:
DOS memory blocks:
Now let’s look into the configuration dialog. Notice how the controls are organised and grouped:
By the fifth version, Norton Commander got colour schemes:
The palette was limited to 16 colours. There was no way to make the colours darker in the shadows, so to simulate the darkened cyan-on-blue or white-on-cyan the applications of the era used grey-on-black. I’m not sure, but I guess Norton Commander has borrowed this visual style from Turbo Vision. The earlier versions had no shadows. If you go back to the Main menu section, you’ll notice that the help window has no shadow for some reason.
EGA Lines is a mode where twice as many lines of text fits the screen. Nobody I knew ever used it:
Fun fact: this post has 57 full-screen full-quality screenshots. Their aggregate size is 271 kilobytes.
Building numbers sometimes double as street lights, as they do in Helsinki:
Sings with arrows help find buildings inside the blocks:
The path on the right leads to the amazing Berghain nightclub:
Non-standard street name plate and a plan of the quarter:
In-quarter wayfinding with colourful shapes:
Street name is put on a wall. Schwedter Straße:
There’s a lot of bike rental shops with handmade signs like this one (there is still an “official” city-wide bike rentral):
“Window-blinds like these are prohibited”:
More signs and plates:
Apparently, a burger place is coming here:
Konzerthaus Berlin. Look at the event posters:
Photos are from the trip of May 2016.
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:
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:
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:
A train on an elevated structure:
The photos are from the trips of March and May 2016.
These are words that usually signal problems with the user interface.
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.
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”.
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.
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”.
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”.
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”.
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”.
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”.
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”.
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:
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.