 For development of e-learning content, it is often asked about the visual communication strategies that need to be followed. This is a classic question of form over function. What is the message and how to show this particular message, how is it delivered become an important and integral part of this discussion. What we have kind of zero down on is that there is no need to give importance to any one of them in particular. However, giving less importance to any one of them can also need to noncommunication. Having good quality content presented in a bad format will result in noncommunication at the same time bad content having a lot of jazz of visuals will result in chaos. Therefore, it is kind of agreed upon that content should be governing the decision of what way it should be presented, which should be supported by good and supportive appropriate visual and a strategy which will enhance the content communication. Let us just get slightly deeper into that and see some examples of how we can have various types of content presented in the online format and what are the affordances of the online format which make it unique in terms of the presentation. So, here we are assuming that we have the content which is correct in all aspects which is well thought of. We have appropriate pedagogy for it which will do justice to the audience and the objectives that we have set in place and we also know the technology that we are going to use. For example, whether it is going to be online textual ebooks or videos or it is going to be mobile technology or kiosk based interaction, it is based on web, it is based on static servers all these technology decisions are taken care of and when we come to a point of actually designing something for that what are the challenges involved. So, we will just look at some of the principles which will help us to take a informed decision about that. So, let us get going. What we have found out is that the domains which affect this particular decision making are distributed over four important aspects. The first and the foremost is the graphic design or what we can call is a visual design. We have multimedia design which talks about the moving or the non-static graphics in terms of videos or animations and various other things or motion graphics as it is popularly called. The third one is the animation which is completely digitally created motion as against the video captured motion that what you are seeing now and the fourth one is the interaction design which is when you assemble multiple mediums onto a platform which is accessed digitally. It could be a desktop or a website or a app which is created for mobiles and handle devices or like I said kiosks which could be touch screen and so on and so forth. All these domains actually have certain amount of role to play when it comes to the final delivery and we would just like to make it concise by picking up important principles from each of these domains and what is boils down to is these four important aspects. The first one is the coherence which actually comes from multimedia and which talks about avoiding extraneous elements. I am sure you will have a chance to look at some of the examples of that in another content which is released in this course. We will have to talk about affordance because when we are entering into a digital domain then the interaction with the content and the user is through the appearance of that content and by affordance we mean that the elements which are present on screen suggest the possible interactions. For example, a button demands to be clicked or a slider bar demands to be dragged in order to change values and so on and so forth or a text box is pleading to be entered with some text. Now, all these affordances are the gift of online medium therefore we need to look into that in a very serious manner and followed by couple of important things such as feedback because when you are in online mode you are actually accessing this content in isolation. So you need feedback in order to modify, rectify or get a answer to whatever you have done with the system and that is given mostly through visibility or constraints which are the principles from interaction design and finally the overall appeal which is coming from the graphic design principles such as focal point, proximity which parts are nearer to each other and why or continuation and similarity because it should give a cohesive picture to you when you are trying to access multiple content in one go. So without wasting more time let us just start getting into some of the examples. So looking at proximity as an example of visual design in terms of online content for example I have here is a tabbed browsing option. So these tabs here on the top are chunked in a way that because they are really nearer to each other the user knows that these are the whatever 5 or 6 options available to them in order to access this content. So those could be given in use in types of icons or could be words written there but the user knows that this is different than the rest of the title bar because this is place where I can look for options. Now all these options being together in close proximity gives a feedback or gives a message to the users that they perform a similar function and that is where another example can just be useful in finding it out. So the example on the left hand side you see that three slider bars are one below the other with brightness, contrast and volume together. Now volume and brightness contrast actually affect two different outputs. Volume affects the speakers and brightness contrast will affect the monitor but because they are together it actually misses the point. And therefore we can think of splitting the volume thing in completely different location or in another window and just keeping brightness contrast. Also note that in the picture on the left the distance between the words brightness and the line or the line and the word below is almost same which is creating a problem about which particular icon is for which particular aspect. As against on the right hand side you see that the slider bar and the content is so nearer to each other that people have no confusion about like which is the one for brightness and which is the one for contrast. Now going ahead there is a really needed or really important principle of similarity because in our online content scenario we would be going across multiple screens one after another and if the particular treatment given or visual treatment given to every screen is different then users will be confused about the interaction with the content. For example in this case what we see here is a gray box which will show all the numerical values. Now there is also similarity in terms of the decimal factor used for volume the two boxes for volume and the weight which is having different numerical values but all of them are aligned in a particular way and every box which will have numerical values has a gray patch. If you see the screen here you will see that the values which will keep changing will be shown always in a gray box. Now this is how the similarity factor helps because then I know as a user that I have to look out of those gray boxes which will tell me about the specific cutting energy or a specific friction energy or the specific shear energy. Now these things are crucial when it comes to communicating. The principle of visibility is important because it will show things only which are relevant and necessary. In other words things which are not necessary or non-relevant at that point in time should be either hidden or shown on demand. Now look at this example we have a strip of gray boxes at the bottom and one of them is green while others are gray. It shows that during the entire journey of that particular animation or a video we have reached up to this point and this green is currently going on. Now if I want to know which one is this particular module which is going on or the next module which is going to come over I can just hover my mouse on that and I can see that the next module coming up is components of a linear compressor. This is the additional information I may want to access and only when I want it it will be made visible and otherwise it will not be shown and that will avoid clutter and kind of the mess which is created otherwise. This also helps that the user can concentrate on the objects or the animations within this particular frame and not get carried away or bogged down by the unnecessary content which are shown. So that is the visibility principle. Moving next I have taken a small example from a mobile device because that is again relevant thing where we actually access e-learning content or electronic content. As you see in the first example search is denoted only by the alphabet S which is very very difficult for people to understand and therefore the particular user will not be able to go through the process easily as against in the second picture which is at the bottom here. You have magnifying glass icon also with a highlight of blue which will tell you that now this is visible because you have typed something text some text inside this box and now this icon becomes blue after you type something which tells you that now is the time to use it. Now this is where the visibility makes its case very very clear about how to use it. Immediately after visibility comes the important principle of feedback and especially in online like I said because the users are in isolation it is very important that the system provides a immediate and constructive feedback to the learners. In the case what we see here the example shows that the answer given selected is wrong and denoted by a standard color scheme of red and green. However the feedback is elaborated at the bottom which can be read by every user in order to know to move away from the wrong answer to the right answer. Just giving that okay this is wrong and this is right will not happen or will not convert into learning instead if we can see that the wrong answer is provided with a constructive feedback can result into learning factor for the learners. The feedback can also be seen in very interesting way for example if you see this particular image number one where the user submits some solution for the assessment and after the submit button is clicked the boxes become empty which is not telling me whether the submission is accepted or I made some mistake in submitting it none of these things. On the other hand the moment I click on any one of the choices I can see that there is a feedback at the bottom which says that okay this is the answer is wrong or right a green color icon is displayed there. So these things actually help us in figuring out the feedback given by the system. Similarly the feedback is often clubbed with constraints why because the moment the user decides to click on something the system should tell them about the clickable and non clickable options also in order to avoid unnecessary clicks and navigation ideas. For example when you when I open any system and if I have not changed anything in the file obviously the save or revert to saved options are going to be disabled because I have not made any changes to it. Now if that is on then it would rather mean that it is going to be do redundant settings or redundant processes which are not required. Therefore these are grayed out. Now this can also be seen in interaction design where multiple buttons like I said till you type some text the search button is not enabled only after I write even one alphabet there you can see that the search button is enabled and then the user gets a feedback that yes I can now click the search button. One principle which is very important is the affordance principle which tells you what is to be clicked and when. Now if you look at this example the backward play pause and forward buttons here have absolutely no response or no feedback to the learners whether it is clickable or non clickable. On the other hand if you look at the buttons on this example where the pause is red right now and it has explicit labors like play pause record and with a icon I can relate it to the hardware data players or CD player or cassette recorder or any kind of player which has these standard buttons and that is very easy for me to get the meaning out of these icons and act accordingly. So a clickable button gives you a chance to interact with this system in a better manner. Consistency is equally important because once you are going from one screen to other and so on and so forth it makes it very easy for the learners to realize that they are in the same chapter or same book or even same course for that matter. Whenever we see that for example in first screen we have a blue button for back and in the second screen we have a green button for black it just breaks the consistency of the learner and they are confused about even the shape has changed because from circle it has become a square the position has changed from the bottom left to top right. So the learners feel that maybe they are in wrong place now. On the other hand if the play pause button remain at the bottom left all throughout various screens of a particular animation then the learners know for sure that they are going through a particular series of screens or animations or videos courses whatever you can call it. Now this is the consistency principle. These principles are not comprehensive enough we have not covered each and every principle which is prescribed by the experienced researchers in that area. However we have selected a subset of that to show you examples of some of them which are most relevant for creating online e-learning content. We have created a small curated list of various principles which have impact on creation of e-learning content.