Before we get into UI, let’s get into the bigger piece of the umbrella. UX.

The way I look at it, there is 2 significant part of UX in e-learning design:

1. UX as a holistic process

2.UX as part of the e-learning interface design.

UX design is a big umbrella, and UI is an integral part of the implementation process.

And there are so many UX terms out there on Google. But don’t worry, there is ongoing discussion around the definition as the design process evolves over the years. If you want to understand the difference between UI & UX in 6 mins, this is a great video I found that explains that well.

THE DIFFERENCE BETWEEN UI & UX

What is UI vs. UX Design? A Practical Example in Under 6 Minute

‍

The Analogy between UX design in digital design vs ADDIE:

When I first entered the world of learning and development, what I find was tricky was actually understanding the terms/jargon. But I actually find a lot of process overlap and parallels between digital design i.e. website and e-learning design process. Look at the comparison table below:

UI design sits in the Design & Development (Prototype) phase. However, throughout the whole process, UX is always playing a part.

WHAT IS USER EXPERIENCE (UX) DESIGN?

UX covers the behaviour, attitudes and emotions that learners experience on e-learning.

As a whole, UX design is looking after:

1. What is the learner’s behaviour, environment, needs or challenges
2. What is the learner’s journey map
3. How does the e-learning solve business and performance problem
4. How does the course make the learner feel
5. How can we make the course fits the learners need

Here are 10 things where UX get involved in e-learning design:

1. Consistent navigation and layout
2. Concise and clear writing
3. Accessibility guidelines
4. Content chucking i.e. segmentation and proximity
5. F-shaped reading pattern
6. Leaving out unnecessary content, distraction-free
7. Unobstructed flow of use
8. A clear purpose of each activity and slide
9. The sequence of the content
10. Motivational element, i.e. progress bar or badge

Read more in-depth into what makes good UX design by AdobeXD:

https://xd.adobe.com/ideas/principles/web-design/what-makes-good-ux/

And you will see even in designing the user interface, you still need to think about UX.

WHAT IS USER INTERFACE (UI) DESIGN?

UI involves designs of surfaces or look of screens, button, icons, image, text, and all visual elements a learner can interact with on e-learning.

Adobe XD defines it as a “space where interactions between humans and machines occur” There are two parts of the user interface:

1. Visual design - conveys the look and feel of a product
2. Interaction design - which is the functional and logical organisation of elements.

Read more about it at Adobe XD Ideas:

https://xd.adobe.com/ideas/process/ui-design/

9 Elements in UI design in E-learning

1. Typography i.e. font type, size
2. Hierarchy i.e. Heading 1
3. Layout i.e. alignment
4. Images & graphics i.e. treatment of images, graphics, images, color
5. Color
6. Consistency i.e. consistency in color and font, layout, the effect of a button
7. Navigation or buttonn i.e. color, shape, effect, layout
8. Accessibilitiy i.e color contrast, font size
9. Spacing i.e. balance of negative and positive space

Here’s the graphic that hopefully helps:

UI & UX in Learning Experience Design, Instructional Designer, E-learning Designer

Further reading:

https://www.ispringsolutions.com/blog/how-to-create-online-course/lesson-7

https://medium.com/amsterdam-standard/ux-design-for-e-learning-f70ea302e75a