When designing wireframes for web sites and web apps, it is often overlooked that the same ‘page’ can look wildly different depending on its context. A logged-in page will look different from a logged-out page; an administrator’s view may have different buttons than a regular user’s view; a power user’s profile will be more extensive than a new user’s.
These different page states need designing at some point, especially if the wireframes are to form a useful communication medium between designer and developer. Documenting the different permutations can be a time consuming exercise involving either multiple pages in one’s preferred box-and-arrow software, or a fully fledged drawing containing all the possible combinations annotated accordingly.
Enter interactive wireframes and Polypage
Interactive wireframes built in HTML are a great design and communication tool. They provide a clickable prototype, running in the browser as would the final site. As such they give a great feel for how the site will be to use. Once you add in the possibilities of JavaScript and a library such as jQuery, they become even more flexible and powerful.
Polypage is a jQuery plugin which makes it really easy to design multiple page states in HTML wireframes. There’s no JavaScript knowledge required (other than cutting and pasting in a few lines). The page views are created by simply writing all the alternatives into your HTML page and adding special class names to apply state and conditional view logic to the various options.
When the page is loaded Polypage automatically detects the page states defined by the class names and creates a control bar enabling the user to toggle page states with the click of a mouse or the clack of a keyboard.
Using cookies by way of the jQuery cookie plugin, Polypage retains the view state throughout your prototype. This means you could navigate through your wireframes as if you were logged out; as if you were logged in as an administrator; with notes on or off; or with any other view or state you might require. The possibilities are entirely up to you.
How does it work?
Firstly you need to link to jQuery, the jQuery cookie plugin and to Polypage. Something like this:
<script src="javascripts/jquery-1.2.6.min.js" type="text/javascript"></script><script src="javascripts/cookie.jquery.js" type="text/javascript"></script><script src="javascripts/polypage.jquery.js" type="text/javascript"></script>- Source: /code/easier-page-states-for-wireframes/1.txt
Then you need to initialise Polypage on page load using something along these lines:
<script type="text/javascript">$(document).ready(function() {$.polypage.init();});</script>- Source: /code/easier-page-states-for-wireframes/2.txt
Next you need to define the areas of your wireframe which are particular to a given state or view. Do this by applying classes beginning with pp_. Polypage will ignore all other classes in the document.
The pp_ prefix should be followed by a state name. This can be any text string you like, bearing in mind it will appear in the control bar. Typical page states might include ‘logged_in’, ‘administrator’ or ‘group_owner’. A complete class name would therefore look something like pp_logged_in.
Examples
If a user is logged in, you might want to specify an option for him or her to sign out. Using Polypage, this could be put in the wireframe as follows:
<a href="logout" class="pp_logged_in"> Sign out </a>
Polypage will identify the pp_logged_in class on the link and hide it (as the ‘Sign out’ link should only be shown when the page is in the ‘logged in’ view). Polypage will then automatically write a ‘logged in’ toggle to the control bar, enabling you to show or hide the ‘Sign out’ link by toggling the ‘logged in’ view. The same will apply to all content marked with a pp_logged_in class.
States can also be negated by adding a not keyword to the class name. For example you might want to provide a log in link for users who are not signed in. Using Polypage, you would insert the not keyword after the pp prefix as follows:
<a href="login" class="pp_not_logged_in"> Login </a>
Again Polypage identifies the pp prefix but this time sees that the ‘Login’ link should not be shown when the ‘logged in’ state is selected.
States can also be joined together to add some basic logic to pages. The syntax follows natural language and uses the or and and keywords in addition to the afore-mentioned not. Some examples would be pp_logged_in_and_admin, pp_admin_or_group_owner and pp_logged_in_and_not_admin.
Finally, you can set default states for a page by passing an array to the polypage.init() function like this:
$.polypage.init(['logged_in', 'admin']);
You can see a fully fledged example in this fictional social network group page. The example page defaults to a logged in state. You can see the logged out state by toggling ‘logged in’ off in the Polypage control bar. There are also views specified for a group member, a group admin, a new group and notes.
Where can I get hold of it?
You can download the current version from GitHub.
Polypage was originally developed by Clearleft and New Bamboo, with particular contributions from Andy Kent and Natalie Downe. It has been used in numerous real projects, but it is still an early release so there is bound to be room for improvement. We’re pleased to say that Polypage is now an open source project so any feedback, particularly by way of actual improvements, is extremely welcome.
Comments
11/12/2008
I’m a senior in high school, and having to do a large project for the community, I can see this as coming in very handy. I can’t wait to start using this!
Thank you!
11/12/2008
We recently started using this technique and will never go back. Easy to show multiple page states in complex wireframes, as well as leave notes written specifically for the developers who will be working on implementing the intended functionality. Highly recommended and a great article.
11/12/2008
I think this is a great solution. I’ve done prototyping like this before and it can get confusing when you have 3 or 4 different versions of a single page to manage the different states. It’s a lot easier to combine it into a single page. Another thing I’ve done is used a server-side framework to handle some of the conditional logic that you’re using JavaScript for but I can certainly see how prototyping like this is easier.
11/12/2008
Good to know about polypage. It definitely makes wireframing easier.
11/12/2008
Now that seems like one great plugin. I will surely test it out the next time I have to create some sort of demo design.
Is there any easy way that we could link the switching of states with on page elements? To use your example, make the login/logout link also toggle the mentioned state, and not only trough the bar at the top.
11/12/2008
Good idea to use cookies and jQuery.
I already wants this for so long, but what gives, so little time to do. This will make my future wireframing projects easier. Thanks for sharing Richard.
11/12/2008
Interesting,
thanks for the article and for open sourcing Polypage!
11/12/2008
Thanks for the kind words so far folks. Glad to hear that Polypage could come in useful for you too.
Martijn van der Ven wrote:
Yes. By attaching an event handler to a logout link you can call the Polypage function to change the state. Something like this:
11/12/2008
I love this. Wireframing ‘libraries’ or techniques often seem to take more time to implement than just making 5 slightly different HTML files. But this seems like a no-brainer, making clever use of CSS classes and javascript. Well done!
11/12/2008
Thanks for introducing us to your tool! It looks useful and I can imagine wireframing not one but many sites with Polypage. Oh and I love jQuery :D
11/12/2008
This is bloody brilliant! ‘Nuff said.
11/12/2008
@ Richard Rutter :
Thank you, I am not really practised in using jQuery but now I’ll figure out the rest of Polypage.
PS: I hope that the blockquote will show up outside the preview, otherwise this comment is going to look weird.
11/12/2008
That’s fantastic stuff Richard – thanks for enlightening me!
12/12/2008
this is by far the smartest approach for prototyping different states of one page I’ve seen so far. And I’ve seen a lot. You guys made my day – thanks so much!
12/12/2008
Wow! This looks great. I’ll likely not use it myself as I’m more a php backend dev kinda guy, but this’ll be great for our designers. They’ll be able to get all the page states drawn up in the frontend code before we get to work with tying it altoghether with the backend.
Brilliant, thanks for pointing me in this direction :-)
Steve Daniels
12/12/2008
Very nice and useful! Thank you for sharing the plugin!
13/12/2008
Thanks for all the great PolyPage feedback everyone, and for such a great write-up Richard.
There’s only one extra thing that I think is worth noting and that is how easy PolyPage can make things when you hand a project over to a development team. For a dev to be able to read through wireframe source code and see plain english conditionals is very helpful, a lot of the time these translate directly into conditional code inside view templates.
20/12/2008
For the third year running, I’ve been pleased to see 24 Ways show up again in my feedreader when December rolls around, and this article in particular made it worth the wait. Polypage looks like a really helpful tool, and one that would’ve been pretty perfectly suited for the project I delivered earlier today. At least there’s always a next time… Thanks Richard, Drew, et. al.
21/12/2008
I’ll have to take a look at Polypage. Been resisting doing wireframes in html/css and exporting to interactive html from visio, but perhaps it’s time to switch over.
22/12/2008
This looks like a great tool. I’ve been using the wireframing tool Oversite (review) for a while which enables you to create clickable wireframes that you can export to HTML.
However, the output is not as good as coding it in HTML from the outset. This would make it much easier to reduce the amount of mistakes that come from misinterpretation of how my wireframes should be presented and should function.
Impress us