Channels ▼

Mike Riley

Dr. Dobb's Bloggers

Designing Web Interfaces Q&A

March 11, 2009

I was fortunate to have recently interviewed Bill Scott and Theresa Neil, the authors of Designing Web Interfaces, published by O'Reilly, about the challenges of creating compelling, intuitive interfaces for web apps, especially for Rich Internet Applications.  Read on for their insightful comments.


Mike Riley (MR): Before we talk about some of the web design principles you explore in the book, I have to mention that I really like the way the book is presented in 4-color throughout.  Was this a publishing decision you insisted upon or was it a choice made by Mary Treseler, the book's editor?

Bill Scott (BS): We decided early on that 4-color was a necessity,  something that Mary was also insistent upon from the start.  I have given a talk about some of these principles 40 or 50 times and it was very interactive, lots of screencasts embedded in the presentation, showing these various examples.  A concern both Theresa and I had was how do we translate that into the book, so color had to be provided as well as showing a way how the interactions between pages took place.

MR: Can you tell the listeners about the six design principles the provided the framework for your book?

BS: When I was at Yahoo, someone had asked if I could give some quick tips for designing Rich Internet Applications.  I had been mulling over this for a while, collecting information.  I jotted off nine quick suggestions, and six of those are in the book, entered with a web twist.  The first one, make it direct, is about this principle of keeping things as direct as possible.  Keeping it lightweight is really about shortening the path of interactions so that users feel like there's not a lot of effort to do things in your application.  Another one is staying on the page, and that has to do with on the web it's so easy to create web page to page experiences and much more challenging to create those more interactive interesting moments that happen inside the page to keep the users engaged.  The forth principle is around providing invitations, these simple, subtle things you can do to during an interaction that guide the user from step to step.  Using transitions is the fifth, about cinematic effects and using those to reinforce communication which show what has happened or what is going to happen.  And the last one is about being immediately reactive.  That is important because with that, the interface will feel sluggish, not intelligent.  You really expect something appropriate to come back quickly when interacting with an application.  

MR: What was the most challenging aspect of design that you determined when writing the book?

BS: It's this whole concept of being able to design for microstates, those little tiny interactions that make or break the nuances.  Understanding how to make an interaction much more lightweight is so important.  This is where, in the past, Apple has gotten it right with attention to very detailed nuances.

MR: In your opinion, why is it so hard for web application developers to understand and practice the subtleties of good web interface design?

Theresa Neil (TN): I honestly think it's lack of exposure to really good interfaces.  Especially a few years ago, there were really so few good examples of effective user interfaces for desktop applications so the bar was very low for designing something really effective.

BS:  That's a good point.  When you look at other fields such as architecture, you go to school to study the best architects.  In our field, there are so many examples and articles of what is good and bad that it's really hard for someone to curate the best ideas.  That's what we try to do in our book and our blog, to continue to surface what we think is an outstanding user experience.  And by highlighting these examples and giving them design pattern names, we contribute a little bit to the eco-space of better design.

MR: Which AJAX libraries do you personally gravitate toward when designing new web interfaces, and why?

BS: I find myself as of late gravitating toward jQuery.  In fact at NetFlix, I switched us over to jQuery.  It's doing a great job from a production perspective but it's also great for rapid prototyping.  It's a wonderful library and my best choice.

TN: Since I work as a consultant, I don't recommend any specific technology that my clients use.  But I think that good interface design can be implemented with pretty much any of the technologies.  We just did a blog posting comparing 15 different major RIA frameworks, including AJAX, Flex, Silverlight and Laszlo, comparing which ones have the essential controls for building an RIA.  It looked to me that jQuery, Dojo and ExtJS certainly seem to be the most robust frameworks out there, and of course Flex definitely has a lot of what is needed if you're building an enterprise application.

MR: With so many design interface choices to make, how can designers and developers make the smart choice to restrain themselves from filling the web pages with every conceivable UI widget, overlays and inlays available?

BS: You have to remember that it's really about the user and not about the technology.  You need the context of what you're trying to do.  A simple technique I suggest is try to create an experience the minimal amount of visual contrast, interactions, transitions, animations and see if you can turn the knob up a little bit to increase the communication where you need to.  Don't start the other way around where you're throwing everything in.  Every interaction, visual style and the color you put on a page places a penalty on attention bandwidth, so understanding how much you're going to pay for it down the road is really important.

MR: Do you find web design tools like Dreamweaver to be adequate in today's multi-library, multi-syntax composed web world?

BS: Dreamweaver has made a lot of improvements, but I don't personally use tools like that.  This can almost get into a religious war with people.  I prefer IntelliJ or TextMate, tools with good macro perspectives and syntax highlighting.  The problem for me with tools like Dreamweaver they bring a heavy style with them, so I tend to like things that are more open source.

TN: It definitely depends if you're putting out a website, a publicly facing web application or an enterprise application.  I spend a lot of my time in the enterprise application world, which I really enjoy the challenge of redesigning large suites and looking at data visualization challenges.  As such, most of my clients are not using products like Dreamweaver, but there are a lot of good RIA's coming out that are allowing  people to use a GUI interface for building out their RIA.  I looked at a couple today, one of which is WaveMaker and the other is 280 Atlas by the 280 North guys, and those tools look absolutely amazing.  I can't wait to play with 280 Atlas a bit more to see what that is going to bring to the AJAX development world.

MR: With Rich Internet Applications touted as the next big thing in web applications, what do you see as the future of successful web interface design?

BS:  Interface design hasn't changed a lot in the last 20 years.  Good design has always been about understanding the context of the user and had an eye towards what was technically possible without being severely limited by that.  So as we move from the desktop arena to a web presence such as comparing, say, Microsoft Word to Google Docs, the same design principles hold.  The difference is a different context.  On the web, a lot of actions are links as opposed to buttons (although links can be buttons), and the web is more content-driven instead of control-driven.  In enterprise applications, you tend to have more controls and the data you're outputting them on, and on the web, you tend to have content that you make more interactive.  The same principles, the same design challenges exist in both of those spaces.  It's just that you have to have a sense of the tools you have at hand.  This is one of the problems designers are faced with today.  They have to know enough about the technology to know what is possible and then apply all the best practices from the years of good design already identified.  

TN: I definitely noticed with my consulting that there is a real struggle with the right balance between using desktop paradigms versus web paradigms and pulling them together in an RIA design.  As we progress, we'll definitely have standards develop but for right now, all we can do is rely upon the standards we have for the desktop and ideas like those Bill and I put forth in the Principles for Rich Interaction and rely upon these until we come to some good decisions on what is the best way to present an RIA.

MR: Where can listeners go to learn more about your book, Designing Web Interfaces?

TN: We have a nice site that we set up called designingwebinterfaces.com.  It has an active blog - Theresa has been very active blogging all things RIA.  We also have a companion Flickr site that designingwebinterfaces.com references that has all our figures and references from the book that are available with the Creative Commons license for use in presentations, so we simply ask for that form of attribution.  There are also about 400 screencasts on that Flickr site that show the live interactions.  You can also find out more about the book from desigingwebinterfaces.com as well as links to our personal blogs for Theresa and myself.

 

 

 

 

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Dr. Dobb's TV