Year: 2020

On October 30 I watched a webinar (recording below) given by Joyce Seitzinger (@catspyjamasnz) and hosted by the Commonwealth of Learning. It was titled, “How Learning Design Systems can help scale and accelerate learning design”. If you work in higher education helping with the practice of digital (or post-digital education) – which is a bigger group of folk than it was 12 months ago – then I recommend the talk and the approach. Especially, if you’re having to deal with scale – large student numbers, large numbers of courses, multiple offerings etc.

Joyce’s work is important work because it engages with one of the more challenging questions facing higher education

How might the diverse knowledge required for effective design for digital learning be shared and used sustainably at scale?

aka. how do Universities move beyond providing guidance and actually help with the provision of digital education.

The literature (e.g. the intro of Jones, 2019) recognises this question as essential to higher education, but also identifies significant problems with existing solutions. Buying new technology, running PD sessions outlining the “5 guidelines for X”, or doing ad hoc instructional design projects aren’t cutting it. The work Joyce and her colleagues are doing with Learning Design Systems draws on successful practices from a different realm in an attempt to systematically answer the question.

Upon reflection, I’m wondering if I missed something in Joyce’s talk? Perhaps my limitations and the limitations of a (less than) 60 minute webinar on a complex topic are showing. The bit I missed – the components of the design system – appear to be one of the key enablers of scale in web design systems. I also wonder if/how the concept of design systems can be used without requiring learning design project teams. Before getting into those questions, I’ll start with my summary of Joyce’s talk.

A summary

A familiar problem

Joyce’s presentation started out talking about an increasingly familiar problem facing higher education, especially within Australia. i.e. the increasing complexity of the inputs and expected outputs of learning design. At RMIT Online this involves a need to design large numbers of diverse courses that are offered multiple times a year to an increasing number of students. Where the design and delivery of those courses involves an increasingly diverse modes and is supported by a diversity of partners. With subject matter experts including both traditional academics and external experts, and increasingly involving other partners. Increasingly, these courses are leading to different credentials.

These are trends I’m seeing across Australian higher education. One of the more recent has been the rise of micro-credentials partially in response to moves by the Australian Federal Government. Moves that mean Australian Universities are increasingly going to face the same problem that Joyce describes.

Design Systems – a less familiar solution

Joyce pointed out that seeing teaching as design for learning has long been recommended as one solution to the increasing difficulty and requirement for quality learning and teaching (e.g. Goodyear, 2015). What Joyce didn’t mention directly is that in higher education the practice of teaching as design for learning isn’t as widespread as it should be. In part, because effective design for learning requires a detailed and diverse collection of knowledge. Knowledge that not many teachers have and which institutions continue to struggle with providing at scale.

Joyce’s solution to this scaling problem is design systems. An idea drawn directly from web design. In web design, design systems specify in detail the common components that are used to design a web sites and applications (Churchill, 2019). Joyce points to design systems examples such as Atlassian and one more focused on digital learning from Future Learn. Churchill (2019) points to this gallery of different (web) design systems.

The fundamental idea behind design systems is not new. Manufacturing, industrial design, and architecture (e.g. Alexander et al, 1977) have been using collection of modular components to share the knowledge required to construct large scale products for quite a while. Suarez et al (n.d) cite McIlroy’s (1968) proposal for software components as a solution to the (first?) software crisis as inspiration for design systems. Tesler’s Law of the Conservation of Complexity arises from addressing a similar problem 20 years later in dealing with the production of GUI software. The hypermedia community was talking about patterns and constructive templates in the late 1990s (Nanard, Nanard & Khan, 1998). Echoing work in object oriented programming (Gamma et al, 1995) that had significant impact on practice, and later work with design patterns for educational design and network learning (Jones, 1999; Goodyear, 2005) – that had less impact on practice.

What is a design system?

I was looking for a definition of a design system to use in this post. A task more difficult than I thought it should be. The first definition that started to resonate I found here

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

A source that has a nice image outlining some common elements of a design system, including: identity spec; principles; best practices; components & patterns; tools; style guide and pattern library etc.

Learning Design Systems

Design systems for the web don’t having anything to say about design for learning. Raising the question about what makes for a learnign design system? Joyce’s answer appears to answer this by adding fairly common contemporary practices in higher education, including: adopting a collection of learning design principles and standards; and, a focus on a collection of activity types.

The seven learning design principles include a focus on designing specifically for online (assessment, learning activities, resources, tools and social interactions) and explicit integration of industry relevant. These provide a shared goal for design and enable quality assurance.

Course design focuses on learning activities as the “pedagogical building blocks”. A small taxonomy of activity types is specified (assimilative, experiential, interactive, productive, social, meta cognitive) echoing taxonomies from Diana Laurillard (acquisition, inquiry, collaboration, discussion, practice, production) and the Open University (Toetenel & Rientes, 2016) (assimilative, finding/handling information, communication, productive, experiential, interactive/adaptive, assessment). Linked in turn with a focus on constructive alignment.

Wrapped around this is a collection of artefacts including: guidlines, templates, process, examples, and training. For each course, these artefacts are used by a design team including: course coordinator; designing academic; learnign designer; and, multimedia developers.

Effectiveness?

Measures provides to illustrate the positive impact of this approach, included

• Reduction in course development time (28 to 16 weeks)
• More reliable quality at QA checkpoints
• Internal team spending less time on course projects
• Improved pass rates and student satisfaction

Questions?

Is it just a better conceptualised version of common practice?

Much of what was discussed in the talk – a focus on activity types, constructive alignment, course recipe type abstractions, course development teams, course standards or principles – I have seen in use elsewhere. For example, ABC Learning Design and the practices adopted by groups similar to RMIT Online (where Joyce works). Though in my experience those examples were perhaps as not complete and as consistently implemented as Joyce described.

Beyond good implementation, I’m wondering what makes this work an example of a “design system” rather than an instructional design process/team?

Which brings me to the next question.

Where are the components?

In introducting design systems for the web, Suarez et al (n.d) argue that design systems rely on the combination of 2 concepts: standards; and, components. Where they define components as

portions of reusable code within your system and they serve as the building blocks of your application’s interface.

Standards provide guidance about how those components are designed and designed with.

The Future Learn design system – fairly typically for a web design systems and cited by Joyce – provides a collection of components. Suarez et al (n.d) describe the benefit of components is that they reduce “technical overhead”. They do this by packaging necessary design knowledge into reusable buiding blocks. With a decent collection of building blocks the act of design is achieved by assembling building blocks that embody good design. Making it easier to scale good design.

Suarez et al (n.d) also argue that a design system is never static or complete. Over time improvements and changes are required. The reusable components of a design system are not meant to be static. As you use these components to do design you encounter new needs. Hence a part of of the design process is tweaking and improving the components. Given the nature of components, this tweaks and improvements can then be reused in other projects – “[t]his is the power of scaling that a design system offers” (Suarez et al, n.d).

I couldn’t see any mention of components in Joyce’s talk. The closest perhaps being the activity types. But I couldn’t see anything like the Future Learn catalogue of components. Hence I’m wondering if the ability to scale is missing?

Where are the learning activity/task components?

Even the Future Learn catalogue is somewhat limited. All of the components appear to be fairly typical web interface (content) components. For example, card, feedback message, and timeline). None of which I’d consider learning activities. Hence the Future Learn system appears likely to help with scaling the design of the web pages/sites, but not so much help with scaling learning design.

The Future Learn systems is based on the Atomic Design Methodology for web design systems. Atomic Design has five (non-linear) stages of design

1. Atoms – Basic HTML elements that can be broken down any further. Fairly abstract.
2. Molecules – Simple groups of atoms (e.g. search form) that have a specific purpose.
3. Organisms – Complex collections of atoms, molecules and other organisms (e.g. a header that includes a search form). Apparently, organisms provide “an important sense of context” and used to form specific sections of an interface.
4. Templates – A collection of components placed into a layout to specify a content structure. i.e. there is a focus on structure, rather than content.
5. Pages – Specific instances of templates.

Folk at Future Learn describe the confusion they had drawing the line between molecules and organisms. Hence they dropped organisms.

Where would learning activity components fit in the Atomic Design Methodology? Would defining organisms as molecules that enable a specific learning activity/task be a place to add in an explicit learning and teaching focus? Or is that just too low a level for an activity that might involve numerous people, completing quite complex tasks, extended over a lengthy time period?

Web components to the rescue?

Somewhere in here is also where the PSU web component work enters the picture. This is a collection of web components which you can use now thanks to their unbundled approach. An approach which I think is potentially very useful for a design system. Though, at the moment, their components are also more focused on content than learning activities.

What about a forward-oriented design perspective?

Dimitriadis and Goodyear (2013) argue that design for learning (aka learning design) needs to be more forward-oriented. That is, there’s a need to move away from the view of design as producing a course (learning task/environment etc) so it’s ready for the start of semester. To move away from the idea that design is somehow separate from the other stages in the lifecycle of a course. Instead, when designing, there’s a need to actively consider what will be required during configuration, orchestration, evaluation, and reflection and respond to that.

Extending that to components, a learning activity component should not only embody design knowledge that helps with creating an effective, consistent interface. It needs to offer functionality that embodies design knowledge that helps learners and teachers during learntime (orchestration) etc. As a simple example, a component that displays options for watching films within learning material in a consistent, effective way (see image below) depending on how the institution has been able to provide access. A component that recognises the film availability changes and hence the learning materials need to be kept up to date. A process that can be painful if the film is mentioned multiple times. A component that supports configuration by drawing film availability from a spreadsheet. Allowing the teacher to change a single line and have that automatically applied throughout the learning materials.

What about when learning design doesn’t/can’t occur?

The RMIT online design system involves a team of five people with different skills helping with the design of each course. The literature has identified that this is a resource intensive approach and that such resources are not always possible. Joyce explains how their design system has reduced the required resources, enabling more scale. However, there is a limit to that. It’s not possible (yet, perhaps) in all contexts. It’s certainly not possible in the context in which I currently work. Nor has it been possible in any university in which I’ve worked over the last 30 years. Even in an earlys 90s distance education provider – where a team approach was nominally possible – it was heavily constrained in terms of staffing and restricted to a very specific set of standards. Bennett et al (2017) describe the situation like this

Design support services exist centrally or within the faculties of all Australian universities, but these are limited resources for which there is strong demand, leaving many university teachers to rely on their own skills. (p. 133)

Teachers are having to do it themselves. No designer in sight. The question then is, if you can’t rely on a project team to bring together the necessary design knowledge to help improve distance education, then how do you do it?

Goodyear (2009) introduces two images of teachers: long arc; and, short arc. The long arc teacher takes time to think about designing a course and associated tasks. A short arc teacher doesn’t have that time. Arguably, the prevalence of short arc teachers is increasing. The long arc teacher image is the focus of almost all attempts by institutions to provide “help”, which is probably why “most of the effort by L&T centres is directed to a small minority of willing academics” and such “centres are not equipped or motivated to operate strategically, at scale” (Ellis & Goodyear, 2019, p. 202). Goodyear’s (2009) suggestion to help short arc teachers – who won’t make use of traditional support measures, but do use a range of tools – is to “embed good ideas in these tools” (p. 16).

The image of the short arc teacher echoes the idea of a bricoleur. Someone when faced with a project does not engage in strategic analysis and design, but rather figures out how to achieve the project with the tools (and knowledge) already at hand. They engage in bricolage. Bricolage is a concept that has been previously used to understand the work that teachers typically do (Hatton, 1989). Given the nature of bricolage, if what the bricoleur is doing is less than stellar, then the issue lays with the tools that they have at hand.

I’m wondering if providing an effective learning activity design system might help address this? i.e. more than just a collection of web design templates, but a collection of components at the organism and template level of the Atomic Design Methodology. Components that provide support for the forward-oriented design of situated learning activities. Echoing the recommendation from Ellis and Goodyear (2019) that institutional strategy around learning and teaching should shift “to infrastructures and service interfaces for a manageably small set of particularly valued activity systems” (p. 188).

Components that can be picked up by teachers engaged in bricolage, but also be used by long-arc teachers and learning design project teams. Components that are not simply collections of purchased technologies, but proactively designed to explicitly support the forward-oriented design of valued learning activities.

The card interface is one of my early attempts at providing this type of support (Jones, 2019). The origins of the Card Interface was a startegically important push by the institution (for better or worse) to encourage the modularisation of online learning content. But the tools at hand really didn’t provide significant support to that activity. The Card Interface does a better job. It’s a tool that’s been used both by project teams and “short-arc” academics. Just this year it’s been used in 300+ courses at my current institution, and it’s spread. Since September, it’s been used in 130+ courses at the National University of Ireland Galway.

What happens when digital education is no longer web-based?

The Future Learn design system, the Atomic Design methodology on which it is based, and the work described by Suarez et al (n.d) are all based on the assumption that you’ve building websites and that you are able to create reusable components. There are two issues with that: 1) the limited forms of integration support by current common digital learning tools; and, 2) the increasing move away from the web.

The Card Interface is possible because Blackboard Learn (Classic) is at some level a collection of HTML pages and we can insert web components within it. The next generation systems – Blackboard Learn Ultra – removes this capability. Echoing the move away from the web to the app and higher education platforms and cloud infrastructures. Most of the other common digital learning tools (e.g. PebblePad, Echo360) generally don’t play well together. When they do play together they are limited to LTI lego block integration.

At the other end of the spectrum are web components (e.g. the PSU web component work). Web components provide an effective way to package and reuse work like the Card Interface. But it requires a different type of infrastructure and approach than the pay for a platform (e.g. O365) and support it approach that most higher education institutions are curently using.

References

Alexander, C., Ishikawa, S., & Silverstein, M. (1977). A Pattern Language: Towns, Buildings, Construction. Oxford University Press.

Churchill, E. F. (2019). Scaling UX with design systems. Interactions, 26(5), 22–23. https://doi.org/10.1145/3352681

Dimitriadis, Y., & Goodyear, P. (2013). Forward-oriented design for learning: Illustrating the approach. Research in Learning Technology, 21, 1–13.

Ellis, R. A., & Goodyear, P. (2019). The Education Ecology of Universities: Integrating Learning, Strategy and the Academy. Routledge.

Gamma, E., Helm, R., Johnson, R., & Vlissides, J. (1995). Design Patterns: Elements of Reusable Object-Oriented Software (B. Kernighan, Ed.). Addison-Wesley.

Goodyear, P. (2005). Educational design and networked learning: Patterns, pattern languages and design practice. Australasian Journal of Educational Technology, 21(1). https://doi.org/10.14742/ajet.1344

Goodyear, P. (2009). Teaching, technology and educational design: The architecture of productive learning environments (pp. 1–37). https://ltr.edu.au/resources/Goodyear%2C%20P%20ALTC%20Fellowship%20report%202010.pdf

Goodyear, P. (2015). Teaching As Design. HERDSA Review of Higher Education, 2, 27-50.

Hatton, E. (1989). Levi-Strauss’s Bricolage and Theorizing Teachers’ Work. Anthropology and Education Quarterly, 20(2), 74–96.

Jones, D., Stewart, S., & Power, L. (1999). Patterns: Using Proven Experience to Develop Online Learning. ASCILITE, 155-162. https://djon.es/blog/publications/patterns-using-proven-experience-to-develop-online-learning/

McIlroy, M. D. (1968). Mass-produced software components. Software Engineering, Garmisch, Germany.

Nanard, M., Nanard, J., & Kahn, P. (1998). Pushing Reuse in Hypermedia Design: Golden Rules, Design Patterns and Constructive Templates. 11–20.

Suarez, M., Anne, J., Sylor-Miller, K., Mounter, D., & Stanfield, R. (n.d.). Design Systems Handbook. https://www.designbetter.co/design-systems-handbook

Toetenel, L., & Rienties, B. (2016). Learning Design — creative design to visualise learning activities. Open Learning: The Journal of Open, Distance and e-Learning, 31(3), 233–244. https://doi.org/10.1080/02680513.2016.1213626

It’s widely accepted that the most important part of learning and teaching is what the student does (Biggs, 2012). The spaces, tools and tasks in and through which students “do stuff” (i.e. learning, or not) are in some way designed by a teacher with subsequent learner adaptation (Goodyear, 2020).

Designing learning spaces, tools and tasks is not easy. Especially when digital technologies are involved. The low digital fluency of teachers is seen as a (for some the) significant challenge (Johnson et al, 2014). Hence the big focus on solutions such as requiring all teachers to have a formal teaching qualification. Formal “certification” programs such as the HEA. Or the focus on running workshops and producing online “how-to” support material. The focus on teacher knowledge tends to ignore the distributed and contextual nature of the knowledge required. It doesn’t just reside in the heads of the teachers but is distributed amongst the other agents (people, technologies, policies etc) in the institutional learning and teaching system (Jones et al, 2015).

When knowledge is distributed, it is also situated and highly contextual. As such, knowing the details of any learning and teaching model or theory has value still has to be translated into the design of learning activities within a specific learning and teaching context. The model’s suggestions needs to be adapted and customised to the specifics of the learning activity, including the specific discipline, the specific digital technologies, the specific institutional policies, the specific student cohort etc. This is hard and I don’t know of any institution that is helping meaningfully and sustainably make this problem easier in contextually and discipline specific ways.

This post will

1. Introduce a discipline specific learning activity.
2. Describe the learner and teacher experiences of engaging with current common implementations of that learning activity.
3. Illustrate how the learner and teacher experience is changed by a more discipline specific approach.
4. Explore some of the implications and next steps for this approach.

Watching films – a discipline-specific activity

A key activity for courses such as film analysis, history, direction etc. is watching films. Analysing existing films to see how certain theories and design principles have been leveraged and their impact. A necessary first step in such a learning activity is being able to source and watch the film. In an on-campus learning experience this is probably a face-to-face experience in a scheduled class. In a totally online learning experience this is commonly done via the course web site. Either way the teacher/institution typically organises access to the film and designs some activity around it.

This type of close analysis of a film typically only a part of a handful (or two) of courses at a university. If there’s any institutional support for this activity it is typically a small part of a broader process. e.g. legally (copyright) correct sourcing of films may be part of the library service. But typically, designing this learning activity draws more on the significant capabilities and expertise of the teacher. Not unlike most of the other activities specific to the other disciplines. Typically this appears to work in the face-to-face environment, but what happens when it goes online?

Watching films in an online course – the current solution

The following is a generic description summarising the practice I’ve observed at a couple of different institutions. I imagine it’s fairly typical. I’m sure there are much better examples of current practice. But my hypothesis is that those better examples were dependent upon an individual with a unique combination of knowledge and skills.

The learner experience

Somewhere on the course site the learner will discover that they need to watch a film (or two) this week. This may be via an announcement, a list of films in a course profile or course reading list, or some details in this week’s page on the course site. There will some details about the film (e.g. director, year of production etc.), perhaps a description of how to engage with the film, and there might be access to a digital version of the film.

Since many films are commercial, copyrighted artefacts. Providing digital access to the film is not straight forward. In some cases the institution may be able to provide access. In other cases the learners or teachers may have shared URLs enabling (probably legally dubious and short-lived) access. In other cases the student is left up to their own devices to gain access to the film. With the rise of streaming services this is significantly easier. However, the nature and diversity of the films used in such courses is such that no single streaming service will provide access. Increasing expense for learners. Also, not all such films will be available via streaming services.

Consequently, learners typically expend a fair bit of cognitive effort and time gaining access to films. A cognitive effort expense which may be seen as a part of the necessary and relevant learning for the course. But it may be a cognitive enegy expense that limits what the learner invests in the actual important learning activities involved in understanding and analysing the film. I have heard reports of learners in such courses being frustrated at having to expend this cognitive effort.

The teacher experience

The teacher of such a course faces four broad questions. Answering these questions is not sequential. My answer to question #1 may change depending on the answer to question #2. The four questions are:

1. Which films should the students engage with?
2. Can I provide access to those films?
3. How to point students to those films and what they need to do?
4. How well did those films/activities work and what do I need to change for next time?

Answering question #1 draws on the discipline knowledge of the teacher. All the other questions require knowledge that is not (solely) discipline knowledge.

Answering question #2 involves knowledge of copyright law and various institutional systems and processes. that the university’s library. Most provide a service that can legally gain digital access to films. Well, most films. Such a process is typically part of a broader process of providing resources for teaching (e.g. my current institution) which may feed into some sort of formal course reading list. I’ve yet to see such a formal course reading list that is useful for learning and teaching.

Answering question #3 requires pedagogical and technical knowledge to figure where, when and how to embed this information in a course site. It’s the teacher that needs this knowledge. They are provided with generic tools (announcements, discussion boards, and content editing), maybe the formal course reading list, and supported by generic technical and pedagogical advice about how to use the provided tools. None of this is specific to film watching.

Hence answers to question #3 are largely variable. See mention of learner frustration in the previous section. The most common solution I’ve seen is just a description of the films to watch such as the following simple example.

Answering question #4 requires knowledge of learner activity, learner outcomes, learner satisfaction with the experience of using the film watching activities. It also requires the knowledge and skills necessary to analyse, reflect, and re-design. All of this knowledge is rarely available in any way that could be considered systematic or deep. And a simple list like the above example doesn’t help.

Film Watching Options – a CASA solution

The following describes the Contextually Appropriate Scaffolding Assemblages (CASA) approach we’ve developed. Currently labelled – Film Watching Options. As the same suggestions this approach is specific to this learning activity. It aims to embed good answers to the four questions outlined above into a collection of technology and practices that make it easier for the teacher to design, use and maintain a better quality learning space.

This isn’t a perfect solution. The current solution provides some ok answers to the first three questions, but doesn’t really offer any insight on the fourth questions. There is work to do. But it’s looking better than existing solutions.

Learner perspective

With the Film Watching Options approach, the learner doesn’t just see the list of films as shown above. Instead they see the following showing off three different options

1. An embedded, ready to stream version of Animal Kingdom as provided by the institution.
2. A link to a streaming version of Tokyo Story available in an online Film Collection.
3. A link to a JustWatch search of streaming services available in Australia for Toy Story.

Option #3 illustrating what happens when the institution can’t provide access to a film and the learner has to go searching.

Teacher perspective

Currently the Film Watching Options feature is implemented as part of the Content Interface a Contextually Appropriate Scaffolding Assemblages (CASA) approach to using Microsoft Word to create and maintain course content. In this context, the teacher designing this learning space sees the following Word document when authoring. Notice the similarity between the Word document in the above below and the web page in the image above?

The idea is that when the teacher wants to provide film watching options to the learner they write (in Microsoft Word) the title of the film and then apply the Film Watching Options style. That’s why the film names in the above image are green. Prior to this the teacher, in collaboration with the library, will have create an Excel spreadsheet that has a table listing all the films in the course and if and where they are available online.

The technology perspective – how it works

From here the Film Watching Options and Content Interface CASA take over.

The Content Interface will translate the Word document edited by the teacher into the following HTML and embed it in the course site.

<h1>Film Watch Options - CASA</h1>

<p>This week watch and take note of the following films.</p>

<h3><em>Animal Kingdom</em> (Michôd, 2009)</h3>t
<div class="filmWatchingOptions">Animal Kingdom</div>

<h3><em>Tokyo Story</em> (Ozu, 1953)</h3>
<div class="filmWatchingOptions">Tokyo Story</div>

<h3><em>Toy Story</em> (Lasseter, 1995)</h3>
<div class="filmWatchingOptions">Toy Story</div>

When a learner views this page the Content Interface will find all the filmWatchingOptions elements and for each element

1. Call a web service to discover what options exist for watching this films (by checking the Excel spreadsheet maintained by the teacher).
2. Update the element to display the correct option.

Note: There wasn’t a “technology perspective” section for the current solution because it doesn’t actually do anything specific for this learning activity.

Next steps

Implementation within the Content Interface needs to be refined a touch. In particular, a lot more attention needs to be paid to figuring out if and how this approach can better help teachers answer question #4 above – How well did those films/activities work and what do I need to change for next time?

Longer term, I think there’s significant benefit from being gained implementing this type of approach using unbundled web components. Meaning I have to find time to engage with @btopro’s advice on learning more about web components.

Early implications

Even at this early stage there are two obvious early implications.

First, this makes it easier for the teacher to develop and improved learning space.

Second, these improvements provide affordances that generate unexpected outcomes. For example, the provision of the film specific JustWatch search helped me identify an oversight in a course. The course content listed a film as unavailable. The JustWatch search showed that the film was available via an institutional means. I was able to update the course content.

Broader possible implications

Design patterns have been suggested as a solution to the problem of educational design i.e.

There is a substaintial unmet demand for usable forms of guidance. In general, the demand from academic staff is for help with design – for customisable, re-usable ideas, not fixed, pre-packaged solutions. (Goodyear, 2005, p. 83)

One of the benefits of pattern languages is that they provide “a common language by which practitioners can share and discuss ideas” (Jones et al, 1999) associated with design. The object-oriented software design community is perhaps the best example of this. A community where practitioners use pattern names in design discussions.

Design patterns haven’t really entered mainstream practice in educational design practice. Perhaps because design patterns are bit too abstract/difficult for practitioners to embed in everyday practice. Perhaps picking up on Goodyear’s (2005) distinction between Long and short arc learning design. Some of the hypermedia design literature has previously made the connection between design patterns and constructive templates (Nanard, Nanard & Kahn, 1998). Constructive templates help make the connection between design and implementation. Perhaps this is (part of) the missing connection for design patterns in educational design?

What’s slowly evolving as part of the above work is the ability to start using names. In this case, film watching options is a nascent example of a name that is used to talk about this particular design/implementation solution. If it were implemented as an unbundled web component this would be reinforced further. Not to mention it would become even more customisable and reusable – echoing Goodyear’s description of the demand from teachers.

Might an approach like this implemented as web components help better bridge the gap between educational design and implementation? Might it provide a shared language that helps improve educational design? Might it help encourage the adoption of design patterns?

References

Biggs, J. (2012). What the student does: Teaching for enhanced learning. Higher Education Research & Development, 31(1), 39–55. https://doi.org/10.1080/07294360.2012.642839

Goodyear, P. (2005). Educational design and networked learning: Patterns, pattern languages and design practice. Australasian Journal of Educational Technology, 21(1). https://doi.org/10.14742/ajet.1344

Goodyear, P. (2009). Teaching, technology and educational design: The architecture of productive learning environments (pp. 1–37). http://www.olt.gov.au/system/files/resources/Goodyear%2C P ALTC Fellowship report 2010.pdf

Goodyear, P. (2020). Design and co-configuration for hybrid learning: Theorising the practices of learning space design. British Journal of Educational Technology, 51(4), 1045–1060. https://doi.org/10.1111/bjet.12925

Johnson, L., Adams Becker, S., Estrada, V., & Freeman, A. (2014). NMC Horizon Report: 2014 Higher Education Edition (No. 9780989733557). http://www.nmc.org/publications/2014-horizon-report-higher-ed

Jones, D., Stewart, S., & Power, L. (1999). Patterns: Using Proven Experience to Develop Online Learning. Proceedings of ASCILITE’1999. https://djon.es/blog/publications/patterns-using-proven-experience-to-develop-online-learning/

Jones, D., Heffernan, A., & Albion, P. R. (2015). TPACK as shared practice: Toward a research agenda. In D. Slykhuis & G. Marks (Eds.), Proceedings of Society for Information Technology & Teacher Education International Conference 2015 (pp. 3287–3294). AACE. http://www.editlib.org/p/150454/

Nanard, M., Nanard, J., & Kahn, P. (1998). Pushing Reuse in Hypermedia Design: Golden Rules, Design Patterns and Constructive Templates. 11–20.

2023 Update

Add the “magic script” to my WordPress install and we have…

Original

So look what I’ve done inside my Blackboard Learn sandpit site.

It probably doesn’t look that exciting. A bit of HTML and a couple of animated GIFS. Anyone could do that, right?

Not quite. Following explains why this is a bit of game changer and explores how it might be leveraged in work with Blackboard.

It’s not the what, it’s the how

…And what the how makes possible

The core of this image is enabled by four different web components

1. grid-place – provides an easy way to display the three SpongeBob images in a grid
2. meme-maker – overlays the meme-like words (i.e. ARE, YOU, READY?) onto the SpongeBob images (no image manipulation required)
3. hax-logo
4. type-writer – provides the “type-writer” animation of “Any tag you type here that is listed…”

A web component is a nicely encapsulated bit of code. Code that provides some specific functionality. For example, the ability to make a meme. i.e. take any image on the web and overlay words of my choosing on that image. (e.g. the three times SpongeBob’s happy dance gif was used in the image above.

No online meme maker was used in the construction of the above Blackboard-based content.

Instead – like all web components – I used a specially created HTML tag. Just like any other HTML tag, but provide this unique meme making functionality. What’s more I could use this functionality as many times as I want. For example, I could add a meme with happy dance SpongeBob saying “hello world”

To do this I would (and did) add the following HTML to my Blackboard page.

HTML
<p><meme-maker alt="happy dance GIF by SpongeBob SquarePants"
image-url="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif"
top-text="Hello" bottom-text="World"
imageurl="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif"
toptext="happy dance GIF by SpongeBob SquarePants"></p>
Which produces the following (all on the same Blackboard page).

Note: The meme-maker tag wouldn’t work without the p tag around it. Perhaps a Blackboard thing, or perhaps an artefact of the kludge I’ve used to get it to work in Blackboard.

The meme-maker web component includes code that knows how to take the values I’ve placed in the top-text and bottom-text attributes and overlay them onto the image I’ve specified in image-url. Change those attributes and I can create a new “meme”. For example, something a little more HAX.

But wait, there’s more

But I’m not limited to those four tags/web components. I can use any of the 560+ web components listed in this JSON file. A list that includes: various types of charts; more layout components like the grid; players for various types of multimedia; a discussion form; rich text editor; and, much, much more.

Thanks to the magic script I just include the right HTML tags and it all happens as if by magic.

TODO I do need to find out if and where the docs are for the various components. The NPM pages and git repo aren’t doing it for a lowly end user.

And it works anywhere on the web

Web components are based on web standards that are supported by all modern web browsers. Meaning that the magic script and the bit of content I’ve written above will work in any HTML hosted by any “content management system”.

e.g. view the content from Blackboard in this page from my personal website or view the original inspiration in this CodePen

How it works in Blackboard, currently

It’s a currently a horrendous kludge that’s not really usable. I certainly wouldn’t be using it as it stands (but more on that below). And I wouldn’t expect the average academic or educational developer to be lining up to use it as stands.

The main problem with how it works is the configuration of the TinyMCE editor in Blackboard. Configuration that ends up encoding the HTML elements for the web components into HTML entities. Meaning the web components don’t work.

The kludge to get the magic script to work goes like this

1. Add the magic script code into a Blackboard content item using TinyMCE.
2. Use TinyMCE to add the web component HTML into a Javascript string (which will get encoded as HTML entities by TinyMCE when saved).
3. Add a Javascript function to decode the string into the item.
4. Call that function and injectsthe decoded string into a specific DOM element.

Together this means that the magic script does it magic when the Blackboard page is viewed.

All this proves is that the magic script can work. Question now is…

How to better use this within Blackboard?

The method described above is usable for just about no-one. A better approach is required for broader, effective adoption.

HAX as a way of editing content (not currently possible)

HAX is the broader project from which the “magic script” originates. There is an 8 minute video that explains what and why HAX is. It describes HAX as providing a way to edit course material in a way that the editor understands what type of content/object is being edited and uses that knowledge to provide content appropriate editing operations. HAX is a way of embedding more design knowledge into the technology thereby reducing the amount of knowledge required of teachers and students.

All of this is enabled through the use of web components. HAX uses the magic script to know about what type of content it is editing and what it can do to that content. HAX itself is a component that can be added to any page, including within Blackboard.

For example, the following screenshot shows the use of HAX to add a horizontal line into the Blackboard page from above.

Of course, the edit I’m making to the Blackboard page is only visible to me while I’m looking at the page. Any change I make is not saved for later use. For that to happen HAX needs to be integrated into the authing process of the content management system (in this case Blackboard). The What is HAV? includes examples of this happening in various different content management systems including Grav, Drupal and variations of WordPress. This is achieved via changes to the content management systems editing process. For example, this Javascript for WordPress.

Something like this might be possible with Blackboard. JSHack is a Blackboard building block that enabled the injection of HTML/Javascript into Blackboard pages. Beyond what is possible by manually including HTML/Javascript via TinyMCE that I’ve used above.

But, I don’t have the ability to install Building Blocks into the institutional Blackboard. I’m not even going to try to make the case.

Without this ability, I can’t see how I can make the “HAX as editor” approach work. What follows are some other alternatives.

Make a Black(board) magic script (unlikely)

One potential approach might be to write an extension to the magic script specifically for Blackboard that would work something like this:

1. Add the magic script etc. to any Blackboard page via the Blackboard editor.
2. Author adds any of the web components by typing HTML into the Blackboard editor.
3. But on page load, the magic script would search the content items for any web component HTML entities and decode them.
   Not sure how challenging correctly finding all the HTML entities will be.
4. At this stage, the original magic script takes over and magic happens.

There are two problems with this approach:

1. High levels of knowledge.
   It requires authors to write HTML manually. Maybe some educational developers. But not many.
2. Can it be done.
   I’m not 100% convinced I could write Javascript to find all web component HTML entities and correctly decode them.

The Content Interface approach – partly implemented

The Content Interface is the attempted soluton to the content authoring problem as part of another attempt to share design knowledge for digital learning.

With the Content Interface authors use Microsoft Word (a tool many are comfortable with and which provides various authoring functionality) to create course materials. They use Word styles to semantically mark up the objects in their materials. The Word document is converted to HTML and pasted into Blackboard. A Javascript then transforms the semantically marked up HTML in various ways.

The simple approach – Implemented

One of the styles supported by the Content Interface is the embed style. It’s used to include HTML (e.g. the embed code for a YouTube video) in the Word document which is then turned into HTML in Blackboard that is displayed (e.g. the YouTube video). If the magic script Javascript is added to the Content Interface javascript then it should be possible to embed web component HTML in the Word document and have it displayed via the Content Interface.

The more useful approach – not yet

The Content Interface Javascript is currently hard coded to translate Word content with specific styles (e.g. Reading) into a specific collection of HTML and CSS. What is a web component but a way to package up code (Javascript), HTML and CSS into a more reusable form? Suggesting that parts of the Content Interface could be re-written to rely on the magic script and the associated web components. Bringing to the Content Interface all the advantages of web components.

In fact, the Content Interface itself could be rewritten as a web component. Enabling there to be multiple different Content Interface components designed to suit specific purposes. For example, as shown above the Content Interface currently used jQuery accordions to navigate through large course materials. Different components could be written to support different navigation styles. e.g. a parallax scrolling page or a choice like Microsoft Swa offers between vertical and horizontal navigation.

Same for the Card Interface – partially implemented

The Card Interface complements the Content Interface in the act of displaying modules of course materials. The Card Interface generates the “table of contents” of the modules. The Content Interface generates the module content. Given their common origins the two approaches for integrating the magic script with the Content Interface also work for the Card Interface.

The simple approach – sort of implemented

i.e. include the magic script with the Card Interface code and embed a web component. The problem with this approach is that the web component HTML has to be entered via TinyMCE (details about Cards are entered via TinyMCE into Blackboard content items) leading to the HTML entity problem…but it doesn’t. As shown in the following image.

This is actually an unexpected outcome. A bit of tidying up would enable this to work somewhat. But of questionable value.

The more useful approach – Card Interface as web component(s) – not yet

As with the Content Interface, the Card Interface could be reimplemented as a web component. Improving its structure and reusability. There could then be potentially a collection of related web components that provide different interfaces and functionality for the purpose of navigating between collection of objects.

What next?

HAX as an editing experience isn’t something I’ll be able to support in Blackboard. However, web components do offer great promise and require more exploration.

I need to

• Learn more about developing web components.
• Figure out how to roll out a CDN/magic script specific to my institution/work.
• Start thinking about productive ways to integrate web components into my daily work.
• Ponder the implications of web components in terms of the NGDLE/VLE and local strategic directions.