April 6, 2016

Structure Your Design Approach with the Elements of User Experience

Making an E-learning Template? Read This First...

When building a template for your e-learning, it is very tempting to begin with colors and visual elements, as well as some of the possible content layouts. However, as you wouldn't start making a training that "has 10 slides, a red button, and a multiple-choice test" without analyzing the training needs, you should not start an e-learning template development without analyzing the needs of its users.

So, how would you do that? What I found particularly helpful in my practice, is the framework outlined by Jesse James Garrett in "The Elements of User Experience". The framework is extremely helpful for organizing the creative design process, particularly since e-learning template is not the same as an e-learning module itself and, compared to the pure instructional design, you will need a slightly different approach to it. 

To each framework category I have added the examples that are most relevant to e-learning:
  • Strategy: the goals of the e-learning and the needs of its users.
  • Scope: features and functions supported by your template.
  • Structure: navigation and relationships between parts of your e-learning.
  • Skeleton: the placement of the elements, such as titles, navigation buttons, menus on the slides.
  • Surface: the visual appearance, buttons, images, logos.

As you will notice, the categories, or “planes” as they are defined by the author, move from abstract to concrete. The order is very important - as a result, the outward appearance of your product will be defined by the decisions made on all of the previous planes, leading to the design that is not just visually appealing but strategic and meaningful.


Let's take a look at a very short example. Let's assume that on the strategy plane you have identified that your e-learning will be delivered in four languages (English, Spanish, Russian and Japanese). While in the real-life scenario you will gather much more information than that, already with this information, you can formulate the scope of your template. To quote Garrett (2006): "Strategy becomes scope when you translate user needs and product objectives into specific requirements for what content and functionality the product will offer users". In this case, it is clear that the template will need to support localization. For example, you can specify that all audio and video will either need subtitles, or will need to be produced in all four languages, depending on your budget and maintenance bandwidth. Or, perhaps, you will put the audio out of scope altogether, because you do not have enough budget for it.

On the structure plane, you need to decide how the e-learning navigation will work, what slide archetypes will be in your template, how will they fit together and what elements will each slide need to have.  At this stage you will want to consider whether there are any cultural or language differences that might impact your structure. 

On the skeleton plane, you can decide where the slide elements (titles, instructions, buttons - anything you identified in the structure plane) will be placed and how big they should be. For example, since your template must support localisation, you will know that the sizes of any text containers should accommodate for text expansion after the translation. 

Finally, at the surface level, you can decide how the finished product will look like, what colors, visual assets and typography will be used. For example, based on the need for localisation, you will want to select a font which has the character sets for all of the required languages. In addition, if your template will include built-in images placed on master slides, you will need to make sure that they are culturally appropriate or provide alternatives for different cultures.


While using such a framework may seem like too much work, particularly if you're working on a small project, the structured approach provides several benefits. Firstly, it will help you eliminate a lot of re-work and wasted effort. For example, you may start on the surface plane and spend time building buttons with elaborate hover states and later realise that your e-learning will be delivered on touch-based devices, where hover states are impossible. In this example, outlining the strategy for the delivery of the e-learning modules would have helped you find the right direction for the visual design.

Secondly, it will give you ammunition you may need to defend your design decisions. Let’s say someone disagrees with your decision to choose font size 16 for the body text. If the decision was made accidentally or based on subjective preferences, it will be hard to reasonably discuss and defend it. The discussion becomes much more constructive, however, if you can point out that your e-learning will be localised in Chinese and Japanese languages, which are not easy to read in, let's say, font size 12.

Finally, the framework should be not be seen as a rigid sequence of steps, where there's no turning back. On the contrary, if you approach a template design in this strategic manner, you will always know what changes will need to be made when. 

In short, the elements of user experience are your ADDIE for an e-learning template design. 

No comments:

Post a Comment