What's the difference between Interaction Design and Visual Design (UI)?

How do you differentiate between Interaction Design and Visual Design? Let's explore how they work together to develop engaging and usable designs.

What’s The Difference Between Interaction Design and Visual Design?

Interaction design focuses on the flow and usability of an experience, while visual design focuses on aesthetics. However, both are critical for usability, and you’ll need both elements for a pleasant user experience.

You can read on to discover the differences and how both contribute to an outstanding user experience.

What is Interaction Design? 

Interaction design is a discipline within User Experience focusing on designing how humans interact with systems, products, processes, or their environment.  

From a user experience perspective, designing interactions occurs within the design thinking process. In addition to user experience, interaction design is related to human-computer interaction. This field studies how people interact with technology.  

In digital product design, interaction design typically focuses on designing systems and shaping the experience into a user interface that people can interact with beyond the user interface, including flows. 

Product design refers to industrial design also. Industrial designers design physical products with ergonomics in mind for how someone physically interacts with the product. 

"Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs

The Critical Role of Context and Functionality in Interaction Design

Let’s take streaming video as an example of digital product design. While the user interface seems simple to lay out a series of card patterns organized into rows, there’s much more to consider, like how users interact with their content, including different states. 

In this case, interaction is understanding the context of how users watch the content. 

Furthermore, context of use is understanding the conditions and environments in which users interact with your product. For example, on their couch with a 10-foot UI or on their mobile phone.  

This includes designing the behavior and functionality that supports the watching experience—for example, planning how the mobile app interacts with the TV.  

Another simple example of interaction design at work is how the selected state is displayed. This might be card tiles enlarging slightly to show a border when the user chooses a show. 

UX vs UI- Interaction Design example_1'

Why Interaction Design and System Design Create Seamless User Experiences

Taking this a layer deeper, interaction design refers to designing and shaping the underlying systems and system flow. The system’s personalization, recommendations, and discovery must also be created in our streaming platform example.

While engineers implement and develop the system’s functionality, designers also craft the system’s shape by understanding the user’s journey and defining the content the user might want to see and when.

This layer of interaction design is sometimes referred to as having a system thinking approach to design and understanding how all interrelated parts connect for a user experience. (Not to be confused with design systems)

Every action the user takes on a digital product or system reacts. That reaction or interaction needs to be designed. 

The usability heuristic, Visibility of System Status, addresses the need for system feedback as an essential component of a usable experience. You can think of this as designing how the system reacts. 

Those system reactions are not automatic; either someone designs how the system responds, or the system doesn’t respond, and the heuristic principle is violated.

If you’ve ever felt the frustration of not knowing if your document was uploaded or if something you sent online was received, you may have experienced the feeling of a system not being responsive. And how anxiety-inducing that can be if the task is essential or time-restrictive.

How Information Architecture Simplifies User Interaction

Interaction design leverages use cases and scenarios to shape user interfaces from the functional and behavioral perspective.

Generally, interaction design is concerned with how views will be accessed and how information will be organized through the structure of the information architecture and workflow design to help users accomplish their goals.

Navigating and wayfinding are integral aspects of interaction design, as they guide the user through different pages to help them find the information they need.

Search, navigation, and how content and categories are organized facilitate helping customers discover information. 

Information architecture is at the user interface level because users interact with navigation menus and search, but the underlying structure is designed at the interaction layer.

The information architecture needs to match the user’s mental model of how information maps together and consider this. How users interact with the categories and content is both a content design and interaction design problem.

UX vs UI- Information Architecture'

The Role of Visual Design in the User Interface

Visual design focuses on the visual language at the interface level. Using the foundations of color, typography, iconography, illustration, and other style to craft brand-related attributes. 

Visual design is essential to the entire user experience in enhancing usability and product desirability.  

Interaction and visual design elements work together to create a usable experience.

When talking about user experience, interaction design inevitably meets visual design because the two are interrelated at the interface level. 

Interaction and visual design are concerned with usability and approach it from different angles.

Interaction design looks at usability through the lens of state flow. It ensures that users know what they are supposed to do next as it relates to the system.

The visual design relies on visual language attributes to communicate how someone should use the product.  

As a part of creating a usable experience, these three critical aspects of visual design aid in the usability of the user interface:

  • Representing relationships and hierarchy of information
  • Affordance of behavior
  • Consistency
 

Information Hierarchy, Affordance, And Consistency In Usability

The information hierarchy communicates the essential information on the page through design. If most people want to see a specific type of information, the information hierarchy shows that information at the top, with less critical information at the bottom. 

Having the correct information hierarchy ensures your experience is usable, as it relates to finding information and supporting whatever task the user is trying to accomplish in your experience.

Headings and typography help to communicate and establish an information hierarchy. 

Affordance, as it relates to visual design, is the visual cue informing the user how to use something. In digital product design, this can be visual details like a drop shadow to show elevation or a textured icon to show that something can be dragged, like on an iOS sheet.

Consistency contributes to ensuring the experience is usable. One of the heuristic principles is Consistency and standards. Using consistent elements sets user expectations of what something will do. 

For example, suppose you have a question mark icon in one part of the site that shows a small tooltip icon on click, but it acts as a link in another area. This minor inconsistency leads to confusion, and users might be afraid to click on things because they need to know what to expect. 

As a result, visual design ensures everything follows the same style and behavior.

Harnessing Design Systems For Consistent Interactions and Visual Design

The design system is a set of user interface visual elements and components used in the design. Typically, the color and typographical features are baked into the design system.

Design systems are comprised of base-level components like buttons and text entry fields. These foundational elements make up the interface design. 

If these components are created with code, they typically have interaction states associated with them. For example, what happens if the user selects or hovers over a button. (Usually, a color change or a border is shown)

Design systems intersect between visual and interaction design on a component level. In most companies, the design system team creates components based on best practices in usability and accessibility. 

In addition, the visual design is already part of the component, so it accurately reflects the aesthetics and usability of the product. 

The Importance of Interaction and Visual Design in Product Experiences

Now and again, I’ll find people arguing online (Hello, Reddit!) about which skill is more critical. 

The truth is that both are needed for a good user experience. 

I’ve seen powerful interaction design-based experiences that functionally made sense and improved over the previous design but were hard to look at and understand from just the visual design alone. 

User feedback for that product design was, “It’s much easier than the other experience, but I still prefer the other one because it doesn’t overwhelm me.”

I’ve also seen the opposite, where the design is beautiful but could be more usable and well thought out from the system perspective.

Aesthetically driven designs without consideration of robust interaction design can lead to many rabbit holes or missing features.

A common misconception for design is that minimal interfaces are better. It depends on the context; if you hide important information in favor of minimalism, users won’t be able to accomplish their tasks.

Context is everything in design; visual and interaction design are needed to create functional experiences.

In conclusion

Interaction and visual design are required for usable, functional, and aesthetic experiences. 

While there is overlap in some areas, both skills are needed to produce elegant design. While both skills are required, most people tend to gravitate to one or another and typically have a better command of one of them. 

But that doesn’t mean you can’t learn the other. Both of these skills are learnable. 

References 

https://www.usability.gov/how-to-and-tools/methods/heuristic-evaluation.html

https://www.usability.gov/what-and-why/usability-evaluation.html

UX problem statement workshop kit

UX problem statement workshop kit

Download this free .fig (Figma) file to lead your team to define a problem statement. This collaborative workshop will guide your cross-functional team to a better understanding of the problem set.

Diane Cronenwett- UX-Portfolio-Course

About Diane Cronenwett

Diane Cronenwett teaches UX courses on advanced UX topics and foundational topics, and has led design experience projects for top-tier Fortune 500 companies based in Silicon Valley. Diane is passionate about sharing her knowledge with UX professionals and newcomers to the field to grow their skills in UX, and get to the next level in their career.