An introduction to microinteractions

Key Takeaways

you may have never heard of microinteractions before and you might be wondering what they are but I guarantee you you've seen them and have you might've even already created one or two along the way in this video we're gonna be exploring not only what they are but also why it's important to think about things like this when you're building out either your webpage web app or app whatever it happens to be hi there my name is Kevin in here at my channel we learn how to make the web and how to make it look good with weekly tips tricks and tutorials and you might notice things are looking a little bit different I'm in the middle of renovating moving things around and it's gonna change a little bit over the next few videos but exciting things going forward as far as what microinteractions are they're often as we're gonna see with some examples in this video but they're often really simple animations that often actually almost go unnoticed but they can really help with the overall user experience will fan gaion envisions blog inside design put it really nicely when you said micro interactions or small moments where the user and design interact when they're well-designed micro interactions enhance the users experience with the design when they're poorly designed they damage the experience for some concrete examples think of like Twitter's heart icon and you click it that cool little animation that can happen or if you're on a mobile phone you know you're on the browser and you want to refresh the page and that pulldown action that you can do that refreshes the page and you get that little pull down thing that goes the spinning wheel or even when your phone's vibrating or dinging or something like that when you get a DM a really big part of them is adding in these small details micro details you might say that can help delight the user they just make them smile a little bit but they should also be helping the users overall experience with what they're working on now these can delight the user in a really cool and fun way you can make them smile if they notice it but most importantly it should be there to help inform them about what's happening with their experience on the site or app or whatever it is really their goal should be passing information and giving feedback to the user some of the more obvious things like this is when there's state changes so this could be anything from like opening a menu liking a post writing messages anything like that where there's literally a change going on in the state the active time where you're writing and there's those little bubbles show up that let the other person know that you're actually writing the feedback that you get from these is really really important with the overall experience even though most of the time you're not even really noticing it but imagine if you click like on a post and there was nothing that happened no little thing that filled in no color no anything it just you just had to guess that it worked I'm sure this is actually having you on like a forum where you fill out the whole form you click send and for a second or two while the page is loading to the next state it doesn't actually let you know if what you did was right you're sort of like Oh what what's happening and then all of a sudden it clicks over and it leaves you in limbo for a second it's almost an uncomfortable feeling like do I have to click it again what's going on and then all of a sudden you realize that no it's okay but you know a good well-designed form when you click that you get a little spinning icon or a loading form or something to let you know that it's in progress and you you did something it's received that and it's processing before you get to the next step it really helps the user experience even though it's something that really you don't notice until it's missing now a lot of these are from user interaction so that means the user did something and the system is giving us feedback on that but that's not always the case there are other - the system can actually initiate them as well but this is things like when you get dings on your phone or your phone vibrates or something like that to let you know that there is a change in state you might have you know you went from having no messages to a new message so there's a little ding or vibration to let you know about it so those are also micro interactions there but in this case they're initiated by the system and not by the user interacting with the page then a lot of the examples of them finding on this are all animations and a lot of them are really cool and really fun but sound can be a part of it too on my phone when I bring up Google assistant you get a little ding sound to let you know that it's active and that is actually listening to you now there's two ways you can actually get the assistant to listen to you there's a little button I can push and there's also just saying hey Google now you can see my phone didn't pick that up or you would have heard the ding but it's especially important when I'm talking to the phone and saying hey Google still didn't oh there we go I think I heard at that time so it's important at that because I don't even see my phone but I know it's listening to me now and I'd really like to know why the hey Google thing works like thirty to forty percent of the time but I can mean the middle of a conversation with someone they're far away from me and saying random stuff phones in my jean pocket and it's still all of a sudden like blue and I know it's listening so it's good to have that though because all of a sudden I can turn it off before it starts answering like on some random search that it might have done and even there's a lot of micro interactions that go in with the Google assistant because this is the little ding sound or sound that it does when it starts listening but then there's actually these four little balls that sort of just float there and that lets you know that it's actively listening it's waiting for you it's sitting there it's idling and as soon as you start talking they actually turn into waveforms and they start bouncing around and that's super useful the reason that's really really useful is sometimes when I talk to it it doesn't hear me for some reason it just stays there in the idling State nothing's happening so that bouncing thing it's a really useful feedback Syria as the same thing it has those sound waves that are on the bottom when you talk you see them sort of go kind of crazy and things like that are really good micro interactions because they're letting the user know especially when it's speech you know is it hearing me you don't have to second-guess right away while you're talking you know that the what you're saying is actively being heard by your phone and this is really similar to like when you are heart a post on Twitter when you click that it's not just like this little like oh it was a hollow heart that's now red it actually gives you like this cool popping animation with who in these little things fly off of it and it's a nice little animation it's really really cool and you retweet I'm pretty sure it's not just like a simple filling in it does something and this is gonna be really useful because those are on a touch device so a little bit like when I'm talking to something it's nice seeing the feedback there this is when I touch it I see the feedback imagine if you're scrolling and you accidentally liked something then you see the post and you're not sure if you liked it just now by accident or if it was something that was already liked before you're going through your feed you're into old posts it's nice to know that you you see the animation happens so it's really really giving you direct feedback that you just clicked there if it was by accident you know you can on like it or whatever it is but these Facebook does the same thing with all their different things you should just be likes but now they have all the different reactions but there's this feedback that they give you every time you do it so now that you know what they are you probably go why I've done he's previously and I just didn't realize it and it's really common that I did the same thing when I started reading about these I'm like oh yeah and one just a quick example of something that I did with them if you want to take a bigger look at it was the to do a pie made with Kyle from webdev simplified if you didn't know about that project I created all of the front-end I designed it and then made it look the way it looked and then he added the functionality with JavaScript so we had two videos on that one each on our respective channels and I made a lot of conscious choices with that when it came to how the to-do app was working when someone hovers on top of the the circle that checks something off the circle changes it lets you know okay this is you can click on this so it's you know it's the same as a hover State on a link that technically is a micro interaction you're letting the user know that that is something they can interact with and it's confirming that because they should already know it's a link and now you're confirming to them that that's something they can click on so I'm confirming to them that they can click and then when the user clicked in this case or on that to-do app we did it wouldn't just fill that in and it wouldn't gray it out we well we wonder cross it off but instead of just okay I could just put stripe through and then all of a sudden the text would be strike down and that would be fine but I wanted the line to sort of slide through it so it's sort of your crossing it off the same as if I had a piece of paper in front of me and I was crossing things off a list to me this was really important and it's the type of experience Caesar gets it's a lot more satisfying seeing that thing get crossed off then just like oh it's right out now it's still done it's still you know you get a little dopamine or whatever it is for getting through your to-do list but just that crossing off thing it just really does make it feel like yeah you know in it's such a small little thing though just like the little Twitter heart pop and all these other little things but they can really help with the overall user experience because it's just this little touch they're not really noticing it but it's this nice extra level of detail that's there that's confirming and it's really showing them exactly what's happening and it's giving them that feedback that yes you've crossed that off your list and you have to realize that a lot of people aren't focusing on these and they're really not noticing them a lot of people might not even really notice there was an animation there well they would because they were following along with the code here but a lot of users of something like that might not notice that oh look at that it's being crossed off but it's just more of a subtle thing same there's a lot of menus and you open them and then you open the menu and the things sort of fade in and then you close the menu and they fade out or it could even just be when you open a menu and it slides out instead of just like oh here's you know imagine you you click a link and all of a sudden or click a link click the the hamburger menu and just poop there's your whole navigation it'd be a little bit jarring that's why you usually see them slide out or like in the video that um in the middle of working on we'll talk about more in a second but where it just sort of grows out and then grows back in it's also like smooth scrolling you know if you click something like a navigation link and it Scrolls down to where you are it can help the user know where they are on the page you know that you're didn't actually go to a second page you're still on the same page and you know where you are on that page do you go a little bit down did you go really far down when you don't have smooth scrolling and you click it and just appears lower down a lot of the time it feels like has another page loaded loaded really fast but it just feels like you went somewhere else and then you know all of a sudden you scroll up and you go oh I'm where I just was and then you figure it out but it just really helps the user experience when it Scrolls down because it feels a lot more natural it feels like you're just scrolling like you normally would but it's really important because it's helping the user know where they are and locate themselves which is super important when they're on your page you don't want to get them confused or anything like that it's the biggest thing you want to avoid now as we'll find I said bad ones can actually hurt the user experience if they're counter to what the person expects that can be a big problem and it can actually feel unnatural and then that's doing the opposite of what you wanted it to do so in this video we just explored what they are to give you an idea I wanted to talk a lot about them so in the next video what we're gonna do next week is take a look at adding we did the navigation that groped and grew in and I already like that but I want to add some extra touches to that I want to increase the user experience at that and while we're doing that we're going to explore a lot of tweaks that we can do in the little things just with the length of animations or animation delays and the difference that different types of animation curves though you know the cubic Bezier versus linear versus easing out the difference that can make in the user experience and just how these little tweaks sometimes can actually make a really big difference in how everything feels or the direction are moving sometimes it makes a really big difference and how the whole thing feels so you can look forward to that one next week if you're watching this when it came out or if you're in the future you can go ahead and watch that probably right now before we go though I just want to say a really big thank you to all of you as mentioned it in a previous video that we've passed a hundred thousand subscribers which is absolutely amazing thank you very much you haven't yet subscribed you don't want to miss out on that next video please consider subscribing yeah I'm so excited to have past that and I really look forward to being able to grow this channel and so you as I said the setup here it's gonna be evolving a little bit in the next month or so hopefully everything sort of gets settled down and trying to figure out exactly where I'm gonna put my camera the whole area where I film into my basement has been completely rearranged I'm gonna be working the backgrounds crap right now and you might notice that I'm wearing a t-shirt that was partially cropped out but I have also got some swag going on and so if you do want to get that there should be appearing underneath the video right now you should see them there the options there there it's in a whole bunch of colors it's not something so much for me to make money off of because it's with teespring and first of all I apologize for anyone who's not in the States who wants to get one I realized the shipping can be really prohibitive because even to get my own that I just I made took a while to get here and I you know it cost a handful for the shipping on the two shirts that I got but I got them I'm happy with them and if you do want to get one you can check it out the link there it should be right under the video there'll be links in the description if not so you can check those out if it's something that interests you I think it looks pretty cool I'm really happy with it again I'm not I lowered the price down I don't want to be here to make money off of this you know I do it will help support my channel but just a little bit it's you know you'll buy me a coffee type of thing and but I'd appreciate it but also just you know if you think it looks nice and you want to wear something like that let people know you are a web dev that likes making the internet just a little bit more awesome every day then this t-shirt is for you thank you to all the patrons for all the support they give me every single month and one last time and thank you for watching and of course until next time don't forget to make your corn in the Internet just a little bit more awesome