 So I'll just start off with a very good question, who doesn't like a good deal or a coupon, right? So when Groupon became official sometime last year in India, so I went to the site and you know, up came a pop-up saying, you know, why don't you sign up and you'll get personalized deals and like, well, let's do this. And I click on register, I come to this page, of course, this page has a lot more usability problems but not getting into that, I'm a new user, put me off a little bit saying payment address but I went ahead, signed up and I came to this page, I didn't see anything else because it, you know, the visual hierarchy highlighted something like now confirm email. So I went to my mailbox, this came, I'm like, wait, where do I click on to confirm? Maybe they already confirmed me and I'm already signed up for the newsletter. Cool, let me just manage my subscriptions. I'm here, I'm like, they said I've registered for Bangalore newsletter but they're asking me to select which cities, okay, I'll do that and I get this again, okay, what do I do? Where do I go? Where are my deals? And meanwhile, in the mobile world, I get this message saying that, you know, enter this number on Groupon.co.n to register your mobile phone. I'm like, let's do this. I'm still on my laptop, so I go to the browser groupon.co.n and I'm back here. I'm like totally lost now, what do I do? Now I take a little notice of this page and then I'm like, go to the bottom over here, it says if you have not received a confirmation mail, please request this, request it again. So I do and you're back to square zero, the same mail saying you're registered for Bangalore newsletter but where's my confirmation? I'm like, that's it, I'm done, one click unsubscribe, let's do this. It asks me why I'm unsubscribing, I click one of them because I'm really done with it and it says thank you, you're unsubscribed. Now back in the golden age of Groupon, we'll come back to this. Back in the golden age of Groupon, this is what they used to have. As soon as you click on unsubscribe from your mailbox, you're taken to a page that looks something like this which says, hey, we are sorry to see you go, how sorry? Well, we want you to introduce you to Derek, he's the guy who thought that you would enjoy receiving emails, do you want to punish him? You say, yeah, you know, get some satisfaction and up comes a manager asking him, dude, what the hell, what have you done? He wakes up by the way, I don't know, I thought they would like it, there you go. And it says that was pretty mean, I hope you're happy now, wanted to make it up with Derek, why don't you just come back and, you know, re-subscribe to the newsletter. Now, you know, that's delightful, even if I didn't want the newsletter, I see that maybe I would probably want to subscribe them back. But now compare this with what I had as an experience. Was I excited about signing on to Groupon? Was I really want to go back to them? Honestly, I was frustrated, I never went back. Same service, totally different experiences, different outcomes. Of course, there were like multiple things that went wrong with my own experience with Groupon, but a few things, just take the example of unsubscribe, right? Just, I clicked on one click unsubscribe, I've got, why are you unsubscribing? I had to pick something else, and then I'm done. But on the other case, you actually had a funny moment, you felt for Derek, and you wanted to re-subscribe, potentially probably, right? So I'm here today to talk to you guys about micro-interactions. Basically design is in the details, like a lot many people, great people have said that much before me. But yeah, my name is Praneet, I work with Bangda Table, I am a product manager, and I had the UX team over there, that's my Twitter handle, and these are the two biggest differences for my talk today. A book by Dan Schaffer, this was published mid last year, called Micro-Interactions, where he actually came up with a process on how do you design these micro-interactions. We'll talk about what they are, we'll see a few examples on how do you define a micro-interaction in a bit. And there's this blog called Little Big Details, where people like us when they go see all these nice nifty things, we send them suggestions and they put it up, and it's like a delightful thing for me to check every morning if they put up something new. And few examples from there, so this is from your Gmail, when you kind of like send an email saying attached is the document that you've asked for, and then you click on send without attaching, they'll say, hey, we saw that you said attached, did you forget to attach something, yeah, yeah, for no more embarrassing situations where you have to re-send a mail, I forgot to send the attachment, here it is. So it's a nice little thing that reminds you, you're probably trying to do something, but you didn't do, here you go. This is from Medium, you highlight a text, up comes a Twitter bubble and a Facebook thing, you click on Twitter, the highlighted text is already pre-filled, most of your work is already done, you just click on tweet and your tweet is gone, unless you want to edit that, but 90% of the time that's what you wanted to do, so it already did the hard work for you. This is an example from Sublime, if you open two files from different folders, with the same name, it all adds the folder name next to it, so you know where this file is coming from. Now, a micro-interaction is basically the atomic thing in your product or the service, the smallest particular thing, it's like a contained product movement, movement that revolves around a single use case, I say somebody talked about MVPs where you do one thing, one thing really well, and this is at an atomic level, how do you do that one thing really well, within your product or the service, or even within a feature, that small thing really well. Now, talking about features, micro-interactions are mostly not features, but there are cases where people have built an entire app just around a micro-interaction, until recently, until mid-last year, your weather apps almost did only one thing, told you the weather of the city. I've seen some apps recently, which also tells you what kind of clothes would be good for that particular day, depending on the weather and where to buy them, but new features adding up to a micro-interaction, good for them, but it's good to see how a feature and a micro-interaction differ. A feature is complex, essentially it has multiple single use cases within that, it's time consuming and it's cognitively engaging, so what that means is you have to, from the start of the feature till the end of the feature, you're like thinking, what do I do? Transactions, sending money to somebody else is a feature on a banking website, so we have to keep that attention to follow through that whole particular feature, but while you're entering an email ID if something else happened, it already tells you this is a taken email ID when you're signing up, that's like a micro-interaction, a very small thing at an atomic level during sign up. Micro-interactions are simple, brief, and they're almost nearly effortless. Now, where do you find these micro-interactions? At least as web developers and designers when we try to build them up, how do you look out for them? A few things that a micro-interaction can do is basically allow a user to accomplish a single task. This is an example from Discus. As you're typing in your email ID, it also prefills your name, taking it from the username, unless you have your email ID like call me ants or psychicboy at gmail.com, you know, it mostly works. And those two are actual examples of people from my team, but yeah. Do you remember the pre-NFC days when you have to connect through Bluetooth and transfer something from one phone to the other phone? You have to switch on Bluetooth, put up a password, give that password to the other guy. Hoping that other guy doesn't mess up the password, you're both connected, and chances are you mostly probably are going to transfer that file. But up came Bump and all the other services now. You do that and you're ready to transfer your files, connecting devices together. Or you're interacting with a single piece of data. Clock is an example of that. It always almost tells you the current time. So even without going into the clock, unless you want to set an alarm or do something else, your use case has already been fulfilled. Another example could be the weather app. Even that app shows you the current weather of the city that you're in. So you don't even have to open the app to know the temperature, current temperature. Adjusting a setting is also another micro interaction, especially in mobile phones. If you have to go to a different screen to do a setting, come back and see how that looks, and adjusting a brightness is one great example. These guys in iOS have solved it really brilliantly well. While you are adjusting the brightness, your wallpaper on the home screen actually shows you what level of brightness you're setting. So you don't have to come out. The information is already there with you. The next one, this is from Tweetbot. You know, viewing or creating a small piece of content, while you're retweeting or replying to a tweet, you can just swipe down. And your original tweet that you're retweeting or replying to, it shows up. So you know what you're doing, even if you've forgotten or you've got distracted while between replying to a tweet. Turning a feature or function off. So this usually happened to me always. And you know, I'm sitting in my couch. I'm starting to read. Slowly I'm like sleepy. I'm like lying back, lying back. And suddenly, oh, the screen rotation changed. And I'm like, get it back, get it back. How do I log the, you know, rotation and all? But InstaPaper was the first guys to do it. Most of all, most all reader apps now follow it up. You know, as soon as they detect there's a change in the orientation, they ask you, do you want to do the setting on and off? So you don't have to actually go to the setting and do it. It's in the context. You can actually do that right there. Now, why should we care about this micro interactions? I know a lot of designers and everyone, all of us now go after the big problems. We kind of want to solve the big problems like the poverty, the hunger and everything. And while we are building our applications and services to do that, there are the small atomic level interactions that happen in your product or the service. And we need to, and I'm hoping I could convince you to also think about them and make sure you're not losing the context of them while you're designing them. As designers and developers, you know, user stories, usage scenarios are part of a workflow. But what we miss out is emotions. The other side of how our users feel when they're using our service. According to a Nobel laureate, Daniel Kahneman, he says an average human being has about 20,000 moments in a day where they experience an emotion. Could be a positive, could be negative. And if I remember this correctly, this was done in 1986 before the Internet era. And if they've repeated this research now, I'm sure that number would have gone up with all the unusable sites and the mobile experiences that we have and the perceived mobile phones that we have and, you know, all the other interactions that we do. Now, how does, you know, having a bad experience on a mobile phone affect you? Let's say you were trying to do something. It didn't happen. You have that nagging feeling somewhere behind your head and probably not doesn't come out as strongly as it should. But here's a real world example. I was actually making this slide. It's when my mom calls me on Skype. She's like, I'm trying to pay my ATL bill. I can't do it. How do I do this? I'm like, mom, I told you, go to ATL.in. You know, there's pay broadband, click on it, and then you do, you enter your mobile phone number and then it takes you to a page. You enter the amount you want to pay, enter your car details. You're done. She's like, I've been trying this for two days. And for the last two hours, today I've decided I should pay it on my own. I don't want it to give it to you. I want, I should be able to do this. How do I do this? I'm like, okay, tell me where you are and how do you go about it. So apparently, not apparently, this is, I've kind of figured it out, but what she was trying to do, or what ATL is trying to force her to do, is on the home page, you say pay broadband, click on it. On the page that comes up where you enter your registered mobile number, the default tab selected is pay mobile bills. There she was. She was going down the spiral after that. She was trying to pay her mobile bill, which she doesn't even have. She doesn't even have an ATL mobile connection. So end of story for her. She figured, and after I told her this, she was like, oh, I missed out that step. I'm like, no, you didn't. Somebody fucked it up at ATL. Anyway, so design affects emotions, both negatively and positively. And maybe if we are able to take care of these small interactions, probably we'll all do good for the mankind. Now, back in 2007-ish, I had a manager who used to be feeling very proud on the day when he booked his flight tickets. He used to come and say, dude, clear-trip man. That's the site you go and book your tickets. No more Indigo.co or some other jet airways and all. It's such a brilliant experience. I feel good today. When was the last time you told somebody, yo, go to IRCTC? But on the day when you actually successfully do that, do you come out to be a happy person that day? You're like, oh, yeah, right? So these micro interactions and well-executed could make the difference between a product that your customers love or the product that they just tolerate and get things done. Another story, I went to the small newly constructed mall in Hyderabad, hot day, wanted to have an ice cream, go into an ice cream shop and I see this. Do you think I still felt like having that ice cream? Choke? Seriously? But, yeah, sorry. Now, the other thing is, you know, do you remember the days before Facebook in awkward? Would you imagine liking somebody saying something in your scrapbook? No, right? You just entered something and you shared that content and all of that. But Facebook came with one small micro interaction, saying that you see something, you like it, you just click on like. You don't have to say something in response to it. So sometimes these micro interactions become like a brand identifier. Tweety had it when Twitter got them in. They've, Twitter now has the patent for this. Swipe down to refresh, pull down to refresh. Thank God they've let everyone else also use it. Oh, I didn't know that. So, but how do we design this micro interactions? We've seen, you know, where they can be applied and all, but how do we as designers and developers how do we get into what's the process of doing this? A beautifully crafted micro interaction handles these four parts. There's always a trigger, something that initiates that micro interaction. There are a few rules that define how this micro interaction would work out. This feedback that you tell your users how this is coming across, you know, when Harish was telling us today, as soon as you say, you know, do me a rupees 10 recharge, it's telling you what's happening, giving that feedback that yes, you actually recharge for 10 rupees only, not 9.55 or 10.25 rupees. And then finally what happens on repeated usage of this micro interaction, you know, as it happens again and again and again, that's the loops. And sometimes you also have to have a mode within your micro interaction. Even at that single atomic level, a good example is your iPhones, if you're using it. You tap, anywhere you are, you go to the home screen, you tap twice, which is a mode of that interaction, which tells you to all the apps that are open. So these are the four steps. We'll go each one of them at a time. Trigger always starts a micro interaction. A good example is that, I don't know if you can see that there's always a, yeah, I don't want to get into a fight between Android did it first or iOS did it first. But on your lock screen, there's a camera over there, icon over there, you tap on it. It bounces a little bit, showing you there's that, oh, you can directly go to the camera app before actually, you know, unlocking your phone. And it starts that interaction, it does that bounce action, it encourages you to you to slide up instead of unlocking your phone. Always make sure your trigger does one thing and your users will always recognize that. And in cases where you can actually bring the data forward, bring it forward, like in case of the clock or the weather app, things like that. Now, do you guys know who David Pogos is? A tech reviewer and mostly publishes his articles in NYT. Here's what he had to write for Samsung Gear. You swipe down to open the camera, but only on the home screen. Swipe down to go back one screen if you're not on the home screen. Tap and hold with two fingers to see the list of recent tabs. Double tap with one finger to zoom in. Double tap with two fingers to adjust the brightness. Tap four times with six fingers in the rhythm of Beethoven's Five to call a mental health professional. Right? So, with so many tabs, how did they figure out how did they expect the users to remember how to use that small thing on their hand? Right? So, your trigger, it should be identified by your users. It does one thing, it does one thing always. Right? There are sometimes, especially in the case of mobile, if you're working on the mobile, your screen space is always finite. So, there are these invisible triggers. Now, I'm not saying if you like hide off that action call and put it under menu items, that's an invisible trigger. I'm not saying that. That's actually a bad case. If you have an important thing hidden under menus, that's not good. But, I've actually found this on Google Maps in a real situation. Right? I was standing in front of a junction which says, go straight. I can't go straight. There's a pawn shop or whatever. And then I'm like, I put away my phone and I'm trying to talk to somebody and I pull out my phone to see again. It says, oh, you shook your phone. Do you want to send feedback? That's a really nice, you know, they thought through about how they could hide this, but still reveal this invisible trigger and how to send feedback to Google when you shake your phone. So, and there are cases where your system has to initiate certain triggers. Here's an example where on Windows phones, you kind of type your message, you send and then you close, lock your phone and all. But maybe for some network issue, it doesn't go. Next time you unlock your phone and you see, you see that your icon, the smiley on the messaging turns sad. It couldn't send the message. It giving you a feedback. It's, you know, it's the trigger was started by the system. Google now is full of the system triggers. Waze is another example. If you're using the Waze app around evening when you'll, you know, get out of office. It tells you, are you going home? Here's the root information for you. It automatically triggered that interaction for you to tell you, you know, start showing me where do I go? How do I go? Now, almost essentially when you're trying to, when you're trying to build in the system triggers in your application, they always need rules. They can't just happen on their own without giving you enough information to the user. So that nicely segues into the next part, the rules. Rules are essentially there to limit the user actions. Maybe it's a critical process that you don't want your users to actually hamper it. You know, most of the sites say, do not close this window while we are processing your request. But maybe there's a better way to say it. But that's an example of a rule. And most often the bigger implication of a rule is to strive for a natural flow. Now, here's an example from MixCloud. If you're trying to follow a few people and that person has already followed you, it is telling you follow back. So without giving too much information, that's very apparent to me. This person is already following me. So let me add them. Sorry. Okay. Rules define. So basically, what does rules actually have? Rules are basically telling it's as a designer, you're deciding what should be the response to a trigger when a micro interaction is started. How do I, what control do I give to the user? What are the sequence of steps that are happening in the micro interaction? And you know, what is the timing for each of that? Do I do an animation with really fast one or a small one as different processes are handled in the back end while that interaction is happening? What is the date? Where is the data coming from? What data should I show the user while this interaction is happening? What feedback should I give? And when is the right time? So you're actually putting them all together. So almost like a flow chart diagram or an algorithm, if you want to say how this interaction will play out. And you know what happens when a repeated action on the same micro interaction is happening. At the end of the micro interaction, how do you tell your user? Here's a good example, right? So on Threadless, I think was the first site which was trying to do this on an item page on a e-commerce site. If the item is already in the cart, it tells you instead of saying add to the cart, add another to the cart. Or if the site already knows that you've bought this before, it again tells you, you know, add another to the cart. Now there are two cases that could happen. As a user, for whatever reason, I've forgotten that I've already bought this. So it is telling me, giving me that indication, hey, do you want another to the cart? Or, you know, it's giving you information. I'm actually wanting to be here to add one more. And it's giving me that information that there's already one in your cart, you're adding one more. And the other thing, even though you're, you know, you're designing this rules and how it will work out and all, to make sure your micro interaction doesn't give away an NSA feeling to your users, your rules should always come out. They should reveal themselves to the user on what they can do, what they cannot do. An example of this is MailChimp. The Chimp's arm pops off when you try to make an email too wide. It tells you this is the rule, but it's telling you in a nice cute little way. So how do you make sure that you bring these, you know, you reveal these rules to the user? That's where feedback comes in. Feedback, you know, conveys these rules to the user. And they're usually used after a manual trigger, you know, your user has started to do something. An example would be, you know, a very basic example, your buttons. Imagine your buttons didn't have states. What would that be like? You know, the hover state and the click state and the, or even the link already clicked link changes the color, right? What if that didn't happen? How would you, you know, now we take this as a common practice, but you know, after a manual trigger, you always need to give them feedback that yes, you've taken this action while we are doing the back processes, don't do this again, we'll get back to you. And usually in case of system triggers, if there's a change in the state or the process, you want to tell your user that, you know, something's happening with progress from step one to two years where we are, I know somebody yesterday was talking about the progress bar. And that's one example. The other one is, you know, some kind of a user error or a system error has happened, you want to tell your user that, you know, there's something that happened, give them the feedback on that, and then showing progress on any critical processes. Now feedback can be visual, it could be an animation, it could be just a simple text message, it could be audio, haptic, but a general principle or thumb rule is if you have a user initiated trigger, a manual trigger, which means that the user, if they're on a mobile phone, they're already concentrating on it, you don't have to say, thank you for clicking the button. You could just change the state or the button to give them that visual feedback that something has happened. Maybe like change the state from a red to a green when something has not happened, right? And you can always add sound and haptics to emphasize the alerts itself. So that poof sound when you delete something from your desktop on Mac gives you that sound effect, along with the visual animation that it does, right? It's just for their emphasis. What happens when feedback goes wrong? So this is a quote from Cat Arena. She recently bought a Ford car with the in sync entertainment system and along came with a USB drive for her installations and a note on how to install. And this reads something like this, follow your printed out instructions exactly while your vehicle is running. Approximately 60 seconds after you begin the installation, you'll hear an installation complete message. Do not remove your USB drive or turn off your vehicle. You must wait another additional four to 18 minutes until you hear a second installation complete. Now that almost feels so what was the first installation complete all about? And if you actually read this, it feels like oh, you're going to do something really bad to your car. You know, you probably spend like 10 to 20 K on that car and something's bad is really going to happen to it. Or what would have happened if she didn't read this message? How would that make the user feel? So it's almost important on how you're giving your feedback to the user, what words you're using and what are the indications? Maybe the first time shouldn't be installation complete. It should just be like step one completed. Wait for that the three other another three more steps to happen and waiting time could be 18 minutes or whatever. But yeah, this could have been better. Now finally, the loops and the modes. So first I'll talk about the mode. A mode is a state in a micro interaction. It's a infrequent action. Usually if it's at an atomic level, you're talking about interaction that are so small, imagine having a mode in it. So but sometimes you cannot avoid them usually setting screens. Like in case of weather app, it does only one thing tells you the weather. But you can go to a setting screen, add one more city to follow more weather updates from more cities. So but general rule do not have modes in your micro interactions. A loop is something that what happens to the same action, same micro interaction when you're using it again and again. Flash screens on mobile apps is one example. So the very first time if you have somebody like me, I download like five to six apps every week just to see what's happening out there, what are the new interactions they're doing and all and almost always there's always this one app which has redefined how you take a picture or which has redefined how you post a message. Because they've come up with a new interaction but because they want to tell the user all of this, they come up with 16 sliders before you actually go to the app. And most often I don't have the patience. I'm like okay next, next, next come on, go to the app. Actually I want to see what the app does. And by the time I land there, I don't know what to do. You know, Instagram tells me that you know, if you want to take a picture, you click on the middle button, the camera would come but here there are no buttons. How do I do this? Example of this was of app called Spark designed by IDO guys. But yeah, they had like seven or eight flash screens by the time I've reached them, I've forgotten how to use the app. I'm on the screen through the viewfinder. I don't know how to click a picture. Actually I can't click a picture. It's a video app apparently. So, right? So those kind of situations how do you you know, tell them slowly reveal all these new interactions that you have in your app or a feature. Maybe for the very first time you still have those messages pop up, slide here to start this or click here to do something. And don't always ask them to tap on it to say okay, got it like how Gmail does it. That was nice and cute for the first time but every time they come up with a new feature I have to say yes, I get it. But yeah, if you can be a little more intelligent you can actually progressively disclose or actually progressively reduce the amount of information that you're giving during that interaction. And that's how you decide what happens. You're almost giving like a memory to interaction and how you decide what happens and as the as your users get used to your interaction how that plays out. Now, bringing it together now there are cases where you don't want to have any loop. You know, it's a critical thing every time there's no disclosure or reduction as they use it it always happens the same way. Or maybe times when you want to actually have a loop and define rules around what happens after the fifth time they've done the same interaction. A case study from our example just a little context our users for a platform are usually non-technical. These are government employees either from sociology or marketing or communications background and they use our product to actually set up websites to engage their communities in the local area. And while and they have to set up a project using the product or a consultation as they say and when they're adding details in the draft mode we've recently almost a month back I've got six requests saying oh we've been trying to do something but I accidentally deleted my draft project all my information that I saved is lost. Can you get it back to me? We didn't have soft delete at that point in time so there was no way to get back their information. But we're like actually but how is that possible? How did you accidentally delete a project? And some of these you know help desk mails read I was deleting image when I deleted the project or I was deleting video when this got deleted and all. We're like really how's that even possible? It's not supposed to happen like that. So we actually call them back. This is one customer. So basically there's something like they upload a banner image for the website and we didn't have a delete over there because of some other rules because if you don't upload a project banner the site banner takes over and all of that. So you can only change it and she wanted to delete it or she probably wanted to change it but first wants to delete it. So she couldn't find delete anywhere. She went right there at the top and clicked over there and it said do you want to delete this project? She didn't read it. She said yes. Okay, go ahead. So we got back and said you know those things are very they're not emphasized enough to say what action they're doing. We need to redesign a trigger itself. They're not looking like buttons that do major shit. So let's get make them at least look like buttons so that and give them that emphasis that you know you're deleting something important. The next thing we started thinking what are the rules that we should be applying? Now how easy should the delete action be? What feedback are we giving to the user about this action? And can the user undo this thing after they have deleted it potentially again by accidental deleting a photo? So we said admin always clicks on delete. We'll emphasize the action in the feedback that they're getting and in the back end let's also enable soft delete. So if we do get a help desk request even after all this we could easily get back their information. And this is a screen that we've designed for the feedback. We've taken inspiration from GitHub saying that you know when you want to delete a project and this is this action cannot be undone please enter your password to continue. So at least they sit back actually read what's happening. They can't just go and click on delete project like how she has done before. So finally I'm almost towards the end but you know we've in the last couple of days we've always heard about validating the ideas doing your user research you know validating your ideas and the designs and the sites or the services with the actual end users. So how do you test a micro interaction when you've got one and so as the standard goes if you want to you can just pull up five potential users from your target segment get them to test the micro interaction that you've designed in whatever stage you are right. If you're in the early if you've gone through a stage where you have a clickable prototype you could validate these hypothesis is the goal of the micro interaction understood by the users. Do you understand what data is important for your users? So maybe you've thought you know I'll pull up some information and show it there but maybe it's not relevant for them. So you kind of like validate that hypothesis. Any text that you're trying to communicate is that clear to your user so you're getting feedback on that and if it's already a clickable prototype you could also test your timing and the flow is that smooth enough for them to you know accept what's happening over there. And as a great man said what can't be measured can't be improved. So and Raj Gopal had a great talk yesterday in terms of how do you gather data on your designs and websites. So for in case of a micro interaction these are the few metrics that you can capture you could capture the completion rate the overall duration and of specific steps that users have taken during that micro interaction the number of steps that they've taken to complete it number of clicks steps and selects number of system errors number of human errors this could be some of the metrics that you could see and you know I treat your designs as you go forward. So if you have any questions now and if I'm not able to answer all the scroll back is channel is open you could always ask me there and that's my Twitter handle and obviously I have more examples but if you want to talk to me I'm here hanging out all day.