Badges Index Page: the beginning

This week, I decided to start re-doing the badges index page. The purpose of this page is to give the users an introduction to badges, incentivise them to earn badges, and point them in the direction we think they should go next.

For the first problem, I just included a small “About Badges” section on the right-hand corner. It doesn’t go into great detail since I don’t think the users will want to spend a lot of time reading. Here is what is says:

Badges help you create awesome stories!
   

1. Click on a badge to learn what skills are required
2. Remix a world to earn a remix ribbon
3. Create your own world to get a star
4. Complete all four levels to earn the full badge

I’m not wedded to the wording, or for that matter the blurb format. I would welcome any suggestions people have to improve the user’s introduction to badges.

I added a “Badge News” section on the page as well to keep inline with the other pages on the website. It can also serve to motivate the users to earn badges since they see that their peers have earned some and they may also want to have their name appear in that section.

As I have shown in previous sketches, I think a tree-like structure is a visually interesting and useful tool to show the users what order they should pursue the badges in. However, implementation of this is a little bit tricky. I came upon a pretty cool html tool called canvas. (It even works on IE!) Pretty much, you can use javascript to draw lines or other elements to specific points on the canvas. At first, that sounded like the perfect solution to my problem. However, I soon learned that you can’t add divs to the canvas... which is a bummer since the badges exist as a collection of divs. A solution to this is to have the canvas and the divs exist in the same wrapper. But, I was having great issue with getting the coordinates of the badges divs relative to the canvas (see below).  

Earlier, I have come upon a nice css tutorial on family trees just using divs. It seemed pretty easy, so I went ahead and implemented it.  For the most part, it works fine. However, the alignment of badges (darn those divs!) is a bit wonky. Also, it doesn’t leave room for multiple parents, or suggested links between two badges - both of which I will want to do when we have more than just seven.

Moving forward, I think I will try to take another look at canvas and see if I can’t get it to work since it is the more flexible of the two solutions.