How Five Web Design Principles Boost Student Learning in an Online Course

“Our team realized quickly that we needed to do a better job cross referencing material on our course site. For example if we mention syllabus, we must link to it. Some students we have learned want a great deal of guidance” MOOC instructor, Karen Head (2013)

In the quote above, without realizing it, the instructor was referring to the concept of ‘user experience’. And it’s not guidance students wanted so much as an intuitive learning experience. Creating a user-friendly course site begins with incorporating web design principles. Even the most basic of principles customized to online course design reduces barriers associated with virtual learning by minimizing distractions, highlighting concepts and making resources readily accessible. Embedding a link into the phrase ‘assignment guidelines’ for instance, when the assignment is referred to within a course page, is an example of making resources readily available (if the assignment guidelines are within the syllabus, refer students to the page number). This reduces the amount of time students spend searching and frees up time for learning.

The challenge of designing online courses is not only pedagogical, but also technical, which is the category that ‘usability’ falls under. We are at the point with online learning where pedagogy and technology are interdependent; where a well-designed, user-friendly course with a clear learning path needs to adhere to technical principles as well as pedagogical ones. Technology is a new form of pedagogy. The course site design, how content is presented, is an aspect of online pedagogy. In this post I cover five principles of web design that are essential to online course design.

Retail sites frequently adhere to best practices for web design given customers (users) are more likely to spend time and money on an attractive, intuitive website. I suggest educators use similar web design principles to support their students.

Before we examine the principles, defining user experience (UX) is in order. There are numerous definitions of user experience but the one below specific to web design, incorporates key elements of the entire experience:

“User experience (UX) is about how a person feels about using a system. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction (HCI) …. It also covers a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s performance, feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change…” All About UX

Five Principles of Web Design Applicable to Online Course Design

1. Design for the user
This seems obvious—design a course from the student’s perspective, yet it’s an atypical approach. When designing a web page for a course site, always ask ‘how will this look to the student’? Anyone involved in online course design needs to take an online course as a student. Completing at least one week of course work in a MOOC for example, gives one an entirely different perspective on course design—guaranteed. Design the course from the student’s perspective—always.

2. Consistency
For online course, consistency is probably the most under-utilized principle. Specifically in terms of how resources are titled, labeled and/or placed within the course site. I’ve taken many courses where the same resource, an article for instance, is referred to by two different names—in the syllabus it’s titled one way, and in the course site another. Confusing. Same goes for assignments, calling an assignment by slightly different names, even by one word suggests there are two assignments, not one. Another, posting the same document in two different locations within the site suggests there are two different documents. The time students spend searching, checking, comparing etc. is valuable learning time that is spent on logistics. Consistency is key.

3. White Space
Effective use of white space emphasizes key concepts, improves comprehension (up to 20%) and reduces cognitive overload (Lin, 2004). White space is the part of a web page that is left blank or unmarked. It’s the (white) space between columns, text, images, and margins on the page. This space provides visual relief to the reader and improves readability. Avoid using big blocks of text. Break it up with a graphic, or block of white space or increased line space. See examples below.

Example of text with little white space.

Same text as above but with increased line spacing. Effective use of white space improves readability.

4. Simplicity
In keeping with the idea of white space is simplicity. A cluttered page with three or more colors of font, sizes of font and images placed sporadically throughout that are of different type and size creates a chaotic-looking virtual classroom. It’s far easier to study and focus on learning in a physical classroom that is organized with minimal distractions. The same goes for an online classroom. Keep it simple, two colors of font, same size and style throughout, organized and consistent pages creates a Zen-like classroom where students can focus on course content and application of concepts. Learning is enhanced greatly.

“The way information is organized and presented to students affects not only the usability of information, but the usability of the course itself” (Young, 2014)

Tabs grouped by category (Coursera)

5. Use Tabs Effectively
Imagine opening a file drawer that is full of file folders with inaccurate or missing labels. The same principles of file labels apply to web sites except rather than alphabetized listing, it’s an order that makes sense to the student. For example the ‘start here’ tab should be at the top of the menu not third or fourth down the list (which happens more often than you would think). Tabs should be two words (max 3 words), and with descriptive language, ‘Start Here’, ‘Week One, or ‘Student Support’ for example.  Use sub-tabs if possible, and if not group tabs into categories (screenshot right). Also avoid CAP LETTERS for titles of tabs. CAPITAL LETTERS can appear loud and abrasive on a website (there are exceptions as the screenshot above right demonstrates).

Conclusion
Developing an online course is a multidimensional process. Usability is one dimension often neglected; understandably so given that most educators approach online course design with little expertise in web design. Yet a little goes a long way—by implementing just the basic web design principles, educators can create an intuitive learning path that gives students the boost they need to invest more time in learning, not searching.

References/Resources

• Head, K. (2013, September 6). Lessons learned from a freshman composition MOOC. The Chronicle of Higher Education. Retrieved from http://chronicle.com/blogs/wiredcampus/author/khead
• Introduction to web accessibility. (n.d.). Retrieved from http://webaim.org/articles/visual/colorblind
• Lin, D. Y. M. (2004). “Evaluating older adults’ retention in hypertext perusal: impacts of presentation media as a function of text topology.” Computers in Human Behavior, 20.
• Misfud, J. (2011, October 17). 14 Guidelines For Web Site Tabs Usability – Usability Geek. Retrieved from http://usabilitygeek.com/14-guidelines-for-web-site-tabs-usability/
• Morris, I. (2015, February 16). White Space – A perfect Option For Improving Usability In Web Designs – Usability Geek. Retrieved from http://usabilitygeek.com/white-spaces-improving-usability-web-designs/
• Young, H. N. (2014). Putting the U in MOOCs: The importance of usability in course design. In The invasion of the MOOCs: The promise and perils of Massive Open Online Courses. Retrieved from http://www.parlorpress.com/invasion_of_the_moocs