Using Interaction Techniques in UX to Influence The Design Of Your Project

There is a tendency to call computers “tools”, which creates a bit of a false equivalency between computers and more traditional tools like needles, hammers, and screwdrivers. The difference is, of course, the interface. A hammer’s “UI”, such as it is, is not terribly complex. There is one way to take it in your hand, and one way to apply your hammer-holding hand to a nail. There is a reason why there are no “hammer literacy classes”. With a computer (and I include things like tablets and smartphones here), the sheer variety of new input methods is staggering. There is the traditional clicking, but also tapping, dragging, zooming, flipping, hovering, typing — almost every hand movement is already used as an input method somewhere. Today, I say we should take a bit of a closer look at various input methods. They are created equal, and knowing when to use each is the epitome of the “devil in the details” frame of mind that every UI designer should have. not Interaction Techniques 101 When I say “interaction technique”, I’m using which boils down to a certain way in which you’re creating & using input/output to complete a certain goal. Robert J.K. Jacob’s definition It’s necessarily abstract, but let’s use a simple example: you’re reading this article (hello there!), and you want to see the rest of the text. To accomplish this low-level job, you employ “scrolling” — you move the mouse wheel, and the text moves as if it were a real-life scroll. As with anything in design, this can only work thanks to constant and intense feedback. But even that feedback is influenced by the interaction technique: when we “flip” an e-book page, the feedback animation is nice and expected. If we’re doing the flip motion, and the page simply switches, that’s a bit staggering, if not annoying. 3 Concepts Needed to Evaluate Interaction Techniques Every interaction technique can be evaluated across three axes. — as described in Don Norman’s “The Design of Everyday Things”. In the simplest terms, natural mapping simply means a relationship between the buttons you need to press, the movement needed to press them, and what you’re getting in the real world. We’ll say that a certain UI has a good or high natural mapping, if the UI is predictable by the user, gives constant feedback, and, crucially, matches the user’s “real-world knowledge”. Going back to the e-book example. The “flip” technique works, while “switch” doesn’t, because, in the real world, we flip through pages. In the same way, we move the map by dragging it, not tapping on it. Natural mapping — I think we’re all familiar with this principle of user experience. For our sake, user engagement evaluation means that the user feels empowered to be using the interaction techniques we’re offering. That user absorption, so to speak, is high, when they’re using our product, should be a priority for any UI designer anyway. When you’re thinking about using tap/switch/zoom or whatever else, be aware that “clicking” to zoom a picture is profoundly less engaging than expanding your fingers. User Engagement — this one is a bit arguable, but I feel that it’s still super important. Interaction techniques are pathways to completed tasks and satisfied users. This means that a big way to evaluate if we’re doing a good job choosing those techniques is how fast can a user “recall” that you need to drag here or click there. Okay, all clear: a great interaction technique for its context will score high on natural mapping, engage the users, and be easy to remember. These are interconnected, of course, but they need to be taken into account nevertheless. Ease of Remembering Different Interaction Techniques & User Perception Up till now, we’ve only discussed how we designers should look at interaction techniques. Now let’s focus on our users for a bit and go over things you must consider when designing how the user will interact with your product. I’m basing this on an published in the Human-Computer Interaction journal — definitely check it out for 45 pages of real scientific due diligence. excellent study Using appropriate interaction techniques & range of motion If you’re going to think about interaction techniques (and I hope you are), you need to distinguish between “information-based” and “navigation-based” techniques. First, whenever a user arrives at a screen, they will gravitate naturally towards “navigation”, and see what they can scroll or slide. Then comes clicking, tapping, and so on. As you’re directing your user across your screen, you need to be aware of how much motion you’re affording them with each technique, and what feedback you’ll provide when they start navigating. It’s the most basic form of advice, I know: use appropriate methods to achieve appropriate results. But as I slide the pages of my e-book reader to see them switch in 0.1 seconds with no page animation, I know this is an important thing to point out. Remember also that any interaction technique can be more or less prone to user mistakes. As you’re dragging an icon, so many things can go wrong: you drop it where you didn’t intend, or your finger slips for a second and you have to do it all over again. The more range of motion you’re affording users, the more room for mistakes they have, and the less exact the experience becomes. Using complementary techniques I’m assuming we all know enough color theory to know what complementary colors are (and if not, here’s a ). In case you forgot, complementary colors are those where cool & warm colors enter a sort of relationship with active interplay. This gives your product a more diverse, altogether complex color scheme. random introduction This is the same thing here. “Dragging” a map around goes well with “tapping” or “clicking” on it. Worse with “sliding”, and even worse with “tilting”. When you’re working to implement various interaction techniques at once, you need to be very conscious of what your user will be used to. For example, we don’t really combine “dragging” with other interaction techniques for most apps/websites. And though a UI designer might love to experiment and give it a whirl, they need to be conscious that the risks are enormous. It’s not simply a matter of making comprehension more difficult, and the learning curve steeper. In the study mentioned above, researchers found that an “unhappy” combination of techniques (Drag+Zoom, in this case) not only scored lower as a design choice. This combination of interaction techniques led to the entire website scoring lower on credibility, and even recall capabilities. The implications of this are pretty stark: an unfortunate interaction techniques combo can lead to your entire product being dismissed while the users that come back will have to relearn it from scratch every time. User control & power I guess we’re all power users of some app or another. For us UI designers, it could be Figma or Sketch, for a content manager Excel, etc. When we’re designing different interaction techniques, what we need to keep in mind is people learn. I know we often hear that we need to design for the lowest common denominator. That said, power usage emerge from any more or less stable product. Patterns will be used and reused. New ways to achieve certain tasks will be discovered. And, more than anything, these power users will crave control and options. This all has to do with that obscure object of our desire — . will retention We want to have a space for power users because once they’re in, they’ll stay with you for a long time. So while you’re assigning different interaction techniques to various product outcomes, you should keep that segment of your public in mind. The easiest example is a weather forecast: for 99% of us, knowing that it’s rainy and over twenty degrees is enough. This, in turn, dictates the interaction techniques we’re using. If there is info about cyclones/anticyclones, I really don’t want to tap through it on my way to my weather forecast. Let’s say that we knew this and decided to put our “extensive” information under a whole separate interaction technique — a swipe-up. This accomplishes a couple of things at once. , it compartmentalizes the information that the average user doesn’t really need. Now all that’s left is a clean, clear, and concise weather forecast. , it lowers the chance of “accidentally” opening an information module the user didn’t intend to open. , it provides satisfaction to “power users”. It may sound silly, but I’m completely certain that there are in fact pro weather forecast users. They need to know things like atmospheric pressure, air quality. They need . First Second Third graphs And by god, we’ll provide them the graphs, while also feeding them the feeling of “mastering” the product. The best way to do that is to consider a “power user” interaction technique, a thing reserved for people who want to get more out of their task. Conclusions Since we’re getting more and more interaction techniques with each year, there needs to be a comprehensive understanding of how certain techniques are perceived. We know for a fact that different types of interactions influence everything up to and including a subjective assessment of the entire product in question. However, can we say why? Is it because some techniques are familiar to us from the real world, while others aren’t? This, unfortunately, I don’t know. What we can say for sure is this: Consider the range of movement afforded by interaction techniques Make interaction techniques consistent with the real world, where applicable When combining, remember that people will try to navigate first If you want them to come back, add a technique for pro users Modern interfaces require a lot of practice to get right, don’t leave your users a lot of room for error.