Monday, January 30, 2012

Am I bombing on this prototype?

A few weeks back, I wrote about the "love bomb" experiment that Atul and I were working on. In many ways, I think that this project has more potential for impact than anything else that I have created while I have been working for Mozilla. It is the learning experience that we aspire to create- where someone is so completely motivated by their desire to make something, that they are compelled to learn or teach themselves something new along the way. Because of this desire to create an authentic hands-on learning project as well as the clear accessibility of the project, my colleagues at Mozilla asked Atul and myself to think about re-skinning the project as a potential campaign around Valentines Day.

In general, I like this idea. I like the thought of someone getting so excited about the thought of hand coding a valentine for their loved one.  I immediately drafted a few concepts:

1. A DIY love letter



d.i.y love letter 
version 1

version 2

2. A Love Generator- kind of the closest to an e- card maker



3. Magnetic Attraction- based on the concept of magnetic refrigerator poetry.


Immediately we had a positive response, particularly towards the "Magnetic Attraction" prototype. I showed this to several people in the Mozilla community and did some at - home field testing (re: my mother understood the project). I played a bit with the actual format for the interaction. The concern here was that the current X-Ray Goggles tool and/ or the Web Page Maker prototypes might be too high level for say, the audience who receives the Firefox newsletter. So I went to work trying to focus on how to communicate that something has "html" or "css" underneath it's hood. 


 step 1: select a template

step 2: select an asset on the template and drag and drop the magnets to remix the html.
As you can see from the mockup, I really limited where you can click with your mouse.

 step 3: voila. share through social network buttons
Looks good, right? Sure we would need to iterate on this, but this is a workable prototype.

Not so much- the problem that I am having with this, is that although it is accessible, and people who have some innate fear of html will be able to really just dive in- ultimately, they aren't tinkering or experimenting with a markup language. At the end of the day, a user is really just editing fields, as if this was a form. I suppose that if someone hovers over a
tag, then an explanation could pop up linking to some database like the MDN which could explain what that little strange object on a page means. But, I think that our goal at Mozilla is not to hide code, or to break it down to a level that is so obscure that you aren't even given the opportunity to experiment. That said, I'm not really sure where the starting point is at the moment.


My colleague Michelle Levesque, is working on figuring out appropriate "Web Literacy Skills" for Mozilla to support and develop around. The very first category of skills that she writes about is "Exploring". I think that this really hits the nail on the head in terms of why this prototype might not be worth pursuing- we are limiting exploration by curating what elements can be edited and how a user should try to edit them.

Of course, I am flip flopping on this topic and keep thinking about how we need certain parameters so that a learner can feel like they have learned something, even if it is a very small skill in the big picture that is webmaking.


3 comments:

David Flanagan said...

Jess,

The prototype isn't up somewhere so we can try it out, is it?

Remember the "reveal codes" mode in Word Perfect? What about something like that below the valentine, so the raw HTML that is being generated is always visible. Users can ignore it, but as they drag the magnets around at least they see that something is changing "under the hood".

(I've wondered sometimes about whether it would be possible to use transparency and somehow line up rendered html with the raw markup underneath, creating a 21st century palimpsest... But that would just be confusing for a valentine.)

Oliv said...

Hi David,

in the first line..... to the previous post...and you'll find the address : lovebomb.me

sschipper said...

Jess,

I am wondering about using a set of navigational aids on something like the lovebomb.me if the raw html and css is too daunting on it's own for some audiences. I am thinking of the aids I have seen on sites like http://www.scoop.it where the user is presented with friendly modal dialogs directing them on what to do first? (Example of model I particularly like.) They could be cookied or toggled off for users who no longer need them.