That's me in the picture: personalisation of Open Learning Resources vector graphics

This post is one of a series on a proposal for an Open Educational Resource vector graphics library, and builds on the post on customisation and localisation.

Abstract

Here is a discussion of how learners may create personal representations (avatars) that could appear in their open learning materials.

Introduction

The history of digital avatars is widely known. At the simplest level, users might choose between a handful of icons or other representations to express their identity. Or they might upload a picture to do the same thing. Or, in more complex cases (typical of some computer games or console frameworks) they might spend many minutes browsing through many sets of choices to create a highly individualised representation.

Here, I will be exploring the possibility of using such avatars within learning material graphics, to literally put the learner in the picture. It may be useful to read my previous posts on OER graphics libraries for more background.

Demonstration

First, it might be helpful to work through this simple customisation/personalisation demonstration. I will only cover the personalisation part here.

Probably within a settings page of a VLE, a learner might encounter options to set up their own avatar. Here we have just five settings, each with only four options, for simplicity:

• Skin tone
• Hair colour
• Head style
• Headwear colour
• Clothing colour

Changing these should reflect in the front-back-right preview, and also in the first example ("interview") image. Note: if the page gives an error, it may have timed-out, in which case it can be reloaded. The code was still pretty crude as I write this post, and in production would have to be somewhat more advanced.

Why do this?

In addition to reasons shared with previous posts, like increased user engagement, you may reflect on some reasons why avatars are successful elsewhere.

Self-inclusion lets the learners make themselves the heroes (or at least protagonists) of their own learning stories. This might be particularly helpful for vocational courses, but may also have a slight positive effect on raising confidence and esteem.

The interviewee is personalised using Sienna skin tone, HeadScarf head style with MediumOrchid colouring and SkyBlue clothing.

Because the construction of the avatar is component-based, it can be posed, articulated and have parts swapped out for others (in my simple demo, all head styles are actually present at once, but all but the selected one are hidden by the styling).

Other examples

You may use your imagination as to what may be achieved using web graphic format SVG, or check out some examples like this Character Generator, which I believe is currently in the alpha development stage according to its designer.

Summary

Because the use of avatars is well-known and popular, I will assume that there is potential for their use within learning material graphics: not to identify the learner to others, but to create a personal representation of their character that takes on the role of protagonist within the learning story they are presented with. Rather than simply accepting a representation depicted by others, this form of self-inclusion may be of some value in fostering positive identification with learning outcomes, especially in vocational, social skills and/or self-development learning.

To the extent possible under law, Sleeping Dog has waived all copyright and related or neighboring rights to the text of That's me in the picture: personalisation of Open Learning Resources vector graphics. This work is published from: United Kingdom.

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.

Abstract

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".

Introduction

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

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.

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.

Summary

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.

Considerations and use cases for an Open Educational Resource vector graphics library

Abstract

Following on from a Proposal for an Open Educational Resource vector graphics library, here are some sample use cases and some general considerations for such a project.

Introduction

Where might you use vector graphics in Open Educational Resources? What opportunities, best practices and constraints might you consider?

This post is intended as a quick but wide run-through of some collected thoughts on these questions. As before, the focus will be on building collections of reusable, interoperable components that can be easily combined and edited, reducing the development effort and increasing the quality of learning materials.

Use cases

Configurable objects

You may require a graphic that represents a particular state of an object. One example might be an analogue clock showing a particular time. If you had to edit the clock manually by rotating the hands, this is relatively inconvenient and even error-prone. It would be simpler to input the time into a component which would then render the clock displaying the required time.

Example: Syringe.

Layers and transparency

1. anatomy of biological specimens
2. devices with removable cases and components
3. comparison, for example superimposition of two phenotypes of an insect
4. alternate and optional layers (such as various markings, patterns, uniforms, surface features over a principal figure)

Animation

1. processes and tasks
2. mechanical operations
3. transformations over time
4. causal chains

Flying Scotsman locomotive example.

Posable objects

Similar to animation are posable objects, which may have parts that can be transformed (rotated, scaled, skewed, translated and so on). Human figures may have rotatable limbs, for example, which could be handy if they were to hold a variety of objects.

Assessment multiple choice

A collection of shapes and symbols may be useful in multiple choice questions, and this is more powerful and flexible when these can be combined.

Sample Object-Match Question Type: What is Road Sign?

Positional diagrams and maps

Where the position of objects relative to each other in a bounded space is significant, such as in the cases of floorplans, maps, archaeological digs, crime scenes, team sport formations and so on, vector graphics can be effective at promoting the significant parts and reducing visual clutter (especially in conjunction with labels and styling, possibly a key).

Scenes

In other cases, possibly elevations (side on) rather than plan (top down) views, vector graphics can illustrate actors and objects, such as institutional settings, theatrical stages or public spaces. One typical use is, in conjunction with a painted scene, a smaller visual key with numbered shapes and labels. Example: John Trumbull's Declaration of Independence. This effect can also be achieved interactively by an invisible layer (or area map) with vector shapes plus labels that pop up as roll-overs.

Using illustrations where photographs may be problematic or less effective

1. where actual photographs may be too dangerous (say, depiction of accidents) or upsetting (violence)
2. where photographs would identify individuals (in an unwanted or unwarranted sense)
3. where available photographs would not meet standards of balance or inclusion
4. illustrations could replace photographs of children or other protected groups

Internationalization

Graphical representations may be more internationally recognizable, although there are often conventions to learn (not all cultures use the same representations and symbols). In SVG, like other markup languages, you can specify different languages for text.

Editable graphics may be customized to different cultures.

Low bandwidth

Efficient vector graphics suit mobile (many devices have chips optimized to handle SVG), slow dial-up connections, and are generally more losslessly-compressable than bitmap images.

Infographics

Infographics make particularly good use of outlines.

Cartoon panels

Sequences of cartoon-style panels can efficiently and effectively demonstrate processes and actions in a familiar storyboard way.

Games

There are whole genres of games that have used vector graphics, and some references may be especially effective at reaching certain audiences.

Engagement and humour

Sometimes, illustrations can quickly draw the viewer in through an emotional connection, often with the simplest of shapes (hence the popularity of smileys or emoticons). Humour, such as the skillful juxtaposition of incongruous objects, can also be engaging, although subjective.

The kind of gentle humour of Richard Scarry's illustrations is geared towards a younger audience, but the same principles apply to a lot of educational illustration (his cut-away aeroplanes show how jet engines work, for example, but in this case the narrative is driven by characters, their actions and reactions).

Considerations

What not to include

It would not seem necessary or advisable to include:

• symbols represented sufficiently as Unicode characters (although if more detail, variation or two or more foreground colours are needed, then inclusion may be reasonable)
• symbols and graphical components that are commonplace in drawing applications like Visio
• graphics which unduly duplicate others already in the library (bearing in mind that similiar variations should be able to be derived from a single source object)
• particularly sensitive or provocative imagery (although some image libraries, such as graphic medical content, could be published in a restricted manner)

Scale normalization

The purpose of having some kind of normalization of scale is not so much for printing or displaying at (multipliers of) actual size, but for combining objects in a way that can (if desired) preserve their relative sizes. Not all images have actual sizes though, and some look similar at different sizes/magnifications (like fractals) or fall into a wide range (like icebergs or clouds).

In the locomotive example mentioned above, the graphic is scaled at 1/100th (a centimetre of the graphic equalling 1 metre in the physical world).

Collections

Collections could be created in various subjects from various disciplines, for example:

• transport
• people
  • occupations
  • roles
• biology
  • taxonomy
  • processes

Organizing resources within collections makes it easier to spot (and fill) gaps, and run editorial and technical processes such as reviews and validations. It also makes it easier to pull graphic components into combined drawings with greater assurance that graphics from same collection (or sub-category thereof) would be interoperable.

As long as the objects were accessible over the Internet (indexable by search engines) and used consistent metadata schemes, collections would not need to be hosted in the same online location (website).

Metadata

SVG has specific elements for metadata.

Here is some advice I received from the CETIS-metadata list:

If your graphics are embedding an HTML OER then I would mark up that resource using schema.org. I would try to markup the HTML around the SVG as a separate item without having to putting any schema.org markup into the SVG (i.e. if it is a figure with a caption, I would put it in its own <div> and mark up the caption as the description). Similarly if the graphic is presented in isolation, on an HTML with some info about it you could mark that up with schema.org.

This seems like it should work, and I have tested that attributes are readable to search engines by using the Google Structured Data Testing Tool to check that both RDFa and schema.org metadata are being picked up (in a HTML5 page with embedded SVG).

There are still some tricky areas (subject vocabularies for classifying collections, artistic style vocabularies to indicate stylistic compatibility).

Graphic style

1. it might be best to avoid drawing shadows (outlines on hidden layers could be transformed into shadows cast on the ground) or shaded parts of surfaces, since combining graphics could give jarring results
2. scope could be provided for using corporate colours to replace two or three main (default) colours
3. viewpoints will vary: elevation, plan, perspective, distorted (and sometimes you will want the set, typically for built objects with clearly-defined facings)
4. limited set of artistic styles
   1. possibly a semi-realistic Ligne claire (clear, uniform lines; flat colour) style
   2. one or more simplified cartoon humour styles
   3. example A Student dreaming of her Graduation Day (unfinished, after Kitagawa Utamaro) in a Japanese graphic style
5. non-essential backgrounds should probably not generally be included, but if included then minimal and easily detached/removed;
6. human figures may be drawn in a few standard perspectives to facilitate their combination within a setting.

Combination with bitmap (raster) images

Structured graphics can contain bitmap images and text as well as vector components.

1. textures
2. hybrid (such as combining satellite photography with vector-based roads and location symbols in online mapping tools)

Technical

1. CSS style naming conventions to avoid collisions or allow overrides (see corporate colours).
2. drawing to a grid to simplify measurements, animations and translations.
3. At some point, newer formats or versions of formats will appear (like SVG 2), and over time older versions may become less supported (Adobe Illustrator CS5 won't open FreeHand drawings before version 7, it seems). Some way of managing file format versions is generally required, and every graphic object should have a clear indication of the type and version (for example, SVG 1.1) which is available to the repository search function.
4. 2D vectors from 3D possible, especially from CAD subjects.
5. SVG should work well with high resolution, small size ("Retina") screens and subpixel measurements.

Import and conversion

• SVG cannot be imported directly into Microsoft Word or PowerPoint. It may be possible to open SVG in the free Inkscape and save as Windows EMF format, which can be imported into these Microsoft Office products, although there may be some aspects which do not directly cross over.

Further steps

It should be possible to generate 2D vector graphics from 3D models. Software tools such as Swift 3D already do this.

Existing collections could be prepared/converted.

Open invitation to art colleges and industry? Celebrity contributions?

The kind of open community of IAN where people can request and submit symbols may well be the most successful model for organic growth and matching contributions to need, given a critical mass of requesters and contributors with the requisite spread of subject knowledge and skills.

To the extent possible under law, Sleeping Dog has waived all copyright and related or neighboring rights to the text of Considerations and use cases for an Open Educational Resource vector graphics library. This work is published from: United Kingdom.

Proposal for an Open Educational Resource vector graphics library

Abstract

Vector graphics can be used to illustrate learning materials in a variety of screen-based as well as print media. One of the main advantages of vector graphics is that they can be edited, restyled, broken apart and combined to suit many different purposes at any resolution. A collection of consistently-produced, open-licensed, open format vector graphics could form a component library that I believe would effectively complement an Open Educational Resource repository like Jorum or Re:Source.

Courtesy of the Integration and Application Network, University of Maryland Center for Environmental Science, Ecosystems category.

Introduction

Current Open Educational Resource repositories have the potential to revolutionise the creation of learning materials. However, some authors have reported difficulties in using current tools and technologies to produce the high-quality learning materials they can envisage. One area of difficulty might be in tools and resources for illustrating and diagramming, which often need technical and artistic skills, and/or expensive proprietary software, and/or result in graphic files that are difficult to combine, edit and reuse.

When I worked in learning materials production, we used vector applications like FreeHand and Illustrator, and we built up our own small libraries of vector components (symbols, components, equipment, charts) to reuse in future diagrams and illustrations. Perhaps something can be done across the sector, using open licences.

Courtesy of the Integration and Application Network, University of Maryland Center for Environmental Science, Fauna category.

Challenges

However, there are some issues that need to be addressed to allow authors, editors and other contributors to harness and build up such component libraries. When I was working on an online heraldic device generator, I was able to reuse fine examples of lions, eagles and dragons that others had created and released under open licences. Nevertheless, some significant reworking was needed to make the SVG compatible with my web application, primarily to allow for colour changes.

Some people might say, why not simply use existing clip art libraries, which often have collections of royalty-free vector graphics? There are a number of potential problems with these:

1. The licensing may be unclear or restrictive, or the actual provenance of the graphics uncertain. To be a proper fit for an OER repository, graphics should have clear provenance and use the same (Creative Commons, probably) licences as the rest of the resources.
2. Free clip art may be of dubious quality. Who could forget Microsoft's infamous globe with the poles in the wrong place, or clock with incorrect roman numerals? You may also get a surprise when trying to edit them, especially if they have been "flattened" (useful structure removed) or produced from line art by automated means.
3. The clip art may be in so varied styles that combining them would be painful and/or unacceptable.
4. The clip art may not form coherent or comprehensive collections that can be augmented as required.

Courtesy of the Integration and Application Network, University of Maryland Center for Environmental Science, Flora category.

Current environment for vector graphics

Current and recent versions of all major desktop (and most mobile) web browsers support the Scaleable Vector Graphic standard within HTML5 without need for plug-ins.

A range of SVG-supporting editing software, from the commercial Adobe Illustrator through the free Inkscape to the browser-based SVGedit are available.

Where vector graphics are not supported, they may be converted in bitmaps (rasterised) such as PNGs, which are used for the examples in this blog post. The original vector (such as SVG or Illustrator) files should always be supplied with the OER materials to allow editing.

Suggested specifications and technologies

Each vector graphic would be editable, repurposeable, restyleable, possibly with interchangeable components. They could be combined or taken apart to form new graphics. They would have consistent, semantic metadata and build up into collections.

1. There would be one or more distinct illustrative styles, such as symbolic, realistic, cartoon and so forth.
2. Each graphic would probably have a silhouette, which could be used as an outline (useful for infographics) or shadow.
3. Technologies: probably be SVG with CSS for styling. A standardized system of CSS classes should make styling easier when combining graphics or dropping them into websites.
4. The vector graphics would be suitable for web, print and games at any resolutions.
5. Unit sizes would need to be normalized to a small set of scales.
6. A wiki, style guide, tutorials and samples would be provided.
7. SVG may also be used for basic animations.
8. SVG inline in HTML5 may be scripted via the DOM.
9. SVG should be inherently more accessible than bitmap images due to possibilities of description, zooming, applying high contrast styles and otherwise being more amenable to user customisation.

Note, however, that vector graphics have their limitations, and bitmap formats like JPEG/JFIF are better for photographic and similar images.

Courtesy of the Integration and Application Network, University of Maryland Center for Environmental Science, Human category.

Examples

One of the best examples of such a library that I have found so far is the Integration and Application Network Symbol Libraries which contain over 2,700 symbols in six categories related to environmental science and ecology. These are in editable formats like SVG and Adobe Illustrator, and freely available under an attribution licence. They have a lot of documentation, videos, tutorials and a discussion forum for requests and submissions. They use a version of SVG Edit for their online conceptual diagram creator.

Summary and conclusion

I believe that open-licensed vector graphic component libraries could play an important role in supporting Open Educational Resources. The modern technological environment is more vector-friendly than ever, and there is now a very low entry threshold for educators who wish to add vector illustrations to their learning materials, with robust browser and mobile support; and free, online tools. Collections could be built up by communities of illustrators, editors and requestors, working to guidelines that can be developed as work progresses, informed by feedback from users and contributors.

To the extent possible under law, Sleeping Dog has waived all copyright and related or neighboring rights to the text of Proposal for an Open Educational Resource vector graphics library. This work is published from: United Kingdom.