How do you help users without helping them? Teasing Interaction is one way many apps and sites are using.
In this week’s UX Power Up, Frank goes into one of his essential techniques, fast becoming a foundational approach to introducing users to features in a subtle way. Please post your comments below, we would love to hear your thoughts.
Transcript of video above…
Frank Spillers here, founder of Experience Dynamics and it’s time for this week’s UX Power Up.
Teasing Interaction
So, today I’d like to talk to you about how you Tease Interactions on a website or on mobile, really any design. I’ve talked a little bit in previous UX Power Ups about discoverability, or how you actually get users to find features and functionality or menus or whatever the case may be. With teasing interactions, one of the things that is important about that is helping the user actually get to know what’s on the screen. The reason why it’s important is because a lot of users just don’t find stuff. On mobile, for example, a user might not know that there is something down the page or on the next swipe to the left or right. So how do you kind of tease them into the interaction? I’m going to show you a few tips on that.
Three Ways of Teasing Interaction
One of the first ones is simply by just using hand-drawn arrows. Lets say I have a design and I have something over here – I know my user is going down a form or down some fields over here – I might use a hand drawn arrow to say “Hey, look over here…” or I might say “Click here” or “Start here” so you’ll see them a lot on sites. It might be actually built into the page or it might be a java script event like Spotify does where they actually have an arrow kind of it’s like a little java script event that says “Hey, check this out over here.. here’s a new thing you should look at.”
I’ve talked in the past about using push dialogs and thats a little java script dialog like Spotify uses and that’s actually a nice way to tease the interaction.
The other way, for example, would be to cause some type of animation. Or to have some type of event happening on that level. Take for example, in a mobile site, if I’ve got a mobile design and I want someone to swipe to the right, but they might not know that that’s native because not everybody is familiar with all the types of gestures you can do on mobile. I might do a little teaser, or a little animation or something that might appear for a little bit, or it might vibrate or move around a little bit, and anything that causes motion is going to catch those areas of the eye-brain that think “Oh, there is something over here..” so use of color is a really obvious one – you can use color, but sometimes color fades into a screen, whether you are using red or another type of color – depending on your color scheme. Sometimes you have to just give the user a little bit more of a push to get that tease to get them going into the interaction.
If there is one thing that you take away, one tip from teasing interactions – I’ll tell you what it is, and it’s providing the right default in your control or on the page. So when the user lands on the page you’ve actually got maybe it’s a sample tip, for example. In the Kindle Fire they used a bookshelf metaphor for the book store, Amazon is obviously selling books, but when you went to that bookshelf there was nothing there. The way to get to the store was a little button in the top right corner but no indication to know. So you actually landed on the page, you’re all excited you want to look at a book and there’s nothing to do – “What do I do?” So having, for example, a default, a sample book or a button that says “Hey, let’s get started..” that gets the user – it teases the user into the task, and kind of starts the task rolling. That’s what we’re talking about when we talk about teasing interactions. Choose your defaults wisely, they are the ultimate teaser, the default. And from there, you can use other tricks like we talked about here today, whether it’s an animation, a little arrow, things like that. So until next time, happy UX’ing, we’ll see you again.
