By Brittany Miller | Digital Learning Coach, Friday Institute

Imagine staying as a guest at a Bed & Breakfast home where there was no clear or organized purpose for different rooms.  The kitchen sink resided in the room with your designated bed, so those throughout the house had to navigate around you to clean the dishes.  A disregard for harmonious and purposeful arrangement such as this would be overwhelming and confusing, and would probably ensure a short stay at such a Bed & Breakfast.  While it seems ridiculous that such design decisions would be made in the physical space, we have all experienced an online learning website or course that left us with the same kind of feeling this Bed & Breakfast.

Online instructional design is much like interior design. For guests of both physical and digital spaces, the design needs to be inviting, interesting, and engaging – a place that grabs their attention, invites them to get comfortable, and stay for a while. In this way, laying out information and order within an online course needs to be clean, organized and easy to navigate by design.

Key Icon Key 1 | Don’t crowd the entrance.

Envision when you first entered the disorganized Bed & Breakfast. From  the moment you step in, the entrance is overloaded with furniture haphazardly arranged. A sofa is set next to a refrigerator, without any reason or purpose. You might hesitate a moment, and question your willingness to continue, because if the entrance to this space is this overwhelming – how might the rest of it be? The same concept can be applied to the main page of an online course. The entrance of any space in both the physical and digital world should be welcoming, open, and light. Every element of your online course home page should have a clear purpose. Before placing a new tool or piece of information on the homepage, ask yourself if it really belongs at the entrance to your course. Is this Twitter feed essential to the learning of my students or participants from the moment they enter? Or might it better belong on another page? The purpose of the home page should be to provide students with essential information that they will need throughout the duration of the course, as well as a clear method to navigate the course.

Tips for Consideration:

  • Make essential resources, such as “Grades,” “Units,” or “Course News” focal points on your homepage..
  • Utilize a smaller column to the right of your main course page to provide simple navigation or methods of engagement such as course news or a course chat room.
  • Display progression through the course in a clear, visual manner, such as units organized in a grid with numbers or icons that identify what order students should navigate the course.
  • Provide course news or a celebratory feed at the top of your main page to highlight student engagement or quality work within the course.
Key Icon Key 2 | Make it Flow.

From the entrance of the Bed & Breakfast, you transition to an interior room that is clearly distinct in design and decor from the rest of the house. This sudden disruption in the flow of the home might take you by surprise. Your expectations on the overall design and layout have been set from the entrance, and a space that suddenly disrupts the overall flow of the house might initially confuse you as you have to relearn and reset your expectations. Online instructional design requires the same attention to overall design, color choice, and flow. Utilizing a set color scheme, font template, and icon set throughout the entirety of a course supports participants in the navigation and interpretation of an online course. Using a single icon to signal to participants to read an essential resource placed in the same location in every unit will identify to the participant the purpose of the resource or the expectation of engagement tied to that resource. Consistency is essential across a course to ensure that participants successfully navigate and complete the activities expected of them.

Tips for Consideration:

  • Utilize a 3 color system across your course using analogous or triad color harmonies to build an online space that is visually pleasant for the participants. This color set can be used with text to flag headers as well, but be consistent, and ensure the color is easy for the user to read.
  • Utilize a consistent icon set to flag important or required materials, activities, or resources. Iconfinder is one tool that provides free icon sets.

Chose one easy-to-read font at reasonable font size, with 1.5 line space to support your participants and encourage them to read the text within the course. More modern text styles tend to engage younger readers. For more information on how text effects readers online, check out this resource.

Key Icon Key 3 | Provide easy navigation.

Within a Bed & Breakfast, there are spaces organized and structured for a specific purpose, with clear access points for easy and safe navigation. Defining spaces within an online course for different purposes is much the same. Just like you do not crowd your main home page and align it with a specific purpose, you also do not want to crowd or confuse your other spaces either. When you realize that one of your spaces and web pages is beginning to lose sight of its purpose, consider moving a portion of the content into a different space. When building your course, evaluate your online course from the viewpoint of your participants. The organization and pathways within your course should make logical sense, with each web page and each lesson, activity, resource or tool within each web page aligned to a specific purpose. Adjusting and formatting your course in this way provides participants and students methods of easy navigation and clear expectations for progression through the course.

Tips for Consideration:

  • Utilize icons for specific actions that are consistent across the course.
  • Integrate a progress bar into each unit to display where participants are within a unit and/or what they have completed.
  • Provide a simple checklist at the start of a unit so participants know what is expected of them.

Closing Thoughts

In engaging participants and students in online environments, it is all the more essential to build with clear and simple navigation, progression and expectations. Clutter, disorganized navigation, or varied color and text choices can significantly affect student engagement level and success within your course. For the success of both your course, and your students or participants within your course, align your content to the three keys of course design.


“Color Harmonies: complementary, analogous, triadic color schemes.” Accessed 9 Dec. 2016.

“The Effect of Typography on User Experience & Conversions.” 18 Mar. 2014, Accessed 9 Dec. 2016.