Aaron Sumner

Scott and Neil's Designing Web Interfaces Master Class (a Book Report)

In the last few years, web-based software have become more and more like their desktop counterparts thanks to Rich Internet Application (RIA) frameworks. In Scott and Neil’s Designing Web Interfaces Master Class, a video series from O’Reilly, you’ll learn about what works in modern web application interfaces, what anti-patterns to stay away from, and how to combine structure, layouts, and controls into user-friendly software.

This Master Class is presented by Bill Scott and Theresa Neil, who also penned the book version of O’Reilly’s Designing Web Interfaces. (The book is not required to learn from the videos; I’ve not read the book myself.) And, as the title suggests, these videos are about design, not engineering, so if you’re looking for the CSS, Javascript, or backend code required to develop these interfaces, you’ll need to look elsewhere. If you are a developer, though, you should note that the patterns outlined in this presentation are achievable in just about every major front-end web development framework (jQuery, Flex, etc.), so you’ll be able to put these designs to use in the framework of your choice. Videos may be streamed from O’Reilly or downloaded to your computer.

The Designing Web Interfaces Master Class has a lot going for it. In about four hours, you’ll get a good rundown of patterns for good web interface design. The videos are broken into four main components: Application structure, screen layout, UI controls, and “meaningful moments,” or principles for putting those structures, layouts, and controls into good practice. The real strength in Scott and Neil’s presentation is their use of real-world examples, many of which come from web applications you probably use yourself. The important takeaway here for designers and developers/engineers alike is that, in all likelihood, someone has already solved an interface problem very similar (if not identical) to yours, so do what you can to follow good patterns.

The presentation is well-structured and well-paced, making it easy to follow along and take your own notes if you’d like. And, being video-based, it’s easy to rewind and replay if you want to see an example again (or you can go over to a site they talk about and experiment with it for yourself).

I have three minor criticisms about this video series. First, the audience setup is kind of odd. This might seem superficial, but hear me out. I figure the producers were trying to strike a balance between having Scott and Neil talk directly to the camera (which would have looked canned) and taping a presentation to an auditorium full of people (which would have compromised videography). The setup they chose was to have a small audience—of four people. Two of them didn’t say anything, and two of them asked questions that sometimes took the presenters off-topic. I liked that this gave the presenters someone real to talk to, but I got distracted at times by these four anonymous audience members for some reason—it felt a little staged. Maybe a slightly larger group of 10 or so would seem more realistic, while still allowing for studio-like video settings.

My second suggestion is a technical one, having to do with the downloaded videos themselves. I loaded the individual clips, as opposed to just streaming them from O’Reilly, but by default they got lost alongside other videos in my collection. My solution was to tag this series as a TV show and add other meta information for ordering. Just a suggestion for others downloading these clips and saving them for future reference. (I also wouldn’t mind chapter markers, as Peepcode does in their commercial screencasts.)

Finally, on a content note, Scott and Neil don’t address the potential impact on accessibility when focusing on how your application works with a RIA framework at the top. Perhaps this is covered in the book, but I surmise that sometimes some user experience designers may get caught up in the glitz of modern frameworks and forget that graceful fallbacks to interfaces that just work aren’t just for users who haven’t upgraded from Internet Explorer 6. Keep in mind that folks with limited sight or motor skills may not be able to use those bells and whistles your favorite jQuery plugin provides; in fact, they might not be able to use your site at all.

These quirks aside, this Master Class is an excellent resource for anyone developing web applications. While I said that the book isn’t required to get everything out of these videos, I may wind up investing in it anyway for easier reference to specific use cases.

More information about Scott and Neil’s Designing Web Interfaces Master Class is available from O’Reilly.

Note: I wrote this review for O’Reilly’s Blogger Review Program. It’s a pretty nice deal: Get a free e-book to read, share a review in your blog, get another free book to read. Sign up for yourself to take advantage of this deal, and watch for more book reports in my blog.

. Questions or comments? Let me know what you think.