Category: e-learning

What is Wireframing?

Wireframing is the process of conceptualizing the navigation that will be used for each of the lessons in your course and working out as many kinks as possible before you begin to build the project.

In the example below, there are three simple sections notated. While the example focuses on eLearning, the concept could easily apply to a web page, flyer, newspaper, or magazine layout. To be clear, I'm not talking about specific course content here, nor the specific design; I'm referring to the overall placement of page elements.

The "Header" is the first thing the learner or user sees, so it needs to be something that will, at first, draw them in and then keep them interested. The "Body" is the main part where most of the content resides. The "Footer" is where information is placed that is of lesser importance, i.e., disclaimers, copyright info, and alternate text links.

Why Wireframe?'

Wireframing is a key part of the process in building an interactive course. You must plan each click your user might take and what the outcome of that click will be.

How to Wireframe

In my experience, the best way to create a wireframe is sketch it out on a simple sheet of paper. At first, I wasn't a fan of paper, but I was told that using paper was the most fluid way to begin a design. I had to retrain myself to sketch on paper but I now see the advantages. 

After sketching my ideas on paper, I use Adobe Illustrator and redraw the concepts digitally (especially if I'm going to present the concept to a client). I must stress however that you don't have to be an illustrator or use fancy programs to create a wireframe… simple rectangles and lines will work just fine. You just want to ensure you have mapped out every aspect of the course navigation before you begin to produce it.

Which Applications Should You Use to Wireframe?

There are a variety of applications you can use to create Wireframes or wireframes. Here are a few:

• A piece of paper
• Adobe Illustrator
• Adobe InDesign
• Adobe Photoshop
• Microsoft Word
• Microsoft PowerPoint
• Apple Keynote
• Online services such as Blueprint, Balsamiq and Omnigiraffe

The image below shows two wireframes. One uses white background boxes and the others are filled with gray. I prefer the bottom one because I am a visual thinker and the gray helps me understand the regions more. However, both are correct.

The image below shows two different treatments for a navigation bar.

In the first example, I used separate boxes to indicate buttons and I grayed out the one that the user has pressed. In the second example, the buttons are all connected so I showed it a slightly different way. Both are correct.

How complex or simple you make the wireframe is up to you. Here is an example of a very complex wireframe. Notice the different shades of gray used to designate hierarchy.

Final Thoughts

Keep your wireframes clean and organized. Show things as close to scale as possible, and label items as you go. Work out all the details at this stage, and production will be a breeze.

***
If you'd like to attend some awesome 3-hour mini courses that focus on eLearning, check these out.

Monospace vs. Proportional

When it comes to fonts and numbers, there are two main categories: Monospace and Proportional. Monospace fonts have the exact same width allotted for each character. This makes it perfect for aligning columns of numbers. Notice in the image below: the sets of numerals on the left are in a Monospace font and are perfectly aligned. However, in the example on the right, the "1" and the "2" are closer together than others in the column, showing that it's a Proportional font.

Tips for Designing Numerical Data

There are two types of numerical data you can display in your eLearning courses: Statistical data (first image below) or Sets of Data (second image, used for measuring or analytics). Most people find it easier to remember approximations than actual figures. For example, you might find it easier to remember which entrée on the menu is most expensive, as opposed to memorizing all the entrée prices.

As a designer, I always try to add graphics or shapes when possible to help tell the story. In the image below, to demonstrate that 20% of the staff had completed the Compliance Training, I used color to help tell the story. The light blue represents the 20%, and I also used it on the "20%" text, for continuity. This is much more effective than just reading statistics in a paragraph of text.

Instead of just saying "sales increased 50% in the first quarter," why not illustrate it? In the image below, I used an icon of a chart with an upward arrow and the 50% is larger. This is much more effective than the simple two lines of text in the example on the left.

Use graphs to display numbers. I often create graphs in Adobe Illustrator because it has options for different types of graphs. You can even create a custom graph using your own graphics. Sometimes I create my graphs directly in Articulate Storyline using shapes (in the image below, that's exactly what I did using lines, text, and simple shapes).

Pictograms are another great way to display data. In the image below, you can see how many donuts were sold at each location and compare locations at a glance. Pictograms help learners compare content and retain what they have learned.