MetLife Style & Best Practices Guide for eLearning Development
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
MetLife Style &
Best Practices Guide
for eLearning
Development
For internal use only.
Not to be used with, or distributed to, the public.
Copyright © 2003-2009 Metropolitan Life Insurance Company NY, NY - All Rights Reserved.
Table of Contents
MetLife Style and Best Practices Guide for eLearning Development .........................................3
Introduction ..............................................................................................................................................3
Screen Backgrounds and Content Presentation ........................................................................................3
Colors .......................................................................................................................................................4
Text...........................................................................................................................................................5
Text –Locations and Coordinates ............................................................................................................5
Language and Grammar ...........................................................................................................................7
Text Conventions......................................................................................................................................7
Common Errors ........................................................................................................................................8
Custom Menus..........................................................................................................................................10
Navigation Bars ........................................................................................................................................12
Glossary....................................................................................................................................................13
Content Presentation.................................................................................................................................13
Images ......................................................................................................................................................14
Image Samples and Copyright Info ..........................................................................................................15
Audio ........................................................................................................................................................17
Course Assessments .................................................................................................................................17
Question Types.........................................................................................................................................18
Assessment ...............................................................................................................................................20
Results ......................................................................................................................................................20
Certificate of Completion .........................................................................................................................22
Simulation Tools ......................................................................................................................................25
General Guidelines ...................................................................................................................................25
Screen captures................................................................................................................................26
Audio..................................................................................................................................................27
Graphics and Layout.................................................................................................................................27
Window size ......................................................................................................................................27
On-screen references.......................................................................................................................27
Action Text ........................................................................................................................................28
Captions ............................................................................................................................................28
Reply Text..........................................................................................................................................29
Note Text ...........................................................................................................................................29
Style/Theme.......................................................................................................................................29
Buttons and Other Screen Elements ..............................................................................................29
Pointers .............................................................................................................................................29
Highlight box.....................................................................................................................................30
Interactions ...............................................................................................................................................30
Text Entry ..........................................................................................................................................30
Selecting from a drop-down list......................................................................................................31
Screen Navigation ............................................................................................................................31
Publishing Simulations .............................................................................................................................32
Tracking.............................................................................................................................................32
File Format ........................................................................................................................................32
Playback Control options ................................................................................................................32
APPENDIX ..............................................................................................................................................33
Standard Navigation Bars.........................................................................................................................33
MetLife Style and Best Practices Guide for eLearning Development
MetLife Style and Best Practices Guide for eLearning
Development
The following pages summarize guidelines eLearning developers
Introduction should apply to all MetLife eLearning projects. Various tools are used
in development of MetLife eLearning. However, regardless of the
tools used, we strive for a consistency of look, feel and usability for
all our learning content. The basic MetLife style information
presented here also applies to creation of instructor-led content.
Note: The guidelines in this document should provide sufficient
flexibility to accommodate the needs of every project. Deviation
from these guidelines should only be made with sign-off from
the client and the appropriate L&D representative.
Screen backgrounds and content presentation should make use of
Screen the following standard elements as shown in this guide:
Backgrounds
and Content • MetLife Colors
Presentation • Easy-to-read font sizes and styles
• Positioning (layout of content on the page)
Certain design elements must be used at all times. For example, no
text should appear in the company’s standard blue banner except for
the “MetLife” logo, per MetLife Branding guidelines. MetLife’s
approved colors are also set by the MetLife Brand Center.
If you have any questions, contact the appropriate L&D
representative and/or review the Brand Center web site.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 3 of
37
MetLife Style and Best Practices Guide for eLearning Development
Use the following MetLife branded colors when creating new learning
Colors objects:
R=204 R=235 R=172 R=128 R=203 R=161
G=110 G=211 G=178 G=169 G=208 G=132
B=0 B=62 B=29 B=228 B=211 B=183
R=165 R=218 R=116 R=70 R=155 R=117
G=10 G=169 G=142 G=108 G=161 G=100
B=55 B=0 B=22 B=189 B=165 B=146
R=57 G=118 B=209
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 4 of
37
MetLife Style and Best Practices Guide for eLearning Development
The following Fonts and Sizes are typically used for eLearning content
Text development. Smaller fonts are not recommended. If your project’s
target audience includes visually impaired students, you must take that
into account when designing your courseware.
Item Font Size Format / Color
Course Heading Arial 14 Bold
MetBlue #3976D1
R=57
G=118
B=209
Body Text Arial 12 Black
Caption and Labels Arial 10 Bold
Black
Question Stems Arial 12 Bold
Black
Question Choices Arial 12 Bold
Black
Incorrect Answer Feedback Arial 12 Bold
(Note that a colorblind learner may Red
not be able to distinguish between
red and green, but the text of the your
feedback should make the result
clear.)
Correct Answer Feedback Arial 12 Bold
Green
Instructional Text (interaction Arial 12 Bold
instructions) MetBlue #3976D1
R=57
G=118
B=209
Note Arial 12 Bold only the word
‘Note’; The actual note
text is not bold.
URLs Arial 12 Underline Blue #0000FF
The following text coordinates must be used for development of
Text – ForceTen course pages. Comparable layout guidelines should be
Locations applied to pages created in any other development tool.
and
Coordinates
Item Location Coordinates
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 5 of
37
MetLife Style and Best Practices Guide for eLearning Development
Page Heading Heading in top MetBlue bar X=15
(Under “MetLife” Title Bar) Y=45
Body Text Under top MetBlue bar X=15
Y=90
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 6 of
37
MetLife Style and Best Practices Guide for eLearning Development
Language and Grammar
Write all instructional and feedback text in the active voice, not the
Text passive voice. All instructions must be clear and concise, and verbs
Conventions should be in the present tense. The blue text should stand out
clearly from the background.
Correct Incorrect
>> Click MyBenefits in the Shortcuts section. The word MyBenefits under the section titled
Shortcuts should be clicked.
Correct Incorrect
A summary of your statements is displayed. A summary of your statements will be displayed and
you will need to select View Statement.
>> Click View Statement.
o Instructions should only reference screen elements that actually appear on the screen
currently being displayed.
o Refer to all field, option and button names precisely as they appear in the screen shots.
(Exception: colons and other ending punctuation may be omitted). (Ex. Click Text
Effects).
o Bold and italicize the items you want the user to click, select, press or type. For
example: “Press Enter to continue.”
o When giving step-by-step instructions, use double chevrons to make each specific
instruction stand out. For example: “>>Type 1234 in the ID field.”
o For keyboard entries, use “press” to describe the action to be performed. Example:
“Press Tab to move to the next field.”
o For instructions using the mouse, use “click.” Avoid using “click on,” “hit,” “do” or “push”
when referring to a computer user action.
o For check boxes and radio buttons, the preferred instruction is “select.” “Click” can be
used if done consistently throughout a course.
o Numbers one through nine should be spelled out unless they indicate a measurement,
topic, page, step number, quote, or time of day. Numbers 10 and above do not need to
be spelled out.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 7 of
37
MetLife Style and Best Practices Guide for eLearning Development
o Abbreviations and acronyms should not appear in headings unless they are part of the
course's actual title; the exception to this rule is the “MetLife” acronym. Abbreviations
and acronyms should be spelled out at first mention in the body text followed by the
acronym quoted in parentheses. Example: “The Chief Fiscal Officer (“CFO”) is John
Doe.” After you have “defined” the acronym, you can use it in the body text instead of
the full title as appropriate.
o Capitalize the first word of each bulleted entry.
o Only bulleted information that either completes the leading sentence or contains a
complete sentence requires a period. In all instances, short list items (consisting of one
or two words) do not need periods at the end.
For example:
The following are colors:
• Red
• White
• Blue
Important legislation includes:
• Health Insurance Portability and Accountability Act (HIPAA), which
took effect in 2003.
• Family Medical Leave Act (FMLA), which took effect in 1993.
• Employee Retirement Income Security Act (ERISA), which took effect
in 1974.
• Racketeer Influenced and Corrupt Organization (RICO), which took
effect in 1970.
Note: Notes should be formatted as this note is, with the word “note” in bold, followed by a
tab. The text of the note should not be in bold. The other lines of text should align under
the first word of the note text itself. The easiest way to do this in Word is to include a
tab after the word note, and then press [CTRL] + [T] after typing the note; this will give
you a hanging indent aligned under the first word following your tab.
Before presenting the draft learning content for review by the client,
Common review it carefully yourself to detect and fix all errors.
Errors
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 8 of
37
MetLife Style and Best Practices Guide for eLearning Development
Proofread all text for grammar and spelling errors.
o A common error is the misuse of “they” as a non-gender-specific singular pronoun. Use
“he or she” in reference to one customer or learner, or alternate from the male pronoun
“he” to the female pronoun “she” from one example to the next. Another approach is to
use a plural antecedent. For example, instead of writing, “A doctor needs to listen
carefully to his or her patients,” you can write, “Doctors need to listen carefully to their
patients.”
o Another common error is the interchanging of “e.g.” and “i.e.”. “E.g.” is the shortcut for
“for example” and “i.e.” is the shortcut for “in other words”.
o Attempt to avoid ending sentences with prepositions, like beneath, near, above, in, out,
or below. Keep in mind, however, Winston Churchill’s quote, that ending sentences in
prepositions is the sort of “nonsense up with which I will not put.” In other words,
sometimes avoiding this construction makes the sentence too awkward. Use your best
judgment.
o Avoid splitting infinitives. To be grammatically correct, the phrase should be “to go
boldly where no one has gone before,” not “To boldly go ...”
o Avoid using sentence fragments. A sentence needs to have a subject, a verb, and a
predicate, even if the subject is just implied.
o Watch out for confusing sentence structure, or unclear words or terms. Be concise; use
words sparingly to make reading easy.
o While you don’t want to sound too casual, beware of taking too formal a tone, as it
distances the learner from the content. For example, try to avoid using words that end
in –ize, like utilize (substitute “use” instead).
o Be aware of but also beware of current word usage trends; for example, use of the word
“impact.” Traditionally, impact is a noun and not a verb. (Example: “This book had a
profound impact on my work.”) When used as a verb, it can sound contrived. Consider
using “affect” instead. And avoid words like impactful.
o Know when to use “affect” versus “effect” in a sentence:
“We can affect what our associates think with good communication.”
“The claimant’s even vocal tone betrayed no affect whatsoever.”
“We can effect change by simply acting as good role models.”
“The effect of the court’s decision was enormous and instantaneous.”
o Words such as “never” and “not” can be made bold or italic if needed, to help prevent
the user from misreading the sentence. This is especially useful for stem items in an
assessment.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 9 of
37
MetLife Style and Best Practices Guide for eLearning Development
o Run the spell checker provided to detect spelling errors. Be aware that spell checkers
do not identify words that are used incorrectly but spelled correctly. For example, spell
checkers may overlook the word “their” when used in place of “there” or “they’re.” You
should always proofread yourself, and if possible, have another fresh pair of eyes
proofread as well.
Other good tips can be found at:
https://my.metlife.com/WPSAssets/MLHO/11797448521184602163V1FGrammarTipsJune07.p
df
https://my.metlife.com/Applications/Corporate/MLHO/CDA/PageGenerator/0,4132,P12370,00.
html, and
https://my.metlife.com/Applications/Corporate/MLHO/CDA/PageGenerator/0,4132,P5880,00.ht
ml
Here are examples of the look developed for customized course
Custom menus in ForceTen. Note that lesson status changes from “Not
Menus Attempted” to “In Progress” to “Completed”. A job aid on customizing
a menu for your course can be downloaded from the Developers’
Corner page of the L&D web site.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 10 of
37MetLife Style and Best Practices Guide for eLearning Development MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 11 of 37
MetLife Style and Best Practices Guide for eLearning Development
Here are examples of the current standardized look for MetLife navigation
Navigation bars, or “navbars.” This look and its variations are the standard navigation
Bars bars for all courses and strongly recommended. The “?” Help button on
these bars in ForceTen should launch a brief demonstration of how to use
all the buttons on the navigation bar. If desired, you can also add a page
to your course highlighting and defining the buttons you use on your
navigation bar; the definitions are below. As these “aluminum” colored
navigation bars are custom-built and cannot be easily altered to
add/remove a particular button, you should select one of the bars already
created in ForceTen whenever possible.
Appendix B contains a library listing of custom aluminum navigation bar
names that were created for your convenience. If you can’t find the
navigation bar that fits your needs, please consult with your developer or
vendor partner to create the navigation bar that is most appropriate for
your course. You will select your custom navigation bar during
ForceTen’s “Distribute” process. Static publishing (for course delivery via
CD or other network) has special considerations and requirements;
please see the ForceTen Static Course Preparation Job Aid on the
Developer’s Corner section of the L&D web site.
MetLife Navigation Bar – Aluminum. This is the full standard navbar with all icons:
From left to right, the buttons are Exit, Menu, Index, Resources, Glossary, Help, Closed
Captioning, Replay, Play/Pause, Back, and Forward.
When referencing the names of these buttons, use the official names listed here. For example,
if instructing the learner to click the Forward arrow to continue in the course, use ‘Click the
Forward arrow to continue’. Do not state ‘Click the Next arrow to continue’ or ‘Click the Right
arrow to continue’, as these are incorrect names of the navigation buttons.
There are additional versions with fewer buttons, depending on functionality needed.
For example:
Other variations of these navigation bars must provide the same basic functionality in the same
locations, and adhere to MetLife branding colors. Variations should only be used with prior
approval by the client and your Learning & Development supervisor.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 12 of
37MetLife Style and Best Practices Guide for eLearning Development
MetLife has also developed a standardized look for course glossaries.
Glossary The flash file shows all terms for the particular letter selected. Clicking
a term displays the definition. The support documentation and
glossary files needed to create the glossary below can be found on the
Developer’s Corner of the MetLife L&D website.
Content Below are samples of screens used for presentation of content. Note
Presentation the Page Heading bar. These screens also reflect adherence to
guidelines concerning colors, text point sizes, and placement.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 13 of
37MetLife Style and Best Practices Guide for eLearning Development
MetLife directs that strict care must be taken to follow all copyright
Images regulations in the use of images. The following is from MetLife
guidelines around the use of stock photos. For further information,
review the information on the Brand Center web site, and/or contact
your Learning & Development supervisor.
Age
Average Age Range of MetLife associates is 40-50 years old
44% Baby Boomer – born between 1946 and 1964 (ages 43-61)
38% Gen X born between 1965 and 1978 (ages 28-42)
14% Gen Y born between 1979–1999 (ages 8-29)
4% Silent Generation born between 1925–1945 (ages 62-82)
Gender
64% of MetLife employees are women
36% of MetLife employees are men
Dress
MetLife Dress Code Guidelines indicate that the company has a policy of business casual
attire year-round. Actual attire of MetLife employees is a mix of business casual to business
professional, so the type of business clothing you show in your images may depend on your
specific audience.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 14 of
37MetLife Style and Best Practices Guide for eLearning Development
Diversity & Inclusion
The Office of Diversity recommends using images with a good mix of culturally diverse
individuals that reflect the inclusive environment here at MetLife. If you have any questions,
contact your Learning & Development supervisor or the Office of Diversity.
Here is a best practice example of image from the Office of Diversity:
General
We recommend using photographs of people in MetLife courseware; it can help to humanize a
text-heavy page online.
The friendly, approachable, caring personality of the brand is expressed in photography that is
playful, whimsical, and unexpected (but never irresponsible); images that create an emotional
connection by focusing on people and the things that really matter to them.
Image criteria at a glance:
• Communicates a message or reinforces a point, rather than telling a story
• Reveals a different composition or perspective that can lend vibrancy
• Provides realistic interpretations of situations, rather than posed or staged ones
• Visuals should connect and involve the viewers; “eye contact” is good.
• Images should be contemporary with regard to hair, clothing styles and any technology
(phones, etc.) shown
• Images should not be over saturated with heavy color.
Note: It is important that you represent MetLife agents as collaborators, confident in
demeanor, yet approachable, warm and helpful.
Below are some image samples drawn from MetLife eLearning
Image courses and illustrating the above guidelines. Be sure to consult
Samples and Appendix C for information about obtaining appropriately licensed
Copyright Info images for your work, unless you are creating custom images where
MetLife would own the copyright.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 15 of
37MetLife Style and Best Practices Guide for eLearning Development MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 16 of 37
MetLife Style and Best Practices Guide for eLearning Development
We strongly recommend using MS Flash to provide audio to a
Audio learner on a ForceTen page. Although ForceTen directly handles a
variety of audio files (mp3, wav, etc), there can be a significant delay
in the playing of that audio based on several factors (file size,
network connection, etc). By placing the audio file within Flash and
then creating a small Flash object to play on a page, audio can be
streamed quickly to the learner and wait times can be significantly
reduced.
We also recommend letting the learner know that audio is on a page.
You can add a simple sentence or graphic as needed. (You should
not use any icon that is universally recognized as inviting interaction,
to avoid confusion.)
Knowledge checks and assessments make use of various question
Course types. Below are suggestions for giving directions on completing
Assessments questions. Note that we typically avoid using the words “test” and
“exam”; we use “knowledge check” for unscored questions, and
“assessment” for scored questions.
Matching
Click to select a [Insert Topic] from the left, then click on the matching [Insert
Topic] on the right. After matching all items on the left, click the Submit button.
For correct answers, a green arrow connecting two items will be displayed.
-Or-
Match each option on the left with its description on the right. To do this, click the
name of an option on the left, and then click its description on the right. When
you have matched all of the options, click Submit to check your answers. For
correct answers, a green arrow connecting two items will be displayed.
Fill In the Blank
Read the statement below and fill in the blank with the correct answer from the
list provided.
-Or-
Complete the sentence below by typing your answer(s) in the space(s) provided.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 17 of
37MetLife Style and Best Practices Guide for eLearning Development
Multiple Choice
Directions: Read the question below and select the best answer. To select an
answer, click the letter button next to your answer choice and then click the
Submit button. To proceed to the next page in the course, click the Forward arrow
to continue.
-Or-
Directions: Each segment in this section is followed by questions based on its
content. After reading the passage, choose the best answer to each question by
clicking the appropriate item. When you finish answering a question, click
Submit.
You should emphasize words like “best” since most test takers expect to put the
“correct” answer, and sometimes there is more than one “distractor” answer that has
some merit. The use of “best” indicates that while a number of the distracters may be
plausible, one should be identifiable as the best choice for that particular item.
Drag and Drop
Click and drag the item on the right to the appropriate item on the left, and then
release your mouse key. Be sure that the destination item is highlighted before
releasing. Your result will be displayed at the bottom of the screen, along with a
brief description of the item.
True or False
Directions: Read the statement below and decide if it is True or False. If the
statement is True, click the True button. If the statement is False, click the False
button. After your feedback is provided, click the Forward arrow to proceed to the
next page in the course.
The following screens give some examples of question types in
Question use. Note the page title, such as “Knowledge Check” under the
Types “MetLife” title bar. Also note the page background stamps – both
“Knowledge Check” and “Final Assessment.” The actual size of the
background gif is 1018x652 (placed on our standard 1024x768 size
screen).
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 18 of
37MetLife Style and Best Practices Guide for eLearning Development MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 19 of 37
MetLife Style and Best Practices Guide for eLearning Development
When learners take an assessment, it is standard practice to present
Assessment
them with a printable completion certificate (if the assessment was
Results passed), or an end page displaying results and a “fail” message (if
the assessment was not passed). You can customize the end page
with a background similar to other content background in the course.
To create an End Page like the one below, please visit the
Developer's Corner to access the appropriate step-by-step job aids.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 20 of
37MetLife Style and Best Practices Guide for eLearning Development If you want to include a link to take the learner back to the beginning of the assessment, you would want to use language like this on the “fail” page: You must achieve a score of at least __% in order to receive credit for completing this course. Please click the link below to retake the assessment, or you can click the Index button on the navigation bar below to review sections of the course as needed before retaking the assessment. Do not exit the course from this page. -- or, if you have assessments at the end of each module – Your score is listed above: If you scored an ___% or higher, click the Skip To: link below to proceed to the next module in the course. If you scored ___% or lower, click the ‘Return To:’ link below to return to the module summary and assessment introduction to retake this assessment. Note: Do not exit the course from this page. If you must exit the course, please click the link below to return to the appropriate page in this course, then click the Exit button on the navigation bar. MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 21 of 37
MetLife Style and Best Practices Guide for eLearning Development
Certificate of As noted above, a learner passing an assessment should typically
Completion be presented with a printable Certificate of Completion. In ForceTen,
you can search under Edit Page for “printable portrait certificate” in
the Title field to review various certificate pages available to you.
Note that while the “Congratulations!” page is landscape format, the
certificate itself prints out in portrait orientation, minus the
instructions on the right. See the following samples below:
For a course with no survey:
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 22 of
37MetLife Style and Best Practices Guide for eLearning Development With button for linking to an external survey URL: You can also create other course-specific custom certificates, but in general, they should include the same information cited in the examples above. MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 23 of 37
MetLife Style and Best Practices Guide for eLearning Development
Simulation Software
Program
Best Practices
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 24 of 37MetLife Style and Best Practices Guide for eLearning Development
Simulation Tools
At MetLife, simulation programs are tools used to create interactive exploratory and roleplay
simulations and software demonstrations in a standard Flash (swf) format. Simulation programs
allow on-screen actions to be recorded with editable mouse movements and text captions. They
also facilitate the creation of interactive simulations that include eLearning interactions,
branching scenarios, and instructional feedback.
Simulation programs should be used for the following:
o A demonstration simulation – the learner watches recorded on-screen actions.
o A practice simulation (aka Guided Practice) – the learner interacts with the learning
content.
o A testing simulation (aka Assessment simulation,) – the learner’s interaction with the
content is tested, scored, and tracked.
While simulation programs like Captivate can offer some features not offered by ForceTen, they
should not be used to author complete eLearning courses without prior approval from the client
and Learning & Development. ForceTen is currently the preferred course authoring tool at
MetLife as of January 2009.
General Guidelines
When capturing processes in a simulation tool, the following preparation of the computer
desktop being used for the screen captures must be followed:
o Set your Desktop screen resolution to 1024x768. 1024x768 is the Enterprise Learning
Solutions standard but can be modified based on your LOB. See your Learning &
Development supervisor for more information.
o Hide your Windows taskbar if it is not required for the simulation; display it if it will be
needed for any part of the simulation. This will ensure that the screens are consistent. It
is distracting for learners if standard screen elements appear and disappear, change
color unexpectedly, etc.
o Exit SameTime Connect, Lotus Notes or any other programs that may result in pop-ups
while capturing screens. In general, we recommend closing all programs except the
capture program and the one being captured, as simulation tools require a good deal of
your pc’s system resources during capture and processing.
o Create a text document containing commonly used phrases. Copying phrases from the
text document and pasting them into the caption boxes will save you time and reduce
typographical errors.
o
If you will be showing your pc’s Desktop in your screen captures, change your desktop
background to a solid color and hide your desktop icons before starting captures. HOW TO
o If you are capturing screens that would normally show real user names, IDs, etc, you
should plan in advance to have “dummy” names/IDs created in the capture environment
that you can use for your screen captures. If this is not possible, then after capture, you
must use a photo editing program (such as Adobe Photoshop, MSPaint, or the
inexpensive SnagIt) to replace any such data with “dummy” information.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 25 of 37MetLife Style and Best Practices Guide for eLearning Development
Correct
Incorrect
Screen captures
o Plan your screen captures step-by-step ahead of time so that you know exactly what
you’ll need to include before starting captures. Little steps can be easily overlooked.
o Capture all required screens. During automated capture, you may find that you capture
more screens than intended. These can always be deleted afterwards, and it’s quicker to
delete slides than to go back and recapture any individual screens missed the first time.
o Limit the number of screens to approximately 30. Simulations with more than 30
screens can result in slower loading times, especially for users accessing the published
simulations over a low-bandwidth (such as a 56K dial-up) Internet connection. If you are
unable to limit the number of screens to 30, consider dividing the simulation into smaller
simulations in logical segments.
o Use automated capture when possible. This will reduce the time required to create a
simulation. When necessary, automatically-created text should be edited to make it
sufficiently specific and meaningful.
o You will need to create caption boxes and highlight boxes manually for any screens
created using manual capture.
o Use manual capture for complicated processes. This ensures that no step is missed.
(For example, Captivate cannot capture right-click commands. So you would need to
stop automated capture, do manual capture of a needed right-click menu, resume
automated capture, and then animate the manually captured page yourself later in
Captivate.)
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 26 of 37MetLife Style and Best Practices Guide for eLearning Development
Audio
o You should provide audio when it will make a substantive contribution to one or more
parts of your course. It can also be helpful for associates with limited eyesight.
o If the course will include audio, you should also plan to include closed captioning text so
that a learner with hearing difficulty or without pc audio will not miss important content.
o Use a good quality microphone, and test it beforehand.
o Audio should sound professional, with a vocal manner appropriate to the content (for
example, an orientation course would need a different vocal tone from a compliance
course). If the recording is to be done in-house, and the speaker is not an experienced
narrator, he/she should allow sufficient time to practice and listen to a few sample
playbacks to learn what needs to be adjusted.
o The speaker should maintain a consistent audio level when narrating.
o If a professional studio is not used, the voiceover artist or internal subject matter expert
making the recording should arrange for a suitably quiet room for the recording session.
o 64k mbps in mp3 format is the recommended file format for eLearning to minimize file
sizes. This should be set before recording begins.
o Create separate audio tracks/files for each page/slide.
o We recommend use of a “pop” filter (about $20 at an audio store) between the speaker
and the microphone to minimize “popping” of consonants (p, b, t, k, etc.). This will help
reduce the number of retakes needed, and will produce a more professional sound.
Instructions for creating inexpensive home-made pop filters can also be found online via
Google or other search sites.
Graphics and Layout
Window size
o MetLife’s current default screen resolution is 1024 x 768.
o The recommended default screen capture area for simulations is 1008 x 570. This
is the optimal size for a simulation that will play within a ForceTen page. If you plan to
launch the simulation in a new window (computer launch icons are available in ForceTen
for this purpose), then you can use 1008x590 to gain a bit more vertical space. In
Captivate, once you resize the capture area, the new size becomes the default setting
for future captures, until you alter it again.
o Select the window size before you start taking screenshots. Changing the size of your
screenshots after capture would adversely affect their quality.
On-screen references
o Instructions should only reference screen elements that appear on the screen displayed.
o Refer to field, option and button names precisely as they appear in the screen shots.
(Exception: colons and other ending punctuation may be omitted). For example, “Click
the Text Effects tab.”
o Bold and italicize the items you want the user to click, select, press or type. For
example, “Press Enter to continue.”
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 27 of 37MetLife Style and Best Practices Guide for eLearning Development
Action Text
o Place action text on a separate line, at the bottom of the caption box.
o Use double chevrons (>>) to make the instruction stand out. Use the chevrons even
when the box contains only the instruction, to be consistent throughout the simulation.
Correct
Incorrect
Captions
o Make caption boxes the same size and place them in the same location on all screens,
when possible. Select a default size and location for the caption box that will
accommodate the captions for the majority of the screens.
o Make sure text boxes never cover the portions of the screen the learner needs to see in
order to progress in the simulation.
o Use a consistent style for each type of caption. In Captivate, you can set the style for the
caption and highlight boxes and make it apply by default to all boxes in that simulation.
o Left-justify the text in caption boxes.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 28 of 37MetLife Style and Best Practices Guide for eLearning Development
Reply Text
o Adjust the size and style of the font that will be displayed when a student enters data in a
text entry box, if needed. The text should be set to match as closely as possible the font
style and size that appear in the actual application you are documenting.
Note Text
o Tag important comments, notes or any additional information with the label “Note:” to
draw the user’s attention.
o Place notes on a separate line, at the bottom of the caption box.
Good job!
Next, you need to choose a font color.
>> Select a font color from the color palette provided.
Note: If you selected a dark background, avoid selecting a
dark-colored font. Likewise, if you selected a light background
avoid selecting a light-colored font.
Style/Theme
o Use a consistent visual theme or style throughout your course or curriculum. The use of
different styles throughout a course can be distracting and even confusing to the learner.
o MetLife requires all developers to use approved styles from the Branding Center.
o If you are capturing a software environment where the background color is different
between the production environment and the development environment where you may
be doing your captures, make sure you arrange to have the color in the capture
environment match what learners will see in the real application before starting screen
captures. This will help you avoid costly and time-consuming revisions later.
Buttons and Other Screen Elements
o Keep buttons and other Screen Elements consistent throughout your screen capture
process; if a number of people are capturing simulations for the same project, ensure that the
style/color used is consistent.
Pointers
o We strongly recommend that you use pointers to show users where to click.
o Pointers should be easy to see, and should stand out from the background, but should
not obscure the fields or buttons to which they’re pointing.
o Use the same type and color of pointer throughout your content.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 29 of 37MetLife Style and Best Practices Guide for eLearning Development
Highlight box
o You can also use highlight boxes (outlined or translucent color-filled) to bring attention to
hard to see areas or to emphasize fields or sections.
o Use the same type of highlight box throughout your content.
Interactions
Text Entry
o Don’t require participants to make lengthy text entries; a typing mistake on their part
could keep them from progressing through the simulation. For example, when a fictitious
name is required, use a name such as Jones, Smith or Perry and avoid complex names
such as Schuffenhauer. If using a full first name and last name, make sure it doesn’t
exist in the MetLife ReachMe address book.
o For lengthier text entries such as notes or comments, enter the text for the learner and
state what you’re doing (see sample below).
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 30 of 37MetLife Style and Best Practices Guide for eLearning Development
Selecting from a drop-down list
o Selecting an item from a list in a simulation should be presented as two sequential steps.
The first step will require the participant to click the arrow to display a list. The second
step will require the participant to select an item from the list. (As noted above, in
Captivate, right-click list item screens must be manually captured and animated, as
Captivate cannot capture right-click functionality automatically.)
Screen Navigation
o Provide clear and concise instructions for participants to navigate to different parts of the
screen, if they are required to access another section of the screen.
For example, if it is necessary to scroll up or down the page to gain access to another
section, provide instructions which include directions such as “Click the bottom of the
scroll bar.” TIP: Rather than using the simulation program’s “scroll capture” feature, ask
the learner to click toward the end of the scroll bar, and make the whole scrollbar the
hotspot that will adjust the screen view for them. Automated scroll capture features tend
to be awkward in playback.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 31 of 37MetLife Style and Best Practices Guide for eLearning Development
Publishing Simulations
Tracking
o You can create simulations with knowledge check questions and show a score within the
simulation.
o When incorporated within ForceTen, scoreable simulations would require an alternative
design implementation using a SCO player rather than the MetLife Aluminum navigation
bar. As of January 2009, we do not yet have score/completion passback from a
Captivate 3 simulation on a ForceTen page. So at this time it’s best to offer only
unscored knowledge check questions within simulations, and offer scored assessment
questions on ForceTen pages.
File Format
o If publishing for use in ForceTen, publish the simulation using the Flash (SWF) settings.
o If publishing for use on a CD or PC desktop; publish the simulation using the capture
program’s Standalone settings.
o If publishing as a job aid, publish using the capture program’s Handouts settings.
Playback Control options
o Use the same style for playback controls for each simulation in any given course.
o Position the playback controls for each simulation at the same place on the screen.
o Use the least obtrusive playback controls/navigation bar, while ensuring that it is still
clearly visible and accessible. In Captivate, the “CoolBlue” navigation bar has easy-to-
see buttons, and you can adjust the button color to MetLife blue, with a highlight of
orange, to align with Branding guidelines.
o In general, it’s a good idea to consider putting the simulation’s navigation bar at the top
of the screen, so that the learner will not confuse it with the ForceTen navigation bar that
is always present at the bottom of the course screen.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 32 of 37MetLife Style and Best Practices Guide for eLearning Development
APPENDIX
Appendix A:
HOW TO:
Hide desktop icons
o Right-click Desktop
o Select Arrange Icons By
o Deselect Show Desktop Icons
Appendix B:
ForceTen Custom Aluminum Toolbars
Standard Navigation Bars
MetLife makes use of a standardized look for navigation bars, or “navbars.” This “aluminum”
style look and its variations are the standard navigation bars for all courses and strongly
recommended. Decide on which variation to use based on the features of your course. Here
are your options:
1) Aluminum Navbar Full with CC FINAL (staging^24325) – this is the full navbar with all
functions except “pause” now available for use:
2) Aluminum Full ResandGlossNA (staging^24959) – looks the same as the full navbar,
but the Resources and Glossary functions are not available.
3) MetLife Navigation Bar – Aluminum (medium) (staging^11435) – similar to the Full
navbar, but lacking the Replay and Closed Caption functions:
4) MetLife Navigation Bar – Aluminum (Med/Low No Glossary) (staging^11731) –
similar to the medium navbar, but lacking the Glossary function:
5) MetLife Navigation Bar – Aluminum (Med/Low No Resources) (staging^11732) –
similar to the Medium navbar, but lacking the resources function:
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 33 of 37MetLife Style and Best Practices Guide for eLearning Development
6) MetLife Navigation Bar – Aluminum (Low No Resources or Glossary)
(staging^11733) – the Low navbar – only the basic functions of Exit, Home, Index, Help,
Back and Forward:
7) MetLife Navigation Bar – Aluminum (Offline) (staging^9990) – This navbar has the
same appearance as the Full Aluminum navbar, but is for offline use. Note that if a
function calls data directly from the ForceTen repository, such as Closed Captioning, it
will not work offline.
8) MetLife Navigation Bar – Aluminum Low (Offline) (staging^16252) – This looks the
same as #6, the Low navbar above, but is for offline use.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 34 of 37MetLife Style and Best Practices Guide for eLearning Development
Appendix C:
Policy and Guidelines for the Use of Graphics in ForceTen Courses
and Other Training Materials
As the amount of Learning content continues to grow, most of it developed in our ForceTen
LCMS, it’s important to remain aware that materials used MUST be:
1) Original to the MetLife course developer or department, therefore copyrighted by
MetLife,
OR
2) Materials where copyright clearance has been obtained and documented.
Failure to follow this guideline would put MetLife at risk for copyright infringement or
plagiarism. In the case of ForceTen, having out-of-compliance content in our LCMS database
could necessitate later removal, putting at risk courses that made use of it.
In order to help protect MetLife from any risk of copyright infringement, this document has
been written to clearly state policy around the use of graphic elements in our training
materials.
SUMMARY:
Policy:
1. Graphics used in all training materials must be drawn from the
MetLife-approved options described below.
2. Microsoft Clipart of any type is not approved for use.
3. Existing instances of Microsoft Clipart must be replaced – see
process in this document.
Graphics Options:
1. Jupiter Images – an annual subscription service offering over
600,000 Royalty-Free & Rights Managed images (preferred option).
2. Creative Express/Getty Images – an annual subscription service
offering approximately 60,000 royalty-free images.
3. Creative Services – Media Manager (a limited number of pre-
approved/licensed images) and Individual Image Purchase.
Metadata Requirements:
1. The “Copyright Clearance” metadata field is required.
2. The “Obtained Copyright Info” metadata field must be
completed for any image not copyrighted by MetLife.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 35 of 37MetLife Style and Best Practices Guide for eLearning Development
Policy
We already have a large number of graphics either in ForceTen courses or in ILT content
that are being uploaded into the repository via the Learning Asset Management Program
(LAMP). Therefore, we must be certain to follow guidelines to avoid exposing MetLife to any
kind of copyright issue.
Effective immediately, all graphics used in training materials must be drawn from one of the
three sources detailed in the next section unless they are original to and copyright by
MetLife.
Also effective immediately, all LOB L&D developers must begin preparations to update their
respective ForceTen courses and other training materials that currently use Microsoft
Clipart. Developers should begin by:
• Identifying all Microsoft Clipart graphic objects associated with your Author ID
• Updating object metadata so that “MS Clipart” is at the end of the Keywords
Metadata field
• For MS Clipart objects associated with your author ID, using the Map functionality
and identifying any other instances where the objects appear – for such instances,
the course author should be notified
• As time permits, search for and replace objects tagged as “MS Clipart” with graphics
drawn from approved sources
Graphic Options
Jupiter Images – This is the Recommended image resource. The cost is $625 for an
annual flat-rate subscription from Jupiter Images. This is a greatly-discounted price
negotiated by MetLife (the annual fee is usually $1700). With this subscription, you can
download an unlimited number of Royalty-Free and Rights-Managed images. Jupiter Images
provides over 600,000 Royalty-Free and Rights Managed images* (see notes in metadata
below) from their Premium photo subscription license. Note that MetLife’s agreement covers
only Low-Resolution images (typically 72dpi), which are actually more suitable for eLearning
and things such as small images on job aids. High resolution images (used for print
advertising, etc.) are available at an additional cost. (*See notes in metadata section
below). Please use the Ariba purchasing system to order this license to obtain the
discounted pricing outlined in the Master Service Agreements with both companies.
1) Creative Express/Getty Images – The cost is $1500/year. This is an annual
subscription service with approximately 60,000 Royalty-Free images available in the
collection with images being rotated in and out each month. Each subscription user is
monitored by Getty Images and is allowed a maximum download of 50 images per
day. Note that this solution is specifically for internal newsletters and/or internally
created electronic publications for internal use only. The image quality is 72 dpi.
Please use the Ariba purchasing system to order this license to obtain the discounted
pricing outlined in the Master Service Agreements with both companies.
2) Creative Services – there are two varieties of service:
a. Media Manager – is a free service, but account availability is extremely
limited. For this option, contact Creative Services for an account on their
Media Manager system (an online graphics repository containing a small
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 36 of 37MetLife Style and Best Practices Guide for eLearning Development
number of images purchased or licensed by Creative Services). Images
included in this system are Royalty-Free or Rights-Managed. Once you have
an account, you would be able to:
• Search the library for Creative Services/Branding-approved images
• Complete an order form for the images desired (you specify the
desired images based on each image’s stock #)
• Receive the images from Creative Services free of charge
b. Individual Image Purchase – the most expensive option with a cost of
$150 per image for Royalty-Free Images, and $475-500 per image for
Rights-Managed Images.. You would:
• Partner with Creative Services to request and obtain images.
Creative Services will work with you to use one of the three MetLife-
approved image repository suppliers (Corbis, Jupiter Images or
Getty). Each image has a cost associated with it, and prices can vary
by image as noted above.
• Creative Services has an open Purchase Order with each of the
image vendors; you provide your project’s funding cost center on an
order form citing the images desired, and Creative Services then bills
that cost center for use of the images.
To discuss image repository options with Creative Services, contact the Creative Services
department.
Also, a discussion of graphics options is available as part of the June 18, 2008 Lunch n
Learn recording available on the L&D website: Learning Design>Lunch n Learn Archive.
Metadata Requirements
In order to support the Policy and requirements around use of graphics, changes have been
made to the copyright metadata fields for graphic objects:
1) The “Copyright Clearance” metadata field will be a required field and has been
modified so that the default value will be “Select one of the following two fields”. The
Developer must select either “None Required”, attesting that no copyright is needed
(meaning the image is MetLife-generated and owned, or “Obtained”, attesting that
the required copyright clearance has been obtained.
2) The “Obtained Copyright info” metadata field is self-explanatory and must be
completed when the first field has “Obtained” selected”. This metadata will be
reviewed periodically for compliance.
*Notes on Royalty Free and Rights Managed images:
• Royalty Free Images may be kept in the LCMS indefinitely. You should include
“Royalty Free” in the “Obtained Copyright info” metadata field for such
images.
• Rights Managed Images must, in general, be deleted from the LCMS after two
years from the end of a subscription to a graphics service. You should note
“Rights Managed” in the “Obtained Copyright info” metadata field for such
images.
For any questions on Policy and Graphic Options, please contact your SDPL. For any
questions concerning metadata, please contact your L&D Learning Center Resource.
MetLife eLearning Development Style and Best Practices Guide - v3 FINAL_03052009.docPage 37 of 37You can also read
