Digital skills are relatively unprecedented. They do not have standards produced from a body of taught knowledge but are formulated from a body of practiced knowledge. The number of creative options and the absence of clear certainty on correct choices leads to a wide range of decisions that are easily positioned on a spectrum.
This report starts with incorrect choices, which is the easiest place to start, and ends with a range of examples showing the best technical and aesthetic choices currently in use from 406 UK FE/6F/AE College VLEs. The will inevitably be some subjectivity involved in the more detailed distinctions but broadly, a consistent standard is maintained throughout all sectorwide reports. The main principle of all reports, including this one, is adherence to a minimum standard of usercentric design. Yet, because an overwhelming majority of College websites and VLEs do not achieve the minimum standard, nuanced and subjective opinions are not the focus of this report.
Defining minimum standards of usercentric design is straightforward. Asking the question from the perspective of busy, well-connected, and visually impaired users; 'how can I do the action I want to do?' sparks follow up questions:
How do I ensure participation?
How do I contact somebody to ask about participating?
Where do I participate and how do I get there?
What is the date and time of my participation?
How do share my participation?
How do I automatically populate my personal organiser with the details - date, time, location, what I need to bring - of my participation?
How do I access the materials involved in my participation?
How do upload my participatory contributions?
How do I engage in public forums with other participants?
How do ensure that individual needs are facilitated to enable participation?
How do I provide feedback on, complain about or publicise the experience of participating?
Who is organising the participatory activity? And where are their professional biographies and portrait images.
How do I help others to participate?
How do I volunteer to improve the experience and outcome of participation?
How do I access data on the participation experiences and outcomes generally and specifically about individual participants?
What complimentary activities run by other organisations and enrichment activities run by you do you suggest I participate in?
Are there any that are missing?
The general contact details and then the specialised contact details for specific activities such as Admissions or, in this instance, the IT/VLE Helpdesk are critical content that needs to always be presented but all of the answers to each of these questions needs to be included on the relevant website pages. But to start whittling down the 406 VLEs tested the first error is to present a login form as a full page instead of part of a home page offer:
Some login pages are better than others, but all of them miss an important trick of always presenting more than the bare minimum. Some of the 244 VLEs that offer only a login function include an IT Helpdesk email address and phone number, but most don't. 2 Colleges do worse than showing a login page by showing a pointless additional navigation step to the login page; 'Click this text to log in using your ... username and password' and 'College users click here to log in'. ◀ Click on all thumbnails for full resolution versions.
The second issue is obvious underdevelopment. This is a separate issue from the use of a Calendar Module with no events as default or to fill space. Underdevelopment is literally big empty spaces on the VLE home page. Lots of VLEs have filled the space with sliders but then the very best fill the space with opportunities for participation.
The third issue is branding. Where is the logo and what is with the many ridiculously small logos? Why not present a high quality PNG full sized logo, along with the corporate palette, and all of the College website design style including font choice? And why go to all the effort to produce a unique renaming of the VLE? It is enjoyable playing around with templates and branding but, at the risk of coming across a boring, continuity improves productivity.
The forth issue is image selection and design basics. Why use stock graphics, or not maintain the correct aspect ratio for portrait photographs? Solid colour backgrounds on main corporate logos are fine when the background is the same colour, or done differently on purpose! Why not schedule a graphic designer to do a quick clean up the VLE design? It is a straightforward project to replace half a dozen of the more grotty graphic elements.
There are lots of other issues, equality of access, clear English, availability of basic information, an absence of any flourishes etc. But the purpose of this report is to identify examples to emulate and, thank goodness, there are great examples that are well designed, are fully populated with calls to participation, and design/operational flourishes, to hold up as best practice. Additionally, in my subjective opinion, there are the best UK College VLEs.
Examples of Best Practice.
Below are 18 VLEs that are best for their use of templated design, presentation of logos, choices of graphics, portrait and landscape photography, and operational functionality. The aim is to present a easy list of small, quick, non-technical projects that can be scheduled into the workflow to produce a VLE that present the College at its best. Each of the 18 VLEs are listed in alphabetical order:
I know that it is a minor point but Bridgend College use the same colour palette on both their VLE and website! The opening slider is interesting to look at and, because the design is a template, the overall look is simple and effective. I cover later about VLEs as student dashboards rather than website home pages but the navigation is divided between header menu items and four well explained call-to-action buttons. The obvious criticism is that the search navigation, header menu item hover, and dropdown menu background colour should be changed from the template default or entirely random selection to one of the corporate colours, say #005d83 or #4d4d4f or #624166 . Using Chrome DevTools and/or Safari DevTools and creating a Custom CSS file, for example, is really straightforward if these changes are not available in the admin options. No VLE Support Contact Details.
Bold is best and the buttons used by Capel Manor College are as bold as possible. The colour selection is great despite not aligning with the website it actually aligns with all their social media channels. The obvious criticisms are that the slider takes up too much space above the fold and the 'logo' does not link back to the VLE home page. This also happens very frequently and for no reason defies the very basics of user expectations. A final criticism is that the 'Library%2520icon.jpg' graphic has, for no obvious reason, a restricted size of 338px. No VLE Support Contact Details.
This is a really nice template layout (apologies to designers that are building from the foundation up). The use of an outline version of the logo is very cool and the sticky header and transition look great as well as being practical. The overlarge slider is embedded in the overall design, making it look part of, instead of imposed on, the VLE. Two of the sliders, the Digital Experience Survey and the Retro Gaming & Coding Club, offer calls to action but the latter, a great looking part of an enrichment offer does lack a '▶' or a '▷ Click here for for more details'. The search for a course looks great, with its popup guidance and the Need some help with Moodle contact form is great. The obvious criticism is the missing logo link and on nit-picking, why not included the email and phone number for the IT/VLE helpdesk with the contact form as it really does help visitors out. VLE Support: This email address is being protected from spambots. You need JavaScript enabled to view it.
This is the first fully designed VLEs: The header looks fantastic, the menu items are clear and the search field is perfectly presented, the principal software packages are listed using their logos, the slider is subtle, and the tabbed content is almost perfect. Finally, in the footer there is an absolutely fantastic accessibility tool. There are no obvious criticisms but to do some nit-picking I would suggest the Events tab show a list of events rather than be a direct link to the events section, I would include the IT Helpdesk contact details in the header, and I would also suggest only using group portraits to illustrate content. ▶ VLE Support: This email address is being protected from spambots. You need JavaScript enabled to view it. | 0151 2523232
The first above the fold dashboard style VLE is weirdly only 1,010px wide but presents all of the system links in a reasonably clean way. The two fantastic features are first and second in the layout: 'Speak up – don’t bottle it up!, Find out more about your Support Services' and 'Have an activity, idea or group you'd like to create? Click here!' are really empowering to VLE users. There are so many obvious criticisms of the design and content e.g such as 'Site news | General news and announcements | (No announcements have been posted yet.)' and 'This theme is Copyright (c) Webanywhere 2017' that I will only mention one more: Exclamation Marks are used to express surprise or shock or a strong emotion about something. Don't use them incorrectly! And don't use them everywhere! This is part of the Level 2 English curriculum! Level 2! No VLE Support Contact Details.
Croydon College has the most striking house styles and it follows right through into the VLE. It uses the same style of header, slider, buttons and footer, with the buttons visible above the fold. The integration of the corporate logo with the VLE title is great and there is even a login module below the fold, unfortunately next to a big empty space. I will expand at length on home page/header login functionality later but there is one more aspect to the VLE that is excellent; the About Us links to the E-Learning Team's Blog. ▶ All of the content is excellent and informative and well worth emulating. Obvious criticisms are that first three slides, including 'Croydon College Moodle | Your online learning space. | Know More' do not actually link to anything. Also the button backgrounds are not active with only the symbols being active link, and there are no portraits photographs of students anywhere on the VLE. VLE Support: This email address is being protected from spambots. You need JavaScript enabled to view it. | 020 86863145
The dashboard design is great with only four buttons, admittedly no header menu items, but with a really handsome colour palette that is the same as the website but in a different order. The the best aspect of the New College Lanarkshire's VLE is the offer presented behind the buttons, two of which are behind logins but if the other two are anything to go by they are as equally fully developed. The Library & Learning Centres dashboard is almost as good as it gets, packed with guidance that is only let down by not being in HTML. Then there is the E-Learning Guides navigated to from My Help. This is a full YouTube channel of guidance which are unfortunately unlisted, without audio, and without text guidance in the video description or on the VLE, but even so, they facilitate participation and set a great example. The obvious criticism, apart from the nit-picking listed above, is that uniquely among UK College VLEs New College Lanarkshire is not hosted locally but by Enovation Solutions in Dublin. Its not a bad thing, just mildly odd because VLEs are very small systems and Colleges rarely outsource servers or operational services. But if they did the latter, of outsourcing the operation of their VLE, it would not require remote hosting their VLE or having the mildly discordant https://ncuk.learnonline.ie/ URL. No VLE Support Contact Details.
Unique among all UK College VLEs is an embedded login module. It seems so blindingly obvious when it is pointed out but it negates all login pages, all navigation to a login pages, and login modules presented below the fold. It is given the correct status in the header, appears on every page, and is only really missing the guidance or link to the Forgotten Password page on the use of a simple device for facilitating users, embedded in the header is a login module. The contact details for the Moodle Support are also the best and could only be more clear if they were bumped up to the header. I don't want to point out the obvious criticism because these two aspects put Saint Francis Xavier Sixth Form College so far ahead of all other College VLEs that if feels churlish but, the dashboard design is fine but located under the fold. And calendar modules look very empty whereas listings show all events including ones many months in advance. VLE Support: This email address is being protected from spambots. You need JavaScript enabled to view it. | 020 87726451
South Essex College's VLE has a great colour palette and for as much as the body of buttons and messaging is bumped down to below the fold by an inactive link, single slide slider, it looks great. The one exemplary aspect to note are the font sizes: Body 16px and Main Menu Items 17px. Curiously the website has 16px for both but then 17px looks great and is only let down by dropping to 14px in the responsive offcanvas version of the header menu. The obvious criticism has been pointed out already but I would also suggest that duplicating the logo is never good, the bold version isn't as handsome as the original and official logo, and the black version of the Moodle logo looks tacked on rather than designed. VLE Support: This email address is being protected from spambots. You need JavaScript enabled to view it.
This is the by far the best designed VLE dashboard. Despite the clunky, undersized and inconsistent graphic elements, and broken links, this VLE shows that simple, well designed, above the fold interfaces, are the best. Even with the arbitrary font, font size, and graphics choices. It also slightly breaks down in the responsive version but again, it still looks great. All the obvious criticisms such as the incredibly out of date news, the absence of any pre-login support, no explanation of each button on hover or anywhere else, the social media links opening in the same tab, the duplicated menu modules - 'Main menu' and 'Navigation', and the Webanywhere Ltd. Favicon and Footer can not dent the effectiveness of this piece of design. No VLE Support Contact Details.
Overall Sunderland College's VLE is the most fully designed and developed. It includes contact details in the header, a fully loaded offer, and a great florish in the slider a 12 second video loop. Admittedly the link is to a personal Twitter feed instead of an enrichment/informal education offer or the BAFTA Young Games Designers but even so one short looped video demonstrates technical authority and confidence. ▶ An obvious criticism is font size which gets all the way down to 'font-size: 8pt !important' Also sliders are bad generally because messages on subordinate slides are hidden. 10 slides is a bad decision and utterly pointless, especially when they contain many great messages and there is so much space to populate. One final issue, there is no need for an empty footer. VLE Support: This email address is being protected from spambots. You need JavaScript enabled to view it. | 0191 5116000
Okay, there are so many issues with this VLE that I will just park them to focus on the USP! It really is a Unique Selling Proposition to insert a 6 second autoplay muted loop video as a background. But then again, it actually looks really good, except that it isn't responsive. ▶ The obvious criticism is that the offcanvas menu is completely unpopulated so that when the VLE is viewed on a phone there is no navigation at all. Then there are all the other obvious criticisms, but again, and don't shoot the messenger, it subjectively looks very good: A big win for large statement design decisions. No VLE Support Contact Details.
This is the most fully developed VLE dashboard which makes it a real shame that it isn't at all responsive. It almost perfectly emulates the discontinued Windows Phone Operating System start menu even using the same colour palette. It looses a great deal by seeding space to a right column of calendar and event listing modules, and the widths of each button is arbitrary, as is the colour selection. Obvious criticisms abound with a no link logo, font size getting as small as possible before becoming illegible, no support contact details this side of logging in, the unresponsive template and inconsistent design, but again, the dashboard makes up for a full inbox of unfinished tasks. No VLE Support Contact Details.
Wow. From the dull 'Maker' template comes the best looking VLE. This is most surprising since the 980px width corporate website is uniquely based on Wix rather than industry standard propitiatory or opensource website CMS. The palette is fantastic, the layout and design are almost perfect, and the only issue is the absence of project completion. One small project would make this the very best VLE by every criteria and not simply the best looking. The logo integrates the VLE title perfectly, taking full advantage of the similarity of the Moodle logo font and the corporate font. And the design choices are subtle, the red section presents a linear gradient from #e51a2f to #e60065 that attains the highest level design. There are lots of obvious criticisms of an incomplete project; an empty offcanvas menu, missing contact details, missing search function, missing HTML or Font Awesome '▸More info here' caret/arrowheads, external links opening in the same tab, and the absence of illustrative portrait images. ▶ But, then the use of the excellent Lightning Bolt icon for Student Action is inspired, and great design almost completely negates all criticism. No VLE Support Contact Details.
Of the nine buttons on this VLE dashboard design, eight of them include handsome student portraits, with seven featuring student groups. ▶ Integrating architectural features into the header is very nice and the prominent presence of blue in almost all images is again a nice touch. All obvious criticisms are limited to completing and optimising a simple but effectively designed VLE. The simple header menu is in need of a refresh as it retains a menu item linking to Google. The header image titled 'IMG_4494-1357x452.jpg' is too small for FHD, and an image captured on a cloudy day, featuring the reflection of the photographer. It is a weird default layout but why repeat the text Woking College and if it is repeated then why not remove the text from the logo? It is a shame the dashboard display is not entirely above the fold, even if it does obscure the header image, but the FAQ does feature the best answer for all questions: Q. Why is my course average so low? A. Don't panic! VLE Support: This email address is being protected from spambots. You need JavaScript enabled to view it.
Create a grid of modules linking the main VLE content, ensuring all of them are visible above the fold. (See Suffolk One Sixth Form College)
Include enrichment and retention messaging and live social media feeds as an above the fold module, maybe in a side column. (See Cardiff & Vale College & Woking College)
Have a set of header buttons and a header menu. (See Sunderland College)
Feature the E-Learning Team and VLE Support/IT Help Desk contact details in the header and even a biography and blog. (See Croydon College)
Create a version of the main corporate logo that integrates the VLE, be it Moodle, Blackboard etc. (See Croydon College & Worthing College)
Create an Events Module that lists events rather than present a monthly calendar. (See not City of Liverpool College)
Use all of the corporate logos as buttons linking to the various tools and portals, ensuring that all image files are PNG, have a mouse over effect, and - this is basic SEO - not named logo1.png (See not City of Liverpool College)
Create call to action modules and contact forms inviting students to access both support in initiating their own enrichment activities and the full student support services offer. (See Confetti Institute)
Add a montage video flourish, preferably featuring only students, but cute animation is also very effective. (See Sunderland College)
Ensure all font sizes are at least 16px.
Schedule regular student photo shoots, comply with GDPR, collate all participants' names, and title all images positively and not students1.jpg. Groups are best for desktops and smartphones. (See Woking College)
Add images of students to all dashboard buttons, maybe producing three times as many as needed and refreshing them each semester or year.
(For Completely Different Reasons) The Best 18 FE/6F/AE College Virtual Learning Environments
