As mentioned from day one, this coffee course mainly focuses on the appearance and navigation of online learning environments which can be related to user interface design more than course design as a whole. We hope some concepts and practices from user interface and visual design may help you to improve the look of your course and learner experience. Hence, we’ll share with you some insights from these areas in today’s post. Keep in mind that some of these principles may not be transferable to all learning management systems (LMS) but they are useful concepts to when designing course sites in general.
Detox your content and page
In Day 2, Rebecca briefly discussed strategies on how to map and structure content based on student needs and learning outcomes. At the end of the post, she demonstrated one way of visualising your content structure as a page layout. Now that you have an imagination of the layout of your page, how can you translate this into an actual course site?
Whether you have a new or rolled over course site, you should begin by detoxing your content and page. After creating/re-creating the structure (e.g. labelling sections by topic/week) for your content on your course site, you will need to begin grouping and labelling items.
Here are few things you can do to detox your front page:
- Make sure you have a dedicated forum, or similar, for your announcements. The purpose of this practice is to direct your students’ attention to all important messages to one place so that they know where to go first. This also helps you to keep track and even set up messages that go out as emails to your students.
- Have a brief welcome message with links to your lecturer’s biography and a longer version of your course information on a separate page or post. Remember you do not want to overwhelm your students with too much information on the front page!
- Don’t leave all the details of your content on the front page. An abstract or short paragraph would be sufficient. You want to keep your front page neat and tidy so that users can find things easily via links. Avoid adding long text descriptions to your content on the front page – a well-labelled file or folder should do the job!
- Don’t be afraid to divide your content into smaller sections/pages. You can use tools such as a Book or Lesson in Moodle (or equivalent tools in other LMS environments).
- Group materials together using folders or pages to remove clutter on your homepage. It also helps students to group ideas together better!
- Avoid using too many images, especially on the front page. A good practice is to use image-banners and/or icons to identify key elements of your course.
- Turn autoplay off on any video files. Videos can sometimes crash your course site if your LMS is not equipped to play videos properly. It can also be a source of annoyance for users each time they enter the site. We recommend streaming large video files from YouTube, Vimeo or similar.
Simple, Simple, Simple
The task of educators is to find a way, within the resource and other constraints we face, to create an online learning environment for students which is as visually appealing as possible, simple, easy to navigate and avoids confusion. One of the biggest constraints most higher education academic teachers face is the LMS used by their institution, and the way it is configured within the institutional environment to provide stability for users and to meet legal and record-keeping requirements.
The most successful sites often have a straightforward visual design/user interface which leads the user directly to their tasks, is easy to read or even invisible to the user. The benefit of simplicity in your design is that it draws your learner into the course content. Audience attention, which can be as short as 10 seconds, may be easy to get but hard to keep. Therefore, getting straight to the main point is key to holding learners’ attention. Some clear dot points with icons, and short compelling content accompanied by a relevant image will make an excellent start.
“Simple” not only means easy for your learners to use but also uncomplicated, or even effortless, to maintain and reuse. Utilising existing tools in your LMS is often a better option than considering a new add-on tool. This helps to avoid the need for additional training when handing over to new staff, and negates the need for special applications to run your site.
Simple also means removing unnecessary elements or hiding them from end-user view. This can boost loading speeds which is a big concern for users, especially online students. Improving load time can be achieved by reducing the size and resolution of images and files, saying ‘no’ to flash and instead streaming videos via external platforms such as Youtube and Vimeo.
“An image is worth a thousand words” – We all know this quote. Photos, video, drawings, or GIFs can draw user attention much better than a page with only text. We also have access to a range of quality images through free stock photo websites like Pixabay, Pexels, Unsplash, and Stocksnap, or with a bit of donation: Littlevisuals.
Images can be used to create banners on front pages and to visually demonstrate your content. However, the biggest challenge is how to use an image well, especially when there are multiple competing content/images. The best practice is to use images only when they are relevant and complementary to the content in your course (See Noack, 2018).
Don’t forget to add Alt text to your images and label them with meaningful names. These are important principles to improve search and user accessibility of your site.
Even though the value of using images is apparent, there are some factors you might want be aware of. Firstly, stock images can make your site less attractive as they are generic, available for everyone to use and may appear on multiple sites. Users are generally attracted to something unique and special. Also, free stock image websites do not have extensive libraries for you to choose from. You may not be able to find images that suit your content or purpose. Copyright is another factor to be aware of. If you are in this situation, try out Canva – a simple online tool that allows you to create or edit free stock photos that are not affected by copyright considerations.
Do you currently use images in your courses, if so how?
“If users cannot find what they’re looking for, they have no reason to stay on your site.” (Austin, 2017)
It is frustrating if you are unable to find the materials you need. This is a very common problem for students especially when they have to revisit a course site after 4 -5 months to find an article or lecture notes. If you receive similar feedback from your users, it might be time to review your navigation. Think of navigation like a map which points out all the most visited places (or content) and the direction users must take to get there.
Below are some “tricks” you can apply to your site that will make it easier to navigate:
- Avoid long and confusing label titles
- Put navigation links where they are obvious
- Be consistent in the placement of your navigational menus and links
- Arrange navigation items by order of the information flow or in a logical order of priority.
However, many learning management systems don’t provide much in the way of navigation options for designers, which leads to the long and deadly scroll of the course site. These issues can be improved by adding some quick jump links to sub-sections from the top of the page and “Back to the top” buttons. If there are many layers of subpages, don’t forget to provide your user with a way to get back to your front page.
“Because colours have an extraordinary ability to influence mood, emotions, and perceptions; take on cultural and personal meaning, and attract attention, both consciously and subconsciously” (Kliever, 2018)
Colours can affect the way your users’ understand the site. Below are some good tips on how to use colours:
- Be aware of your colour contrast and combination. To improve the design and readability of your text, avoid laying text which has a similar colour to your background (e.g. Black text on a deep blue background). Dark blue, grey or black on white background, or white on dark backgrounds are usually recommended combinations.
- Account for colour blindness. You are likely to have readers with colour blindness or colour vision deficiency (CVD). When you use colours on your course sites, ensure that these colours are distinguishable. Learn more about distinguishable colours here: https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/ . You can also use Color Oracle to simulate colour blindness on your screen so you can check your resources and images.
- Don’t overuse colours. You don’t want to have a rainbow sign for your course – it could overwhelm your user! Select 2 – 3 main colours for your site and stay with it. For more tips on how to use colours, see Chris Lake’s advice on Econsultancy.
What do you think about the suggestions provided here for visual design of a learning environment. Do you agree that we can use principles from web design, or do you feel that these principles are not applicable to educational design? Are there any ideas here that you think you can use in thinking about your online course environment?
- Austin, Christine. (2017). 14 Essential Tips for Improving Your Web Design. Retrieved 27 June 2018 from https://www.impactbnd.com/blog/tips-for-improving-your-web-design
- Kliever, Janie. Color Theory. Retrieved 01 July 2018 from https://www.canva.com/learn/color-theory/
- Kucheriavy, Andrew. Color Accessibility – UX Best Practices for Using Color in Design. Retrieved 07 July 2018, from https://www.intechnic.com/blog/color-accessibility-ux-best-practices-for-using-color-in-design/
- Lake, Chris. (2008). 20 colour tips for website design. Retrieved 07 July 2018, from https://econsultancy.com/blog/2654-20-colour-tips-for-website-design
- Noack, Erick. (2018). The importance of adding high-quality images to your website. Retrieved 208 June 2018, from https://www.storedge.com/the-importance-of-adding-high-quality-images-to-your-website