Meaningful Animations: Making UX Exceptional – Zach Saucier / Front-Trends 2015, Warsaw, Poland

Meaningful Animations: Making UX Exceptional – Zach Saucier / Front-Trends 2015, Warsaw, Poland



thank you guys before I get started I just wanted to mention that I added this green line under the link here after Shawn's presentation yesterday so I encourage you guys everything that you're hearing here I encourage you to go straight home and apply the things that you're learning so I am Zach saucier I am a student at the University of Georgia in the United States and I work as a front-end developer in my free time and during my summers creating things like this and my talk today is something that's more focused on design and user user experience than it is development but as front-end developers design is an important aspect of what we do because we're the one we're the ones implementing it and we do have the ability to provide feedback and we want to make sure that the experience that our users have is really the best that they possibly can have and so for something to have meaning it really needs to have a purpose behind it and it needs to fulfill that purpose well so we need to keep that in mind no matter what it is we're developing or designing and so each each website or application that we have that we create has one of one of a certain amount of purposes behind it and so even if you don't know that it has a purpose it does have a purpose behind it I hope you do I you definitely should but at times it's a little bit unclear and I encourage all of you guys to know that purpose even if it's just some little module that you're creating or something to that exit you need to know the purpose behind it but for as for the web in general we have a few main purposes the first is relationships so this could be anything from Facebook to Twitter to any to LinkedIn it's connecting people together whether it's a new connection or one that you already have where you're strengthening that relationship or you're keeping that relationship with somebody across the world second is information this is the primary purpose of the web since it was created it's a collection of documents and the web is information shared with other people it's the primary purpose a third is transactions so this is like eBay or any to that extent you also have entertainment which could be in the form of gaming or really anything that it just keeps us entertained whether Netflix or whatever so what like I said everything has a purpose behind it this is what we want the web to be we want it to be collection of ideas that arc that connect people and that connect people to ideas so that the world can be a more open place and more accepting place and more something that helps us live our lives better but the problem with this is that we cannot connect these ideas directly to people we can't use telepathy or anything like that directly with them because we're working with a collection of documents that are put together and so the the medium of the Internet is not or even just devices in general is not optimal for what we want to be doing because if we want to be connecting directly with people and so we want to do everything that we can to try and get towards that direct communication with people and animate using animations well is a great way to do this in addition to having being accessible to everybody and doing everything that we should be like the other talkers other speakers have talked about so far so like I said there are many different ways that we as humans can understand information the first is visual this is the primary this is primarily used this is the primary mode of understanding for technology technological devices like phones or computers or anything like that because we're looking at things we're looking at this the characters the words we're putting that together and understanding it in that way but that's not the only way that we can understand things we can also understand things through the movement of them the movement of us interacting with them the spatial awareness so that's a 3d environment it helps us understand it better tactile which is just the feeling the the textures anything like that and then aural which is the audio portion of it and so I got these points from Rhett Victor's talk on the subject it's a great talk and I recommend all of you guys to watch it but the medium that we're working with is kind of broken in that we cannot address all of these modes of understanding in a perfect way like we're not making the best use of it but we can make use of it in better way than we currently are because the web is the best way to communicate with people currently across the world and with everybody but we don't do it as well as we could and so today I'm gonna be talking about how to do that with animations a way to go is a project that uses a lot of these modes of understanding well and I encourage you to look at that in the link okay so imagine that you have never heard of electricity before that electricity is this foam form concept we've never seen lightning you never have had any electricity at all how could I convey to you what electricity is I could show you this picture show you that there these this this what looks like light coming from one thing and going to another thing but that doesn't really describe what electricity is or what it does and so some other ways I could describe electricity to you are to show you a video of electricity which would show how fast it's moving and it's actually not these those aren't cords or anything there's actually light that's moving really really quickly that'll help you understand it better and if I actually have you in a if I put you in a room with these two things connecting you can tell how big it is by looking at the surrounding environment and tell that it's actually these nodes are probably really really close together and the electricity is probably just a fraction of what it looks like in this picture but that helps you understand better about what electricity is and how it works and in addition you could hear you could hear that crackling that the electricity makes when it connects from node to node and the kiss I forget the other point but essentially the point here is that the that you can understand a topic better a lot more when you're using these additional modes of understanding so we want to be doing that wherever we can but the web is great because there are things unique to it that we can't make use of in other mediums and so along with that is media with like the video element that we've been talking about or anything to that extent there's we can also serve dynamic content based on the user's profiles that we have based on their location based on previous history and serve that live to them which is awesome you can't do that with a book or anything like that another characteristic is fitting it to the screen so you can view the same thing on your phone as you can with your laptop or even your big TV here it's exactly the same content served on different platforms and the same thing for different browsers different countries you can be using something completely different than somebody else and still be viewing the same content we want to make that look as good as we can and the last thing that I'll be focusing on today is that that it's animates and it animatable that we can move things around in a way to help enforce help create these other modes of understanding in a way that make use of it not like it's not a physical thing but we can kind of fake it using animation and so the modern web is very very capable the second example is using WebGL to render a bunch of hearts with like live shadowing and lighting and things like that and the top example is one where there's it's a it's a web page where a song is playing and as a user we can click the buttons or you can use your keyboard to interact with music add notes to it and the animations help convey the understanding of what's going on help and build the entire experience and make it more enjoyable so the modern web like we've been talking about through this whole in conference is just getting better and better and we're not really restricted to what it can do anymore we're restricted by the thought behind it and by the our ideas more than we are the medium itself and so with that design is becoming more and more important so the design is the purpose that we're intention that exists or is thought to exist behind an action fact or material object and so essentially what design really is is design as being intentional with whatever you're doing it's knowing that purpose behind behind each aspect and making sure that that aspect fulfills its purpose all the time and so this makes style more than just more than just something you add on it's it is substance it does make processes easier it builds trust with users it gets conversions and it retains those customers because of the enhanced in spirits because of that extra understanding that that design provides and so now I'm gonna be talking about some reasons for animations there are three main categories of reasons per se first is to convey meaning through animation the second is to redirect users focus the third is for general enjoyment so this example here is just a very very simple animation next to the navigation which shows which section is currently being viewed and so that helps users both create a mental model of the website that helps the user flow understand what's coming next and is just generally enjoyable animation to look at it's something that gives the user focused on the content but still entertained in a nice little lovely way another way is to show contrast so this the the example on the left is a logo that I worked on the actual logo is this expanded state that you see but the animation helps convey the thought of breaking out of the box much more than a static image would and that's not something that you like like I said the the animation is what actually provides that additional meaning at additional understanding I'm gonna write it it's a very kind of a newer concept but a concept that I really like it involves the user themselves using this slider to show the difference between the green screen and the final image providing that additional understanding of how this scene was created but it also gets these are involved with which that interaction is very valuable and I'll talk about that a little bit more later so another way we can convey meaning through animation is by conveying purpose for things so this is probably my favorite example that that I have today it's very very simple but very very meaningful so when the add add to bag button is clicked the image just simply moves to the car and the car updates the the total cost with the additional cost of the item and so this conveys a whole bunch of meaning it it conveys hey your action was successful and now it's in this part and you know exactly how we're to get there and the cost is and being increased and that's shown all through that one little little animation but incredibly meaningful so its touches like this that make make a website more than just good or more than just usable what makes them really exceptional websites and so another way you can use animations is through showing completion this post pulled from The Daily Beast just shows how as you scroll through the article meaning you've read it the navigation on the right shows the progress and so this helps users understand how much more they have to read helps them understand them be more motivated to complete it because it's type of gamification small but still gamification and it also provides the second or third or however many to have articles beneath the original article so if you want to continue reading like you enjoy the it also provides that right there right there next to the original article so you can continue your reading if you want another way you can show completion in a different way this is just a small checklist but lovely designed in my opinion simple because it shows that transition between the states and has that has just an appealing look to it and show that you can easily glance at the list and know alright I don't need to worry about those that have been checked off I can just focus on the ones that are remaining and so the loaders are big you see letters all the time on code pen and things like that so loaders are important because they help users not focus on how long things are taking and so they can at least look at something the one on the left is the very conventional loader it's kind of boring it's not particularly meaningful in what it does but it does help it's better than nothing the one on the right is much better I think even though it's it's very very branded and so not every company could pull off something like that which could be a very good thing if you can pull off something like that please do but it conveys extra meaning in the animation itself because it shows the jetpack man going from one place to the next showing that redirecting action that's the type of animation we really want even better transition in that I think would be this one pulled from Google material designs style guidelines and so as seen in the demo the image actually opens up into a full page and this is something that we've gained the capability of in recent years and something that we're starting to see in actual websites and I'm really excited to see this more often because it helps create that 3d spatial awareness of where the user is how to get back to where they were and provides that mean that we were really wanting so the next big reason we have animations for redirecting focus so this could be notification and it could be for an animated loaders like the ones that we saw on the screen before or it could be something simple like this just the next elements in the page being faded in and being shown as the as the pages scrolled so this helps the user even though it's a vertical like convinced it follows Convention and goes vertically it still helps the user focus on the next content that to be read and help them realize that there's more content to be seen and not just something something static it also makes use of two different ways of animating the it slides in and fades in and that combination of and combining two different ways of animating is one of the principles of animation which I don't have time to talk about today but I really think to in the back and really helps the animation seem more high-quality and more realistic to us as humans so here's an example of what not to do so in this example the images are are indeed related to the text on the left and so when you get to a different section it changes the image based on the content but the problem with this is that the transition from one image to another is very abrupt it stops the user from reading it and it makes it so that they focus instead on the image so the it doesn't fulfill its purpose because as the user is reading you want them to understand your thought you want them to be reading the actual article you don't want them to focus on something else and stop their train of fun but this abrupt change forces them to just do just that and so using that same thought we can do it in a much better way using a transition like wire does here so it still keeps the images relevant to the content on the left but it's a as you can tell it keeps it so that it's not our abrupt changes it's a transition from one image to the next you can visually see when the next transition is going to happen and the users not surprised or distracted by by that change of image while still keeping it relevant and the last big reason for animation is just for general enjoyment so this is this is a lot oftentimes little things that help make your experience are help sorry help make your application or website stand out from all the rest and so it's not some big fancy thing oftentimes it's just the little things and so in this example it's shows how an animated list is moved in from the left so both of them do a good job of creating spatial awareness by coming in from the left but the staggered animation is much better because it is more appealing to us as humans because of that double factored animation like I mentioned before github there's a lovely little transition here for viewing the languages for a given project which isn't the information that it shows isn't required which is good because it's not shown initially but it helps it not create cluttered visual space by still providing additional info by using this toggled State and it's a lovely little animation I thought and so like I said before you really we really need to know our purpose when creating these things from the very very my new things we like we need still need to know the purpose behind those and to execute that purpose well and so an example of this is citymapper versus Google Maps so you might not have heard of citymapper it's a very similar app to Google Maps but the thing here is that they understood user flow really really well they cut down the amount of time it took to find directions to a location from about 20 seconds on Google Maps to 10 seconds which is half of the time that just takes understanding user flow really well keeping the animations keeping the transitions between pages really short and filling the purpose of the application well now we move on to things that you shouldn't do and all of you guys do some things that you shouldn't do I know that for a fact is there a lot of them so as a user you shouldn't take away Oh as a developer as a company you shouldn't distract me as a users you shouldn't take take away on my control you shouldn't distract me you didn't remove me from the flow or hook or hide content or make me wait or add meaningless effects and so I'll go into each of these each of those bursts is taking away my control now worst sites about doing this are one-page websites where it takes up the full screen and they try and make me do something that I'm not used to so in this example it actually shows a broken version which most of them are broken I tried to scroll using my mouse wheel and it jumped from the first section to the second section and then transitioned to the third section I was just trying to go to the second one I'm not they're trying to make it more pleasant for me by giving me this full experience making the maximum use but it really ended up in this broken state because of poor implementation and really did not make me comforted as user so as a user we are used to convention we're used to being able to scroll the way we're used we're used to we have these norms and if somebody takes those away it makes us feel less secure it makes us feel like we're not in control which is not something that what you want we want users to be comfortable and to enjoy the experience of the website so this is the same type thing but instead of restricting my scroll they just made it so on scroll new content is shown but that leads to other problems that leads to content not being shown sometimes like I thought there was going to be more content at the end there but there wasn't it just leads to more problems so a way to avoid this is to not do this at all you don't we don't want to try and forget the concept of a page we want to create an experience that makes users comfortable and not not rely on this page aspect that we are used to from books but modifying control can sometimes be okay so as a Windows user I'm not used to being able are but usually when I scroll with a scroll wheel it's a kind of it moves in chunks not some type of smooth stroll and so on this website it actually modified the scrolling so it eased in and eased out which was really a pleasant experience in the first first experience where they took away some of my control and I really enjoyed it as a easier so this is just another example of what not to do so in this angular site I scrolled with my mouse wheel literally 20 times before it pops back to the exact same screen this I don't know what they're thinking making me scroll that much just to try and get to the next page I had to do it 21 times to get to the next page but that is not a pleasant experience for users so another thing is distracting me so here I am reading this this article and every time this the scene changes I get distracted by this bald guy that's talking up there I'm trying to read the article not whatever it is that's going on and so that's that just breaks the breaks the experience that I have and makes me focus on whatever it is it's happening up there not on the content that you want me to be reading so this is the same thing it's another news website they do it awfully all the time but instead it moves over the whole content whenever a part of the navigation is hovered which is entirely distracting and it makes it so that I cannot continue reading the line that I was on if I accidentally hover it or something like that so this is an example pulled from code drops actually it's a lovely little animation but the problem here is that it takes users out of the flow completely so if you imagine being grandma or something and clicking this at this and Bricker menu it opens up this whole new page covering up everything that was being seen it so it takes her completely out of the context of the previous page this could be solved by adding a little bit of transparency to the background or something like that so to where the user is still in the same environment still in the same page but that navigation is still shown another example is this one of covering up images that I want to be seeing the image but when I hover over it it covers it up completely by the title and the helpful text and this is a useful thing it's just done very poorly a much better implementation is this one pulled from code drops that shows the image still but also provides that additional information and in a lovely lovely way so I encourage you guys to use resources like drops and things like that but be intelligent about the choices you make because there's still poor ones among these examples I just didn't choose to show them so another thing that people do wrong is making me wait as a user and so this is a marathon website all of the animations on this website take a really really long time to load I guess they're trying to prepare me for the marathon that's gonna happen because that's really long but as a user I don't know if contents gonna be coming during that time there's a small there's a period in this jiff where I stop thinking that there was going to be more content but there wasn't it just leads to a whole bunch of problems and you're wasting my time which is not something that you want to be doing and the last thing that you want to are that you want to avoid is meaningless effects so this is a website that developer friend of mine made for himself I'm sure was really fun to make and it's kind of cool but as a website that's pretty unusable and not not very inspiring it doesn't achieve his purpose well and the blink element is a is a great example of this it's just meaningless effect that sure it distracts them but it distracts them that's not what you're supposed to be doing so some general notes that we can make from this is that a good conversation is two ways it's not one person just standing there and speaking to you like this is not good conversation that we're having it's one person talking but as a as an application as a website you want to have some conversation with your user you don't want to just be telling them things the whole time so we can do that by raising questions and answering them those don't mean literal questions that means intriguing users you using like the on when you have a big header photo for example and you have a little arrow pointing to more content or even showing more content at the bottom of the page it intrigues users and helps them understand that there's more constant to be seeing raising that question and having the user answer it themself this interaction between clients is incredibly incredibly valuable so it helps users helps users remember the experience and enjoy the experience more because it's not just one person talking not just the the site telling them what they shouldn't shouldn't be doing it's them exploring it themselves and making it a more personal experience and as developers and designers we don't want mediocre experiences because that does not get conversions that does not help people remember us that that just makes it okay that just makes it website like every other and even if we've put a whole bunch of time into it we want to still get rid of it if it's not achieving our purpose and if it's not the best for thing for us because it's not the best thing for us it doesn't matter how much time we've put into it if it's not the best and so everything that I've covered today are just guidelines the important thing is to think and to think how users will do it and to actually prototype what we're doing and to user test everything so even if we've gone through something 50 times ourselves it doesn't matter if the end user doesn't understand it so the important it's important to prototype a test throughout the entire process and to do it well and like I said earlier it's important also to steal and still well and not actually steal anything of course but to use other people's ideas and build off of the community that we have coming to conferences in thing then things like this help us understand how we can convey our purpose better and understand ways in which to do so and so it's important to do that but also think about every time that we're taking something not just copy and paste it but to copy it change it the way that we need it and then use it in production and so along with this is just thinking thinking a lot I'm thinking well about everything that we're doing so like I said thinking about everything every module that we're making not just the in function not just the end goal but how we're getting there through each step that we have and so like I said men shinned before there are principles of animation that I definitely encourage you guys to look at there are 12 different ones that help usually help humans understand animation and make it more realistic to us and there's also a site that provides user flow examples particularly through animation of applications and things that do it well and I encourage you guys to look at that there are also design details of a bunch of different applications this one is just a inbox and how the animations of it help user flow and by reading those you can better understand really how good companies do and how you can do similar thing in your own application and Google's material design guidelines also do help in this way they're not incredibly focused on animation but they do have a good section on it and the last resource is my own resources page on your website is XOC comm and it has some introductory posts of how to create animations on the web as well as some more general posts but besides that I'm Zach saucier and you can find me at Zach's associate on Tom on Twitter or go to my site or my code pin so thank you so don't you think adding animations may impose performance problems on mobile devices can you restate that question do you think well adding animations may pose performance problems or mobile devices for example like when we put all the cool animations that you talked about like then people with all their mobile devices won't be able to experience them or it will become jittery or second so questions about performance on mobile for animations really mobile browsers perform really quite well these days so most of the ones that people are using anyway so the key is using small that are not in not very intensive animations like the Add to Cart animation for example is very very simple it just uses a transform of an element to another using a using just a transform like X transform translate animation so keeping keeping the animation simple themselves is very important to do especially for mobile so you wouldn't do some like full WebGL scene in mobile browsers just for like a regular website or something like that so it's important to tailor content and animations to that some extent but a large part of it is being handled as long as you animate smartly some properties that you don't want to be using are like changing the actual dimensions of elements or anything like that you want to try and stick to transforms and to opacity and to other properties that animate well but as long as you're using those those properties that animate well and not not being too intense with the animations mobile browsers perform perform really well so that's not something that we really need to be too focused on but like I that you always want to be testing no matter no matter what it is that you're developing how do you draw the line between animations that improve user experience and animations that might have an impact on accessibility issues mm that's a good question so I haven't worked too much with designing for disability or anything like that you probably need to speak to somebody who's more focused on that but I would say that a part of testing is our part of testing well anyway is including people who either are affected with this some disability whether it be color blindness or something like that or by including somebody who can review your animations and the development to make sure that they don't break standards in that area they they are accessible to those type of clients but yeah it's important to have other people reviewing the final design and reviewing each step of the design to make sure that it is accessible and things like that so the people need to have that type of understanding when they are reviewing I think there's a question here so would you recommend using css3 all the time cool so css3 has very good support across the board it's very good for for UI animation particularly like bringing up a modal or I'm not that you should use modal's but bringing up a modal or any type of smaller animation oftentimes it's very good to toggle a class to toggle a class on an element using a little bit of JavaScript and so oftentimes CSS is good for that but for more complex animations or it's often good to use a JavaScript library like G SAP green sock animation platform or use something more a little bit smaller but not quite as versatile like velocity is they can also be used for UI animation but it depends on the animation itself and the team that's working with it so to answer your question see try and stick to CSS animations but don't be absurd about it in production when necessary using a JavaScript animation library can be very very useful and is recommended hey I really like your talk and I noticed that you said that um we should do user testing and I was wondering because I tries to actually uhm propose that in like two places where I worked and then they always say no so I wanted to ask you if you actually do it so I do do it in the applications and websites that I've made even if it's not some formal long drawn-out process just having even my family members or my friends that are around use the application or website that I'm building can is very useful because they are able to provide that additional input in addition to and the other the other workers that are not necessarily working on the project having them do the same type thing but it depends on the scale of the application so obviously if you're a company like Google you're gonna need a lot more user testing and you have that ability to but if you're small-scale user testing you still something that needs to be done it just can't necessarily be done with hundreds of people it just might be done with a smaller group that you know or something like that so I do recommend it for all companies regardless of size regardless of purpose but the scale at which that happens is is it does vary based on the company and the circumstances great thanks for having me in being my audience guys you

Leave a Reply

Your email address will not be published. Required fields are marked *