Controlling clicks

According to web usability king Steve Krug, the first law of interface design should be 'don't make me think.' He's written a best-selling book about it, preaching that good web design should be simple, structured and obvious. And he makes a strong case. He believes that the majority of internet users crave a "reassuring sense of familiarity" when they visit a website. They like to know where the main menu is, what their options are and where they can click next. "Users like conventions," says Krug, "even if designers find them constraining."

Then again, some websites push the boundaries. On www.egofoto.net, photographer Senol Zorlu showcases his portfolio work on a stunning, scrollable photo-wall built in Flash, while Japanese clothing company Uniqlocq goes to town with a bold, fast-cutting combination of infographics and video footage. Web design in 2009 is characterised by dramatic visuals - think Flash animation and bold artwork; oversized typography, 3D effects and full-screen video. But designers are also keen to develop fresh and innovative user interfaces (UIs) to engage and interact with website visitors. By sidestepping conventional page furniture, sites like these can stop you dead in your tracks. The guiding principle isn't so much 'don't make me think' as 'go on, surprise me.'

The Sour Sally website rails against Krug's notion of a "reassuring sense of familiarity". Designed by Kinetic Singapore, this interactive frozen yoghurt ad abandons traditional page elements and hierarchical structures in favour of what is basically a 2D platform game. You control Sour Sally using the mouse or keyboard, either flying her around the Monty Python-esque environment with a balloon, or bouncing her to the various content areas using spring-loaded cupcakes. (A conventional menu is hidden away at the edge of the screen for panicked web traditionalists.)

"Good UI has to be intuitive, functional and effortless," says Sean Lam, creative director at Kinetic Singapore. "However, the type of UI chosen has to work for that specific project. We're proud of the fact that the Sour Sally website was able to successfully project the personality of the brand to the audience. We're also very happy that the 'old-school platform game' type of navigation worked, as this added a level of tactility missing from most conventional websites."

Apart from the Flash and Photoshop work, Kinetic drew all the illustrations and the typography by hand. "We did this deliberately," explains Lam, "so it feels like a handmade product that's warm and inviting. But as this was a very bitmap-intensive site, the more we progressed into the development, the heavier the file sizes became. With more and more movie-clip objects placed on the stage, the playback speed suffered on older computers. So naturally, optimisation was our biggest hurdle. We had many ideas in terms of animation and interactivity, but had to limit ourselves so we didn't get too carried away with it all."

Not only are there technical concerns to consider, but one of the biggest problems in designing an unconventional user interface is that some web visitors just won't understand it - at least not at first. And if you only have a limited time to make an impact (typically a few seconds), can designers really afford to deviate from the obvious, and risk losing visitors?

"Many people don't like options or doing any sort of thinking or work to get to content," says Alex Feyerke, the front-end programmer at German interactive agency SiteSeeing. One of his most striking builds has been a portfolio website for model Eva Padberg, which offers a fresh approach to an old idea. "We wanted to make it a somewhat haptic experience," he says of the project. "Not just clicking through hierarchies of menus, but actually having a stack of cards (analogous to the 'Sed Cards' that models really have) that you can flip through with physical controls - the mouse wheel and the arrow keys, for instance."

The concept and design of the site took about three weeks. "I had wanted to code something with an emphasis on rotation for quite a while," recalls Feyerke. "The Sed Cards lent themselves to the idea anyway, and of course there was also Thibaud Imbert's highly influential site, which hovered around in the back of everyone's heads too. All of those influences came together in this project. The card stacks went through a number of iterations before we arrived at a state we thought was usable and flexible enough, both in terms of potential screen resolutions and the content we wanted to display.

"Ultimately, we think we've managed to combine a modern, feminine colour scheme with an intuitive navigation and nice, fluid movement," concludes Feyerke. "The concept we used is well suited for Eva's portfolio, because the large number of images required a strict structure. But we also wanted to give users something that was fun to play with and interesting to explore."

There are a number of experimental UI designs that not only encourage web users to explore, but to play with the data. The Webby-winning Adidas UK website wraps up its content in dynamic boxes that change shape and size as you move the mouse over them.

Its rival brand Nike was also rewarded at this year's Webbys: its ACG site kicks off with a video before employing a swish, almost Pandora-esque bubble interface and slick pop-up modal boxes. It bagged a People's Voice gong for Best Navigation, but was beaten to the overall top-spot in that category by WHITEvoid's incredibly speedy Papervision3D portfolio.

"With the increasing popularity of Papervision3D, we'll see a wave of 3D space-type user interfaces this year," predicts Kinetic Singapore's Sean Lam. The ARK+ website, designed by Spanish outfit Pixelinglife, is one good example.

Created and developed for the Porcelanosa Group, the site presents a trip around a virtual city and focuses on five interactive scenarios - a shopping mall, port, airport, hospital and a sports centre - all developed with Papervision3D. Cleverly, each segment of the site is unlocked by drawing a simple 'gesture' onscreen with the mouse.

"Regarding the gesture navigation," says Pixelinglife account director Miguel Sim³n, "the search for a new type of interface for this website answers the need to communicate with the target clients in a way that helps them feel they are not only navigating, but also playing with the brand and retaining it with a simple gesture. We assume that the most important thing about designing a user interface is to think about how a user is going to behave in front of it. We have to make it easy to interact, not confuse the user with an excess of navigation options. A good interface should be simple and clear, but always invite you to play."

This playfulness is evident in Grow Interactive's Thank You Begins with a T, which won Best Portfolio at the Webbys. "It was created as a self-promo," explains Grow's creative director Drew Ungvarsky, "and a means to give a gift to our supporters. Friends, family, clients, and colleagues were given unique URLs that took them to the site and let them select a free Grow T-shirt. The site showcased all of the members of our team and their unique personalities. Each person drew on the screen in front of him or her, and then the scene became interactive."

Grow worked on the site for around four months (on and off), squeezing in the development work between various client projects. According to Ungvarsky, much of the development time was spent getting the video process right. "We shot all of the video in HD and then used Flash's new support for the H.264 codec to showcase the large, crisp video.

"We wanted the people, their drawings, and the interface to be absolutely indistinguishable from one another," he adds. "It was important for the technology to take a back seat to the overall effect, and the enjoyment of the interactions themselves."

Web guru Jacob Nielsen has suggested that "an iterative design methodology does not involve blindly replacing interface elements with alternative new design ideas." But this sensible approach will rarely lead to the sort of off-the-wall experimentation you see on the Sour Sally and Grow Interactive sites. There's a lot of interesting work going on - from multi-touch input, to faux-3D UI design. The concept-video Aurora project imagines a web interface that's contextually aware, while Bumptop can transform the average 2D Windows desktop into a 3D environment with real-time physics. Apple completely revamped the mobile user interface with the iPhone; LG has recently introduced 3G on its new Arena handset.

So what can we expect next? "We think the key trends in GUI design for the following months will revolve around the creation of sophisticated interactive experiences," suggests Miguel Sim³n. Grow Interactive's Drew Ungvarsky is more cautious: "With so many great technologies and platforms available, the people who are thriving right now are those who understand how to leverage them appropriately for their clients, without over-complicating the end result."

"Ideally, we'd like to build modern, robust, beautiful and unconventional sites that even our parents can understand and use," says Alex Feyerke. "Which, in our experience, is actually quite difficult - especially in Flash sites, where GUIs are much less bound by available technology and conventions. It's exactly why it's so easy to get carried away in the first place."

For the few sites that get it right, others will get it spectacularly wrong - particularly if self-indulgent designers sacrifice usability for bells and whistles. "It's so important to think about the user experience," insists Feyerke. "What do the visitors want, and how do they want it? What level of internet savvy can we expect? How will they move through the site, and how can we make their experience pleasant, streamlined and simple? Answering these questions takes time and effort, and they're easily bypassed and forgotten when a deadline looms, or when something more exciting beckons."