{"id":24227,"date":"2019-03-18T12:15:57","date_gmt":"2019-03-18T10:15:57","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=24227"},"modified":"2019-03-18T10:45:34","modified_gmt":"2019-03-18T08:45:34","slug":"interaction-design-101-implement-site","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/web-development\/interaction-design-101-implement-site\/","title":{"rendered":"Interaction Design 101: What Is It and How Can You Implement It in Your Site?"},"content":{"rendered":"\n

There was a time when websites were purely visual. The information you sought was displayed on your computer screen \u2014 information like directory contents, magazine articles, or photographs \u2014 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\u2014they actually interact with it.<\/p>\n\n\n\n

Take Apps<\/a>, 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.<\/p>\n\n\n\n

Compare that with this website from the \u201990s below. Which one do you think users would enjoy interacting with more?<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

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<\/a> both the website and the brand it represents. These online interactions are also how people usually \u201cmeet\u201d brands for the first time, so it\u2019s important that websites create positive first impressions through smart interaction design.<\/p>\n\n\n\n

Defining Interaction Design<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

The Five Dimensions of Interaction Design<\/h2>\n\n\n\n

When building an app<\/a> or website, you can follow these five dimensions of interaction design as a guide.<\/p>\n\n\n\n

1. Words<\/h3>\n\n\n\n

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

2. Visual Representations<\/h3>\n\n\n\n

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

3. Physical Objects or Space<\/h3>\n\n\n\n

It\u2019s 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\u2019t look cluttered and hard to navigate. Additionally, people now use different devices to access the internet, so your website\u2019s design must adjust to different screen sizes<\/a> instead of being optimized solely for a desktop.<\/p>\n\n\n\n

4. Time<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

5. Behavior<\/h3>\n\n\n\n

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?<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

The Laws of Creating Positive Interactions<\/h2>\n\n\n\n

You can follow these three laws to ensure positive interactions between your website and its visitors.<\/p>\n\n\n\n

Hick\u2019s Law<\/h3>\n\n\n\n

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\u2019s users save time by dividing options into sections, much like how many e-commerce sites<\/a> segment their products into different categories. This simplifies the decision-making process and improves the overall experience for users.<\/p>\n\n\n\n

Fitts\u2019 Law<\/h3>\n\n\n\n

Fitts\u2019 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.<\/p>\n\n\n\n

Tesler\u2019s Law<\/h3>\n\n\n\n

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\u2019s both minimalistic and easy to navigate.<\/p>\n\n\n\n

For example, on Airbnb there are very basic options on the homepage: either book a place or rent out space. If you\u2019re 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.<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

Eight Best Practices in Interaction Design<\/h2>\n\n\n\n

Follow these best practices when building a website.<\/p>\n\n\n\n

1. Ensure Discoverability<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

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.<\/p>\n\n\n\n

2. Provide Signifiers<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

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\u2019s not always visible to users, signifiers tell them when an action\u2019s possible.<\/p>\n\n\n\n

3. Offer Feedback<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

4. Enable Mental Models<\/h3>\n\n\n\n

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\u2019s used or what it can do. Bad user interface (UI) design can lead to confusion and error.<\/p>\n\n\n\n

For example, Mercedes\u2019 seat controls are shaped like a car seat. This allows users to intuitively know how to control what.<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

In contrast, look at how Skype\u2019s UI strayed away from standard dialogues, causing confusion. Apart from the complicated language, the options don\u2019t even look like dialogue buttons.<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

Mental models are users\u2019 expectations based on previous experiences with similar products. Unexpected surprises can lead to confusion and, ultimately, frustration.<\/p>\n\n\n\n

5. Establish Constraints<\/h3>\n\n\n\n

To minimize errors and confusion, it\u2019s 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.<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

6. Ensure Consistency<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Interaction<\/figure><\/div>\n\n\n\n

7. Follow Common Patterns<\/h3>\n\n\n\n

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:<\/p>\n\n\n\n