I wrote my own HTML and CSS for dougbelshaw.com back when I was at Mozilla. It was originally a template to be used with Thimble, and a few people ‘forked’ it to use it for their own site.
So, on the train on the way back from Dundee today, I thought I’d do something about it. I knew that I wanted something pretty simple and minimalist, yet with just enough to ‘delight’ visitors. It needed to serve static files, not rely on a database back end (as with WordPress).
I also wanted to link to something I’ve been tinkering around with that allows me to surface my most recent writing. I’d already put that together at dougbelshaw.com/feeds in response to people complaining that they miss my stuff because I post it in different places around the web.
Last April when I became a consultant, I threw together a website at dynamicskillset.com using GitHub Pages and bootstrap. I even created a video to show others how to do so. However, I wasn’t happy with it, so a couple of months ago replaced it with this holding page featuring an image from Bryan Mathers:
Today, while the rest of my family is away visiting relatives during half-term, I got a chance to mess about for long enough to create this:
I’m really pleased with it. The DNS is still propagating away from GitHub back to Reclaim Hosting, but you should be able to access the live version here in the meantime. Once that is done, you’ll be able to access via dynamicskillset.com as usual!
* This is an Open Source project and can be found on GitHub here.
What I like about the Badge Studio approach is that it:
is easy to use
has a visual hierarchy baked-in
makes it very difficult not to follow a style guide
removes the bottleneck of visual badge design
As with everything, the simpler and more intuitive something looks, the more work has gone into it in the first place. Here’s some variables we identified for badges across the group of companies of which my client is part:
Meta status (i.e. whether it’s part of, or is a meta-level badge of badges)
I’m sure there are others to consider, too. From there we looked at the most obvious differentiators, deciding upon shape and colour. Happily, there’s already a defined colour palette in place for each organisation that’s part of the group. They’ve also just launched a new group identity that includes five different shapes! Perfect.
We agreed in the preliminary meeting that we’d try and reduce the amount of text on the badge itself. This was for two reasons: (i) users should only ever be a click away from the metadata contained in the badge, and (ii) text is likely to be difficult to read if the badge is displayed at a small pixel size.
Theoretically, every badge issued could be both a ‘meta-level’ badge made up of smaller badges and itself part of a larger ‘even-more-meta-level’ badge. It’s potentially turtles all the way down. To prevent this potential/perceived complexity, I’ve proposed we limit the number of layers to three. This chimes well with Carla’s work mentioned above. In practice, this leads to very simple and straightforward badge pathways – which, if you want, get way more complex.
Creating an ecosystem of value is an extremely difficult thing to do. Essentially, you have to have to create enough productive ambiguity for it to be flexible and adapt to different contexts, while simultaneously giving people enough structure to get started. The way I’m proposing we approach that in this example is to:
Nail down badge colour (organisation) and badge shape (type)
Place a limit on the number of badges that can count towards a meta-level badge (perhaps six, using Trivial Pursuit as a metaphor?)
“Cool. I’ve been looking at badges for a while and was wondering how to implement them in my context.”
“I’m really glad you asked because I’m just about to write a blog post on that exact subject.”
I’ve had the above conversation with many people over the last few months. They tend to go beyond this, obviously, but I do need a post to point people towards.
So this is it. 🙂
The first thing to say is that there is no objectively-awesome way to issue badges. What works for one group of people in one context won’t necessarily work in another context. Having said that, there are some general principles which should stand you in good stead.
Second, you’ll find that it’s fairly natural for people to project their worldview into what is, after all, an open and emergent ecosystem. I’ve had people tell me that badges “will inevitably lead to X,” that “you can’t do Y with badges,” and that “Mozilla need to make sure that Z”. The great thing about the Open Badges Infrastructure (OBI) is that it’s a platform for third parties – including you – to innovate and think differently about their organisation is set up to do.
Third, there’s some criteria that are required for Open Badges and some that are optional.
The REQUIRED metadata fields are:
The OPTIONAL metadata fields are:
What follows isn’t the only way to approach badge design – my colleague Carla, for example, sometimes starts with the graphical element – but it’s an approach which has worked well for me over a series of conversations and workshops.
Here it is in the abstract, followed by a worked example:
Decide on some behaviours, skills or attitudes you want to promote.
Think of some criteria for a badge which would begin to promote those behaviours, skills or attitudes.
Consider if the criteria for the badge you’ve come up with can be broken down in more granular ways.
If (as is likely) you end up with multiple badges, think about multiple (potentially interest-based) pathways through your badge ecosystem. Ask yourself, which badges depend upon other badges? What are the relationships between these badges? (this may help structure that)
This, of course, looks fairly easy but will take a decent amount of time from start to finish if done in a considered and collaborative way. Just to illustrate the point, my colleague Laura Hilliger and I are running a two-part, 5.5-hour workshop in Porto this week where we probably won’t manage to get the participants through all five steps in the time we have available.
Now, an example.
I’m always slightly wary about using examples as they tend to be held up as THE way to do things rather than A way to do it. With that in mind, let’s take as our example Alina who wants to start a new online community for teaching Webmaking skills. How could she use badges to promote the behaviours, skills and attitudes that she wants the community to embody?
Alina wants to encourage community members to level up in their web skills. She’s seen that Mozilla have started to provide Webmaker badges for that, so she decides to use those for the skills element. She decides to focus her efforts on badges to encourage mentorship and community etiquette.
New to the concept of badges, Alina thinks that one mentorship badge will be enough. The criteria she comes up with is that once a member has got enough ‘thank you’ upvotes using the forum software then they will automatically be awarded a ‘Mentorship’ badge.
A couple of days later, Alina talks through her idea for a single Mentorship badge with a member of the community whom she meets at a conference. They raise concerns that such a system would promote people ‘begging’ for upvotes and/or lead to reciprocal backslapping. Alina goes back to the drawing board and begins to come up with a system of badges.
Reflecting on her own experience as a member of various online communities, Alina realises that there are different forms of mentorship and ways of recognising it. She proposes several different granular badges which aggregate to a larger mentorship badge in different areas of Webmaking. Alina then invites some community members who already show the behaviours, skills and attitudes she is looking for to an virtual workshop. As a result, she tweaks the number of badges and the criteria for each badge. Some badges they decide should be emergent, all should be peer-assessed, and some should expire. They decide that the inclusion of an evidence URL showing how the member earned the badge would be useful.
Alina announces the badge system to the wider community via a blog post and asks for feedback. She mentions that they haven’t yet come up with the visuals for the badges. A community member with an interest in graphical design volunteers to design the badges. Before long, the first iteration of the badge system is up-and-running using WPBadger, WordPress and BuddyPress.
I hope that helps. Badge ecosystem design is an iterative, emergent process. My main advice would be to make it an open, inclusive process involving the participants formerly known as stakeholders. 🙂
Back in August I posted about how working from home with my new job for the Mozilla Foundation means I needed a dedicated office. It’s just too distracting working in the main house when we’ve got two young children! I’m calling it a ‘shoffice’ as it’s a shed as far as planning regulations go (no-one’s sleeping in there) but an office as far as I’m concerned. 🙂
Since August local architect Mark Starford has been drawing up draft plans from the detailed measurements he took on that sunny day. I’m delighted Mark’s agreed to allow me to share the drawings here (and on Flickr) under a Creative Commons BY-NC-SA license. I’ve also introduced him to the delights of Pinterest via my Architecture & Design board. It’s useful to have a ‘mood board’ as it allows others to see the kinds of things you like by referencing extant things!
Below are the options Hannah, my wife, and I like so far. Mark gave us three options for the path and way down to the office. I’ve included the ‘dogleg’ version. We’re not so keen on the protruding skylight but are definitely in favour of getting as much north-facing light in as possible. Mark informed us that artists tend to favour this kind of light as it’s more constant and avoids the ‘hard light’ that distracts me when I work.
We definitely like the freestanding canopy-style protruding roof to shelter the stairs and we’re also thinking about potentially including an additional way to get down to the decking area. Hannah doesn’t want the decking to be my ‘outside office space’ and I can see her point. We’re also still thinking about the placement and shape of the windows to the west side (we don’t want any on the south side).
You can click on any of the images to enlarge them or the set is here:
If you’re struggling to understand how this works, it might help to know that our garden would be pretty much on a 45-degree slope if it wasn’t for a concrete ‘bunker’ under the patio. Also, the fence to the rear of our property drops down dramatically to a much lower garden level for our neighbours.
The images below may help:
And, finally, we’re absolutely going to invite our neighbours (to the side and the back) to look at the final drawings. We’re trying to make it so they hardly notice it’s there!
(Email and RSS subscribers will need to click through to see the change)
I’ve felt for a while that I should make this blog better suited to mobile interfaces and, in particular, touchscreen devices. This is known as responsive web design and I’ve been particularly impressed with Microsoft’s ‘Metro’ design language leading to a tiled approach on Windows smartphones. To my eyes it seems streets ahead of Apple’s skeuomorphism.
Yesterday, when I was browsing architecture blogs and came across the Contemporist site, it reminded me of that clean, touchscreen-friendly approach:
I did something I always do when I see blog themes I like: right-clicked to ‘View Source’ as you can tell which blog theme is being used. Judging by the CSS it’s a custom job, meaning I couldn’t simply download the same theme.
That was a shame, but it spurred me on to look for Metro-inspired blog themes. I was looking for something with a tiled, fairly squarish look but that didn’t scream Microsoft. Beautiful though it is, the Subway WordPress theme (from €39) was out of the question. I’d have looked like a Microsoft fanboi:
I also found the MetroStyle theme ($45), which I rejected for having too many boxes at the top:
I downloaded and installed the WP Metro theme (£FREE), but I had trouble making it look decent with my content:
In the end, after considering signing up to a course to get the Anaximander theme, I decided to pay $35 for a WordPress theme entitled Metro:
Like many premium themes it comes with an extremely easy-to-use configuration dashboard in addition to the usual WordPress options. Nevertheless, old habits die hard and I delved into the CSS to tinker about a bit!
I hope you like what you see, and if you want to see the ‘responsiveness’ in action, either resize your browser window or visit this site on a mobile device. It’s only my first attempt – I’ll be tinkering around making improvements here and there over the next few weeks.
One of my favourite games for the PlayStation 3 is Burnout Paradise. Apart from the racing and being able to take down cars in spectacular ways, one of the reasons I love it is because it’s a non-linear game.
What do I mean by that?
I mean that after a (very) lightweight introduction, the whole map is open to the player. You’re guided through the mechanics of the game as you play it, and you can choose what you want to do next. If you just want to drive around, that’s fine. In fact, there’s ‘challenges’ to complete (smashing through billboards, etc.) if that’s all you want to do. By driving around you actually discover some of the ‘formal’ challenges like races as well as the auto repair shops.
Every now and again, either through winning races or completing stunt challenges you’ll unlock a new car. But you still have to go and find it and take it down. And there’s also the ‘stealth’ achievements you unlock unexpectedly. It’s a compelling, very rewarding game in its own right, never mind being able to play live online against other human opponents!
Recently, within the Mozilla Learning team we’ve been discussing the non-linearity of badge systems and how interest-based learning can be scaffolded and assessed. Obviously the assessment is ultimately going to lead to Open Badges, but a few of us feel that we can’t merely replicate the existing structures found in formal education. There’s not much point in using badges if the learning design still talks about a ‘101’ class or uses a Beginner/Intermediate/Advanced approach.
The question has come up, as it always does, about pre-requisites. There’s no getting away that some learning is built upon prior knowledge, the argument goes. That’s certainly true, but there’s ways of motivating the learner to want to undertake that prior learning. That way is by appealing to their interests.
As with anything new, the easiest way to get at what we can do is through metaphor. In this case, I think that a video game serve as a very useful model for what we want to do. Start with the player (in this case the learner) and scaffold experiences around them.
Ever since 2007 when I started writing it, I’ve shared what I’ve written towards my Ed.D. thesis over at http://dougbelshaw.com/thesis. Today, given that I was a bit too ill to write for sustained periods of time (during the annual leave I took off specifically to do so) I decided to update and tidy it up a bit. It now reflects:
Please note that this will be last of these posts for this year. I’ll be back in 2011 [why?]
Offline this week I learned that there’s literally two types of people in the world (Dweck was correct!), that ‘female festive frenzy’ is now a term in general use, and that brandy hot chocolate is almost always better without the chocolate… :-p
Dropbox is now available for Teams. Looks like a good deal for small businesses, although I think they’ve missed a trick by not also targetting education. This would be awesome for educational institutions!
[T]here is a class of random walks called Lévy flights, which include occasional long-distance jumps. The distribution of step sizes is described by a power law, which means that there are steps of all sizes and no well-defined “average” step size, at least for one class of Lévy flights. They have been observed in various natural settings, most famously in the search strategy of certain animals when food is scarce. For example, hungry sharks will typically scour back and forth over small areas, but if the search is fruitless, they will intermittently “jump” to new, far-off areas . “People have also [studied] Lévy flights in stock prices, epidemics, and small world networks,” says Ajay Gopinathan, from the University of California, Merced.
Check out the Top 10 Weird New Animals according to National Geographic. These have all been discovered in 2010. The Sneezing Snub-nosed Monkey looks interesting. Shame the only known example was shot and eaten…
In a time of universal deceit, telling the truth becomes a revolutionary act. (George Orwell)
In the depth of winter, I finally learned that within me there lay an invincible summer. (Albert Camus)
The people who matter will recognise who you are. (Alan Cohen)
Creativity is inventing, experimenting, growing, taking risks, breaking rules, making mistakes, and having fun. (Mary Lou Cook)
The test of a first-rate intelligence is the ability to hold two opposed ideas in the mind at the same time, and still retain the ability to function. One should, for example, be able to see that things are hopeless and yet be determined to make them otherwise. (F. Scott Fitzgerald)
Offline this week I learned to fly direct and take only carry-on luggage where possible, that the UK is ridiculously underprepared for snow compared to other European countries, and that thrash metal isn’t as bad as you’d think… :-p