Friday, February 3, 2012

Instructional Overlay for Webmaking 101 tool prototypes

In preparation for the Open News design sprint next week I did a few mock ups playing around with an Instructional overlay. The idea is that this is a slider that could be toggled over the js.bin interface that we use in the lovebomb.me, webpage maker and soon- open news prototypes. It will give the user helpful tips and pointers on how to write html and css.

As you look at these designs, keep in mind that the grey bar can be moved up and down (or side to side) with your mouse.

This first iteration is a horizontal overlay. My concern here is that if a user has a small screen it might be cluttered. Additionally, I am not sure if this is the most logical design for a user who will probably have to go back and forth editing the html and reading the instructions.  The numbers 1- 5 are a progress bar. I am not convinced that this is the best placement or if this is appropriate. I think that once we think through how badges might be integrated into this prototype, the progress bar will be reconsidered. (Note: all language and branding graphics are place holders)


Below is the second iteration- I am trying out a vertical overlay.  I think that this feels a little bit more logical and intuitive in terms of design. I also changed up the progress bar a bit and the slider toggle.

vertical instructional overlay

I was having a bit of a prototyping party testing out some different ideas for progress bars below. Also- playing around with potential palette options. Such a small detail can really structure the entire learning experience- as well as infuse a little piece of personality into the design.

We will be having the design sprint next week in Brooklyn. I am excited to really dig into the project and to think a bit further about the question- "what do journalists want to use the web to make- and how can we help them do that?"  We will be exploring if these designs are useful for the project. I'm not really concerned if they aren't because we can actually use them on the lovebomb.me experiment. 
 


2 comments:

Mark Surman said...

I like the way you are thinking re: instructional overlay. It's the right design goal / question to be asking.

But I also think you're right to worry about small screens -- and in general about too much screen real estate for instruction vs. making.

Don't have any better ideas myself. Maybe a quick UX peer assist on the Tuesday call?

Jess said...

Thanks Mark, I think a peer assist would be useful- I also suspect that the concept and design might change after the Open News design sprint this week.

In the meantime I came up with a third concept this morning:
http://www.flickr.com/photos/jessicaklein/6829884373/in/photostream