DEV Community: Jordi Calveres

Thinking about Flexibility and Efficiency of Use

Jordi Calveres — Tue, 09 Mar 2021 20:24:23 +0000

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.

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.

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.

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.

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).

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.

🌟 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.

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.

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.

Thinking about Design Problems

Jordi Calveres — Mon, 15 Feb 2021 19:05:40 +0000

Most people think that design is about making things look beautiful - a decoration. But design is both an art and a science, it is a cold working process. However, the design is not allowed to fail. The design of websites and mobile applications, as well as the design in general, is a complex and delicate process, it is more than making things pretty.

Every aspiring designer wants to create products that can become iconic and well-known worldwide, such as the unique wedge shape of Ferrari or the practicality of the Swiss army knife. But despite their high hopes, many people end up creating some very interesting and scary designs before becoming the next Giorgetto Giugiaro or Le Corbusier.

Jared Spool, the American writer, researcher and usability expert, once said: “Good design, when it is done well, becomes invisible. It is only when it is done poorly that we notice it.”

There are many reasons for a bad UX: maybe designers prefer beauty over usability (a standard over-function problem), or they support their design on their suppositions rather than precise user research. Maybe they integrated intrusive features (such as pop-up windows) in an attempt to push users to perform specific actions. Generally, if users have to research in-depth to achieve what they want, feel forced to do things they do not want to do, or get lost in the user flow, then it means that the UX design needs to be improved.

In this blog entry, we will go through some examples of products with a bad design that creates an overall bad UX.

1️⃣ Can you read between the lines?

These kinds of laundry machines can be found in many houses.

As you can see, the display is packed with different options that you can choose from. You may be able to figure out what some options do, however, some of them do not make any sense at all.

Besides, the worst part of this design is probably that all these settings are not even required. You can wash most clothes in cold water.

The interface on the washing machine could be simpler because, in my opinion, I would never use most of the settings. Probably, I would only use a couple of buttons on the machine.

On the other hand, I would say that some washing machines have a really good design. For example, the following one.

This interface only requires the user to press four buttons, which makes the machine easy to use. Does the user really need to choose the rotation speed? Probably not.

2️⃣ Are you hungry?

Most of the microwaves that common people use are a combination of excessive useless buttons with a completely flat surface that has zero tactile feedback.

The following microwave supports and contains 34 buttons.

The problem with this design is that usually only two of the buttons are used and therefore 94% of the buttons are not accounted for.

People usually get accustomed to using poorly designed microwaves thanks to trial and error. However, if companies would just study their customer base and ask them questions, they would probably find that many people complain that microwaves are not as easy to use as it seems.

In my opinion, a good design should be one that only has few buttons and the options are really clear. For example, I would say the microwave that can be found below has an amazing design.

This microwave has a clear and simple interface that can be interpreted by anyone.

3️⃣ Design in chaos

Having a bad design in a website can make you close it as soon as you enter. In this section, we will see the contrast between badly designed websites that most of the time will overwhelm anyone who enters them and well-designed ones that have a consistent, well-designed interface.

First of all, we can see Bella de Soto's website.

Every time you enter the site, you feel that these guys are trying to put all the content they have on one page. There are too many different content and many low-quality images on the homepage, that you will probably feel dizzy once you enter it. In addition, the homepage is too long and too wide, meaning that you will have to scroll it horizontally and vertically to find the information you need.

Nowadays, to create a user-friendly design as well as a good design, it is needed to keep it simple and create intuitive designs for users. If you don’t want to be the only user that visits the website, you need to create one where users should never get lost. In order to obtain a user-friendly website, web developers should remember to use a grid, which makes the process of placing elements on the web page very easy.

The success of a website usually depends on only one thing: how users perceive it. "Does this website bring me value? Is it easy to use? Is it pleasant to use?" These are the questions that visitors think of when interacting with the products, and with them, they form the basis for their decision to become regular users or not.

Below we can see the design of a well-organized page with a well-defined grid.

As you can see, on this page everything is clean and organized. All the elements are grouped and positioned in relation to each other. Besides, you will not probably get lost on this website. This is thanks to the use of the grid as explained above.

In conclusion, it is obvious that a good website not only involves design. However, customers want and expect an attractive visual layout. They will judge your business based on appearance before reading a word.

🌟 Extra information

Besides creating an overall bad UX, sometimes if the target user is not designed at the center of the design process, these technologies can lead to life-threatening situations.

Below we can find some examples that show how various designs failed to achieve their purpose, as well as the consequences of these failures.

On 20th January 1992, a tragic incident happened due to a thoughtless design that took the lives of eighty-seven people. Two skilled pilots with over 12,000 hours of flying experience between them were traveling to Strasbourg, Germany when adverse weather conditions caused interruptions with the flight’s scheduled course. With their joint experience, they calculated that a descent of 3.3 degrees would safely align them with the runway. Unfortunately once the clouds broke the pilots came face-to-face with a mountain and seconds later the horrific collision occurred, only nine people survived.
An investigation into how this accident occurred showed that the interface the pilots used to enter information was to blame. The reason that it was difficult to grasp what data was being entered was due to the same screen handled two pieces of key information — Flight Path Angle (FPA) and Vertical Speed (VS). Rather than enter -3.3 for the Flight Path Angle, the pilot entered -3,300ft/min for the Vertical Speed. The small interface and the only difference being a missing decimal point robbed people of their lives. This could have easily have been avoided if the interface was more carefully considered. When we design it is vital to understand that unclear information can lead to catastrophic incidents. (Source)

This is the interface that shows the Flight Path Angle and the Vertical Speed

Besides that, in the source, you will be able to find more examples that relate to the topic of life-threatening situations due to a bad design as well as other examples of bad designs.

Finally, I would like to mention an interesting research paper that talks about the importance of good interface design. This paper is well-written and goes in-depth with some aspects of interface evaluation.