Tuesday, 28 June 2016

Customisation and localisation of Open Learning Resources vector graphics

This post is one of a series on a proposal for an Open Educational Resource vector graphics library.


Vector graphics can be structured to identify sub-components which can be altered or replaced. It is therefore possible to customise vector graphics used in open-licensed learning materials automatically using sets of alternate "parts".


There has been some discussion recently about the representativeness of graphic libraries like Unicode emojis (such as skin tone and gender), and about the customisation of games character appearances like those in the Sims. Historically, there has been a representation bias in the tech world, which is being addressed over time with internationalisation and equality efforts, which should see more inclusion and diverse cultures.

Beyond that, there are issues of engagement with students, who may respond to:

  • favourite characters from various media
  • people, objects and places that appeal to or are culturally appropriate them
  • the ability to choose styles of pictorial representation

Authors, editors and adapters of (any contributors to) learning materials may also prefer to use libraries and tools for graphics that are component-built and can be easily customised (or automatically overridden). I specifically cover Open Educational Resources here, which are intended to be open-licensed, based on open formats and practicably editable.

I will cover personalisation a future post. I will not talk much about technology or tools here either, although I plan to build a demonstrator and document it later. Neither will I talk about text customisation (which is certainly possible, as you might know if you have used a tool like Adobe FrameMaker with conditional text features).

In this post, I will describe a scenario that takes us through the stages and roles to achieve the goal of customisation and localisation of vector graphics in learning materials:

  1. the developer of a standard set of vector graphic components
  2. the author of an Open Educational Resource
  3. the administrator of a virtual learning environment
  4. a student taking an online course

Scenario and assumptions

This scenario is set in the near future where an extensible basic standard set of vector library components has been established, to the point where it has been implemented by several key organisations and taken up by influential champions, even as discussion and disagreement are ongoing.

Developing a set of standard vector graphic components

A developer with a strong vector illustration skill set has been commissioned to produce a themed set of graphic components.

She downloads the latest template, reads the guidance, and checks out both exemplars and real-life samples. Each set comes in the form of a web page with a layout of inline Scalable Vector Graphics (SVG) shapes. This is handy because the same format is:

  • human viewable
  • machine importable
  • search-engine friendly
  • compatible (in the SVG section) with template and drawing tools
Screenshot showing a featureless humanoid shape in front, back and right views.
Sketch of part of template showing front, back and right views of person-1. Note for economy and efficiency that missing elements can be automatically replaced by symmetrical components. In the case of deliberately missing limbs, an invisible part can be inserted to prevent such replacement.

She completes and submits her set design, which is entitled Rollergirls.

Authoring an OER graphic

An author wants to illustrate a resource on village cricket. He uses a Cricketers graphic library (with players and equipment). His drawing tool allows him to drag, drop, pose and position graphical components, and import or draw his own. He is well aware of and approves of the customisation feature built into the graphical system, which he feels is useful in keeping students engaged.

An illustration of village cricket. Note that the figures of people are default size (1 cm per pixel base) for illustrative purpose here; they can easily be scaled, automatically respond to window size and be zoomable. The people are articulated on joints and can be posed in simple ways.

The author uploads his resource into his organisational VLE.

The VLE administrator

The administrator comes into work and finds six new graphic library set requests. She rejects one as not in keeping with policy, and another after it fails a validation check. A third one throws up a security warning about potentially problematic content: she can choose to automatically strip out that content, accept or reject it entirely. She rejects it. She then looks over the three submissions viewing them in sheet mode, which is like looking at an array of emojis, and rejects one on quality grounds. She then accepts two sets and imports them into her VLE. One of these is the Rollergirls set.

Students taking an online course

Students using the VLE have a customisation page where they can find a range of options, and when a new option is added, can choose to be notified. One student, learning about rustic games, finds that the Rollergirls set has been added, and chooses this option before proceeding to that week's material. Because he follows some religious strictures, he has also chosen to filter out references to alcohol.

Now, thanks to the automated transformation stylesheets, his view of the original image is transformed.

01 01
The original image has been automatically transformed. Any matching graphical component has been replaced by its counterpart in the new set. Also, any graphical object marked as 'alcohol' has been removed for this student's view, so the wine bottle and glass have disappeared from the table. Note: because I am showing both versions of the image in the one HTML page, I have made some code adjustments but there will still likely be minor interference in styling.

Some other possible case scenarios:

  1. an old but popular set is forked to meet the requirements of students unhappy about the lack of representation of their ethnicity/gender/interests;
  2. creative studies students produce their own set as a project (based on ancient Egypt, modern celebrities, geek culture);
  3. a homesick student is cheered by seeing visual reminders of his homeland;
  4. a student wants to see his comic book heroes in learning resources, and their outsized geometries can still be accommodated…
  5. …as can the anthropomorphic/anthropometric cartoon animals favoured by his younger sister.

Why do this?

There are a number of reasons why I think this sort of thing might be a good idea.

  1. student engagement: giving learners control over the appearance of their educational resources is (within bounds anyway) a good thing if it increases their engagement with topics;
  2. customisation for diversity: this can be because institutions wish to accommodate a wider range of visualisations, without necessarily having some kind of quota system house style, and the default graphical design can be neutral (like crash test dummies or prototyping symbols) if necessary;
  3. cultural requirements and localisation: this need not be the same as diversity, some requirements will be to constrain visuals, like the alcohol example, and if necessary, replace human depictions with geometric symbols, although sometimes you just want to replace broccoli with green peppers otherwise people will not get the joke;
  4. cultural buzz: you might unleash local creativity, attract a guest artist, create talking points around openness and inclusion;
  5. the technology and techniques are likely to bring other benefits, like easier to use graphical tools, and faster to download graphics that work better on mobile phones (if this is done properly);
  6. separation of concerns: this approach allows parallel working;
  7. continuous improvement: content components as open source software, version control, automatic updates;
  8. digital literacy: improvements all round;
  9. accessibility: done correctly, high-visibility styles, zoomable graphics, descriptive metadata in the markup (such as names of objects and preset poses) may make graphical content more generally accessible (and searchable);
  10. student expectations: I think that students, used to games and avatars, are simply going to expect and want to customise their learning materials, especially if they are not appreciative of the depictions therein.

Challenges, problems and contraindications

Here I mull over possible objections.

I have used a wide range of SVG authoring tools, and although each have had their advantages, none I used was really code-friendly, so I don't think it is as simple as handing out an Illustrator template (good candidate, expensive licence). I had quite a difficult time working up a prototype, mostly due to editing problems and refactoring designs rather than complex coding. I plan to write up part of a requirements document if I have the time. Custom, possibly browser-based tools will very probably be required.

The technology may move on quicker and bypass efforts in this sphere (although that applies generally and is seldom reason not to make an attempt).

Standardisation is hard. Yes, but easier than all the combined effort producing a myriad of graphic house styles.

People are rubbish at putting in metadata. Which is why experts will probably be needed to label all those bottle of wine as "alcohol" and so forth.

Only a very small percentage of learning materials would benefit. I think this might be the case, but there will be some areas, like vocational studies, where there could be a concentrated benefit.

It would be a distraction from more pressing issues. Maybe, but I think the benefits of working smarter are many.

Vector graphics are boring/look like clip art/are awful when clashing styles appear in the same diagram. Well, I am not an illustrator, but real illustrators can do wonderful things with vector graphics, they are widely used, and some consistency can be created with graphical style guides.

The scale of an undertaking might mean relying on commercial organisations to develop the technology (who would want to place their characters and products within learning materials for free as advertising and brand development). As long as the technology and standards were all open, and supported open choice and user creation, then I do not see that as necessarily a bad thing. In fact, I think probably all of the technological and design problems have already been solved in the creative industries sector, so I would welcome their expertise added to an open design process.

Offensive or subversive content may be smuggling into VLEs. I dealt briefly with some of the security, validation and visual checking steps that may be required. Because my model requires administrator approval, and then opt-in from a user, there are immediate safeguards. Many graphical depictions may be offensive to many people; this way, learners might be able to chose a depiction more to their taste.

Code and examples

I have now produced a simple working demo which also supports my next post on personalisation, which continues this series on an OER vector graphic library. There is some code in this oer-vector-library project on Github.


It might be cool if people could change the graphics in their open learning materials. Also, it might not be practical or desirable.

To the extent possible under law, Sleeping Dog has waived all copyright and related or neighboring rights to the text of Customisation and localisation of Open Learning Resources vector graphics. This work is published from: United Kingdom.

No comments:

Post a Comment