Designing and Building with Ajax
_ Posted after the fact and dated to the correct day_
Ajax Overview
See powerpoint for most content.
Conceive of page content as distinct elements (think e-mail this functionality). Once you construct these components you can add functionality without interrupting the natural progress of user experience with the content.
Because the conventions of click expectation change we need a new visual language to represent this. (Yellow fade, slide down, tab switching, etc.) The most interesting technique is to have content change without the traditional "go" or "submit" button. (live search, Google Suggest, etc.)
Increasing the number of interactive elements allows a user to customize the visual presentation. (zippy table sorting)
Using prefetching, the app pulls down data to anticipate a users choices.
The usual suspects:
* Look at Amazon Diamond picker
* Google password strength checker
* Flickr title editor (front-end editing in general)
* Apple Store Customize Your Mac
Ajax UI Patterns
Spotlighting
The short highlight (see Digg and Basecamp's yellow-fade technique) draws the user's attention to a change and suggests next actions.
Micro-content
Loading small bits of content around central content. This improves application flow and is useful for tooltips, contextual help, contextual functionality (send an e-mail, mark this page, etc.).
See Ajax uploader for an example. Indicate that a call is happening. This removes some of the annoyance of waiting by setting clear expectations within the page interface.
Periodic Refresh
Design challenge is to determine how much to load and how often. Micro-content forces you to design for refresh.
Suggestions
Show a user what they can find. Be smart about this (Apple Spotlight style results grouped by kind)
Autofill
Pre-populate city and state from zip code database, for example.
More in the powerpoint. I am tired of typing...
DNA of Ajax Applications
Understanding the richness of the web. Think about 3d:
- Interaction dimension
- data dimension
- presentation dimension
In the classic web the interaction is course-grained. Data is loaded with the page or via refresh. Presentation is page based. Pure flatness.
Ajax is about just-in-time. Think hover detail on links in Y! news and Google Suggest. This is all about just-in-time data and just-in-time logic.
Ajax allows for deeper interaction. XHR is the secret sauce that makes this possible. All of the dimensions are brought closer together.
So what the heck is Ajax?
Using XHR to retrieve XML. But Ajax is also more than this, it is the set of technologies, XHTML, CSS, and the DOM.
What about other remote techniques?
Back to patterns
What does XHR do? It makes a request, returns a response, and does it asynchronously.
Every Ajax pattern consists of a Trigger, Operation, and update. The trigger is about user events. A direct user event, a timer event, or you could anticipate user goals.
The update changes the interface to reflect what is happening.
Five basic operations define what you do. You can lookup information when you need it, save it in real time, validate errors in real time, invoke a change elsewhere, and message instantly.
Unlimited scrolling avoids generating page views and allows a user to access everything at once.
Most persistent interfaces use save buttons but think about star ratings. you simply click the desired rating and you are done. No save button is needed and the interface is intuitive.
Inline form validation prevents bad data acquisition.
When designing think about using these tools to invite a user to interact and the reinforce their action visually.
Steps to understanding Ajax
* User the patterns
* Know how to perform the operations
* know how to work with triggers
* Know how to update the DOM
* Understand the issues that surround Ajax and how to work around them.
Ajax 101
- create an object
- write a callback
- make the request
- parse the response
Start with the browser detector. Once you have the object with the browser detection they work the same way.
get response will be involved when the ready-state property changes. The same site rule applies. Get or Post and wait for the asynchronous flag.
Use GET for
* retrieve
* REST services
* When passing parameters
* Idempotent URLs
* Small amount of data
Use POST for
* Modification
* Large amounts of data passed to server
* Non-idempotent URLs
GET is just a normal http request. POST
* Rails: @request.raw_post
* PHP: $data (check this)
readystate
* 0 uninitialized
* 1 Loading
* 2 Loaded
* 3 Interactive
* 4 completed
formating the xml response.
make the xml version the first line. set up response header's content-type to text/xml. use well-formed XML.
You can use JSON to create objects in string literals. This can be sent as a response to create a native object of server data. This eliminates the need for parsing the XML. With JSON you simply obtain response text and eval ('(' + jsontest + ')');
0 TrackBacks
Listed below are links to blogs that reference this entry: Designing and Building with Ajax.
TrackBack URL for this entry: http://www.samfelder.com/mt/mt-tb.cgi/179
Who is this guy?
Leave a comment