Graphics for Learning

For a recent customized eLearning project I proposed an idea that I was really proud of and excited about. The web based eLearning project was a three minute Flash video with an education theme. I suggested that we use a blackboard with chalk illustrations. As pumped as I was about the idea I also knew it was going to be very challenging. How exactly was I going to make believable chalk illustrations in a custom content development Flash movie?

I knew I could use real chalk to draw the illustrations on paper and scan them in or create a custom brush in Photoshop to make the graphics. However, neither of these approaches was remotely ideal for a number of reasons that I won't get into. I knew that I needed a vector chalk solution for purposes of animating and reduced file size. And in a perfect world I would be able to create it all within Flash.

Several hours and several cups of coffee later I came up with a method that I was pretty confident about. I had three solutions to accomplish the chalk effects. The most straight forward approach was in creating the outlines of the illustrations. I simply drew using the Line and Pen tools. Then I created a custom stroke based on the "stippled" preset. Since the illustrations are quite detailed I needed a thin and mostly solid line to clearly form the objects.

Filling the chalk outlines was a much different story. To achieve the most realistic "sloppy" fill effect, I created a simple small circle, filled it with the desired color I wanted for the chalk and gave it a 25% transparency. I then saved it as a new graphic symbol. I repeated this for every color I intended on using in the movie. Then I selected the Spray Brush Tool, a new and really cool tool in Flash CS4, and chose my new symbols as the brush shapes. After lots and lots of tweaking I came up with the below results.



Though this seemed like the perfect solution, it was not. Since I was using custom symbols it greatly increased the file size and would not be able to be animated. So, for other smaller, animated illustrations I needed to come up with an alternative, less processor melting solution. Instead of using my custom symbols with the Spray Brush Tool I simply used the default vector shape. I then painted on three or so different layers and adjusted the transparency of each to create the effect of pressure and texture. With a combination of these three techniques I was able to produce a convincing chalkboard effect that gave me great flexibility.

A couple of weeks back I wrote a post announcing our new custom content development course demo. Our previous application simply wasn't sufficient for organizing and displaying our growing portfolio. Well, I'm proud to announce that it is now developed and live on the site. Click here to see it! I thought it would be helpful to step through some of the features our custom content development  team has built into it.

The first thing to note is that the demo is hosted directly in our current web site. No longer are there pesky pop-ups and multiple windows to sort through. It is a single self-contained application. Along with our growing customized eLearning portfolio came great diversity. We felt it was vital to first acknowledge and organize this diversity. As you can see here, we have filters for sorting on three different criteria. The first option is based on production level. These range from Rapid eLearning to very rich High Level. The second filter option allows the user to sort based on the subject. And the third is reserved for industry.

Once you have selected your desired criteria, thumbnails of each course sample appear below. The details of each sample appear to the left when the thumbnails are rolled over. When you select a sample by clicking on the thumbnail the course appears directly below. And that's it! Simple, clean and concise. Happy browsing!

From the time we're old enough to learn history, we've been inundated with a barrage of events and dates and confronted with the exhausting task of burning all to memory. The ides of March, 1066, 1492, November 11 of 1918, and December 7 of 1941 - thanks to the diligence of a graying primary school teacher, you're probably able to blurt out the proper corresponding event to each date like an automatic reflex.

Upon entering secondary school and institutions of higher education, the focus turned to calculus equations, mathematical statistics and head spinning chemical formulas. And it never seems to end. Once we graduated from the classroom and entered the workforce we're presented with whole new modes of memorization, very often in the form of cryptic acronyms. In her job, my wife even has an acronym, TLA, to describe three-letter-acronyms.

Supply chain is no exception. At KMi, our custom content development team has taken many different steps to make these daunting customized eLearning subjects as clear and painless as possible to learn. The example below is from a course on Incoterms or International Commercial Terms. In order to explain FAS, Free Alongside Ship, a real-world example is presented to the learner. However, the example isn't simply enough as there are a slew of dates and details involved. To make things easier, we've illustrated every step and date in the process of shipping a container of low-sugar jelly from Poland to Japan. The illustrations detail each transaction, provide a visual timeline and list the responsibilities of both the exporter and importer. This particular animation is accompanied by complete audio narration of the whole process. If only we had such customized elearning tools when we were in grade school attempting to memorize the chronology of the American Revolution.

I can't believe it's been a couple of months since we completed our medical simulation course and I haven't followed with an update. In two previous posts (post 1, post 2), I explained the new challenging customized eLearning project we were undertaking, so I won't repeat the details here. Actually, it's nice to give the course some time in the field and to receive feedback before we make any judgments. So far, all indications are that it's a raving success, I'm proud to report! Our eLearning content development team worked very hard to develop one of KMi's most unique courses. And it's possible that nothing of its kind has ever been developed before.

After much deliberation, planning, tweaking and time spent thinking "out of the box," we came up with a final product that uses many different forms of interaction. In the role of a nurse the user is asked to perform a medical procedure from the moment they receive the physician's order to the moment they sign off on all the paperwork. Tasks range from determining the valid clinical reason for performing the procedure (if there is one!) based on randomized fictitious patient records, properly filling out and signing forms, performing proper bedside etiquette and hygine, to physically assembling and using medical equipment. The interactivity was so precise that learners will even need to determine which hand they need to perform specific tasks with.

In the end the user is put through a very thorough (if not rigorous) array of activities and actions that tests their competency on every level. We wanted the experience to be as close as possible without actually being in a patient's room and we're all very pleased with the final result. We anticipate that this will open new and exciting doors for KMi and for continuing and perfecting this style of high-level interaction.
 

The other day I found myself creating new buttons to add to our already swollen eLMS (KMi's LMS Learning System) buttons library. When I was finished, I paused to appreciate that I had finished the task in a matter of seconds, not minutes, and expended the smallest possible effort. While creating buttons for customized eLearning has become very efficient it's good to slow down every once in a while to assess even the most familiar of actions. For example, often I'll stop and simply reflect on my drive into work. Shockingly, the majority of the time I can't remember details of the actual drive. But I know it happened because here I sit under the soft fluorescent office lights. Try it yourself. After making hundreds of glass buttons for our custom eLearning solutions, it's become second nature to me, just like commuting to work.

Once the new cool fashion that stylish trend-setting monsters like Apple told us was the pinnacle of good digital design, the glass button has remained an industry staple and has had a longevity that has likely surprised everyone. Of course, there are infinite variations of the glass button which probably contributes to its long-legged success. But its bones are still the same. Let's take a minute to appreciate the basic three-step automatic muscle memory required to create such a button.
 

It's official - we've outgrown our current demo home. While it has served us, and hopefully our clients, well we're expanding in a new and exciting way. As our client list grows so do the industries we service, the types of content training and the production levels. Wouldn't it be great to simply and easily see samples of our work based on all these specific criteria? Well you soon will be able to. Our custom content development team is creating an application that will allow viewers to instantly filter our full list of samples based on 1) Production level, 2) Content Type, and 3) Industry. Interested in high level Compliance and Legal training in the Biotechnology and Pharmaceuticals industry? No problem! Once a desired list is selected, users will be able to instantly view the customized eLearning course samples within the same application window. No pesky pop-ups, no redirects and no passwords mean no headaches. Our goal is to make our catalogue of course custom eLearning solution samples as effortless and accessible as possible.

Stay tuned for the launch of our new course demo which is only a couple short weeks away!
 

Yes! We do presentation material. Our eLearning content development team at KMi is very diverse and very talented at producing engaging and rich presentation videos, animations and demonstrations. Maybe you're looking to promote your eLearning courseware or simply show it off to envious parties - we can help "ooh and ahh" them.

We are also very flexible in our media distribution capabilities. Maybe you'd like to distribute it on the web or projected live in a board room or in front of hundreds of attendees at a convention. Our developers can convert your PowerPoints into rich, professional multimedia presentations. Just like our custom courses we can incorporate graphics, photos, music and professional voice talent to develop the most engaging experience possible.

The example below is an eLMS tour to demonstrate the powerful capabilities of KMi's learning management system. This particular presentation is intended to be distributed through many different channels to reach a wide ranging audience.
 

We recently finished a customized eLearning project covering precise medical procedures for an audience of registered nurses. From the beginning of the project we first addressed the intended goals of the course with the client and then had challenge of determining the best method to accomplish the goals. We spent time defining terminology and exploring any technological limitations that the nurses taking the course might have. We asked custom content questions such as; Will presentation of information be enough to accomplish our set goals? What level of interaction can we ask of the audience?

There is no doubt that allowing the user to perform the procedures themselves will be a great learning advantage than asking them to be simply presented with the custom eLearning material. Rich and deep custom content development interaction was going to be the key to great customized eLearning.

However, our custom content developers would need to strike a perfect balance. To succeed we would need to develop an interaction that is useful and necessary yet not so complex that it takes away from the subject matter. For example, simply prompting the user with a statement of what they should do next - "Now click the sterile gloves to apply them." - would be leading and would add a simple click interaction that contributes none to the learning experience. It's simply "busy work." Conversely, overly complex interaction would preoccupy the user with performing computer actions that are not related to the subject matter - "To put the gloves on, left press and drag the glove to the left hand then release." After all, the goal of the course is to learn the medical procedure not how to play a computer game with advanced mouse and keyboard commands.

Our eLearning content developers' solution was to ensure that the medical procedure was always the focus of the course. We recapped the previous step and asked the user to correctly perform the next - "Good! You have picked up the syringe. Now what should you do with it?" With the syringe in hand they will have an infinite number of things they can do with it, though only one is correct. In the screens below, the user has clicked the tip of the syringe to the proper port and, by simply dragging their mouse, has fully depressed the plunger.

The customized eLearning interaction is not linear and the instruction is never leading. The user must think about the procedure and perform it. Also the interaction is never so complex that the user struggles perform advanced computer actions.
 

Imagine you've been given the assignment of building a wooden cabinet. As the carpenter you own all the tools and skills necessary to construct the object. However, if you don't have a finalized design or the wood, hinges, knobs and other materials, it would be nearly impossible to produce the furniture piece. Similarly, as customized eLearning developers we aren't very good at our job if we don't have the content we need and a blueprint on how to use it.

Usually it all begins with branding. Our custom content developers need to be in touch with branding departments in order to design a customized eLearning product that meets all of the client's requirements. We need to be provided with official logos, symbols, icons and other pertinent graphics. Often companies have graphics and photograph libraries that are invaluable to our designers.

However, the single most important item to our eLearning content developers is the script. The script is what gives us direction and allows us to understand the project and its goals. Before any work commences on the project we must have a finalized script in-hand to work with. Our developers and designers should be the final recipient in the script writing process. Many times we have received new scripts after we have begun work on the project - and sometimes many times during the development process. Nothing is more damaging to a project than working with an unapproved or incomplete script. It often means that our custom content developers do twice the work necessary, which means twice the time and often twice the cost to the client. It is in everyone's best interest that things go as smoothly as possible. Just like our clients we only lose when projects are delayed or drag on indefinitely.

Very often, companies making the step to internally harnessing the awesome power of knowledge management are new to the process. Sometimes, these new duties fall on the shoulders of already busy individuals and other times those in charge struggle to get the support they need from other participating departments. While it is important to enlist the support of all beneficiaries, sometimes the chain of contributors becomes so convoluted that it is no longer manageable.

This can be a nightmare for a custom content development team. We've seen chains of command so long that entire projects stall-out. Review processes get passed along from individual to individual and from department to department until it's unclear who has the ball or even what court it's in. From a designer's standpoint, halting production not only delay's deadlines, but runs the great risk of inconsistency and redundancy. In the past, we've seen reviews and evaluations of scripts come in months after a project is completed and in use in the field. Obviously, this poses a great problem for those who have already received certification in a course.

While lack of clear project leads can stall out production, too many can be equally disruptive. If two or more coordinators are communicating directly with our eLearning content developers without properly communicating among each other then disaster is bound to happen. The last thing we want to have is surprised or confused clients. An example of this communication breakdown is when a project coordinator gives unchecked authority to subject matter experts. While the details of a custom content development project are accurate, at times the larger goals of courseware are lost and the final product falls short of original expectations. Too, correcting miscommunications can drastically delay completion dates and add great expense.

Before any work commences on a customized eLearning project, it is invaluable to our eLearning content devlopers to have firm project liaisons with clearly defined duties and to establish other contributing parties who understand what is expected from them.
 

Imagine being in a foreign country where you don't speak the language, for instance, Paris, France. You're lifelong dream has been to see the Mona Lisa at the Louvre and the only thing standing in your way is successfully obtaining a metro ticket that will get you to the museum from your hotel. Standing at the station kiosk, your heart begins to race and your palms dampen as you frantically attempt to decipher the foreign phrases. Well, the Paris Transit Authority understands these potential complications and have set up a system of translated instructions and universal icons to guide foreigners through the ticket buying process. Without proper guidance it would be nearly impossible to know how to properly interact with the computer, possibly even for native French speakers.

Similarly, our custom content development team needs to develop clear, concise and intuitive instructions for effectively navigating through a customized eLearning course module. For instance, in our latest custom content development simulation of a medical procedure the users will perform a number of interactions with the module that range from picking up objects with a virtual hand, to dragging syringe plungers to specific volumes and to filling-out checklists and signing forms. These interactions will require specific mouse movement, clicking and holding left mouse functions and utilizing key strokes on their keyboards. If we don't effectively make the desired interactions logical and clearly presented, then the user will be learning how to operate the module rather than how to perform the medical procedure - and that would be a colossal failure on our part.

Our solution with this simulation was to develop a series of icons that denote specific interaction types that are intuitive enough not to necessarily require a key to understand (though a key will be provided for those who may need clarification). In addition, simple questions and scenarios are presented to the user that will lead them to choose the proper interaction to perform next. If the user can perform an action in the module without having to ask "how?" then our customized eLearning development team has succeeded.
 

Efficiently managing customized eLearning projects from the beginning is crucial to efficiency, consistency and assuring that we develop the best end product possible. Since some of our projects are quite large, responsibilities are divided up among our custom content development design team to be worked on simultaneously. While it may be an obvious practice, using common graphics libraries is an invaluable practice that can save precious time.

In an ideal world, we would create all the necessary graphics for a project before work is even started. But that is almost nearly impossible. We inevitably will need to add and alter graphics along the way. Therefore, we create a single library that contains all of the graphics for the project. Each graphic is saved as a symbol. At any time during the course of the development phase, when we add or change a symbol it will be updated at every instance along the project pipeline.

For example, we had built a learning content development course that often referred to a very specific, step-by-step procedure at many places throughout the module. After the course was finished, the client had made a very important change to this standard operating procedure. Since we had created a graphic symbol of this procedure, we were able to make the change to the symbol in the common library and simply republish the course. We were able to save valuable time and ensure accuracy by not having to go back through the course and manually find and change every instance of that graphic.
 

Over the last couple of days our eLearning content developers have been presented with a challenge that is new and exciting for us. We will be developing a user interactive custom content development application of the very detailed steps of a medical procedure. While we're still determining the level of complexity, the application will teeter on simulation functionality. The heaviest looming challenge of the project is the very constrained time-frame.

Our eLearning content development team has been vigorously meeting with subject matter experts, brainstorming and storyboarding, attempting to determine what final form this interaction will have. The user will be required to interact directly with medical instruments and the patient. Because the objective of the course is correct procedure, there are infinite incorrect actions that can be made. These are every bit as important as the correct procedures. However, getting the steps in the correct order isn't enough to pass this exercise. At times we will present the user with questions where they will need to exhibit an understanding of why a particular step is correct. We also have an opportunity to present the user with randomized scenarios that they will need to understand and apply to the situation. Each time through the simulation will be different for the user.

We are excited by the boundless possibilities presented to us with this project. Incorporating all of these elements together into one comprehensive application will be a very powerful teaching tool and will set a new benchmark for KMi. Below is an early model of the interactive environment. Stay tuned for progress reports and to see how we tackle the obstacle before us.

Have you ever tried to describe something indescribable to someone only to fumble for the right approach and the right words and simply give up the effort by saying "you had to be there?" For example, imagine trying to paint a mental picture of the Grand Canyon for someone who has never seen it in person or in photos using only words. You start by stating the facts. It's a big hole in the ground, a canyon, with a river running through the bottom. Then you simply start spewing words: erosion, red rock, enormous. Expectedly, all you receive are blank stares and a furrowed brow.

At KMi, our eLearning content developers often run into similar troubles when attempting to express courseware concepts in visual terms. That is why we storyboard our custom eLearning solutions. The storyboard is a preproduction visual concept that does wonders for bridging the gap between wacky designer visions and client understanding. We know our clients don't always think like us and we don't want to make the process any more difficult. Our customized eLearning storyboards are non-functioning, static graphics. They usually introduce the module skin design along with rough sketches, low resolution placeholder photos and production labels describing functionality and animated features.

In the below example we can see the eLearning content development storyboard explaining the graphical style and user interaction and then the final result.
 

Very often the custom content development graphics, charts and graphs we receive from subject matter experts are less than stellar. They are usually developed by third parties and have been passed down through the years from presenter to presenter. By the time our eLearning content development team receives them, they have been saved and re-saved so many different times that they have unrecognizable file extensions and barely legible resolutions.

Though it's nearly impossible to recreate every precise line graph and data developed chart, we do have the opportunity to improve the simpler graphics, which usually constitute a large chunk of the material. Our eLearning content developers have outlined a process that utilizes isometrics and other techniques to quickly and easily recreate any number of graphs and charts in a visually attractive manner. Let's have a look at an example.

This is a sample survey that I will use to illustrate the process. Since the results of the survey add up to 100% of those questioned, a pie chart is the most logical method to display the findings. Using some basic math I was able to quickly recreate the pie char. In just a few simple steps I can simply add perspective, color and shadow to create a much more visually pleasing graphic.

While not as appropriate for this survey, I will also demonstrate the bar graph method we often use. On the left, we can see a flat bar graph - similar to ones we receive from subject matter experts. Starting with five simple squares (1), I first use isometrics to create the desired perspective (2). Then, I create each bar based on a 100 pixel high scale. This allows the graph to be exact. After the bars are created I've added color and shading to bring the whole graph to life (3).