Digital Content

Day 3: 5 Ways to improve the visual design of your course

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.
Image source: Pixabay.com StockSnap

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.

Using Images

“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.

Discussion

question mark    Do you currently use images in your courses, if so how?

Navigation

“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.

Using Colours

Image source: Pixabay.com Myriams-Fotos

“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.

You can check how accessible your colours are on these websites WebAIMAccessible Colors, Contrast Checker, and Snook.

question markDiscussion

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?

References

24 thoughts on “Day 3: 5 Ways to improve the visual design of your course

  1. As a professional staff member who often has to consider user experience on websites, the points about having alt text on images and considering colour blindness are really important. We use icons like ticks and crosses (as well as red and green) to highlight things that have been done/are yet to be completed. My other suggestion would be to include subtitles and/or a transcript on videos for users who either can’t hear or don’t have headphones/somewhere quiet to listen.

    1. Hi Jessica, thank you so much for your response. I agree with your point about including subtitles and transcripts when using videos in your course. You can also add alt text or alt tag to your video link. This will help users who need screen reader software to pick up the link.

    2. Jessica, I have slight colour blindness and will occasionally sit staring at a web page wondering where the “blue” button is. Also another reason for subtitles and transcripts on videos is accents. There are some US accents which I can’t understand.

  2. Over 20 years ago, I published a paper on the opportunity provided by this new “fangled internetty-thing” to demonstrate how knowledge and learning was inter-related or “webbed” (Brack and Trevitt, 1995). We created pages that were rich in links and hoped students would follow a myriad of pathways through ours material as well as branching into material elsewhere. We even placed a few “Easter Eggs” to promote exploration. There were certainly no simple “Next” links. We noticed students working together in computer lab exploring the link, talking to each other about the content and occasionally explaining how they got to interesting end points from simple/basic starting pages – often the end points were well beyond the level of understanding the course learning objectives stated, but the students were willing to go there and even bring their colleagues along. My co-author and I reveled in the fact that the web did not have to be linear and students did not have to progress form Chapter 1 to 2,…n. Of course, this is almost the exact opposite of the “simple, simple, simple”; “clear and transparent” advice …and even the Journal we published in is no longer available.

    Brack, C.L. and A.C.F. Trevitt (1995) Accessing the Data to Create the Knowledge: A Case Study from Forestry. Interpersonal Computing and Technology 3(1):9-16.

    1. For completeness regarding my earlier post today, I should note that the focus group and other feedback on the “web” nature of the resources back in the 1990’s was full of responses like “interesting, exciting, I never knew there was so much to do…”. Feedback in 2016 however (different course, but I tried the same approach) was more along the lines of “confusing, I didn’t know what was essential reading,…” I wonder if the change is due to new technology, new students, or new peadogogy?

      1. Interesting observation Christopher – almost a shift from “let’s explore” to “let’s be led”.
        Great post by the way team!

      2. Hi Cristopher. I do have an example showing people’s (online) information processing is changing. About ten years ago, a psychological study found sales would be significantly promoted if the close button of pop-up advertisements was moved from top right to bottom left. The idea was that the consumers could “better learn about the ad” by searching for the close button placed in an unfamiliar position. However, some more recent studies show that such a strategy will cause great “advertisement nuisance” (and hence hinder the sales). It looks like people’s attitude towards online contents is varying over time. I think it’s the same with the students.

      3. Hi Cristopher, I’m really interested in what you mentioned and am sure others have lots to contribute regarding this topic. Without having read your paper (which I am going to), I’m wondering if you think perhaps this may be because of how the online digital space has evolved over the years which in turn changed our habits and attitudes? With search these days, we gain information so quickly that it is difficult for us to handle taking time to look for something. Concepts such as the Internet of Things, the semantic and emotional web (Web 3.0 – 5.0), etc. all point towards the need for more convenience and automation. Perhaps that is changing the way we view online environments and what they should do for us. Sunny also made a good point about advertisements which made me think of how mass marketing is much less emphasised than personalised marketing these days. Our expectations have certainly changed and I believe, so have students! In saying this, I do think it is possible to be both simple in design but non-linear in experience – would love to explore this area in more detail. Thank you for such an insightful comment!

        1. Hi Lye,

          I love your observation that it is possible to be simple in design and non-linear in experience. Along with Cristopher’s post it’s inspiring me to rethink my course design. Thanks for the stimulus!

        2. Thanks Lye – I agree that things do seen to evolve very fast these days. Not just the technology, but also the ways users interact with that technology. It would be fascinating to look at student responses to “technology assisted education” even since the 1990’s. I feel like a dinosaur when I re-read my “cutting edge” paper of the 1990’s explaining what networked computers were and how readers could “drown” in search engine returns numbering in their hundreds! I am also old enough to have taught pre-PowerPoint, and was one of the first in my Department to use PowerPoint in lectures – before projectors, so we had to wheel in a few computer monitors for classes! However, students “loved it” – they loved the colour and the action of the transitions; it was all so new and bright, especially compared to overhead projectors and blackboards and their learning and “satisfaction” rose. Now of course, there are general complaints about death-by-PowerPoint and we as strong advised against colour and fancy transitions. Have linked digital resources simply gone the same way as PowerPoint …from bright and exciting and new to just a “ho-hum” everyday tool whose poor / non-standard / unexpected use just distracts. Will we soon be having the same conversations about Enhanced Reality?

    2. Cristopher, rest assured that your paper is still available on the the new “fangled internetty-thing” (Brack & Trevitt, 1995) . Much later than you, but still a long time ago, I tried creating rich course content and multiple pathways. But I found this very hard to produce and maintain. Very much later, as a student myself, I discovered the virtues of simple linear course design.

      Most university students are now part time (even if officially enrolled as full time). Students have limited time and money to achieve their educational goals. I learned this hard lesson when I had just one more course to do for a qualification. I could have done something challenging, but at the risk of failing, and thus wasting the tens of thousands of dollars and years of effort invested. So instead I went for the safe option with a course on a topic I knew something about: it was still useful and I still learned a lot, it was not as satisfying, but I PASSED.

      Reference

      Brack, C. L., & Trevitt, A. C. (1995). Accessing the Data to Create the Knowledge: A Case Study from Forestry. Interpersonal Computing and Technology Journal, 3(1), 9-16. URL http://www.helsinki.fi/science/optek/1995/n1/brack.txt

      1. Thanks Tom …and thanks for finding a link to that old paper of mine. BUT, the internet have once again proven that one can’t just rely on one’s memory any more – I remembered the wrong reference, and this paper does not detail the joys of multiple pathways as much as the paper I was thinking about. Sorry to those who might have been diverted by reading about the syntax of www addresses and uses of animations (how quaint all that sounds now). I’ll try to find the correct reference. Cris

  3. I met a few professors who maintained a “color consistency” in their courses. They used a specific and distinguishable color for all definitions, numerical examples, or course announcements across their lecture slides, course website, and even emails. I found the presentation of the courses more structured and logical by those carefully selected colors.

  4. I think that it’s absolutely important to think about web design principles when considering the design of learning environments. The principles listed above all assist in promoting student engagement, ease of navigation, and accessibility. I love the idea of ‘detoxing’ Wattle sites and the simple checklist here. It’s an important thing to do for a number of reasons, and for a number of people – students aren’t the only users accessing sites, and having pages full of historical resources will impact on lecturers, tutors, and administrators of the site. In this context, the comment about simple sites being easier to maintain and reuse is an important one, too, especially if sites are used by different convenors each session and accessed by a number of academic and professional staff.

  5. As a student, I get annoyed by distracting, irrelevant and bandwidth wasting images, so I as a designer I avoid the use of images in courses. If I really need an image to illustrate a point I will put the effort into doing it, but this takes a LOT of effort.

    In terms of navigation, I like course materials which are in chronological order: what the student has to do first comes first, second comes second and so on. Also I like to eliminate anything optional, especially optional extra readings (a keen student can find their own). As a student, I just want to know what I have to do next.

    Principles from web design have limited use in educational design. Educational designers should be focused on the design of the learning and assessment content, not the look of it. Other specialists can worry about the visual design.

    The visual design I like to use for course materials is “default”. That is, I use the basic HTML constructs, such as plain text, emphasis, strong, block quotes, and heading levels 1 to 6. I don’t specify any fonts or colors. So when my course content is loaded into a LMS it takes on the corporate style selected by that institution. When the student uses a mobile device, the content can re-flow to fit. A student with a disability can hear, or feel, the content with the appropriate translation of the formatting to suit them.

  6. I can’t take any of the credit for the aesthetic of the Wattle site that we use for the course that I teach, but I was reassured to read these materials because the suggestions that they make for colour scheme, use of images, simplicity and navigation all seem to have been taken to heart. The page that we use consists of a series of tiles that each branch off to a different section (e.g. one for assessment, one for the course study guide, calendar, course resources etc). This keeps the main page very simple. One other positive of this design is that it is consistent across all of the courses taught in this degree program, so that the students are pretty familiar with navigating it. There is a specific colour palette for each course in the program, which gives the site a ‘look’. One thing that we probably need to look at in more detail is whether the page in its current form is accessible – my sense is that we have not made much accommodation for people with visual impairment, and this is perhaps something we could do better.

    Thanks for the materials.

  7. Another observation about colour. While theoretically I understand the assertion that colours have an “…extraordinary ability to influence mood, emotions, and perceptions; take on cultural and personal meaning, and attract attention…” I don’t experience it myself. It is great advice to ensure the colours used in a website are distinguishable to the colour disadvantaged so they can at least find the “blue button”. However, if the use of colour is designed to influence moods, emotions, perceptions or learning then the designer might be missing the mark. For example, many colour advantaged designers will use RED to denote warning or critical information – implicitly invoking the natural red=danger/poison often seen in the “natural world” (red back spiders anyone?). There will be no equivalent visceral response if the red text is just seen as a lighter shade of grey or brown so any emphasis will be lost. What then really is the purpose of using colour?

    I’d love to see an experiment to map where students’ eyes focus on a page with colour-filled links and whether that changes with their ability to distinguish colour. Of course, that really is what colour-blindness test charts do with each chart having 2 images one of which is “hidden” by “distracting” colours.

  8. Yes! You made the point about colour blindness! This is a problem that I have noticed on many course websites — especially when people use only red and green to distinguish things. My partner is colour blind so this is something I am acutely aware of. I think that the principles of web design are the most relevant principles for educational design. Thinking about the user experience and navigability are definitely important.

    I occasionally use images in my courses, usually in the context of when I make announcements to all students, I include an image (usually a relevant meme) to draw students attention to the email. Students love to see courses (and lecturers) engaging with the way they use the internet, even if it is not done ‘natively’. I use https://memegenerator.net to create custom memes relevant to course content.

  9. The use of images can be tricky in Moodle because to making images responsive (change for different screen sizes and orientations) isn’t all that easy. Each time you upload an image you have to go to the appearance tab, delete the dimensions and add text to the Style box eg. max-width: 400px; width: 100%;
    I think it makes more sense that all images are responsive (if the original image is larger than shown the user can still zoom in to see details).

    Another thing to consider is where you set links to open as the default is in the same window/tab. Sometimes a smaller image will appear on a site and, when clicked on a computer, a full size version of the image will fill the tab but the user might close the tab not realising they have no way of getting back to the course site (other than selecting to reopen/undo close tab but not everyone knows how to do this). The same thing happens with links to external sites. To prevent people getting lost and giving up, I think it is a good idea to always set such links to open in a new/blank tab/window.

  10. Thanks for this useful post. I was not aware of the free stock photo collections, which will be handy for presentations. I had thought lots of photos on an LMS would be good but now see that simple headings and icons would be more useful. I agree to the principle of simple design including colour choices.

  11. I agree with some of the suggestions, and already implement detoxing, KISS, and navigation design. However, like Tom, I rarely use images unless it is worth the effort of doing it properly. Similarly, I am wary of colours, due to accessibility and interpretation issues. Instead, I find altering font size, style (bold, underline, caps, etc), or even spacing is often adequate to convey importance and draw my students’ attention.

    I believe that web design principles can apply to Higher Education, but are not a silver bullet. For me, a fundamental question is: “does something add value, or is it simply to look pretty?”. And yes, I acknowledge the potential value in looking pretty. But, I tend to preference pedagogical value in academia. Any web design principles that improve the user interface and interaction *in order to* enhance learning and teaching is a welcome tool.

  12. I often find it to be tough to utilize impactful images in a more science-based course-work as the type of visuals that are the most useful are dry graphs explaining theorems. However, occasionally if you spend a bit of time searching you can find a great cartoon or graphic that explains a particular theory in a relatable way. For example, I think we can all relate to the second law of thermodynamics as expressed here: http://justoutsidetheboxcartoon.com/wp-content/uploads/2012/05/img_0405.jpg

    Unfortunately, there is not always a handy humorous comic on hand for each theorem/law.

    Regarding the second discussion point, I absolutely agree that we should be applying principles from web design as these are optimized for usability and that is what we are aiming for in our online courses. I often find the worst thing about online coursework, is when the source or link you really need is hidden amongst a mass of other less important information. I think it’s important to remember in this case less is more. We need to focus on detoxing, or decluttering the online course material and stripping it down to the core of what we want the students to know and what we want them to submit. Minimalism is our friend.

    I also just thought I would mention here that when writing my articles, I make use if the color oracle software (https://colororacle.org/) as it allows you to view how colorblind people see your images/graphs and gives you a more practical idea of how to adjust your images so all can enjoy them. I will be extending this practice to any online course material that I use in the future.

    1. Hi Sarah, thanks for that fantastic tip about Color Oracle! That sounds like a fantastic resource! I will update the post to include this link as a resource 🙂

      I also appreciated your suggestions around detoxing / reducing clutter on our online teaching spaces. I know many educators I have worked with really struggle to reduce the volume of content. As subject matter experts, they know so much about their topic and often get stuck on what can be cut back when delivering it to students. Maybe we need to get Marie Kondo in to help us embrace the minimalist lifestyle! Does it spark joy??

  13. I plan to use the tip of dividing and conquering my Wattle cite into lessons with an uncluttered welcome page rather than having the default long, scrollable page now. In this way, I can also make each part visually more attractive as a lesson page that has a picture or two from my carefully chosen collection of stock photos (that I use on my slides already).

Leave a Reply

Your email address will not be published. Required fields are marked *

*