Pretty/ugly” is teen slang that refers to something or someone that doesn’t meet conventional standards of beauty, but holds undeniable visual appeal. Many top models (Kate Moss, Chantelle Winnie) and movie stars (Adam Driver, Tilda Swinton) are admired as “pretty/ugly.”
But for me, the prettiest ugly of them all is W3Schools.
A place to learn all the rules …
W3Schools defines itself as “a school for web developers” that is “optimized for learning and training” at all levels. W3Schools has been around since 1998, which makes it an online learning resource older than much of the content on its platform.
W3School’s mission statement emphasizes core instructional design principles, too: engagement: “interactive learning experiences;” accessibility: “available for everyone, everywhere!”; and affordability: “a completely free developers resource.”
It’s hard to think of an e-learning project on a topic more specialized than coding, requiring SMEs more expert than developers, for a learning public more diverse than, well, “everyone, everywhere!”
For the instructor in “instructional designer,” there’s a lot to love about W3Schools.
… while breaking them …
But from a designer’s standpoint, not so much.
The color scheme is uncool: white, grey, slate, and a curiously minty shade of dinosaur green. Now, green is an awesome web color (see DesignShack‘s top picks) and, according to color theorists, associated with innovation and prosperity. But W3Schools’ palette is retro-tech; it reads more DOS than dosh.
When it comes to imagery, W3Schools doesn’t have any. No video lectures from SMEs. No filtered photos of happy e-learners. No illustrative vector graphics. Just a few Font Awesome icons: Home, Search. Even the HTML Images tutorial only uses three stock photos.
Instead, there’s an abundance of brief, redundant text. Every lesson is: “read this, run that.” Moreover, W3Schools communicates entirely in Verdana, a web-safe, sans-serif font that’s only slightly more exciting than Arial.
Menus are everywhere: on headers, sidebars, and footers, distinguished only by their content. There are well over the maximum of 8 items recommended by user-experience experts, as well as – gasp! – copious submenus.
In a web-design sense, W3Schools seems to be a good example of what not to do.
… beautifully.
But there is something that W3Schools does better than almost any other e-learning site in its field: teaching people to code.
There are lots of free, online places for the computer-curious, like me, to learn how to code. I watched other people code on video tutorials. I studied other people’s code on digital libraries. And I read other people’s advice about coding on public forums.
But W3Schools is the place to practice coding, right away: you select what you want to code, read a code snippet, and run it. Presto! You can code.
And this is what makes W3Schools’ what-not-do-so format exemplary.
First, there’s nothing to look at but code. You don’t have to sit through a video lecture, or read around decorative images, or decipher cutesy fonts.
Second, there’s nothing to do but run the code. There’s no engaging welcome, no comment forum, no interaction at all besides manipulating the snippet (and even that’s optional.)
Third, you can’t do it wrong. All those menus make it possible to navigate the entire site, the world language tree of programming, in any order. The quiz tasks are few, clear, and consistent. There are no “back” buttons or breadcrumbs needed.
As a result, the site is entirely learner-centered, and the user experience is empowering.
Implications for Instructional Designers
As online learning and training become more popular, instructional designers have a lot to learn from W3Schools. Some important questions to ask include:
- Are LMS features necessary to store and access content, or are they selling points?
- Are design elements, like color, font, and visuals, necessary to communicate content, or are they decorative?
- Are interactive components, like forums, sliders, or surveys necessary to learn content, or are they entertaining?
- Are content-based tasks simply, clearly, and consistently structured, or are they needlessly varied?
- Are assessments drawn directly from the content-based tasks, or do they incorporate content or tasks drawn from elsewhere in the course?