Interaction Design: What Is It, and How Can You Use It?
Interaction design might be the most talked about design concept of 2015. It’s something you should be thinking about and planning for in all of your digital projects.
But how can you make the most of interaction design? How can you design something people want to interact with? While some of those answers are changing with technology, one element remains the same – people want to use design that is intuitive, functional and aesthetically pleasing.
What is Interaction Design?
In design, human–computer interaction, and software development, interaction design, often abbreviated IxD, is “about shaping digital things for people’s use”, alternately defined as “the practice of designing interactive digital products, environments, systems, and services.” — Wikipedia
Simply, interaction design is a process of connecting the digital world to the human one. It’s making things that are screen-based, appear real and function in the digital realm as they would in the physical space. This connection helps people use and interact with digital products and devices, from desktop computers, phones and watches to websites, apps and games. Interaction design is a concept that combines everything we know about design and function into a single idea.
IxD is the buzzword of the design community as we try to better learn how to design and replicate physical actions and interactions to best connect digital products to users. The ideas behind design are rooted in the principles of good visuals while technology is evolving almost as quickly as we can design for it.
Questions to Consider
One of the best guides to thinking about interaction design is actually a usability standard from Usability.gov. The guide provides a set of questions (and even sub-questions) to use as the foundation for creating a project with digital interactions and “with this understanding, you can anticipate how someone might interact with the system, fix problems early, as well as invent new ways of doing things.”
Here are the concepts to consider first, you can find all the sub-questions and considerations from Usability.gov.
- Define how users can interact with the interface
- Give users clues about behavior before actions occur
- Anticipate and mitigate errors
- Consider system feedback and response time
- Strategically think about each element in the design
- Simplify for learnability
Many of these concepts should seem familiar. The concepts and ideas are in line with what we discuss frequently in the design community when we talk about what does and does not work aesthetically. While the techniques you use to create a completely interactive design may be different, the principles of good design are relatively the same.
Much of what you think about interaction combines principles of design with principles of human emotion and interaction. When determining how a digital project should work, think about how you use and interact with your favorite tools. What about these tools appeals to you? (It’s likely that many of the best features are things you don’t even consciously think about.)
Think about each of these principles or concepts when deciding how the user will connect with your design.
- Motion: When you think about motion and interaction design, often the first mental images are of swipes or taps because those are the user motions that activate elements in the design. Clicking a mouse or turning a tablet screen to get a certain effect are other motions that are commonly used. Other aesthetics associated with motion are also important, such as visual cues in photographs, directional pull from design elements and video.
- Space: What type of environment is the user interacting with? Is the design created in two- or three- dimensional space? Is that space only part of the screen or do actions extend past the screen to the physical world?
- Time: The amount of time a user spends with an interaction can impact whether the interaction continues. There is a delicate balance of an interaction being appropriately engaging and/or too long or short. Think about the goal of the interaction and then how long it should take from start to finish.
- Sound: One of the most-debated parts of digital design might be sound. While some users love it, others are quickly annoyed. When using sound in interactions, always account for users who will disable the function; the design needs to work just as effectively without it.
- Aesthetics: Every design element comes into play here. How does it all look? Does this look convey the right emotional message to the user. Space, color, typography, contrast and readability play significant roles in the visual aspect of interaction design.
Let’s go back to the principles of interaction and really think about aesthetics. (That’s one of the primary things we like to think about and discuss as designers, right?)
How do all the things we know about design play into designing interactions? It’s really not any different in terms of visuals than other types of design projects. The major – and likely first – consideration is size and scale. Many interactive projects might be considerably smaller than you are used to. (You could be focused only on the design for a phone or watch, but the design might also translate to desktop computers in another way.)
When thinking visually, start with the smallest canvas that will house the design and build up. (If you can make it work small, it is much easier to “grow” the design; eliminating things that are already designed can be a lot tougher.
- Space: While some may try to decrease space between elements in small spaces, you actually need to give elements more room in small designs. Ensure that each element has plenty of room to identify it and perform the correct action. (Buttons must be large enough to touch without activating another element on the screen.) Use multiple screen (through swipe actions) if necessary to make the most out of small spaces.
- Color: While using the colors of your brand is important, you want to make sure the colors provide enough contrast to be seen in a variety of environments. This could require adding some optional colors to your color palette for interaction items. Consider bright and engaging hues, especially for mobile and watch apps.
- Typography: Lettering should be simple and readable. Stick to a modern-style typeface (serif or sans serif is OK) with a medium, uniform stroke width. Avoid condensed, overly bold or light versions or styles with elaborate strokes.
- Contrast: Every element in an interactive design should live against the elements surrounding it. This may sound harsh in terms of design, but stark contrast can make elements easy to read and understand. The contrast will also draw attention to the interaction quickly and help users identify what to do. Establish contrast with color, typography, space and imagery or language.
- Readability: All of the elements in your interaction-based project should be easy to “read” at a glance. Design for scan-ability and function, while keeping in mind that you may only have a fraction of a second to convince a user to perform a desired interaction. Understanding and readability are key to making this happen.
There is so much good information about interaction design available. (And plenty of opinions about what does and does not work as well.)
If you want to learn more, here are three great resources that you should find to be valuable and each will make you think about interaction design in different ways.
- “Three Laws of Interaction Design” by Diogenes Brito
- “The Future Interface: Design to Make Technology Human” by Danielle Reid
- “The 10 Principles of Interaction Design” by Creative Bloq
Interaction design is something you need to be thinking about. Users are coming to expect interactions in almost every aspect of design. Most users access the web and other digital design projects through mobile devices with an expectation of doing more than just reading text.
Planning for and designing these interactions with purpose might seem intimidating at first, but it not much different conceptually than any other aspect of the design. The big difference comes in how to make the interactions work, that’s where it is important to have a good developer by your side or to continue to hone in your web development skills.