Ajax Wireframing Approaches

By Kevin Hale
2007-11-23


Stacking

If handling multiple files doesn’t appeal to you, you might want to try stacking. The principle is simple, just duplicate the markup variations and stack them on top of each other like so:

    <form id="login" action="">
        <!-- Without Errors-->
        <div>
            Username : <input id="user" type="text" /> <br />
            Password : <input id="pass" type="password" /> <br />
            <input type="submit" value="Submit" /> 
        </div>

        <!-- With Errors-->
        <div>
            <span class="error">Password doesn't match.</span>
            Username : <input id="user" type="text" /> <br />
            Password : <input id="pass" type="password" /> <br />
            <input type="submit" value="Submit" />
        </div>

        <!-- Forgot Password-->
        <div>
            <p>Provide your email and we'll send you a new password.</p>
            Email Address : <input id="email" type="text" /> <br />
            <input type="submit" value="Send New Password" />
        </div>
    </form>

This approach is great because it’s easy to understand and convenient to have all the markup variations on one page. When we turn this into a prototype, we’ll just hide and show the appropriate stack at the right times with CSS and JavaScript. When you hand this version off to your developer, the markup for these stacks, however, will probably move into an XSL template, the JavaScript, or a page called upon by Ajax. The problem with this kind of wireframe is that it probably can’t be left like this. If you do not turn this into a a prototype where JavaScript helps control the display, they’re not really useful on elements that are absolutely positioned or contain a specific height.

Tutorial Pages:
» Introduction
» Keyframing
» Stacking
» Turn On Possibilities (TOP)
» Using Useful Class Names
» CSS Boolean

Related Tutorials: » Getting Started with AJAX in jQuery » GWT Basics: AJAX Programming with Java » AJAX Accessibility for Websites » AJAX and PHP Form Processing » The obligatory 'My Ajax Tutorial' Post » A Designer's Guide to Prototyping Ajax