User Interface Design Principles for E-Learning



I appreciate you all joining us and let me go ahead and jump right in and we'll talk about some tools for eLearning all right so if we think about when elearning was just emerging most of us were likely taking existing PowerPoint slides and converting them into e-learning courses and maybe you added some audio narration or possibly you added some videos but the majority of the e-learning content consisted of really just click and read slides and then when we publish these type of courses our PowerPoint slides were traditionally wrapped in some sort of player that provided the controls to move forward and backward or maybe even access a menu we didn't necessarily have full control over everything that was in that player so really our focus was mostly on designing just the content so let me show you a little bit more about what I mean I just showed you kind of on the screen we have the content we have the player wrapped around it if you've worked with too late articulate studio or even storyline you know that you have these two separate entities you have the player that sort of wraps around the content and provide some basic controls for working with it and then you have the slide itself where you typically design your e-learning content and this is where you have all of your interactions and all of your text and information and imagery and that sort of thing if we look at this and we can kind of look at the old way we used to do it there's a very clear delineation between the slide and the player itself so in other words sometimes it becomes super noticeable that the slide is separate from the player so fast forward to where we are today and the majority of the tools that are out there provide us a means to integrate those two I'm going to go back here second I move forward a little too quickly but the majority of the tools available for us today provide us the means to make that players seamless and to make it part of the entire experience that is our e-learning so that's going to be one of the things that we're going to talk about today in our in our presentation and we'll talk about how sort of the difference between things we can do on the slide and onto the plate and on the player itself contribute to some good design design decisions we can make in eLearning okay so one thing you might notice our courses when we build them we usually build them in sort of layers so if we think about the way the different layers of the content that we have on our course typically we have and I'm going to move from right to left here but typically hat we have some sort of background maybe this is just an artistic background for design purposes to make for to match your company branding standard something like that then from there you might have the interface itself this is where your buttons are your interactions you have the ability to click these items this is it also could be encompassed the colors of your branding and your corporate logos things of that nature and then the next layer that you have is really your content this is your textual content your images your video anything that you're putting on screen to create the e-learning experience for the learner time working with the content and rightfully so our content is what drives the good eLearning but what we have to keep in mind is that the other layers are really just as important and so from here when we talk about what we need to do with our content and the design decisions there are five different rules that we're going to talk about today with respect to what we can do to ensure for that seamless experience for the user and let's go ahead and dive right in and talk about those so rule number one the first rule we want to talk about is taking advantage of visual cues so now one thing I just want a little story I want to share with you to put a little bit of this into perspective so I actually used to teach Zumba classes at my local gym and I don't know how many of you have taken a Zumba class but if you've taken any kind of exercise class you'll likely notice that the instructor at the front of the room is constantly giving you cues on as to what's coming next you know so whether that's counting down alright four three two one that's usually a cue that lets you know that you know in four counts something new might be happening or maybe you've seen an exercise instructor point to the right side of the room one might take a good guess that if the instructor is pointing to the right side of the room that you as a student are going to be expected to move right some way or another and similarly if they point to the left side of the room you will likely understand from that cue that you're going to move to the left side of the room so if we think about this in the context of an exercise class we see these visual cues time and whether we actually recognize them or not in the moment that they're happening even subconsciously we're able to gain a little bit of information about what might come next from those cues and elearning is really no different from that so when we talk about the different visual cues you can have in your e-learning courses there are really three main ways that you can add these different cues to your courses the first way is of course with color so we can use color as a visual cue to attract attention to things we can use it to highlight important text or headings and we can use it to make things basically just stand out on our page to grab that attention from the learner and if you look down at the bottom of my screen here this little example that I'm showing you is from a case study where this particular this particular Internet Retailer simply changed there Add to Cart button from that dark blue color to the green color and as a result they there got an increase of 35 point 81 percent in their conversion rate so just changing that color gave them a more positive impact on how many people were actually purchasing this particular product and we can ask ourselves why that is but a lot of the reason might really just be because that button attracted their attention more and they saw it and they noticed it and it attracted them to actually push it and add this item to their cart so color is a really effective way that we can build attention-grabbing things into our e-learning courses let's take a couple of let's take a look at a couple of examples of where we can use color so if you look at this screen here we're looking at a course screen that's just showing some learning objectives for the course and at first glance you might look at this and say wow there's nothing wrong with this this is nice nice and clean design and good use of color and the check marks on screen or drawing my attention to the objectives but now let's look at just a very brief alternative or very different all not very different but an alternative that has some very small differences all that we've done here on this particular alternative is we've placed a green background on our title heading at the top and we've changed those back and next buttons at the bottom right to a green color and as a result of this what you might have noticed is that your eyes right away first of all you notice that session objectives it pops a lot more as a title to the slide and then your eyes naturally sort of move to the bottom right and you quickly gain an understanding of the controls that you need to move forward in the course so that's one way so color it's certainly one easy way that we can provide those directional cues within our courses but there's another way that we can do it too and that's through visual hierarchy and and with visual hierarchy we use that to communicate a clear order that learners should interact with the content we want to make it obvious what they should focus their attention on first then second then third etc and if you see down at the bottom it says try the squint test so this is a test that you can kind of do on your own e-learning courses now some of these websites and examples that I'm showing you are a little bit old but as I'm showing you each of these just squint your eyes a little bit and take a look at each example and see what pops out on the page on this particular dredge report what you should hopefully notice is certainly the title pops out this heading pops out and the images pop out but not a whole lot else pops out from this particular page if we do the squint test on this page this is a Google news page what pops out here certainly the images pop out but hopefully also the blue headings of each of the individual articles are popping out for you if we go to this graphic stock stock site and I believe this is an old example if you went to their site today I don't think it looks anything like this but if you go to this graphic site and do the squint test does anything really pop out here or is it you know is it kind of a jumbled mess I know when I do the squint test you know the images are definitely there in the forefront but nothing else is popping out at me to grab my attention and then finally if we go to iStockphoto and we do this win test there and again this is a an old screen capture of that website so it has changed a little bit but what pops out right away there I mean if I do the squint test here the biggest thing that pops out to me is this search field which in other words is encouraging me to search for the photos that I want to search for so that visual hierarchy that we can provide whether it's with colors or with the organization of our content that visual hierarchy allows our brains to process which information we should be looking at first and then what's next and then what's next after that finally the last sort of visual cue that you can use in your elearning courses are directional cues and some of these can be super over and some of them can be not so or over so when we talk about directional cues what we mean is literally arrows and directional cues can literally point your learners in the right direction so let's again take a look at some examples here so here's an example of a screen just a little course navigation instructions nothing super fancy about this and when you look at it at first you might say okay no big deal you know I've got some information buttons here and seems relatively easy to use but how much easier would it be if we just added these little arrows that say hey learner pay attention to these three components this is what's important to you just adding those arrows and pointing the learner in the right direction giving them those visual cues helps the learner understand what it is we want them to focus on here's a little bit of a less overt example we have this character here who is gesturing to the left side of the screen even just that gesture alone will help learners focus their eyes on the left side of the screen and as a result focus on the topics on one of the topics they need to select in order to continue here's just one more example we just have a character image here where this particular character is looking in the direction of the information that's being presented on screen just this and the the fact that this little boy is looking towards our learning objectives again when our brain processes this we are going to automatically shift our focus and our attention to the learning objectives there's been a lot of studies that have been done out there that just that the the gesturing towards something not looking right at the screen as a character and instead looking somewhere else pointing to the content on the screen is a very effective way to get learners attention and focus on that content that they're that the character gesturing to so these are just some of the ways that you can add those visual cues to your e-learning content whether it's with colors whether it's with those directional cues or whatever it might be to ensure that your learners are focusing on exactly what they need to be focusing on from slide to slide so that brings us to sort of the second rule that we're going to talk about which is to remove redundant navigation and be consistent so the story that my colleague Tim used to tell when he would give this presentation is that you know he used to be a mall cop his words not mine and he quickly realized that in that role that if he were to find all of the shoplifters that he would quickly be out of a job and so he realized that in order to effectively do his job and keep his job it was better if he went unnoticed and what he found through that role is that if he was very noticeable then shoplifters would become distracted and they wouldn't and they ultimately wouldn't shoplift which is not necessarily a bad thing that is the result that we're looking for but on the alternative side of things if he made himself more invisible and to wear those shoplifters didn't notice him then they would continue doing what they were doing which is shoplifting and at that point then he was able to catch them so the point of this story is that you know our e-learning is kind of similar in that the way we need to treat our user interfaces it seems sort of ironic but the more time we spend on perfecting our user interface to ensure that there's a smooth experience for the learner the less the learner is actually going to notice it and that's a good thing so one of the things that we want to do is remove controls that accomplish the same thing and I and part of this is you know I think there are some assumptions that we make that our learners won't necessarily understand how to navigate around our courses and it's not just our learners and eLearning so there are plenty of examples in the world where we have redundancy everywhere so here's an example that I'm showing you on screen of a refrigerator we have a door with an ax door on a refrigerator well is that really necessary I'm not sure maybe you find it's necessary the reality is it's a refrigerator people are going to figure out how to use this they're gonna there's two doors there's only two things to figure out you know they will figure that out but our e-learning courses aren't quite as simple and sometimes I think what we do is we over we overcompensate for thinking that our learners may not understand what they're supposed to do on screen and sometimes what we do with that overcompensation is we end up providing redundancy in our e-learning so let's take a look at some examples on screen so if you look at this particular example focus on just the buttons that are here we have a next button in the top right corner we also have the player controls at the very bottom which one are we supposed to use that's an example of redundancy could very well make our learners confused as to how they would move forward in the course or if they click this next button does it really take them to the same place as the players next button and will they have to go back and forth to make sure that they've that they're going to the right place so this is having to think through those thoughts and having to ask those questions to yourself as a learner it just distracts from the experience of the e-learning and they're no longer focusing on the content of your course but rather focusing on figuring out how to navigate your course here's another example if we look at this identity theft we have a right arrow here that's on screen as part of the banner we have previous and next buttons at the bottom as part of the player and then on the left hand side we have a menu with the individual items listed out so as a learner am I supposed to use the arrow am I supposed to use the next or am I supposed to use the menu these redundant navigation components again they detract from distract from the experience and take away from the actual content itself and leave the learner a little bit confused as to what they need to use to actually move forward in this particular course so I just clicked again and you might not have noticed about we're getting a little bit better here if you notice down at the bottom now at least the next and back buttons have moved so now this is getting a little bit better and we can and we have just the arrow here to move forward and then you know we do have the menu so there are some decisions that you might have to make around whether that menu is really necessary and if that's going to confuse the learner as to whether they should be using the menu or the on-screen controls these are all considerations that we should be thinking about when we're designing our eLearning here's yet another example once again we have this recognize protect repair it says up at the top click each topic to learn more well is that the same as clicking recognize protect and repair in the menu we'll never know unless we try it versus if we take a look at something like this now if we look at this which is sort of a cleaned up version of what you just saw we have very clear instructions at the top click each topic to learn more we have the three topics and there's really nothing else for us to click so as a learner I am forced into clicking these three topics and then eventually I will be forced to moving to the next screen and I never once had to think about what button I need to press or where I need to go to move forward in the course so as part of that redundancy or removing that redundancy another important part of that is to maintain consistency with respect to location function and appearance so when we talk about consistency we can talk about two things internal versus external consistency so your internal consistency are going to be the standards or conventions that apply within a single course so to use just a very obvious and overt example suppose you had a course where the next button is on the bottom right-hand side of the page well that next button should remain in the bottom right-hand side of the page remark regardless of what side you're on if all of a sudden on slide one it's on the bottom right-hand corner slide two it's on the top left-hand corner and side three it's in the middle of the page you're just going to confuse your learners and they will never build up any kind of expectation as far as how to use your course because they're constantly guessing with each slide now I used a super obvious example and I'm sure that as designers we know better not to do that but take that concept in that principle and apply it globally this is this four year courses whether it's with respect to button placement the colors that you use the font sizes and styles that you use these conventions and the consistency that is presented is what helps our learners become familiar with the content and essentially learn how to use it now then the other part of being consistent is sort of external consistency so that standards or conventions that apply within multiple courses so if you're part of an organization in your crane creating a whole curriculum of eLearning it's still important for you to consider the consistency across courses as well certainly you might be covering different topics or you might be you know there might be different departments that are issuing this e-learning but again when we we talk about and think about consistency if you get your learner through that first course or two and you've built a set of expectations as how those courses are going to work where they can find the navigation buttons you know how the content is laid out if you've built those expectations take advantage of the fact that you've built up those expectations with your learner's and then build that consistency throughout your whole curriculum so that when they go to their third and fourth course regardless of what topic it's on they will already enter that course with a with an expectation of knowing how to use it and if you stay consistent then they will know how to use it okay so that brings us to our third topic I noticed we have a couple of items in chat here so I'm just going to take a quick pause moment to see we have a question here am i right it is impossible to turn off the players buttons so no that is not correct by my knowledge in storyline you do have the ability to turn off those players buttons and you can even eliminate the entire player so that all you're seeing is the the course slide itself so you do have lots of flexibility in your storyline player you should be able to sort of turn on and off those options as you wish or even just hide the entire player as a whole and I see that Chris answered that question for us so thank you Chris and it looks like we just have a little bit of a private discussion going on there about how we can work with these player controls so great thank you everyone for kind of assisting and helping some and helping answer some questions there all right so with that I'm going to move into sort of our third rule which is to encourage interaction and use States to provide instant feedback so as we use States to indicate under interactive objects this is just again one of those things where we say let's give hints to the learner as to what they need to do or how objects on screen work so if I'm looking at these two buttons on screen and I use my mouse if I roll my mouse over the button on the left nothing happens so as a learner I might be asking myself okay well maybe that's not really a button nothing happens there it doesn't seem interactive my cursor changes but I don't really know what's going on there versus the button on the right if I hover my mouse over it it changes color and just that very brief state change is an instant indicator to your learner that hey that's a button that's an interactive object when you rolled your mouse over it something happened and that's our way of telling you you should click here and because of our habits on the web and what we've learned and seen from online websites this is pretty standard behavior so it's an expectation that our learners already have in coming to our courses and so by adding just these little state changes we can give them further hints as to the interactive components that are on screen in our courses so let's take a look at a couple of other examples so here we have an example of some markers that are on screen here and if you notice two out of three markers are just kind of sitting there and the second marker here actually has the swirling circle around it so once again as we look at this particular screen you know if we didn't have that swirling circle we might think okay well maybe these are just one two three pointing out these areas on this image maybe I'm just supposed to take notice of what these areas are but once we have that little spinning effect all of a sudden it becomes a lot more obvious that hey wait a second they want us to interact with this object and as a learner I can more easily figure out that this is something that I need to click and interact with let's take a look at a couple of more examples this is a an example that is pretty simple and yet pretty powerful so if you notice on this particular screen what's happening we have no controls or buttons or anything here no directional text that says click here do that do this and yet we have this one little arrow at the bottom that is just ever so slightly moving back and forth that's enough of a queue to me as a learner to say hey they want me to click here and by clicking there we can move to the next screen so let's dig a little bit deeper we want to invite the user to take action with guided state changes so this is going continuing to build on the state let's on the states that we can use for our objects let's look at some additional examples so one of the ways that we can very clearly communicate with our learners about how they need to interact with objects could be with this sort of approach which is if you've seen this you've possibly seen this maybe even in your learning management system or in some courses perhaps you have you want your learner's to finish module one before they can go to module 2 and finish module 2 before they can go to module 3 something like that order to let the learner know without actually presenting them a slide or a narration that says hey you have to finish module 1 before you can move to module 2 we can do this within our content with just some visual cues so for example if we use buttons like this to indicate our different modules well we might have a normal active button that says module 1 meaning we can go there once we've completed it it might include a check mark to reflect that it's been completed and then if we can't go there if it's locked then we might have a little padlock icon that indicates to our learner that you're not you can't go there yet that's locked content so this is yet another way that we can use those States or those those different objects to communicate to the learner how they are able to interact with them so let's take a look at another example here we have up at the top here step one step two step three what's the first thing you notice if you notice my mouse go across these three steps step one is active when I roll over it I get that nice blue color step two does nothing step three does nothing so as a learner not only am i forced to click on step one it becomes pretty obvious that this is where they want me to go this is where the e-learning wants me to go so step one I click there notice as soon as I click step one I get the information but then also step two becomes enabled and now if I hover my mouse over these objects it becomes clear to me that oh alright I'm viewed step one now I can view step two so similarly I can do the same thing there now see what's happened step one we have a check mark there to say yep you did that one you're on step two and now step three is active and if I click that step three you can see then it follows the same sort of pattern so these are just very small things that you can do within your design to help give the learner some cues and some information about what it is they should be doing to interact with your content here's another example let's go back to our markers in Chicago in this case all of our markers are spinning and we have some information icons there so right away as a learner I say hey I think they want me to click on these things when I click on them I have I have a couple of things that are happen happening here first of all obviously the information pops up but then if you notice on screen – my marker changes color and it gives me a little replay icon to kind of indicate that you've been there and if you want to see it again go ahead and click that and with each and every one of these I can click them what do you also notice on this screen hopefully you notice down at the bottom right that we have this next button that is disabled can't do anything with that next button yet however if I click on all of these items and make sure that I view them all at the end my next button becomes enabled and all of these different visual cues and the colors and the symbols and the different states everything that we're using here is helping the learner understand that they need to visit all five of these things before they're going to be allowed to move to the next screen okay so that will obsess into our fourth rule which is to use transitions to ease learners into changing content okay so when we talk about transitions transitions are there the the motion effects or the animations that you use two items on and off screen or to add motion to your content to transition from slide to slide we can use transitions in a lot of different ways and what transitions can help us do is not only create a sense of visual continuity but it can also help us with that hierarchy so we talked about earlier the visual cues that you can build into your course to help then build that hierarchy so that learners know where to focus their eyes first second third etc well transitions can really do that job as well and this one is kind of difficult to explain but I think pictures are worth a thousand words here so please give this here and go let's take a look at just some examples so we have an example of just a little a little course here suppose we're meeting the leadership team at Apple and let's take a look at this course if we click on one of these characters here it goes right to their page and looks good nice and clean we know who it is we can read a little bit about them and we see their image I can navigate backwards and I come back to my menu of people I can click another one same thing happens in theory there's really not nothing wrong with this but what can we do to make it a whole lot better well one thing we can do is add some transitions so now as a contrast let's look at what happens now once I click on Tim with those transitions we've built this page with a couple of really nice transitions and as the learner it just makes it that much more of an engaging experience you know we're seeing some motion on screen we're able to focus more on on 10 there's not such an abrupt change between content it's building that out for us so that there's a nice transition into what's coming next so here's one example let's take a look at another example so this is another example of again creating that visual hierarchy or I skipped around a little bit sorry we're not going to get to the example yet but this is the one that I was just talking about in terms of creating visual hierarchy so I'm gonna play this video up at the top here where it says do and if you notice when I play that video you notice that the objects are coming in from the top left and moving down to the bottom right I'm gonna play it one more time so this is very different from the bottom example which is if I play that one everything just appears at once now you might be thinking to yourself well both of those are acceptable transitions and they are there's really nothing altogether wrong with the bottom example though but the biggest difference is with this top example is that you've built in a visual cue with it the fact that the top-left object comes in first and then all of the other ones follow behind it automatically sort of triggers our brain to focus at that top left corner first and then work our way down to the bottom right so we may subconsciously not even notice that that a transition like that might be insinuating such a thing but it is and as a result we will follow or our our our brains will attempt to follow the same pattern of the transition that was presented so here's yet another example let's go ahead and take a look at an example with Tran and then without transitions so if we look at this flat flat design example if I go ahead to click to begin you notice it immediately goes into my learning objective I have the three learning objectives there I click continue it takes me to a timeline now I have the timeline I can click each one of these items and these things just appear right looks really nice that's a nice design there's not necessarily anything wrong with this but there are a lot of ways that we can improve it so let's take a look at an alternative example with some transitions built in that sort of improves the entire experience so let's go ahead and select click to begin and now see what's happened there is the elements on screen have transitioned on and off screen in a way that just makes the whole experience that much better it allows us to change our focus and understand what we should focus on first so one of the first things that you might have noticed is when the objectives came on was that the top objective came on first and then there was a slight delay before the second objectives show then another delay before the third objectives showed up so once again even just adding those little transitions with that by going first second and third instead of them all showing up simultaneously it's telling our brains ok read this one at the top first then read this second one and then read the bottom one and so that is using transitions like this is a really nice way that you can not only add some eye candy to your courses but give your learners some cues as to where you want them to focus their attention okay so let's keep moving here and come to our fifth rule we want to and this this fifth rule is really kind of the all encompassing rule this is the one where we say it get intuitive such that it doesn't require instructions so I think that's the goal of all of our e-learning right we want our learners to have a fantastic experience and as part of that we want them to understand what it is that they're doing as we're developing our courses you know it's really easy for us to say yeah you know I put a button on screen it'll be easy learners they'll understand to click that button well from our perspective as the developer sure we know that we have developed a button and we know that that button should be used to display certain information or do whatever it needs to do so because we know all of that information it's easy for us to lose sight of the fact that learners may not understand that we need to click that they need to click that button they may not understand where that button is going and so it's our job to as we're looking at our course and our user interface design it's our job to really understand what it is our learners are expecting to understand what their experiences are and understand where they might get confused so let's take a look at some of the things that we can do to make it intuitive such that it doesn't require instructions so as I like to say having instructions for using your course and having a course that requires instructions are two very different things so this isn't to say that you can't have some textual instructions in your course I think it's good to always have that sort of thing and and reiterate to your learners how they should use it but really if a course is effectively designed you shouldn't need those textual directions and a couple of the ways that you can make sure you do this is one of them is don't reinvent the wheel use standard symbols and styles that are recognized by most there's so much content out on the web these days and we have so many experiences out with websites and different web based applications and things of that nature that we've built a set of expectations whether we know it or not we have a certain set of expectations on how web based content should work so leverage those expectations to your advantage with your elearning courses as well and we'll look at some examples of this in just a second the second point that I want to make here is to test with real users early and often so research suggests that iterative testing with only five users will often reveal up to 85% of your usability issues and this is something that we actually do in practice as well at artists and eLearning we as part of our sort of development process at the end of the course what we will do is we'll put the course in front of people who have never ever ever seen it before and the reason that we do this is that as you can imagine whether it's the developers or the testers or whoever it is that they're look that is looking at the course and they have become familiar with it as they have learned how to use it they've built their own expectations around how things should work and so over the course of time during the development process sometimes they can become sort of numb or just not recognize some of the UI components or design components of the course that might be confusing to others because they've gotten used to seeing it they know how it works they've been part of the development process so what we like to do is at the end of our development process before we turn everything over to the client before we you know wrap everything up is we do put the course in front of people who have never ever seen it before and we allow them to provide their feedback and this can be a really really useful exercise to uncover some of those UI things or design components that maybe you didn't think of but that are causing others issues in being able to effectively use your course and navigate within it so let's just think for a moment going back to not reinventing the wheel think about these some of these symbols that we're seeing on screen do you recognize these symbols I'm guessing that you probably do we have a power symbol a play info home a light bulb could be info as well download or question a lot of these are common symbols and things that we see on a lot of places whether it's you know a play button on YouTube or a power button on your own computer or info buttons that you see everywhere on websites these are things that we have learned to be able to recognize and that we and that we have built expectations around so leverage these types of things and these symbols to your advantage within your courses don't reinvent the wheel if you need a button to play a video use a standard play button sometimes I know we want to get a little bit creative in our courses and we don't want to introduce things here and there but it's important that we stick to standards as well to avoid confusion of our learners and then when it comes to the testing I talked about how you want to put that course in front of somebody who's never seen it before so with that testing really what we're trying to figure out is how easily and with how much confidence and satisfaction can learners interact with your content and so we think about the five components of usability what we have is the first component is really learn ability how easy is it for users to accomplish basic tasks the first time they encounter the design and this is that learn ability really again it ties in very closely with those standard symbols and things like that if you're using standard conventions that people recognize from other scenarios then it becomes that much easier for them to jump into your course see it for the first time and understand what they need to do to use it so the next component of usability is just efficiency once they have learned the design how quickly can they perform the tasks so going back to when we talked about efficiency this kind of goes along with the consistency rule that we talked about earlier if you are consistent within your e-learning and your presenting options and buttons and links and interactive components in a consist consistent means throughout your eLearning then your learners should very quickly become efficient at using that course you know once they've encountered that button or that link or that interaction once if you stay consistent throughout your course and then when they encounter it at another time later in your course they should already know how what to do and they shouldn't have to relearn how to interact with your content so this is what we mean about the efficiency component then the third component component is memorability when users return to the design after a period of not using it how easily can they reestablish proficiency so in other words you know they've walked away from your course for whatever reason weren't able to complete it in one sitting maybe they're going on vacation next week and have to pick it up when they get back whatever it might be when they do come back and pick it back up so you have do they have to relearn everything again or does it come back so quickly to them that they're able to just pick up where they left off and move on this is also yet another super important component of usability then we want to think about the errors that users can make how many errors do they make how severe are their errors and how easily can they recover from the errors so this is one thing that you want to consider as well you know does your course allow learners to click on the wrong sinks or go out of order and if it does allow for that do you have a way to compensate for it to get the learner back on track this is sort of what we mean by errors in terms of how our learners can interact with the content and it can do what is not intended within the course we want to try to stay away from that as much as possible and then last but not least of course there's the satisfaction how pleasant is it to use the design you know we all seem to engage much more with with things that delight us from any any perspective and so even a lot of the rules that I've presented to you today while they are good rules for effective interface and elearning design they're also good rules for just adding a little bit of a little bit of extra eye candy a little bit of extra extra little something that will help keep learners engaged with your course help keep their eyes focused and their attention focused on the design of the course itself or on the content of the course not the design but the content so that actually concludes our five steps four or five rules for good interface design for e-learning I'll be here for the next several minutes if anyone wants to chat some questions or comments please feel free to and I'll answer them as they come through the writing and I'd be happy to answer one of the questions in chat please so we have a question about can you turn off the players next and previous buttons in storyline and you can do two things you can either turn them off completely or you can disable them strangely it's not in the player dialog box so you think that's where it is since their player controls but it's actually in your slide property so you'd have to turn them off on every slide if you click your slide properties icon in the layers panel you can check or uncheck the next and the previous buttons and if you're in story view you can select a bunch of slides at once and do it all at once you don't even though you have to turn it off at the slide level you don't have to go into each slide so that's one option and then you do also have the option to change States with a trigger so let's say you have I think Tonya you showed an example where something wasn't available until you had done something so maybe you want the next button to be disabled until a few things are done and so you can do that via a trigger so your turning off the next button what you're doing is you're disabling it so you would add a change States trigger yeah like this except if you wanted to do that with your next button in the player so you can add a trigger that says change the state of the next button to disabled when the timeline starts so when the slide comes out next button will be disabled and then you'd set a second trigger that says change the state of the next button to normal when the timeline ends or once they clicked a button or whatever you want the conditions to be so that would be a trigger so at one trigger to change the state to disabled and then another trigger to change it back to normal when they've done whatever you want them to do so again you would turn it off completely on the slide properties but then use triggers if you want to enable and disable it okay back to you Tanya great thank you for that let's see here I'm just looking through the chat and it doesn't look like we have we have one question here where can we get some UX best practice quick reference guides um gosh that's a good question it looks like someone responded here a great resource for UI and UX design is slide ology by Nancy Duarte so she is definitely a good friend of artisans and I am not familiar with that resource but I would bet that it's pretty darn good the other one that you can look at is I think his name is Steve Krug kr ug that part I'm not a hundred percent sure but he has a book called don't make me think and it's kind of a user of usability kind of bible don't make me think I believe it's Steve Krug with a K thanks great perfect you know so then it looks like Jen's about access to this is that we will will do a couple of things we will send out a link to everybody who registered with this recording we'll also post the recording on the website and to get a list of future webinars and subscribe we do have right now all we have is a subscription to our blog which doesn't specifically give you information about upcoming webinars but we're looking to create a separate list for people who want to know about the webinars but as of right now it does not exist but we're hoping to do that soon but you could at least sign up for the Bob okay Tanya all right well I think that is all of the questions that I'm seeing here in chat and while we're waiting I would like to just say an extra thank you for Tonya for helping out with this presentation and sharing some of her expertise with us so Thank You Tonya yeah no thank you very much for having me and of course thanks Diane for help and answer some of these questions and thanks to all of you for attending today so let's see last question drumroll is it possible to get PowerPoint presentation to see your animations um I'm sorry I'm not sure I understand what you're asking I think she like a copy of your slides which are actually in this timeline file instead of a PowerPoint and I'm will have to get back to you on that because I don't know if the PowerPoint we I don't think we used a PowerPoint everything that Tonya shared was in a storyline file not in a PowerPoint file the first slide that's right did you have a PowerPoint Tonya no I just had this very first slide here UI design principles for e-learning so that was the only one everything else was indeed part of storyline right yeah sorry I'm sorry to disappoint yeah okay well thank you everybody for coming and have a great weekend thanks everyone hey did you like that video make sure to check out some of our other great content at elearning uncovered calm

3 Comments

  1. M Poswal said:

    excellent video and great way of presenting as well. Thanks!

    May 22, 2019
    Reply
  2. Sara Alexander said:

    Cool, I am looking forward to checking this out!

    May 22, 2019
    Reply
  3. Barbara Yalof said:

    tANYA, WONDERFUL helpful presentation with so many key points!

    May 22, 2019
    Reply

Leave a Reply

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