Do you see how I see?

One of the first major e-learning projects I worked on (way back near the beginning of this century) was aimed at training oil sands personnel to run a plant that didn't exist.

The facility was under construction and every day several thousand trades people added new parts and pieces to the multi-acre project. As soon as everything was completed, the operations team had to be ready to start turning everything on.

Yep, the operators had to learn how to run the plant before they could put their hands on much of it.

Enter our team and the e-learning project, including proposed 3-D models of the facility so operators could see the finished system as part of their training. This was the best way, it was reasoned, to deal with training on a structure that didn't exist yet.

Beginning with introductory-level learning topics we started creating 3-D models for almost every learning experience we designed, from sky-high viewpoints for locating fire equipment locations to inside looks at the various reactions taking place as heavy oil was converted into product ready for the refinery.

About a third of the way into the project, we started crafting the process operations modules, the real meat of how the plant was going to run. I was reviewing design notes (one of the collaboration features of the dominKnow LCMS) submitted by the client team leader as part of an early module review. One particular note caught my eye; it said something like "These pipes don't look anything like this. Let's get rid of the 3-D."

I called the client to catch up on this. He said the 3-D model we had created in this case looked more like household plumbing than the piping found at an oil processing plant to him. If the images didn't look right, the learners – in this case, experienced operators – would be skeptical of the validity of the information overall. So, let's just get rid of the 3-D images.

Ummm, okay. But how are your learners going to understand how the oil product moves through the unit? Why don't we just use the P&ID diagrams?

What?

In the earliest stages of the project's design, a set of Piping and Instrumentation Diagrams had been created. These were line and symbol-based diagrams, like a logic diagram or a flow chart, that outlined the design specs for the project, such as how different pumps were to be connected in sequence, what the operating pressures and temperatures were expected to be, and which types of valves were needed along the way, for example. The P&ID diagrams had almost no direct relation to the physical layout of the facility or actual dimensions or distances or practically anything relating to the eventual physical appearance of the facility – but they were a visual language that made sense to the operations team. The P&ID diagrams were a very precise way of explaining how product moved from point a to point b.

I won't even begin to explain why we could have made it several months into the project without understanding this critical piece of the client's culture. But the upshot was that for process operations we were able to use simple line drawing approaches instead of 3-D models. And although the visual design was no where near as cool as the 3-D models in the other modules, the learning still happened because it used a visual language the learners were comfortable with and trusted.

The lesson? Not everyone "sees" the same way, especially when it comes to making sense of information in a visual medium like e-learning.

Needless to say, our needs analysis process was quickly adjusted to include identifying such issues when we start working with a client on a new e-learning project.

And our clients get to "see" better learning results.

Chris Van Wingerden is Vice President Learning Solutions at dominKnow Learning Systems.

Visual Design Primer Part 5: Design Resources to Help You Learn More

Over the past few posts we've covered a lot of ground in design principles and foundation ideas like color theory. And we've only begun to scratch the surface!

The truth is, design is a field that is part science, part craft and part art form. And one of best aspects of design work is that you are never finished learning. There are always new ideas to introduce, and new aspects of design to study up on and bring into your own work.

So, if the last few posts have whet your design learning appetite, here are some great websites to help you continue on your learning journey.

Color, Typography, and Design Resources

Worqx.com
This site, the brainchild of Web designer/developer and self-proclaimed 'color enthusiast' Janet Lynn Ford, is a great place to begin learning about color. The website gives a general overview of color theory and provides an in-depth color tutorial. More specifically, it explains how color is communicated, and provides information about color application. There is also a wonderful little palette picker tool for trying out your own color combinations. Be sure to check out Peter Piper's Palette Picker.

Adobe Labs Kuler
This site is created by and for designers--to explore, create, and save color themes following the principles of color theory. You will need an Adobe ID. These swatches can be saved to your Adobe Creative Suite applications.

Val Casey's Notes on Visual and Interaction Design
Designer Val Casey's site on color and design for the web is spare and image-free, but has many links to other sites illustrating the points she makes.

The Principles of Beautiful Web Design
This article by designer Jason Beaird illustrates the design process, defines design elements, and offers tips for inspiration (available as a book too).

A List Apart
A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

Graphic Tools Tutorials and Articles

Here are some great places to go for information, tips, tutorials and other help when using specific graphic and web design tools.

Web Design Library: Designer's One-Stop Resource
This site contains articles and tutorials to help you learn more about using Flash, Swish, Photoshop, HTML, CSS and other tools for web design.

Entheos
This site includes tutorials on using Flash, Fireworks, Dreamweaver, Photoshop and more tools for web design.

Flash Kit: A Flash Developer's Resource Site
Flash Kit includes lots of tools and tips for Flash developers, including tutorials.

HotScripts.com
This site contains scripts, components, menus, and other tools that can be downloaded and used in your work.

HTML Goodies: The Ultimate HTML Resource
This site is full of information about HTML, including tutorials.

Know of any other great web sites that deal with design? Share them using the comments.

Happy learning!

Chris Van Wingerden is Vice President Learning Solutions at dominKnow Learning Systems

Visual Design Primer Part 4: Using Color Theory in Design

In our previous post we looked at the basics of color theory.

In this post we'll look at ways to put that theory to use in our designs, by understanding how to combine colors effectively and how to use color to help us communicate ideas to our learners.


Color Combinations
Good design is about choosing the right colors to represent what you are trying to convey.

Colors are often used in combination, so understanding how people perceive color combinations is important.

Successful color combinations can be represented through an extended color wheel which includes shades and tints.

Color relationships can be:

  • Monochromatic
  • Triadic
  • Complementary
  • Analogous
  • Split-Complimentary
  • Double-complimentary
  • In general, you will pick one of these color relationship types and use it as the basis of your overall design, from the big picture aspects such as background color and navigation layer color to the more subtle course visual elements such as button colors and the use of color for some text elements such as page headers, for example.


    Color and Contrast in Design
    Contrast is the most important element in design: you can achieve contrast through color, scale, texture, shape, and weight.



    The ability to clearly see the subject or words in a design is good legibility, and legibility is a function of contrast. Light type can be placed over dark backgrounds between 35 and 100 per cent in contrast, and dark type can be placed on a light background between 0 and 35 per cent contrast.


    Itten's Color Contrasts
    In his book The Art of Color, Johannes Itten describes methods for color combinations using contrasting properties of hue.

    Itten's color star did not recognize magenta or cyan as primaries, but his book summarizes most other color knowledge to date.

    Through his research he developed seven color contrasts for coordinating colors by using the hue's contrasting properties.

    He learned that contrasts may be obtained by light, moderate, or dark values.

    This image shows Itten's seven color contrasts.

    Of course, there is one other aspect of designing with color that should always be considered, and that is how color can affect your audience. This is a huge subject to begin understanding, but here's a good place to start.

    Next post: Web resources to help you learn more about visual design

    Chris Van Wingerden is Vice President Learning Solutions at dominKnow Learning Systems.

    Visual Design Primer Part 3: Color Theory Basics

    This is our third posting in our Visual Design Primer series looking at visual design issues and concepts that relatively new e-learning and multimedia designers can really benefit from.

    We've looked at image and animation use and typography and font usage in the previous two posts. This post is the first of two on using color in your design process.

    Color is the visual perceptual property corresponding to the categories called red, yellow, white, etc.

    Color is derived from the spectrum of light, and it is reflected or absorbed, as it is received by the eye, and processed by the brain.

    In this post, we outline a few of the most important color theory concepts.

    Understanding color and color relationships will greatly assist you in an effective design process.

    In the next post we'll look at ways to use color in your design thinking.


    Qualities of Color, or Hue

    In design, it's not enough to be able to know a color's name. Anyone who has ever tried to pick a paint color for the living room already knows that all reds are not created equal, for example.

    There are a number of different qualities that we can use to describe color. The key qualities we most often need to think about are:

  • Chroma and saturation
  • Value, intensity and luminance
  • Shade
  • Tint


  • Chroma and saturation represents how pure or gray a color or hue is.

    Intensity, luminance and value represent how bright or dull a hue is; how much light is reflected from the hue.

    Shade and tint represent how much black or white is added to a color.

    The image above shows how these different qualities affect how a color looks.

    When we start to think in terms of these qualities, we're able to describe how and why one red is different from another.


    The Color Wheel

    To start thinking about the differences between more than one color, we need to understand the color wheel.

    The color wheel is the primary tool used in color theory. Colors are arranged on the wheel according to their hue and relationship.

    Understanding the color wheel will help you understand how certain colors relate to each other, and why they work well together - or don't!

    The color wheel can be broken down into Primary colors, Secondary colors and Tertiary colors.

    When talking about how colors relate to each other, we speak about Harmonious colors, Complementary colors, and Analogous colors.

    Primary colors are the main colors that cannot be made from others but are used to create all other colors.

    Secondary colors are those made when two primaries are mixed.

    Tertiary colors are those made when primary and secondary colors are mixed.

    Complementary colors are colors opposite each other on the color wheel.

    Harmonious colors are colors that are next to one another on the color wheel or very close to it.

    Analogous colors are located near each other on the color wheel and can be a pleasing combination.

    Getting these color theory basics under your belt is important. You'll not only make better decisions on color use in your e-learning designs, you'll also be better prepared to work (and talk!) with graphic artists and other design team members.

    Next post: Using color theory in design

    Chris Van Wingerden is Vice President Learning Solutions at dominKnow Learning Systems

    9wefv5g7yj

    Visual Design Primer Part 2: Typography and Font Usage

    In our previous post we looked at some critical issues to keep in mind when thinking about image and animation use in an online learning project.

    The old saying might be that a picture is worth a thousand words, but in e-learning you really can't get away from words completely.

    But text in an online learning experience is more than just words on the screen. It is also a key element of visual design. It's especially important to especially ensure that the visual design of the text presentation best supports the learning that needs to take place.

    Here are some key concepts to keep in mind when you think about using text in your online learning course.

    Typography
    Typography is the art and technique of setting written subject matter in type using a combination of fonts, font sizes, line lengths, leading (line spacing), and letter spacing. When dealing with typefaces, always limit yourself to full families of fonts, and only mix serif and sans serif fonts based on the structure of the project.

    As a general rule:

  • Avoid having two consecutive lines that end with hyphens
  • Widows and orphans (one word on a line by itself) are undesirable
  • Tighten text (decrease letter spacing) no more than -3
  • Kern (manually adjust the space between letters and words) on titles/word-marks to improve letter spacing
  • Note: Typographic controls such as kerning and leading are often not available in applications meant for online display. They may be still used to good effect when preparing text as an image for online display, as in this example:

    Here's a link to a good general overview of the subject of typography.

    Fonts are the visual families that you choose to use to display your text. Microsoft has a great site to spend time at if you are new to typography and fonts. For example, it explains what TrueType fonts and ClearType fonts are. It also gives a great overview of typography in general.

    General Font Information for Web-based Training
    Since text will carry the bulk of your learning content, it will be very important that it display clearly. Here are some guidelines for text use:

  • Fonts should be a minimum of 14 points for online learning. People above the age of 40 and people with visual perceptual deficit may have problems reading text if it is smaller.
  • Place text on an uncluttered background, distinctly separate from other screen elements. There should be a clear contrast between text and background elements.
  • Provide plenty of white space, and keep your columns of text narrow (8-12 words).
  • Try not to use more than two typefaces in your project. When using more than one typeface, make them quite different.
  • Use a typeface that is easy to read on-screen, for example Arial or Verdana. Small serif fonts such as Times New Roman are difficult to read on a monitor.
  • Make sure the spacing between sections of text in the project (between headings and main content, between paragraphs, etc.) is consistent.
  • Be aware that underlined fonts may be confused with active links to information and could be frustrating for learners.

    Fonts and Color
    It's always tempting to add a bit of color to your text to help it stand out, but generally you should use color cautiously on text.

    For example, you should avoid using a font color against a background color that is adjacent to it on the color wheel, since the text will blend in with the background. Pick colors that have enough contrast to be easily read. Use dark colors for text. Generally, bright or light colors used for body text makes this text difficult to read.

    Avoid using colors which are opposite each other on the color wheel as they will be distracting, and may cause the illusion of 'vibration', as shown in the example below.

    Online learning is a visual medium, but text will inevitably still play a role in almost every online course you create. Following these guidelines will help make sure you are using text in the best ways possible, all in an effort to improve the effectiveness of the learning experience.

    Next post: Color theory

    Chris Van Wingerden is Vice President Learning Solutions at dominKnow Learning Systems

  • Visual Design Primer: Image and Animation Use

    When you transition from being a traditional trainer for instructor-led sessions to working on e-learning projects you find out quickly there are whole new worlds of knowledge you suddenly need to acquire.

    A critical example is the realm of visual design, which can have a huge impact on the learning experience you are creating.

    Our clients often need to become instant experts in visual design as they move into using the dominKnow LCMS, especially if they are transitioning from a more traditional training approach. Our creative services team has created a short overview document that highlights some key issues and concepts to help give clients a head start on this transition.

    In this post, we'll highlight some important things to consider when using images and animations. Over the next few posts we'll look at typography and font use as well as color theory. We'll also post up a collection of web resources on these topics, to help anyone interested in learning more.

    A thought to keep in mind: Rules are meant to be broken and there's an exception to every rule. Okay, that's two thoughts, but they point to the same thing. These are good guidelines to follow, but at some point you may need to ignore or break them. Just make sure whatever you do is in the best interest of your learmers!

    Images and Animation Use

    General Image Considerations
    Ensure that images complement and support the content.



    Images should be consistent in style, and should complement each other as well. The mood of the images should be appropriate to the subject and your audience. The image above shows three different visual styles - you'll quickly recognize that they aren't equally appropriate for every learning experience, that they each have their place.



    Always create images at their final size. In other words, do not use your course authoring tool settings to resize an image's pixel height or width. Scaling an image to make it appear larger on screen (scaling up) will cause it to look pixilated. The image above shows an example of this effect. Scaling to make an image appear smaller (scaling down) will mean you are using a larger-than-necessary file size, adding unnecessary bulk to your course. You should always try to minimize file size to prevent bandwidth or loading issues for your learners.

    You may also reduce the number of colors or quality in your image in order to reduce the file size, thereby decreasing the time the image takes to display in your course. For example, if you save the image as a JPG, you can usually reduce the image quality and still retain an image almost identical to the quality of the original.

    Stock Images
    If you do not produce your own photographs or images for a course and need to obtain some from an online (or other) source, make sure that you have proper authorization to use them. This may mean purchasing the rights to the image or getting permission from its creator for its use.

    You can visit stock image websites to see thousands of images that are usually available for purchase (vector images, photographs, illustrations etc.). Well-known vendors include Jupiter Images, iStockPhoto and Getty Images.

    Animations
    Animations often play a critical part in illustrating a concept. When adding animations make sure you pay attention to how large the file is, as this can reduce a course's playability.

    Any animations used in courseware should require a cue from the learner for startup; be aware that looping animations or videos that play automatically can be distracting to the learner.

    Keep all animations and videos in the control of the user, so they can start and stop them as they wish.

    Next post: Typography and font use

    Chris Van Wingerden is Vice President Learning Solutions at dominknow Learning Systems.

    BlogCFC was created by Raymond Camden. This blog is running version 5.9.4. Contact Blog Owner
    Technology Blogs