Bubble Foundry

Destroying the UI

by Peter.

First HEMA’s Rube Goldberg-esque site won rave reviews and now Nintendo is getting lots of press for a YouTube page advertising Wario Land that gets progressively destroyed, with UI elements flying off every which way and getting smashed.

Why do these sites work? First of all, they’re fun. In the Wario Land case, it also reinforces the whole idea of the game, which is to smash the environment. Beyond that, they all play with the constraints of standard grid-based websites. Both begin looking like standard pages of their respective sites (HEMA and YouTube). User’s expectations of a static site with elements fixed on the page like normal are broken as things get more and more perturbed, as what looked liked fixed HTML turns out to be animated Flash elements which fly all over the screen.

From this common basis there is some divergence. The Wario Land page takes great care to preserve the illusion of a normal page: though a YouTube channel, standard channel features are pushed down below the user’s initial screen and in their place is a Flash-based replication of the YouTube video page UI that has the video, comments, and everything else a casual YouTube user would expect. Even more impressive, the UI elements have clickable links and remain usable throughout the destruction on the UI arrangement.

In contrast, more of the total HEMA page is taken up by the Flash animation, and the page does not have working UI elements. While standard navigation bars exist, attempting to click on any of the options reveals they are simply text, not hyperlinks. This perhaps suggests a fear that users would click away, either in alarm or inattention, before the full animation has run. The Wario Land page does not seem to have this worry. However, the HEMA site is not afraid to direct the user’s attention, automatically scrolling the browser to ensure the window viewbox always shows the current action. Thanks to complete control of the page, the HEMA UI destruction is more coherent and more complete, though the Wario Ware page might have had to restrict the destruction to a section of the page due to the limited amount of UI the ad’s creators could change. This would explain why the standard YouTube page elements exist lower on the page and why the page doesn’t scroll with the falling UI elements. I can imagine advertisers are now demanding from Google more complete UI control of pages to avoid this cludge in the future.

Since the HEMA ad was made a year before the Wario Land one, it’s safe to assume that the latter was built with full knowledge of the HEMA ad and sought to improve upon the concept. I would say they have and would love to see more such ad campaigns. Of course, these ads only work because they’re fun and novel, and I would the first to find them incredible annoying if they become common place, just like page takeovers have become. Everything in moderation and don’t annoy your users!