Designing Powerful Web Applications: An Interview with David (Heller) Malouf

At UIE, we’ve been investigating how sites such as Google, Flickr, and Del.icio.us use new interaction models to create more powerful user experiences. The thing that excites us the most is that we’re now seeing Rich Internet Applications (RIAs) applications suddenly give application developers a new way to approach hard problems with surprisingly effective results.

UIE’s Joshua recently interviewed David (Heller) Malouf, a premier Interaction Designer, to discuss the issues involved when development teams are thinking about designing web applications using AJAX and RIAs. Here’s what David had to say:

UIE: How can designers add richness to their web sites while keeping them easy to use?

David (Heller) Malouf: RIAs (Rich Internet Applications) are not any different from other software solutions. Developers need to follow some basic User Experience design principles. They have to choose the right design to fit the right context of use against what we know about users’ cognitive capabilities.

I warn development teams not to be too enthusiastic with new and cool technologies. This is what initially led to Jakob Nielsen’s decree that Flash is “99% bad.” Most of the challenges associated with developing RIAs are design issues and not technological problems.

How can developers deal with design problems? The only way they can know if their application works well for users is through testing. One technique I suggest for development teams is to test an existing RIA. How are people using applications such as Yahoo Mail Beta, Gmail, and Zimbra? The best thing about design is that you never have to feel the need to start from scratch.

Developers can also leverage new design conventions. The Yahoo Design Pattern Library is an amazing resource to help teams out. However, I warn teams not to get too caught up in conventions. I have personally fallen into the copy-cat design methodology. Conventions are guidelines and not rules. They can be extrapolated upon easily and creatively to evolve into new conventions. So look to examples for guidance, but not for solutions.

We’ve heard a great deal about AJAX. What are some of the benefits of developing applications using AJAX?

AJAX lets designers add rich interactions to ordinary HTML-based pages, as either a whole architecture solution or an incremental fix. Since it doesn’t require a plug-in, it is the easiest RIA technology to deploy.

It allows a subsection of a screen (or page) to act independently. This helps developers and designers mitigate a big pain point in standard HTML solutions—the full page refresh phenomena. In standard HTML, every time you need to fetch information from the server, the entire page will disappear and redraw, even if only a section needs to change. AJAX gives designers control over both subtle and dramatic changes in the view.

The best example of this is in both Gmail and Yahoo’s new Mail Beta. When you begin typing an address or name, they attempt to auto-complete it, refining your choices as you type. On each keystroke, it is refreshing a query against your address book (and history), presenting you with the total list of matching addresses, all without a page refresh.

Why do you think AJAX has become so popular?

I think the primary reasons for its popularity is that it is all open and is an extension of the same technologies that web developers are using today. There is not a lot new here. It is an extrapolation of existing logic in the current collection of web development languages: HTML, JavaScript, XML, and CSS.

Also, there has been a strong community of eager developers who have seen AJAX-like applications as a holy grail, to add appropriate richness to their applications without having to be tied to anything but a browser—no plug-ins at all.

AJAX as a technology has existed for quite a long time, even dating to the last millennium, when MS IE 4.0 came out. But it wasn’t until 2005 when more and more applications began ignoring browsers that didn’t support AJAX (whether or not they were using it).

The last piece that has come together is the push towards Software-as-a-Service (SAAS) and browser-based applications. People want to subscribe to applications instead of buying a license. AJAX affords the desktop-like behaviors that users desire.

Are the new technologies always the way to go?

Instead of blindly upgrading to RIA applications, development teams need to ask themselves if the technology offers benefits not possible otherwise. For example, are there places where using a different page metaphor would be advantageous for their solution? Are there opportunities to reduce the frequent page refreshes on their projects? If this type of questioning bears fruit, then the development team should consider a new technology such as AJAX.

If the team wants to try their hand with an RIA technology, they can start with “quick wins” like address book suggestions, or search suggest, or single field view/edit (think ratings in NetFlix). Use these quick wins as both technological and design proofs-of-concept to gain support for bigger page-metaphor changing designs later.

What Rich Internet Applications are setting the standard? Are there some that just “get it” and could serve as valuable examples for those trying to learn more about them?

I think Google’s Gmail demonstrates the new page metaphor best. Gmail, as a poster-child AJAX solution, does very well to maintain common web conventions.

Kayak and FareChase (Yahoo) really demonstrate how to manage a complex dataset without making new calls to the server.

With its new redesign, Flickr.com has set a new standard for desktop application design without it looking like a desktop application. I’m really impressed with what this team has done. Menus, inline, and editing are really done well.

To me, the new Yahoo Maps Beta is just spectacular. I prefer it over Google Maps in spirit, but between the two it is a toss-up. Google succeeds in one place where Yahoo doesn’t—simplicity of entry. Yahoo is still too hard to use, while Google still doesn’t have the right output and features. These are a great example of how total experience is important to make a solution truly succeed. There is definitely a middle ground waiting to be designed for.

What are some of the pitfalls that AJAX introduces?

The biggest pitfall of almost all RIAs is accessibility. They often don’t work very well with screen readers and other third party accessibility devices.

RIAs also often work differently from how users expect. Since AJAX-enabled applications are still in the browser, users expect them to act like the traditional HTML-based web applications they’re used to. It’s a real challenge to present old interaction behaviors like drag & drop in a new context.

The favorite criticism of most RIAs by web purists is that it kills the “Back Button.” It is true that the back button does have to be managed, but there are aspects of the browser that “get in the way” of trying to do desktop-like behaviors in a web browser. However, you can succeed at having a pretty rich interaction model and still allow users to use the back button.

How can someone who is tasked with creating a web application choose between the alternatives like AJAX or Flash? Are there situations where one technology is better than the other?

On the consumer-based web AJAX and Flash are pretty interchangeable. I feel pretty comfortable saying that.

When choosing between AJAX and Flash, developers need to think about what kind of experience they want to give their users. If they want to offer users a more cinematic experience, Flash is the best choice. This really has to do with the limitations of JavaScript and well the primary purpose of Flash to make interactive animation pieces.

What sort of skills do successful RIA developers need to have?

Well, they first need to understand design. I suggest they take a studio course for at least a semester. Learning a design discipline will take you further in your design career than any Flash or Photoshop class ever will.

To be successful at any creative endeavor you need to have 3 components: craft, critique, and theory. For an interaction designer’s Craft, they need to know graphic tools, prototyping tools, programming languages, databases, frameworks. For Critique, a designer needs the ability to view and evaluate their design work. For Theory, designers need to understand the principles of HCI, game theory, visual design theory, and general design aesthetics.

You Might Also Like

• Your Necessary First Step to Creating Powerful UX Metrics by Jared M. Spool When an organization's leadership values design, it falls on UX design leaders to show how good design is continuing to deliver that value. And in organizations where the executive leadership…
• The Powerful Ritual of Daily Design Review by Jared M. Spool Even though I expected it, I was stunned when I turned the corner and saw it. Along one wall of the 20-foot-long corridor we’d just entered, there were rows and…