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...

Comments

• Anonymous
  February 02, 2007
  Could you provide a direct link to the application ? I can't figure out where to access it from the site (my french is very bad).

• Anonymous
  February 03, 2007
  From the last link on the page, click on the button "Lancer l'installation". From there, I think it's fairly straightforward. When the application first loads, you'll want to click on the green button at the bottom right hand corner of the screen to synchronize the latest product data.

• Anonymous
  February 04, 2007
  Arrest me if I'm wrong, but these applications are 90% bling, and 10% usefulness...   "Neat", but not smart...

• Anonymous
  February 05, 2007
  The comment has been removed

• Anonymous
  February 05, 2007
  Winter has finally set in with single digit temps and minus degrees wind chills but still no snow. WPF/Avalon

• Anonymous
  February 06, 2007
  I can't find the "Lancer l'installation" ! both with FireFox search and my eyes :) I was planning to use it in my XAML presentation that I've made yesterday at work (We're one of the biggest ERP Software Companies in Turkey) to our whole Software Department. I must admit that they are all pretty impressed with both XAML and WPF. I hope that Delphi.Net would also be supported in the near future as a code behind language. And thank you Tim Sneath for your Interview with Tom Relyea at Channel 9; I used your Q&A part and Tom Relyea's technical background parts :) For the last part I must add that there's still a bit documentation problem in XAML. I got lot's of "the x tag doesn't exist in XAML namespace" errors while trying the examples from books, screencasts and even some from msdn Library.

• Anonymous
  March 12, 2007
  I couldn't find the "Lancer l'installation" link in Firefox either, but it showed up in IE. From there I was able to get the installation to start, but a proxy authentication problem caused it to fail.