Home » Web Dev » Interaction Design 101: What Is It and How Can You Implement It in Your Site?

About Naida Alabata

Naida Alabata
Naida Alabata is an Entrepreneur and currently a Junior Content Marketing Specialist at Xight Interactive Asia and opts to share her expertise in business and entrepreneurship, web development, and marketing. She was raised in Manila, Philippines and a graduate of BS Entrepreneurship in Miriam College. You can follow Naida on Twitter @alabatanaida.

Interaction Design 101: What Is It and How Can You Implement It in Your Site?

There was a time when websites were purely visual. The information you sought was displayed on your computer screen — information like directory contents, magazine articles, or photographs — without any user interaction. Thanks to various developments in computer hardware and media, websites have become much more than that. Today, users do not just visit a website to browse through its contents—they actually interact with it.

Take Apps, for example: On its homepage, it welcomes visitors with an action simulator for making apple cider. Users are guided through the whole process, replete with animation, music, and narration, while they are also required to press keys to proceed.

Compare that with this website from the ’90s below. Which one do you think users would enjoy interacting with more?

Interaction Design 101

Ensuring optimal interaction between the website you build and its users is key to creating a good user experience (UX), which in turn affects how people perceive both the website and the brand it represents. These online interactions are also how people usually “meet” brands for the first time, so it’s important that websites create positive first impressions through smart interaction design.

Defining Interaction Design

Interaction design is a concept focused on creating interfaces that support meaningful interactions between websites and users. It ensures that each element of the website behaves in a way that both engages users and helps them accomplish their goals efficiently.

The purpose of interaction design is to provide users with a seamless experience whenever they visit a website. It involves the interplay of many disciplines, including information structure, content strategy, and visual design.

To become an effective interaction designer, one must have a rich understanding of human behavior as well as the ability to anticipate how users will interact with the different elements of the website.

The Five Dimensions of Interaction Design

When building an app or website, you can follow these five dimensions of interaction design as a guide.

1. Words

Your website’s written content is invaluable, but even more so if it’s written with your intended audience in mind. Give users value by being informative and using words that are clear, concise, and easy to understand.

2. Visual Representations

Most people are visual in nature, so the images, icons, diagrams, typography, and other graphical elements in your website will be just as important as written content. Use graphics that capture users’ attention and lead them to interact with the other content on the website.

3. Physical Objects or Space

It’s not just the website elements themselves that matter but also where you put them on the page. Be mindful of the space between different objects so your site doesn’t look cluttered and hard to navigate. Additionally, people now use different devices to access the internet, so your website’s design must adjust to different screen sizes instead of being optimized solely for a desktop.

4. Time

This refers to how users perceive the duration of their stay on your site with the help of changing media like animation and sounds. For example, this loading animation for a brewing website not only rouses the interest of visitors, but it also pacifies the impatience brought about by waiting. Elements like this provide users with the means to track their progress, adding to the seamlessness of the interaction.

Interaction Design 101

5. Behavior

This dimension looks at what visitors do on the website and how you can use their emotional feedback to improve the user experience. For example, if you find that users complain about the checkout process of your e-commerce site, ask them what particular elements add friction to their experience. Was it the requirement to sign up? Was it a perceived lack of security?

Take a close look at how they interact with the product and the different elements of the site. Determine, too, how the four previously mentioned dimensions influenced their behavior.

The Laws of Creating Positive Interactions

You can follow these three laws to ensure positive interactions between your website and its visitors.

Hick’s Law

People tend to take longer to decide the more options they have in front of them, according to psychologist William Edmund Hick. Help your website’s users save time by dividing options into sections, much like how many e-commerce sites segment their products into different categories. This simplifies the decision-making process and improves the overall experience for users.

Fitts’ Law

Fitts’ law posits that bigger objects are easier to find and point out. You can apply this to web design by making the buttons and menus on your site bigger and easier to interact with.

Tesler’s Law

Larry Tesler, former Apple vice president, once said that every application can be simplified only up to a certain point. Once simplification becomes impossible, the designer can opt to move the complexity to the backstage processes, leaving users with a design that’s both minimalistic and easy to navigate.

For example, on Airbnb there are very basic options on the homepage: either book a place or rent out space. If you’re interested in the former, you just type in a location, input the dates, and number of guests. From there, they move you on to more complicated tasks like looking for your preferred place, price, and inputting more information.

Interaction Design 101

Eight Best Practices in Interaction Design

Follow these best practices when building a website.

1. Ensure Discoverability

Make sure users know what they can do on your website, by labeling icons. Encountering unfamiliar icons can throw them off and prevent them from getting the most out of their visit.

Interaction Design 101

As you can see in the examples above, the icons are clearly labeled, making all the options available to users crystal clear. Not only can you see what the possible interactions are, you know exactly what they do.

2. Provide Signifiers

Add signifiers that indicate what users can do on the page. A good example of this is when a clickable icon changes color once the mouse pointer hovers over it.

Interaction Design 101

As you can see above, hovering over a certain part of an email brings up the icon signifying that you can delete an email. While it’s not always visible to users, signifiers tell them when an action’s possible.

3. Offer Feedback

Provide users with explicit information about the process and the results of their action on the website. Tell them what will happen when they click something. They also need to know if the system is loading, processing, downloading, or something else.

For example, when you submit a form and input something incorrect, the field where you made an error is usually highlighted along with an X mark to let you know where you made the mistake.

4. Enable Mental Models

The interface of your app or website must be designed for ease of use so that users can form an accurate mental model of how it’s used or what it can do. Bad user interface (UI) design can lead to confusion and error.

For example, Mercedes’ seat controls are shaped like a car seat. This allows users to intuitively know how to control what.

Interaction Design 101

In contrast, look at how Skype’s UI strayed away from standard dialogues, causing confusion. Apart from the complicated language, the options don’t even look like dialogue buttons.

Interaction Design 101

Mental models are users’ expectations based on previous experiences with similar products. Unexpected surprises can lead to confusion and, ultimately, frustration.

5. Establish Constraints

To minimize errors and confusion, it’s important that your UI set limits on what users can do. Restrict options only to what is doable and important at any given moment instead of laying down all possible choices.

Interaction Design 101

6. Ensure Consistency

To make your interface consistent, make sure that the same operation is used to perform similar tasks. For instance, if swiping right means an affirmative response in one instance, it must be so for other instances as well.

Interaction Design 101

7. Follow Common Patterns

Innovation is great, but following established patterns can lead to a better user experience and improved learnability. For example, use familiar UI components such as:

  • Search boxes.
  • Dropdown menus.
  • Sliders.
  • Icons.

The use of common elements such as these is why most forms have a standardized look.

Interaction Design 101

8. Use Visual Hierarchy

Assign the contents of your site according to importance. You could make certain elements stand out—and make them appear important—by making them bigger or of a different color than the rest of your website’s contents. You can see this in the contrasting image sizes below.

Interaction Design 101

Tips to Improve Your Interaction Design Skills

You don’t become better at interaction design overnight. Here are some tips to improve at it.

1. Listen

This is the only way to obtain feedback. Whether it’s during the testing phase, from user comments, or even from other designers—listening is crucial to ensure that all aspects of your interaction design lead to a seamless user experience.

For example, you may have the perfect web design for first-time visitors, but it might not be optimal for return visits. This is the kind of realization you can get if you listen to standard practice.

2. Communicate Clearly

One of the best ways to communicate is by telling a story. Try to understand the story of the brand and convey this tale through the elements of your design. To ensure that you engage users effectively, make sure to avoid jargon in your written content. Keep everything clear and simple.

3. Develop Several Ideas

Conceptualizing new ideas is tough, but don’t settle for whatever you think of first. Always try to come up with several concepts. This way, you can effectively compare the good from the bad. Also, don’t be afraid to recycle old ideas to solve new problems.

4. Use a Pen

Many designers feel compelled to create their final product as soon as they can, skipping valuable steps in the process. To avoid mistakes and save time, it’s best to draw and test your ideas using a good ol’ pen and paper before converting them into pixels.

On a related note, use a pen to take note of any good ideas that come to your mind. This trick will let you remember concepts better than by typing notes in digital devices.

5. Visit Usability Testing Sessions

Nothing gives you a clearer picture of how your app or website performs than seeing your intended users actually use it. Usability testing sessions are useful testing tools that let you see users interact with your website firsthand, giving you valuable data on what improvements to implement.

Good Interaction Design = Good User Experience

Websites have long become more than mere repositories of information. Today, customers can base their opinions of a brand on their interactions and experience with the brand’s website. A website that successfully promotes a brand, therefore, is not just attractive but also carefully designed to provide users with a positive and meaningful experience every time.

What is your idea of good interaction design? Tell us in the comments.

Published on Web Code Geeks with permission by Naida Alabata, partner at our WCG program. See the original article here: Interaction Design 101: What Is It and How Can You Implement It in Your Site?

Opinions expressed by Web Code Geeks contributors are their own.

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of