Apple recently launched a nifty DHTML comparison grid to help customers find the best Mac for them. The comparison grid features drag-n-drop capability, so that you can compare items you might be thinking about side by side, as depicted below:
Let’s take things up a notch, using some comparison features Ai has implemented for our clients.
The first thing to deal with is the large amount of text describing the product specs. While detailed specs are great, quick scannability suffers with the way Apple has implemented them. In order to make things more scannable, Ai would:
- Move to a model where the spec definition is listed in the lefthand column, and checkmarks are used to indicate whether a specific model (column) has the spec or not.
- Show more detailed information about a spec using DHTML expand/collapse widgets.
This quick addition of progressive disclosure of detailed information in the grid enables quick scanning of specs while still allowing users to get detailed information if they so desire. Check out the videos below to see how Ai implemented just this approach two different ways for Bizfilings:
Next, let’s take Apple’s concept of DHTML drag-n-drop one step further. Several years ago, Ai implemented a sophisticated course comparison grid for Kaplan Test Prep & Admissions. This grid allowed the user to drag-n-drop to reorder, and also to add/remove items from the comparison grid. Check it out here:
One thing we could change now – the x’s to remove items from the grid can be presented on mouseover, eliminating some visual cruft.
Voila! Apple’s Mac comparison grid, Ai’ified.