ENDS 12/4: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


This lesson introduces interaction design, affordances, and ten usability heuristics that inform the creation and evaluation of interactions in digital products. 

Interaction Design Fundamentals

Let’s explore a couple more of the ten usability heuristics. We’ll cover principles that examine:

* What gives users a sense of control when they use a product? 
* How can design conventions support user expectations?

### User Control and Freedom

The third usability heuristic is **user control and freedom**: the design should allow users to cancel or back out of actions done by mistake. Users should be able to freely navigate through the product without getting stuck.

When we use digital products, it’s common to change our minds. For example, after adding an item to an online shopping cart, we may decide not to buy it. Furthermore, we may complete actions by mistake, such as selecting “print” when we actually want to download.

As designers, we should plan ways that users can efficiently back out of mistakes or unwanted processes. For example, we can provide user control by including “back” and “cancel” buttons and allowing actions like “undo” and “redo.”

In the [“Chapters”](https://community.codecademy.com/) section of Codecademy's website, we can find chapters of coders around the globe. If we find a chapter of interest and select “Join us,” a pop-up with more information appears. 

This message provides more details about the joining process and includes a “Go Back” button. We may not be ready to join the chapter, so it’s helpful to have a way to cancel this action.

![Screenshot from the Chapter’s section of Codecademy’s website. The “Join us” button was selected. Then, a pop-up with more info appears. There’s an option to continue as well as a “Go back” button that allows the user to back out of this action.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/11-Ex6-User-Control-Go-Back.png)

### Consistency and Standards
 
The fourth usability heuristic is **consistency and standards**: Users should not have to wonder whether different actions, words, or situations mean the same thing. Designs should adhere to platform and industry conventions. 
 
Following industry standards means using conventions that are standard in digital products. This is helpful to the user because they can leverage prior knowledge when they open a new interface. We want to minimize the amount of new information users must learn to interact with the product. 
 
There are many standards to keep in mind, but one to consider is icon usage. Here’s a screenshot from Codecademy’s website. There are three icons: a magnifying glass, a bell, and a bookmark. If you want to check notifications, which icon would you select? 

![Screenshot of the navigation icons at the top of the Codecademy website. There are three icons: a magnifying glass, a bell, and a bookmark.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/7-Ex6-Consistency-Nav-icons.png)

Even if you’re new to Codecademy’s site, you may associate the bell with accessing notifications. This icon is standardly used with interactions that involve notifications. 
 
In addition to following industry standards, our product should follow internal standards. This means that interactions should be consistent within the platform. 
 
For example, Codecademy’s site follows an *industry* standard by using the bookmark to indicate a “saving” interaction:

![Screenshot of the navigation icons at the top of the Codecademy website. There are three icons: a magnifying glass, a bell, and a bookmark.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/8-Ex6-Consistency-Nav-Icons-2.png)

The site follows an *internal* standard by always associating the bookmark with saving resources. The bookmark icon is present on any page that has a saveable resource. The term “resources” is always used to refer to what the user is saving

![A screen shot from Codecademy's website. The user found an article they want to save. When hovering over the bookmark icon, a label appears that says "Add to saved resources"](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/9-Ex6-Consistency-Save-Resources.png)

![A screenshot from Codecademy's website. If we select the bookmark icon, a modal appears that says "Saved Resources" and displays titles of recently saved articles](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/10-Ex6-Consistency-Save-Resources-2.png)

The consistency of the icon and the word “resources” clarifies that any interaction with the bookmark icon on Codecademy’s site is associated with saving a resource or accessing saved resources.

User Control and Consistency

Our walk through the usability heuristics is coming to a close &mdash; we’ve reached the final two heuristics! These heuristics ask us to consider:

* How can we help users understand and resolve errors?
* How can documentation support the user’s experience of an interface? 
 
### Help Users Recognize, Diagnose, and Recover from Errors 
 
The ninth usability heuristic is **help users recognize, diagnose, and recover from errors**: error messages should use plain language (no error codes), clearly explain the problem, and constructively suggest a solution.

In an ideal situation, users seamlessly navigate through a product without issue. While striving to design a smooth experience, we should also consider the possibility of users making errors or needing additional support. 
 
When we design interactions, we should consider the possible errors that could be made. If the user makes an error, the interface needs to notify them and help them resolve it. The error message must clearly describe the issue and provide an achievable solution.
 
Let’s check out an example of error recognition and recovery from Codecademy’s website. To create an account, we must fill in our Email and Password. However, when adding this information, we may make some errors: 

![A screenshot of the log in screen from Codecademy's website. The boxes labeled "Email" and "Password" are outlined in red. Exclamation points are displayed in each box to emphasize that there is an issue with the entered information.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/16-Ex9-Error-Recovery-Log-In.png)

First, the interface helps us notice these errors by providing visual feedback. The black boxes turn red, and an exclamation point icon appears in each box. 
 
Additionally, the interface explains what we need to do to resolve the errors. Brief descriptions beneath each box explain what we must change: A valid email must be entered, and the password must have at least eight characters. 
 
With this information, we can update our email and password and successfully complete the signup process.

 
### Help and Documentation
 
The tenth usability heuristic is **help and documentation**: The design should offer documentation that allows users to complete tasks or resolve problems. 
 
In general, the more complex the design, the greater the need for documentation. Some simple products may be usable with little to no documentation. In other products, documentation may be essential to ensure that users can understand the ins and outs of the interface.
 
If documentation is needed, we should ensure that users can readily access and understand it. Users should be able to locate the information they need. 
 
One way to support users is to provide multiple ways to search for documentation. For example, in Codecademy’s Help Center, users can type in keywords, browse articles, browse by category, or message a chatbot. 

![Screenshot of the search bar in Codecademy’s Help Center.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/17-Ex9-Help-Help-Page-1.png)

![Screenshot of Featured Articles in Codecademy’s Help Center.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/18-Ex9-Help-Help-Page-2.png)

![Screenshot of “Browse articles by category” in Codecademy’s Help Center.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/19-Ex9-Help-Help-Page-3.png)

Keeping documentation organized and searchable makes it easier for users to find answers to their questions. 

Error Recovery and Help

So far in this lesson, we have covered two main concepts: interaction design and affordances. Now that we know what these concepts are, we’ll dissect how they are created in digital interfaces. 

By examining the five dimensions of interaction design, we’ll answer the following questions: 

* What are the different aspects of an interaction in a digital product? 
* How do these aspects work together to create interactions and affordances?  

### 5 Dimensions of IxD

The **five dimensions of interaction design** are the aspects that make up interactions in digital products. These dimensions are words, visual representations, physical objects or space, time, and behavior.

These five dimensions of IxD were originally created by  [Gillian Crampton Smith](https://www.interaction-design.org/literature/author/gillian-crampton-smith), a professor at London’s Royal College of Art and [Kevin Silver](https://www.uxmatters.com/authors/archives/2007/07/kevin_silver.php), a senior interaction designer. 

These dimensions are the factors that impact the user’s experience of an interaction. As designers, we can use the five dimensions of IxD as a starting point for planning interactions and their corresponding affordances.

### Dimension 1: Words

Words, such as labels and instructions, help the user understand how to interact with the product. We should use language that is clear, concise, and easy for users to understand. 

In a Codecademy lesson, there are buttons for navigating between exercises. These buttons are labeled “Back” and “Next.”  In the context of the other elements on the screen, these one-word labels are likely enough to help us understand what will happen if we interact with either button.  

![Screenshot of buttons from Codecademy’s LMS. The first button is labeled “Back” and the second button is labeled “Next.” The back button will move us backward in the lesson while the next button moves us forward.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/4-Ex3-IxD-Dimensions-Words.png)

### Dimension 2: Visual representations 

Visual representations refer to any visual element that the user can interact with, such as icons, images, diagrams, or typography. We should use visuals that are relevant to the interaction and aligned with standardly accepted usages. 

For example, the “x” icon is a visual widely used for interactions involving exiting, closing, or canceling. If we open the chat on [Codecademy’s Help Center](https://help.codecademy.com/hc/en-us), we can close that window by selecting the “x” icon.

![Screenshot of the chat window on Codecademy’s Help Center webpage. The chat shows an introductory message from the chatbot and a text input for the user to type in. Beneath this window, there’s a white “x” icon on a purple square that we can use to close the chat window.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/3-Ex3-IxD-Dimensions-Visual.png)

### Dimension 3: Physical objects or space

Physical objects refers to the device on which the product is displayed. Space is the environment that the user is in when they interact with the product. 

It’s essential to understand the limitations and capabilities of the device(s) that will display the digital product. For example, we may use our hands and voice to interact with a tablet while we use a mouse to interact with a desktop computer. The available interactions should align with the characteristics of the device. 

We also want to consider where the user will be when they use the product. For example, imagine a GPS app that drivers commonly use. The drivers’ environment is in motion, and they can only glance at the app for a few seconds before returning focus to the road. These environmental details inform our approach to designing practical interactions.

### Dimension 4: Time 

Time encompasses the changes that occur in the interface over time, such as animations, sounds, or media. Time also includes the time that users spend using the product.

For example, when opening the Codecademy website, this animation plays. The animation stops once the content has loaded. 

![A gif of a loading animation. The Codecademy "C" emerges over a brief span of time as the site loads](https://static-assets.codecademy.com/Courses/interaction-design/cc-loading.gif)

### Dimension 5: Behavior

The behavior dimension focuses on how the previous dimensions combine to define interactions. This dimension includes *how* users complete actions on an interface. It also covers how the interface responds to the user’s actions.

We can see the behavior dimension at work when we take a Codecademy quiz. After reading the question, we select one of the answer choices. The answer turns green. Then, clapping hands appear alongside the words “correct!” This feedback from the interface helps us determine that we can move on to the next question. (If we get feedback about an incorrect answer, we’ll stay on this page and try again).

![Gif from a Codecademy quiz. The learner selects an answer choice. The answer choice turns green. Then, a visual of hands clapping appears next to the word “Correct!”](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/2-Ex3-IxD-Dimensions-Behavior.gif)

Five Dimensions of Interaction Design

On to a couple more usability heuristics! Next up, we'll review heuristics that ask us to consider: 

* How can the design minimize potential user errors? 
* How can the design ease the user’s cognitive load? 

### Error Prevention 

The fifth usability heuristic is **error prevention**: The design should help the user avoid making errors. This includes removing error-prone conditions or providing a confirmation step before users commit to the action. 

When designing, we should first focus on preventing high-stakes errors. Then, we can work on minimizing any smaller issues. We can help prevent errors by including warnings, supporting actions like “undo”, adding helpful constraints, and using default settings strategically.

For example, if you’re booking a round-trip train ticket, constraints may prevent you from selecting a departure date that precedes the return date. The default number of passengers may be set to “one” to prevent you from paying for more tickets than you need.
 
Let’s check out another example from Codecademy’s website. To prevent you from accidentally deleting your Codecademy account, there are a few error prevention strategies in place. 

First, when you select “Delete Account” from the account page, your account will not be instantly deleted! Instead, a warning pops up, explaining that account deletion is irreversible. 

In addition to this warning, the site will only allow you to delete the account after you log in again. This extra log-in step makes it harder for you to mistakenly complete this action. 

![Screenshot from Codecademy’s website. From the account page, the “delete account” button is selected. Then, a warning appears that explains this action is irreversible. The site says you must log in again in order to continue with the account deletion.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/12-Ex7-Error-Prevention-Delete-Account.png)

### Recognition Rather Than Recall 

The sixth usability heuristic is **recognition rather than recall**: The design should limit the need for the user to remember information that is required to use the interface. Elements, options, and actions should be visible so the user can readily recognize them. 

Generally, it’s easier for us to recognize information rather than remember it. For example, if you’re learning a new language, you may be able to recognize foods listed on a menu. Without the menu, it may be challenging to recall the words for these foods.

We can reduce the memory load required to use the interface by ensuring that the user can locate and understand the various options. As an example, a user may learn about the product from an onboarding tutorial. Any information needed to use the product should be accessible outside of this tutorial &mdash; the user should not have to remember it.

Another way to limit the information that users must recall is to provide help in context. For example, when signing up for a Codecademy account, we must add an email and a password. 

If we select the information icon above the password box, a list of password requirements is revealed.

![Screenshot from Codecademy’s account sign up process. The information icon above the password box has been selected. This opens a list of password requirements that help the user recognize how to build a strong password.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/13-Ex7-Recognition-Password-Req.png)

These password requirements are fairly common, but the site decreases our memory load by reminding us what goes into a strong password. 

Error Prevention and Recognition

When designing digital products, the ten usability heuristics provide a starting point for creating effective interactions.
 
We’ll start with two heuristics that help us consider:
 
* How will the user know if their actions are successful? 
* How can the interface align with user expectations and prior knowledge?  
 
### Visibility of System Status
 
The first usability heuristic is **visibility of system status**: The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
 
As users complete interactions, they need clear, timely feedback from the interface. Without feedback, they will not know if the system is processing their actions. 
 
Feedback takes many forms in a digital interface. It can be subtle, such as an icon becoming darker and bolder after we select it. Feedback can also be more obvious, such as a pop-up message that states how long the system needs to process an action. 
 
Check out this example of the Focus Timer from the Codecademy website. When we select the up arrow, the number of minutes increases. When we select the down arrow, the number of minutes decreases. The number changes according to our actions, which provides feedback that the system is receiving our actions.

![Gif of the Focus Timer from Codecademy’s learning management system. When the up-arrow is selected, the number of minutes increases. When the down arrow is selected, the minutes decrease.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/6-Ex5-Visibility-Timer.gif) 

### Match Between System and the Real World

The second usability heuristic is **match between system and the real world**: The design should use language that is familiar to the user. Information should be presented in a natural and logical way based on real-world conventions.

This principle reminds us to avoid using technical jargon or complex sentences. Instead, we should use phrases that are clear and easy to understand. The language we use should match what our users know. For example, sound-mixing software for expert music producers will use a different vocabulary than a similar program for young students. 

Additionally, we want to align the design with the world around us. Digital products don’t exist in a vacuum! We should consider what users expect from an interaction based on their life experiences. For example, when ordering at a restaurant, we may request a substitution based on dietary needs. Similarly, a food delivery app could provide the option to customize a dish before adding it to the bag. 

Check out the chatbot from [Codecademy’s Help Center](https://help.codecademy.com/hc/en-us): 

![Screenshot of the chatbot from Codecademy’s Help Center. At the top, there are introductory messages from the bot explaining how to use it. Then, there are a few concise options (e.g. “paid but can’t access”) that the user can select to start the conversation.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/5-Ex5-Real-World-Match-Chatbot.png)

This chatbot follows the “real-world match” heuristic in a few ways:

* The opening message says: *“Hi there, I’m Codecademy’s support assistant. Choose an option below or describe how I can help in a few words.”* In the real world, a conversation starts with a greeting and some context.
* The chatbot displays pre-selected issues users can choose: “paid but can’t access,” “refund,” and “cancel subscription.” These descriptions use clear, understandable language instead of industry-specific jargon.  

Visibility and Real-World Match

Previously, we covered the five dimensions of IxD, which are the building blocks for creating interactions. But how do we bring these dimensions to life in a way that supports users? 

We can reference guiding principles known as usability heuristics to design effective interactions. These principles provide a solid foundation to work from, though they are not a replacement for usability testing. 

### 10 Usability Heuristics
 
The **ten usability heuristics**, developed by Jakob Nielsen and Don Norman, is a set of ten general principles for good interaction design.
 
These heuristics were created in the 1990s. While some of the language has been updated since then, the ten usability heuristics have stayed the same. In digital product design, these principles are well-established and widely used. 
 
When we design, usability heuristics help us:
 
* **Focus on usability:** These principles center around creating user-friendly interactions that support a smooth user experience. Implementing usability heuristics is one component of designing a usable product.
 
* **Save time:** The usability heuristics have been proven over time and are widely accepted. Therefore, we don’t need to reinvent the wheel when designing interactions! Instead of starting from scratch, we can leverage relevant heuristics to inform our design choices.
 
* **Evaluate interactions:** We can reference heuristics when designing and evaluating interactions. When we evaluate, it’s helpful to have language that allows us to pinpoint specific strengths and weaknesses in the design. 
 
Overall, user-friendly interfaces follow the ten usability heuristics. However, we should think of the heuristics as general guidelines. 

While heuristics offer a baseline for meeting user expectations, they can’t tell us what our users need within the specific context of our product. Thus, user research and usability testing are still necessary to ensure that the design meets our users’ needs. 

In the upcoming exercises, we will delve into the [10 usability heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/):

1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

In addition to defining each heuristic, our mission is to analyze designs that follow and break these heuristics.

Illustration of the 10 usability heuristics. Each heuristic features an icon that symbolizes what it represents.

Usability Heuristics

Imagine you’re planning a friend’s birthday party. Before the event, you order four dozen cupcakes using a food delivery app. The process may start like this: 

* You type “bakery” into the search bar and tap the “go” button. → The app displays a list of bakeries. 
* You scroll down the list and tap on a link for “Carlo’s Cupcake Creations.” → The app opens the page for Carlo’s Cupcake Creations. 

After a few more steps, you successfully order the celebratory cupcakes. The process of placing this order consists of a series of interactions between you and the app. The designers behind the food delivery app (and designers in general) carefully plan these interactions so that you can complete your goals.

### What is Interaction Design? 

**Interaction design**, or **IxD**, focuses on designing products that users can successfully interact with. 

In this lesson, we’ll focus on interaction design in the context of digital products. However, we should note that interaction design has origins in industrial design. Design is integral to any product we can interact with, whether that is a physical alarm clock or an alarm clock app.

When we use digital products, there is a back-and-forth pattern that mirrors a conversation &mdash; we take an action, and the interface responds. We can think of interaction design as planning a conversation between the user and the interface. 
 
### IxD vs. UXD

If you’ve studied UX Design, the definition of interaction design may feel familiar. [UX Design](https://www.codecademy.com/resources/docs/uiux/ux-design) encompasses all aspects of a user-centered design process, from conducting user research to creating prototypes to facilitating usability tests. 

Interaction design is a subsection of UX Design. IxD focuses on the interactions between the user and the product, such as typing, scrolling, swiping, tapping, pinching, double-clicking, hovering, and more. Interaction designers plan and prototype the interactions that allow the user to achieve their goals. 

The roles of UX Designer and Interaction Designer can overlap on a design team. UX Designers may be responsible for interaction design and other aspects of the design process. However, in some contexts, specialized Interaction Designer roles focus solely on planning and creating interactions. 

### Why is IxD important? 

Think back to a conversation that did not go as planned. Maybe you struggled to understand someone’s ideas or had your statements ignored or misinterpreted. You may have left that situation feeling disappointed, confused, or frustrated. We don’t want users to walk away from our products feeling this way! 

Interaction design seeks to improve communication between the interface and the user. Completing one task, such as ordering cupcakes, may involve dozens of interactions. We want to ensure that each interaction contributes to a smooth user experience. 
 
In this lesson, we will:

* Discuss the building blocks of interaction design
* Explore principles for designing successful interactions
* Analyze examples of strong and weak interaction design

A circle graph with one wedge separated from the rest of the circle. The larger portion of the circle is labeled UXD and includes images of different aspects of the UX Design process. The small wedge is labeled IxD and shows an image of hands interacting with a mobile app. 

Interaction Design Overview

Let’s return to our example of ordering cupcakes from a food delivery app. When opening the app, there’s a screen that includes:

* Rectangle labeled “Email”
* Rectangle labeled “Password” 
* “Log in” and “Sign up” buttons 
* “Forgot Password” text in a bright color
* Icons for Google, Facebook, and Apple

What actions can you take from this screen? How do you know that these options are available? These questions lead us to an essential element of interaction design: affordances. 

### What is an Affordance? 

An **affordance** is what we expect we can do with an object given its properties and our abilities.

Affordances are abundant in digital products and our everyday lives. For example, a ceramic mug has many affordances. A mug affords us to fill it with liquid, pick it up, or even toss it across the room (not recommended!). 

An object’s affordances may not be available to everyone. Some people may be unable to lift the mug or comfortably drink from it. The same principle applies to digital products. To create affordances that work for a product’s users, we must understand their needs, experiences, and context. 

### Why Do Affordances Matter?

Affordances are what the user perceives to be possible. If the user doesn’t recognize affordances in the interface, they will struggle to interact with the product. We must design affordances that users can identify and understand. 

### Using Signifiers

One way to design effective affordances is to add clear signifiers. A **signifier** is an element of an affordance that we can perceive. It gives us a signal of what action we can take or how to complete the action. 

Affordances exist with or without signifiers. For example, a mug may afford heating liquid in the microwave. A signifier, such as a label on the bottom of the mug, can be included to communicate this affordance. Over time, this signifier may wear off, but the microwave affordance still exists.

On an interface, signifiers take many forms, such as text, colors, animations, audio, or images. In the screenshot below from [Codecademy Docs](https://www.codecademy.com/resources/docs/uiux), there’s a title and a list of terms. 

![Screenshot from the Docs section of Codecademy's website. The title, which is in black text, says “UI and UX Design Concepts.” Beneath the title is a list of terms in bright purple text. The term “Accessibility” is underlined because the cursor hovers over it](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/1-Ex2-Affordances-Docs.png)

The terms afford us to click on them. Signifiers include: 

* The bright purple color, which is only used on hyperlinked text
* An underline appears when the cursor hovers over a term

When designing affordances and signifiers, we should consider our users’ needs and standard design principles. Later in this lesson, we’ll analyze some foundational design principles called usability heuristics.

Before delving into the heuristics, we’ll explore the five dimensions of interaction design. These five dimensions are like building blocks. We use them to design interactions and create affordances that guide the users to them. 

Affordances

Great work! We've completed an overview of interaction design and its core building blocks. We also learned ten usability heuristics to reference when designing and evaluating interactions in digital products. 

Here’s a look back at the key concepts from this lesson: 

* **Interaction Design**, or IxD, focuses on designing products that users can successfully interact with.
* An **affordance** is what an individual expects can be done with an object given its properties and their abilities. 
* A **signifier** is an element of an affordance that can be perceived. Signifiers provide signals about what actions can be taken or how these actions can be completed. 
* The **five dimensions of interaction design** are words, visual representations, physical objects and space, time, and behavior. 
* The **ten usability heuristics**, developed by Jakob Nielsen, and Don Norman, is a set of ten general principles for good interaction design.
1. Visibility of system status 
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

Next, we'll diagnose issues in a flawed interface and propose solutions to make the interactions more user-friendly. 

Low-fi webpage wireframe. Behind it, rectangles that represent the dimensions of IxD.

Let's Review!

Wow! We've already explored over half of the ten usability heuristics. Let's dive into two more heuristics that explore the following questions: 

* How can the design support users with different levels of expertise? 
* What elements should be included in the interface?

### Flexibility and Efficiency of Use 

The seventh usability heuristic is **flexibility and efficiency of use**: The design should offer shortcuts so that expert users can speed up interactions or customize frequent actions. These shortcuts may be hidden from less experienced users. 

Each user operates in a specific context that includes factors such as expertise, frequency of use, and desired outcomes. We want to create products that can be used efficiently in these different contexts. 

We can design interfaces that allow flexibility by including shortcuts, personalization, and customizations. For example, design software like Figma provides the option to use keyboard shortcuts. If we rarely use the software, these shortcuts may be unnecessary. However, if we use the software regularly, the shortcuts can save us a lot of time and effort. 

We can see an example of customization in the [Forum](https://discuss.codecademy.com/?_gl=1*177aqpb*_ga*NTczMjI1Nzc2NS4xNjY2NzA5Mzc5*_ga_3LRZM6TM9L*MTY2NjcwOTM4MS4xLjAuMTY2NjcwOTM4MS42MC4wLjA.) section of Codecademy’s website. 

If you frequently use the forum, customizing your feed can provide a more efficient experience.

![Screenshot from the Forum section of the Codecademy website. In the account settings, there’s an option to customize the tags. Adding tags to a category like “watched” ensures that relevant tags will appear on the feed. Muting tags will hide any topics that are not relevant.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/15-Ex8-Flexibility-Forum-Tags.png)

You can adjust these settings by adding relevant tags to the “Watched” and “Tracked” categories. That way, you won’t miss any posts with these tags. Additionally, you can mute tags for topics that are not relevant, so they don’t take up space on your feed.  

### Aesthetic and Minimalist Design 

The eighth usability heuristic is **aesthetic and minimalist design**:  The design should not include information that is irrelevant or rarely needed. Any extraneous details compete with the relevant and necessary details.

Using a minimalist design does not mean that the interface must use a particular artistic visual style! The focus of this heuristic is to be intentional about the details that are included on the interface. We want to make sure that everything is connected to the user’s primary needs and goals. Any unneeded information adds friction and increases the user’s cognitive load. 

An example of minimalist design can be found on [Codecademy’s Help Center](https://help.codecademy.com/hc/en-us). When users access the Help Center, they have a problem that they need to solve. All details on this page align with that goal. 

![Screenshot of Codecademy’s Help Center web page. This page is an example of minimalist design. All information connects to the user’s goal of seeking help. Options such as the “Contact Us” button, search bar, and featured articles provide ways for the user to complete their goal.](https://static-assets.codecademy.com/Courses/interaction-design/ixd-fundamentals/14-Ex8-Aesthetic-Help-Page.png)

Users can select the “Contact us” button to access a chatbot, type their issue into the search bar, or browse articles that discuss solutions to different problems. No unnecessary details crowd the page or distract the user from seeking help. 