Badges Info Page

This week, I continued mapping out what the specific skills look like. (i.e. I’m giving everything a name and figuring out how we can best convey their description to the user.) As I went along, I realized that while some of the skills Caitlin and I discussed during the summer were very specific (do together), others were less so (camera action). The majority of the skills reflect the name of a specific action in the IDE. Therefore, instead of leaving the user wondering why they couldn’t find the button that says “camera action,” I broke down the broader skills in a subset of specific actions. (e.g. camera moveTo).

Although I’m not done mapping out all the skills, I still wanted to draw up a mock-up of the badges info page as Jordana and I are currently envisioning it. This would be just for the common case (the skill can be remixed) rather than for the skills that would require supplementary videos.

These are some of the design problems/questions that I have:

• How do you convey to the user that a skill name doesn’t directly correspond to the IDE? (e.g.  “animate multiple characters”).
• How do you show that a user has completed a level?
• How do you display the other badges the user can earn?
• How do you display the resources that will help the user earn the badge? (Badge Challenges, Helpful Worlds, etc.)

I drew two versions of the page with slight differences. In both versions, the levels are displayed in stacked rectangles and the level the user is currently on is expanded. More information about the skills will be displayed in lightboxes when the user clicks on the skill. (I will sketch those out soon!)

Version A

Once you have earned a level, the descriptive sentence changes and you get a badge icon on the left hand side. The skills that don’t correspond to the IDE are in colored ovals. The resource worlds are displayed in a line that you can flip through. This design is seen on the Challenges and Worlds pages. Suggested badges are on the right hand side.

Version B

Once you earn a level, the skills that you used turn color and get tiny badges affixed to them. Skills that don’t correspond to the IDE are displayed on a wavy ribbon. The resource worlds are shown in a stack that fan out on mouseover.  (This is like the animation on Google+ photos). If you click on them, they will spread out so you can see all of them. Badge News would be on the right hand side. Underneath the levels, you could see all the badges laid out in the suggestion tree. (Not pictured).

Although I think the animation in Version B would be super cool and grab the kids attention, the animation in Version A is something we have already done and would be in keeping with the rest of the site. I like the idea of having Badges News so you can see what other users are earning badges. I also really like the laid out tree version for suggesting badges rather than a sidebar because I think it is a really useful visual to see which badges flow into which.

The curvy display of the non-corresponding skill is more elegant, but I’m not sure if it is different enough from the other skills for the user to notice. Alternatively, I could just keep them the same shape, but just change the color.