Designing Custom Interfaces in Lectora e-Learning Software



hello everyone this is Diane Elkins with artisan elearning & elearning uncovered comm we're here today to look at how to create a custom interface in lectura and there's a lot of things that go on into these decisions you have everything from technical considerations such as how big is the monitor of the student that who's going to be viewing it or will they be using a mobile device you've got graphic design considerations such as how does it look you've got the mood of your training and the tone of your training and then you also have some branding issues who is your organization what do they need to convey from a marketing perspective then you also have your functionality what features and functions do you need to build into the course all of those things go into the elements of a good interface design and then once it's designed you want to make it most pieces recreate able as you continue with your production you want to take those design elements and be able to quickly use them over and over again so that's what we'll be looking at today and there's a lot to cover in just a short period of time so we will get started first a little bit of background I am working on lectura inspire version X point 6 and we're starting with just a blank a blank title the very first decision I think needs to be made is how big you want your pages to be and that has to do with what the students are going to be using and this has become a harder question over time you know back when I started using Elector in 2005 the safe thing to do is to assume students had a monitor of 800 by 600 resolution which in today's standards is absolutely archaic but you know back then that's what you had to plan for what you want to shoot for is as much space as you can have without requiring the student to scroll because scrolling gets old you can do it every now and then like we'll often do it on a pretest or post-test or maybe we've got a pop-up page with the glossary but on a page to page basis you don't want the students to have to scroll a lot so the more you understand about your audience the better typically a safe resolution to shoot is 1024 by 768 and so you want to be at your title level or if you are using a SCORM or a ICC course you can do it at the the assignable user excuse me assignable unit level here we'll do it right at the title level and instead of the excuse me instead the standard which is 785 by 600 we're going to assume a 1024 by 768 monitor size that's also the dimensions of the iPad although the new Retina displays are actually bigger but it's a good resolution still on any iPad however you don't get to keep all of those pixels for your course if that's the size of their monitor that's from the very top of the monitor to the very bottom of the monitor you don't get all of that space so if you're going to be going through a website for example watching through an LMS launching on an intranet you have to factor in the browser controls so I've got this blue area on top I've got my URL my tabs I've got the menus me personally I had the favourites far activated you can have a student who has other bars activated you don't really know so but you do need to allow for some of that if you have a standard configuration you can actually measure it and find out exactly what it is but if you're dealing with the public you don't know if they're using Chrome or Firefox or plugins or such so you just have to kind of estimate if you're launching through a learning management system very often the learning management system has the ability to turn off any of those features in the students browser and I always recommend that you shouldn't eat them while you're in the course and they just make things a little harder to predict so let me get that out of the way oh go away so what we'll do is we'll back off the top to bottom is where you have more so we're going to put that at about 950 side by side there's not much we'll do it about 750 just to be safe the key thing you want to do here is test early and often that doesn't feel right width 950 height you know I know let me try and do it the right way yeah 950 width and 750 high so I'm not sure why it's looking strange like this there we go that's more the proportion I was expecting is you want to test it put out a page or two if it's gonna go through your LMS load it to your LMS go to a computer that's typical to what your users are going to be looking at and try it and make sure things aren't getting cut off because nothing's more frustrating than having to scroll down half an inch on every slide just to get to your next and back button and you really don't want to have to make these tweaks after your courses built it's really easy when you start it's a whole lot harder after that the next thing you need to think about is some combination of your graphic design elements as well as the what I call the utilities things like the next and back button do you want a table of contents do you need an audio control bar that sort of thing and this part of the planning I don't do in lecture I do in PowerPoint and the reason is that if I'm just kind of sketching it's it's a little bit quicker to come up with some variations in PowerPoint and it also lets me send it to my client in PowerPoint format they can even make some tweaks themselves to it because they own PowerPoint and know it so it's a little bit quicker that way so let me pull up PowerPoint and just give you a couple of bad examples first so here's an example of what not to do there's there's so many things wrong with this I can't even stand it for one thing it's ugly you know the the interface design the graphic design matters people put trust and form impressions based on whether it looks nice or it looks ugly so this is ugly secondly it's not very usable you have these words next and back do I click them are they buttons are they links I don't know I've got this list over here what is that I don't know what that is and I can't even read this text because of all of the graphics behind it that are just unnecessary then this is a problem that a lot of organizations have is they try to over brand their logo is too important in the course that should be your star not your logo here's another example of what not to do where someone tried to be so colorful and so graphic design e that it's just impossible to read it's ugly and if you had to look at more than five or six screens of this you'd get a headache and you know we don't want to do that to our students as opposed to something more like this be at the end of the day your interface should not be the star your content should be the star and so you want your interface elements to be useful you want them to communicate the right tone in the mood you want them to be professional but you want them to be kind of streamlined and and not overpowering okay so let's let's look at how to actually put something together so here's a little something I just got started for us and this breaks one of the biggest rules that I see companies make and that's over emphasizing their logo so if you look at this we've got a lot going on we've got the logo we've got the course title the slide title some utilities here and then next in the back button we've got so much stuff going on here that we only have about this much room for our content that's not a lot of space at all and the other stuff isn't that important a lot of organizations like want to make the e-learning developers use their standard PowerPoint template which I don't think is a good idea PowerPoint is a different need it's a different purpose and they also went to over brand we this is kind of mimicked off of template we got from a client where they literally wanted their logo that big well I like the thought of if you can't remember where you work look down at your nametag and that will remind you for York now remember that your interface elements that's different from your splash page splash page is what I call the first page it's the title you know there you can have the logo really big and you can have the course title really big and you can have some fun graphics going on for time management to set the mood and I think the visual design of your first screen is really important what we're looking at is not that it's what's going to be there on every single page and this is overkill to have all of this stuff it gets even worse if you have a course that needs a lot of utilities so now we add a drop-down menu we add a page counter we add an audio control toolbar and a progress bar well you know how is the student going to filter out all of that stuff around the edge and focus on the content so here's a variation that puts a heavier emphasis on the content so let's look at some of the things we did one is instead of having this great big old logo up here we have a nice subtle small logo down there again it can be big on the first page but it doesn't even have to be but small the rest of the time personally I don't know that you really even need it the whole time you know it's it's really not that important in most cases but I have yet to find a marketing department that agrees with me so I've given up that battle instead just assume the logo will be on there but let's make it small one of the things you want to do if you're redesigning an interface you're creating one for the first time is you always want to talk with the marketing department and get them to approve it I have seen courses shut down because the marketing department came in later and said oh that's the wrong shade of blue we can't go live or there are rules about how small the logo can be there are rules about how much empty space you have around the logo so make sure you get a copy of your organization's or in our case of your clients organization's logo standards color palette font choices all of those things have been figured out and it's a good idea to just follow those from the very beginning so that's one of the things we did the other thing that I did here that's different that I think is helpful is I made a very clear delineation between where's content and where's utilities on this version you had content you had utilities in the content area now it might not seem like a big deal but what it means is that your content has you have to leave a buffer you know so you have to leave a little bit of space between where your content can start meaning you're losing more space just because you need that buffer you can't really have content go all the way down to here so instead by delineating these are utilities you can now put your content all the way down to the bottom you can use more of that space the title of the course is much smaller and kind of faded in you don't want to make it too faded because you may have some students who have slightly impaired vision so you want enough contrast that it can be read but just by making it light blue instead of white we're kind of saying you know what this is in the background it's there if you need it but even then you think people are going to forget on slide 12 that the course is on time management you know they're not really so do we even need it I think you can ask yourself those questions so think subtlety think delineation between utility areas and content areas and remember that your content is king and so make sure that space is the biggest and the most prominent when you come to this slide you know that probably where you need to be looking as your slide title that's what I want here you don't even know where to be looking you're not you don't even know what's supposed to be important here so make it very clear to your student what's important and what's not okay so this will go through several iterations you know will go back and forth with the client I mean I'm not proposing that this is the most exciting interface you know if you want to have fun with it because you're doing a theme a football theme or a Fiesta theme that that's great again keeping your interface elements minimal but let's assume that we've gone back and forth and we've decided that this is the exact right approach then it's time to build it in electoral and when I'm in lectura my interface elements that are going to appear on every screen go not on the page but on the title level or if you are doing an A ICC course they're going to be at the a you level so you don't want to be on a page when you add them you want to be at the au level so I will be now be adding a combination of text graphics and functional utilities so if I'm doing something fairly simple I might be able to just use the drawing tools right here I can add a rectangle that's my banner for the top and I'm going to edit that and make it blue or my own color so I can do you know just some simple elements here adding text etc if I want something a little more fancy again I'm probably just going to do that PowerPoint and bring it in so let's say I want a gradient on that bar that goes across the top so I'll create my bar I'll get rid of the outline and I'll add just a simple gradient there we go right-click save as a picture generally when I make graphics in PowerPoint I'm going to save that as a PNG which is their default format so we'll call that a time management banner and I can go into like Torah and import that graphic from the desktop there it is click OK or apply and there it is let me go back to doing a better job of fitting there okay so I can add graphics very easily that I create in PowerPoint so I think the graphics and the text that's the easy stuff so let's look at some of the other more interesting kind of utilities some of the things that are unique to elect Ora so one of the things that we'll want to do is add next and back buttons for that we can use the button wizard and the button wizard either lets you put in a custom text button so the button can say next and say back or we can use a button from the clipart selection I think that's what we'll do here we've got a blue course so I'll see if C will use use this one if you press ctrl you can select more than one at once and we'll add those now you can get into lots of debates about well should they be at the top or should they be at the bottom and if you get ten people together you'll get five people who adamantly think one thing and five people who adamantly think another in the end it doesn't really matter you could argue both I could I could make a very sound argument for both the key is you don't want to have to scroll to get to them and they just need to be easy to find so as long as they're in one of the quarters people will find it we don't have to get too fancy and when you use the button wizard you're next and back are automatically programmed with a go to next page and go to previous page otherwise you'd have to add them manually but let's look at how to add them add something manually let's say you want your own custom buttons again I go back to PowerPoint so here I have some buttons that I created get rid of this I'll show you how I created those buttons and how you can do the same and bring them in to elect Ora so I'm going to start with a circle and if you press the shift key down while you do a circle it's going to keep it in proportion and not become an oval then we'll go to my formatting tools I'll take off the outline and I'll give it a little bit of a bevel so that's nice let me zoom in a little bit here so that's a nice-looking button there in just a few clicks and then I'm going to add on top of it another shape which is an arrow and we'll add an arrow right on top of that format no outline this I'll make white I'd probably spend some time getting that just right I'm just sort of gonna eyeball it here and I will group those two together make a copy of it and then on this copy I'll select the arrow rotate flip horizontal and now I've got next and back buttons one feels too off-center I can't handle it now I'll select each one I'll just do one of them right click save as picture go back to my desktop we'll call this next normal normal means that's what's gonna happen when the students not interacting it with it at all it's just sitting there but I might like want to add a nice hover effect so let me copy and paste another version of it and what I want to do is make it just a teeny bit lighter for a glow effect so I'm going to select the circle go to fill just go a little bit lighter it doesn't have to be an extreme difference in fact it's better if it's not an extreme difference there we go and now I'm going to right-click that one save as a picture on my desktop and we're going to call this one next hover when I go to elect Ora instead of using the button wizard I'm going to use the add button button and notice that you have a place to enter separate images for normal state that's what happens when it's just sitting there clicked which I didn't make is kind of the depression when the student is depressing it and then mouse over is the hover so I'm going to import from file go to my desktop find my normal image and then from my mouse over from file and that's my hover image fly so there's my button and let's see how it looks with the hover effect and there we go we have a nice hover effect on our button so it's actually quite easy to create your own buttons in PowerPoint and bring them in and make them look very very professional and interactive okay delete that for now and stay with what we have so the next and back buttons are going to be important the next thing you might want to include is a table of contents so let's take a look at some of the options here first let me point out a big mistake I've just made I love it when I do this I just put all of these objects on page 1 and what did I say not to do I said don't put him on page 1 because the reason is all of that will be gone when you go to page 2 all of these items need to live but the title or the assignable unit level so I can just drag those up put them on the assignable unit level and that means they will be on every page unless I tell them not to be so that's what I should have done all alone so from here let's look at the table of contents feature it's this button right here and there are three ways you can structure these so let me make a couple of copies and we'll take a look at all three choices so the first choice is called tree view the second choice is called that I'll show is called indented list and the third choice is drop-down so let's look at this in preview mode to show you the difference the difference is that the tree view lets the student expand and collapse which is especially nice if it's a long course because then it's a little easier to find what they need the indented view everything is always there there's no expanding or collapsing and the drop-down list is clearly a drop-down list so I like the drop-down list better because it doesn't take up much room I can tuck it up here perhaps and and it doesn't it doesn't have to really overwhelming interface we do have a one client who likes having this here down the side all the time and so we do you can also add maybe put this on a home page and add a link to the home page or the menu page or something that they can go back to you don't have to make it as long as your course is because if it's shorter it will just add a scrollbar for the student to be able to scroll around so those are a couple of options for table of contents realize that these are clipped clickable so a student can navigate around these they're not just for informational purposes so if you don't want the student to click around like we have a number of points that way you do compliance training for ethics training safety training things like that and they don't want the student to be jumping around the course they want them to take it in order in which case these aren't going to be a good choice they are clickable I know some people have tried workarounds where maybe I show this over to the side but I put a transparent shape over it so they can't click on it to me I'm not a fan of that if you're not going to click on it then then why are we showing it but you can make that choice let me show you a couple of examples of how you can integrate that into your design if we go back to where we were earlier here's an example of how we can put some extra elements into the course without it being overwhelming and of course the more utilities you put on your course the less room you're going to have for your content but sometimes that's what you need now here we have both the navigational menu as well as a transcript panel this is especially important if you want your course to be more accessible to those without those with disabilities or who don't have speakers on their computer etc when I do this sort of thing I like to keep all of the utilities together as much as possible so I've got my menu bar up here my table of contents my transcript my page number my buttons are all kind of right here in a single panel which helps again delineate from the content but a way to go even farther would be to use some of the color tools to make it's even fade out a little bit more so it's less less prominent you want your content to be King and so this is one way to do that and you can do that over here in lick taurah is on the layout tab or the font and color tab you can change the background color I like the eyedropper tool so I can match my color exactly and then styles which we'll talk about in a minute you just get something that works there you go and then when I'm creating my PowerPoint mock-up I'll just use I I have Jing which is a free screen capture software if you have Snagit which is part of like tour inspire you can just do a screen capture of this and paste it in that's how I got this panel here that's how I got my audio control toolbars I just did a screen capture of it in Elector so we do have a question and that's what size do you typically make buttons I make them as small as I can that still makes them easy to click so I can't give you an exact pixel number for example let's see these are 43 by 43 you could go a little smaller than this but you do need to think about whether or not you're going to be used making your course mobile compatible because you've got to think about whether or not your students gonna be using their finger instead of a mouse and so this button here 43 by 33 is probably about as small as I would go if I was going mobile the other thing that you do if you're going mobile is you might want to put a little bit more room between your buttons so that you don't accidentally do it somebody was telling me they were on Amazon recently and the links for preview this book and Buy It Now were so close she accidentally bought a book that she hadn't planned to because she thought she was previewing it because there was just too close together so that's one thing you might want to consider again with mobile design ok so those are our table of contents options so I'll delete these and I'm going to leave this one here here's another mistake that I make all the time so here's my table of contents that's great let me preview it where did it go well you have to think about your layering and so if I look at my title Explorer it's built like an ice-cream sundae so if you're reading the recipe table of contents goes in the bowl first and then the button and then the button and then the banner goes on top so my banner is on top of my table of contents I need my banner to be on the bottom layer which is the top of the list it's the first thing that the course puts down so now I can see my drop-down list okay so now let's look at progress bars and page counters so first we'll look at progress bars they're a little bit easier first of all I wouldn't recommend doing both I don't believe you need both a progress bar and a page counter but I do believe it's a good idea to give the students an idea as to where they are in the course you know how much is left you want to know that when you're watching a movie you want to know that when you watch the TV you want to know it when you're in an e-learning course so one option is the progress bar right here now when you add the progress bar by default the type is custom we're not going to get into what that is or timer what we want is table of contents and look again I put it on the page by mistake and drag it up there so the progress bar is going to be table of contents and so what that's going to do is down here at the bottom is it's going to show the student how far along they are so you can see here I'm that far in and then with each successive slide that I go to it's giving me an idea of how far I am progressing if you have multiple chapters and you add a progress bar to the chapter instead it will ask you if you want to show the progress for just that chapter you can customize it a little bit under layout you can make it horizontal or vertical instead of using the default image which is these little green bars you can instead pick your own color for example I'll pick my custom blue apply and there you go you can show little tick marks which go page by page so you have a number of options there more often than not I'm going to use a page counter I usually put it between my next and back buttons it just seems like a nice clean place to put it and the page counter can be a little tricky if you're not careful but it's it's great it's a great utility it's very useful you just have to you know make sure that you're using it properly so I'm going to go to tools and then the page numbering tool so do I want to include the total number of pages in the text so basically what it's asking do you just want to say page 4 or do you want to say page 4 of 12 I think you should say of 12 so I'm going to include that now I can also type the word page page 3 of 12 go back to my interface designs here let's see I personally don't think that's necessary because really page 3 of 12 versus 3 of 12 I think people know what that's going to mean I don't think anybody would not know what you mean by that so page just adds more space so I generally leave that off I'm not going to put anything there we'll just leave everything else the same and finish and what it did is it put see I keep I'm keeping on the wrong item when I add these elements whatever you have selected when you add the element is where the element will go so we'll move that in just a minute so we had this page counter which has nothing in it it's because it's fed by actions so all of these actions that label add current of total etc that's the logic that runs it if you're not careful you could later when you've got lots of stuff going on you could accidentally look at one of those actions and say I don't know what that is so here's what I do is I take all of my actions that are from my page counter and watch carefully what I'm going to do I'm going to drag them to the page counter so notice right now they are all individual elements but I'm going to drag them to the page counter and you see the difference now now they are part of the page counter so I'm not likely to accidentally delete them because it's part of the page counter plus if I want to inherit or disinherit the page counter these all go with it I can hide them I just think it's cleaner if you do that and now I can move the whole thing here so let's look at some of the options for the page counter what it's going to do is it's going to say I want to be I'm on page 4 current page of the total number of pages and Elector keeps track of the total number of pages the problem is in a minute I'm going to show you how we're going to make this chapter at the bottom for all pop-up pages and I don't want those counted so you may have to go in manually and change this one so add total pages right now there are 11 but the last three don't count so when I'm done with the whole course I don't bother doing this till the end because the number of pages changes so many times I can go in and say no I want this to be 25 and now when you look it says 1 of 25 so that's how you can manually deal with that if you need to okay you do that if you have if you use the page counter when you're in the chat a chapter the wizard give you some extra choices like do you want to start over at each chapter so should the first chapter of page 1 be one of four or should it be two of 12 you'll just have to decide how you want to do that you can disinherit it from any page if you want to but there's not a way to say oh don't count this in the total you have to go in and me and really do with total of pages ok we have a question to show you how to do the the eyedropper again so let's do it on our page counter actually no that's not a good example let's add a text box and we'll say that this is the course overview and we want this color to be the same blue from the drop down menu I select the eyedropper and then I click on whatever color I want to match anything actually you know do this color blue if I feel like it so if I want to match something that's already on the slide I want to make it the same color as my arrows I just click on that and it makes it that color so that's how you use the eyedropper so we've got page counters we've got next and back buttons we've got table of contents so the last of the utilities I want to show you is the menu feature and back on our mock-up that's this home help exit so you have to decide what features you want of course that decision should be made first and then I'm going to use the menu tool add menu and this is a big one so let me expand this out so we can see the whole thing so what I want to do is the menu name here is is the name of the the whole menu so we'll just call it menu and now we want to add the individual items so the first item will be home and then for each item here you have an action panel so we'll want to go to the first page in the title I like to add separators between them so we'll add a separator just a little line I'll add a new item and let's call this resources what I often do when I do resources that will all have a pop up page that it goes to in that pop up page gives descriptions of all the resources but what if they're pretty straightforward I can even have a sub menu right here so with this one selected I'm not going to use an action instead I'm going to add a sub item which makes this then a drop-down menu notice if I go back to resources now my action is gone because I've said make it a drop-down menu so the first item let's say we're going to have a glossary and so my action would be to go to that page it doesn't exist so I can't set up the action and then if I want another item I don't add a sub item because that would be an item under glossary so this can be a little confusing at first so with glossary selected if I do add item it puts it at the same level as glossary so that's aligned so here's my other one and we'll call that will call that reference guide we'll spell it right we'll really spell it right and then that action would be perhaps to launch a program or a document okay I don't have such a document so we'll just go back to none so now I want to go back to the main level so I'll click on resources which is at the main level and say add another separator add another item we'll call this one exit and we will make this exit title now we have a number of layout options I won't get into all of them but do you want it horizontal or vertical all sorts of color choices so lots of options there that you can play around with so we will add that here's what it looks like put it over here maybe I'd probably match it with the blue background and give it white text so that it blends in a little bit more and then we'll take a look so I can click home resources becomes a drop-down menu and then exit so that's how you use the menu feature which is really nice because you can you set up pretty much any action you want so that's most of your utilities let's stop and look and let me take a look at some of the questions okay there's a lot of them let's see where I left off okay we've got a question will the progress bar work when you have a lot of branching in your course no and neither will page numbers if you're going to it depends upon how the branching warps for example simple branching you might be able to work we seem to be doing a lot of time and attendance program training new systems for time and attendance and very often there's a separate module just for supervisors so there I would set up page numbering per module and at the end of the first module which is for every one that was set up one of ten etc nine of ten ten of ten and then there's a button where you either say I'm not a supervisor and you go to the end or yes I'm supervisor you go to the next module which is a new one of 9 2 of 9 3 of 9 so there if it's module based branching you would just do module based numbering but with most with complex branching you don't know how many slides a person's going to get potentially or maybe you do but you may have to do it manually for example if I have a customer service scenario and everybody's gonna get 4 questions but they're slightly different well I can still manually number one of two or four three or four and do it manually but you can't do it automatically in a progress bar will be very confusing it's the page counter 508 compliant yes it is it's basically just reading variables and anytime you read a variable that is 508 compliant and so they will be able to access that information through a screen reader what's a good method for adding hover text I'm not exactly sure what that's referring to but let's say I wanted to have a little hover over here like a little tooltip that says this is next or back I probably wouldn't even make it hover if I feel like it's unclear I would probably just add and Here I am on page one again and keep doing that today I might just call it next and just put it right under there to always be present I don't know that I would I don't know that I would make it hover personally okay and then let's see example of how to import a fly paper Camtasia into the project unfortunately that's going to be out of scope of this project since we're focusing more on how to design an interface but I know there are some other courses in the inspiration web but Wednesday archives that can probably answer that question well I've got some questions about how to create a custom panel of colors which we'll get through in just a minute do you need to add an exit to your content can you just close it in the browser window I like to always put an exit for two reasons number one some people don't understand that all you have to do is close the browser if there's no exit button it freaks them out so it just makes it a little more user friendly the other thing is that with some with learning management systems it's better if they exit the course properly with the formal exit course our exit title action so just kind of a cleaner way to do that okay we will we'll talk a little bit about how to save this as a template when we're finished and I think I'm going to have to move on wow we've got tons of questions I'm going to do the best I can to answer those we're finished but I want to make sure I get through the key teaching points first and then we'll go back to the Q&A okay so we've got the basic elements of our structure and our utilities so let's talk a little bit then about page design I personally don't do a lot of here's my template for this page layout and here's that page layout I like to be a little bit more flexible than that but there are certain things that you do want to do for consistency and for saving time so when I do my interface design in addition to the interface I also look at some design standards for example I might put together something like this where I pick three up to three fonts one for a heading one for body copy and one for maybe an accent that's a little bit more fun I pick some treatment such as colors if I'm going to use a shape here's the gradient and if I'm going to use a picture here are the two effects that I'm going to use so it's kind of like if you've ever gone to an interior designer or if you've ever been at a hotel where they have that poster board in the lobby saying this is what our new hotel is going to look like and it has these little swatches you know here's a little scrap of this fabric and here's a little scrap of that fabric that's kind of what I'm creating here is these are the design standards I'm going to use and if you put something that like this together here's what I recommend you use where is it here we go one is the three font rule generally you don't ever want to use more than three fonts in something unless you're a trained professional do not try this at home you want something that's a little bit heavy for a heading you want something that's very simple usually a sans serif meaning it doesn't have the little pointy edges at the end for your text very very simple on your text and then if you want to have something a little bit funky here and there for an accent used very sparingly you can if you'd like more information on the three font rule we just wrote a blog one or two weeks ago on our site which is eLearning uncovered calm that explains the three font rule and some other tips for working with fonts and then also the three color rule you don't need to use every color Under the Sun it will be more professional and less work for you if you just pick with three colors and stay with them one should be light light enough that you put dark text on it one should be darker that you can put white text on and then an accent color for a little bit of fun and that you don't have to worry about whether white or dark works text works on it so three colors can give you what you want once you've made those decisions there's some things you can do in lick Torah to make it easier for you one is to set up a custom color palette so let me add a text box or let me just add a shape here to get us started going to edit that so wherever you are on a fill color whether it's to fill a shape whether it's your text any color menu you can go to custom when you're in this you can enter in your RGB values or you can use the eyedropper normally if you're working with a corporate color palette you'd have the RGB values so let's say we're looking at 50 50 and 255 for our blue then I can click Add to custom colors and so what that means is anytime anywhere I'm on the color menu and I go to custom there's my blue I don't have to refit three I don't have to redo it over and over again similarly you can do that with texts via text styles which is this menu right up here I think I have to be on a text box for it to work there you go I have a lot of them already set up us I've got a couple of different clients that have different needs so that's why I have so many so what you can do is just like you can in word is you can set up styles so for example I'll have a new one and we'll call this rqm heading so anytime I have something big important I want it to be Arial rounded bold 16-point with this wonderful color I just mixed and that's called rqm heading and there it is notice you can import an export style so if you're working on a team you can share those I will select that for this and here is my heading so that way you can apply that style throughout the course without having to remember what font and what style you're working with so those are a few ways to do that another thing I'm going to do so those are general in general these are the colors I'm going to work with in general these are the fonts I'm going to work with you always want to decide that but then there's also certain page types you're always going to want for example I put a few things together here in chapter 2 for example perhaps on each module you're going to want to have some sort of module title you get rid of some of the stuff that I put on the interface so let's say that this here is going to be my module title so once I design that I can use it over and over again so I'll want to save that page probably as a library object now normally I do a prototype for our clients so that we like we like the design we know it works we know it works on their computers and with their LMS and then once we have that prototype we build the course that's generally when I make my library objects is after the prototype is approved and what I do is I go through and I strip out specific content so I make a copy of my file and I strip it out because I don't want to save the library object saying module two setting priorities because what if I forget to come back and change it so I'll do module number xxx and I always use xxx that way when I'm done with the course I can do a global search for xxx and remember then find out if I forgot to change anything I also before I save it as a library object I like to name everything really well so this will be my bottom clocks if you're going to use it over and over again you might as well have it right the first time clocks this was 508 obviously I want to do some alt text and put them in the right order now when you save a library object you can make it just about so for example if I wanted to save the whole page including the page itself I would click here but if I just wanted to save the elements that go on a page I could do that if I wanted to just save the clocks I could do that so you can do everything from an individual object to a couple of objects to a full page to several pages to a chapter you can make it as big as you want so here I want the whole page I'll go to tools library object save the current selection as a library object I'll call this module title 2 then later I'm in chapter 1 I don't have a module title so I will go to tools library object insert module title 2 and there it is so huge huge time-saver there so what might you want to make a title page maybe an objectives page maybe a closing or a summary page like we use this style all the time where you roll your mouse over each objective to get a summary so I could say this page is a library object as well then the other thing I will almost always do is I will create a place for pop-up pages at the end of my course so I'll put a chapter at the very end we'll call it pop-up pages and this will be for anything that needs to pop up the answer to a question the definition to a word more information and so there's a couple of things I want to do on these pop-up pages one is I want to make sure that the student can't navigate to this so on the very last page of my course I need to make sure that I disinherit the next button I usually just do that at the end because what the next page is may vary here I'd have to disinherit the word next also because we don't want the student to go from the last page next to your pop-up pages so that's one thing I'll do the next thing that I'll want to do is I want to make it they don't want all the interface elements these are pop-up pages I don't need my logo in my neck stand back in fact want them to be confusing so I'm going to inherit no objects from my parent back on the general tab I don't want to include this in the table of contents and I also want to make it a little bit smaller I think students should know they're in a pop-up window and if it's the same size as the course they may not realize they're in a pop-up window and that the course is still there so instead of the default I'll just make it about 200 pixels smaller for now you can decide how big you want it to be even if it's just 10 pixels each way there we go we have a smaller page that's a blank canvas and then each pop-up page just like that I can put certain things that are going to be on every page for example I might want a close button I'm going to put that down on the end and then each individual page I can still go in and make this one bigger or smaller let's say I just need a little definition I don't need something this big we're gonna say it's gonna be 300 by 200 okay but notice what that did it made it so that my close button is gone so let me undo that and show you how to fix that by default objects are measured from this corner how far over how far down when you go to the position and size tab 708 over 510 down instead check these two boxes here which is measuring it from the bottom corner so it's 42 up and 42 over and 39 up so now look at what happens if page 2 needs to be little it's going to measure from the bottom corner so it will still be there so that's a big that's that's a nice handy trick to do and then if I have certain types of pop-up pages I can make a chapter or a section in this for example let's say that we have lots of bright ideas throughout the course and so we'll have a whole section just for bright ideas I have a graphic that I found that's going to be on all of those pages so that's gonna go at the section level we'll add a text box that says it's bright ideas and we will apply our text style heading to it and probably I'd make that bigger I won't worry about it being exact but because those things live at the section level it means that any page I add to that section will automatically have those elements on it okay now this whole thing I've done my interface I have a couple of sample pages and I can save the individual pages as library objects but the other thing I want to do is just save the whole thing one of your options on the file menu is to save a title as a template that's not what I use the reason I don't use that is because that only saves your title level properties it's only gonna save your interface elements but I want to save my pop-up chapters and my summary slide and my module slide and all of that structure so I'm just gonna do a straight save or maybe I'll export it to a zip that we put on the on the shared Drive you just have to remember that every time you open it you have to do a save as to make your X's quarks and then open it again and do a save as to make your time management course so you don't corrupt your regular one and that way everything will be saved okay so those are some of the major elements for creating your interface both in terms of usability technical considerations such as size graphic design and branding and then how to set yourself up for good usability reusability using textiles using your color palette using library objects and then saving your whole course so we've got a few minutes left I'm going to go through the rest of the questions and answer as many as I'm able to in the next few minutes what's the biggest screen size that can be used for Elector title I have absolutely no idea I have never pushed that window I've I know I've made some very tall screens like a glossary that just Scrolls and Scrolls Molly if maybe you know the answer that you can chime in that I think the bigger question is what's the biggest screen size that you should use and again unless you're specifically going for scrolling you want to make it something that's going to fit on most people's computers let's see the next question can you build a template that imports HTML I'm afraid I don't understand that question what you're what you're looking to do you can insert an external HTML object and that's part of any course so you know you can build that into any course like you would any other feature do you normally your name name your pages with something besides one two three four definitely normally not for my template but yes if this was on juggling priorities I would name it that especially if you're going to be using a drop-down menu so I want to do that for me because it's going to be easier for me to design the course but then also that's what the student is going to see in your table of contents so you definitely want to change that in a real course good question you guys have good questions okay why do you save to a file when bringing into PowerPoint and not just copy that's a great question also and and I did actually with this with this light bulb it's just a matter of there's two issues one is fidelity and one is file size so some time and the other is do you want it saved externally just for other uses so if I save it as a PNG a graphics file then I have it for other purposes as well let me just try a straight copy and paste let me get out of edit mode and where did it did not oh well I think because it's grouped it's not going to it's not going to copy there we go yes it is and you know what the fidelity is pretty good however it's not transparent when I saved it as a graphic it was transparent so I could have put it on a slightly colored background so that's generally why I save it as as an image first transparency and usually it's just a cleaner image with things like this graphic the light bulb I just did a copy-paste generally when you paste an object intellect aura like this it saves it as a bitmap which is one of your largest file sizes you don't ever want to do that instead I can go to edit paste as and it will let you pick it sometimes you don't have a lot of choices like Torah has to decide what it's able to accomplish just remember bitmap equals bad it's huge it's 10 50 times bigger than some of the other formats so I can try bringing it as a jiff it looks like I lost a little quality that way I probably would try it again as a JPEG okay great questions great questions how can you change the default font on your site great question on either your title level or your AU level if you go to the background tab you can pick one of your styles as your default so you'd have to set up the style first and then select it here from this menu and by default that means the minute you hit text box what is that going to be formatted for and so that's what it will be for the whole course again that's either a title level or the AU level on the background tab what's your default text style okay we have someone asking what are your thoughts on video menu options if you can maybe chime back in I'm not quite sure what that's referring to so if you could maybe elaborate I'll see if I can get to that question okay so the next question is the pages and the pop-up chapters behave differently in that when I leave such a page I go back to where I was that has to do with the fact that it's a pop-up window and I one thing that might help us if I showed you how to make them but for those of you who may be newer to like Torre you don't know how to get to them now how do you make them pop up so let's just go to a page and we will add a button let's see I know what we'll do we will add a little Icahn so we've got some content on this page you may have this little icon that we've trained the student to know means hey click this button to get a bright idea so I'll add an action to that on mouse click go to a specific chapter section or page and then I'm gonna pick bright ideas number one and I want to open it in a new window that's the key if you want it to be a pop up you have to open it in a new window apply so now when I click this guy there it is there's my pop-up window and so it comes back to the other page because it's where it's a pop-up window so that the underlying course doesn't change you go back to where you were that's just how the pop-up windows function because it's a separate window okay okay next question will this webinar be available for future viewing yes it will they tell me that sometime next week it should be up and can I share the PowerPoint with you I believe yes I will probably have to strip out a few things graphics that I'm not able I don't have license to distribute to other people I'm gonna have to work with Molly there electorate to see if there's a way to get that out to everybody but we will work on it let's see is there a way to save your custom color panel so that you can use it in other courses my initial thought is I don't think so but let's just run through a quick test and see so we will go to the menu from file oops sorry we want to edit hello let's try this again edit custom I'm not seeing that as an option so I don't believe that is available so you would need to write down your RGB equivalents and then each user would need to set that up okay it looks like I have time for one more question oh yes I start with the same one is there a way when you create a custom color to not overwrite the one that's in the first square so here's what that means if I go to custom I go to custom remember I added this blue so now we also want that really light yellow color and of custom color look what it did it just overrode it you have to think of it first okay so if before I mix my color I click on this get my blue add to custom color it'll overwrite that one or if I want a blank one but you've got to click it first mix your color now we want a nice subtle green add to custom colors so that's how you would get around overwriting the same one over and over again okay well it is 2:30 so that is one hour of jam-packed content on how to work with interface designs and reusability and if I could leave you with just one thought just remember that content is king and impressions are everything you don't want ugly you don't want your interface to overwhelm your content you want a nice balance where your content is primary your utilities are available and easy to use but not overpowering have fun making some new designs

One Comment

  1. Milica Stepanovic said:

    Its great, thank you for this tutorial πŸ˜‰

    June 27, 2019
    Reply

Leave a Reply

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