As educators and instructional designers, one of our tasks is to create online learning environments that students can comfortably use to complete their course activities effectively. These platforms need to be designed in such a way as to minimize extraneous cognitive load and maximize generative processing: that is, making sure that the learners’ efforts are spent on understanding and applying the instructional material and not on figuring out how to use the website or app. Research and practice in User Experience (UX) design – more specifically, usability – can give us insights that we can apply to improve our course page design and organization.

Getting Started: General Recommendations

Steve Krug, in his classic book Don’t Make Me Think: A Common Sense Approach to Web Usability, explains that, in order for a website or app to be easy to use, the essential principle can be stated as “don’t make me think” (Krug, 2014). That may sound like a strange principle in an educational context, but what Krug referred to is precisely the need to avoid wasting the users’ cognitive resources on how a particular platform works (thus reducing extraneous cognitive load), and to make them feel comfortable using that product (enhancing generative processing). When looking at a web page or app, it should be, as much as possible, obvious what information is on there, how it is organized, what can be clicked on, or where to start; this way, the user can focus on the task at hand.

Krug (2014) provided a few guidelines for ensuring that the users effortlessly see and understand what we want them to:

• Use conventions: Using standardized patterns makes it easier to see them quickly and to know what to do. Thus, in online courses, it helps to have consistency in how the pages are designed and organized: consider using a template and having standard conventions within a program or institution.
• Create effective visual hierarchies: The visual cues should represent the actual relationships between the things on the page. For instance, the more important elements are larger, and the connected parts are grouped together on the page or designed in the same style. This saves the user effort in the selection and organization processes in the working memory.
• Separate the content into clearly defined areas: If the content is divided into areas, each with a specific purpose, the page is easier to parse, and the user can quickly select the parts that are the most relevant to them.
• Make it obvious what is clickable: Figuring out the next thing to click is one of the main things that users do in a digital environment; hence, the designer must make this a painless process. This can be done through shape, location or formatting—for example, buttons can help emphasize important linked content.
• Eliminate distractions: Too much complexity on a page can be frustrating and impinges on the users’ ability to perform their tasks effectively. Thus, we need to avoid having too many things that are “clamoring for your attention” (Krug, 2014, Chapter 3). This is consistent with the coherence principle of multimedia learning, which states that elements that do not support the learning goal should be kept to a minimum and that clutter should be avoided. Related to this, usability experts recommend avoiding repeating a link on the same page because of potential cognitive overload. This article from the Nielsen Norman Group explains why duplicate links are a bad idea, and when they might be appropriate.
• Format text to support scanning: Users often need to scan pages to find what they want. We can do a few things towards this goal: include well-written headings, with clear formatting differences between the different levels and appropriate positioning close to the text they head; make the paragraphs short; use bulleted lists; and highlight key terms.

Putting It to the Test: A UX Study in Higher Education

The online learning field has yet to give much attention to UX testing. However, a team from Penn State has recently published a book chapter describing a think-aloud study with online learners at their institution (Gregg et al., 2020). Here is a brief description of their findings and implications for design:

• Avoid naming ambiguities – keep wording clear and consistent, and use identical terms for an item throughout the course (e.g., “L07”, “Lesson07)
• Minimize multiple interfaces – avoid adding another tool/platform if it does not bring significant benefits.
• Design within the conventions of the LMS – for example, avoid using both “units” and “lessons” in a course; stick to the LMS structure and naming conventions as much as possible.
• Group related information together – for example, instead of having pieces of project information in different places, put them all on one page and link to that when needed.
• Consider consistent design standards throughout the University – different departments may have their own way of doing things, but it is best to have some standards across all classes.

Are you interested in conducting UX testing with your students? Good news: Gregg et al. (2020) also reflected on their process and generated advice for conducting such testing, which is included in their chapter and related papers. You can always start small! As Krug (2014, Chapter 9) noted, “Testing one user is 100 percent better than testing none. Testing always works, and even the worst test with the wrong user will show you important things you can do to improve your site”.

References

Gregg, A., Reid, R., Aldemir, T., Gray, J., Frederick, M., & Garbrick, A. (2020). Think-Aloud Observations to Improve Online Course Design: A Case Example and “How-to” Guide. In M. Schmidt, A. A. Tawfik, I. Jahnke, & Y. Earnshaw (Eds.), Learner and User Experience Research: An Introduction for the Field of Learning Design & Technology. EdTech Books. https://edtechbooks.org/ux/15_think_aloud_obser

Krug, S. (2014). Don’t make me think, revisited: A common sense approach to Web usability. New Riders, Peachpit, Pearson Education.

Loranger, H. (2016). The same link twice on the same page: Do duplicates help or hurt? Nielsen Norman Group. https://www.nngroup.com/articles/duplicate-links/