With more and more mobile devices and, especially, wearables making their way to our daily lives, the approach to design of both apps and websites is changing rapidly.
Just a few years ago, many if not most designers were working on “above the scroll” model trying to put the most catchy things in the upper part of the page, but the expansion of small screens made the idea obsolete. Nowadays, the goal is to engage the user in discovering the app or website by more subtle methods — of which interaction design is probably the most efficient one.
We went to TNO Soesterberg to get some brain-computer interface (BCI) training. In a few weeks, we’ll be conducting EEG scans ourselves to do some multi-sensory experiments and check the effect on the brain. Awesome! This is the experiment setup. Mate has to stare at the monitor, and count some flickering dots.
IxD — What’s That?
If user interface, or UI is what the user sees in a mobile application, a website, or washing machine menu, then interaction design, or IxD is how that UI responds to the user’s needs. The task of IxD is to let the user know how they can accomplish their goal, making it intuitively understandable.
Interaction design is also something we can see around us every day, be it a green light of a bill acceptor on a vending machine or the subway turngate opening after you’ve paid for your ride. Let’s put it like this: IxD, or rather good IxD, is the “human part” of any interface, something that lets the user to go beyond human-computer interaction towards more natural experience.
Looking closer at IxD, we can see that often it’s comprised of smaller, atomic moments that are also called “microinteractions.”
Dan Saffer, Director of Interaction Design at Smart Design, explains microinteraction as “a product use case boiled down to a single moment, focused on a single task. Unlocking your smartphone is a microinteraction; so is the chiming sound that plays when you boot up Windows or OS X.”
At the end of the day, pretty much any interaction design challenge can be boiled down to such microinteractions, and it’s them that the general usability of your product might depend on.
Power of Persuasion
Interactive design is not just trendy and good-looking, but also makes users to better conceive the information presented to them, according to a study conducted recently by researchers of the Penn State University.
“Participants who used a drag-and-slide bar to interact with a series of pictures representing the negative effects of smoking — what the researchers call modality interactivity — said the site was more exciting and cooler than the control website,” the study report says. “They were significantly less likely to hold positive attitudes about smoking, for example, that smoking is pleasurable or sexy, after using the site.”
The other path of persuasion revealed by the study was message interactivity, when participants interacted with messages through links and breadcrumbs, i.e. secondary navigation elements showing users which part of the website they’re in.
“Modality interactivity persuades people because they are having more fun browsing the website, which absorbs them, and creates more positive attitudes toward the message as well,” said Jeeyun Oh, assistant professor of communications, Robert Morris University, commenting the study results. “Message interactivity persuades people by making users think more deeply about the message.”
Beyond the Scroll
Creating interactive design is basically finding new ways to entertain the users and engage them, and this is a vital part of building any interface, from a mobile application to desktop-first website.
Although the main elements of interactive design are clearly described in so many places (see below for a short overview), there’s still a challenge involved, which is to make a right guess of what’s next.
Returning to what this post started with, it makes sense to look at the new types of devices to where the interaction design is heading. There are plenty of new interaction types that are novel today, from the crown of the Apple Watch to eye-tracking controls in Samsung smartphones. Our task here is to be on the lookout for changes and make ourselves ready for the new ways.
Homework
For those interested in learning more about interaction design, we’d recommend the free ebook on the best practices of this discipline released by UXPin.
As for additional reading, here’s a great list of 10 resources compiled by (also UXPin’s) Jerry Cao:
- Interaction Design Basics – Usability.gov outlines questions and considerations for interaction design that are a good springboard on the path to UI/UX design.
- “How Do You Design Interaction?” – A refreshing approach that teaches you how to design interactions as conversations.
- “Smart Transitions in User Experience Design” by Smashing Magazine – A look at a variety of simple and effective animations that help guide users through website designs.
- Interaction Design Best Practices: Mastering Words, Visual and Space – The basics of interaction design are rooted in basic design theory; this free 115-page guide teaches you how to master the tangible elements of IxD.
- Interaction Design Best Practices: Mastering Time, Responsiveness and Behavior – The free 106-page guide helps you master the trickier intangible elements of IxD.
- Origins of Famous Micro Interactions – Everything from the “You’ve got mail!” announcement to the Facebook like is a micro interaction. Learn more about how they came to be.
- Interaction Design Experiments – How do different interactions work? Take a look at a variety of options to help pick the best interaction patterns for your projects.
- “Making and Breaking UX Best Practices” by UX Booth – The rules for user experience design are changing constantly; this guide helps you understand the roots of common practices and tools.
- iOS Human Interface Guidelines – Apple’s guide outlines how developers and designers should create for the mobile web.
- 2015 IxD Awards – The winning projects and finalists create an inspiring set of best practices and examples of how to create different and interesting projects.
Image credit: Sybren Stüvel / Flickr