CN21 - Keeping the Web in Web 2.0: Designing User Interaction for Web Applications

Steffen Meschkat, Google Inc.
Josh Mittleman, Google Inc.

We observe a key difference between the interaction paradigms of web applications and traditional, desktop applications: the universal and uniform presence of history and bookmarks. We explain the AJAX architecture for web applications and how it provides the interactive quality of desktop applications, but also how effective use of browser history and bookmarks, which comes (almost) for free in classical web applications, has to be built explicitly into AJAX applications. In order to accomplish this more systematically and hence more robustly, we develop a principled understanding of the structure of user interaction state and its different relationships with history and bookmarking in web applications.

In part I we use the user interface of complete web applications such as Google Maps, Spreadsheets, and Gmail, as illustrations for a taxonomy of application state; and discuss the semantics, consequences, and adequate uses of each type of state. The discussion centers on concepts that underlie software design, but includes no actual code. In part II we use simple coding examples to further illustrate the principles derived in part I, introducing and discussing Javascript and DHTML language and library features as we encounter them.

Participants will be equipped with conceptual tools to effectively and systematically design modern web applications combining the usability advantages of desktop applications with those of web applications; and with technical understanding of the building blocks and capabilities of AJAX applications to guide learning to apply these technologies.

This course was first presented at CHI 2007 as an activity of the CHI Engineering SIG.

The course has two parts: I. An Analysis of User Interaction State in Web Applications; II. Building Interaction State in Ajax Applications. Main topics:

  • Systematic analysis of application state and its relationship to browser history and bookmarking.
  • Introduction to the Javascript programming language.
  • DHTML: HTML Document Object Model (DOM) and event handling.
  • A brief perspective on advanced topics: background server communication with AJAX, treating bookmarks as continuations, adequate modeling of transactions, application state in "mashups".

Note: This course will not attempt to provide a complete tutorial on designing web applications; we focus on the particuloar problem of understanding and managing user interaction state. Intended Audience: Part I requires a general understanding of web applications. Part II is more technical: participants should have a working knowledge of at least one modern programming language, and should be familiar with the concepts of HTML, HTTP, and CGI programming. We welcome attendees at part I only, but we recommend against attending part II without part I.

Lectures with live demonstrations. Participants will not need a laptop.

Instructors' Background:
Steffen Meschkat joined Google in 2004 and currently works on maps. He earlier co-founded ART+COM AG and datango AG; where he worked on virtual reality and the WWW. He has an MSc ("Diplom") in Physics from Humboldt University in Berlin. Josh Mittleman has MS in Computer Science from Rutgers University; and worked in 3D graphics at IBM T. J. Watson Research Center from 1990 to 2002. He joined Google in 2005 and is a Senior UI Software Engineer, working on interactive search results.

Web site: