We see six-year-olds picking up smartphones and intuitively using them. We see older generations on tablets and discover the same phenomenon: They know where to click and what to do, and most of the time, no one showed them. Smartphones, tablets, and apps are built in intuitive ways, and good design allows the user to navigate with ease. This is by no means a miracle or an accident, but the result of extensive research and hard work by designers and developers. The basis of all this research is principles of user experience (UX) and user interface design (UI design). Learn how UI and UX design principles can easily be applied to give your eLearning a makeover.

UX and UI design

UX and UI are not the same thing.

  • UX helps us identify a user’s pain point or need. Through an ideation process, designers come up with a prototype that then can be tested. For example, if a designer adds a button to the product, does the user know where to click? Does the button lead the user to a place that makes sense?
  • UI is the combination of visual and interaction design that makes a product come to life. For example, if someone clicks a button, what happens to the state of it? How does the user know the button was successfully clicked?

Often, UX designers create the user flow and UI designers refine any interactions, adding color and emphasis to the product to create an unforgettable experience.

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

Many free tools allow designers to find, for example, the correct contrasting color, or the perfect match for the font type they are already using. And, as designers, we should always keep in mind the possibility of becoming inspired by the world surrounding us: apps we use every day, websites that delight us, or emails that draw us to action on something. The list is endless.

Prototypes and wireframes guide design

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

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

Creating a prototype does not have to be difficult—and it does not have to be done using an eLearning authoring tool. If there is no budget to do early prototypes, to help guide the design, wireframes offer an alternative. A wireframe is a sketch that explains on a very high level how a page can be set up and where the user can click. Even a 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 principles from website and app development and add these guidelines to their own toolboxes. Following these principles recognizes and uses elements from a world that all our learners are surrounded by and function in every day. If we design with UI and UX principles in mind, there is no need to add a navigation explainer slide to an eLearning module. In fact, if we have to add a navigation explainer slide, we probably didn’t design the eLearning module intuitively enough and should go back to the drawing board. There is no need for bad eLearning design. Let’s delight our learners and increase not only completion rates, but engagement.

Learn more about improving learner experience and creating better eLearning at The eLearning Guild’s Super Spotlight on eLearning Fundamentals, Get All You Need to Create Effective eLearning, December 12 & 13, 2018. Bianca Baumann will present Give Your eLearning Design a Face-Lift Now with UX/UI Principles. Register today!