5 Quick Tips – How To Pair Text With Images To Create A Great User Experience In eLearning 

How you pair textual content with graphical content in course
design is important. If you get it right, it will help the learner
have a great experience with the course. If you get it wrong, it
will leave them confused and frustrated.

Here are a few quick tips on how to marry the two correctly.

#1 Focus on context

Your visual content always needs to be relevant to the subject. More
specifically, any graphics you include should be directly related to the
topic currently on the screen.

In adding images, ask whether they’ll help the learner digest the information. If they are being added simply because they’re pretty or used as a filler – remove them.

#2 Optimize placement

Images should be placed as close to the relevant text as possible. This helps the learner comprehend the content much easier. Additionally, if your screen has multiple graphic elements, consider
placing the most important ones near the top of the page.

#3 Don’t embed text in images

Avoid embedding important text in images. This causes havoc with text-reading software and is a poor practice across the board. Instead, utilize captions or adjacent context to give the image
meaning.

#4 Design for all device types

Make sure to design and test for both desktops and mobile devices. How your images and text display and to relate with one another can look entirely different when viewed from a laptop versus an iPhone.
Play with alignment and size to make it work across all devices.

#5 Use alt text

To ensure maximum accessibility of your content, provide alt text for images when applicable. This text helps screen-reading tools describe images to visually impaired readers and can also help search engines
find and rank your content if it’s online. Be specific and accurate in describing the image.

Learn how to create successful eLearning courses!  This course will show you how, using two of the most popular frameworks.

Sign up to get the free eLearning Starter Kit!

 

* indicates required



No Comments

Leave a Comment:

Instructional Design for ELearning program