Slashdot Mirror


The Design of Sites, Second Edition

Joe Kauzlarich writes "The 'pattern' book has become a familiar genre for frequent readers of technical manuals. The idea is to sift through mountains of architectural or design schemes and then to categorize and catalogue the most frequent ideas and present their strengths and weaknesses. This type of book has been a success in software engineering, but can it translate to website design, where designers have everyday and frequent access to other designs? At worst, these books provide a common industry vocabulary (assuming it was read by everyone in the industry). How many people knew what a factory method referred to before Erich Gamma's Design Patterns was released? At best, as in the case of that 'original' software design patterns book, mountains of complex ideas are archived into a single reference and will sit within arm's reach for the rest of your life. So, is the web design discipline full of patterns that evade common sense?" Read below for the rest of Joe's review. The Design of Sites, Second Edition author Douglas K. Van Duyne; James A. Landay; Jason I. Hong pages 982 Pages publisher Prentice Hall rating 6/10 reviewer Joe Kauzlarich ISBN 0131345559 summary Catalogue of Website Design Patterns

Initially, I was amazed by the sheer scope and the amount of work that must've been put into this book. Almost 1000 pages — and not just a bunch of screenshots either. Most of the book is well-organized text. The screenshots are full-color, as is everything else in the book. Each section has a different-colored bleed, making it easy to locate the chapter you're looking for. Furthermore, the patterns are extensively cross-referenced throughout the book, and references appear in colored marginal bullets. Even the table of contents has descriptive section headings and a small summary of each section. The design of the book itself gets an eleven out of ten. The book itself is a living catalogue of technical reference design patterns. Kudos to the book's designer on this one.

As far as content, the book describes 117 distinct patterns in 13 categories. This includes patterns related to marginal topics such as mobile devices, accessibility and content creation (i.e. copywriting 101). Like most pattern books, it's a good idea to initially browse the book before using it as a reference so that you'll know what to look for when you need to pick it up again. On my initial browsing, it seemed to contain nothing particularly surprising — this has been the case with many great pattern books such as Martin Fowler's Refactoring or another of his books, Patterns of Enterprise Application Architecture, so I was not going to discredit it on this basis alone: a pattern book's true value shows itself when you're stuck on a problem and turn to it for a moment of shining clarity. Let's see if The Design of Sites lives up to this promise...

Trial #1: a business website that is not e-commerce, but a 'glorified yellow pages' type of site. I have a lot of information that needs to be accessed not only in its hierarchical organization, which can go to three levels deep, but should also guide the reader on what should be read next: a separate 'linked-list' that 'jumps' branches in the original hierarchy.

Given this amount of content and this double-organization, we wanted each page to present access to the site's information without overwhelming the reader. I open up the book to Part A, 'Site Genres', to locate the particular genre of website I'm working on. I find it: 'Valuable Company Sites.' I read some good information on layout. I see a paragraph titled 'other patterns to consider,' which points me to pattern B1, 'Multiple Ways to Navigate.' A-ha! The book's exceptional design allows me to locate pattern B1 in 3 seconds flat. It is hear I realize the true value of the book: there are no 'right' answers in design, only guidelines:

" ...we have identified two things that drive customers to action: intention and impulse (these can be thought of as goal and trigger, or need and desire). Neither intentional nor impulsive behavior is inherently good or bad, but a site that omits intention-based navigation might feel shallow and quirky, and one that omits impulse-based navigation might seem boring."

Good advice. Though I already have a hierarchical organization (intentional browsing) and recommended organization (impulse browsing), which gives users options on what to read next, I now have an idea of what sort of balance I want in the areas of navigation.

This was not exactly a mind-blowing discovery, but it did give me some confidence in the choices I eventually made and, furthermore, gave me valid reasons for making those choices, in case the client or a team-member were to question those choices later on.

Trial #2: Working on a website for a freelance graphic designer, I encounter a problem whereby each image in the portfolio can be categorized either by project/campaign or by design-type. For example, a logo, a business card, poster and website are all part of a single campaign, but we also want the ability to list all logos from separate campaigns. Again we have an organizational dilemma, but this time for a different type of site and a fundamentally different type of dilemma.

Again, I turn to the first section 'Site Genres' to locate the type of site I'm working on. It's not exactly a business site, but more of an on-line portfolio. The closest seems to be pattern A9, 'Stimulating Arts and Entertainment.' When I turn to it, I discover I was correct: the authors discuss the 'art gallery' site, though it doesn't exactly cover the aspect that I'm looking for. So I've encountered the book's first notable omission: nothing along the lines of an 'online portfolio' or 'interactive resume' genre of site design, which would encompass all creative freelancer sites as well as the usual rock band websites, etc. They differ from the 'Valuable Company Website' in that personal expression and design creativity take center stage. These sites have a general similarity in aesthetic in that they purposely avoid the business-like design. You won't see many pull-down or left-side navigation menus on a standard band website. The menus are typically integrated into a central graphic of some sort and this puts heavy constraints on the web designer while trying to effectively organize information without sacrificing the expressive purposes of the site.

The book offers no obvious guidelines for dealing with this sort of problem and here's why: it doesn't take into account the various constraints imposed by the client nor does it attempt to offer reconciliations between the design and the underlying organization of the data.

In my trial #2 we had the thumbnail images organized in two ways, either by design-type (poster, logo, business card) or by campaign ("Going Out of Business Sale", "Grand Opening", "Johnson's Automotive Website"), both organization-types having fairly equal weight. How do we allow the user to switch between organization types and keep the site consistent? The book doesn't touch these types of questions in a direct way.

The book offers a comprehensive aggregate of guidelines for user-interface patterns, User-centered, and 'psychological' perspectives. It covers most of the bases: content creation, page layout, organization of component elements, web application design, hints of 'Web 2.0' patterns, and ideas for functional pages such as searching, content submission, 'Marginal' topics like localization and accessibility that you may not want to buy a separate book for but, nonetheless, need to know about. It has a great overall design, easy to use as a reference and easy on the eyes, a long and detailed exposition on the utility of polling and seeking advice from your target audience, including sample forms to present them with. It is overall, very well-written and hardly a sentence wasted.

While 99% of the patterns themselves are common knowledge to most users of the internet and to most decent web designers, it is the expository text that forms the real meat of the book and contains the wealth of insight. This is by far the book's value. Posing as a patterns book is misleading; this book is really just a very good general guide to web design. As a pattern book, it's flawed, because almost every 'pattern' is just a guideline for effectively presenting information, not an elusive insight or 'trick of the trade' in itself, such what as Erich Gamma's (et al) original 'Design Patterns' brought us. There are mountains of outstanding tips and bits of advice throughout the book, but if you've already achieved a decent level of competency in design, then you're not going to be using the book very often and when you do, you might not get the depth of advice you're seeking.

On the other hand, the book gives beginner-to-intermediate-level designers everything they need to get started or fill in the gaps. The Design of Sites would also make an outstanding text book and is likely to be one of the best general guides to web design on the market.

I'll give it a 6 out of 10, judging a book on its utility as a design patterns books (just as you would give The Illiad a possible 2 out of 10 if Homer presented it to me as a historical text and I expected as much). As an introduction to web design, it easily deserves at least 9 points out of 10.

You can purchase The Design of Sites, Second Edition from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

4 of 43 comments (clear)

  1. step 1 by brunascle · · Score: 2, Insightful

    step 1: dont let web designers touch the HTML markup. their job belongs in the CSS file. all the designers should be doing to HTML is adding class= or wrapping stuff inside and tags.

    dont destroy the content just to to make it look pretty in IE.

    1. Re:step 1 by kiso · · Score: 2, Insightful

      unfortunately, this is not the case in the real world. you spend time writing a pure XHTML+CSS but: 1. The client wants eye-candy effects, look&feel or page design which cannot be implemented with pure XHTML+CSS. do some workarounds. 2. One of the popular browsers does not support one or more CSS selectors, do some workarounds (more often) so, unless the browsers stop interpreting the standards their own way, it's easier to come up with a quick & dirty HTML markup with tables and stuff, which will work and look as needed. the web browsers currently are too permissive - they try hard to render a lot of broken HTML+CSS which is spoiling. because they need to sell, need to dominate the market. make them all restrictive and people will start optimizing/rebuilding their pages.

    2. Re:step 1 by bit+trollent · · Score: 2, Insightful

      step 2: don't let programmers touch the html markup. their job belongs in the class files defining functions and database queries. All the programmers should be doing is writing business logic that outputs the desired raw data.

      Uhhuh. And what about interactive software? You know, where a repeater displays data which can be modified and used in a variety of ways. Should you still stick the developer in his little cubby hole of ouputting raw data?

      And why is it you want to stick the dev in his hole? Because you don't like tables?

      I've got news for you. Who gives a shit if there are tables in your html? Only wankers! This isn't rocket science people. This is the art of displaying data and pictures and interactive elements on a page where they belong. Thats it.

      Well written HTML or any other code has less to do with adhering to rules for their own sake than with creating things which look correct and are easily maintainable. I code to get things done. Not to conform to your wankary.

      If you want to avoid html tables like they were a SQL injection vulnerability that is fine by me. My work just gets done faster and with less bizzare rendering bugs by comparison. Just don't tell me that the only way for me to display data and whatnot is with an unnecessarily complex scheme that limits flexibility rather than extends it.

  2. Re:GoF is a classic, of course.... by Nazlfrag · · Score: 2, Insightful

    The GoF wrote a terse and succinct technical manual. Most books don't contain such a density of concepts and information. There's not really enough examples given to make it all click together, so additional reading would be good. All of the books you recommend are excellent. I'd advise reading them alongside GoF though, not before. Additionally, find some code, real world implementations beat book examples any day.