Deconstructing Web Applications

Hagan Rivers is a recognized pioneer in the area of Web Application Design. Hagan worked on some of the very first web based interfaces and she continues to push the envelope of web application design in her current role as a partner at Two Rivers Consulting. UIE’s Christine Perfetti recently had the opportunity to talk with Hagan about some of the biggest challenges in the web application space.

UIE: Many web designers struggle when they move into the web-based application space. How do you define a web-based application? Are the rules of design so different for a web site and web-based application that designers need to know which they are working on?

Hagan Rivers: Web-based applications are web sites with interactivity-the user is interacting. And web applications, like desktop applications, need to have interaction design. A web application is everything a web site is, and more. In application design, you have to work on the flow of the application, how screens are organized, how the user moves through the application, what is saved and when and how, and how to handle error messages. There are huge issues that never appear in web-site design.

I have a background in desktop-application design, so when I first started working on web applications I applied much of that knowledge to design for the web. Although the methodologies are similar, the web platform is substantially different from a traditional desktop application and it calls for different building blocks, different design elements, and different considerations.

A good example is paging—the controls for displaying more elements than appear on a single page. Desktop applications show lists of stuff all the time, but they never page through those lists. And there are about 12 different ways to do paging in web applications. And anyone who has worked on a paging design can tell you that there are all sorts of subtle and tricky usability issues that arise.

What are some of the biggest differences between desktop applications and web-based applications, and how do these differences affect design?

Web-based applications exist within the framework of the web browser itself. For desktop application designers, this can seem incredibly limiting. There are fewer controls available, it’s not nearly as dynamic, that annoying Back button keeps cropping up, and you have to wait, wait, and wait for the server to display something new.

Of course, the platform is constantly evolving—unlike the desktop platform, which didn’t change very much in the 15-20 years that it’s been around. The web application space keeps getting richer, giving us more choices. For instance, AJAX is coming into use, allowing web applications to be as responsive as desktop applications. That’s going to change the whole landscape of web application design.

I also think that web application design is breaking some new ground in how we design applications. As designers, we have a LOT more control over the presentation of information in our application and the presentation of the application as a whole. On the desktop, it was always battleship gray and tables always looked identical. Not any more!

Do you think there are big differences between intranet applications and the public web applications we see on the internet?

Sure-the intranet applications are much harder for outsiders like me to get a good look at.

Seriously, the past few years, I’ve seen about same number of private intranet applications as public ones. The intranet applications are often less flashy than their public counterparts and they’re often more data-entry intensive. However, in terms of the design building blocks, the key considerations, and the methodologies, they’re the same. That means, as an intranet developer, you can learn all you need to know by looking at a variety of robust, large public web applications.

One of the biggest challenges for developers creating web applications is that they have little or no examples to draw upon to help frame their design work. Can you give us examples of 1-2 successful applications? What are their strengths? How were the applications built?

Ok, here’s a site that has a lot in common with many intranet sites I’ve seen: Network solutions. They have an application for registering and managing domain names. It’s very task based, it is powerful and flexible but not over the top. And graphically, it’s appealing.

Match is an online dating service—one of a new breed of collaborative software that dominates the web application area. They’ve put a lot of work into their whole product design. It’s an ambitious product and they’ve brought all their design elements together beautifully. I doubt there are any intranet dating applications, but these guys still employ a lot of application design that would work beautifully for intranets.

Salesforce is a huge, complex, and very rich web application. It’s got an online demo that you can sign up for, so you can really take it for a great test drive. It’s not going to win any awards for its visual design, but the interaction design work is incredibly thorough and detailed. They use a lot of templates, reusable bits of interface designs. The way they handle toolbars, tables, and editing is all the same no matter where you are in the application. The navigation system is incredibly simple and yet it works very well, which is surprising considering how many screens the product has. It’s quick and slick.

What are some of the biggest challenges for design teams who are moving an application to the web?

I think one of the biggest challenges is being too married to traditional application design. They want to re-create their desktop application in HTML. I’ve seen this with a lot of our clients and by and large it just doesn’t work.

Web applications live by different rules: The browser already has stolen the menu bar. Popup windows are not a great idea. Response times are slower. It calls for a new way to design, not just re-creating what was built for the desktop.

Plus, many web applications are built in the context of web pages themselves, which is a whole different style of design—design embedded in information, within pages.

What’s interesting to me is that web applications were such a big departure from desktop applications—we’ve seen some totally new design ideas over the last 5-7 years. These ideas are really coming back and influencing desktop application design. Look at Microsoft’s Windows Vista or Apple’s iTunes, Microsoft Money, and Quicken. They look nothing like applications 10 years ago. So web applications represent a real revolution in all application design. That’s powerful stuff.

Can you share an example of an application that has successfully migrated from the desktop to a web-based application?

Apple has done a good job of this with their .mac site. Users who create a .mac account can synchronize their address book, bookmarks, and email from their computer to the .mac web site.

So when you login to the .mac web site, you can open Mail and read mail. They’ve gone to some effort to make it very similar to the Mail desktop application. After all, the target user could be switching back and forth between the two frequently. Yet, there are huge differences and those differences feel very natural. It’s impressive.

Many usability experts argue that the HTML page-centric model does not scale to full-fledged web applications. They say the document metaphor inherent in an HTML application constrains developers, forcing them to fit complex application interactivity into a linear, page-based process. Do you agree with this criticism?

I think that the experts are wrong (shock! Horror!). I don’t think the page metaphor limits web applications at all. The page metaphor makes most people think of simplistic, page by page application design. But a lot of web applications have moved way beyond that and are quite robust. Using them, I’m hardly aware of the presence of “pages”. Match.com, which I mentioned earlier, is a great example of this. It’s a pretty big application. It’s nonlinear. You really don’t notice the presence of pages. But it’s also NOTHING like a desktop application. And yet it works beautifully.

In the last couple of years, I’ve seen more and more really robust web applications. The engineering teams are really flexing their muscles and companies are venturing into very large and complex web applications. Now we can add AJAX to that mix. I think we’ve only scratched the surface of what web applications will do.

You’ve mentioned the promise of AJAX for web applications. What are the benefits to using the AJAX approach?

Where AJAX helps in a BIG, BIG way is responsiveness on the page. We can start to do the same kind of updates, error checking, and subtle updates on a screen that make desktop applications just feel more responsive and more on top of things. Web applications are going to get a huge boost in responsiveness and soon any application that isn’t using AJAX is going to look very dated.

But is AJAX the answer for web applications? THE answer? No. More than anything, I’m learning that there isn’t going to be one answer. There will be hundreds of answers and, as designers, we’ll have to choose between them and learn to use them effectively. That’s the hard part for all of us.