Digital Design Quality Indicators

Purpose

To establish the baseline quality indicators of the digital design elements in Unit content and learning resources that promote student engagement and active learning.

The indicators specifically relate to static and interactive designs, including H5P interactives, photos, diagrams and tables, as well as the styling, formatting and layout elements in Blackboard modules and other learning resources.

The indicators are informed by two key considerations:

  1. The SC Model tenets of unit design
  2. Objective, evidence-based design and accessiblity principles. Good design choices can significantly enhance the quality of unit resources, and improve students’ engagement with unit materials and understanding of key concepts.

Part 1: Use of interactives, images and other design elements to support learning outcomes

Contribution to learning outcomes

1. Interactives and images contribute to one or more learning outcomes.

Interactives and images that support learning, such as infographics, diagrams, tables and photos, should directly contribute to students’ achievements of learning outcomes.

Interactive and image designs that promote active learning

2. Interactives, including branching scenarios, interactive videos and virtual tours, enable students to think critically and actively participate in their learning.

Well-designed interactives are not only engaging, they guide students to explore new concepts, follow paths of enquiry, solve problems and collaborate with peers.

3. Interactives focus on real-world, industry-relevant issues and performance.

Interactives that feature real-life situations create a relatable and relevant learning experience for students.

4. Problem-based or case-based interactives are planned and structured so that they follow an engaging and logical narrative or storyline that promotes relevant enquiry and acquisition of knowledge.

Problems or scenarios should include interesting, concrete and challenging lines of enquiry but should not be so complex that students are defeated by the task.

 Design approaches to maximise learning

5. Interactives and images are appropriate for the level of student learning and the learning approach.

Interactives and images that are primarily designed to present information (e.g. flash cards, accordions, timelines, course presentations, representational images) rather than promote enquiry can assist new learners to engage with materials but over-use can facilitate passive learning.

6. Interactives have appropriate instructions.

Instructions should include background context so students understand why they need to do the activity and, where required, clearly written instructions to complete the activity.

7. Activities with self-check answers are clearly written and relevant to core learning.

Activities with self-check options are useful for testing recall of information.

8. Activity questions are clear and concise – ideally a short, single sentence that asks a direct question.

A scenario or problem may precede the question but the actual question needs to be quick to read and simple to understand.

9. Self-check feedback is provided, and is easily accessible, concise and relevant.

Feedback should only include information that relates to the question and was covered in the content.

 Part 2: Design to maintain student focus and engagement

Intentional and efficient content design

10. Visual elements convey high value information.

Images should support information in the text. Interesting but irrelevant text, interactives, videos and images (including tables and photos) may divert students’ focus from core learning.

11. Time and effort required to create interactives and images is justified by their value to student learning.

Where possible designs should be adapted for re-use in other modules and units, and/or a basic activity is designed that can be developed further when time permits. 

12. Graphics and images are used to convey complex or detailed information.

Visual representations, including tables, graphs, diagrams, infographics, animations, flow charts, photos and short video clips, can convey important ideas more effectively and efficiently than words, allowing students to focus on what they need to learn.

13. Minimal decorative images are included.

Decorative images do not contribute to students’ comprehension of Unit content. Decorative images, such as banners, should be relevant to the unit/module topics.

14. Images reflect and support the diversity of peoples and cultures.

15. Non-decorative images are labelled, and image source details are included, consistently formatted, and compliant with SCU copyright policy.

16. Instruction is included for students’ first attempts at using an interactive.

Repeated instructions may be a distraction, and increase cognitive load, especially for experienced students who know how to complete the task or use the tool.

17. Descriptive links are used so students know what they are clicking.

Descriptive links give an accurate description of what the destination page is about. They are easy to understand without students having to read the surrounding text, e.g. Income tax amendments 2022 not Click here.

Design strategies to support learning

18. Design elements are consistent throughout the design/module/unit.

Consistent design helps students know what to expect and how to find information easily. Use the same formatting and layout – fonts, headings, icons, paragraphs, lists, tables, captions, margins, white space, colour palettes – throughout the design.

19. There is a clear hierarchy of information, indicated by heading level styles, position and size of images, and visual signposts such as icons and activity panels.

20. Colour is used consistently and selectively to help reduce cognitive load.

Excessive use of colour is confusing and visually unappealing. A consistent and limited colour palette enhances the overall look of the design and helps students to focus on core content.

21. Design is simple and does not distract students from learning.

Complicated layouts can overshadow core content.

22. Images are optimised, scalable for different screen sizes, and correctly sized for the page.

Low quality images are distracting and difficult to read or make sense of, especially if they include blurry text. High quality images incur larger download sizes.

23. Images are placed near corresponding text to reduce cognitive demand.

Text and related images should be placed close enough on the page so students can quickly and seamlessly connect the words to the corresponding image.

Part 3: Readability: Design to assist information processing

Information processing

24. Content is easy to scan so students quickly get a sense of what they’re about to read.

Online readers typically scan the page or screen looking for focus points to guide them through content. Focus points include headings, icons, links, lists, bold text, images, captions, quotes, text boxes and buttons.

25. Content is structured so important information is easy to locate.

Blocks of text broken up with relevant headings, subheadings and meaningful images trigger curiosity and draw students on to read the content.

26. Text and images are framed with white (‘empty’) space so they stand out on the screen or page.

White space allows the eye to rest so the brain has time to absorb the information that is being communicated. White space includes margins, space around images, and spaces between headings, paragraphs, lists, and lines of text.

27. Easy-to-read fonts are used for onscreen reading.

28. All elements of the design are free of errors.

Inconsistent layout, spelling errors, misaligned text, mismatched fonts, poorly designed graphics and broken links affect how easily students can process information.

Accessibility

29. Alternative text descriptions are provided for images that contain important information.

Alt text should be concise, accurate and directly relevant to the content.

30. Navigation is clear, predictable and consistent throughout Unit modules and interactives.

31. Content is designed using appropriate HTML elements that enable screen readers to describe the element, e.g. link, heading.

32. There is sufficient colour contrast between text and background colour.

Optimal contrast reduces eye strain and assists students with visual difficulties to interpret the content. Use colour combinations compliant with Web Content Accessibility Guidelines

33. Colour is not used to convey key information.

Descriptive labels and patterned overlays on solid colours can be used instead as colour-blind students cannot distinguish reds, greens and browns, and may have problems with colour combinations e.g. pink-purple, green-yellow.

34. Text formatting is consistent, with no underlined or highlighted text, and minimal italics and capitals.

Underlined text may be confused with a URL. Screen readers will not pick up highlighted text.