Great WPF Applications #6: fnac.com

If you want to see a contrasting online shopping experience to Otto, you could do worse than look at fnac.com. FNAC are in many ways the French equivalent of Best Buy, selling all things electronic: cameras, MP3 players, televisions, PCs. To coincide with the Windows Vista launch, they've produced a WPF-based next-generation shopping experience.

This application is nicely done. Rather than go with an XBAP, they've opted to use the ClickOnce capabilities of the .NET Framework to deliver a client experience that runs outside of the browser but is still a seamless, zero-footprint install that doesn't require administrator rights.

In many ways, this is an interesting contrast to Otto. Otto really uses the 3D capabilities of the platform to make the experience feel as close as possible to a real-world clothes shopping experience, with virtual models that act as digital mannequins for their clothes. fnac.com on the other hand have recognized the different way that consumers shop for electronic equipment, which is far less about what items "go" together, and much more about a feature-by-feature comparison that enables you to narrow down from an implausibly large selection of choices to a shortlist. If you're buying a laptop as a consumer, you're probably only going to buy one at a time: the optimization here is to ensure that you really feel as if you've been able to make the right decision based on the combination of features you're looking for at a price point.

The second screenshot (left) really demonstrates this well - by presenting the various choices using a metaphor of a fanned hand of playing cards, it's a dense information visualization that highlights the key information and allows you to use the buttons at the top to refine or narrow down the search. At the bottom of the screen, you'll see the total number of products in a little thumbnail-esque view that gives you a sense of how many of the items are being viewed at the current time. As you narrow down your selection (e.g. by searching only for PCs with Windows Vista pre-installed), the others fade out and a very neat animation brings the filtered view to the forefront. By clicking on any one item, you zoom into a different view that gives you a lot more feature information on the product, highlights applicable accessories and service plans, and ultimately allows you to compare two products side-by-side.

I really like this application: it's subtle and well thought through. There's nothing gratuitous about the way it uses animation or styles: everything is done to enhance the user experience, and that's of course the way it should be. With power comes responsibility, and all that...

You can run the application from the fnac.com site (the usual caveats apply about having .NET Framework 3.0 installed). One important warning - there's a minor glitch in the current release that prevents it executing successfully on machines that aren't set to the French locale. If you're affected, you'll see a message box with no text, just an OK button, which exits the application. To fix this on Windows Vista, go to the Control Panel and choose Regional and Language Options -> Change the date, time or number format; set the listbox here to French, and you'll be all set. (Don't forget to change it back again afterwards.) Fortunately, the use of ClickOnce means that it'll be a simple fix for the FNAC team to silently deploy.

Are you having fun yet? Six great WPF applications so far, with plenty of others in the pipeline...