Mozilla Gamified Me Into Upgrading My Website
I’m a fan of games — board games, video games, emotional games (Why must you toy with my emotions, Rodrigo?!) — ok maybe not that last one. I’m also a fan of security. Announced late last year/early this year and starting later this summer, Chrome will no longer mark webites as “secure” with the green lock in the address bar.
Secure websites, those that use HTTPS and its underlying Transport Security Layer (TLS), will become the new normal and sites still using HTTP will get a “Not Secured” badge of shame. In order to step up my game, I used a tool a fellow dev showed me a couple months back — Mozilla’s Observatory.
Enter a website into Observatory and it will analyze the headers of the site and transfer protocols and give the site a letter grade.
When I first entered my website, I got an F. Mozilla cleverly uses several of Yu-kai Chou’s Octalysis core drives to motivate the user to improve their website.
Development and accomplishment
Mozilla’s team doesn’t just make you feel bad about your site getting a poor score, they give you the tools to improve it one step at a time (also great feedback, but more on that later). They have a helpful library of resources to not only learn more about implementing security measures, but also to educate yourself about why those measures are important.
Ownership and possession
In the same way an owner of a house wants to keep their crib looking good and customized, an owner of a website wants to keep things looking nice. By implementing the grade system, it’s a shorthand way of telling the website maintainer that things aren’t ready for guests.
Relatedness and social influence
In much the same way the giant F triggers ownership and possession, it also triggers relatedness and social influence. As a developer and one with an interest in security, it was embarrassing that my site scored so low. Immediately, I wanted to fix it. Mozilla also has stats so you can see where your site falls compared to other sites in terms of its grade and how many levels you might have improved it. You can even opt to include your results in the public results if you want to show off to the general public.
Scarcity and impatience
Another clever trick straight out of the Octalysis playbook is the torture break. You can only scan your site once every five minutes. This worked out because by the time I figured out exactly how to implement what I wanted to do and did it, it had been about five minutes.
Loss and avoidance
The obvious high level loss in this situation is to lose visitors, trust, and personally identifiable information (PII) if your site isn’t secure, which is clearly the most important part. Mozilla slightly quantifies this and makes it more real though by assigning points to each section of the test it runs. Not passing can result in a loss of points and, therefore, a lower letter grade.
Empowerment of creativity and feedback
This is quite possibly the best part of this tool. One big way video games hook us is by giving us constant and instantaneous feedback. Observatory does a great job of this and the team who created the tool does a great job of taking it a step further from just feedback to providing the resources to actually improve your site and learn more. Within the test score section, there are links to examples of how to implement something like a Content Security Policy and an information icon that tells why a Content Security Policy is important.
They also have sections on security fundamentals and guidelines. Security is one of the most important topics for users from the beginner to the expert and it’s also, in my experience, one of the most scary and least approachable. The Observatory team did a great job creating a tool that uses core drives to motivate the user and provide meaningful feedback so that learning and improving is within reach. It only took a couple hours to go from F to A+.
If you maintain your own website, I highly recommend testing it against Observatory. If you do, I’d love to hear about your success and how you’re making your part of the web more secure!
- Screenshot your starting grade and your final grade.
- Tweet/tag @trustahoodlum or @weberswords on Twitter.
Here are a couple more links I used while working on this project:
