Designing Web Interfaces Principles and Patterns for Rich

in Website Design

Brand:
Average Rating
15 reviews

With the recent advent of Ajax and the resurgence of Flash for developing web sites and applications, new patterns of interaction have emerged on the Web. In this book, Bill Scott provides insight on how to best take advantage of the power of these technologies for designing a great user experience through a series of best practices, summarized as eight key principles. Each principle and its nuances are illustrated in detail with real world examples and counter-examples from both inside and outside Yahoo! The design principles provide the rationale for how to apply a pattern. Design patterns provide a solution in context. The eight design principles are introduced as a set of principles focused on rich interaction, feedback and user data models. Benefits to reader: 1. Take-away the key principles for creating a rich experience on the web 2. Build a vocabulary around common patterns of interaction for a common language between engineering & design 3. Have numerous real-world examples to clearly understand the principles & patterns for future reference 4. Be able to apply the patterns & principles in real world design problems Includes a companion website: designingrichwebexperience.com

more info

Related Posts with Thumbnails
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • YahooMyWeb
  • Google Bookmarks
  • Yahoo! Buzz
  • TwitThis
  • Live
  • LinkedIn
  • Pownce
  • MySpace

{ 15 comments… read them below or add one }

1 Alexander Raymond March 7, 2010 at 9:06 am

Difficult to get into – not for the novice
Rating:2 out of 5 stars
My wife and I both tried to read this book and found it very hard to understand. I have a decent knowledge of website design and creation, but found that this book jumps straight into the deep end of the pool with very little introduction and context. Unless you are already an experience developer familiar with all the terms and technology, you may find this resource hard to penetrate.

2 Brandon Granger March 14, 2010 at 11:48 pm

Excellent book of rich interaction web patterns
Rating:5 out of 5 stars
With tons of examples and many meaty details, Designing Web Interfaces is just brain candy for designers to read. My team is working on building out a pattern library right now and this book is a great resource of best practices, decision rationales, and “gotchas” for using specific patterns. This book also builds on the O’Reilly Designing Interfaces book (Jenifer Tidwell) but the two never step on each other. Great resource and highly readable.

3 David Pepper March 26, 2010 at 7:31 pm

An Embarrassment of Riches
Rating:3 out of 5 stars
Scott is a/the genius behind Netflix and Yahoo!’s interfaces, so I got this book to figure out how to make my web interface programming work more professional.

However, much of what I’ve read here goes against the spirit of the design I was taught to do in grad school. For example, Netflix/Yahoo! make complex designs that are highly functional for expert users, and at-least reasonably usable for intermediate users. These designs feature transitions which use fades, transparent controls which only become visible when a user hovers, and dueling interfaces which allow power-users to move at a different speed than weaker users, etc.

By comparison, my grad program emphasizes designing for readability, learnability and with a singular notion of organizational principles structuring content in such a way that it is accessible to humans, search engines, and user agents (speech synthesis for visually impaired users). In Designing Web Interfaces, this perspective is consistently swept aside in the quest to build “rich interactions” at the expense of these peripheral users.

The result for me of this encounter with “Designing Web Interfaces” has been a renewed appreciation of how hard it is to make interface design choices. So often design is a question of framing, which establishes who the audience is, what the goals are, and what standards to use for a product.

I think at best, this book offers insight into future trends of professional design — what Scott calls “rich interactions”. However, I have a feeling that I’ll always be more on the novice/disabled/user-agent user’s side, leaning towards standard-based and user-centered designs, no matter what these captains of industry are cooking up.

4 B. T. Denyer April 17, 2010 at 4:00 am

Great book for a wide range of users; easy to follow; well-written.
Rating:5 out of 5 stars
If you are brand spanking new to web design, and have never coded a single site, you may want to hold off on this book for a minute. I’m not saying it is not for beginners, because it is. Those new to HTML and CSS may want to get the hang of that before jumping into incorporating Ajax and JavaScript along with advanced CSS techniques.

Who is it for? I would recommend this book for art directors, project managers, web designers (all levels), interactive designers, DVD menu designers (though not directly related, you can still take away some important aspects or “patterns”), and especially those that design online training modules (we all know how dull they can be.) Like the DVD menu designers I mentioned above, I think Flash designers can benefit greatly, as well. Though the book is not directly geared toward Flash design, the patterns and “anti-patterns” talked about can easily be used when designing for a Flash experience.

The layout of the book is broken up into the 6 “principles” described in the product description of this book. The sections “Make It Direct” and “Stay on the Page” are by far the two largest sections, for they are the most important of the 6. “Keep it Lightweight” is the shortest section/principle, but by no means is rushed or glossed over. It poses some great design ideas to keep it intuitive, discoverable and keep you from designing ‘mouse traps.’

In order to get the most out of this book, you would have to have designed a web site before reading this book. If you are a project manager or art director in charge of a team designing a web site (but not a web designer yourself), it would benefit you greatly to have a general understanding of web design, HTML, what Ajax is, CSS, cross-browser compatibilities, and Javascript. If you are just managing a team, you do NOT have to know how to code these languages/techniques, but in order to really benefit form this book, it would be better if you generally know what each does.

This book could also help bridge the gap for some managers by equipping them with the correct terminology of web design. Just speaking the language of user interface design can help speed up the time it takes to turn your directions into an interface that works the way you intended.

The book is detailed and to the point of the benefits of discoverability and weighing your options in the case of just how intuitive you need to make the interface. This book does not read like a my-way-or-the-highway kind of book. Scott mentions the potential pitfalls, disadvantages and possible alternate scenarios that depend on your interactive goals as set by the audience visiting your site.

A good number of the examples are from Yahoo! and Netflix sites (because Scott used to work for Yahoo! and now works for Netflix), but I never once felt like it was an advertisement for either one. He manages to spread the love around and uses examples from the Gap, iPhone, blogs, Google, Amazon, and others.

In short, the book is an easy read, something that one could go through in a long weekend. There are screenshots and visual examples on virtually every page, so in no way are we left to imagine the event happening. Multiple screenshots are taken when the event happens over the period of several steps. There is even a couple free companion web sites that will show the screenshots in a larger format than the book would allow. While reading the book, you will undoubtedly have many ‘ah ha!’ moments, or times when you rush to check your previously-designed web sites to see if you need to make a correction to your interface (admit it, we all do.)

I highly recommend this book for anyone that designs interfaces, even if they are for mp3 players, touch screens for electronics, or those interactive lobby displays. We all need some help in the area of user interface design.

***NOTE: there is NO code in this book. This the theory of designing user interfaces for the web, NOT the code.

5 E. Wood April 29, 2010 at 6:46 pm

Best Practical Interaction Design Guide I’ve Read
Rating:5 out of 5 stars
I’ve read a lot of books about designing functional user interfaces. This one is the best I’ve read. Even as a 12 year veteran of interaction design it had plenty for me to mine. It has up-to-the minute web 2.0 style AJAX interactions with directly actionable, pattern based examples. I bought one for everyone in the design group and made them read it!

The authors’ approach to defining interactions using patterns isn’t new, but the all-in-one catalog of rich interactions is. Using this book I was able to quickly review interaction options for a particular use case and pick the right pattern. After a couple of weeks I finished standardizing interactions styles for our entire site, which helped designers and developers alike. Another hit from O’Reilly Press.

If you are looking for a more philosophical definition of Interaction Design try Designing for Interaction: Creating Smart Applications and Clever Devices (VOICES)

6 introfini May 10, 2010 at 7:43 am

Good as a reference book
Rating:3 out of 5 stars
I was waiting for more from this book. It’s nothing more than an reference book on some design patterns.

7 Foti Massimo May 24, 2010 at 9:28 am

The perfect companion to Designing Interfaces
Rating:5 out of 5 stars
Three years before this, O’Reilly published “Designing Interfaces: Patterns for Effective Interaction Design”, a kind of innovative book, which used the classic approach of a pattern catalogue applied to GUI. Three years later, same publisher, different authors and again we’ve got an excellent book. This time the catalogues only covers web interfaces, a very welcomed choice since web based RIA are steadily becoming mainstream.

Depending on the technology you use, the suggestions you will find in this book may require trivial or very complex efforts in order to be implemented; but that’s another story…

8 Matthew Penner June 6, 2010 at 1:54 am

Great summation of current UI patterns in a well written and laid out manner. Definitely not dry reading.
Rating:5 out of 5 stars
Designing Web interfaces by Bill Scott and Theresa Neil is a nice encapsulation on many of the current UI trends for web applications. While the desktop area was dominated years ago with industry standards, and are only now taking on a new revolution with disconnected web products like Adobe Air or new UI frameworks like WPF, the web is still in its infancy regarding UI design. Especially now with AJAX it seems like every year brings on a new set of standards of how UI is supposed to work on the web. This book discusses a very current set of established patterns in a well written and clear format.

While there are several books that speak of web UI and interaction, and thousands of websites, what Scott and Theresa really do well is talk about what patters are in current use, when they are appropriate and many cases where they might not be. They break them down into very manageable sections where you can quickly spot the patter that will work for you. Unlike other patterns books this is filled with hundreds of screenshots detailing every aspect and a lot of great examples. This is not dry reading.

They both draw from their past experience, often showing examples of what worked and what didn’t in previous commercial sites they have worked on (like Yahoo), and comment about how things might have been implemented better. They show the various UI patterns in great detail with screenshots and many of the transitions. Often they point out popular websites where a fairly good pattern was implemented for the sheer “coolness” of it, however, in production it simply didn’t work and they should have opted for a more subtle pattern. In other cases they point out where changing from one design to another, avoiding a single click such as in Digg, resulted in doubling their user interaction.

This was a great addition to my bookshelf and definitely something I will refer to often.

9 Frank Mitch June 8, 2010 at 5:03 am

Web Interfaces
Rating:5 out of 5 stars
Reviewer: Dave Roman, GCPCUG member

This book has 14 chapters, but they are only sub divisions of a different type of classification. The book is about interaction design on the web. They have divided this book up into six principles and since they took this approach I am going to review the principles.

Principle One – Make It Direct

What does that mean? This is covered in three chapters. They discuss direct in-page editing of content, moving objects around directly with the mouse (drag and drop), and applying actions to directly selected objects.

Principle Two – Keep It Lightweight

This area discusses Contextual Tools

Principle Three – Stay on the Page

Here they discuss ways to keep the user on the page including overlays, Inlays, Virtual Pages and Process Flow

Principal Four – Provide an Invitation

This area talks about providing an invitation to the user in a number of forms. Static invitations are offered on the page using visual techniques to invite interaction. Dynamic invitations come into play in response to what and where the user is interacting.

Principal Five – Use Transitions

This area could be entitled “Pay Attention” because it IS about getting your attention using movement and transition. They discuss transition patterns like “brighten and dim”, “expand and collapse”, “Self-Healing Fade”, “Animation” and “spotlight”.

Then they go to the purpose of transition. What is the reason for using these powerful effects and where they are most effective.

Principle Six – React Immediately

This is all about what happens immediately after each interaction with the system. There should be an immediate reaction paired with the user’s action. The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time and is called Latency Reduction.

They first talk about lookup patterns and then feedback patterns.

The web is constantly changing, so the authors provide sites to keep you up to date, one of which is http://designingwebinterfaces.com

It’s a long book, but does a good job explaining what takes place in an interactive website. This is not a coding book, but more like a combination of the psychology of a web site and how to use this knowledge to make it easier for the user and also make it easier to buy a product or find the information they are looking for.

10 Costa Michele June 18, 2010 at 3:51 am

Web ID at its best!
Rating:5 out of 5 stars
Since Web UI have started levelling to those of others media, the need for a book about RIA interaction design (ID) has became strongest than ever.

This writing provides precious usability tips and atomic design patterns for every modern Web ID technique you could imagine.

All this stuff is packaged into six foundamental principles you can remember effortless.

Final advices…

If you are a Web-nerdy-technician you wont find any code snippet into this book (but you can easily figure out how to implement the examples with your favorite JavaScript framework).

If you are a pure-creative-guy, you’ll need a minimal technical background to grasp some of the patterns (but covering obscure tech-topics will made you a better designer).

Whoever you are, believe me: this is Web ID at its best!

11 Grimmy June 22, 2010 at 7:15 am

A good overview, but could be better
Rating:3 out of 5 stars
Provides a good overview of the many interface options in use today. However, accessibility is generally not addressed, so you would have to assess this yourself for each option. Also, the screenshots could have been marked up to show the steps in the interactions more clearly, rather than just successive screenshots.

12 Stefan Leuthold July 18, 2010 at 8:19 am

Best organization of principles for designing Rich Internet Applications I have read so far
Rating:5 out of 5 stars
This book absorbed me for the last weekend, and I have to say, it is the best book in the field of HCI I have come across since reading Tidwell’s Designing Interfaces: Patterns for Effective Interaction Design. Of course, I like everything that happens to quote Cooper’s About Face 3: The Essentials of Interaction Design and Raskin’s The Humane Interface: New Directions for Designing Interactive Systems (ACM Press) – but this one gave me lots of new, practical ideas for the web, and a consistent terminology I can use to think and talk about Rich Internet Applications.

Nicely organized and layouted, well-written, and, in my opinion, thought-through easy-to-grasp structure. I was studying many patterns in the Yahoo! pattern library online and I am glad that Bill Scott finally published a book with the same clarity and logic that I came to like online.

Will become a standard in the company I work for and I am sure our clients will already start to “fear” discussions around the six principles when arguing with our consultants for what should be done and how :-)

Great book.

13 Mark's valuable input August 13, 2010 at 11:56 pm

Very, very basic; not much tangible information
Rating:2 out of 5 stars
I thought this book would help my design approaches and give real insight on designing websites. If you have any experience at all, I would not recommend this book. I think the author(s) would have been better off producing a training video, even if to accompany the book. I must now look elsewhere to get what I thought I would from this book; very disappointed.

14 Jesse Chapo August 15, 2010 at 10:22 pm

Super detailed, very informative
Rating:5 out of 5 stars
I really enjoyed Designing Web Interfaces. If you plan on making a move from being just a visual designer to a user interface designer this is definitely a must read, more details than you imagine there could be about web interfaces!

15 George August 20, 2010 at 3:25 pm

Reading for a Programmer?
Rating:5 out of 5 stars
With web interfaces using AJAX, Flash and Silverlight more and more, not only would designers would find this book useful, but also developers. The book is first-rate book, filled with examples from everyone from Yahoo, Google, Netflix, Apple and even Xbox. The examples in the book show just how much the web user’s interfaces have changed in the last few years. Anyone designing or writing code to implement user interfaces will find the book helpful.

Coming from more of a programmer’s background than designer, I found the book helpful in understand where particular patterns would work better than others. I see other readers recommending the book for art directors, project managers, web designers and interactive designers, but I would also include programmers, who want to understand why certain interfaces are used. This book has no code and is not the place to see how to implement the interfaces, but programmer will understand why a specific design might be used.

If the developer was looking for a book on how to code the design, then look somewhere else. If a developer wanted a better understanding of the ideas behind web interfaces, this would be a superb book.

Leave a Comment

! ! ! ! !

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Security Code:

Secondlife.com

Previous post:

Next post: