Yoan Blanc’s weblog

Another lost swiss guy

February 2009

Alive wireframes with Polypage

Yoan BlancSat 28 February 2009, , ,

I recently started to play with Polypage (24 ways: Easier Page States for Wireframes) and quickly wanted to get more from it. I removed the toolbox and put the switches into the content itself, look at the demo.

First, if the states toolbar is useful, when I gave a wireframe made with that to a colleague, she started using that as a real page telling me: “My password doesn’t work. What do I have to do?”. Okay, let’s enable state switching from links and forms.

<a href="#logged"
   class="pp_not_logged">log in</a>,
<a href="#not_logged"
   class="pp_logged">log out</a>.

At the beginning all states are off. The state logged is off, so log in is displayed because of .pp_not_logged and log out is hidden because of .pp_logged. Clicking on #logged will toggle this state to on hiding .pp_not_logged and displaying .pp_logged.

Generally a log in process goes through a form:

<form method="GET" action="#logged">
  <input type="submit" value="Log in">
</form>

same than before, submitting that form will toggle the logged state.

I was happy with that until I needed more, a different version of the page: like a web one and a mobile one where, more or less, only the width of the body changes. Every active state is reflected in the body of the page.

body {
 width: 960px;
}
body.state_mobile {
 width:320px;
 font-size:90%;
}

With something like the log in/log out HTML, you can toggle this state but I want to show an alternative way of doing this.

<label>
 <input
  type="checkbox"
  onchange="$.polypage.setState('mobile', this.checked)">
 mobile
</label>

The drawback is that you’ll have to make sure the initial state of your checkbox is correct based on the value stored in the cookie.

And with all that, you can hide the polypage options toolbar.

$('body').polypage([],
                   {closed: true});

The main issue I see with HTML wireframes is that you don’t have the magical cursor that exists with paper prototyping. Using paper you can adapt very smoothly and quickly to any action made by the person that is testing your application.

Happy wireframing! You need (for the moment) a modified version of polypage to do what I presented here:

Réaliser des wireframes entre gentillement dans la manière de travailler du monde web. Je parle de ces ébauches d’applications, d’interfaces qui permettent d’obtenir rapidement, à moindre coûts des retours de la part d’utilisateurs potentiels, d’un client, d’un collègue; permettant parfois d’exprimer plus clairement ces idées qui nous trottent dans la tête.

Certains aiment le papier, d’autres, possédant une machine Apple, vont se servir d’Omnigraffle, et Inkscape va pouvoir satisfaire d’autres. Et pour aller dans la manière de penser intéressante qu’est “Getting Real”, pourquoi ne pas directement faire de l’HTML? C’est le support final après tout.

Un seul point important, quel que soit le support : ne pas trop en faire. Il faut réussir à exprimer les idées, concepts sans que l’apparence ne vienne interférer avec ce que vous voulez réellement présenter.

C'est là qu’entre en scène Polypage, un petit outil reposant sur jQuery permettant de créer des pages à n états. Donc, depuis une même page pouvoir visualiser les états visiteur et personne authentifiée. La version de base n’offre que des intéractions via une boîte à outils affichée en haut de la page, j’ai étendu cet outil pour permettre par exemple de changer d’état depuis le contenu directement via un lien ou un formulaire.

Soyez sûr d’avoir jeter un œil à la petite démonstration des fontionnalités possibles avec la modifiée (disponible sur github).

Plus de détails croustillants et techniques dans la partie anglophone.

About

meYoan Blanc is a web developer that lives in Norway (Markveien 24, 0554 Oslo) works for Opera and comes from La Chaux-de-Fonds. This web site is for this weblog, a playground for random stuffs and can help keeping me connected with some friends out there.

Get my vCard or contact me by phone (skype:yoan.blanc) or email ().

Misc

RSS, list.blogug.ch

This site reflects only my opinion and is not affiliated with anyone else.

copyright 2006-2009 — doSimple.ch