Page Slide: Other Examples and Variations

After posting about the Page Slide pattern, I realized there were a few other good examples from the book as well as an another example from Laszlo’s Demo Calendar App that Theresa pointed me to.

Dialog Inlay Variation

Both the BBC and My Yahoo! use a variation of the Page Slide to bring in customization controls for their home pages. In our book we call this out as a Dialog Inlay. In contrast to providing an Overlay (popup) content can be slid into the context of the page. Note in both of these examples the sliding is vertical from the top of the page (although note the banner stays in place).

dwi_0601b (by Designing Web Interfaces)

The BBC Home Page uses a PageSlide to let you configure content settings

dwi_0603 (by Designing Web Interfaces)

My Yahoo! also uses a PageSlide to let you add content or change appearance

Slide by Squashing

Laszlo provides an interesting variation to the Page Slide. Instead of sliding the calendar off page to accomodate the new area, it resizes the calendar so that there is room for the additional controls. This deals with the earlier problem we raised of losing context. With a calendar we need to see the whole month, but it is most likely acceptable to resize the calendar to accomodate.

slidein_laszlo_normal (by Designing Web Interfaces) slidein_laszlo_expand (by Designing Web Interfaces)

Laszlo resizes the calendar area in real-time as it slides in the controls from the right

Comments off