Ajax design terminology
~ 25 October 2006 ~
JARGON ALERT: UI = user interface; GUI = graphical user interface, or the older brother of the younger, more attractive “UI”. (The tech-savvy girlfriend who flirts with UI is “UX”, wherein X = experience.)
It’s safe to say nearly all of you, whether aware of it or not, have been exposed to Ajax implementation on the web. Gmail, Yahoo, and plenty of other high-traffic sites have been using it to enhance interfaces, some even for a couple years now. A fair share of you have have developed sites and apps that employ Ajax, and those who haven’t will probably do so within the next 6-12 months.
The point of this article is to associate traditional GUI terminology with desktop-like web UI interaction. Credit for this terminology must be given to the following, both of which are fabulous resources:
- Designing Interfaces by Jenifer Tidwell
- “First Principles of Interaction Design” by Bruce Tognazzini
The UI grows dynamically as additional elements are requested by the user.
Responsive disclosure is the act of “disclosing”, or showing, additional interface elements on demand. Only what’s necessary is displayed until further options are requested by the user. No unnecessary page changes occur, and therefore workflow isn’t interrupted. However, take note that this technique “is less successful when used to radically change a preexisting UI,” as Jenifer Tidwell explains, “instead of adding UI controls to a blank space.”
Elements “snap” into place when moved about the interface.
Nearly all of you are familiar with this feature, often referred to as snapping in programs such as Photoshop or Illustrator. Magnetism “helps compensate for users’ lack of perfect dexterity with a mouse” (Tidwell) by forcing elements to position in place without requiring precise input by the user. Magnetism essentially increases the target area, thereby making the app feel more responsive.
Multiple views of the same data, simultaneously.
Data brushing is fairly straightforward: Present the same data simultaneously in two or more formats. This is common in mapping applications such as Google Maps but can also be used to dynamically present expanded data.
Visual status cues are provided, or multi-tasking is enabled, while actions are computed.
Latency, “a time delay between the moment something is initiated, and the moment its first effect begins” (Wikipedia), has challenged interface designers since the early days of software development. Latency reduction means to reduce the user’s visual perception of latency by 1) providing visual cues such as spinners, progress indicators, and potential length of wait, or 2) “hiding” latency by allowing the user to do other tasks while actions are computed in the background. The DropSend example below is notable in that it does both — it provides a progress indicator, while also allowing the user to do other tasks while the file is being sent.
There, that wasn’t so bad, was it? Now that you’ve got the terminology down, put it to use with a few tutorials and how-tos: Ajax tutorials at DHTML Site.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Wornamental, Thornamental
- AJAX design terminology
- UI design sessions (and help decide where)
- The witty works of Hanoch Piven
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.