case study interaction design

11 Inspiring UX Case Studies That Every Designer Should Study

A UX case study is a sort of detailed overview of a designer's work. They are often part of a UX designer's portfolio and showcase the designer's skill in managing tasks and problems. From a recruiter's perspective, such a UX portfolio shows the skill, insights, knowledge, and talent of the designer.

Therefore, UX case studies play an important role in the recruitment and demand for designers.

What Makes a Powerful Case Study

Building a UX case study includes showing the design process through compelling stories. They will use plain language to demonstrate how they handled key design issues, offering a comprehensive view of their process. Well done case studies often include:

• A  problem statement and solutions with real applications.
• Relevant numbers, data, or testimonials to demonstrate the work and efforts.
• A story that directly connects the problem to the solution.

Any competent UX professional will know that creating a stunning UX case study is about the little details.

11 Best UX Case Studies for Designers

The best way to understand what a good case study looks like is to go over other examples. Each of these UX case study examples shows a designer's insights, basic skills, and other designers' lessons learned through their experience.

1. Promo.com web editor

For this video-creation platform , UX designer Sascha was brought on to revamp v2.0, adding new features that could work alongside the existing UX design. The point was to work on interface details that would help create a user friendly platform, and that users could find simple enough to use.

User personas mapped by the UX designer revealed the most common confusion to be the process of inserting particular features into the video, such as subtitles. The designer's goal, therefore, was to create a platform with improved editor controls.

The designer then used a common text-editor layout to include top and side navigation bars that made it easy to access and implement text editing.

Key Learnings from Promo.com

This case study focuses on addressing a particular problem that customers were currently facing. Its main theme is to show a problem, and how the product designer addressed this problem. Its strength points include:

• clearly highlighting the problem (i.e. inaccessible and limited video-text editor options)
• conduction research to understand the nature of the problem and the kind of solutions customers want
• implementing research insights into the redesign to create a platform that actively served customer needs

2. Productivity tracker app

The main concept behind this UX case study is to address a pre-existing problem through the design of the app. Immediately from the start, the study highlights a common pain point among users: that of a lack of productivity due to device usage.

This UX case study example addressed some of the main problems within existing productivity apps included:a poor UI and UX that made navigation difficult

• a poorly-built information architecture
• limited functions on the mobile application

Key Learnings from the Productivity app case study

The case study highlights the simple design process that was then used to build the app. Wireframes were created, a moldboard developed, and finally, individual pages of the app were designed in line with the initial goals.

3. Postmates Unlimited

This case study clearly identifies the improvements made to the Postmates app in a simple overview before jumping into greater detail. The redesign goal, which it achieved, was to improve the experience and other interface details of the app.

The problems identified included:

• usability that led to high support ticket volume.
• technical app infrastructure issues that prevented scalability.
• lack of efficient product management, such as batching orders.

A UX research course can help understand the kind of research needed for a case study. The app redesign involved bringing couriers in and running usability testing on improvements. The final model, therefore, had input from real users on what worked and what caused issues.

Key Learnings from Postmates

The Postmates redesign works as a great UX case study for the simple way it approaches problem-solving. Following an overview of the work, it addresses the problems faced by users of the app. It then establishes research processes and highlights how changes were made to reduce these issues.

4. TV Guide

Addressing the fragmentation of content across channels, this case study sought to redesign how people consume media. The key problems identified included:

• the overabundance of content across various TV and streaming platforms
• the difficulty in discovering and managing content across all platforms

To deliver on the key goals of content personalization, smart recommendations, and offering cross-platform content search, the design process included conducting interviews, surveys, and checking customer reviews.

The design of TV Guide enables users to get custom recommendations sourced from friends' and family's watchlists.

Key Learnings from TV Guide

Like previous UX design case studies, this one tackled the issue head-on. Describing the research process, it goes into detail regarding the approach used by the UX designers to create the app. It takes readers on a journey, from identifying pain points, to testing solutions, and implementing the final version.

5. The FlexBox Inspector

Designer Victoria discusses how she developed the investigator tool for the Mozilla Firefox browser. Surveys into understanding the problems with the existing CSS Flexbox tool revealed a need for a user-friendly design. Interviews with a senior designer and other designers helped developers understand the features design-focused tools ought to have. A feature analysis revealed what most users look for in such tools.

The final result of the development process was a design that incorporated several new features, including:

• a new layout
• color-coded design
• multiple entry points to make workflow management efficient

Key Learnings from the Flexbox

This UX design case study starts with a clear goal, then addresses multiple user needs. It clearly defines the design process behind each feature developed by the time, and the reasoning for including that feature. To give a complete picture, it also discusses why certain features or processes were excluded.

6. The Current State of Checkouts

This Baymard UX design case study looks into the checkout process in over 70 e-commerce websites. Through competitive analysis, it isolates problem points in the UX design, which, if addressed, could improve the customer's checkout process.

The study found at least 31 common issues that were easily preventable. The study was designed and conducted on a large scale, over 12 years, to incorporate changing design patterns into the review.

Recommendations based on findings include:

• prominent guest checkout option
• simple password requirements
• specific delivery period
• price comparison tool for shipping vs store pickup

Key Learnings from Checkout Case Study

Each identified issue is backed up by data and research to highlight its importance. Further research backs up each recommendation made within the case study, with usability testing to support the idea. As far as UX case studies go, this one provides practical insight into an existing, widely used e-commerce feature, and offers practical solutions.

7. New York Times App

Using a creative illustration website, the designers proposed a landing page feature "Timely" that could counter the problems faced by the NYT app . Its major issues included too much irrelevant content, low usage, and undesirable coverage of content.

The goal behind Timely was to improve user incentives, build long-term loyalty, and encourage reading. Design mapping for the app covered:

• identifying the problem
• understanding audience needs
• creating wireframes
• designing and prototyping

The end result was an app that could help readers get notifications regarding news of interest at convenient moments (at breakfast, before bed). This encouraged interaction and improved readability with short-form articles.

Key Learnings from NYT App

The UX case study proposes a problem solution that works with an existing information architecture, instead adding custom graphics to the mobile app. It leads from a simple problem statement to discuss the project that could address these issues without changing was customers already loved.

UX case studies focused on redesign include the FitBit redesign, which started off by understanding personas and what users expect from a fitness tracker. Developing use cases and personas, Guerilla usability testing was employed to assess pain points.

These pain points were then ranked based on their importance to users and to app performance. They were addressed through:

• Highlighting essential parts and features of the app
• Changing easily missed icons to more recognizable icons
• relabelling tracking options to guide users better to its usage

Key Learnings from Fitbit

While the case study maps user experiences and offers solutions, it does not begin with an intensive research-based approach. The prototype is successful in testing, but problem factors are not identified with research-based statistics, meaning key factors could have been ignored.

9. Rating System UX

The designer behind the rating system UX redesign sought to solve issues with the 5-star rating system. Highlighted issues included:

• the lack of subjective accuracy of a 5-point rating system
• the issue of calculating the average of a zero-star rating
• average ratings are misleading

Better alternatives include:

• 5-star emoticon rating that relates the user experience
• Like/dislike buttons that make approval/disapproval simple

The final design incorporated both these styles to make full use of the rating system.

Key Learnings from Rating System UX

The UX case study stemmed from insight into the limitations of the existing rating system. The new design addressed old issues and incorporated better efficiencies.

The Intuit redesign was focused on making content readable, more engaging, and accessible. Looking into product personalization, the content was found to be lacking aesthetic value, as well as being hard to find. The goal was to create content that was easy to find, clear, and consistent.

The implemented solutions included:

• increased readability with increased body text and header spacing
• table of contents on the sidebar for easier navigation
• visible and prominent search bar
• illustrations and designs for pretty visuals

Key Learnings from Intuit

The Intuit case study approaches the problem from a practical point of view. It begins with isolating problems with the interface, in particular with the content. This is an example of a case study that breaks down problems into broader categories, and solves each problem with a practical solution.

This UX case study about a social platform tackles a commonly-faced problem from existing platforms. It addresses the issue of recognizing non-monetary user engagement, to help creators identify their user base.

The case study addresses the problem statement and establishes the design process (building wireframes and prototypes) as well as conducting user testing. The final result is to develop "Discover" pages, engaging layouts, and animated interactions to increase usability.

Key Learnings from Jambb

The study goes into detail regarding problem identification, then moves on to propose solutions that take into account the perspective of all stakeholders involved. It then explains why each design decision was made, and proves its efficacy through testing and prototyping.

Key Takeaways

Developing good UX case studies examples is as much about the details you include as the ones you leave out. Going over UX courses can give you a better understanding of what your case study should look like. A good case study should provide an overview of the problem, include numbers and statistics, and offer practical solutions that directly address the problem. The above-discussed UX case studies provide a good example of the dos and don'ts of a well-structured UX design case study that should be part of every UX portfolio .

Additional Resources

Check out these resources to learn more about UX case studies:

8 UX Case Studies to Read

UX Design Case Study

Frequently Asked Questions

Upskill your design team effectively.

Equip your design team with the best-in-class design training that sticks.

Do you know your design team skill level? Send them this quick test & see where their skills stand among 300K+ designers worldwide.

Level up your design career

Get step-by-step guide how to build or advance your UX design career.

Do you know your design skills level? Take a quick test & see where you stand among 300K+ designers worldwide.

Continue reading

Top 7 resources for ux/ui designers for meaningful design inspiration, how to write a ux case study in 10 steps, the impact of ux design on application success: exploring costs and trends, cookie settings 🍪.

• Interactive UX learning for all levels
• 20+ UX courses and career paths
• Personalized learning & practice

Design-first companies are training their design teams. Are you?

• Measure & identify team skill gaps
• Tailor learning for your team’s needs
• Unlock extensive learning library
• Visualize team growth over time
• Retain your designers

Exploring Interaction Design

This comprehensive guide provides an in-depth exploration into the intricacies of interaction design – a key aspect of modern website and application design that positively impacts user experience. Covering the foundations, processes, best practices and trends in interaction design, this guide will equip readers with deep understanding and insights. The importance of interaction design in different contexts such as e-commerce, gaming, mobile applications, and augmented or virtual reality is also discussed.

Key Takeaways

• Interaction Design is a critical discipline that defines the interaction between users and digital systems, fostering intuitive, and responsive experiences.
• This guide provides a coverage on the principles of interaction design, its process, the role of the interaction designer, examples and case studies, and future trends.
• Insights into different stages, methods, tools, evaluations, challenges, and solutions in the interaction design process is shared.
• Understanding the relevance and applications of interaction design across sectors such as e-commerce, gaming, mobile applications, and AR/VR can offer an edge in a competitive digital market.

Exploring Interaction Design: Gearing towards a Superior User Experience

As the digital landscape continues to refine and redefine itself, the critical role of interaction design in today's modern websites and applications grows increasingly apparent. This intangible but pivotal facet of user experience design provides the critical link between the user and the digital system - be it a website, a mobile application, or virtual reality. To enhance the user experience (UX), understanding interaction design is a must.

But what is interaction design exactly? Broadly defined, interaction design is the discipline that defines the structure and behavior of interactive systems. It weaves the complex tapestry of user interaction with the digital platform, ensuring seamless, intuitive, and responsive experiences.

This exploration into interaction design will not only unpack its definition but will also shed light on its significance. This comprehensive guide will delve into the principles of interaction design, unravel its process, examine the role of an interaction designer, discuss successful examples and relevant case studies. It also takes a peek into emerging trends and the futuristic vista of this intriguing domain. Let's embark on this interactive journey!

Understanding Interaction Design

Interaction design exists at the junction of technology, design, and end-user needs. Specifically, it's the discipline that sews together the structure and behavior of interactive systems. Through interaction design, digital platforms like websites, apps, and virtual reality become less about navigating raw information and more about creating intuitive, responsive experiences.

• Definition: In the simplest terms, interaction design is the practice of designing interactive digital products, spaces, and services. It works towards optimizing the user's interaction with a product or system, aiming to create a seamless, engaging user experience (UX).
• Its Significance: With the exponential progression of the digital universe, interaction design is more essential than ever. It breathes life into static pages, enabling users to interact, adapt, and engage seamlessly with digital platforms. From intricate web pages to smart home systems, interaction design forms the nucleus of all digital experiences.
• Principles: The guiding principles of interaction design include creating a clear and consistent visual language, simplifying tasks, and prioritizing user needs. These principles aim to enhance UX by making digital systems intuitive, easy to learn, flexible, and fun to use.
• UX and Interaction Design: Although interaction design forms an integral part of UX design, they are not synonyms. UX design focuses on the overall feel of the product, while interaction design focuses on facilitating human interaction with this product.

Captivating interfaces, intuitive controls, and feedback mechanisms that make users smile are just some examples of good interaction design. It's a complex discipline that requires a blend of creative design sensibilities, technical skills, user insights, and collaboration. In the following sections, we will delve deeper into the facets of interaction design, its processes, the role of the designer, and examine how this amalgamation of art and science is shaping the digital world.

The Process of Interaction Design

The process of interaction design plays a crucial part in shaping the user experience. It's structured, iterative and rooted in research and user testing. The journey of creating user-friendly systems starts with understanding the user's needs, translating them into designs, and refining them through iteration.

The central stages of interaction design include:

• Research: The initial stage involves learning about user needs, their challenges, motivations, and behavior. It requires collecting and analyzing data using various research methods such as interviews, surveys, and user testing.
• Ideation: Once a strong understanding of the user is achieved, the ideation phase begins. Using brainstorming techniques and design-thinking methodologies, potential solutions to user problems are conceived.
• Prototyping: In this stage, ideas transform into tangible designs. These prototypes can range from simple sketches to detailed interactive prototypes, depending on the phase of the process.
• Testing: This fosters feedback, guiding improvements in the design. It involves rigorous user testing, heuristic evaluations, and usability testing to validate the design's performance.
• Implementation: Finally, the design is coded and made functional. Close collaboration with developers is necessary during this stage to ensure the implemented design matches the intended user experience.

Each of these phases doesn’t function in isolation; they often overlap, and the design team may need to loop back to previous stages based on feedback and testing results. The ultimate goal is to create intuitive and enjoyable interactions that meet the user's needs and fulfill the product's purpose.

Beyond the different stages, it is also worth acknowledging the methods employed in interaction design. This includes essential practices such as user personas, task flow diagrams, wireframing, and prototyping, among others. Several tools are readily available for interaction designers like Sketch, Adobe XD, Figma which help create and test responsive designs efficiently.

Evaluating interaction design includes regular usability testing, heuristic evaluations, A/B testing, and accessibility reviews. This not only identifies points of friction in the design but steers continual refinement, making sure the product remains user-focused and relevant as user needs evolve.

Mastering this process of interaction design, with its techniques and tools, is key for designing digital platforms that resonate with users and feel as comfortable as second nature. In the following sections, we'll explore the role of an interaction designer, real-life examples of effective interaction design, and emerging trends in the field.

The Role of Interaction Designer

Every digital innovation that enhances our online engagements can be linked back to the working desk of an Interaction Designer. But who is an Interaction Designer, and what does their job entail?

In essence, an Interaction Designer serves as the architect of the digital world. Their work shapes the digital spaces that we navigate and interact with daily, making those spaces intuitive, engaging, and efficient. This role involves not only drafting the initial blueprint but also refining and tweaking the design until it provides the optimum user experience.

Let's further dissect the role and responsibilities of an Interaction Designer:

• Blueprint Creation: An Interaction Designer formulates concepts and strategies that will shape the interactive elements of a digital platform. They map out how each element interacts with the other, assuring cohesion and balance in design.
• User Empathy: Understanding users and their needs is paramount in this role. Interaction Designers must have the capacity to empathize with different user experiences, enabling them to craft designs that resonate with user expectations.
• Prototyping & Testing: Once a design is drafted, it must be executed and tested in the form of a prototype. Subsequently, the prototype undergoes user testing, and the obtained feedback allows for further refining of the design.
• Collaboration & Communication: Interaction Designers work in tandem with other professionals such as UI designers, UX researchers, and developers. They ensure seamless communication and collaboration is maintained for the success of the project.

We shouldn’t neglect the myriad of skills that an Interaction Designer must possess. Tech-savviness, creativity, problem-solving, and communication skills are all part of their arsenal. Proficiency in design software like Adobe XD, Sketch, or Figma is a given, as is a solid understanding of design principles and user psychology.

The road that an Interaction Designer treads is laden with challenges. These can involve staying updated with the rapidly evolving digital landscape, tackling varying user demands, or working within tight deadlines. However, a steadfast commitment to enhancing user experience, a knack for innovative thinking, and a persistent pursuit of skill upgrade can help surmount these hurdles.

In the upcoming sections, we will delve deeper into real-world examples and case studies that offer a more tangible understanding of the work of Interaction Designers.

Interaction Design Examples & Case Studies

Understanding concepts is beneficial, but one of the best ways to truly grasp the impacts of effective interaction design is through real-world examples and case studies. These practical instances provide insights into the process, the challenges, and the outcomes of thoughtful interaction design.

Consider the success of mobile applications like Uber and Airbnb. They have dramatically transformed their respective industries, not just through their innovative business models, but also through their cognizant adaptation of interaction design. Their digital platforms cater intuitively to their users' objectives, presenting a user-friendly interface that integrates seamlessly into their overall user journey.

Let's review the interaction design of an iconic tech pioneer — Apple. The company's dedication to uncomplicated, fluid interaction design is evident in its every creation.

• The iPhone's touchscreen interface ushered in a new era for mobile experience.
• The intuitive swiping and tapping controls have become standards in the world of interaction design.
• The concept of "skeuomorphism" used in Apple’s early iOS versions, portraying digital elements to mimic their real-world counterparts (like a trash can for delete function or camera for photos), made digital interactions relatable for the users.

Now, let's delve into an insightful case study. Spotify, the popular music streaming service, continually refines its user interactions to create memorable experiences. One key change: migrating from a hamburger menu to a bottom navigation bar - a direct result of their user testing revealing the hardships users faced in accessing the burger menu.

Switching to the bottom navigation bar vastly improved user accessibility and engagement, demonstrating the profound impact of replacing a single interaction model with another more intuitive one.

The success stories of Uber, Airbnb, Apple, and Spotify underscore the significance of interaction design in shaping user behavior and influencing business outcomes. They serve as luminous examples of how an intense focus on interaction design can create a defining difference.

These examples and case studies are stepping stones providing insight into the future landscape of interaction design. They allow us, as UX professionals, to learn from the past and apply those lessons to our ongoing progression, keeping our skills sharp and our approach innovative, ready to meet the challenges and opportunities of the evolving digital world.

Trends & Future of Interaction Design

Just as the digital landscape is in a constant state of flux, so too is interaction design. As technology advances, interaction designers are continually challenged to innovate and adapt to these emerging shifts.

• Emerging Trends in Interaction Design: Three significant trends include Voice-Activated Interfaces, Gesture-Based Interfaces, and Immersive 3D Experiences. Voice-Activated Interfaces such as Alexa and Siri are minimalistic, easy-to-use, and help bridge the digital divide. Gesture-Based Interfaces prioritize natural body movements over traditional input types, promising a more fluid and intuitive UX. Immersive 3D Experiences, powered by VR and AR, offer visually engaging environments that potentialize interaction design to new heights.
• The Impact of Technology on Interaction Design: Advancements in AI, machine learning, and data analytics have opened new frontiers in personalizing user experience, predicting user behaviour and integrating seamless automation. These technological strides impact interaction design by pushing it towards data-driven, intelligent, and proactive design solutions.
• Predictions for the Future of Interaction Design: As technology continues to evolve, we can anticipate interaction design to become more immersive, predictive, and personalized. This evolution will be driven by cross-disciplinary collaboration between UX designers, AI developers, data scientists, and enabled by sophisticated design tools and platforms.

In this sense, the future presents exciting prospects for interaction design. The key will be to balance technological innovation and human-centered design principles. The challenge – and opportunity – is to use technology not just to mechanize interactions, but to humanize them, making them more intuitive, engaging, and rewarding for the user.

Wrapping Up: The Impressive Scope and Impact of Interaction Design

Our deep dive into the world of interaction design has highlighted its integral role in crafting delightful digital experiences. This immersive discipline goes beyond aesthetics or functionality to shape how users communicate with a digital system in a meaningful way. Interaction design is not only about creating intuitive and pleasing interactions; it is also about anticipating user needs, enabling seamless experiences, and facilitating user goals.

We’ve navigated through the underlying principles of interaction design and the meticulous process that brings these principles to life. We've peered into the dynamic role of an interaction designer and the myriad of skills that fortify their creative and strategic toolbox. Through real-life examples and impactful case studies, we can appreciate the compelling difference that well-executed interaction design brings to the user experience.

• Understanding how trends and emerging technologies are poised to shape the future of interaction design, we can anticipate a fascinating journey ahead.
• From e-commerce and gaming to mobile applications and virtual reality - the ethos of interaction design permeates across various digital contexts, highlighting its universal relevance.
• Its value only escalates in today's digital era, where every touchpoint with the user is an opportunity to offer superior service, engage effectively, and leave a lasting impact.

Therefore, whether you’re a seasoned professional or a budding aspirant in the field of UX design, acquiring a solid grasp of interaction design principles and practices is a crucial step forward. It equips you to design meaningful digital interactions that resonate with users, enrich their experience, and ultimately drive success to your product. Here's to creating digital experiences that truly matter!

Continue Learning

The Importance of Accessibility in Design

Principles of User-Centered Design

Introduction to Design Thinking in UX

Best Practices in Usability

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption

Interaction design (IxD): Definition, examples, and guide for stronger UX

Interactive design (IxD) remains a recent addition to the design world; it emerged when screens were designed to accommodate more than just static content. It can be concisely explained as the design of user-product interactions.

In simpler terms, UX design involves eliciting emotions in the user; UI design entails the arrangement and functionality of elements within an application; information architecture organizes the application; and interactive design governs how the user and the application interact and react.

Animation within interfaces, such as moving icons, menus, transitions, and gifs, lies at the core of IxD. Interaction design holds a significant place in the expansive domain of UX design, and that’s why you’ll need to learn it to keep up.

In this article, we will define IxD, examine some valuable interaction design patterns, emphasize its importance in the broader realm of UX design, and offer practical advice on how the finest UX designers employ IxD to succeed.

What is interaction design (IxD)?

The role of ixd in ux design, why ixd matters in ux design.

• Visual representation 2D
• Physical objects or space 3D
• Behavior 5D
• Practical examples of IxD

What is the interaction design process?

Interaction Design (a pivotal component of UX Design) involves shaping interactions between users and products.

Often shortened to IxD, interaction design is a facet of UX design dedicated to configuring how users engage with digital products and services. It entails the art and science of crafting interactive experiences that are user friendly, efficient, and enjoyable.

As you’ve probably realized, interaction design and UX design substantially overlap. After all, UX design centers on shaping the user’s experience with a product, and much of this experience comprises interactions between the user and the product. However, UX design encompasses more than just interaction design; it includes user research (identifying user characteristics), creating user personas (understanding why and under what circumstances users employ the product), conducting user testing, usability testing, and more.

IxD is a combination of methods and tools that empower designers to solve real-world problems, leading to many benefits.

A deep understanding of human psychology is crucial for designers when creating a user-centered product that provides a high level of user experience. Although users have individual differences, we share a common psychology, making it essential to understand these cognitive limitations and capabilities, crucial for designing interactions and creating a great user experience.

In other words, without comprehending how we interact with objects in both the real world and virtual worlds, your designs may never attain their full potential. Let’s go over how IxD elevates design work.

Over 200k developers and product managers use LogRocket to create better digital experiences

Creating seamless interactions

IxD ensures every interaction, from clicking a button to navigating a complex menu, is seamless and natural, contributing to a positive user experience where users accomplish their goals effortlessly. A well-executed IxD operates subtly; users fulfill their objectives without dwelling on design.

Enhancing usability

Usability is central to UX design, and IxD plays a crucial role in achieving it. IxD designers carefully consider layout, navigation, and feedback mechanisms to ensure users can interact with the product easily and efficiently.

Evoking emotions

Beyond functionality, IxD pays significant attention to creating emotional connections. By utilizing microinteractions , animations, and thoughtful transitions, designers can engage users and create a sense of satisfaction and delight.

Directing attention

Interactive design strategically directs users’ attention using animations, colors, images, and CTA button text, influencing how visitors interact with a website. Interaction design influences how visitors interact with your website based on what grabs their attention.

Decision making

Website analysis provides unique insights to optimize the site for faster and more effective actions, reducing lead-to-customer time and making the web funnel more efficient, ultimately increasing profits.

Research has shown that effective design can influence perceptions of usability. By learning about the characteristics and expectations of the target audience, designers can control users’ emotional reactions, make a positive impact, and prevent design failures by properly utilizing interface aspects.

UX design adopts a comprehensive approach to sculpting a user experience that engenders a mood, conveys a personality, or imparts a unique sensation. Elements like color palettes, typography, visuals, brand identity, layout, animations, images, and others coalesce to furnish a distinctive user experience.

Interaction design falls under the purview of UX design, determining the most fitting interaction style for a given user experience.

Improved user satisfaction

Well-designed IxD leads to improved user satisfaction. Intuitive and fluid interactions lead to increased satisfaction and brand loyalty.

Reduced cognitive load

Good IxD minimizes the cognitive load on users by providing clear, consistent, and predictable interactions, enabling users to navigate effortlessly.

Competitive advantage

In today’s competitive landscape, superior interaction design can be a key differentiator, giving products a competitive advantage over others.

Products boasting superior interaction design frequently outshine rivals and establish a competitive lead.

The 5 dimensions of interaction design

Interaction design defines how well a user can interact with a product to explore its features according to their requirements. The success of UX design depends on the effectiveness of interaction design.

If you closely examine interaction design, you’ll find several measurements and observations. Experts Gillian Crampton Smith and Kevin Silver have developed five dimensions of interaction design to uncover the involvement of this concept and ensure the success of UX design. Gillian proposed the first four dimensions, and later Kevin added a fifth. To understand these dimensions better, let’s review the following materials.

1. Words (first dimension)

The choice of words used in interactions, especially for buttons and labels, is crucial in conveying the right information to users. Concise and informative language is essential.

2. Visual representation (second dimension)

This encompasses graphic elements like images, fonts, and icons with which users interact. These elements complement words in conveying information to users.

3. Physical objects or space (third dimension)

This involves predicting the medium through which users interact with products. For instance, is the user navigating an app on a smartphone while standing on a crowded train or browsing a website while seated at an office desk? All these factors exert an influence on the interaction between the user and the product.

4. Time (fourth dimension)

The amount of time a user spends interacting with a product is crucial. It refers to the changes over time in the design platform, focusing on how users track their progress and if they can resume interaction with the product later.

5. Behavior (fifth dimension)

This dimension focuses on how users interact with the products, tracking users’ actions to fulfill their needs. It also considers users’ emotional reactions during interactions. Designers should monitor user actions as they strive to fulfill user needs via the product.

Practical examples of interaction design

Microinteractions.

These are subtle animations or visual cues that provide feedback and guidance for action. For instance, a short animation or color change confirming a user’s action, like ‘liking’ a social media post.

Responsive navigation

Good IxD is characterized by responsive design , enabling websites and apps to easily adapt to different screen sizes and devices, greatly enhancing the user experience.

Gestures like swiping, pinching, or tapping are often used in touch interfaces design. Proper IxD ensures these gestures are intuitive and consistent.

Principles of interaction design

Interaction design has a handful of goals:

• UX : Match user experience and expectations
• Consistent design : Maintain consistency throughout the application
• Functionality : Follow functional minimalism
• Cognition : Reduce cognitive load/psychic pressure to understand the application
• Engagement : Design interactively to keep the user engaged
• User control : Allow the user to control, trust, and explore
• Perceivability : Make interactions intuitive and interactive
• Learnability : Make user interaction easy to learn and memorize
• Error handling : Take care to prevent errors, and if they occur, ensure detection and recovery
• Accessibility : Model actions by taking inspiration from normal and physical interactions

Challenges that interaction designers address

Thinking about adding interaction design to your wheelhouse? Here’s what you’d address:

Design strategy

This involves defining the goals the user has and what interactions are needed to achieve those goals. Interaction designers may conduct user research to understand users’ goals and develop a strategy that translates them into interactions.

Wireframes and prototypes

IxD is best debugged through prototyping and user testing. Designers create interactive prototypes to evaluate how users interact with the product and make improvements accordingly.

User-centered approach

The best UX designers put users at the center of the design process, conducting research and iterating based on user needs and preferences.

With the IxD process, you can create highly intuitive, recognizable interfaces that provide a seamless experience for users, proving that your brand understands them, their context, and the goals they are trying to achieve. Here’s a typical IxD cycle:

• Observe people
• Interview people
• Examine existing solutions (bearing in mind that prognosticating future needs and technologies can be challenging)
• Build a narrative/story of how someone uses a system
• Perform ask analysis, breaking down a user’s steps/sub-steps
• Design a potential solution according to design guidelines and fundamental design principles
• Start prototyping
• Implement and deploy what you have built

Interaction design is the foundation of UX design, defining how users interact with digital products and services. It is the key to creating products that are intuitive, user friendly, and emotionally engaging. By understanding the principles of IxD and implementing user-centered practices, professional web designers of UX products can enhance their skills and contribute to project success.

Header image source: IconScout

LogRocket : Analytics that give you UX insights without the need for interviews

LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #design trends

Stop guessing about your digital experience with LogRocket

Recent posts:.

Tips for better ecommerce UX design

There’s little to no room for innovation and creativity in ecommerce. But by nailing every step of the sales funnel, you can greatly impact the company’s sales.

Creating a low-fidelity prototype in UX design

Use a low-fidelity prototype for your design whenever you need to experiment with ideas in the UX research analysis stage.

Applying the elaboration likelihood model (ELM)

The elaboration likelihood model (ELM) is a theory that describes how people process information and its impact on their attitudes.

Why not every UX problem needs to be solved

If you think UX design is all about solving user problems, you’re wrong. In this blog, I share the the lesser-known truths about UX problem solving.

Leave a Reply Cancel reply

The UX of AI

Using Google Clips to understand how a human-centered design process elevates artificial intelligence

As was the case with the mobile revolution, and the web before that, machine learning will cause us to rethink, restructure, and reconsider what’s possible in virtually every experience we build. In the Google UX community, we’ve started an effort called “ human-centered machine learning ” to help focus and guide that conversation. Using this lens, we look across products to see how machine learning (ML) can stay grounded in human needs while solving for them—in ways that are uniquely possible through ML. Our team at Google works across the company to bring UXers up to speed on core ML concepts, understand how to best integrate ML into the UX utility belt, and ensure we're building ML and AI in inclusive ways .

Real moments of parents, kids, and pets captured by the Google Clips camera.

Google Clips is an intelligent camera designed to capture candid moments of familiar people and pets. It uses completely on-device machine intelligence to learn to only focus on the people you spend time with, as well as to understand what makes for a beautiful and memorable photograph. Using Google Clips as a case study, we’ll walk through the core takeaways after three years of building the on-device models, industrial design, and user interface—including what it means in practice to take a human-centered approach to designing an AI-powered product.

Clips allows you to select the perfect frame (above, left) and save it as a still (above, right). In this instance, I clipped the camera onto a basketball hoop to capture the moment just before my son made a basket.

Just getting more UXers assigned to projects that use ML won’t be enough. It’ll be essential that they understand certain core ML concepts, unpack preconceptions about AI and its capabilities, and align around best-practices for building and maintaining trust. Every stage in the ML lifecycle is ripe for innovation, from determining which models will be useful to build, to data collection, to annotation, to novel forms of prototyping and testing.

We developed the following truths as anchors for why it’s so important to take a human-centered approach to building products and systems powered by ML:

• Machine learning won’t figure out what problems to solve. If you aren’t aligned with a human need, you’re just going to build a very powerful system to address a very small—or perhaps nonexistent—problem.
• If the goals of an AI system are opaque, and the user’s understanding of their role in calibrating that system are unclear, they will develop a mental model that suits their folk theories about AI, and their trust will be affected.
• In order to thrive, machine learning must become multi-disciplinary. It's as much–if not more so—a social systems challenge as it's a technical one. Machine learning is the science of making predictions based on patterns and relationships that've been automatically discovered in data. The job of an ML model is to figure out just how wrong it can be about the importance of those patterns in order to be as right as possible as often as possible. But it doesn't perform this task alone. Every facet of ML is fueled and mediated by human judgement; from the idea to develop a model in the first place, to the sources of data chosen to train from, to the sample data itself and the methods and labels used to describe it, all the way to the success criteria for the aforementioned wrongness and rightness. Suffice to say, the UX axiom “you are not the user” is more important than ever.

Three ways human-centered design elevates AI

Addressing a real human need

This year, people will take about a trillion photos, and for many of us, that means a digital photo gallery filled with images that we won’t actually look at. This is especially true with new parents, whose day-to-day experience is full of firsts. During moments that can feel precious and fleeting, users are drawn to their smartphone cameras in hopes of capturing and preserving memories for their future selves. As a result, they often end up viewing the world through a tiny screen instead of interacting using all their senses.

As a new parent, your gallery might look a lot like mine did—tons of smartphone photos taken in rapid succession, in an effort to capture the perfect cute expression.

What if we could build a product that helped us be more in-the-moment with the people we care about? What if we could actually be in the photos, instead of always behind the camera? What if we could go back in time and take the photographs we would have taken, without having had to stop, take out a phone, swipe open the camera, compose the shot, and disrupt the moment? And, what if we could have a photographer by our side to capture more of those authentic and genuine moments of life, such as my child’s real smile? Those moments which often feel impossible to capture even if one is always behind the camera. That’s what we set out to build.

Guiding the intelligence

When we started the process, the most pressing question was: if people take tons of photos but don’t actually want to go back and curate them, how will we label ground truth? This is where the foundational “HCML exercise” was born: Describe the way a theoretical human “expert” might perform the task today. The theory was twofold: First, if a human can’t perform the task, then neither can an AI; second, by diving deep into the methods of an expert, we can find signal-to-guide data collection, labeling, and component model architecture.

The closest approximation I could think of was a wedding photographer, so I set out to interview and hire contractors using a sufficiently ambiguous job posting (secret project! photography!). We ended up discovering—through trial and error and a healthy dose of luck—a treasure trove of expertise in the form of a documentary filmmaker, a photojournalist, and a fine arts photographer. Together, we began gathering footage from people on the team and trying to answer the question, “What makes a memorable moment?”

It's important for us to recognize the amount of nuance, aesthetic instincts, and personal history that we often take for granted when evaluating the quality of our photos and videos. For example, I crack up every time I watch my younger son exploring the subtleties of a twisty straw (far left) or trying to juke my kisses (middle). And I well up with pride when I watch my older son on his bike at the park (far right), because I remember that day as a turning point in his self-confidence to ride on his own.

Building trust

The starting point for our work was an assumption that we could ‘show’ the model the stuff we thought was beautiful and interesting, and it would, y’know, learn  how to find more. We had romanticized conversations about depth of field, rule of thirds, dramatic lighting, match cuts, storytelling … but what I learned was that we should never underestimate the profound human capability to wield common sense.

These early experiments exposed crucial technical and methodological gaps that helped us reassess our assumptions about what the product could realize, as well as take stock in the unprecedented nature of the work. We shifted our paradigm from putting ML on a pedestal to understanding that it can only learn effectively under quite reductionist framings. Basically, we were trying to teach English to a two-year-old by reading Shakespeare instead of  Go, Dog. Go! . This was where the myth of the AI ‘monolith’ crashed hardest for me; the idea that there’s some singular ‘intelligence’ that understands all things and can generalize and transfer knowledge from context to context. Nope. Not even close.

Back to basics

Consistency is the name of the game when trying to teach anything. It’s why we wait as long as possible to unleash the madness of O-U-G-H (e.g. tough, through, thorough) on children when teaching them how to read and speak English. Spelling and pronouncing words like cat , bat , and sat , with their predictable “at” sounds, is so much more consistent!

With consistency comes confidence. Think about how quick—and eager—most students are to point out incongruity when a teacher provides two examples that don’t seem to line up. Algorithms provide no such feedback. As far as an algorithm is concerned, everything they’re shown is of equal value unless directed otherwise. For Clips, that meant we not only needed consistency  between examples, but also  within  each example. Every individual frame needed to be representative of the specific prediction we’re trying to teach it to make. And often that can come in the form of teaching it what to ignore.

We needed to train models on what bad looked like: hands in front of the camera, quick and shaky movements, blurriness.

We used examples like the above to train machine learning models to recognize when the camera was inside a pocket or purse (above, left), or when a finger or hand was in front of the lens (above, right). While it wasn’t immediately intuitive to train models to ignore things, over time it became a crucial strategic piece in our design. By ruling out the stuff the camera wouldn’t need to waste energy processing (because no one would find value in it), the overall baseline quality of captured clips rose significantly.

Composition

We needed to train models about stability, sharpness, and framing. Without careful attention, a face detection model will appreciate a face at the edge of the frame just as much as one in the center.

In an effort to train a model about subject continuity, it was important to specifically highlight examples. Compare the moment where my younger son stays in the shot the whole time (above, left) to the moment where my older son is only in focus and in frame for about five percent of the moment (above, right).

Social norms

Familiarity is such a cornerstone of photography. You point a camera at someone and they offer implicit consent by smiling or posing. Moreover, you’re the one looking through the viewfinder framing and composing the shot. With an autonomous camera, we had to be extremely clear on who is actually familiar to you based on social cues like the amount of time spent with them and how consistently they’ve been in the frame.

Diversity and redundancy is something we take for granted in the way we shoot photos; there’s a little voice in the back of our head saying, “You haven’t seen anything like this!” Or, “You’ve got enough shots of your kid for now, relax.” But our models needed a lot of help.

We approached diversity along three different vectors:

• Time : The simple value of time passing is an important signal to appreciate. Don’t go too long without capturing something.
• Visual : Subtle or dramatic changes in color can tell a lot about changes in environment and activity. Try to capture moments that have distinct aesthetic qualities.
• People :Are you in a big group or a small group or alone? Understanding how many different familiar faces you’re encountering is a crucial part of feeling like you haven’t missed important moments.

I put Clips at the edge of a bookshelf pointing down, which provided a cool angle to watch my kids building together. It also meant I was showing the camera a bunch of very similar content over a lengthy chunk of time. Avoiding unwanted redundancy without missing too many moments was—and continues to be—a wonderfully complex UX challenge.

Trust and self-efficacy

One of the reasons we invested in Clips was because of how deeply important it was to demonstrate the importance of on-device and privacy-preserving machine learning to the world—not to mention its remarkable capabilities (e.g. it uses less power, which means devices don’t get as hot, and the processing can happen quickly and reliably without needing an internet connection). A camera is a very personal object, and we’ve worked hard to ensure it—the hardware, the intelligence, and the content—ultimately belongs to you and you alone. Which is why everything—and I mean everything—stays on the camera until the user says otherwise.

Concept budgeting

With an eye on trust and self-efficacy, we were also very intentional in the way we approached UI design. At the start of the project, that meant working through a few of our own funny assumptions about how “out-there” an AI-powered product needed to be.

When we reach into our brains for future-tech reference points, many designers will jump to the types of immersive experiences seen in movies like  Minority Report  and  Blade Runner . But just imagine of how crazy it’d be to actually explain something like the UI in  Minority Report  to users:  Here, just extend your arm out, wait two seconds, grasp at thin air, then fling wildly to the right while rotating your hand counter-clockwise. It’s easy!  Almost every sci-fi faux UI is guilty of something similar; as if the complexity of an interaction model needs to keep pace with the complexity of the system it’s driving. But that’s sort of where we were for awhile during our early design phase, and we got away with it in large part for three reasons:

• We were showing people fake content in an obviously simulated environment, where they had no real connection to the imagery. Note that this issue isn’t unique to AI; it’s often one of the confounding factors when you bring people into the usability lab.
• We were surrounded by people every day who were all speaking the same language; thinking deep thoughts about AI-enabled futures. We were making the mistake of losing touch with the reference points that  everyone else would bring to the table.
• We thought our new designs were super cool, so we gave ourselves a healthy amount of forgiveness when people didn’t immediately get it.

Most products have at least some learning curve, but with the added overhead of AI hype, it’s especially important to ‘spend’ wisely on your user’s cognitive load. When the context of use is novel to the user [figure A], bias for dependability. When there are a lot of new UI tricks to learn [figure B], make sure the primary use cases are super relatable. And when the functionality of the product is especially dynamic [figure C] , your UI should be flush with familiar patterns.

Over time, we snapped out of it. We began fiercely reducing complexity in the UI, and made control and familiarity cornerstones of our experiential framework. We added a software viewfinder and a hardware capture button to the camera. We made sure that the user had the final say in curation; from the best still frame within a clip to its ideal duration. And we showed users more moments than what we necessarily thought was just right , because by allowing them to look a bit below the ‘water line’ and delete stuff they didn’t want, they actually developed a better understanding of what the camera was looking for, as well as what they could confidently expect it to capture in the future.

Through this process we discovered another critically important finding for testing an AI-powered product: fake it till you make it. If forced to choose, it’s leaps-and-bounds more useful to prototype your UX with a user’s real content than it is to test with real ML models. The latter takes an incredibly long time to build and instrument (and is far less agile or adaptive than traditional software development, so it’s more costly to swing and miss), while the former affords you genuine insights into the way people will derive value and utility from your (theoretical) product.

Users preview their clips by streaming them from the camera. On the far left, users choose which clips they want saved to their phone. In the middle, users can toggle on a “suggested” view. On the right, users can pinpoint the exact frame they want to save as a still photo.

In the context of subjectivity and personalization, perfection simply isn’t possible, and it really shouldn’t even be a goal. Unlike traditional software development, ML systems will never be “bug-free” because prediction is an innately fuzzy science. But it’s precisely this fuzziness that makes ML so useful! It’s what helps us craft dramatically more robust and dynamic ‘if’ statements, where we can design something to the effect of “when something looks sort of like x, do y.” And in that departure from rigid logic rules, we also needed to depart from traditional forms of measuring engagement. Success with Clips isn’t just about keeps, deletes, clicks, and edits (though those are important), it’s about authorship, co-learning, and adaptation over time. We really hope users go out and play with it.

Designing with purpose

By re-orienting the conventional AI  paradigm from finding ways to make the machine smarter, to exploring ways to augment human capability, we can unlock far greater potential in machine learning. It can become a tool for unprecedented exploration and innovation; a tool to help us seek out patterns in ourselves and the world around us. As human-centered practitioners, we have a tremendous opportunity to shape a more humanist and inclusive world in concert with AI, and it starts by remembering our roots: finding and addressing real human needs, upholding human values, and designing for augmentation, not automation.

The role of AI shouldn’t be to find the needle in the haystack for us, but to show us how much hay it can clear so we can better see the needle ourselves.

For more on Google’s approach to UX for AI, check out our full collection of articles *.*

19 Examples of Online Case Studies Done Right

Designers generally don’t like writing. After all, creative problem-solving through design uses visual, not verbal tools, right? But, sadly for many, case studies are supposed to contain text, too. This is where a lot of designers and art directors stumble, ending up either with poorly crafted case studies, or no case studies in their portfolio at all. And that’s a huge mistake. Online case studies (because these days, if it’s not online, it’s not there at all) are immensely important as they provide a compact, informative display of not just your skills and expertise, but your professionalism too. A good case study shows that you understand the concept of focus, that you can distinguish between different layers of relevance and also sheds some light on your creative process. As such, case studies are an indispensable hiring tool.

That being said, let’s see how the visually-oriented folks can craft a case study that ticks all the right boxes.

Quick Tips for Designing Perfect Online Case Studies

If you’re in doubt as to where to start with your case studies, here are a few things to keep in mind:

• Stay focused . Don’t use case studies as an opportunity to channel your revolutionary ideas, but don’t delve in conventionalities, either. Don’t try to tell everything about the project at once, or at all. Your clients don’t need to know everything you did for a project. But they do need to know the relevant bits.
• Provide a solid structure. Scannable content is the form that works the best, whatever the format. Separate your key information in tidy, well-rounded units. These include, but are not limited to: project target/goal/outcome, background, evaluation, concept, implementation, conclusion.
• Provide essential project information. Viewers need the who, the what and the when.
• Treat the page as a gallery wall. Consider your own portfolio style and create case study pages that are in line with it, but also convey the character and the spirit of the project, too. When displaying visual material, don’t just scatter it around the page – it won’t impress anyone. Try exhibiting it in engaging, interactive frames, add interaction for better immersion, and display the material in their intended environment – various device screens, etc.
• Maintain good measure. You want to dazzle the visitors, not blind them. If your case studies are too cluttered, flashy or visually saturated, they might create an undesired effect. Go for minimalism, but avoid making your pages look poor.

Sure, things like these are sometimes easier said than done. That’s why we prepared a curated selection of the best, most inspiring online case studies we handpicked around the web, hoping to give you some cues and ideas for your own cases. Here’s what we’ll talk about:

Juicebrothers by Lama Lama

Art of swissdent by creative nights, max shkret by zhenya rynzhuk, mercado by loer architecten, self scenter by ultranoir, fontshare by wemakefab, more & more nespresso by playful, bian 2016 by baillat studio, prada employees online store by niccolò miranda, ortovivo by k95, obys agency typography principles, komuso design by tubik, the 92 group by humana studio, dreamhaus by wørks studio, topline by parsons branding, weekend by hello today, posted by fuge, decathlon app by fuego camina conmigo, unstuck by violet office.

If you read our piece on creative page transitions , you probably remember Lama Lama , a creative digital agency from Amsterdam, and their Juicebrothers project. The case study for the project (the organic, cold-pressed juice brand from Netherlands) is presented in a combination of playfulness and youth typical of Lama Lama, and a high level of professionalism, also typical of the agency . The main visual motif is the beautiful deep green color that communicates health and vitality, featured extensively in layouts for the Juicebrothers website. Small white typography conveys just the right amount of information about the project and allows the imagery to take center stage. The case study page opens with a sort of split screen between bits of text on the left and a vertical image gallery to the right, and then proceeds with larger image and video sections displaying selected bits of visual content for the brand. All the while, we also get to play with the cursor effect – an oversized, pixelized snake trail that follows the mouse movements.

Creative Nights is a UX design consultancy and creative studio headquartered in Prague, with an impressive roster of international projects. One of these projects is the website for the renowned dental products brand, Swissdent. Art of Swissdent is designed as a crossover between an eCommerce website and an online presentation of the brand. The case study , available at the agency’s website in their Works section, follows the style and the look of the agency’s branding and design, and the selected imagery from the project is given in beautiful frame sections with round edges. The entire page is perfectly balanced in terms of atmosphere, colors and dynamics , and makes the displayed work appear as an integral part of the agency’s own aesthetics, even if that may not necessarily be the case. The page ends with three fun, oversized buttons that the visitors can use to share their impressions with the agency.

Zhenya Rynzhuk is an architect-turned-art director with a solid industry experience and quite a few awards under her belt. Her website, which has received accolades for overall design as well as for mobile excellence, features some innovative design solutions, plenty of interactivity and just the right amount of brutalist details to keep things exciting in a minimalist environment . The Work section features several case studies for the projects Zhenya is most proud of, including art direction and interface design for Max Shkret , an award-winning digital artist creating 3D digital models. After an airy, minimalist and monochromatic section introducing the project, the page proceeds with a scroll-animated gallery of select project imagery. The images of Shkret’s digital models of animals (for which he hopes to raise enough money to turn into actual physical objects) are presented in successive full-width sections, each with a background that matches the object chromatically), resulting in an interesting, exciting stroll through Shrek’s imaginary world . This layout also adds a welcome touch of color to Zhenya’s generally monochromatic ambient.

Loer Architecten is a Dutch architecture studio with a beautiful, airy, dynamic website based on full-screen imagery, interactivity and interesting navigational solutions. The Projects section includes an interactive links list from which we get to navigate to the projects that interest us. We picked the Mercado project , which has the goal of transforming an abandoned backalley in the center of Groeningen into a thriving commercial and urban hub. Just as it would be expected from an architecture studio, the case study is clean and precise, opening with the most essential information , such as status and location. It is the page layout, however, that gives it a welcome kick and saves it from being plain and dull . The project name is displayed in vertical letters to avoid occupying precious space on the page. Thin straight and curved interface lines give it dynamicity, and so do animations in individual pieces of visual content, as well as animated scrolling effects. There isn’t a single full-width or full-screen image in this case study which, combined with ample use of negative space, gives it a very clean, breathable character.

Insurance WordPress Theme

Kids and Toy Store WooCommerce Theme

FreightExpress

Transport & Logistics WordPress Theme

Commissioned by Comme des Garcons to create an interactive digital experience helping customers discover their fragrances, the French digital agency Ultranoir came up with Self Scenter , a Web GL-based reinvention of the brand’s Fragrance Finder so that it dynamically creates user-specific shapes. The case study shares some of the immersiveness of the project, especially in the hero section with a video and a large title. The case study, however, assumes a cleaner, more informative and practical character later on the page, sharing some of the visual pieces that best convey the atmosphere of the project – videos and select imagery. And the project is truly stunning, too – a beautiful dark interface with a somewhat mysterious character is graced by superbly designed elements with utmost attention to detail and aesthetic coherence. These dark visuals are contrasted by a light background, complete with the cursor shaped like a dot that changes from black to white and vice versa, depending on the surface it hovers upon.

Wemakefab is an old acquaintance from our exploration of the power of interactive links in web design , and today we want to take a look at the case study for the project they developed for the online font aggregator Fontshare. As we get to learn from the case study, the project involved complete visual rebranding, interface design and even the logo redesign. And we have to say, this is a proper case study here, the one that ticks all the boxes as to how a case study should be done and what it should include . Each element of the project is listed and illustrated in a logical, sequential manner, on a clean, high-contrast black and white page. It starts with the project blurb, and then moves to font cards, internal pages, mobile view, the palette and select details. All visuals are given in a manner that follows the principles of usability and clean design – they are large (occasionally oversized), clean, carefully arranged, with occasional thin lines, both vertical and horizontal, that sequence off the sections. Several elements give off a spirit of playfulness and humor – like the section that switches from white ot black when hovered upon, oversized typography and the blinking cursor. The case study is stylistically coherent and tight and very well matched to the nature and the purpose of the project.

Playful is a collaborative collective of digital creators specialized in art direction and moving picture campaigns. More & More Nespresso is, by their own admission, one of the most challenging and rewarding projects the agency has worked on. The case study for the project is just as complex and rich as the project itself. It opens with an impressive hero slider introducing some of the textures that played a central role in the project, in a deep, sultry purple. Carefully curated images and videos from the project are skillfully arranged along the page, contrasted with large empty spaces with light backgrounds and text, offering a welcome pause from the visual feast. The color play is particularly striking – the project itself features a delicate interplay between rich, deep burgundys, greens and blues on one hand, and fine, elegant pastels on the other. The same interplay is repeated in the case study, and the elegant, sophisticated character of the project is underlined by the use of the lovely Antiga typeface throughout the page. The page features a director’s cut video, which is the centerpiece of the project, but doesn’t take over the case study, as it is after all exactly that – a case study in which the agency explains the creative process and pinpoints main visual cues and motifs.

You may remember the Baillat Studio from our piece on inspiring menu design , in which we praised the studio’s modern, interactive fullscreen menu. Today we’re going to check out the Project section of the website, specifically the case study for the 2016 edition of BIAN (the International Digital Art Biennale). The visual identity for the festival was based on black and red, a color combination that creates a lovely contrast with the page’s light gray background and black interface typography. A short text about the target and the main identity elements (Swiss style-based aesthetics, right-angle frames, repetition, lines and precision) follows the opening hero section with a full-width visual from the project. After this introductory section, we get to explore the visuals from the project, presented in the form of photography, video and images of project material in real life, in its designated ambience. The agency, therefore, decided to let the images speak for themselves, without excessive explanations and textual narratives . And it was a good call, too – the page is compact and informative, just what a case study should be.

Here’s a designer we love to feature in our articles – we’ve written about Niccolò Miranda in our pieces on poster-inspired web design and on great examples of footer design , to name a few. This time around, let’s take a look at how this talented Italian designer and developer with a penchant for illustration decided to present his featured works on his website, using the case study for Prada Employees Online Store as an example. The first thing we notice is that the project pages are completely in line with the overall style of Miranda’s portfolio. By that we mean the paper-like texture, the torn paper effect, the columns and sections resembling newspaper layouts, and, of course, illustrations . The page opens with a hero section that holds a lovely illustration from the project he did for Prada (an online store that sells the brand’s previous collections). We then move on to a section explaining what it was that Miranda was commissioned to do, and sections explaining how he did it. What’s interesting (in addition to the distinct and idiosyncratic style) is that the imagery from the project is presented not in the main page content, but instead in a sidebar that opens to the right when we click on the appropriate icon . The page also features a big oval button that leads to the project’s live site, and that’s about it. It is basically more of a project blurb page than a case study per se, but considering its unique style and Miranda’s amazing talent, we figured it deserved a mention here as well.

K95 is a design, branding and communications agency from Catania, Sicily. They work with mostly Italian clients but have a few international names on their roster as well. Their website features a neat list of projects in the form of an interactive link carousel, each link leading to the appropriate case study. Today we’re going to check out the one for Ortovivo , a Sicilian organic food production company. Each project is neatly divided into sections that include description, target, branding and packaging , linked in the header (from which we can also turn off the case study and return to the homepage). The layout is airy and clean, with plenty of empty space around each piece of visual content, and a large circular animated button inviting us to scroll to explore the project. Sections with empty space are combined with full-width interactive ones, moving and expanding as we scroll. It is a dynamic, modern and skillfully designed page that unites good UX, usability and efficiency with modern design practices that speak volumes of the agency’s expertise and taste.

Obys Agency is a creative design agency from Ukraine with a focus on UX/UI design, animation, graphic design and development. Their website is a modern, streamlined and fluid display of their works, principles, accolades and much more. As an agency that flaunts a serious approach to everything they do, Obys wanted to share some of their ethos and the artistic and design principles they follow in their work, and that’s why they created a standalone website on Typography Principles , while the main website has a page that serves as a case study for it. The site includes three sections explaining how the agency uses fonts, how it combines them and what rules it follows when it comes to typography. The page follows the white on black aesthetic line of the rest of the website, with sections that roll up or down revealing underlying content. Navigation is particularly interesting here, as we get to explore the visual content through scrolling, clicking on oversized interactive buttons, and play videos. Numbered sections and diagonal arrows hint to physical navigation signals (like traffic or airport ones), and the part of the study that deals with animation is presented in a separate unit. The website itself is rather impressive and the case study does an excellent job at conveying its complexity and elegance, both design-wise and in terms of UX.

Tubik Studio is a full-stack digital service agency with a focus on UX and UI design. Their website offers a rather no-frills (but nevertheless striking) display of services and works the studio is most proud of, with a gallery of images leading to specific projects. The page for Komuso Design project, for instance, offers an informative and hands-on overview of the project. It opens with an intro hero image, followed by brief project info presented in a simple, readable form, with comfortable black Gilroy typography on a white background. The visual content is presented in the form of videos on a lovely marble-like background, combined with screenshots from the project arranged on a beautifully combined palette of pastels. A particularly well-designed section is the boxed split slider gallery that offers a dynamic and convenient way of displaying several instances of content without cluttering the page or making it too long. The study ends with the visual system: a color scheme with HEX codes, some representative samples of typography and the mobile layout. The entire page bears an airy, pleasant character, perfectly aligned with the client’s brand and product (a wellness tool designed to help people relax through breathing).

Humana Studio is a Portuguese agency that helps build brands with a social and environmental impact. They were commissioned by the 92 Group, a design studio that challenges traditions in media and entertainment through irreverence, unconventionality and youth. Obviously, this was an excellent fit as the Humana Studio has a distinctly disruptive approach. The case study for the 92 Group brand identity and communication strategy partly follows the same disruptive principles – especially in terms of visual communication – but also some more conventional ones, specifically when it comes to UX. The visual content is saturated, loud and bold , with strong, deep colors on a black background, but the way it is arranged on the page guarantees proper navigation, readability and ease of consumption . The sections are topped with a subtle zoom-in effect and a yellow round cursor that shrinks and expands and the text is short and to the point. The study is brief but concentrated, informative and practical, coherent in character and atmosphere.

WØRKS Studio is a New York-based consultancy specializing in creative direction, strategy and design. Their main website is an exciting showcase of both the agency ethos and their projects, and is marked by a distinct cinematic approach, with a lot of information and content being handed in form of immersive fullscreen videos and animated sequences. The DreamHaus project is presented as an animated study of the pillar design elements used for the project – with the main focus on typography and the palette . The fullscreen hero section opens with a large animated logo of the project, proceeds with a palette of beautiful pastels, with names and hex codes, and ends with a sequence that showcases the typography used for the project, and the main layout style, as well as textures. The visitor can scroll to learn more about the project and its goal, as well as the main guidelines that the agency followed in the creative direction of this project. The images related to the project, or the products of the direction, if you will, are presented with animation effects that feature a brief flash of yellow, which is the agency’s signature color, thus providing a continuity between the project and its creator and, of course, reinforcing the agency’s own branding.

Our most frequent readers might remember Parsons Branding from our piece on inspiring creative agencies and designers , in which we praised the agency’s beautiful UI design and interesting navigation solutions. Today, we want to check out one of their case studies, specifically the one for Topline , the South African tool manufacturer. The case studies all feature unique page navigation – the left portion of the screen contains a numbered section with jump links to specific parts of the case study : Overview, Identity, Packaging and so on, and of course we can simply scroll down and explore the entire study in its intended order. The background is in the agency’s signature green and gray, with a very subtle paper-like texture, giving the entire interface a lifelike quality. The left side, the one with the table of contents, remains static as we scroll, assuring easy navigation and orientation on the page, which is, in itself, quite rich in content, both visual and textual. Certain sections are given in horizontal scroll sliders, so we get an impression that the page expands in all directions. This is an extremely well thought-out case study, brimful of information for those interested in exploring the project in great detail, but at the same time simple and informative for those looking to just skim the content.

The Japanese Hello Today did a quite complete agency work for the home appliance manufacturer Weekend, from strategic planning and branding to graphic design, web design, photo and art direction and even copywriting. The Weekend case study on the agency website is a modern, elegantly dark showcase of everything the agency did, from the first steps to the completion of the project. Discrete white typography on a black background introduces basic project information and brand philosophy, both in English and in Japanese, before we scroll down to visuals. These are presented in a typically Japanese, dignified manner, gently floating on the black background, creating a beautiful contrast and a strange sense of calm . Thin, subtle interface lines provide some framework for the visual content and communicate rather successfully with the overall aesthetics of the website – minimalist and stripped-down.

Fuge is a Moscow-based design agency delivering UI, branding and digital solutions. The agency website is minimalist, in a very reduced palette, with small typography and on-lover grid patterns, resulting in a modern, serious look. This character is repeated throughout the website, including the individual case pages. Our favorite one is the case study for Posted , a design magazine for which the agency did branding, as well as UX and UI services and animations. The case page starts rather minimalistically, with a large image on a light background and just a few bits of text. As we scroll, more and more pieces of content appear on screen, in an interactive and rather fluid way . The case study is divided into sections – logo and elements, desktop and mobile versions of the magazine website. Each image can be expanded in a popup, with smooth and modern transitions, giving the page a dynamic and modern look. This atmosphere is reinforced by a modern, minimalist palette reduced to grayscale, black and red, which is the Posted brand palette. The images (or rather previews) are alternately arranged on the page, creating a lovely balance, and the entire composition appears to be held in place by the grid lines that appear as we hover over certain areas.

Decathlon has long planned a redesign and a relaunch of its app for the Spanish market but the Covid-19 pandemic put a halt to those plans for a while. As soon as the pandemic loosened, the sports goods company reached out to the Barcelona-based, Twin Peaks-named agency Fuego Camina Conmigo (Fire Walk with Me) for a range of services from digital strategy, art direction and concept, to copy, audiovisual content and social ads. The Decathlon App case study is available at the agency website, and it’s one of the most successful, detailed and complete studies we’ve seen in a while . it ticks all the boxes in terms of what a case study should contain – the context, the target, the implementation, and so on, but it does so in a way that is by no means dry or technical. The agency achieved this by skillfully alternating light and readable text sections with fullscreen sections with the visual material from the app , which can be viewed either as images or clicked to play a video. All the while, the agency maintains its own visual identity, present in typography, layout styles and elements such as the round cursor, buttons and icons.

Here’s a project that is as noble as it is well-carried out. Unstuck by Violet Office is an effort started by the CEO of Chobani and several other stakeholders with the goal of helping refugees find full-time jobs in partner companies and their supply chains. Chobani was the first to join the project, of course, and it was soon followed by other major brands like Ben & Jerry and Dole. Violet Office did the branding, web design and development, as well as social media. The branding part is perhaps the most impressive – the agency created a logo and wordmark that can easily fit any brand partner’s logo , and the first part of the case study focuses on that particular effort, complete with rich visuals proving the efficiency of the design . It then proceeds with an analysis of the Unstuck visual system (colors, patterns, typography), and ends with examples of brand activations, complete with the launch video. The high-contrast visuals are displayed full-width, either in galleries or individually, which creates an immersive effect on the visitor, who ends up being completely drawn into the narrative of this commendable project.

Wrapping It Up

As we saw from the examples we visited today, while a good case study may not necessarily have to strictly adhere to a formulaic structure, it’s still a good idea to give it some structure and to conceptualize it in a way that communicates clearly and directly with the viewer. And since the viewers are also potential clients, it’s needless to stress how important this is.

We’ve seen some “proper” case studies with neatly divided sections and a tight structure repeated throughout each study. We’ve also seen some more “relaxed” ones, and some that perhaps don’t really qualify as case studies in the strictest terms but that due to their quality and supreme design elements deserve a mention.

Hopefully we managed to inspire you by showing a variety of styles and methodologies you can follow in creating your own case studies. Feel free to share with us your own favorites or, even better, your own work!

How to Create a WordPress Website: The Ultimate Guide

10 captivating examples of the liquid metal effect in web design, 10 examples of imaginative mouse cursor design, 10 examples of innovative contact form design, 10 examples of websites inspired by poster aesthetics, 10 google font combinations for inspiration, 10 inspiring design podcasts to listen to while you work.

Post your comment cancel reply

Save my name and website in this browser for the next time I comment.

Post your comment

• This is an Ad-Free website
• Learn AI Jobs skills
• Blockchain Courses
• Digital Jobs Offers

Interaction design involves crafting an intuitive experience that emulates an immediate and natural conversation between humans and machines. It merges intricate technical mechanisms within the device into straightforward human actions, reducing effort while enhancing engagement and satisfaction.

A good user experience is crucial for successful digital marketing. It has to engage the user and make their life easier through a website, an app, or a product. It is a service that can influence the purchase of products or the bidding for services. The excellence of user experience is in interaction design .

Interaction Design Vs Ui/Ux Design

Frequently, these terms are confusing and need clarification;

User experience (UX)

In digital, we talk about user experience design, to mean designing the experience of anything useful to a user. Its goal is to create a meaningful and enjoyable experience by considering user needs, behaviours, and goals through disciplines like user research and design .

User Interface (UI)

User Interface (UI) design aims to create an intuitive and user-friendly interface that enhances usability and enables users to accomplish their tasks efficiently. It comprises components such as; buttons, menus, forms, and layout design that improves user interaction and navigation.

Interaction design (IxD)

It encompasses creating devices and products to facilitate maximum human interaction and artificial systems. It helps to provide intuitive and user-friendly interactions that cater to the target audience’s needs. Interaction design extends beyond digital activities. It also covers the creation of physical objects, architecture, and other domains where the interaction between humans and objects takes centre stage.

But let us give some examples:

The mobile user experience varies based on the smartphone device selected, influencing the user’s level of engagement. For example, designers create the user interface that Facebook user sees on their screen with specific arrangements, spaces, fonts, and a dominant blue colour for the menus.

On the other hand, those who did the interaction design made certain decisions regarding smartphones. They determined users should drag their fingers sideways across the screen to switch pages. They also decided that the gesture for zooming in on images would be moving two fingers apart. To return to the home screen, they specified pressing a particular button.

These are all the things we take for granted but were created by an interaction design specialist (or interaction designer) who discovered the most straightforward and intuitive solution for human beings. Before interaction design, many functions were either impossible or had a slower realization process, requiring more menus, clicks, and effort from users who had to learn and remember how to use each device.

The goal in interaction design , the goal is to reduce the demand for user concentration by making the interface easy to use. There is no distinction between novice and expert users, as the design aims for democratic interactivity .

The Role of Interaction Design in Boosting Business Revenue

Interaction design can be one of the most effective weapons for gathering customers and building loyalty . When several companies offer identical products or services at comparable prices, customers are likely to choose the one that is the most user-friendly and straightforward to use. And finding ways to take this concept to the extreme with a customized user experience in interaction design can be the right weapon of victory to beat the competition.

Think, for example, when the iPod beat off competition from the Walkmans’ or how smartphones were increasingly quick to replace push-button mobile phones. Moreover, technologies like automatic checkout machines in supermarkets and self-service machines for public services optimize earlier in more complex systems while producing the same result.

Ready to craft exceptional user experiences? Become a UX Design pro. Join our UX Design course

SECURE YOUR SPOT IN THE COURSE!

The Four Key Activities of Interaction Design

The activities that enhance good user interaction in UI/Ux development process include:

• Identification of needs and requirements.
• Development of alternative design proposals (A/B testing).
• Construction of usable interactive prototypes and evaluations.
• Evaluation of overall utilization.

1. Identification of needs and requirements

Identifying the target audience is crucial because you have to know which users you are addressing and how interactivity can give them a helpful service. These are the fundamental principle of User-Centered Design (UCD). Without it, the product risks being ignored by consumers once it enters the market. Therefore, data collection, questionnaires, and focus groups are necessary to highlight all impressions of the typical user. Interaction designers must use mainly human support in the design of the device.

2. Development of alternative design proposals (A/B testing)

During the development of alternative design proposals, also known as A/B testing, once you have decided what task you will have and what requirements you will fulfill, you must develop different ideas until you find the best fit. This activity consists of two sub-activities: concept design and physical design.

• Conceptual design: It transforms user needs into a conceptual model. The model is nothing more than a written outline of the use of the device. The schema describes the functioning of the designed system using terms and concepts. It represents the theoretical operation that the system is required to have. The system should provide all menus, submenus, and options, such as returning or returning to the initial state. It should also include all actions that the user can perform.
• Physical design: Here, designers focus on aesthetic and actual experience design , including shapes, colours, sounds, images, and icons. They must carefully design each graphic element and screen, following rules, guidelines, and principles. Familiarity with semiotics and pictograms helps maximize aesthetics and effectiveness.

3. Construction of usable interactive prototypes and evaluations

The physical design does not necessarily start with its realization directly in software or in a concrete manner. Creating several physical versions of the final product, even if they are not necessarily usable, is possible and recommended in that the target audience can evaluate graphic or paper versions of usage screens without requiring a complex system design. Prototypes are a great way of finding errors, suggestions, and preferences. When creating interaction design prototypes , designers can use drawings made with software such as Photoshop, Illustrator, or any graphics software, instead of relying on HTML5 or CMS.

4. Evaluation of overall utilization

After creating the prototypes, there is a need to undergo an evaluation to select the best solution. An evaluation plan needs to be put in place that makes the most of two factors: the user’s appreciation and ability to use it. In today’s age, where everything is immediately available in many different ways, a beautiful but difficult-to-use product is unlikely to succeed. That’s why it’s important to properly filter evaluations from the target audience by carefully observing usage.

For the most thorough evaluation possible, an interactive design is expected. The interactive design consists of continuous testing of what has been produced. In this way, one can concentrate concretely (and not abstractly) on the design, reducing the time for the product to enter the market.

Effective Methodologies For Enhancing User Interaction in Ui/Ux Development

Goal-oriented design

The primary goal of product design should be ease of use for the user. For interactive software , it is necessary to implement new methods that provide concise and comprehensive instructions. The machine must seek to be used as naturally as possible without noticing its artificiality.

The product must be designed to meet the specific needs of its users, so its usability must be practical and effective. It is crucial to anticipate potential problems that users may encounter and conduct thorough testing before launching the product.

Personas are individuals that summarize the various groups of people that make up the target group. What types of people need the product, and what is their background? How do they behave with the product? Is each interface able to interact with any user?

Cognitive dimensions

Cognitive dimensions are design principles for notations, interfaces, and programming languages. They serve to evaluate the use of an interactive or to design a new one. They provide a language to speak adequately in a technical manner about the interactive design.

Affective interaction

In addition to responding immediately to the user’s requests like a human conversation, the product must also be able to put the customer at ease, like an excellent human dialogue. This requires simulating human tones, conveying positive emotions, and avoiding negative ones. This encompasses motivational, learning, creative, social, and persuasive influences that can positively impact the customer experience, such as through animations and gentle tones.

Evaluation Techniques Used in Interaction Design

• User observation;
• Requesting Users’ Opinions;
• Ask the experts for their opinions;
• Testing user usage;
• Diversifying use in various user groups.

These evaluations constitute several evaluation paradigms, which are;

• Quick and dirty: In a short time, designers receive feedback from users and experts, focusing on their design suggestions.
• Usability tests: To directly determine user behaviour, we bring a group of users to a laboratory and analyze their actions for completion. While doing so, we evaluate the user behaviour by analyzing their capabilities and the time they take to perform the various activities or tasks on the product.
• Field studies: To accurately assess user behaviour, researchers study natural contexts without external conditioning using video recordings or disguising the evaluation process during evaluations to accurately reflect users’ behaviour.
• Predictive evaluation: Calling on experts for innovative new methods of use and preventive troubleshooting.

If you are passionate about interaction design and wish to explore further opportunities in the digital world, you may have what it takes to become an Internet Marketing Specialist.

Test your skills and find out if you have what it takes to excel in this ever-evolving role

Facilitating Effective User Communications Through Interaction Design

Interaction design language empowers users to communicate effortlessly with digital interfaces, providing instant feedback and ensuring their voices are heard. They include:

Words: The choice of vocabulary and form of text is the most critical dimension of an interactive tool. The most effective way must be to answer the user’s requests comprehensively. The terminology must be comprehensible to the intended target group, with a tone appropriate to the system and welcoming. Users appreciate an approach that thanks them for using it more than one that acts coldly and inanimately.

Visual representations: Visual representations refer to all the visual elements that comprise the software interfaces of a device. The careful selection of shapes, typography, diagrams, colours, icons, and all graphic elements, in conjunction with words, is essential in making the message effective and immediate.

Physical objects and space: Physical objects and space refer to the biological material of the product, its form, composition, and areas of use. Is the thing fixed or mobile? Does it require additional external accessories such as mice, keyboards, or remote controls? In what space does the user need it? Designers must anticipate and remove every difficulty to meet the user’s needs .

Time: What is the user’s time of use? Has the system been set up appropriately for the user experience? If the interactive operation is not instantaneous, for example, it is necessary to show the user the progress of the process. This language also includes content that changes over the interactive time , such as sounds, videos, and animations.

Behaviour: The way the system reacts to user usage. What reactions and animations does it perform? Vibrations, music, videos, animations, etc.

Key Disciplines for Successful Interaction Design

Successful digital experiences are crafted by integrating key disciplines, which create intuitive, engaging, and delightful interactions that resonate with users across diverse platforms and devices.

Industrial design – Designers must create interactive objects according to appropriate physical and aesthetic rules to ensure usability.

Ergonomics – Studying interactivity from the user’s physical and psychological perspectives and examining human behaviour in the product’s usage environment is also necessary.

Cognitive psychology – Understanding the basics of cognitive psychology is essential. These concepts include mental models, mapping, interface metaphors (which develop similarly to a physical dimension), and affordance (which invites users to interact with the material surface).

Human Machine Interaction (HCI) – Academic research on human-computer interaction is needed to test the functionality of the interaction. The most critical investigations are those concerning cognitive dimensions (arriving at a result with as little effort as possible and robust clarity) and cognitive procedures (studying problems in the field with real users).

Design Research – Finding the most aesthetically pleasing and straightforward way on existing systems to ensure engaging and appropriate usability.

Architecture – As interaction design increasingly prevails in urban and public contexts, designers must appropriately design the spaces used for the location where users will interact with it.

User interface design – Designers must individually create each interface to ensure that it consistently and exhaustively responds to the user’s needs, never the other way around, with a system that is responsive 100% of the time.

Questions UX Designers Must Ask

What questions do users frequently ask when they become aware of Interaction Design and want to learn more about it? There are:

• What functions will the user be able to realize, and what purpose does it serve?
• What can the user physically do to interact with the interface?
• Do you need additional tools such as a mouse, touchpad, etc?
• Which design is most effective in helping users understand the available functions?
• Are there any error messages or brief instructions in case of incorrect use?
• What feedback does the user get once the action is completed?
• Do the visual elements of the interface have the correct weight in the display (or physical space), and are they all easy to use?
• Do the elements used have the right balance between simplicity and originality? Or has a similar version been made to an existing standard?

In interaction design , the user comes before the technical issues of the developer. The complexity of the technical realization is of secondary importance compared to the user’s simplified experience.

To realize various prototypes, we must evaluate some reference users to refine the mechanism directly with the designated users.

As the technological process continues to develop at the speed of light, every system experiences increasing updates and simplifications. We have moved from mechanization to digitization and now to interaction design .

Services will progressively become more natural and automatic, allowing individuals to achieve the same results with significantly less time and effort. But before any descent, it is necessary to make the ascent, which implies a complex and thorough construction of the system. That allows the service to act autonomously as if equipped with artificial intelligence. This is why interaction design is the perfect symbiosis of two of the most important disciplines for human beings: the technological and the humanistic components.

To make the system almost ‘human,’ it must make and correct mistakes, just as we do in life. We learn by making mistakes. Experts and non-experts alike must thoroughly analyze and evaluate every interaction design system before, during, and after its design to uncover any undiscovered errors. This help to smooth all edges and achieve a correct and satisfying interaction between man and product.

Interested in learning more about course start dates and fees? Request information now and start your journey toward mastering UX Design!

SEO Copywriter with experience in content creation

START YOUR CAREER

DOWNLOAD YOUR EBOOK

Submit a Comment

Your email address will not be published. Required fields are marked *

Submit Comment

Freelance, aumenta le tue vendite fino a €30.000 al mese grazie all'Intelligenza Artificiale.. Avvia la tua AI Agency! Scopri come nel nostro Webinar Gratuito di martedì 27 agosto alle ore 19:00

• Interaction Design

Complete Beginner’s Guide to Interaction Design

Interaction design has its origins in web and graphic design, but has grown into a realm of its own. Far from merely working with text and pictures, interaction designers are now responsible for creating every element on the screen that a user might swipe, click, tap, or type: in short, the interactions of an experience.

This article serves as a good jumping off point for people interested in learning more about Interaction Design. To that end, we’ll briefly cover the history, guiding principles, noteworthy contributors, and tools related to this fascinating discipline.

Table of Contents

What is interaction design, common methodologies.

• Daily Tasks

People to Follow

Tools of the trade, associations.

Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world.

Interaction design began the day the first screen was designed to hold more than static copy. Everything from a button to a link to a form field is part of interaction design. Over the past several decades, a number of books have been released that explain facets of interaction design, and explore the myriad ways it intersects and overlaps with experience design.

Interaction design has evolved to facilitate interactions between people and their environment. Unlike user experience design, which accounts for all user-facing aspects of a system, interaction designers are only concerned with the specific interactions between users and a screen. Of course, in practice things are never so crisply delineated.

Although interaction design spans myriad types of web and mobile applications and sites, there are certain methodologies that all designers rely on. We’ll explore some of the more common methodologies here: goal-driven design, usability, the five dimensions, cognitive psychology, and human interface guidelines .

Goal-Driven Design

Goal-driven design was popularized by Alan Cooper, in his book The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity , published in 1999. Alan defines goal-driven design as design that holds problem solving as a highest priority. In other words, goal-driven design focuses first and foremost on satisfying specific needs and desires of the end-user, as opposed to older methods of design, which focused on what capabilities were available on the technology side of things.

Today, some of the points Alan brings up seem obvious, since designers rarely select interactions based solely on development constraints. However, at its heart, the methodology is all about satisfying the end-user’s needs and wants, which is just as necessary today as it ever was.

The process involved in goal-driven design, according to Alan, requires five shifts in the way we think as interaction designers.

• Design first; program second. In other words, goal-driven design begins with considerations for how users interact (and how things look!), rather than beginning with technical considerations.
• Separate responsibility for design from responsibility for programming. This refers to the necessity of having an interaction designer who can champion the end-user, without worrying about the technical constraints. A designer should be able to trust his or her developer to handle the technical aspects; in fact Alan Cooper suggests that to do otherwise places the designer in a conflict of interest.
• Hold designers responsible for product quality and user satisfaction. Though stakeholders or clients will have their own objectives, the interaction designer has a responsibility to the person on the other side of the screen.
• This particular idea has developed into something that is now more commonly associated with user research: personas. Yet Alan reminds us to connect personas back to the product, and constantly ask: where will this person use this? Who are they? What do they want to accomplish?
• Work in teams of two. Lastly, interaction designers should never work in a silo. Collaboration with others, which Alan Cooper calls a “design communicator,” is key. Though the design communicator Alan envisioned in 1999 was typically a copywriter intended to provide marketing copy for products, today that has expanded to include a project manager, content strategist, information architect, and many others.

Usability may feel like a vague term, but at its heart, designers are simply asking “can someone easily use this?” It’s been explained in books and online in a myriad of ways, and we will review a few different definitions to uncover some common themes and nuances:

In the book Human Computer Interaction by authors Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale, usability is broken down into three principles:

• Learnability: how easily can a new user learn to navigate the interface?
• Flexibility: how many ways can a user interact with the system?
• Robustness: how well are we supporting users when they face errors?

Meanwhile, Nielsen and Schneiderman explain usability as being made up of five principles:

• Efficiency: how quickly can users perform tasks?
• Memorability: if a user hasn’t visited the system in a while, how well will they remember the interface?
• Errors: how many errors do users make, and how quickly can they recover from errors?
• Satisfaction: do users enjoy using the interface, and are they pleased with the results?

Lastly, the international standard (ISO 9241) has also broken down the word into five principles:

• Understandability: how well can a user understand what they are seeing?
• Operability: how much control does the user have within the interface?
• Attractiveness: how visually appealing is the interface?
• Usability compliance: does the interface adhere to standards?

Clearly, there are common themes that make up what it means for an interface to be “usable.” Regardless of the usability principles a designer follows, it’s an important consideration for any interface.

The Five Dimensions

In Bill Moggridge’s book of interviews, Designing Interactions , Gillian Crampton Smith, an academic in interaction design, introduced the concept of four dimensions of an “interaction design language.” In other words, these dimensions make up the interactions themselves, and as a result they make up the communication between a user and the screen. The four original dimensions are: words, visual representations, physical objects or space, and time . More recently, Kevin Silver, senior interaction designer at IDEXX Laboratories, has added a fifth dimension, behavior .

• 1D: words should be simple to understand, and written in such a way that they communicate information easily to the end user.
• 2D: visual representations are all graphics or images, essentially everything that is not text. They should be used in moderation, so as to not overwhelm.
• 3D: physical objects or space refers to the physical hardware, whether it’s a mouse and keyboard, or a mobile device a user interacts with.
• 4D: time is the length that the user spends interacting with the first three dimensions. It includes the ways in which the user might measure progress, as well as sound and animation.
• 5D: behavior was added by Kevin Silver in his article, What Puts the Design in Interaction Design . It is the emotions and reactions that the user has when interacting with the system.

Using these five dimensions, an interaction designer can pay attention to the very experience the user has when communicating and connecting with a system.

Cognitive Psychology

Cognitive psychology is the study of how the mind works, and what mental processes take place there. According to the American Psychological Association, these processes include “attention, language use, memory, perception, problem solving, creativity, and thinking.”

While psychology is an immensely broad field, there are a few key elements of cognitive psychology that are particularly valued, and in fact may have helped form the field of interaction design. Don Norman called out many of them in his book, The Design of Everyday Things . Here are just a few.

• Mental models are the images in a user’s mind that inform their expectation of a certain interaction or system. By learning the user’s mental model, interaction designers can create systems that feel intuitive.
• Interface metaphors make use of known actions to lead users to new actions. For example, the trash icon on most computers resembles a physical trash can, in order to alert a user to the expected action.
• Affordances are things that are not only designed to do something, but that are designed to look like they are designed to do something. A button that looks like a physical object you can push, for example, is an affordance designed so that someone unfamiliar with the button will still understand how to interact with it.

Human Interface Guidelines

This section is a bit of a misnomer; there actually is no single set of human interface guidelines. However, the idea behind creating human interface guidelines is in itself a methodology. Guidelines have been created by most major technology design businesses, including Apple and Android, Java and Windows. The goal is the same for all of them: to alert prospective designers and developers to advice and recommendations that will help them to create universally intuitive interfaces and programs.

Daily Tasks and Deliverables

An interaction designer is a key player throughout the entire development process. They have a set of activities that are key to the project team. These typically include forming a design strategy, wireframing key interactions, and prototyping interactions.

Design Strategy

Although the boundaries here are fuzzy, one is certain: an interaction designer will need to know who they are designing for and what the user’s goals are . Typically, this is provided by a user researcher . In turn, an interaction designer will assess the goals and develop a design strategy, either independently or with help from other designers on the team. A design strategy will help team members have a common understanding of what interactions need to take place to facilitate user goals .

Wireframes of Key Interactions

After the interaction designer has a good idea of the strategy motivating a design, they can begin to sketch the interfaces that will facilitate the necessary interactions. The devil here lies in the details: some professionals will literally sketch these interactions on a pad/dry-erase board while others will use web applications to aid them in the process, and some will use a combination thereof. Some professionals will create these interfaces collaboratively while others will create them alone. It all depends on the interaction designer and their particular workflow.

Depending on the project, the next logical step for an interaction designer might involve the creation of prototypes. There are a number of different ways in which a team might prototype an interaction, which we won’t be covering in extensive detail here, such as html/css prototypes, or paper prototypes.

Stay Current

One of the hardest parts about being a practicing interaction designer is the speed of change in the industry. Every day, new designers are taking the medium in a different direction. Consequently, users are expecting these new kinds of interactions to appear on your website. The prudent interaction designer responds to this evolution by constantly exploring the web for new interactions and taking advantage of new technologies—while always keeping in mind that the right interaction or technology is the one that best meets the persona’s needs, and not merely the newest or most exciting. Interaction designers also stay current by following thought leaders (like the notable designers below) on Twitter, and pushing the medium forward themselves.

As we noted before, it’s nearly impossible to identify someone as “only” an interaction designer. The field overlaps with UX design, UI design, development, and visual design, and as a result not all the designers listed here even refer to themselves as interaction designers. We’ve included them because of their impact on the field, and because the things they have taught and written about are worth exploring if you yourself work in interaction design.

Interaction designers use a number of different tools to get their jobs done. Whether they’re sketching an interaction on a napkin or presenting a prototype to a client, their goal is the same: communication via conversation. Above all else, interaction designers need to communicate well. The list below is a sampling of tools used to facilitate conversations. Keep in mind that the web interfaces that are created are typically done so with user-facing (front-end) technologies such as JavaScript or CSS.

Balsamiq Mockups

Balsamiq Mockups is an Adobe Air app that makes wireframing an interaction easy. The team at Balsamiq has done a superb job, providing users with a number of interaction design patterns that are ubiquitous to contemporary application design. What’s more, Balsamiq keeps their interface simple, using a hand drawn style for elements and comic sans as a font face. This enables the designer and stakeholders to focus their efforts (and their clients’ feedback) on interaction, by removing the extraneous design elements. Think of it as an online version of paper prototyping!

Learn more about Balsamiq Mockups

InVision is a free web and mobile prototyping tool for Mac and Windows. InVision is designed to facilitate communication and does so by integrating with Photoshop, Sketch, Slack, Jira, and other applications. Designers can upload wireframes and string them together via hotspots into a 2D navigable experience. Clients, stakeholders, and colleagues can add comments directly on the design, and with LiveShare, InVision’s real-time presentation tool, the app enables live whiteboarding.

Learn more about InVision

LucidChart is a flexible diagramming software for everything from Android and iOS experiences to flowcharts, journey maps, wireframes and site mockups. LucidChart offers a number of helpful integrations with the Google Suite, InVision, Atlassian, Slack, and more. This tool manages to be incredibly complex, but intuitive and flexible at the same time. It’s loved by design and UX teams as well as IT support groups and engineers.

Learn more about LucidChart

No one wants to waste time reinventing the wheel. A good interaction library saves time and energy designing or coding a common interaction, and ensures consistency across designs. Patternry is a tool that allows teams of interaction designers to share and store their design and code assets in one central location (i.e. the library). What’s great about Patternry is that it’s more than just a repository; it also provides a starting point, with dozens of patterns for common interactions and modules.

Learn more about Pattenry

Sketch is a design tool (Mac only), best used for icons or medium-to-high fidelity mockups. A lightweight alternative to Adobe Photoshop, Sketch offers layers, grids, and artboards; in short, everything an interaction designer requires to create wireframes and mockups with some visual additions. Want to get more out of Sketch? Consider Zeplin, the Sketch plugin (currently in Beta) to allow for team collaboration.

Learn more about Sketch

Axure RP is arguably the best interaction design tool on the market. Boasting far more robust functionality than Balsamiq, built-in collaboration and sharing, and the ability to easily convert a wireframe to a prototype, Axure seems to offer everything. The one downside is that it perhaps offers too much, which means it has a slow learning curve.

Learn more about Axure RP

Principle for Mac is an open source platform that focuses on functionality and transitions. It works from Sketch artboards in an animation-style layout and offers a huge variety of movements. It’s a free, easy-to-learn interface, with a solid suite of YouTube tutorials and help articles available. The coolest part is that as you build your artboards into a moving, cohesive thing, Principle gives you a working prototype to play with in a separate window that has a built-in screen recorder, too!

Learn more about Principle

An interaction designer is still an IxD whether or not they belong to any particular group. Still, finding other designers is a great way to network and learn from others in the field. All of these associations are available across the United States, and some exist internationally as well.

In their own words: the IxDA network provides an online forum for the discussion of interaction design issues as well as other platforms for people who are passionate about interaction design to gather and advance the discipline.

More information available at: http://www.ixda.org/

IxDA also offers an annual conference for designers, called Interaction Week , that moves around the globe, but continues to offer stellar content and insight from the industry’s leading experts.

Although the AIGA (American Institute of Graphic Arts) was initially founded for graphic designers, the organization itself realizes that graphic designers are more frequently designing compositions for new media, in which interaction design plays a major part. Local AIGA chapters are available throughout the United States, and host events ranging from Photoshop Layer Tennis, to art exhibitions.

More information available at: http://www.aiga.org/

An Event Apart

Hosted around the US, for the last 13 years, An Event Apart has gathered the premiere web and interaction design voices under one roof. This conference is delivered in an intensive, three-day, single-track format with up to 18 separate speakers. They cover topics relevant to developers, designers, UX and UI specialists, account managers, project managers, and more in a clear, digestible way. An Event Apart has consistently hosted some of the industry’s leading thinkers and doers.

More information available at: https://aneventapart.com/

To be fair, there is no one Meetup group. That’s the beauty of it: search “interaction design” in your city on the Meetup interface or go to http://ia.meetup.com/, and you’ll find any number of networking groups, educational groups, and social groups. If you happen to live in an area where an Interaction Design (or User Experience Design) meetup doesn’t yet exist, now’s the time to start! As it happens, Meetup’s interface also makes it easy to start a new group.

More information available at: http://www.meetup.com/

The list of books relevant to interaction design could span many pages by itself. Here, we’ve narrowed the list to just a few iconic books. If you’re really itching to expand your library, though, check out our recommended books for your user experience library .

• What is UX Writing?
• The Perception of Control
• User Stories: A Foundation for UI Design

UX Booth is trusted by over 100,000 user experience professionals. Start your subscription today for free.

Interaction Models and the Key to Creating Optimum Flow

An interaction model is the outline for how a product operates, taking into account user behavior and experience. Here's what you need to know.

Have you ever struggled with an updated app? Or referred to the documentation for a new operating system?

You just don’t care, right? You want to dive into the app straight away. That’s why good design is always invisible, allowing you to dive into the app without having to read through pages of documentation. It banks on your past experiences and expectations by modeling everything for your fulfillment. In the best platforms, those interactions are in perfect sync with your thought process and work in tandem with the system. You, as a user, are in a flow  state  and not all concerned about how the system works.

What Is an Interaction Model?

That invisibility is the hallmark of a good interaction model.

Why Interaction Models Matter

In general, interaction models have a wide variety of use-cases across disciplines, each with its own set of beliefs. In the context of interaction design , we can frame it as the underlying structure or framework that governs the behavior of a product or system in concert with the user’s behavior. It provides structure, consistency, direction and feedback with the system. To summarize, it’s the blueprint of actions between users and the system.

Today’s customers are exposed to more and more digital interactions in their day-to-day life. This has brought the tolerance level for poorly designed products to almost zero. To survive in this experience economy , products have to be on par with the experiences and expectations of the users. With user-centered design , businesses can now focus on users, their context, channels and landscapes to deliver the best possible experience. An interaction model is the starting point for laying the foundation for a great user experience.

Interaction models try to inform the way the product behaves with users. It’s a conceptual model that visualizes the interactions based on the mental model of the users. Governed by the principles of interaction design, a good model must display the following traits;

• Being invisible:  An easy learning curve, familiarity with past experiences, prompt feedback and anticipating user actions make a product invisible. Invisibility is achieved when users are in a state of flow using the product. It’s a hallmark of good interaction models.
• Consistency:  Consistency builds trust. It creates a feeling of stability and honesty, which thereby increases user satisfaction and ease of use. Surprises and shocks can ruin trust.
• Familiarity principle: The model must have real-world metaphors, affordances and past interactions for it to quickly resonate with users . The more familiar users are with an interaction, the quicker the adoption will be.
• User progression : A good model must adapt with user maturity. The progression from novice to mastery for users requires the system to provide adequate interactions. There must be provisions for basic and expert users.
• Unobtrusive:  The model must display adequate maturity when giving alerts and feedback. Rather than intimidating users with constant notifications, the system must be passive, calling less attention to itself.
• Minimalism:  Focus on what’s important to users and set aside all other features that don’t help users focus on the task. In a sense, design around what is critical and leave the rest. Too many features, ads and attention cravings will backfire.

More on UX Engage Your Users on a New Level With These 3 Emotional UX Techniques

Defining Interaction Models

Building interaction models require comprehensive insights into users and their contexts, channels and landscapes. These will serve as the guiding stars to help you define an interaction model. It is a collaborative process that starts with whiteboard sessions and workshops before progressing toward more concrete models.

By bringing stakeholders, small and mid-size enterprises and users into the process, we can ensure diversity on all viewpoints and quicker ideations. The interaction model can draw insights upon the initial research activities designers conduct.

Let’s take a closer look.

Scenario Ideations

From personas, key scenarios   and context can be captured and prioritized from personas. They can be based on usage ratio, significance or user context. These scenarios can be further visualized through rough sketches with users in their context.

Conceptual Models

From scenarios, you can easily figure out the connections, hierarchies and interactions to visualize a low fidelity model . They are abstract, diagrammatic representations of entities, structures and relationships enabling us to digest the big picture.

Information Architecture

By giving structure to the elements in conceptual models, information architecture organizes, labels and gives hierarchy to the data. The information is a bit more concrete and provides more details like site maps, hierarchies, categorizations, navigation and metadata.

More on UX The Job of a UX Designer Is About to Undergo Radical Change

Screen Layouts 

From the information architecture, you get to know the key primary functions, verbs and nouns of your product. Based on this, the foundational structure can be visualized as a starting point. Form factors like mobile, tablet and desktop must also be considered at this stage.

This provides hierarchy and structure to the layouts by organizing contents into meaningful blocks. Components are based on functionality and can have multiple patterns to represent them. For example, headers, footers, headings, content modules, data tables and more.

These are the building blocks of the interface. They bring harmony and consistency to the user interface (UI). A typical pattern will have multiple elements that display how data or information is organized. They can be reused across different components to achieve a function.

Advantages of an Interaction Model

The most exciting part of any design is the implementation phase. For a practitioner, the joy of seeing the insights transition into concepts is satisfying. It’s nice to see your hard work finally pay off with the evolution of these frameworks. Interaction models serve as a foray into this process, giving us the foundational structure from which we can start building. Being invisible doesn’t make them inferior, and their immortality is evident across design systems, style guides and interaction libraries.

And for a user, it’s better that they remain unnoticed. As they say, “The most beautiful things are always hidden.”

Recent Product Management Articles

InVisionApp, Inc.

Inside Design

10 amazing examples of interaction design

Emily esposito,   •   aug 20, 2018.

W hen users open a website or app, they first notice the obvious design elements: logo, colors , icons, illustrations, and imagery. While these elements do contribute to the overall user experience, they are actually pieces of a larger puzzle: interaction design . This concept can be more subtle to end-users than a flashy, new homepage, but it is essential in creating an engaging, intuitive digital experience.

What is interaction design?

Interaction design is about facilitating interactions between users and products (most often, those products are apps or websites). According to the Interaction Design Foundation , “the goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible.” In other words, interaction designers are responsible for creating every element on a screen that a user might interact with, whether through clicking, swiping, tapping, or some sort of action.

The five dimensions of interaction design serve as a helpful model to understand what it involves. First introduced by Gillian Crampton Smith, an interaction design academic, the model only included four dimensions. Kevin Silver, a senior interaction designer at IDEXX Laboratories added the fifth.

1D: Words should be simple to understand and should communicate the right amount of information to the user (too much detail can overwhelm, while too little information can cause confusion).

2D: Visual representations , like images, typography , and icons , should supplement the words to communicate information to the user.

3D: Physical objects or space refers to the actual hardware and objects that a user interacts with. For example, are they using a smartphone or a laptop with a mouse? And where are they, at their desk or on a crowded subway?

4D: Time refers to how users might measure progress, with sound and animation for example, as well as how long they spend interacting with the first three dimensions.

5D: Behavior was added by Kevin Silver and includes how the previous dimensions define the interactions of a product. It also includes the reactions of users and the product.

Related: 6 reasons why UX designers should explore gestural interaction

10 examples of interaction design

What does design interaction look like in real life? Here are some of our favorite examples found on Dribbble .

By Jony vino . Splitting the bill with your friends isn’t always as easy as it seems, especially if you’re more of a visual person than a numbers person. This app concept lets you input the total bill, select the tip percentage, and then see how much each person will pay. The best part? Instead of manually adjusting each person’s part and having to constantly update everyone’s share, you can simply resize each person’s section in the app and the numbers will automatically recalculate for everyone.

By Prem Gurusamy . On most e-commerce sites, you have to navigate to a completely different part of the website or app to view your cart. With this interaction, you can instantly see your items “fly” into your cart as soon as you click the “Add to cart” button. The cart continues to visually surface your items, even as you explore other parts of the site.

By Igor Pavlinski . Social media apps are notorious for information overload, showing you all the top stories, trending videos or articles, and breaking news at once. This concept for a new social media app puts the control back in the user’s hands, organizing content by source (like YouTube, Vimeo, Twitter, or Reddit) and letting you choose which channel to explore. This card-like layout also eliminates the need to jump between apps to consume your favorite content. Instead, it’s easy to alternate between sources within the same experience.

By tubik . There are a million and one ways to customize your burger. And when you’re ordering on your smartphone, selecting each individual ingredient on a small screen can be an exercise in dexterity. This UI concept for the Tasty Burger app simplifies the ordering experience by bucketing ingredients by type. Instead of displaying a long list of every possible variation of cheese, produce, meat, or bun, you first click the category of ingredient (like cheese) and then you are presented with the different types, like gouda or comte.

By Rahul.Design . If you’re house hunting and can’t see the property in person, the next best option is to get a virtual tour. This concept for real estate app, Spec, leverages our natural behavior when looking at a new space. You can click into any room, like the kitchen or living room, and move your phone to get a 360-degree view. It’s easy to switch between rooms with just a single tap.

By Forest Plasencia . Filters offer a powerful, easy way to surface different slices of information. But, the problem with a lot of filter interactions is that they open a popup or new page in the app, hiding the very information you want to filter. This micro-interactions keeps everything in the same view, even when you do filter. This way, you can see the data change instantly when you select different filtering criteria.

By Dmitro Petrenko . It’s easier than ever to arm and monitor your house thanks to smartphone apps, but between 94%-99%

Related: Creating a tool that records user interactions

By Gil . This simple page interaction improves the user experience on-site and helps the company keep visitors on their pages, longer. The main purpose of the site is to showcase how these properties can be used in nature, as an office, and as extensions. Instead of creating separate experiences for each purpose, this page mimics the user flow of comparing and contrasting the different uses, and seamlessly bouncing between them.

By Dominik Martin . Interactions don’t need to be bold and noticeable to make an impact. This app concept simplifies a behavior that we all despise — picking our country of residence from a long list. Instead of having users scroll through the list and find their country, this micro-interaction first has you pick the first letter of your country and then find it from a much smaller, focused list of countries.

By Mykolas Puodziunas . More and more retail sites are making it easier for you to “quick view” an item, rather than clicking into every detail page and then having to back out to the search results to browse more items. This concept takes it one step further and lets you view each product in its different available colors, without having to leave the category page.

Did we miss your favorite interaction design example? Share it with us on Twitter: @InVisionApp .

by Emily Esposito

Emily has written for some of the top tech companies, covering everything from creative copywriting to UX design. When she's not writing, she's traveling the world (next stop: Japan!), brewing kombucha, and biking through the Pacific Northwest.

Collaborate in real time on a digital whiteboard Try Freehand

Get awesome design content in your inbox each week, give it a try—it only takes a click to unsubscribe., thanks for signing up, you should have a thank you gift in your inbox now-and you’ll hear from us again soon, get started designing better. faster. together. and free forever., give it a try. nothing’s holding you back..

Design for interaction: Best practices for creating engaging digital experiences

Every swipe, tap, and click represents a potential engagement or missed opportunity. The role of interaction design and best practices has never been more pivotal.

Beyond mere functionality, the way users interact with digital interfaces spells the difference between fleeting interest and deep, sustained engagement. From websites that effortlessly guide users through their journey to interactive kiosks that beckon with allure, mastering interaction design principles is more than essential.

The importance of interactive design in modern digital products

Interactive design goes beyond aesthetics; it focuses on how users interact with a product or service. In an era where user experience (UX) makes or breaks a brand, designing intuitive, seamless, and enjoyable interactions is paramount. By understanding user behavior and integrating feedback mechanisms, designers can craft experiences that meet and exceed user expectations.

User retention and loyalty

One of the primary benefits of excellent interactive design is improved user retention and loyalty. When users find an interface easy to navigate and engaging, they are more likely to return. According to a study by Forrester , a well-designed user interface could increase website conversion rates by up to 200%, highlighting the financial impact that effective interactive design can have on businesses.

Brand perception

Effective interaction design also enhances brand perception. Users often associate the ease of use and aesthetic appeal of a digital product with the overall quality of the brand. A study by the Design Management Institute found that design-led companies have outperformed the S&P 500 by 219% over ten years, underscoring the significant impact of design on brand performance.

Understanding user behavior: Psychology of interaction

Central to effective interaction design is a deep understanding of user behavior. Human-computer interaction (HCI) principles, cognitive psychology, and behavioral economics all play a role in shaping how users perceive and interact with digital interfaces. By leveraging psychological insights, designers can create interfaces that feel natural and intuitive, leading to higher engagement and satisfaction levels.

Cognitive psychology insights

Cognitive psychology examines how individuals process information, make decisions, and retain knowledge. When applied to interaction design, cognitive principles guide the creation of interfaces that align with users’ mental models and cognitive capabilities.

• Attention span: Users have limited attention spans, particularly in digital environments where distractions abound. Designers should prioritize clarity and simplicity to ensure that important information stands out and is easily processed.
• Memory and recall: Designing interfaces that support users’ memory and recall capabilities can improve usability. Techniques such as clear navigation paths, consistent labeling, and visual cues can help users remember where they are within an interface and how to accomplish tasks efficiently.
• Visual perception: Understanding how users perceive visual information—such as color , contrast, and hierarchy—can significantly impact interface design. Visual elements should be organized to naturally guide users’ attention towards important content and actions

Behavioral economics

Behavioral economics provides insights into how users make decisions, often irrationally, in predictable ways. By understanding these patterns, designers can create more persuasive and engaging interfaces.

• Nudge theory : This concept involves subtly guiding users towards desired actions without restricting their choices. For example, highlighting a recommended product or service can nudge users towards making a purchase.
• Anchoring : Users often rely heavily on the first piece of information they encounter (the anchor) when making decisions. Displaying original prices next to discounted prices leverages this principle to enhance the perceived value of a deal.

Designing intuitive interfaces: Usability and accessibility considerations

Usability and accessibility are foundational aspects of interactive design. A well-designed interface should be easy to navigate, regardless of the user’s technical proficiency or physical abilities. Incorporating principles such as simplicity, consistency, and clarity ensures that users can achieve their goals efficiently, thereby enhancing their overall experience.

Usability principles

• Simplicity : Keep the design as simple as possible. Avoid unnecessary elements that do not serve a purpose.
• Consistency : Use familiar symbols and icons to reduce the learning curve for users.
• Feedback : Provide immediate feedback for user actions to confirm that their inputs are being processed.

Accessibility considerations

Accessibility considerations are equally crucial. Designing interfaces that are accessible to users with disabilities not only broadens your audience but also demonstrates a commitment to inclusivity and user-centered design. Techniques such as providing alternative text for images, ensuring keyboard navigation compatibility, and using color schemes that accommodate color-blind users are essential for creating universally accessible digital experiences.

Legal compliance

Ensuring accessibility is not just a matter of good practice; it is also a legal requirement in many jurisdictions. The Americans with Disabilities Act (ADA) in the United States and the Web Content Accessibility Guidelines (WCAG) provide frameworks for making digital content accessible. Failure to comply with these standards can result in legal consequences and damage to a brand’s reputation.

Incorporating feedback mechanisms: Enhancing user participation

Feedback mechanisms are vital for fostering user engagement and participation. Whether through interactive forms, surveys, or real-time feedback prompts, giving users a voice in their digital journey empowers them and provides valuable insights for iterative improvements. Responsive design principles ensure that feedback mechanisms are seamlessly integrated into the user experience, encouraging continuous interaction and dialogue.

Examples of effective feedback mechanisms

• Interactive forms: Allow users to provide feedback or request information without leaving the page they are on.
• Surveys: Short, targeted surveys can provide insights into user preferences and experiences.
• Real-time feedback prompts: Pop-ups or notifications that ask for user feedback on their experience can provide immediate and actionable data.

Best practices for creating engaging digital experiences in digital signage

Digital signage represents a unique opportunity to engage audiences in physical spaces. Whether in retail environments, corporate offices, or public venues, interactive digital signage can captivate viewers and deliver dynamic content.

Content relevance

Tailor content to the context and location of the signage to maximize relevance and impact. For example, a retail store might display promotions and product information that are specific to the location and time of day.

Visual appeal

Use high-quality visuals, animations, and videos to attract attention and convey messages effectively. A study by the Digital Signage Federation found that 47% of viewers recall seeing a digital video ad in the past 30 days, indicating the strong impact of visual content.

Interactivity

Incorporate touchscreens , gesture recognition, or mobile interactions to encourage user engagement. Interactive elements can significantly increase the time users spend with the signage, thereby increasing the likelihood of message retention.

Utilize data analytics to measure the effectiveness of content and optimize future campaigns based on user interaction patterns. Tracking metrics such as engagement time, interaction frequency, and content recall can provide valuable insights for improving digital signage strategies.

The role of technology in enhancing interactive design

Technological advancements play a crucial role in shaping interactive design. Leveraging modern technologies can significantly enhance user experiences and set a brand apart from its competitors. These advancements not only streamline the design process but also enable the creation of more personalized, efficient, and engaging interfaces.

Case studies: Successful interactive design implementations

Examining successful implementations of interactive design can provide valuable insights and inspiration for future projects.

Spotify ’s user interface is a prime example of effective interactive design. It combines a clean, intuitive layout with powerful AI-driven recommendations, creating a seamless and personalized user experience. Features such as Discover Weekly and Daily Mixes keep users engaged by offering new and relevant content.

Airbn b ’s platform excels in providing a user-friendly experience. The design focuses on simplicity and usability, with clear navigation and robust search functionalities. User-generated content, such as reviews and photos, adds authenticity and helps users make informed decisions.

Key takeaways for designing compelling experiences

Designing for interaction is both an art and a science. By prioritizing user needs, understanding behavioral psychology, and integrating feedback mechanisms, designers can create digital experiences that are not only functional but also delightful to use.

• User-centered design: Put users at the center of the design process to create meaningful interactions.
• Accessibility: Ensure inclusivity by designing for users of all abilities.
• Continuous improvement: Use analytics and feedback to iterate and refine designs over time.
• Innovation: Embrace emerging technologies and trends to stay ahead in the competitive digital landscape.

Ultimately, interactive design’s success lies in its ability to forge meaningful connections between users and digital products, driving engagement, satisfaction, and loyalty.

Future trends in interaction design

Looking ahead, the evolution of interaction design is poised to be shaped by several emerging trends:

Voice User Interfaces (VUIs)

The rise of smart speakers and virtual assistants is leading to an increased focus on designing voice-driven interactions that are intuitive and conversational. According to Juniper Research, the number of voice assistants in use is expected to reach 8 billion by 2023, highlighting the growing importance of VUIs.

Augmented Reality (AR) and Virtual Reality (VR)

These technologies offer immersive experiences that blend physical and digital worlds, opening up new possibilities for interactive storytelling and product demonstrations. Driven by advances in hardware and software, the AR and VR market is projected to reach $209.2 billion by 2022.

Artificial Intelligence (AI) Integration

AI-powered interfaces can personalize user interactions in real-time, anticipating user needs and preferences to deliver hyper-relevant content and experiences. For example, Netflix uses AI algorithms to recommend content based on user viewing habits, significantly enhancing user engagement and satisfaction.

Ethical design

As awareness grows around data privacy and ethical considerations, designers will need to prioritize transparency, consent, and user control in their interactive designs. The General Data Protection Regulation (GDPR) in the EU and similar laws worldwide are pushing companies to adopt more ethical data practices.

By staying abreast of these trends and embracing them thoughtfully, designers can continue to push the boundaries of what is possible in interactive digital experiences. If you are ready to elevate your digital experience and implement interactive elements in your digital signage or other projects, consider exploring Yodeck’s interactive capabilities. Whether you’re looking to create interactive kiosks, dynamic playlists, or immersive experiences, Yodeck provides the tools and support you need to captivate your users.

Get started now and explore the potential of interactive design !

Information

• Author Services

Initiatives

You are accessing a machine-readable page. In order to be human-readable, please install an RSS reader.

All articles published by MDPI are made immediately available worldwide under an open access license. No special permission is required to reuse all or part of the article published by MDPI, including figures and tables. For articles published under an open access Creative Common CC BY license, any part of the article may be reused without permission provided that the original article is clearly cited. For more information, please refer to https://www.mdpi.com/openaccess .

Feature papers represent the most advanced research with significant potential for high impact in the field. A Feature Paper should be a substantial original Article that involves several techniques or approaches, provides an outlook for future research directions and describes possible research applications.

Feature papers are submitted upon individual invitation or recommendation by the scientific editors and must receive positive feedback from the reviewers.

Editor’s Choice articles are based on recommendations by the scientific editors of MDPI journals from around the world. Editors select a small number of articles recently published in the journal that they believe will be particularly interesting to readers, or important in the respective research area. The aim is to provide a snapshot of some of the most exciting work published in the various research areas of the journal.

Original Submission Date Received: .

• Active Journals
• Find a Journal
• Proceedings Series
• For Authors
• For Reviewers
• For Editors
• For Librarians
• For Publishers
• For Societies
• For Conference Organizers
• Open Access Policy
• Institutional Open Access Program
• Special Issues Guidelines
• Editorial Process
• Research and Publication Ethics
• Article Processing Charges
• Testimonials
• Preprints.org
• SciProfiles
• Encyclopedia

Article Menu

• Subscribe SciFeed
• Google Scholar
• on Google Scholar
• Table of Contents

Find support for a specific problem in the support section of our website.

Please let us know what you think of our products and services.

Visit our dedicated information section to learn more about MDPI.

JSmol Viewer

The possibility of detrimental effects on soil–structure interaction in seismic design due to a shift in system frequency, 1. introduction, 2. methodology, 2.2. dynamic equilibrium, 3. ssi system versus fixed-base oscillator, 3.1. dynamic properties of ssi, 3.2. shift in system frequency, 4. detrimental effects of ssi, 4.1. data on structures and sites, 4.2. case studies, 4.3. evaluation of system frequency, 5. conclusions, author contributions, data availability statement, acknowledgments, conflicts of interest.

• Mylonakis, G.; Gazetas, C. Seismic soil-structure interaction: Beneficial or detrimental? J. Earthq. Eng. 2000 , 4 , 277–301. [ Google Scholar ] [ CrossRef ]
• Khosravikia, F.; Mahsuli, M.; Ghannad, M.A. The effect of soil–structure interaction on the seismic risk to buildings. Bull. Earthq. Eng. 2018 , 16 , 3653–3673. [ Google Scholar ] [ CrossRef ]
• Moghaddasi, M.; Cubrinovski, M.; Chase, J.G.; Pampanin, S.; Carr, A. Probabilistic evaluation of soil- foundation-structure interaction effects on seismic structural response. Earthq. Eng. Struct. Dyn. 2011 , 40 , 135–154. [ Google Scholar ] [ CrossRef ]
• Nakhaei, M.; Ghannad, M.A. The effect of soil-structure interaction on damage index of buildings. Eng. Struct. 2008 , 30 , 1491–1499. [ Google Scholar ] [ CrossRef ]
• Forcellini, D. Seismic fragility of tall buildings considering soil structure interaction (SSI) effects. Structures 2022 , 45 , 999–1011. [ Google Scholar ] [ CrossRef ]
• Dong, V.N.; Dookie, K.; Duan, D.N. Nonlinear seismic soil-structure interaction analysis of nuclear reactor building considering the effect of earthquake frequency content. Structures 2020 , 26 , 901–914. [ Google Scholar ]
• Dong, V.N.; Dookie, K.; Chunse, P.; Byounghan, C. Seismic Soil–Structure Interaction Analysis of Concrete Gravity Dam Using Perfectly Matched Discrete Layers with Analytical Wavelengths. J. Earthq. Eng. 2019 , 25 , 1657–1678. [ Google Scholar ]
• Zhang, N.; Wang, L.; Zhang, Y.; Lu, H.; Dai, D.; Cai, G.; Gao, Y. Effect of a V-shaped canyon on the seismic response of a bridge under oblique incident SH waves. Earthq. Eng. Struct. Dyn. 2023 , 53 , 496–514. [ Google Scholar ] [ CrossRef ]
• Zheng, S.-X.; Jia, H.-Y.; Zhao, C.-H.; Qu, H.-L.; Shi, X.-L. Seismic response analysis of long-span and asymmetrical suspension bridges subjected to near-fault ground motion. Eng. Fail. Anal. 2020 , 115 , 104615. [ Google Scholar ] [ CrossRef ]
• Oztoprak, S.; Cinicioglu, S.F.; Oztorun, N.K.; Alhan, C. Impact of neighbouring deep excavation on high-rise sun plaza building and its surrounding. Eng. Fail. Anal. 2020 , 111 , 104495. [ Google Scholar ] [ CrossRef ]
• Cui, C.; Zhang, S.; Chapman, D.; Meng, K. Dynamic impedance of a floating pile embedded in poro-visco-elastic soils subjected to vertical harmonic loads. Geomech. Eng. 2018 , 15 , 793–803. [ Google Scholar ]
• Cui, C.Y.; Meng, K.; Wu, Y.J.; Chapman, D.; Liang, Z.M. Dynamic response of pipe pile embedded in layered visco-elastic media with radial inhomogeneity under vertical excitation. Geomech. Eng. 2018 , 16 , 609–618. [ Google Scholar ]
• Renzi, S.; Madiai, C.; Vannucchi, G. A simplified empirical method for assessing seismic soil-structure interaction effects on ordinary shear-type buildings. Soil Dyn. Earthq. Eng. 2013 , 55 , 100–107. [ Google Scholar ] [ CrossRef ]
• Fu, J.; Todorovska, M.I.; Liang, J. Correction factors for SSI effects predicted by simplified models: 2D versus 3D rectangular embedded foundations. Earthq. Eng. Struct. Dyn. 2018 , 47 , 1963–1983. [ Google Scholar ] [ CrossRef ]
• Cinna, L. Mexico, San Francisco, Los Angeles and Kobe: What next? Nat. Hazards 1997 , 16 , 287–296. [ Google Scholar ]
• ASCE/SEI 7-16 ; Minimum Design Loads for Buildings and Other Structures. American Society of Civil Engineers: Reston, VA, USA, 2016.
• FEMA P-1050-1/2015 ; National Earthquake Hazard Reduction Program (NEHRP) Recommended Seismic Provisions for New Buildings and Other Structures: Part 2 Commentary. Building Seismic Safety Council (BSSC): Washington, DC, USA, 2015.
• CECS 160: 2004 ; General Rules for Performance-Based Seismic Design of Buildings (Trial Version). China Association for Engineering Construction Standardization (CECS): Beijing, China, 2004.
• National Institute of Standards and Technology. Soil-Structure Interaction for Building Structures ; Report No. NIST GCR 12-917-21; National Institute of Standards and Technology: Gaithersburg, MD, USA, 2012.
• Zhao, M.; Liu, P.; Zhang, J.; Zhang, G.; Gao, Z.; Du, X. A direct time-domain FEM-SBFEM-SBPML method for soil-structure interaction analysis using quadtree mesh. Comput. Geotech. 2023 , 161 , 105597. [ Google Scholar ] [ CrossRef ]
• Liu, J.; Bao, X.; Wang, D.; Tan, H.; Li, S. The internal substructue method for seismic wave input in 3D dynamic soil-structure interaction analysis. Soil Dyn. Earthq. Eng. 2019 , 127 , 105847. [ Google Scholar ] [ CrossRef ]
• Zhang, L.; Wang, J.T.; Xu, Y.J.; He, C.H.; Zhang, C.H. A Procedure for 3D Seismic Simulation from Rupture to Structures by Coupling SEM and FEM. Bull. Seismol. Soc. Am. 2020 , 110 , 1134–1148. [ Google Scholar ] [ CrossRef ]
• Zhang, X.; Far, H. Seismic behaviour of high-rise frame-core tube structures considering dynamic soil-structure interaction. Bull. Seismol. Soc. Am. 2022 , 20 , 5073–5105. [ Google Scholar ] [ CrossRef ]
• Fu, J.; Liang, J.; Ba, Z. Non-singular boundary element method on impedances of three-dimensional rectangular foundations. Eng. Anal. Bound. Elem. 2019 , 99 , 100–110. [ Google Scholar ] [ CrossRef ]
• Luis, A.P.; Suarez, A.; Aznarez, J.J.; Maeso, O. Kinematic internal forces in deep foundations with inclined piles. Earthq. Eng. Struct. Dyn. 2015 , 44 , 2129–2135. [ Google Scholar ]
• Chen, S.S.; Liao, K.H.; Shi, J.Y. A dimensionless parametric study for forced vibrations of foundation-soil systems. Comput. Geotech. 2016 , 76 , 184–193. [ Google Scholar ] [ CrossRef ]
• Ghannad, M.A.; Jahankhah, H. Site-dependent strength reduction factors for soil-structure systems. Soil Dyn. Earthq. Eng. 2007 , 27 , 99–110. [ Google Scholar ] [ CrossRef ]
• Luco, J.E.; Lanzi, A. Approximate soil-structure interaction analysis by a perturbation approach: The case of stiff soils. Soil Dyn. Earthq. Eng. 2013 , 51 , 97–110. [ Google Scholar ] [ CrossRef ]
• Lanzi, A.; Luco, J.E. Approximate soil-structure interaction analysis by a perturbation approach: The case of soft soils. Soil Dyn. Earthq. Eng. 2014 , 66 , 415–428. [ Google Scholar ] [ CrossRef ]
• Fu, J.; Liang, J.; Todorovska, M.I.; Trifunac, M.D. Soil-structure system frequency and damping: Estimation from eigenvalues and results for a 2D model in layered half-space. Earthq. Eng. Struct. Dyn. 2018 , 47 , 2055–2075. [ Google Scholar ] [ CrossRef ]
• Luco, J.E. Soil-structure interaction and identification of structural models. In Proceedings of the 2nd ASCE Conference on Civil Rngineering and Nuclear Power, Knoxville, TN, USA, 15–17 September 1980; Geotechnical Topics. ASCE: New York, NY, USA, 1980; Volume II, pp. 10.1–10.30. [ Google Scholar ]
• Trifunac, M.D.; Hao, T.Y.; Todorovska, M.I. Response of a 14-Story Reinforced Concrete Structure to Nine Earthquakes: 61 Years of Observation in the Hollywood Storage Building ; Report CE 01-02; Department of Civil Engineering, University of Southern California: Los Angeles, CA, USA, 2001. [ Google Scholar ]
• Luco, J.E.; Wong, H.L.; Trifunac, M.D. Soil-Structure Interaction Effects on Forced Vibration Tests ; Report 86-05; University of Southern California, Department of Civil Engineering: Los Angeles, CA, USA, 1986. [ Google Scholar ]
• Fu, J.; Liang, J. Performance degradation of tuned-mass-dampers arising from ignoring soil-structure interaction effects. Soil Dyn. Earthq. Eng. 2019 , 125 , 105701. [ Google Scholar ]
• Todorovska, M.I.; Trifunac, M.D. The system damping, the system frequency and the system response peak amplitudes during in-plane building-soil interaction. Earthq. Eng. Structrual Dyn. 1992 , 21 , 127–144. [ Google Scholar ] [ CrossRef ]

Click here to enlarge figure

Share and Cite

Tao, W.; Fu, J.; Li, Y. The Possibility of Detrimental Effects on Soil–Structure Interaction in Seismic Design Due to a Shift in System Frequency. Appl. Sci. 2024 , 14 , 7519. https://doi.org/10.3390/app14177519

Tao W, Fu J, Li Y. The Possibility of Detrimental Effects on Soil–Structure Interaction in Seismic Design Due to a Shift in System Frequency. Applied Sciences . 2024; 14(17):7519. https://doi.org/10.3390/app14177519

Tao, Weifeng, Jia Fu, and Yugang Li. 2024. "The Possibility of Detrimental Effects on Soil–Structure Interaction in Seismic Design Due to a Shift in System Frequency" Applied Sciences 14, no. 17: 7519. https://doi.org/10.3390/app14177519

Article Metrics

Further information, mdpi initiatives, follow mdpi.

Subscribe to receive issue release notifications and newsletters from MDPI journals

• Reviews / Why join our community?
• For companies
• Frequently asked questions

What is Interaction Design?

Interaction design is an important component within the giant umbrella of user experience (UX) design . In this article, we’ll explain what interaction design is, some useful models of interaction design, as well as briefly describe what an interaction designer usually does.

A simple and useful understanding of interaction design

• Transcript loading…

Interaction design can be understood in simple (but not simplified ) terms: it is the design of the interaction between users and products. Most often when people talk about interaction design, the products tend to be software products like apps or websites. The goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible.

If this definition sounds broad, that’s because the field is rather broad: the interaction between a user and a product often involves elements like aesthetics , motion, sound, space, and many more. And of course , each of these elements can involve even more specialised fields, like sound design for the crafting of sounds used in user interactions.

As you might already realise, there’s a huge overlap between interaction design and UX design. After all, UX design is about shaping the experience of using a product, and most part of that experience involves some interaction between the user and the product. But UX design is more than interaction design: it also involves user research (finding out who the users are in the first place), creating user personas (why, and under what conditions, would they use the product), performing user testing and usability testing, etc.

The 5 dimensions of interaction design

The 5 dimensions of interaction design(1) is a useful model to understand what interaction design involves. Gillian Crampton Smith, an interaction design academic, first introduced the concept of four dimensions of an interaction design language, to which Kevin Silver, senior interaction designer at IDEXX Laboratories, added the fifth.

Words—especially those used in interactions, like button labels—should be meaningful and simple to understand. They should communicate information to users, but not too much information to overwhelm the user.

2D: Visual representations

This concerns graphical elements like images, typography and icons that users interact with. These usually supplement the words used to communicate information to users.

3D: Physical objects or space

Through what physical objects do users interact with the product? A laptop, with a mouse or touchpad? Or a smartphone, with the user’s fingers? And within what kind of physical space does the user do so? For instance, is the user standing in a crowded train while using the app on a smartphone, or sitting on a desk in the office surfing the website? These all affect the interaction between the user and the product.

While this dimension sounds a little abstract, it mostly refers to media that changes with time (animation, videos, sounds). Motion and sounds play a crucial role in giving visual and audio feedback to users’ interactions. Also of concern is the amount of time a user spends interacting with the product: can users track their progress, or resume their interaction some time later?

5D: Behaviour

This includes the mechanism of a product: how do users perform actions on the website? How do users operate the product? In other words, it’s how the previous dimensions define the interactions of a product. It also includes the reactions—for instance emotional responses or feedback—of users and the product.

See how 5 dimensions of interaction design come together in the animation below:

Important questions interaction designers ask

How do interaction designers work with the 5 dimensions above to create meaningful interactions? To get an understanding of that, we can look at some important questions interaction designers ask when designing for users, as provided by Usability.gov(2):

What can a user do with their mouse, finger, or stylus to directly interact with the interface? This helps us define the possible user interactions with the product.

What about the appearance ( colour , shape, size, etc.) gives the user a clue about how it may function? This helps us give users clues about what behaviours are possible.

Do error messages provide a way for the user to correct the problem or explain why the error occurred? This lets us anticipate and mitigate errors.

What feedback does a user get once an action is performed? This allows us to ensure that the system provides feedback in a reasonable time after user actions.

Are the interface elements a reasonable size to interact with? Questions like this helps us think strategically about each element used in the product.

Are familiar or standard formats used? Standard elements and formats are used to simplify and enhance the learnability of a product.

So what do interaction designers do?

Well, it depends.

For instance, if the company is large enough and has huge resources, it might have separate jobs for UX designers and interaction designers. In a large design team, there might be a UX researcher , an information architect, an interaction designer, and a visual designer , for instance. But for smaller companies and teams, most of the UX design job might be done by 1-2 people, who might or might not have the title of “Interaction Designer”. In any case, here are some of the tasks interaction designers handle in their daily work:

Design strategy

This is concerned with what the goal(s) of a user are, and in turn what interactions are necessary to achieve these goals. Depending on the company, interaction designers might have to conduct user research to find out what the goals of the users are before creating a strategy that translates that into interactions.

Wireframes and prototypes

This again depends on the job description of the company, but most interaction designers are tasked to create wireframes that lay out the interactions in the product. Sometimes, interaction designers might also create interactive prototypes and/or high-fidelity prototypes that look exactly like the actual app or website.

Diving deeper into interaction design

If you’re interested to find out more about interaction design, you can read Interaction Design – brief intro by Jonas Lowgren, which is part of our Encyclopedia of Human-Computer Interaction . It provides an authoritative introduction to the field, as well as other references where you can learn more.

References and Where to Learn More

Course: Interaction Design for Usability

Read more of our engaging literature and resources on interaction design

More about What Puts the Design in Interaction Design

Questions to consider when designing for interaction: The What & Why of Usability

Hero Image: Author/Copyright holder: Unsplash.com. Copyright terms and licence: CC0

User Experience: The Beginner’s Guide

Get Weekly Design Tips

Topics in this article, what you should read next, apple’s product development process – inside the world’s greatest design organization.

• 1.4k shares

How to Change Your Career from Graphic Design to UX Design

Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces

• 1.3k shares

The Principles of Service Design Thinking - Building Better Services

A Simple Introduction to Lean UX

• 3 years ago

Dieter Rams: 10 Timeless Commandments for Good Design

• 4 years ago

The 7 Factors that Influence User Experience

Adaptive vs. Responsive Design

• 1.2k shares

The Grid System: Building a Solid Design Layout

10 Free-to-Use Wireframing Tools [Updated for 2024]

Open Access—Link to us!

We believe in Open Access and the  democratization of knowledge . Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change , cite this article , link to us, or join us to help us democratize design knowledge !

Privacy Settings

Our digital services use necessary tracking technologies, including third-party cookies, for security, functionality, and to uphold user rights. Optional cookies offer enhanced features, and analytics.

Experience the full potential of our site that remembers your preferences and supports secure sign-in.

Governs the storage of data necessary for maintaining website security, user authentication, and fraud prevention mechanisms.

Enhanced Functionality

Saves your settings and preferences, like your location, for a more personalized experience.

Referral Program

We use cookies to enable our referral program, giving you and your friends discounts.

Error Reporting

We share user ID with Bugsnag and NewRelic to help us track errors and fix issues.

Optimize your experience by allowing us to monitor site usage. You’ll enjoy a smoother, more personalized journey without compromising your privacy.

Analytics Storage

Collects anonymous data on how you navigate and interact, helping us make informed improvements.

Differentiates real visitors from automated bots, ensuring accurate usage data and improving your website experience.

Lets us tailor your digital ads to match your interests, making them more relevant and useful to you.

Advertising Storage

Stores information for better-targeted advertising, enhancing your online ad experience.

Personalization Storage

Permits storing data to personalize content and ads across Google services based on user behavior, enhancing overall user experience.

Advertising Personalization

Allows for content and ad personalization across Google services based on user behavior. This consent enhances user experiences.

Enables personalizing ads based on user data and interactions, allowing for more relevant advertising experiences across Google services.

Receive more relevant advertisements by sharing your interests and behavior with our trusted advertising partners.

Enables better ad targeting and measurement on Meta platforms, making ads you see more relevant.

Allows for improved ad effectiveness and measurement through Meta’s Conversions API, ensuring privacy-compliant data sharing.

LinkedIn Insights

Tracks conversions, retargeting, and web analytics for LinkedIn ad campaigns, enhancing ad relevance and performance.

LinkedIn CAPI

Enhances LinkedIn advertising through server-side event tracking, offering more accurate measurement and personalization.

Google Ads Tag

Tracks ad performance and user engagement, helping deliver ads that are most useful to you.

Share Knowledge, Get Respect!

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

New to UX Design? We’re giving you a free ebook!

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

New to UX Design? We’re Giving You a Free ebook!