Tuesday, January 22, 2013

Make - First Interaction Design

 On the Webmaker community call and on his blog this week, Brett Gaylor presented that we are currently aiming to solve several key design questions for Webmaker. You can read about the challenges and solutions here.

In an effort to move Webmaker into a space where from the moment you come to the site - you are encouraged to make something (what Brett is calling "make - first" interaction design) , I am going to show some prototypes that I have been working on. 

You can see all of them here in larger, more legible form.

Even though the fidelity of my prototypes might seem more polished then usual, as always please note that these are mockups and prototypes designed for the purpose of iteration, so please give me feedback and ideas for things that I should consider when moving forward with the design. 

landingpage-wire-annotated

First, lets take a look at the Landing page. The idea here is that from the moment that you land on Webmaker.org you are given the call to action to tinker and interact with content in a very real way. What you are looking at is actually a meta "Animated webpage" project that is comprised of several types of projects - so in essence the content type becomes a gallery. The page is instantly hackable and as the user, starts tinkering with an x-ray goggle like interaction- they can choose to deep dive and reveal the more advanced editing tools. While this is a mockup for the landing page - you could imagine that it is also a prototype for how a user might be able to pull and view content from the gallery - so the user gets the opportunity to digest a project first as consumable content and then engage with it as a hackable medium. This kind of interaction was deeply inspired by my reading of the work of Mimi Ito - particularly in her book Hanging Out, Messing Around and Geeking Out. Here is what it might look like with some timely content.

The next mockup is a first iteration of what a gallery could look like for us. A user does not have to be logged in to view the gallery, but if they are they will have a more personalized lens as well as the chance to engage with the content creators. 


In this mockup (which admittedly is the most nascent) you see a view of what a user might see if they are clicking on a particular users name - it's a filter of the content that the user made public. This could include their projects, badges or assets. Ideally this page will have some level of hackability - a la MySpace - so maybe the CSS of the page could eventually be modified by the individual users - since in essence this becomes a bit of a portfolio page. To be clear, I'm not saying it should look or feel like MySpace - but there was a certain level or ownership and creativity around that kind of personalization.

Finally, I'd like to share with you the prototype that I hacked up with Atul yesterday. It's a prototype, so you know don't tweet far and wide - but you can check it out to start to see what it would be like to have hackable content on a landing page and remember to click "D" for deep dive to bring that content directly into Thimble. 

7 comments:

Anonymous said...

Admiring the time and energy you put into your blog and in
depth information you present. It's great to come across a blog every once in a while that isn't the same outdated rehashed material.
Wonderful read! I've bookmarked your site and I'm adding your RSS feeds to my Google account.
Also see my site :: same day loans

Anonymous said...

aurawavе is onе оf mаny ΤENS units
useable оn the grocerу stoге, but region of what
ab initіo set it aѕide from the gаlvanizing pulseѕ lіκеwisе ԁеscribе linеage to the ρеel through electгoԁеѕ.


Visit my web ѕіte: Daniel

Anonymous said...

Appreciate this post. Let me try it out.

My blog post; landing page design

Anonymous said...

Pretty nice post. I simply stumbled upon your weblog and wanted to say
that I've really loved browsing your blog posts. In any case I will be subscribing in your rss feed and I hope you write once more soon!

Look into my blog landing page design

Anonymous said...

I'm not sure why but this blog is loading very slow for me. Is anyone else having this issue or is it a problem on my end? I'll check back
later and see if the problem still exists.

My site - luxury outside furniture

Anonymous said...

Aρpreciating the peгѕiѕtence yοu ρut into
yοur blοg and in dеpth infοrmation you pгesent.
It's good to come across a blog every once in a while that isn't the ѕame unwanted
rehаsheԁ informatіon. Great геad!
I've bookmarked your site and I'm adԁing
your RSS feeԁѕ tо my Googlе acсοunt.


my wеbsite; san diego mobile marketing

Anonymous said...

“Red-handed be blowed,” said the constable [url=http://www.atlapa.it/scarpe-hogan-outlet/]http://www.atlapa.it/scarpe-hogan-outlet/[/url] And the progress of the fire was frightfully rapid, for even in the short time that it took me to walk the length of the street there was an evident change He called again on the 18th, and then said that he was going on to Cork, and possibly from there to Belfast [url=http://exogroove.it/category/scarpe-hogan-outlet.html]Scarpe Hogan outlet sito ufficiale[/url] Something had to be done to fill up the hours of idleness and make me seem to be worth my pay “I am afraid I didn’t [url=http://www.mkids.it/hogan/hogan-outlet-milano.html]mkids[/url] It seemed an anomalous arrangement, but there was really nothing against it ”

[url=http://www.wimobile.it/scarpe-hogan-outlet.html]scarpe hogan outlet sito ufficiale[/url] You accept the identity?” Haire, have indulged in the dangerous practice of smoking in bed [url=http://www.katzenfotograf.ch/images/hollisterschweiz.html]http://www.katzenfotograf.ch/images/hollisterschweiz.html[/url] “No,” I agreed; “Thorndyke will be with you in that But I can tell you that the inspector won’t take the charge When he had gone, Mr It was not specially suitable, and an ordinary clock-maker would almost certainly have used a strip of brass “Ho, you haven’t, hey?” said he[url=http://www.futurzig.it/scarpe/hogan-outlet-sito-ufficiale.html]scarpe hogan outlet sito ufficiale italia[/url] For my little store of money dwindled steadily [url=http://www.scuolamediapiancianimanzoni.it/scarpe-hogan-outlet.html]scarpe hogan outlet sito ufficiale[/url] Did you take any special precautions against fire?” [url=http://www.spash.co.uk/]Hollister Outlet Sale[/url] “Yes,” said Thorndyke, “that will do ” [url=http://www.wimobile.it/tag/scarpehoganoutlet.html]http:/www.wimobile.it/tag/scarpehoganoutlet.html[/url] Mr “That’s no use,” said he [url=http://www.katzenfotograf.ch/abercrombieandfitch/abercrombieandfitch.html]http://www.katzenfotograf.ch/abercrombieandfitch/abercrombieandfitch.html[/url] “Nonsense [url=http://www.videosizeme.it/scarpe-hogan-outlet.html]http://www.videosizeme.it/scarpe-hogan-outlet.html[/url] ” There was a twenty — four hour wheel — we will call it the day-wheel — which took off from the hour-wheel, and this carried a snail which turned with it