Learning to prototype in code, Part 1

Considering my options


This post was originally seen on my old Posterous site.

One of my UX resolutions for 2012 was to learn how to prototype effectively in code. So lets get started, it's almost February already! Chop chop!

Pondering my options in Q&A format: 

What does it mean to prototype in code? 
To me it means making test interfaces out of HTML, with as much real-world interactivity built-in as possible, to make a prototype good enough to test with users. 

No wait, why prototype at all?
Lots of reasons - read this for some. http://www.scottberkun.com/essays/12-the-art-of-ui-prototyping/ 

Why "interactive" prototype?
A plain vanilla HTML prototype will give you some interactivity out the box - simple stuff, like navigation. Adding a bit of javascript will let you go further, and do things like build forms that validate.

But for an experience closer to that of using a real site or app, you want to simulate the server backend - database,  persistent shopping carts and whathaveyou. You want your prototype pages to be able to emulate multiple states, like "What if the user is logged out on this page?" and so on. 

How do you make an HTML prototype interactive?
By using javascript and cookies (and maybe LocalStorage). jQuery certainly, then storing variables / states using something lightweight like polypage (if there isn't a jQuery equivalent yet). 

In the future, it might be possible to use fancy HTML5-related technologies like Local Storage to emulate all the server-side storage and interactivity a real site or app would have. 

Can't you just use a prototyping tool instead?
Plenty of pros and cons to using tools vs code for prototyping.  For me, both are valid depending on the project. For me, code prototyping has many benefits when thinking about responsive design in particular - that's what sparked this particular effort. 

What will it look like?
I could code my own HTML for presentation, but that seems insane with all the excellent HTML/CSS frameworks lying around just begging to be used.

But which one?  There are approximately 1.3 billion HTML/CSS frameworks to choose from - and that's just the free & open source ones. 

A couple of lists to ponder. DesignYourWay has 27; here's a quora debate on the issue. 

Plus Twitter Bootstrap, Zurb's Foundation, and an intriguing option: Wikipedia's own mobile-first emerging framework, Athena

My evaluation criteria for picking a framework:

  • must have a friendly licences (MIT, Apache, GPL, CC)
  • must support flexible and  responsive approaches - no fixed 960 sizes
  • must have easy-peasy grids set up
  • should have reasonable but not perfect browser support. I don't really care if a prototype doesn't work in IE, but it should work well on all modern browsers. And I don't want to do any browser-support tweaking
  • must have good clean proper HTML. So that if the prototype gets reused as the starting point for the production site, there isn't too much refactoring
  • must be reasonably pretty out of the box

This last one is contentious. I can see some times it would be better to have a barely-styled prototype to avoid prejudicing the visual design phase. The Twitter and Foundation kits are too durned attractive for that. 

Enough chit-chat, lets get on with it. 
Since I'm coding only for pleasure, I'm going with Foundation for my first attempt, despite it being pretty. I'm going to plug in polypage, and try to make a basic mobile app prototype. 

NEXT EPISODE: we see if that worked out then.

 

Further reading:

Prototyping in code .NET article by Alex Morris I'll be referring to for tips 

24 Ways Article by Richard Rutter on managing page states with PolyPage

jStorage - a Local Storage kit for jQuery that might meet my info-saving needs

 

 

blog comments powered by Disqus