Buzzword Decoder: UI and UX—What’s the Difference?

August 8, 2017

User interface design and user experience design are oftenconflated, confused, or simply commingled. That’s unfortunate, since theyaddress different—but equally critical—elements of an eLearning product.

UI, or user interface, design is about the look and feel ofthe eLearning. A UI designer will choose colors and fonts, design the look andfeel of buttons and menus, and play with the placement of each element on thescreen—everything that governs the appearance of the eLearning. The UI shouldfit with the content and the company’s branding: Animations or bright colors appearlighthearted; simulations featuring actors in business dress would set a moreserious tone. The UI also implements the navigation and flow that are part ofthe UX design. A visual or graphic designer might do the UI design for aneLearning course; commonly, a single design professional does both UI andvisual design, creating icons and buttons as well as selecting the typefacesand font sizes, colors, and more.

UX, or user experience, design deals with the learners’interaction with the eLearning. It covers navigation, the actions a learnertakes to progress through a module, and, less tangibly, the feelings that userexperiences. The UX designer creates wireframes that lay out the content and provide a canvas for the UI designer to fill in. Awireframe can help all of the designers and developers identify problems, likepoor navigation or too much text for a smartphone screen, that can lead to afrustrating user experience. A wireframe or prototype of the UX should betested with potential learners to validate the design.

UI is part of the overall UX, and if different designers areworking on these elements, close coordination is essential.

According to Dawn Schlecht, a blogger at Career Foundry, “UXmakes 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 deepunderstanding of the learners and their needs and goals in using the eLearning.The UX designer might interview potential or “typical” users and conduct othermarket research, create personas to help describe the target user, or createuse-case scenarios. Key deliverables are wireframes and prototypes. The UXdesigner must be willing to test and iterate until the design works.

A UI designer needs a strong grasp of visual designprinciples and must understand the branding and the mood the eLearning shouldconvey. The UI designer ideally would also understand and be able to includeinteractive and animated graphical elements in the interface. UI designers alsoneed to be willing to test and revise based on user feedback.