Designing for impact: how UX shapes learning design

In digital learning, user experience (UX) isn’t a nice to have, it’s a necessity. Good UX not only makes learning enjoyable but also increases engagement, comprehension, and retention. In contrast, poor UX contributes to confusion, dropouts, and learner frustration.

This blog explores the connection between UX and learning design, examining how key cognitive principles like Hick’s Law and the Von Restorff Effect  can inform your design decisions. Along the way, we’ll spotlight examples that show how UX directly shapes educational outcomes.

Why UX matters in learning design

Good UX in learning tools helps:

• Reduce cognitive load

• Create intuitive navigation paths

• Provide clear learning goals and visual feedback

• Support engagement and motivation

Bad UX does the opposite. Overloaded dashboards, unclear instructions, or unintuitive UI elements introduce friction that can derail learners, especially in self-directed environments.

Good vs bad UX in practice

In the Project e-scape initiative at Goldsmiths, University of London, students were guided through open-ended design tasks using a structured digital interface. Learners documented and reflected on their process. The UX design ensured intuitive navigation and logical progression.

Result: Students showed increased engagement, deeper reflection, and improved reliability in assessment outcomes (source).

In contrast, consider a poorly designed LMS landing page: learners are greeted by 20+ identical module tiles, cryptic icons, and little visual guidance.

Result: Learners experience choice overload, leading to decision fatigue (a concept rooted in Hick’s Law) and lower motivation to proceed.

UX problems?

Identifying a UX problem is just the first step. The real value lies in how you design around the learner’s cognitive needs. Below are five common UX challenges, with practical design actions and elearning-specific examples for each.

1. Define clear learning pathways

Problem: Learners feel overwhelmed or confused about where to start or what to do next.

Why it matters: Unclear progression increases dropout rates and cognitive load.

How to fix it:

• Use learning maps or visual “journeys” on the course home page (e.g. a visual timeline or level progression).

• Label each section clearly: Use plain, action-oriented titles like “Start Module 1: Explore the Basics” instead of “Unit A1”.

• Use completion indicators: Add ticks or progress bars to show learners what they’ve done and what’s next.

Example: In an LMS, instead of showing a flat list of modules, display a horizontal path:

2. Limit visible options

Problem: Learners are faced with too many choices at once.

Why it matters: Hick’s Law tells us that too many options slow decision-making and increase anxiety.

How to fix it:

• Chunk long menus into categories (e.g., “Learn”, “Test Yourself”, “Resources”).

• Use collapsible menus or tabs to show just one section at a time.

• Offer recommendations: Suggest “Next Best Module” or “Suggested Path” based on learner behaviour or role.

Example: In a scenario-based module, rather than listing 10 paths, offer 2–3 well-labelled choices:

These are meaningful options that align with real-world decisions, reducing overload and improving focus.

3. Apply progressive disclosure

Problem: Learners are shown too much information too early.

Why it matters: This overwhelms the learner and prevents them from focusing on the core learning goal.

How to fix it:

• Show only the essentials first, with the option to expand details.

• Use modal windows or “Learn more” pop-ups for supplementary information.

• Layer feedback: First show a basic reaction to a choice (“Correct!”), then offer deeper feedback for those who want it (“Why this was correct…”).

Example: When giving feedback in a branching scenario, don’t overload learners immediately:

This gives learners control over how much they want to dive into reflection, reducing friction for those progressing quickly, while offering depth to others.

4. Make navigation consistent

Problem: Learners get lost, frustrated, or unsure how to move through the course.

Why it matters: Inconsistent navigation causes disorientation and breaks the learning flow.

How to fix it:

• Use a fixed UI template across all screens or modules—buttons in the same place, same style, same names.

• Always include a ‘Back’, ‘Next’, and ‘Home’ button, even in sub-scenarios or layers.

• Avoid hidden menus or icons learners might not recognise. Use labels alongside icons, especially early in the course.

Example: If your first five modules use a “Next” arrow in the bottom right, don’t move it or change its label to “Continue” halfway through. Learners build navigation muscle memory, and breaking that costs cognitive effort.

Bonus: Run a tree test or first-click test to evaluate whether users can find what they need intuitively.

5. Test with real learners

Problem: Learning designers assume usability without testing.

Why it matters: What works for us as creators might not work for diverse learners.

How to fix it:

• Run think-aloud usability tests: Ask a few learners to complete a task while narrating their thought process.

• Use screen recording tools to watch how learners interact with your platform (e.g., Hotjar, UserTesting, or Morae).

• Start small: Even 3–5 users can uncover 80% of usability issues (according to Nielsen Norman Group).

Example: In one pilot test for a healthcare training module, users consistently missed the “Submit” button. It turned out it was labelled “Mark Complete” and placed under a collapsible section. Re-labelling and repositioning the button to the main viewport increased submission rates by over 40%.

Bonus Tip: think accessibility in UX

Many UX problems are amplified for neurodivergent learners, users with disabilities, or those with lower digital literacy.

Quick actions to address this:

• Ensure buttons and navigation can be used with a keyboard alone.

• Use alt text for all images.

• Avoid relying solely on colour for feedback (e.g., red = wrong).

• Provide closed captions and transcripts for all audio or video.

Example guidelines: WCAG 2.2 Quick Reference

Applying cognitive UX laws to learning design

UX isn’t just about look and feel: it’s grounded in cognitive psychology. Here’s how to apply some of the most relevant principles.

Hick’s Law – limit the choices

“The time it takes to make a decision increases with the number of choices.”

How to apply it:

• Keep main navigation menus under 5–7 items.

• In scenario learning, give learners 2–3 decisions per scene.

• Use filters and categories to simplify content discovery.

Example: In the University of Sydney Business School, learners explored stakeholder decision-making through scenario-based modules in a finance course. UX focused on limiting options at each stage to promote deeper thought and reduce overwhelm, an embodiment of Hick’s Law in learning.

Von Restorff Effect – make key items stand out

“Items that stand out are more likely to be remembered.”

How to apply it:

• Highlight important calls to action (e.g., “Submit” or “Next”) using colour or spacing.

• Use contrast to signal essential concepts.

• Visually emphasise feedback or important learner milestones.

Example: In an augmented reality scenario-based learning study (University of Jaén), key learning moments were visually enhanced to support retention. Researchers noted that these distinctive visual cues improved engagement and cognitive immersion (BMC Nursing study, 2023).

Fitts’s Law – bigger targets are better

“The time to acquire a target is a function of the distance to and size of the target.”

Larger targets are generally easier and faster to select than smaller ones, given the same distance. This is because larger targets offer a bigger “hit area,” making it less likely for a user to miss and requiring less precise movement.  In UX and UI, designers use Fitt’s Law to optimise the placement and size of interactive elements (buttons, icons, etc.) to improve usability and efficiency. 

How to apply it:

• Make touch targets large and spaced out, especially on mobile.

• Size matters: Avoid tiny clickable icons.

• Place high-importance actions close to centre screen.

Chunking and cognitive load

Breaking content into “chunks” reduces cognitive load and supports memory.

Tip: Use bullet lists, visuals, and short text blocks.

Example: In a medical education study published in Advances in Physiology Education, students authored clinical case scenarios. UX elements that chunked content (e.g., collapsible panels, clear headings) helped learners develop higher-order skills such as evaluation and synthesis (source).

Feedback loops

“Learners need timely, relevant responses to their actions to stay engaged and understand consequences.”

What it is: A feedback loop is the process of providing information back to the learner after an interaction such as answering a question, making a decision, or completing a task. Effective feedback loops support both behavioural reinforcement and metacognitive reflection.

How to apply it:

• Immediate feedback: Confirm actions with a response (“That’s correct!” or “Try again”) right after the learner acts.

• Reflective feedback: Provide deeper explanations after key decision points either embedded in the scenario or as optional layers.

• Visual/auditory cues: Use colour shifts, animations, or sound to signal correct/incorrect actions, or changes in state. However, be mindful of any accessibility requirements when using such cues.

Example: In the Software Engineering Ethics Game by Xenos & Velli, each learner decision triggered feedback that included both immediate results (e.g., reputation points gained/lost) and longer-term narrative shifts. These layered feedback loops encouraged ethical reflection and increased learner satisfaction.

Tip: Tie feedback directly to learner actions. Make it clear why something was correct or incorrect. Good feedback loops don’t just say “Well done!” they build understanding.

UX in interactive scenario learning

Scenario-based learning requires even more intentional UX, because learners interact with branching pathways and dynamic feedback.

Common UX challenges

• Learners can’t see where they are in a scenario.

• Too many decisions at once equals cognitive overload.

• No visual feedback on the consequences of choices.

Solutions

• Limit decision branches at each stage (2–3).

• Use clear progress indicators (e.g., breadcrumbs or “You are here” markers).

• Use distinctive feedback (Von Restorff again!) to show learners how their choices affect outcomes.

Example: A study by Xenos & Velli (2019) evaluated a narrative-based game that taught software engineering ethics. Learners navigated realistic dilemmas in a choice-driven UX. The interface used limited decision points, clear consequences, and highlighted feedback. Result? Significant gains in ethics comprehension and user satisfaction (IEEE Access paper).

UX in practice: AR/VR & reflective tools

Interactive learning environments like VR require next-level UX thinking.

A review of VR-based evacuation training tools showed that immersive environments improve learner retention, but only when interface usability is high. Confusing controls or lack of orientation reduces effectiveness. Other UX considerations include:

• spatial awareness – remember that your learners are moving in a 3D space
• haptic feedback – incorporate tactile sensations such as vibrations to indicate when a learner is interacting within the VR space
• mobile sickness – avoid a clash of what learners see in the VR space and what they feel in the physical world

Tip: In VR or immersive tools, use simple gestures, clean UI, and progressive discovery to guide learners.

Practical UX checklist for learning designers

Learning experiences that truly resonate

UX in learning isn’t just about making things “look nice” it’s about reducing cognitive barriers and guiding learners with clarity. By applying good UX design practices, grounded in psychology and user testing, you can drastically increase the effectiveness of any learning experience.

These improvements, whether it’s adding clearer navigation, applying progressive disclosure, or simplifying learner choice, are relatively small changes with massive impact.

A well-crafted experience supports memory, motivation, and mastery. Poor UX does the opposite: it introduces confusion and cognitive overload.

By embracing cognitive principles like Hick’s Law, the Von Restorff Effect, and Fitts’s Law, and grounding your work in research-backed strategies, you can craft learning experiences that truly resonate.