< Back
Web Design

Good interaction design makes for good design

Date Posted: March 5, 2018Reading time: 8 minutes

It wasn’t that long ago that websites were made to fit a width that was fixed to one size only. Designers and developers didn’t have to care about whether it would look right on a phone because no one was browsing on their flip phones anyway. Because small laptops were less common, people were using desktops and were expected to have their browser the full width of the screen. If the website overflowed so you had to side-scroll, well, that was your problem. Websites were designed like print ads, not expected to move or respond or react.

When accessing the internet started getting more mobile and a few more companies started to invest in building their own computers and eventually, tablets came into play, it led to a vast difference in screen sizes and resolutions. People were seeing the same site on multiple different devices. This was the beginning of designers and developers having to give a lot more thought about user-centered design and how people were going to interact with a website. Today, there are around 220 different screen sizes (and growing) that people use to look at over 644 million active websites on the internet.

People unfamiliar with the nuances of website design don’t tend to see it as something that’s alive, but for all intents and purposes, it is. You interact with it, it responds to touch and hover and reacts accordingly. It gives you information and can take information. This is something that needs to be taken into account when designing. It won’t be flat. It won’t be stationary and look the same all the time like a print advertisement would. Text is going to change place to adapt to different screen and browser sizes. Images and blocks of information are going to look different on a small phone as opposed to a 27-inch iMac.

Good interaction design is also a good user experience, which leads to other elements of a proper website, like accessibility. All these things connect, and together create good design. Without any of these elements, you don’t have a proper website. It is difficult to communicate the importance of user interactions to someone designing a website who still sees websites like print advertisements, and in my experience, it’s almost always something that gets overlooked and ends up tacked on at the end instead of being part of the initial design considerations. It can be fixed at the end, but since it’s such an abstract topic it should be one of the initial aspects of website design.

The heart of interaction design is designing interaction. But what does that mean? It means deciding what functionality exists in the product, and how it behaves when a human uses it, as well as how it is presented to the human so s/he can understand it. While IA, usability, psychology and graphic/interface design all inform those choices, it is the interaction designer who creates scenarios of use, user stories and/or use cases and flows that represent those choices for the engineer to program. So the key skill is being able to design the behavior of the software when a human interacts with it. All else is useful data.

— Christina Wodtke

It is objectively easy to place some elements together and create a website. The most popular web design currently is a one page scrolling site starting with some form of large hero with large text on it, an intro paragraph section, a section with three column items with icons, some testimonials, a footer with address and social media and a copyright notice. But what makes the design useful and easy for users is thinking about what people will do on the site and how they will use it. What can a user do with their mouse, finger or stylus to interact with the website? Are elements placed in the proper area and have the correct appearance to imply their function? Is there feedback once an action is performed? Understanding and implementing practices like this are fundamental to designing good interactions.

Great interaction design makes the website feel more intuitive and allows for a user to reach their goals easier and receive a larger amount of satisfaction from the effort. Consideration should be taken for how a user interacts with a website, and usability typically leads to a better understanding of the website, a better experience for the user and a better overall design in the end.

Consider the below design of a hero section on a fictional website.

The hero section on a fictional website.

As in real life, website design has something called affordances. Affordances are situations where an object’s physical characteristics intuitively imply its functionality and use. The term was invented by J.J. Gibson in 1977 and popularized by Don Norman in his book, The Design of Everyday Things. For example, if a door has a flat plate on it or a bar going across it, this affords pushing, which says it will open away from you. The design of stairs affords going up and down them. A teapot affords filling because of the open well that will not spill liquid, affords picking it up by its rounded handle and pouring from a spout that opens into the inner vessel. Affordances in digital design don’t exist in the physical sense like this because a website is a two-dimensional item, and does not have physical cues, rather are implied by other design details and rely on visual cues.

There are parts of a website that are affordances. A hamburger menu affords clicking and displaying hidden navigation links. A button affords an action, an underlined word affords taking you to another page. Not only do these things afford functionality, it’s very important that interacting with elements in any way do something. Hovering over a button should give you an indication, like changing colour, that if you click on the element, something will happen. Even something as small as the cursor arrow changing to a pointer when you hover over a link matters.

In the design above, the top C A M P I N G text affords an action, because it has the visual cues of a button (a ghost button). Someone might try to click on it, expecting, perhaps to be taken to camping supplies but will receive no results from clicking it. The underline on Dolor could potentially be construed as a link cue instead of a divider and a user might be inclined to try clicking on it.

Which of the below affords the most interaction as a button? The one that looks three dimensional, of course, because buttons in the physical sense are three dimensional. But since the popularity of flat design, we see a lot more of the center button. Its rectangular shape with text centered inside indicates button properties. The one on the left wouldn’t immediately give that signal because it looks like text.

Three "submit" buttons. One with no background and blue text, one blue with white text and one that with three dimensional shading.

Color can be part of an indicator of interaction as well (it shouldn’t be the entire clue for accessibility purposes, as seen in a recent blog). Below shows a simple example of color as an indicator. A blue button versus a red button. The red button signals a destructive action and therefore should be used as such, in warnings, errors,?and things that will be deleted. The blue button signals a safe action, a submit.

Example website buttons. One blue submit button and one red delete button.

If a website doesn’t communicate interaction or non-interaction like this, and thereby their affordances clearly, the end user can get frustrated because they will not know how to interact with the website and parts of the website, or it will take them longer than necessary to understand. It will not be intuitive. Users should not have to guess when they’re interacting with a website and interaction should not depend on random discovery. A study on the Three Click Rule?tested to see if users will leave a website if they have to click more than three times to find information. The study found that users don’t really care if they have to click to find information, the frustration comes from failing to find something and not sufficiently relaying information.

When I design a website, I look at the elements and imagine interacting with them. Hovering over a button, clicking to search, how an element might load onto the page, how a menu might expand to show all items. What should I expect to happen at each of these steps? Interaction succeeds based on how well you interact with your user, or how easy you make the website for your user to work with. It should be considered in the early planning stages of all website design.