Considerations on User Interfaces

Some command-line tools, in particular on Windows, like to show a banner.

This is, for example, what powershell.exe prints:

cmd.exe prints the following text:

Far Manager prints a text too, which is shown when the program is closed:

autorunsc of the Sysinternals suite ^🗄️, prints the following banner:

Those banners do not really help the end user. Thus, avoid them, and if you really want to provide such banners, at least give an option for turning them off globally.

Similar banners are extremely uncommon on Linux and BSD systems; this makes it much easier to use the output of a program as input for another command.

Imagine having to remove the banner from every command before using it as input for something else.

For PowerShell, I find the banner particularly irritating; there are different workarounds, but all with different disadvantages.

It seems that some applications use a splash screen even without needing it, as it can be used to show off your brand with big pictures and logos that otherwise would not integrate well in the program.

There might be situations where a splash screen makes sense. An example could be a program that needs to load some data over the wire or load some data that requires time to be analyzed. I think it would be better if the application loads instantly, and then uses a simple progress bar for loading the data as a separate step. Maybe I just want to see what the current version displayed in the application is; there should be no need to wait for that.

If the program is just slow to start, then wouldn’t it be better to speed it up? Adding a splash screen might reduce the perceived waiting time, but it’s just an illusion.

Provide some meaningful information.

A spinner (with nothing else) provides no information, although it is the simplest thing to design/develop. A progress bar can help the user to indicate that something is actually happening.

A percentage counter can at least give a feeling that there is some real progress.

Some additional text like "loading foo", "parsing bar", or "analyzing baz" can help to understand what is happening, and eventually troubleshoot faster where the process is hanging, or at least why it is taking so long.

Copy file dialogs are a good example. The operation can take a lot of time depending on the input, so it is important to give the user feedback on how the operation is proceeding.

I believe that simpler command-line tools, like cp, would also benefit from a progress bar with time estimation for longer operations. One could argue that different dedicated tools are better, but I would prefer not to install many programs that do similar things, plus I might not be able to change the environment where I am working, so having more user-friendly defaults would be better.

Another good example are the download dialog and tools like curl and wget. Even if it is not really possible to estimate how long a download will take, as there are many external factors that affect the process, they still show useful information to the end user.

A bad example are most graphical boot screens. Granted, it is more difficult to estimate how much time it will take, as starting the operating system involves a lot of heterogeneous operations, but the current state is to hide any information, and it can be improved.

Before Mac OS Tiger, Apple would show which component of the system was being started ^🗄️. With Mac OS Tiger, they replaced the UI with a progress bar ^🗄️. The progress bar did not really measure progress, but it used the information how long a boot of the system normally takes. Thus, unless for some reason the boot is slower than usual, it is still providing some meaningful information to the user, as when the progress bar reaches the end, the system will usually be ready to use.

Since in some environments booting up can take a considerable amount of time, showing some information would help the user to understand how much time it will take.

One could refine the approach used on Mac OS Tiger; instead of measuring the complete startup time, measure the startup time of some components, and merge them together in a progress bar. One does not even need to rewrite the startup logic for logging the times; a separate process verifying every N seconds, which processes are running, would be enough. As always, the devil is in the details. Even with such an approach, I would still like to see what is being started; one thing does not have to exclude the other.

In case of issues, in particular if the boot process gets stuck or takes a really long time, some information is better than a progress bar or nothing at all.

If the computer is hung while configuring some particular peripheral (an external drive, the network, etc.), then the user knows why it is taking so long and can act accordingly.

There is no need to stay on track when switching from a list to a sublist. This makes it easier for the user to go with the mouse directly to the desired element.

One of the many differences between a computer of the 1990s and today is the size of the monitor.

According to this StatCounter article ^🗄️, the screen size 1366x768 overtook 1024x768 for the first time in 2012, and before that, the most used screen resolution was 800x600.

Which means there was less space to waste.

As of today, with different designs putting the focus on "minimalistic" and "clean" interfaces, there is a lot of blank space.

The dialog on the right was introduced in Windows 10, while the dialog on the left is more or less unchanged since Windows XP.

If a PC has been used for multiple years, it will have a lot more programs. The newer interface, on the monitor I’m using, is not even able to enlist more than ten elements.

One cannot even argue that the new interface is cleaner; what is the date that appears on each element? On the right, it’s obvious; it’s the column "Installed On", so it’ll be the date on which the application was installed.

But on the right? Maybe it’s the date when the program was released?

Also, the version number of the program is harder to recognize, especially since not all programs have it. With the tabular data structure on the right, it is obvious what the details are and which are missing.

And yet, the interface on the right is the current paradigm for the last ten years.

I believe the answer is "touch screens", and the fact that fingers are fatter than a mouse pointer.

For most computers, a touch-screen-friendly interface is useless, as they are used with a keyboard and a mouse.

On the other hand, I can understand the desire not to have separate layouts depending on whether the user is using a mouse or their fingers.

One disadvantage is that the user needs to learn two user interfaces.

Another disadvantage is that if there is a second, less-used interface, it will not be as well-known as the first one when searching for help.

Plus associated costs for maintaining and testing both interfaces.

Nevertheless, I’m not convinced that reducing the usability of all interfaces for a peripheral that is mostly unused is the best decision.

Another trending pattern is to hide information.

For example, this is a comparison of Explorer between Windows 11 and Windows XP, side by side.

In Windows XP, it is possible to see immediately where a file is located; it is written in the address bar!

In Windows 11, this information is hidden, unless one clicks on the address bar, where there is no text; otherwise it will change location. In fact, given that there is almost no difference in color between the address bar and the surrounding elements, you might not even realize that you can click there.

While showing too much information is confusing, the job of a file manager is to help the user create, open, delete, and move around files. Hiding where they are actually located does not seem helpful; on the contrary.

Windows, in particular, conditionally hides an important detail about files: the file extension. Since it is used for determining which program to execute, and since executables can have their own icon, it is a nightmare from a security point of view. It is easy to get tricked into double-clicking on what looks like a document, but in reality is an executable. At least it is possible to change the settings, and let explorer always show the file extension, which is, in my opinion, a better default setting.⁠^[1]

On Android, the situation is similar. Directories and files are hidden as much as possible from the user.

On iOS, I believe the situation is even worse.

Something similar has been happening at least since 2018 ^🗄️ with browsers on the desktop. For example, Chrome hides the www. part of the URL from the URL bar. It seems the ultimate goal is (or was) to remove the URL bar completely ^🗄️.

I’ve just learned that Windows Vista ^🗄️ defined some official guidelines on how to phrase dialogs:

I like especially this guideline

Unfortunately, even if very short, many applications fail to follow them.

Many programs assume their user are dumb, and that they cannot do anything, so why show a sensible error message?

Instead of providing some useful information, they might show a generic message like "Oops, something went wrong" or "Try again later". How is that helpful? How can the user try to solve an error?

Some programs, not only malware, try to trick their users, but more on that later.

Another change introduced in Windows Vista was renaming "My Computer" to "Computer". I did not like the change at the time; it seemed like the computer was not mine anymore, but after thinking about it, it made the UI a little easier to explain. First, imagine trying to help someone over the phone, without having remote access to the PC (it still happens to me), and telling them "go to my computer" or "click on my computer". It’s their computer, not mine, so the phrase might sound unnatural. But saying "click on your computer" is also wrong, as the label is "My Computer". If the label is "Computer", then saying "go to computer" or "click on computer" avoids the ambiguity.

Granted, as there is only one computer, the risk of not understanding each other, even over the phone, is low.

A more problematic situation might be a webpage, where there is not only your data, but also the data of someone else. If there is, for example, a button labeled "share my story" at the end of an article, to whom does "my" refer? To the person who wrote the story one has just read, or the one who is reading it right now?

Is it a button for sharing a link for the article you have just read, or a button for contacting the author of the article and giving some feedback? In this case, using a label like "share this story" or "share your story" should avoid the ambiguity.

On the other hand, "your" might not sound natural if it is not tied to an action. Imagine a chat or mail client that uses the label "Your Messages". "My messages" might sound better.

In other situations, for example, a webpage with a label like "my pictures", "friend pictures", and so on, one needs to pay attention when it says "my". Is he referring to the label, or is it his data?

Also, another thing to consider is that programs put their files under "My Documents", "My Pictures", and "My Music", which is why I always store my data outside of the predefined directories provided by Windows.

Last but not least, prefixing half the directories with "My" is not very informative; if you want to sort your folders by name and half of them are prefixed with "My", you won’t be happy.

To conclude, it seems that "my" and "your" are at best avoided. If necessary, use "your" together with an action, or if possible, use the (nick)name of the user: instead of "your account", just write "account", or "fekir’s account".

List and tabular data appear in multiple places; the most common one is when using a file manager.

There are multiple instances when people want to sort things. In particular, if the UI shows data in a tabular structure, then people might want to sort the data according to a specific column.

I’ve encountered undo notifications in one application I use on the phone.

This is what I’ve noticed when interacting with them:

You might be tempted to dismiss the last point; surely it’s the application’s fault if they cannot implement a working undo notification. Also, the other points can surely be improved; my application must be a bad one.

This is why I decided to test something else and see how it behaves. This is what I’ve observed with the online interface of Gmail:

Here is the failed undo after sending an email

Obviously, it is not possible to undo the sending of an email, so why does Gmail show this notification? It creates a false sense of security. One knows that it can undo the sending of an email (at least for a short amount of time), because there is a notification, and then it does not work when one needs it.

I assume that Gmail normally postpones the sending of a mail for some time, thus the "Undo" is in reality a "Stop the action in progress", but in my case, the notification was still there while the mail arrived on the other mail account, so it was clear even without clicking on the notification that it would not work. And no, I did not try to trick Gmail by blocking JavaScript, disconnecting my device, or something else.

I searched a little bit about why "undo notifications" are used and found different resources proposing them as an alternative to confirmation dialogs.

I get the intention; confirmation dialogs are distracting, and during some operations you might need to confirm your actions a lot of times, which is frustrating.

The undo notification does not break your workflow, but it also works poorly if you make an error.

I believe the metaphor of the recycle bin is a much better interface.

First, it’s not timed. I can still recover data I’ve deleted decades ago.

Second, there is a more granular control for the restoration process. If I deleted multiple elements, I can restore a subset of them. I can even restore them at a different location.

Third, even if restoring fails (for example, you cannot undo the deletion because the drive is full), the data is still there in the bin. Granted, explorer.exe on Windows will not let you open it directly.

The undo notification is beneficial if one acts quickly. Instead of opening the recycle bin and searching for the deleted element, just click on the notification. But it should not be the only method for recovering some deleted data.

The application I’m using on the phone uses this "undo notification pattern" when one deletes a conversation or a note. In this case, I believe the recycle bin interface can be applied without causing confusion and provides a better experience.

For other use-cases, like sending an email, the recycle bin does not make sense. In that case, a list with the operation in progress, with a countdown and a stop button, is a more sensible abstraction. But the interface should also be honest; if the action is still on the list, the mail should not have been sent!

While I was thinking about the recycle bin interface, I realized that Windows does not ask for confirmation anymore when deleting a file. I just learned that the Recycle Bin of Windows has an option named "Display delete confirmation dialog", which was active by default until Windows 7, and has been turned off by default in Windows 8. Since files are recoverable by default, one wonders why it was not off by default the whole time, as the confirmation dialog is, in fact, disruptive. If you try to delete a file permanently by bypassing the Recycle bin with Shift+Canc, then you will still get a confirmation dialog. Since it is not possible to undo that action, it makes sense.

Mozilla Firefox implemented an interesting change to its confirmation dialogs: a delay. If you try to run an executable that has just been downloaded, the corresponding button is greyed out for some seconds. This gives the user a chance to reconsider if he really wants to run the program or not, as it is generally a dangerous action.

In fact, the solution proposed by Firefox is much better than a confirmation dialog alone:

It surely happened to everyone; you do a certain routine, you know there will come a dialog, and you’ll click on confirm (or press the corresponding key for confirming) without thinking about it.

With the delay, there is no explicit additional action to perform, but similar to an unexpected confirmation dialog, it breaks the flow and gives the user a chance to stop and think. It is also worth noting that the confirmation dialog of Firefox is triggered only when executing a downloaded file, not something that should happen often.

While searching for more information about it, I discovered the change was triggered to avoid tricking the user to execute programs without even noticing ^🗄️!

Even if a confirmation dialog is still the right tool to use, some guidelines have changed. Once upon a time, all confirmation dialogs had the "OK" and "Cancel" buttons. "Ok" was for continuing the operation, while "Cancel" (or simply closing the dialog) would stop the operation. Today (it seems at least since Windows 7), the recommended guideline is to use specific labels over generic ones ^🗄️

On the other hand, I find the following confirmation dialog of the Android Guidelines ^🗄️ problematic, because "Cancel" and "Delete" are synonyms.

Granted, by reading the text, one would conclude that "Delete" deletes the data, and "Cancel" does not. But the point was to use specific verbs so that the user does not have to read the text, as many users apparently do not, but in this case, one might have to read it twice to be sure what to click.

I believe that in this case, "OK" and "Cancel" are easier to understand. If you absolutely want to avoid "OK" (or "Yes"), I would propose "Delete Image(s)" / "Delete file(s)" / "Delete data" as an alternative.

By the way, Thunderbird also shows a dialog with "Cancel" and "Delete" when deleting something from the Trash :(

Another thing to avoid is double negation (but that should be avoided everywhere) and changing the position of the "OK" (or more specific label) and "Cancel" buttons.

It might also make sense to use a different color (for example, red) for destructive actions, like Midnight Commander does.

I do not think I have any good examples of pop-ups, but a lot of bad ones.

In fact, pop-ups are so problematic that all browsers block them by default since Internet Explorer 7. On Windows XP, using Firefox that blocked pop-ups by default was alone a good reason for preferring it over Internet Explorer 6.

Instead of making real pop-ups, websites will render them on the webpage directly.

For example, when I linked the article to Wired ^🗄️, I was greeted with a pop-up with two columns.

The first column said:

I assume the word "partner" has a different meaning to me. I cannot imagine how over 220 companies need to access some data for nearly 20 different tasks that are all irrelevant to what I want to do: read a piece of non-personalized text. They really do care about my privacy </s>.

Not only that, I need to be bothered with a blocking pop-up. From a usability perspective, it’s a disaster, and to make things worse, a lot of websites are using this pattern, and have even more partners!

On Windows, an underlined letter in the graphical interface means that instead of clicking on the element, the user can use the keyboard to trigger it. There is a global option, Setting › Accessibility › Keyboard and toggle th option "Underline access keys".

If using an older version of Windows (at least Windows 7), the option should be located under the Control Panel › Ease of Access Center › Make the keyboard easier to use and then mark the checkbox "Underline keyboard shortcuts and access keys".

On Windows XP, it was not even considered an accessibility option. The relevant setting is Control Panel › Display › Appearance › Effects and then "Hide underlined letters for keyboard navigation until I press the Alt key".

I think marking it as an accessibility option is wrong because the underlined letters help the user discover how to use the program. In particular, there are instances when pressing Alt does not show underlined letters for keyboard navigation. For example, in the context menu of Explorer, pressing Alt closes it.

On KDE Plasma, it is possible to activate this option under System Settings › Colors & Themes › Application Style › Configure Style …​ › Keyboard accelerator visibility and select "Always show" from the drop-down menu.

Assuming that this setting has not been enabled (which is not by default), this is what I’ve noticed:

In the Dolphin file manager and Kate text editor, when pressing Alt, the relevant letters are underlined. The moment I stop pressing Alt, the letters are not underlined anymore. Contrary to Explorer on Windows, it is also possible to use Alt in the context menu.

In Firefox, if I press Alt (or F10), the menu appears and the relevant letters are underlined. I found no way to underline the letters of the menu entries shown in the hamburger menu. Contrary to Dolphin and Kate, there is no need to keep Alt pressed. If you have configured Firefox to always show the menu, then the relevant letters are always underlined.

On VSCodium, Notepad, and I assume most other applications, there is no need to keep Alt pressed, similarly to Firefox. In particular, VSCodium does not respect the KDE Plasma global settings, but it does respect the Windows global settings.

On VLC on Windows, there is no need to keep Alt pressed, while on KDE Plasma it is necessary.

On Thunderbird, the relevant letters are always underlined.

Hints about hotkeys also appear in Games, even though not necessarily as underlined letters, as shown in this case in Age of Empires 2

Before smartphones, the appearance of most, if not all, dialogs:

Since the advent of smartphones, toggles have partially replaced checkboxes, and dialogs have become more "interactive" by changing, for example, the description of the text.

This led to the situation that it is

Some common improvements ^🗄️ are using additional colors to distinguish the active state from the others, and/or using "ON" and "OFF" as additional labels to indicate the selected state.

Do not move elements around depending on how the user interacts with your program and while the program is running.

The Microsoft Office Ribbon UI ^🗄️ was introduced in Microsoft Office 2007.

On Windows, here is a side-by-side between Microsoft Word 365 and LibreOffice Writer:

I wondered why the save button in Microsoft Word 365 was greyed out, as I did not save the document after writing "Hello World". It turns out that when it loses focus, the icons on the title bar are greyed out. LibreOffice does not behave this way, and I think I prefer its behavior, as Microsoft Word 365 seems to be in an inconsistent state, as other icons are still colored.

To me, the classic LibreOffice layout also looks cleaner. In particular, all icons have the same height.

Another advantage of LibreOffice’s layout is that it requires less space and changes less when the application is resized. Here is another screenshot of Microsoft Word 365

And here is a screenshot on a smaller display

The position and form of multiple elements in Microsoft Word 365 changed, but remained consistent in LibreOffice Writer. The only thing that changed is the dimension of the screen; it is otherwise the same machine with the same settings.

While it is already difficult enough to navigate less PC-accustomed people through menus, having to help them when the interfaces are different is harder for both.

I suppose that an argument for bigger icons is that they are easier to find, and that the most used icons (according to a study in 2012 ^🗄️ paste was the most used icon) are bigger. Personally, I’ve never used the paste icon in any program, as I preferred the keyboard shortcut Ctrl+V, but it seems that I am a minority (emphasis mine):

Some other people might have never used another option, so to me, there is little appeal to make for everyone some icons bigger than others.

In Microsoft Office 365, bigger icons aren’t there because of touch interfaces. This is how the UI of the Microsoft Word 365 application looks on an Android phone:

And on an Android phone without a virtual keyboard

Note that there are no big icons, although it might be that on a bigger screen, like an Android tablet, the UI might be different again.

While comparing Microsoft Word 365 and LibreOffice Writer, I’ve noticed that the tooltips behave differently.

It’s a good thing I kept my Microsoft Office 2003 version installed on my Windows XP virtual machine, even if it has been at least a decade since the last time I started it. Even if I still have the license key, I’m not sure it is still possible to activate it today by calling Microsoft.

Both LibreOffice Writer and Microsoft Word 365 show in the tooltip that it is possible to toggle the option with Ctrl+B. This is good for making the UI more discoverable and getting more efficient if one uses the option often. Microsoft Word 2003 only shows "Bold" and not the keyboard shortcut.

At last, the tooltip in LibreOffice Writer and Microsoft Word 2003 is adjacent to the corresponding option, while in Microsoft Word 365, it is far away, under the lowest setting.

I guess the reason for this change is that a tooltip in Microsoft Word 365 can have links to the documentation:

If the tooltip were placed like in LibreOffice Writer and Microsoft Word 2003, then the user might not be able to access the option covered by the tooltip.

It’s not by accident that prior to Windows 11, the start menu was located at a corner (the lower left) of the screen by default.

One of the reasons for the previous location is the Fitts’s law ^🗄️.

I suppose that for the same reason, Mac OS places the menu of the programs at the top of the screen, and not at the top of the Window program itself.

Strangely, since Windows 11, the start menu is not located by default at the corner, but somewhere at the bottom.

If there were a Windows 11 Phone that uses the same UI, I would have assumed that placing the start menu in the middle makes it easier to reach with the fingers when using one hand ^🗄️. I guess this is also the reason why the Android Menu buttons are not exactly at the corner, although it should have been possible to expand the touch area to the corner.

While one could argue that on a big enough monitor, the centered position makes it easier to reach when the mouse is in the right region, another disadvantage is that the position changes depending on how many programs are open.

I generally do not like gestures.

Done slightly differently, the movement you’ve made has a different meaning.

At least on Android, they are optional, while on iOS, they are not. Another reason why I do not like it. When I try to use it, I’m often unable to get past the lock screen.

One could claim the same thing when using a keyboard and buttons; if you press the wrong key or button, you’ll get a different outcome.

The difference is that a gesture (on a phone) requires touching the screen, then moving the finger at a certain speed for a given distance in a given direction, and then stopping touching the screen. Compare that to just touching the screen for a moment at a specific location.

Or imagine if you had to drag the pointer on a PC with the mouse to log in or save a file!

This article ^🗄️ correctly states that on a PC, the double-click is a form of gesture. I guess that’s the reason why the timer for the double-click can be changed, or the double-click can be disabled completely.

On the other hand, some gestures are way better than clicking.

The first example that comes to mind is Mario Kart Wii ^🗄️ (and subsequent releases for the Wii U and Nintendo Switch). You can use a "conventional controller" and use the analog stick for steering. The (IMHO) preferred way to play is by using the Wii controller’s motion controls to simulate operating a steering wheel, which makes the game easier and more entertaining.

The reason I believe the game is easier is that using the analog stick means using more fingers. This requires a certain type of coordination of the movements of the fingers, as they are used for throwing objects, accelerating, doing tricks, wheelies, and drifting. Moving your arms, or moving the whole body, at the same time while using the fingers seems to require less coordination. At least this is what I’ve observed, especially in children, as they tend to move the whole body even when using a "classic" controller when steering. Using gestures might be less precise than using an analog stick, but requires generally more training/experience.

Another example is Wii Sports ^🗄️. Instead of using buttons and an analog stick for playing, you swing the Wiimote around. If you play tennis, swinging the Wiimote as if it were a racket is much more fun than pressing buttons.

If you play bowling, doing the usual movement is more natural than clicking on buttons.

In both cases, it is more intuitive to understand when and for how long you have to do a certain movement instead of when you have to click one or more buttons and move the stick.

This is not to say that for games, some form of gestures is always better. There are many games with gestures where gamers worked hard to create patches ^🗄️ for playing with classic controllers on the original hardware instead of moving the Wiimote around, as they believe it makes the game better.

For actions like unlocking a lock-screen or deleting a notification, the gesture implemented on the phone has little to no resemblance to a similar action done in the "real world", thus it does not feel that natural or is as error-free.

Some smart TVs use a remote that resembles the Wii Remote. In this case, I find the "classic" remote is generally easier to use; you do not even need to point exactly at the screen for selecting the channel or changing a setting, while with a Wii-like remote, chances of misclicking are, in general, higher. I guess that after a certain screen size, pointing controllers are not that practical.

I am also not claiming that all gestures are bad. I find, for example, pinch and zoom for zooming in and out intuitive, although it is not something one does in "real life". The rotate gesture is another gesture I find intuitive and is also something one does in real life when rotating a relatively small object.

Sometimes our system has to interact with external resources, like emails, web pages, or USB sticks.

Those are often considered insecure; if not handled with care, an attacker can gain access to the system.

It is important for components dealing with those resources to help the user identify and mitigate possible risks.

In older programs, it is less common to have a search dialog inside the application, for example, in the settings page.

It is a useful addition, although I fear it might be used as an excuse for unorganized menus or making gratuitous changes between versions.

There are multiple resources, especially for webpages, that explain how contrast is important to improve legibility; for example, on

There are different tools, especially for webpages, for testing if the contrast is high enough, like the Accessibility Inspector in Firefox ^🗄️ or an online service like the WAVE Web Accessibility Evaluation Tools.

I wonder if there is a tool that can be run locally to also evaluate native programs, and if not, something that can at least evaluate images.

Dark patterns are patterns that try to convince you to do something against your interest.