Share via

MIX Sessions Posted -- More on the My Yahoo Prototype

  • Article

If you haven't heard, all of the MIX sessions are now posted.  Definitely check out Darren David's talk on building the The North Face prototype -- lots of good info there. 

With these sessions live, it also gives me a chance to talk about one of the MIX demos I was involved with that I haven't talked much about, which was the My Yahoo prototype. 

You can now watch a longer demo of the prototype during Michael Wallent's session  in which Arik Cohen spends quite a bit of time walking through the features of the demo.  Michael's talk also features some other cool demos like Microsoft Max and iBloks. 

There a quite a few interesting things to call out in the My Yahoo prototype, especially with regard to the possibilities for portal sites and WPF.  First, everything was live and bound to public Yahoo web services.  Second, the entire thing runs quite happily as an .xbap.  But the thing I want to spend some time on is the design and how the design goals were achieved using tricks with WPF. 

The most important design goal for the project was to keep everything above the fold.  In other words, all the information presented in the browser would never require any scrolling.  The reason for this design goal was to address one of the issues with html pages, which is that lots of great content can be buried beneath the fold and may never be discovered by the user.  This is a big issue for portal sites, which can inundate the user with information. If you watch the demo, you'll notice that all kinds of visual tricks are employed to ensure that no content goes below the fold. Here's how we did it:

1. ZIndex.  Clever use of the ZIndex is used rampantly throughout the prototype.  And, without a ZIndex property (which arrives with beta2 -- hooray!) there was lots of trickery to constantly swap out the ZIndex when a given module was in focus for the user.  But that simple UI technique of bringing a module "forward", along with as visually de-emphasizing the other modules by changing their color, was quite effective.

2. 2.5D. The application uses 2.5D quite a bit, especially during the animation of adding a new module to the portal.  To the user, it appears as if the module is sliding out and getting larger.   But no 3D is used here.  This is simple a combined skew, scale and translation transform.  It was a great way to inform the user what happened when a module was added, instead of the module suddenly being added but disappearing beneath the fold.

3. Hiding UI using drawers.  A very simple but powerful way to keep content above the fold is to hide it and show it using the drawer metaphor.  We are all familiar with keeping things in drawers: a tried and true method in the real world for keeping stuff out of site.  Same principal here, but this time content hides behind other content and then animates out like a drawer. 

4. Use of the VisualBrush.  My favorite magical WPF tool, the VisualBrush, was used to preview other pages of content.  In this way, you can easily see what is on other pages before switching to them.

This also gives me a chance to out the developer who worked on the demo, Eric Burke, who has a blog. Hopefully he'll post more because he has a wealth of WPF experience.

Comments