DEV Community

Jordi Calveres
Jordi Calveres

Posted on

Thinking about Flexibility and Efficiency of Use

One of the many challenges that UI and UX designers face before, during, and after designing or improving features or pages is how to know whether they are on the right path or not. Although there are many ways to test your design, "Jakob Nielsen's 10 user interface design heuristics" is one of the things you must do when designing, wireframing, or evaluating your design.

Heuristic evaluation is a method that helps to identify or point out usability issues in the user interface (UI) of digital products such as software, mobile applications, and websites. If it is done in the early stages of the design, it will be an additional benefit.

Today we will talk about one of Jakob Nielsen’s usability heuristics: "Flexibility and Efficiency of Use"

In UX, we must adapt to people with various abilities. Our system should be flexible enough to allow users to use multiple methods to accomplish a given task. A flexible system is efficient because people can choose the method that suits them best. The usability heuristic that we are going to talk about says that we should prioritize flexibility and efficiency through the use of shortcuts and accelerators, which are invisible to novice users and can speed up the interaction with expert users. This method allows the system to satisfy both inexperienced and experienced users at the same time.

In addition, a flexible and efficient system not only helps users transition from novice to expert but also enables them to handle tasks in a variety of ways to suit their work style. This can be as simple as constructing functions in an open rather than prescriptive way.

In this blog entry, we will go through some examples that illustrate this usability heuristic.

1️⃣ The most common shortcut

Novice users can easily learn how to copy and paste a line of text from one document to another by simply highlighting the text and selecting Copy from the Edit menu, and then selecting Paste from the Edit menu of the target document.

To speed up this operation, users can easily find that right-clicking on the highlighted text brings the same action. This requires less mouse movement and allows users to complete tasks faster.

For the expert user, these operations can be done faster by using the Command + C and Command + V (Ctrl + C and Ctrl + V on Windows) keyboard shortcuts. These shortcuts are displayed next to each action in the "Edit" and "Popup Menu" to inform the user of their existence.

Alt Text

2️⃣ Mobile keyboards Accelerators

This iOS keyboard allows sliding between the letters of a word without having to tap them individually. This gesture is an accelerator: it can help experienced users, but it will not increase the difficulty of learning for novices.

Alt Text

The trick to designing usable accelerators is to make them discoverable but not compelling. The classic solution for keyboard shortcut accelerators is to display them next to the relevant commands in the menu or toolbar. Novice users do not need to pay attention to keyboard shortcuts at all, but repeated exposure to them can help experienced users learn.

3️⃣ Undetectable Accelerators

However, sometimes, the accelerator is not so obvious to the novice, and it looks like a hidden function that can not be found. Frequently, these accelerators are discovered accidentally or by playing with the system. Once these actions are discovered, the user can complete the actions faster. They speed up the process.

An example can be seen using the Gmail application. If a user accidentally swipes to the right or left, they will learn about hidden accelerators that allow users to store mail in increments quickly or move it to another folder. Of course, these operations can still be implemented directly from every single message, but if experienced users use accelerators instead of performing these operations, the processing speed can be accelerated. Swiping is much faster than entering each email individually.

Alt Text

This accelerator also exists in WhatsApp. I have always been used to long-press a message to reply to it. An accelerator for this frequent operation is provided, which makes it possible to swipe right on the message to reply to it. It may be a good habit for the application to provide prompts or hints to users after completing standard operations to let them know that the accelerator exists. Otherwise, just like the WhatsApp example, you will need to discover the feature accidentally or through a trial product.

Alt Text

4️⃣ Adobe Photoshop Flexibility

As explained before, the classic solution for keyboard shortcut accelerators is to display them next to the relevant commands in the menu or toolbar. Adobe Photoshop displays a prompt message indicating how to use the toolbar item in the small overlay that appears when the mouse is hovered to access the keyboard shortcut (M in this example).

Alt Text

In addition, Adobe allows users to be flexible enough to edit and make their own series of shortcuts. This flexibility is suitable for advanced users. Users can change and create shortcuts according to their professional fields.

Alt Text

🌟 Extra information

Besides accelerators and shortcuts, there are other ways that users can have more efficiency and flexibility to speed up their work.

First, when installing new software, the user is asked if they want to continue with the default installation or with the advance installation. Advanced users choose a custom installation to eliminate unnecessary services or unnecessary plugins.

As we can see in the image below, the user is asked whether he wants to use the typical installation, the complete one, or the custom one. With this, the application accomplishes a way to speed up the work to the novice users as well as offering flexibility to the expert ones.

Alt Text

Second, macros are another way to increase flexibility and efficiency. They are in an intermediate position between user-defined customization and system-created accelerators. Macros allow users to run a series of commands using a single trigger, allowing expert users to automate repetitive or tedious tasks with predictable steps. (Excel users may create macros by recording a series of mouse clicks and keystrokes or writing scripts.) Macros are not the only way to efficiently process batch operations, however, simple functions allowing users to select multiple items in a menu (for example, by checking the corresponding checkboxes) and running commands on them are also accelerators.

Airtable provides automation, which is a macro function that allows advanced users to link together multiple actions that can be triggered automatically. Airtable also provides more traditional checkboxes for each row in the table to allow users to perform batch operations (such as coloring or filtering) on ​​multiple rows at the same time. Both of these functions are accelerator types, but they have different levels of required user workload.

Alt Text

Finally, I would like to mention a bad example regarding this usability heuristic. Even though most of the applications try to provide an efficient and flexible environment, some of them do not achieve it completely.

For example, Vimeo does not provide users with a basic plan to adjust the playback speed of their videos, which reduces the efficiency of the video viewing process for users who want to customize the playback speed by increasing or decreasing the video playback speed.

Alt Text

Top comments (0)