Design patterns are among the most underrated tools in the world of interaction designers. And that’s not because they are difficult to apply, but mainly due to the fact that designer are stubborn. We want to come up with all the solutions ourselves. But why? If you use patterns you save time and money, and you are more sure that your product will be understood by it’s users. Fortunately there are still believers, and they even wrote a book for us.

In 2005 Jenifer Tidwell published a book called Designing Interfaces, which can be considered as being the mother of the title I’m currently reviewing. The book gave us a solid overview of the most common design patterns around. It served as a superb handbook for any user interface designer. But as we all know, the digital world evolves in a very rapid way… new technologies aris and new solutions and patterns must be developed. So it isn’t strange that Bill Scott and Theresa Neil decided to publish a book full of great web patterns. And that’s the book we’re going to review now: Designing Web Interfaces.

Contents of the book

While Designing Interfaces had a very ‘physical’ structure (chapters with headers, navigation, footers and forms), Designing Web Interfaces has a different approach. It uses principles to structure the different patterns. With this method the authors learn us the main principles that are (in their mind) important to design web interfaces. So let’s take a look at the different principles and content of the book:

Make It Direct

In this chapter it’s all about making it clear for users when they can change something on a page. How do you make a page visually appealing and still make it very clear what can and can’t be edited?
Chapters: in-page editing, drag and drop, direct selection

Keep It Leightweight

Websites are becoming more like software by the day. With this principle you learn to keep actions simple: provide sufficient feedback, but also keep it simple.
Chapters: contextual tools

Stay on the Page

Not every click and action should result in loading a new page. Sometimes you only want to refresh part of a page (like with e-mail on Gmail) or you don’t want secondary information to cause users to leave a page (so you use overlays). This principle and the chapters give you great tips when and how to do that.
Chapters: overlays, inlays, virtual pages, process flow

Provide an Invitation

With websites becoming more complex you need every space you can use to provide good contextual information and support. In this principle you learn how to help visitors to discover the possibilities on a site, via inviations. For me this is one of the more interesting new ways of learning people how to use your site, by giving them a live tour through your site/page.
Chapters: static invitations, dynamic invitations

Use Transitions

In this chapter you get a series of patterns on how you can use transition to tell the right story, stay in a flow and get the correct attention.
Chapters: transitional patterns, purpose of transitions

React Immediately

You see it ever more often, getting suggestions in search boxes while you are typing. This, and other direct feedback, are becoming the standard. People expect nothing less from website than direct feedback. In two chapters the book shows us a series of lookup and feedback patterns that could help you fulfil many expectations.
Chapters: lookup patterns, feedback patterns

Conclusion

What I really liked about this book is the detailed, but interesting to read, way that the patterns are described… Instead of just showing us the best way to do it, the book manages to give good context. In some cases it shows different appliances of a certain pattern, describing the advantages and disadvantages in detail. This is really usable material for interaction designers, because it makes us aware of the necessary detail. A lot of designers will just design a page and describe the interaction in general, leaving it to the programmer to come up with the best solution. But it’s not just his responsibility, but (also) that of the interaction designer. We must understand how a user will respond, and patterns and facts (like: making something respond after dragging for 3 pixels makes something feel smoother than after 5+ pixels) help us do that.

So, in my opinion, every interaction designer should have a book (or online source) with design patterns within reach. It helps making decisions faster, and saves time for the real innovation.

Book details
Designing Web Interfaces
author: Bill Scott, Theresa Neil
published: O’Reilly, 2009
details: 296 pages, softcover

This week MSN launched their own sci-fi series called Kirill. Normally that wouldn’t be really special for Johnny, except that it claims to be the next generation in online TV. It wants to create an interactive experience between the series and the people who watch it.

The story is about an environmental disaster caused by the particle accelerator at CERN (Switzerland). Since then strange things are happening… researchers being arrested, people in hiding and special forces showing up. As a viewer you can watch the episodes, which last three minutes each. There you get information as the director intended it. But it’s barely enough to understand the story and exactly enough to feed your need for more information. And there the interactivity starts.

Besides the episodes a lot of information can be found on other places. The storyline is intertwined with different interactive tools from MSN. For example a few journalists are blogging on Spaces about strange incidents in town, showing video footage and photos of researchers being kidnapped. And you shouldn’t be surprised when you’re suddenly contacted via your instant messenger. You decide which information you want to see or read, and create your own conclusion. And it works: while I was watching one video on a blog I was so intriged that I started watching related movies, constantly getting more curious about the events that occured.

It’s good to see a new online television concepts showing up, experimenting by giving me a lot of freedom to dive into the story. I think it’s too early to tell if it will be a success… One thing that is difficult to accomplish is giving people a sense of freedom and influence, but on the other hand managing to keep the story on track and manageable. I see is a big relationship with story-based computer games, which try to give you the feeling that you are actually creating the story around you. A lot of these games failed at this, so I hope the creators of Kirill used those learnings. The first perfect example of a story-based game has to be Half-Life.

I hope this online tv concept will succeed and pave the way to more interactivity in storylines. And I have to admit that it is a great marketing action to promote Microsoft services and products, such as MSN and Silverlight.

Watch the first episode:

A few weeks ago Dutch fashion designers Viktor & Rolf showed their spring and summer 2009 collection exclusively on Internet. At exactly eight o’clock in the morning the fashion show started up, showing their Shalom collection. The name of the collection was based on the one model on the virtual catwalk: Shalom Harlow. Within the fashion world it’s unique to present a collection this way.

Although this is a unique moment for the fashion world, it isn’t for web addicts. Unfortunately everything that could be interactive is missing here. It would have been fantastic if you could move the camera around, watching the catwalk and model from different angles. And also the ability to communicate with other people who are watching the show would have been interesting, exchanging thoughts on the clothing.

But even then… it is an interesting move. The entire website of Viktor & Rolf uses the metaphor of a mansion. By using this they can place online events on their site within certain time periods, which is a great way of marketing.

Watch the entire show:

Why can’t the web be a total experience? Even though we have Flash, Silverlight, Ajax and the most beautifully designed websites, I never feel submerged. How can this be? My opinion is that the webbrowser is slowing us down, killing the experience in the process.

When you think of it: the functional framework of an average browser takes up 10-15% of our screen. Showing us buttons, icons and textfields that we won’t be using for most of the time. In fact, it’s defining the way I use and experience websites. By generalising navigation structures it forces us to navigate 95% of the web in exactly the same way: hierarchal. This of course enhances usability, but degrades user experience.

Besides the fact that it generalises the way we navigate, an even bigger issue is the lack of submergence. When I think of ‘real experiences’ a big range of moments comes to mind, ranging from computer games to movies and entertainment parks. There I feel totally submerged. You go 110% into the experience, not noticing the surroundings. This happens when you are in rollercoaster, racing on the highway and for example when playing an exciting game. But on the Internet I never get past the feeling that I’m just browsing around. And that makes me act accordingly.

There is of course the full screen mode, which enables me to hide the framework of my browser. But this is a power user tool, hidden behind a button. And so almost nobody uses it and thus no creative has ever made a website that mimics a true experience. There are of course a few examples that come close, such as Firefox plugin CoolIris (which isn’t actually a website). This plugin enables people to view photos and videos of the web in a fullscreen representation, submerging people in a beautiful webexperience. When I think of it… this is actually a good example of where the web could go when browsers become unobtrusive. Flash and Silverlight are a perfect base for this.

So what now?
I believe in an unobtrusive browser, which is mainly there to guarantee that I’m surfing the web safely. By removing the visual framework you force (and motivate) web creatives to rethink the way to move through websites. And because there is no framework the freedom will be total. 3D interfaces won’t look strange within a 2D shell anymore. I believe it will pave the way for a new generation of online experiences and interactions. Maybe Youtube could become a real online tv channel…

Of course not all the functionality a webbrowser offers is waste. The address- and searchbar are pretty useful, when combined (like in Chrome). But they should only appear when necessary. In it’s core this could be all the browser has to offer. And if somebody wants more functionality, this can be added by clicking in widgets – adding functionality. I can imagine a co-op widget, which shows me other people who are on the same webpage/-site.

Anyway… the bottomline is this: let’s open up our minds for a new generation of web experience. I want to submerge.