Here’s the main problem: You need to do user testing on your app, but you’re a long way off from having a Beta ready. The answer is Pre-Alpha Testing.

How it works

We’re building a learning game engine and we needed to do user testing and make sure it actually worked well and helped people learn. We couldn’t wait to design and build a Beta, only to discover there were fundamental problems with the way the game engine worked.

We solved the problem with what I call a ‘Pre-Alpha User Test’. Here’s how we did it …

1. Created a User Flow Diagram

Allison created a basic UFD that explained how the gaming engine would work. She used LovelyCharts but I’m a big fan of Google’s super-awesome online drawing tool (which has live-collaboration and powerful flow charting capabilities – all for free).

2. Built basic views

Once we agreed on the UFD, Allison marked up very basic HTML and CSS views of each page. These views are basically un-styled pages that our Developer, Alan, can then start hooking up.

3. Created a rough working mockup

Once Allison committed the HTML/CSS views to GitHub, Alan then used JavaScript and HTML5 localStorage to create a working mockup of the app.

There were no user accounts or server-side databases. It’s all just client-side code to give the appearance of a working app.

Alan then deployed the app to Heroku.

4. Styled the views

Once the app was working, Allison went back in and added more styling and spent more time on UX to make the app more usable and life-like.

5. Ordered tests on UserTesting.com

We ordered 3-5 tests on UserTesting.com, specifying the type of user we were looking for ($29 per test). We also asked some of our loyal Think Vitamin Members to help us out as well, by conducting the tests with ClearLeft‘s SilverBack app.

6. Reviewed the tests and iterated

Once the user testing videos had been completed, we each watched them and made notes. We then had a Skype meeting where we discusses usability problems with the demo, and what actions we’d take to fix them.

We’d then update the app and visuals over one to two days, and then order another set of user tests, and then repeat again.

Overall, we did three rounds of user testing, in just two weeks. It was amazingly valuable and I’m SO glad we did it.

We’re going to throw away all the code and start over, but we now know that the fundamental functionality of our app is usable and successful. Bam! :)

We can create a similar effect on a web page by fixing semi-transparent background images to different sides of the browser viewport, and at different horizontal percentage positions. In addition to this, blurring some of those images will emulate focus and depth-of-field. The effect can only be seen as the browser window is resized, but I really like the subtlety of this — not everybody will notice it, but it’s like a hidden Easter egg for those who do.

I used this effect with great success on the holding page for Clearleft’s latest project, Silverback.

Upfront about IE6

Frankly, this just ain’t gonna happen in IE6. Although we could use javascript to force the browser to display transparent PNGs, its not suitable for this effect. We could use alpha-transparent GIFs instead, but the lack of anti-aliasing will end up looking terrible. My recommendation is to think about your target audience and the browsers they will likely be using, show this effect to those with Safari, Firefox, Opera, or IE7 and use conditional comments to override it in IE6. In my example below, IE6 users just see a flat background image and are none the wiser.

Choosing a suitable scene

It’s a web page that we’re creating, so as always we should be mindful of file sizes. Because it uses large transparent PNGs this effect isn’t frugal on the bandwidth, and although we’re not going to achieve this in under 100k, we should obviously try to avoid making the total image filesize 500k or more! To avoid large file sizes, we should restrict the height of each layer, or choose a scene which works well with horizontally tiled layers. It’s always a compromise because too much tiling becomes obvious and reduces the impact of the effect.

As you can see from Silverback, hanging vines lend themselves nicely to being split into multiple layers because they are positioned in the foreground, middle distance, and background. You might choose a plane flying through some clouds, or a city-scape with houses and skyscrapers. To use a clich�, the only limit is your imagination … and the fact that you should only use 3 or 4 layers. Any more and the overall file size would be too much of a strain on those with delicate Intertubes.

Your page content will become one layer within the scene, and since even the transparent areas of images can’t be clicked “through”, its best to make your content the foreground element unless your page contains no links or forms. We can fake elements nearer to the “camera” if they don’t overlap the content. I’ll come to that later.

Creating your layers

Looking at the Silverback site, there are three layers of vines (1, 2, 3) plus the main content layer at the front (4). Although all of the vines are technically “behind” the main content layer, the foreground vines look closer to the camera because they’re larger, very blurred, and don’t stretch far enough down the screen to ever dip behind Steve (the gorilla) and shatter that illusion.

The main content of the site will naturally be the focal point of the camera, and in the Silverback example the middle distance layer of vines – which appears to be slightly behind the main content – is left without a blur to give the impression that they’re roughly the same distance from the camera as Steve.

Lastly, the back layer of vines are blurred (though not as much as those in the foreground) and slightly lighter, as if fading away into the misty distance. These vines are flattened onto the green gradient which forms the background of the page – since we don’t need to see anything further into the distance, we can use an opaque JPG instead of a transparent PNG. This saves on file size, and as a result allows us to use an image with larger dimensions for the background if we like.

Creating the parallax

There really is nothing new about the CSS we use to create this effect – it’s just cleverly applied. I will give code examples not because it’s difficult but precisely to show how simple it is.

We wrap the content in a “div” which is centered on the screen using this CSS:


div#content{
margin:0 auto;
width:640px;
}


For the purposes of positioning the other layers we need to think in percentages, so it makes sense to do the same thing here. Centering the content effectively positions it 50% of the way across the screen. As you make the browser window smaller, it moves horizontally at half the speed of the window-edge that you’re pulling around with your mouse.

The background layer of vines is tiled horizontally across the body of the website, and positioned 20% of the way across the screen. Although this doesn’t change how it initially looks, it does change how it behaves – 20% of the width is relative to the screen size, so as you make the window smaller the 20% gets proportionally smaller, giving the illusion that the vines are moving slowly to the left (at a fifth of the speed of your mouse).


body {
background:#d3ff99 url(../images/bg-rear.jpg) 20% 0 repeat-x;
}


The middle distance layer of vines is a tiled transparent PNG background on a “div” wrapped around the content. It needs to appear to be between the content and the background, so we need to choose a percentage between 50% (the content) and 20% (the background). For this example, I’ve chosen 40% to position them closer to the content than the background. When you resize the browser you’ll notice that they move slower than the main content, but not by much.


div#midground{
background: transparent url(../images/bg-mid.png) 40% 0 repeat-x;
margin: 0;
padding: 0;
width: 100%;
}


The enlarged and blurred foreground layer of vines follows the same pattern, but for added fun we position the background beyond the top right of the browser window, at 150% (100% would be fixed to the top right), to make it move faster than the browser resize! This gives the illusion that they’re really close to the camera.


div#foreground{
background: transparent url(../images/bg-front.png) 150% 0 repeat-x;
margin: 0;
padding: 0;
width: 100%;
}


Nothing fancy for IE6

Finally, we use conditional comments to make sure IE6 only sees a flat image with no faux-3D effect. Remember to override the foreground style even if you’re overriding it with nothing, by specifying “background:none”.


body{
background:#d3ff99 url(../images/gradient.gif) 0 0 repeat-x;
}
#midground{
background:transparent url(../images/flatvines.jpg) top center repeat-x;
}
#foreground{
background:none;
}


And that’s it! Feel free to use the source code of the Silverback holding page as an aid to understanding my method. There are a couple of variations to this effect, which I’ll mention now.

Genuine foreground

We can move the empty foreground “div” to the start of the HTML and add the following lines to the “div#foreground” CSS to position it actually in front of the content. Doing this will allow its background image to dip over the content but will also mean that the content can’t be clicked. Only use this if your content contains no links or form elements.


position:absolute;
top:0;
left:0;
z-index:1;


Genuine foreground demo (for the purposes of this demo the content is nearer to the top of the page so that it dips behind the shorter foreground vines).

The Rissington Effect

With hat tipped gratefully in the direction of The Rissington Podcast, I should mention the joys of playing around with negative percentages. Notice that the Spitfire at the bottom of their website cleverly moves off the screen to the left as you widen the browser window. It’s positioned at -5%, and the wider the browser the larger 5% of it is, so the further it moves to the left. In our example, if you set the background layers to have negative percentages you can make the landscape appear to rotate around the content as you resize the browser. The more extreme the percentages, the faster the rotational effect.

My happy ending

With all my designs I like to try to include something remarkable, pushing the boundaries of what can be achieved using just HTML and CSS. This technique, combined with others, opens the door to all sorts of possibilities. I can imagine things hiding behind solid foregrounds and only sliding into view as the browser size exceeds a certain dimensions, or elements fading into view as the browser is resized. Show me what you can do!