Ajax design and functionality patterns

April 16, 2010

Content Widgets

  • Drilldown To let the user locate an item within a hierarchy, provide a dynamic drilldown.
  • Microcontent Compose the page of “Microcontent” blocks – small chunks of content that can be edited in-page.
  • Microlink Provide Microlinks that open up new content on the existing page rather than loading a new page.
  • Popup Support quick tasks and lookups with transient Popups, blocks of content that appear “in front of” the standard content.
  • Portlet Isolated blocks of content with independent conversational state.

Form Widgets

  • Live Command-Line In command-line interfaces, monitor the command being composed and dynamically modifying the interface to support the interaction.
  • Live Form Validate and modify a form throughout the entire interaction, instead of waiting for an explicit submission.
  • Live Search As the user refines their search query, continuously show all valid results.
  • Data Grid Report on some data in a rich table, and support common querying functions.
  • Progress Indicator Hint that processing is occurring.
  • Rich Text Editor e.g. http://dojotoolkit.org/docs/rich_text.html
  • Slider Provide a Slider to let the user choose a value within a range.
  • Suggestion Suggest words or phrases which are likely to complete what the user’s typing.

Page Architecture

  • Drag-And-Drop Provide a drag-and-drop mechanism to let users directly rearrange elements around the page.
  • Sprite Augment the display with “sprites”: small, flexible, blocks of content.
  • Status Area Include a read-only status area to report on current and past activity.
  • Virtual Workspace Provide a browser-side view into a server-side workspace, allowing users to navigate the entire workspace as if it were held locally.

Visual Effects

  • One-Second Spotlight When a page element undergoes a value change or some other significant event, dynamically manipulate its brightness for a second or so.Responded
  • One-Second Mutation When a page element undergoes a value change or some other significant event, dynamically mutate its shape for a second or so.
  • One-Second Motion Incrementally move an element from point-to-point, or temporarily displace it, to communicate an event has occurred.
  • Blinkieblinkpattern When an element is blinking
  • Highlight Highlight elements by rendering them in a consistent, attention-grabbing, format.


  • Lazy Registration Accumulate bits of information about the user as they interact, with formal registration occurring later on.
  • Direct Login Authenticate the user with an XMLHttpRequest Call instead of form-based submission, hashing in the browser for improved security.
  • Host-Proof Hosting Server-side data is stored in encrypted form for increased security, with the browser decrypting it on the fly.
  • Timeout Implement a timeout mechanism to track which clients are currently active.
  • Heartbeat Have the browser periodically upload heartbeat messages to indicate the application is still loaded in the browser and the user is still active.
  • Autosave Autosave un-validated forms to a staging table on the server to avoid users losing their work when their session expires if they get called away from their desk while filling out a long form.
  • Unique URLs Use a URL-based scheme or write distinct URLs whenever the input will cause a fresh new browser state, one that does not depend on previous interaction.

From Ajaxpatterns.org Some of the items/links in the original source have been removed, this is the list as copied on April 14, 2010


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s