User interface design and user experience design are often conflated, confused, or simply commingled. That’s unfortunate, since they address different—but equally critical—elements of an eLearning product.
UI, or user interface, design is about the look and feel of the eLearning. A UI designer will choose colors and fonts, design the look and feel of buttons and menus, and play with the placement of each element on the screen—everything that governs the appearance of the eLearning. The UI should fit with the content and the company’s branding: Animations or bright colors appear lighthearted; simulations featuring actors in business dress would set a more serious tone. The UI also implements the navigation and flow that are part of the UX design. A visual or graphic designer might do the UI design for an eLearning course; commonly, a single design professional does both UI and visual design, creating icons and buttons as well as selecting the typefaces and font sizes, colors, and more.
UX, or user experience, design deals with the learners’ interaction with the eLearning. It covers navigation, the actions a learner takes to progress through a module, and, less tangibly, the feelings that user experiences. The UX designer creates wireframes that lay out the content and provide a canvas for the UI designer to fill in. A wireframe can help all of the designers and developers identify problems, like poor navigation or too much text for a smartphone screen, that can lead to a frustrating user experience. A wireframe or prototype of the UX should be tested with potential learners to validate the design.
UI is part of the overall UX, and if different designers are working on these elements, close coordination is essential.
According to Dawn Schlecht, a blogger at Career Foundry, “UX makes interfaces useful; UI makes interfaces beautiful.”
Table 1: Charting the differences
|
UI: User Interface |
UX: User Experience |
|
Create tangible elements: Colors, placement on the screen, button size, choose typeface and size; many UI designers also create the icons and buttons |
Create conceptual elements: Navigation, “feeling,” determining how the eLearning module works and flows |
|
Design pages that make it clear to learners what to do, when, to progress toward their objectives |
Plot the steps learners take to reach their objectives |
|
Create a look that makes the hierarchy of content items obvious |
Determine the hierarchy of content items |
|
Decide where content is on the screen and its size relative to other content elements |
Decide which content items are on a screen |
|
Focus on the product |
Focus on user’s journey through the product |
|
Good UI design reduces cognitive load and sets an appropriate tone |
Good UX design fosters happy learners who are willing to engage |
A UX designer needs a deep understanding of the learners and their needs and goals in using the eLearning. The UX designer might interview potential or “typical” users and conduct other market research, create personas to help describe the target user, or create use-case scenarios. Key deliverables are wireframes and prototypes. The UX designer must be willing to test and iterate until the design works.
A UI designer needs a strong grasp of visual design principles and must understand the branding and the mood the eLearning should convey. The UI designer ideally would also understand and be able to include interactive and animated graphical elements in the interface. UI designers also need to be willing to test and revise based on user feedback.
References
Lamprecht, Emil. “The Difference Between UX and UI Design - A Layman’s Guide.” Career Foundry Blog. 25 April 2017.
Lanoue, Spencer. “UI vs. UX: What’s the difference between user interface and user experience?” User Testing Blog. 27 April 2016.
Ming, Lo Min. “UI, UX: Who Does What? A Designer’s Guide To The Tech Industry.” Co.Design. 7 July 2014.
Schlecht, Dawn. “5 Big Differences Between UX And UI Design.” Career Foundry Blog. 29 August 2016.