VLE site design principles

Summary

These principles highlight best design practice to guide staff in developing effective VLE sites and minimise workload. Ultra module site templates align with these principles.

Benefits of the principles include:

centring accessible and inclusive design as a key aspect of site and online materials development.
facilitating a consistent experience and easy navigation across sites.
assisting staff in developing effective sites through guidance on implementing principles.
informing VLE site templates, which reduce staff workload and cognitive effort to set up sites.

Principles are categorised as essential or recommended:

Essential principles: must meet

Essential principles are regulatory in nature, relating to complying with legislation or implementing UoY policy. Sites must meet all of these principles. More information:

legislation: accessibility, copyright.
UoY policy: assessment, Inclusive Learning, Reading List, captioning.

Recommended principles: aim to meet

Recommended principles help to implement good design practice and give a good student experience. Sites should aim to meet these principles.

It is the module convener's responsibility to apply these design principles in their site or ensure that other staff working on the site do so.

Click each principle to show details, examples and guidance on implementing the principle in sites.

1. Module orientation & support

1.1 Essential: Module orientation information and learning outcomes are easy to find.

Link to the relevant Module Catalogue page for students to access key module information and learning outcomes. This link automatically provides up-to-date information each year.
Provide an overview of the module (or course for non-modular sites). This could be a short introduction video from the module leader and/or a text summary.
Placeholders for this information are provided in site templates.

1.2 Essential: Provide details of specialist software or equipment required.

Required: the name of the software, how to download it and/or which university computers it is available on, where to get help with the software.
If available: accessibility information, compatible Operating Systems.
A placeholder for this information is provided in site templates.

1.3 Essential: Provide module staff details and communication expectations.

Give staff contact details, including email and office/drop-in hours and appointment booking details where applicable.
Give the desired communication method, eg. Staff will use Announcements to communicate course updates or Students should use the Q&A forum for questions about the module along with an expected response time.
A placeholder for this information is provided in site templates.

1.4 Essential: Site title contains the SITS code and official module name.

The SITS code (eg. ABC00001C) and official module name are listed on the Module Catalogue.
For professional programmes and other non-module sites, the site name must accurately describe the programme, course element or site purpose.
This helps users find correct sites easily and aligns with information in the Timetable and other systems.
The site title is provided automatically; users should not change this.

1.5 Recommended: Provide links to relevant departmental or support information.

This information is largely pre-provided in departmental templates, and may include:

departmental accessibility statement and disability officer/rep contact information
the Assist VLE area, which collates UoY-wide support information
departmental or programme webpages or sites (eg. a study skills or employability site)
location of the programme handbook
relevant Skills Guides or Practical Guides content

2. Site structure & design

2.1 Essential: Site structure includes sections for module information, assessment, Reading List, Replay Content and module materials.

This provides a consistent experience across modules, helping students navigate the site and locate items easily.
This structure is provided in site templates.
For professional programmes this may be adapted to include other relevant sections, maintaining a clear and easy to navigate site structure.

2.2 Essential: Materials within sections are clearly organised so content is easy to find.

This can be done by:

using a consistent structure within repeated module materials sections (see 3.1).
giving pages and items meaningful titles (see 3.6).
avoiding nesting so it’s easier to navigate content.
only including content relevant to the module.
removing unused and out-of-date content and files (see 3.3).
avoiding duplicating information in different areas of the site, or information from another site.

2.3 Essential: Design and images adhere to the UoY brand.

Where branding is used (logo, colour, typography etc.) it must align with the UoY branding and identity guidelines and/or external organisations’ branding where needed.
Images are used according to tool specifications, eg. fit any dimension requirements.
Images are high quality, preferably from the UoY Image Library.
Text in course images does not scale well and so should be avoided in most cases. If non-decorative text is used images, provide this in ALT text (see 3.4).
Course images and banners are provided in site templates.

3. Module materials & site content

3.1 Essential: Organise module materials in sections that support student progress through the module.

For most modules, materials should be structured in weekly sections. Other structures (eg. topic-based or programme phase-based) should only be used where a weekly structure is not appropriate.
Include all relevant weekly materials, eg. lecture slides, seminar or practical tasks, pre-recorded videos and links to essential Reading List items (see 3.2).
Organise repeated sections consistently, eg. lecture materials followed by workshop information.
This helps students locate materials and ensure they complete necessary tasks.
Site templates guide staff to set up appropriate sections for their module content.

3.2 Essential: Provide module readings using the Reading List tool.

Using the Reading List lets the Library ensure appropriate stock levels and manage copyright compliance. Students can also directly access items without signing in or navigating external websites, giving a more seamless and accessible experience.
Structure the Reading List using weekly sections (or other sections matching module site structure) to aid navigation.
Label each item as Essential, Recommended or Background to help students plan workload.
To collate module materials in one location (see 3.1), direct links to Reading List sections or items can be included in weekly materials sections. (Specific instructions available soon)
Provide journal papers through the Reading List. Access will be given through a Shibboleth-enabled link that doesn’t need an extra sign in or the Library will provide an appropriate file-based version. Don't upload a PDF of a journal yourself.
Don’t provide readings by uploading PDFs, scans of printed material or other documents because this may violate copyright and is likely to be inaccessible. The Library may be able to digitise print content for you or find an appropriate version.
For advice on setting up the Reading List(s) for your module or professional programme site or using third-party materials appropriately, contact the Reading List team or your Faculty Librarian.

3.3 Essential: Provide up-to-date documents in an accepted file format.

Include only the correct document version and remove old versions from the site. If documents are updated during the module, communicate this clearly to students.
Don’t convert Microsoft Office or Google files to PDF; provide the original file format. Students can adapt the document to their needs (eg, change text colour or size) and convert to other formats (direct download or convert with the Ally tool in Blackboard).
Any PDF materials used must be good quality and have searchable/highlightable text (OCR). If scans of handwritten notes are uploaded, an alternative text-based version must also be provided. Do not scan and upload published materials (see 3.2).
Don’t use Mac-only file types such as Pages or Keynote.

3.4 Essential: Site and materials content is accessible.

We have a legal responsibility to comply with accessibility legislation regarding online content.
Text content is easily readable and accessible: structured with Heading Styles, bulleted lists to break up content, left-aligned text, sufficient colour contrast, legible font and text size, tables only for data etc. More information on readable text and accessible text.
Meaningful images and figures have appropriate ALT text or other descriptions to allow screenreader users to access the information. Guidance on writing good ALT text and adding ALT text to the VLE or documents.
An accessibility checker is used for all text and materials to identify errors and receive guidance on how to fix them (eg. Blackboard Ally within Blackboard, Grackle for Google Docs/Slides, Microsoft Accessibility Checker).

3.5 Essential: Pre-recorded videos are hosted in a streaming service and captioned accurately.

For example, Panopto for your own at-desk recordings and YouTube for external videos.
Do not upload video files directly to the site, or to documents provided (eg. lecture slides). This may not support appropriate captions, can give a poor user experience and may violate copyright.
Pre-recorded video (UoY-created and external content) must have accurate captions synched to the audio and/or an equivalent text alternative such as a transcript. Users must be able to choose whether or not to display captions. Guide: Panopto recordings and captions.
Lecture capture recordings are automatically captioned in Panopto. For the current year's recordings, it is not required to review these for accuracy but lecture staff are encouraged to do so where practical. Staff must respond to requests for caption corrections if errors represent significant challenges for students in accessing the content. More information on captioning lecture capture recordings.

3.6 Essential: Links and materials titles describe the destination or content.

Link text describes where the link goes or the content, eg. how to write better link text. Don’t use non-descriptive text like ‘click here’ or ‘find out more’. Don’t paste the full URL (eg. https://www.link.com).
Document titles describe the content without having to open the file. This could include the week, type of materials, key word(s) relating to the topic, and a short module identifier. For example, material titles for the module ‘Mythical Creatures in Literature’ could use the format Week 3_Slides_Dragons_MCL.
Use any naming conventions consistently across the site and module materials.
This is very important for screenreader users, and makes links and documents more usable for everyone.

3.7 Essential: Direct, descriptive links are given to open embedded content (eg. video, Padlet or Xerte objects) in full screen.

This makes content easier to access on smaller screens or with some assistive tools.
The link provides a fallback in case of problems with the embedded item.

4. Assessment

4.1 Essential: The assessment section contains all information about module assessments.

Ensure that it is clear to students what they need to do and when. This may include an overview of formative and summative assessments, information on specific assessments, submission points and materials required to complete assessments.
For professional programmes, give an overview of all assessment on the programme including any assessed components or compliance requirements that sit outside the academic award.
If assignment submission points are not included in the module site, their location is made clear or linked to from this section (note that this link will need to be manually updated in each future site).
An assessment section with placeholder information is included in site templates.

4.2 Essential: Assessment instructions are clearly labelled and explain the task and requirements.

This information can be provided directly in the site and/or in an attached assessment instructions document.
Instruction text for assessments is readable and accessible: uses plain language, only includes necessary information, avoids long blocks of text, uses bullet points and/or headings where possible (see 3.4).
Consider including an FAQ document or discussion where students can ask questions about the assessment instructions.

4.3 Essential: Provide marking criteria or other grading policies showing how work is marked.

This could be a rubric linked to an assignment within the site or a linked document. Where a site involves different methods of assessing work, include details of all of these (eg. PSRB requirements for professional courses).
A link to central advice on using assessment criteria and feedback may also be provided.
A placeholder for this information is provided in site templates, and relevant marking criteria may be included in departmental templates.

4.4 Essential: Signpost students to where they can get help with the assessment task or submission.

This helps students access departmental or technical assistance if required.
This information can be included in departmental templates.

4.5 Recommended: Provide exemplars of representative work and/or past exam papers.

This helps students understand task requirements and expectations, especially if annotations or feedback is also available.
If past exam papers are available, provide these through the Library’s collection of digitised past exam papers.
Exemplars or models of work could be provided as whole documents or excerpts on the site or in supervised sessions. However, be aware of any departmental steers relating to avoiding plagiarism.
Placeholders for this content are provided in site templates.

5. Site readiness

5.1 Recommended: Ensure that students can see and access module materials and content.

Items are visible to students (note that items may be hidden by default). Conditional release may be used to show items or site areas at particular times or only to particular students.
Sharing permissions are correct so students can access all materials (particularly important for re-recording Panopto recordings and Google materials).

5.2 Recommended: Complete the Site Readiness Checklist before making the site available to students.

This helps identify and correct any issues in areas such as accessibility, site/material visibility and student/staff enrollments.
The Site Readiness Checklist appears on this site and is also included in site templates.

5.3 Recommended: Take steps to make the site easier to maintain and update.

Useful steps include:

Linking to ongoing webpages instead of year-based links or documents. This avoids manually updating links each year and means content stays up to date. For example, link to the webpage or departmental VLE site where current handbooks are provided, not a specific handbook document.
Using relative dates (eg. Friday of Week 7) instead of specific dates in site text or documents so that dates don’t need to be manually updated.
Identifying materials or items that need to be updated in future sites to maintain item access (eg. links to assignment submission sites, Reading List links, embedded Panopto videos for specific cohorts) or provide up-to-date information.