Good morning! We had some wonderful discussions on yesterday’s post. One observation we made from your comments is that there is a focus on the broader aspect of course and interaction design. What’s interesting is that visual design (i.e. web design, layout, use of colours) of course sites are often secondary to our thinking and subtly embedded in our experience rather than at the forefront of our considerations, especially if we use online learning environments (e.g. Learning management systems) as supplementary to our face-to-face teaching. In today’s post, we are going put visual design on the frontline and talk about the layout of your course site – can students navigate your site and find the content they need in the massive swamp of information?
Dealing with information overload
University courses are generally content heavy. And it isn’t surprising – academics are content experts. They know their subject matter well and have a lot of knowledge to share. After all, the purpose of higher education is broadly to cultivate knowledge that helps to “develop learners to work towards improving the conditions of society at large” (Chan, 2016, p. 6).
However, the amount of content provided does not equate to the amount of content learnt by students. Too much content may cause fatigue or exhaustion while too little content may not allow you to achieve your desired learning outcomes (see Monahan, 2015). Designing empathetic, student-centred courses and sites must therefore take into consideration the amount of content available and how it is organised. Presenting and managing the content effectively can help students to easily understand and navigate the course site. It is an implicit form of communication that enables you to achieve your intended learning outcomes and foster positive learner experience that takes student well-being into account.
Consider a section of a chart by Garrett (2000) about elements of user experience below. This chart highlights how user needs (what students need) and site objectives (what the teacher or course needs) form the basis of how you will want to visually lay out an online site.
In today’s post, we will focus specifically on strategies to help organise content before applying visual design.
Create a symphony, not a cacophony of alarm bells
In Day 1, Jill talked about “orchestrating” the student experience – and it is a very apt description of what empathetic design is about. A piece of music generally has structure, rhythm and harmony. If you are familiar with Tschaikovsky’s 1812 Overture, you will know that the canons fired within the piece is clear, perfectly timed and in harmony with the orchestra although it has a complex musical structure.
Content in a course needs to be similarly clear, well-organised and presented in a logical manner especially when it has a lot of information. To do this, we recommend a three-step approach (see Stanford Course Design Guidelines and Information Architecture for detailed information):
- Identify learner needs – what is important to students and what do they need to know
- Select, map and organise content to meet course goals – what students need to achieve learning outcomes
- Wireframe your content – how students can find a logical path through the content on your course site
Let’s go through each of these in turn.
1. Identify learner needs
When thinking about learner needs, we should begin by asking a few questions:
- What information do students want to know?
- What are the most important ideas and theories students need to take from the course?
- What are the most important skills students should develop in the course?
From experience, students are most concerned about assessments, who they can contact and what the course is about. Therefore, having sections dedicated to communication (i.e. how they can contact you and how they will be communicated to), assessment (i.e. what the assignment is about and when it is due) and course overview (with course outline) right at the top of the course site can be very useful in helping students get started.
One helpful way to approach the design of your site is to connect what important ideas and skills students need to take away from the course to your course learning outcomes. These will help you to select activities and materials that should go into the course.
2. Select, map and organise content to meet course goals
In course design, we often talk about “constructive alignment“. Constructive alignment refers to the alignment of teaching and assessment to the intended learning outcomes (Biggs, 2014). Some of you may already have existing course outlines with a selection of course materials – however, it is still useful to map your course materials to your learning outcomes and then organise them in a meaningful way as it helps build and visualise your course site more effectively.
One technique I learnt while working as a communications officer and teaching at a university is content mapping which helps to visualise the purpose of each content item and where the saturation points and gaps are. Here’s an abbreviated version of how you can map content/activities (green and red post it notes) and assessments (blue post it notes) to intended learning outcomes:
Some content items or assessments may fit into multiple categories and that’s fine – for this exercise, I simply include them in the most appropriate section. If you cannot justify how certain items can help achieve your course’s learning outcomes, you’ll need to re-consider either including them as supporting materials or discarding them altogether.
After you’ve gone through the trouble of selecting content that matches your learning outcomes, you will need to organise and structure them in a logical manner so that students can understand the flow of the course. This does not mean that your course is necessarily linear (although it can be if that is required) but rather, it provides students with a sense of progression.
There are several ways in which you can organise your content. Below is an example of how you can organise your content via a combination of topics and weeks:
You can further structure your course materials through labeling, metadata tagging, creating content hierarchies, etc. – see information architecture for more information.
Do you have an existing course outline? How is it structured and is it similarly represented on your course site?
3. Wireframe your content
Once you have organised your content, you are ready to begin building your course. Wireframing is a technique used to sketch a layout of a website that highlights key elements – it does not have to represent a fully designed site. Rather, it is the foundation that allows you to apply visual design and add content after. If you are using a specific learning management system, you may also want to take into consideration some of its technical and design limitations. In saying that, wireframing is about what you want rather than what you can do!
Here, I’ve translated my content map example above into a working wireframe for a course site:
To recap, the key elements above include:
- Important information that students want or need to know such as communication channels, assessments, etc. These are positioned right at the top of the page.
- Course materials structured according to my second content map. Notice that I have also further included ways of grouping and representing course materials – such as using folders for readings.
Organising and wireframing content is one way of improving navigation and learner experience as it visualises and plans pathways for students to locate where they are currently at and where they need to go. In tomorrow’s coffee course, we will look specifically at how you can apply visual design to this wireframe.
Using an existing or mock course outline, sketch a brief wireframe (of what you want the course site layout to look like), share it on Padlet, insert the link in the comments section and tell us about your experience! You may want to sign up for a free Balsamiq (Wireframing tool) trial account to help you with this task. Hand-drawn wireframes are welcome too!
Biggs, J. (2014). Constructive Alignment in University Teaching, HERDSA Review of Higher Education, 1, retrieved from https://tru.ca/__shared/assets/herdsa33493.pdf (2 July 2018)
Chan, R.Y. (2016). Understanding the Purpose of Higher Education: Am Analysis of the Economic and Social Benefits for Completing a College Degree, JEPPA, 6 (5), retrieved from https://scholar.harvard.edu/files/roychan/files/chan_r._y._2016._understanding_the_purpose_aim_function_of_higher_education._jeppa_65_1-40.pdf (21 June 2018).
Garret, J. J. (2000). The Elements of User Experience, Adaptive Path, retrieved from http://www.jjg.net/elements/pdf/elements.pdf (2 July 2018).
Monahan, N. (2015). More Content doesn’t Equal more Learning, Faculty Focus, retrieved from https://www.facultyfocus.com/articles/curriculum-development/more-content-doesnt-equal-more-learning/ (21 June 2018).
Stanford (2018). Course Design, retrieved from https://teachingcommons.stanford.edu/resources/course-preparation-resources/course-preparation-handbook/course-design (2 July 2018).
UX Booth (2015). Complete Beginner’s Guide to Information Architecture, UX Booth, retrieved from http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/ (2 July 2018).