We instructional designers often stress the importance of measurable learning objectives and top-notch content - and for good reason - but we also need to stress the importance of the overarching user experience (UX). Whether we're creating instructor-led, virtual, or eLearning experiences, we need to think beyond just the what and how of teaching. We need to make learning experiences instructionally sound (good ISD), functional (good UX), and aesthetically pleasing (good UI).
One way to integrate UX practices into your instructional design work is to think through the navigation and layout of your eLearning screens before adding any content. This ensures the structure and flow of the course are intuitive and user-friendly from the start.
Through this lesson, you will learn how to create a learner story, a task flow, a user flow and a set of wireframes for an eLearning course.
Write a learner story
Alongside writing learning goals (which identify knowledge, skills, and attitudes an organization wants learners to master) we should also write learner stories, which help identify the learners, their needs, and their goals.
The format of a learner story is simple:
As a [describe your target audience], I need to [complete the learning requirements] so I can [insert the performance goal].
Here are a few examples:
As a newly hired customer service representative, I need to demonstrate mastery of the GREET model so I can start taking live calls.
As a member of ABC County, I need to complete a financial responsibility course so I can qualify for financial support.
As a salesperson, I need to identify the features and benefits of our new product line, so I can sell them to my clients.
Create a task flow
Once you have a learner story (or a set of learner stories, depending on the complexity and learner needs of your project), it is time to create a task flow. Now, the concept of task analysis is not new to instructional design. It is the process of outlining the tasks required to do a skill. However, in the UX context, we use that same process to identify the tasks required to navigate the learning experience.
For instance, let's revisit the customer service learner story above. The learner needs to demonstrate mastery of the GREET model, and that company has decided to assess these skills via a series of simulations. Here is one possible task flow, which focuses on the navigation of this learning experience:
Entry point: The learner launches the eLearning course from an LMS.
Success criteria: The learner reaches the final page of the eLearning course (to trigger a course completion).
Launch the eLearning course from the LMS.
Watch the welcome video, which provides an overview and quick demonstrations of the GREET model.
Visit the main menu and select a simulation.
Accept and complete the simulated call using the GREET model (note: each simulation includes guided tips, scripts, and feedback for each task):
Greet: Greet the customer.
Relate: Build rapport with the customer.
Explore: Ask open-ended questions to discover the customer's need.
Evaluate: Assess the situation and provide assistance and recommendations.
Transition: Transition to the next step or action.
Repeat steps 3 & 4 for all simulations.
Review the course summary.
Complete and pass the final assessment (unlimited retakes available).
Receive the course completion confirmation on the final screen.
Create a user flow
The user flow is a visual depiction of your task flow, illustrating how the learner will navigate through the experience. Include each screen the learner needs to pass through from the start of the experience to the end. It may be linear or it may be dynamic, depending on the flexibility you are giving learners.
Let's continue with the customer service example. If we were to allow learners to complete simulations in any order of their choice - yet require all simulations to be complete before advancing to the course summary - the user flow might look like this:
If desired, designers can assign numbers to each screen so they can map the wireframes back to the user flow.
Create wireframes
In UX, wireframes are still images that - at a minimum - depict the layout and navigation of each screen. Wireframes can be low, mid, or high fidelity, each increasing in its level of detail. Designers should start with simple black and white sketches that identify layout and navigation and then, through testing and feedback loops, they can begin to add more content, style, and functionality.
For eLearning design, the goal is to create an experience that is functional (good UX), aesthetically pleasing (good UI), and instructionally sound (good ID).
Designers can use pencil and paper for low fidelity wireframes and software tools like Figma and Sketch to create mid and high fidelity wireframes.
Take a look at how the Main Menu for the customer service eLearning course has progressed over time:
Low fidelity
When creating this low fidelity wireframe, a designer searched Dribbble for layout and navigation inspiration and recreated the structure of a sample they liked. When the designer presented this wireframe through testing, the designer received feedback like "I know I can click on the images to start the simulations, but I'm confused about why the text is overlapping the top image. Will that be hard for some people to read? What is that section for anyway?" and "What if I want to go back and watch the video that played before this?"
Mid fidelity
After thinking through the feedback, the designer modified the layout and navigation and added placeholder content. In this version, the designer added a video icon in the upper right so learners could replay the welcome video. They also separated the top image and text so they no longer overlapped. When the designer presented this mid fidelity wireframe to testers, they received feedback like "The navigation is clearer now" and "Do I really need this text here? I assume its a summary of what I just heard in the video, but I also assume I'll hear those ideas again and again in the guided simulations. It might feel like overkill."
High fidelity
With additional insight from testers, the designer creates a high fidelity wireframe that aligns with the client's style guide. In this version, the designer decided to reduce the screen text, highlight the button the user should select first, and gray out (and disable) the other buttons. You may have noticed the designer also changed their mind about the user flow. Instead of allowing the learner to select any simulation, learners are now forced to complete them in order.
Now it is your turn! Grab a pencil and paper or create a free account with Figma and practice making wireframes for the customer service scenario shared throughout this lesson. Recreate the Main Menu presented here or wireframe another screen from the user flow shared earlier.
Summary and next steps
Designers already know that focusing on instructional objectives and bringing content to life in engaging ways (e.g. scenarios, storytelling) are central to the success of a project - but don't overlook the user experience. Even an instructionally sound experience can prove useless if learners cannot access and navigate what they need to succeed. As part of the front-end activities in your project, remember to integrate UX practices like learner stories, task flows, user flows, and wireframes to ensure you lay the groundwork for a great learner experience.
Comments