Ajax Functionality and Usability Patterns – Podcast 2 of 4: Ajax Page Architecture

This is the second in the four-part series on Ajax functionality and usability patterns (Book: Part 4, pp 327-530).

The guest for this week is Dave Johnson of Nitobi (the Ajax component developers formerly known as E-Business Applications), widget guru and author of the upcoming Enterprise Ajax book. Dave helps me walk through the patterns and offers plenty of great insights along the way. We mention Dave’s recent presentation a couple of times; here’s the PDF.

This 54-minute podcast covers ten patterns of Ajax Architecture (Book: Chapter 15, pp 389-444):

Ajax Functionality and Usability Patterns – Podcast 1 of 4: Widgets of the Web

And so, a new series begins, based on the Ajax functionality and usability patterns (Book: Part 4, pp 327-530). We’ve already looked at the technical details, now we’re looking at what Ajax can do for users and how to implement these features.

I’m asking guests to join me for most of the remaining Ajax Pattern podcasts. Seeing patterns from someone else’s perspsective will make the discussion richer and hopefully cover more questions you might have as you’re listening to the podcast. The guest for this week is Andre Charland of E-Business Applications, widget guru and author of the upcoming Enterprise Ajax book.

This 83-minute podcast covers nine patterns of Ajax widgets:

Full-Text for Widgets

The other day, I noted the Ajax Patterns widgets have been broken down into content, form, and page architecture. The patterns for those are now complete. Give me yellow! Yellow is the colour for full-text descriptions, and the bottom of the page is starting to look a nice shade of yellow.

There are full summaries for each pattern on the homepage too. So the upshot is there’s a description for each of these:

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 Introduce “Portlets” – 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.
  • Query-Report Table Report on some data in a table, and support common querying functions.
  • 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.

Ajax Patterns: Widgets broken down

For a long time, the Ajax Patterns had a big section of widgets, about 15 in all. This week, I’ve been working on full-text versions and they’ll be finished on the weekend. Writing the low-level details helped crystallise some of the relationships for me, and I’ve been able to break those widgets into three groups, which makes a bit more sense now.

So now the structure is this:

  • Content Widgets
  • Form Widgets
  • Page Architecture, which will be renamed, it sounds too grandiose and overarching at the moment, whereas it’s really just more patterns at the same level as above.

Here’s what they contain – see the ajaxpatterns homepage for up-to-date info. (Excuse the cut-and-paste job).

Content Widgets

  • Drilldown See http://betfair.com sidebar.
  • Microcontent Compose the page of “Microcontent” blocks – small chunks of content that can be edited in-page.
  • MicrolinkProvide 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 Introduce “Portlets” – isolated blocks of content with independent conversational state.
[]

Form Widgets

[]

Page Architecture