Usability is a concept that in most cases is completely ignored by those who develop a design idea, a software application, or any other system that involves interaction with the user. However much the most ingenious and revolutionary idea ever conceived may be, if it’s developed by neglecting the concept and structure of usability, it will fail miserably.

Whatever your design idea, you must necessarily have defined and structured:

• What your idea does. 😎
• Who is it for. 💭
• How to evaluate usability. 😃

Based on these three parameters, you have a complete view of whether the idea is feasible with the technological limitations present and whether it will have a large share of the market and earnings.

In this case, the last point, the more complex one, is evaluated. Below is a list of the essential components to keep in mind when starting to develop a design idea.

Index

Definition

Usability can be seen as the degree associated with an object based on some components such as:

• Effectiveness
  Accuracy with which the system acts based on user interaction.
  
  

• Efficiency
  The user’s effort to act on the system.
  
  

• Satisfaction
  The sense of satisfaction on the part of the user in seeing his action performed strictly.

It should be noted that the last condition, satisfaction, is a dimension that cannot be fully quantified. This is because satisfaction depends on the user to user.

These components are added memorability and learnability when analyzing usability based on the period in which the user uses the system.

In particular:

• Learnability
  Indicates how easy or difficult the system is to have to be learned by novice users who begin to interact with the system.
  
  

• Memorability
  How easy the features offered by the system are to be remembered by the user.

An example to better understand.

• Effectiveness
  Suppose we have a system represented by a plumbing system. The user wants to let the hot water out by acting on the affordance of the system, in this case, the water knob.
  We assume that the user performs the action correctly and then opens the hot water tap. The hydraulic system acts but instead of letting out the hot water, it releases the cold ones. This is a system with low effectiveness because it was not accurate in acting by the user.
  
  

• Efficiency
  Let’s take two doors built for submarines. These doors are made in such a way that it is necessary to turn n times to open or close.
  Suppose that the first requires 100 turns to open or close, while the second only 3. These two doors, therefore, have two different efficiencies: the first requires more effort on the part of the user than the other.
  
  

• Satisfaction
  It represents the sense of satisfaction that the user receives, even the most trivial one. Saving a file on your desktop brings a process of satisfaction to the user in having acted.
  
  

• Learnability
  Try putting a novice user in front of Photoshop for the first time. Although Photoshop may present aids to the user to help him understand the software, the user will find many difficulties in learning the system.
  
  

• Storability
  Similar speech always with Photoshop. The software has many different functionalities and methods to recall them, many of these certainly more complex and therefore more difficult to memorize.
  
  

Based on these dimensions, the usability of a product is evaluated. A product that is considered usable will have greater potential for success and commercialization in the market.

Affordance

Affordance represents the ability of the system to influence, through its shape, how it must be used. Put simply, an affordance has two functions:

• Make the user understand that he can interact with the system through it.
  
  
• Make the user understand the goal he will achieve if he acts on affordance.

An affordance can be both an element of real life: a door handle, a button to turn on a light bulb, and many others; is a software element: a button to go back to the screen, the components of a drop-down menu. In practice, thanks to the affordances that allow interaction between the user and the system and therefore represent an essential component for improving usability.

Based on this dedication, it’s understood that the concept of affordance represents a key element in being able to develop a usable system, the easier it’s to understand an affordance, the less difficulty the user will have in understanding how to interact with the system, minimizing learning and storing.

Interface

Keep in mind that when we talk about a system, in this case from the software point of view, we refer to a system consisting of two parts:

• System
  Represents the actual system that allows you to perform a set of services and functions.
  
  

• Interface
  It is the intermediate layer between the user and the system. The user interacts with the system using the interface and the latter will communicate the input received to the system.

So all the interactions that the user can make on the system are equivalent to interactions with the interface and not the system in its real representation. This concept is very important when the usability assessment is made both by considering the construction of the interface presented to the user and the complexity of the system and how its internal components interact with each other.

Donald Norman

Donald Norman’s feedback loop allows the user to communicate with the system and vice versa. The cycle is essentially formed on one hand by the user and on the other by the system.

It starts from what is called the gulf of execution:

1. The user develops the intention of wanting to act on the system.
   
   

2. The intention is transformed into real action on a system affordance.
   
   

3. The interface and therefore the system take the input received.

From here the system processes the input received and begins the gulf of evaluation:

1. The system perceives the state of the outside world.
   
   

2. Release the output.
   
   

3. The user evaluates whether the received output complies with what he expected.

To make the gulf of execution more efficient, affordances must be made efficient. The more easily the user understands how to interact with the system, the better the gulf of execution will be.
To improve the second gulf, on the other hand, feedback comes into play. These are the appropriate elements that signal to the user that the system has received his input.

This concept is only a very small part of what Donald Norman developed and wrote. Ergonomics, design, and cognitive processes are essential elements that can be searched online.

Shneiderman’s Eight Golden Rules

They represent a set of essential rules for the design of a system, in particular for the development of a graphical interface.

• Consistency at all costs

  In a system, similar action sequences are needed for similar situations. Standardizing the way information is conveyed allows the user to quickly become familiar with the environment.
  For example, suppose we need to develop a button to go back from screen B to A. The button will have its color, structure, font, spacing between characters, etc. If in the same application, we have to use a button again to go back, for example from a Y to X screen, we should not propose a different button but use the one already developed and used. This creates consistency in the development of an interface.
  
  

• Universal usability

  Recognize the needs of different types of users, considering users of all ages and with different technological backgrounds. For example, adding guides for inexperienced users and special functions for experienced users improves the perceived quality of the system.
  Universal usability can lead to problems if a design idea is developed without considering the set of users it is intended for. A fundamental process before starting development is to target users through, for example, building Personas.
  
  

• Offer informative feedback

  Each user action must be matched by an interface response so that each user knows what is happening at all times in a clear, appropriate and legible way. As already mentioned, the feedback guarantees the user that the system has received his input.
  
  

• Dialogue with users

  The sequences of actions must be organized with a beginning, an intermediate point, and a conclusion. Informative responses to the completion of a group of actions provide users with the satisfaction of completion, a sense of relief, and an indicator to prepare for the next group of actions.
  
  

• Prevent mistakes

  As far as possible, it would be advisable to create the interface so that users are not induced to make mistakes. If this happens, the interface should provide simple, constructive, and specific instructions for the solution. Users, for example, should not necessarily reset an entire form in case they enter wrong data, but they should be guided to correct only the defective part. Incorrect actions should leave the interface unchanged, providing instructions on restoring operations.
  
  

• Ensure reversibility

  As far as possible, the actions should be reversible. This feature relieves anxiety, as users know that mistakes can be undone, and encourages the exploration of new options. Survivors’ units should be a single action, a data entry activity, or a complete group of actions. In such a situation it is essential to keep all the data that the user has entered unaltered without deleting them. This strategy is essential because it prevents the user from entering frustrating situations by having to re-enter the same data that was deleted.
  
  

• Grant control to users

  The system must be designed in such a way that it is the user who is at the center of the system and not vice versa. This is one of the fundamental cornerstones for the design of human-machine interaction. In this regard, it will therefore be important to know the user through human-centered design techniques.
  
  

• Short-term memory

  The limited ability of a human being to process information in short-term memory requires designers to avoid interfaces in which users must store information to be carried over from one screen to another. This point is important as the number 7 rule comes into effect.

Short-term memory

As expressed, short-term memory allows you to preserve a limited number of information in the memory of the human being. This information is called a chunk. A chunk represents information or more information is seen as a single block of information.

Hence the rule that the maximum number of chunks that the human being can store in short-term memory is 7 +/- 2 (from 5 to 9). This means that when designing a graphical interface, it is necessary to avoid the amount of information present overloads the user’s short-term memory. An overload leads to the breaking of action and sends the user back to having to go back to retrieve the lost information.

Short-term memory is subject to attention. The focus is on selecting a subset of information, from a larger set, considered important for the context. The greater the diversification of information, the less attention will be paid, and consequently causes an overload of short-term memory.

Waited clues

Since attention is what makes the user focus on information or a set of limited information, it may be necessary for the interface designer to focus attention on specific information.

Therefore, the expected clues develop. Their task is to bring the user’s attention to a chosen part of the interface. Each clue can work in different ways.

For example, taking the macOS desktop, when an application on the dock requires the user’s attention it performs a jump animation. This is a clue I was waiting for working on the animation of the application. The desktop is a completely static element, creating an animation, and giving a movement, the user will immediately bring his attention to the application that requires it.

Gestalt principles

In the development of graphics, the laws of Gestalt are an important component for understanding how to view the components that build the interface itself. In particular, the laws are based on the concept:

“We must not decompose the user experience into its essential components but evaluate them as a whole. That is, the whole is more than the sum of its parts”.

Nothing complex, it is about building the interface graphics taking into account how all the components interact with each other, and not seeing them individually.

Among the laws we have:

• Law of proximity
  All other conditions being equal, elements close to each other tend to be seen as a single unit.
  
  

• Law of similarity
  All other conditions being equal, elements similar to each other tend to be seen as a single unit.
  
  

• Law of closure
  All other conditions being equal, elements present in figures close to each other tend to be seen as a single unit.
  
  

• Law of continuity of direction
  All other conditions being equal, lines on the surface that have the same angle tend to be seen as a single unit.
  
  

• Law of good form
  All other conditions being equal, structured elements with simple and elegant geometric shapes tend to be seen as a single unit.
  
  

• Law of past experience
  All other conditions being equal, elements that report previous information to the user tend to be seen as a single unit.

An example

It may be useful to view an example to better understand all of this information.

The example provides an application developed for iOS systems based on the automatic recognition of objects within an image. Let’s take the following picture:

Using the Gestalt laws of note how similar operations (Camera and Photo Library) are close to each other while the cancellation operation is separate. Plus, the law of closure and continuity of direction by seeing how each button is well delineated by lines and that the entire set of buttons follows a simple and elegant geometric shape.
In particular, the width of the present curve is the same as that of the iPhone screens.
This structure also allows for avoiding inadvertent selection errors by the user. Each action is well divided and visible to the latter.

The layout of a tab bar allows the user to access the main screens of the application. Each screen selected is highlighted through the appropriate color that highlights the state in which the system is located.
In addition to a descriptive text of the screen, there’s a representative icon. The latter allows to take advantage of the recall to the user’s past experience through the retrieval of information through association and marks the concept of coherence of Ben Shneiderman. In this way, the user, even a novice, can identify the appropriate screens of the application without having to focus on the textual part.
Similar speech to the rule Offer information feedback, the user receives the blue icon as feedback from the system, in this way he understands which interface he has selected.

The structure of the Tag tab is mainly composed of a header that encloses the set of initials of the tags and an index that facilitates the scrolling and selection of specific tags.
The header is structured through a coloring that allows the user to identify a group of tags simply and immediately. Using the index, on the other hand, the user can scroll directly to the specific tag group.
We find again the laws of the Gestalt.

In particular:

• Law of proximity
  All the tags defined by the appropriate header are identified as a single unit as they define the same set of tags starting with the same letter.
  
  

• Law of similarity
  Each letter identifying the header is considered a single unit that differentiates the subsets of tags.
  
  

• Law of continuity of direction
  The use of lines delimiting the surface that point towards the same direction more easily constitutes the sense of unity of the information that is being displayed.

Each feature present in the settings panel is built based on an image that holds the main aspect of the feature itself. For example, the Delete all data mode is flanked by a trash can icon that refers to the concept of elimination, and the i of the Show Tutorial takes you back to the information of the info point where you can get details on the use of the application.

The Confidence Level function is placed as the first element of the list being representative of the modification of the application behavior. Through these functions, the user has control over data processing for object recognition. Through the use of the Gestalt laws, we return to the use of the law of closeness, similarity, closure, and others.

In particular:

• Law of proximity
  Similar settings are brought closer together to be highlighted as a single unit. For example Clear Cache and Delete all data both express similar actions that go to delete data.
  
  

• Law of similarity
  Elements that refer to another page such as Confidence Level and About are described with a specific color and an identification symbol that refers to the concept of continuity of functionality. Instead, the other features are that identify actions, as described by Apple’s HIG for iOS, which refer to the pop-up gods.
  
  

• Law of closure
  Each pair of elements are closed by a horizontal line that covers the entire horizontal space of the screen. This makes it possible to strengthen the concept of the unity of specific pairs of features. Inside them, however, the horizontal line starts from the beginning of the wording of the functionality to mark the diversification of the actions that can be performed.
  
  

• Law of good form
  The elements are described by regular, simple, and clean geometric shapes.

One can fall into the mistake of considering it inappropriate to have two features such as Clear Cache and Delete all data close to each other. This could lead to user errors in running one feature instead of another. This possible possibility is abolished by the use of confirmation requests and the use of harmless inputs by marking dangerous actions with colors.

Usability test

The usability assessment, based on what is written, is carried out based on tests:

• Heuristic tests.
• Usability test.

Usability tests involve user involvement with product prototypes. These tests are essential because they allow the prototype to evolve to its ideal representation as a final product. To learn more, the following reading may be useful.

Conclusion

The eight rules of Ben Shneiderman and the Gestalt Laws are the main heart on which to structure an interface and the entire system. The application marks consistency, and the use of colors, layouts, and lettering remains consistent in every part of the system.
This standardizes how information is conveyed and allows the user to quickly become familiar with the environment. The system responds to every action by the user, each interface has a limited number of precise information chosen based on the reference screen, any action is reversible, and much more.

Based on these concepts, you can begin to outline the essential elements that make up the graphical interface of the system.

It’s important to remember that this phase is the last to be carried out, you must first decompose the design idea into sub-ideas and identify the target users for which this idea is intended.