Apply UI, UX Design Principles to Give eLearning a Makeover

We see six-year-olds picking up smartphones and intuitivelyusing them. We see older generations on tablets and discover the samephenomenon: They know where to click and what to do, and most of the time, noone showed them. Smartphones, tablets, and apps are built in intuitive ways, andgood design allows the user to navigate with ease. This is by no means amiracle or an accident, but the result of extensive research and hard work bydesigners and developers. The basis of all this research is principlesof user experience (UX) and user interface design (UI design). Learnhow UI and UX design principles can easily be applied to give your eLearning amakeover.

UX and UI design

UXand UI are not the same thing.

• UX helps us identify a user’s pain point orneed. Through an ideation process, designers come up with a prototype that thencan be tested. For example, if a designer adds a button to the product, doesthe user know where to click? Does the button lead the user to a place that makessense?
• UI is the combination of visual and interactiondesign that makes a product come to life. For example, if someone clicks abutton, what happens to the state of it? How does the user know the button wassuccessfully clicked?

Often, UX designers create the user flow and UI designersrefine any interactions, adding color and emphasis to the product to create anunforgettable experience.

UI design doesn’t have to be difficult. It is best to focuson one or two principles at a time and master those before moving on to thenext. Simple principles, such as scale, contrast, or typography, can make aneLearning module really come to life.

Many free tools allow designers to find, for example, the correctcontrasting color, or the perfect match for the font type they are alreadyusing. And, as designers, we should always keep in mind the possibility ofbecoming inspired by the world surrounding us: apps we use every day, websitesthat delight us, or emails that draw us to action on something. The list isendless.

Prototypes and wireframes guide design

In learning and development, we usually create prototypesafter the instructional designer releases a design document and right beforethe storyboard is finalized. These prototypes are often built using theeLearning authoring tool.

Prototypes can help us create the user flow and thinkthrough how a learner would navigate through an eLearning module. The prototypetells a story about how a learner would interact with the final product andallows us to design differently based on that research.

Creating a prototype does not have to be difficult—and itdoes not have to be done using an eLearning authoring tool. If there is nobudget to do early prototypes, to help guide the design, wireframes offer analternative. A wireframe is a sketch that explains on a very high level how apage can be set up and where the user can click. Evena simple wireframe can help guide designers in the right direction.

Add UX and UI design to instructional design toolbox

Instructional designers should adopt UI and UX design principlesfrom website and app development and add these guidelines to their own toolboxes.Following these principles recognizes and uses elements from a world that all ourlearners are surrounded by and function in every day. If we designwith UI and UX principles in mind, there is no need to add a navigationexplainer slide to an eLearning module. In fact, if we have to add a navigationexplainer slide, we probably didn’t design the eLearning module intuitivelyenough and should go back to the drawing board. There is no need for badeLearning design. Let’s delight our learners and increase not only completionrates, but engagement.

Learn more about improvinglearner experience and creating better eLearning at The eLearningGuild’s Super Spotlight on eLearning Fundamentals, GetAll You Need to Create Effective eLearning, December 12 & 13,2018. Bianca Baumann will present GiveYour eLearning Design a Face-Lift Now with UX/UI Principles. Registertoday!