Ajax Intervention: Safari Books Online (Bah! Humbug!)

Brian Dillard, Wednesday, December 26, 2007 @ 5:50 pm

Welcome to Ajax Intervention, in which we dissect how major websites misuse, or fail to use, Ajax to improve their user experience.

Up this time: Safari Books Online, a great programming resource that's hampered by poor usability and underbaked Ajax navigation.

Safari Books Online makes perfect financial sense for developers, their bosses, and top-tier tech publisher O'Reilly itself. For a modest per-seat subscription fee, developers and the companies they work for get access to a vast library of programming resources that never becomes outdated. O'Reilly and its partners, meanwhile, get a predictable revenue stream with practically zero incremental delivery cost. Everybody wins ... except for users who expect an interface that makes online books as intuitive as physical ones.

The biggest problem with the Safari Bookshelf interface is that it doesn't allow readers to really immerse themselves inside a single book. UI elements and navigational controls are static; no preferences can be set to turn them on or off. Certain large sections of the UI offer "hide" and "show" controls, but these are too coarse-grained to be effective. Overall, there are simply too many boilerplate interface elements distracting users from the content itself.

The top navbar, for instance, wastes a lot of prime screen space; important links to "My Bookshelf" and "My Account" are buried among tertiary links ("About Safari") and white space. Global navigation in an immersive reading application should collapse to essential controls and a small footprint.

The wasted real estate continues with the navigational sidebar, which again mixes important tools - a search form and the current book's table of contents - with useless distractions, such as a menu for browsing the entire site by topic. If users are immersed in a specific book, they're unlikely to need to jump directly into browsing the publisher's catalog. If they did, a simple "browse" link would allow them to jump to a full-fledged browsing interface on a separate page. As for the search form, its default setting is to search all of Safari online. A radio button does allow a targeted search of the current book, but why isn't this the default?

The bottom of the screen presents another problematic widget. The "Additional Reading" module uses O'Reilly's relevancy algorithm to link up related sections of other books in the database. This tool can be incredibly useful, but why load it by default with every page? It would save bandwidth and screen real estate to include a simple link in the top navigation that loads this content asynchronously on demand.

None of these interface problems would be quite as annoying if the application itself were more responsive. Within the main content pane itself, for instance, users can navigate through the book using "previous" and "next" links. These controls load content asynchronously, but there's a noticeable lag and no "loading" indicator to signal users that an Ajax call is in progress. Smart content prefetching would allow this interface to seem instantaneous.

The table of contents in the left nav presents additional problems. Again, it fetches content with Ajax. But each time it does so, it scrolls the window back up to the top of the content pane, even if the top of the content pane was already in the viewport. The result is an Ajax call that takes the user out of the reading experience and feels like a full page refresh. A little bit of careful viewport calculation would often make these transitions unnecessary.

The unsatisfying UI details continue with the table of contents itself. Familiar triangle icons allow the user to collapse and expand individual chapters and thereby view subheadings underneath them. The problem is that each triangle icon also loads the related content in the reading pane. A user who is in the middle of Chapter III and wants to peek at the detailed table of contents for Chapter II will, in the process, lose her place in Chapter III. This UI quirk flies in the face of expected data-grid functionality.

It's easy to lose your place in a Safari online book, but what about saving your place? Users can digitally dog-ear pages of interest by clicking the "Add Bookmark" link. But users cannot easily return to bookmarked pages. To do so, they must first navigate away from the book-reading interface by clicking the "My Safari" link in the global navigation and waiting for a complete page refresh. Then, they must scroll down to the "My Bookmarks" section, where bookmarks from all books are interspersed. The effect is a little like sticking a bookmark in a physical book, then having to walk to the library and look the book up in the card catalog before you can reread the bookmarked page. Even the list of bookmarks itself is subtly wrong; a useless link to the book's homepage is inexplicably emphasized with a bold font, while the more useful link to the bookmarked content itself is de-emphasized.

Page Zoom is another feature that's more exasperating than powerful. The beauty of digital delivery is that all books can become large-print editions with the click of a button. But the Safari interface wastes this potential by allowing users to zoom up only two levels from the default. Modern browsers, of course, offer much better built-in font-sizing controls. But using these on Safari Bookshelf breaks the overall page layout. An em-based CSS architecture would work much better for an application where readability is key.

All of these criticisms focus on existing features that are subtly less useful than they could be. There's a whole separate realm of features that would be useful but haven't been implemented yet at all. Imagine an interface that integrated with Google Notebook to allow users to "clip" relevant passages from books they've accessed. The effect here would be analogous to highlighting your favorite pages in a physical book. Licensing agreements might forbid this kind of functionality, but maybe O'Reilly could roll its own equivalent in a way that didn't encourage copyright infringement.

Like a lot of web applications, Safari Bookshelf is good enough. It offers tremendous choice, value and convenience at a relatively low price. Imagine how much cooler it would be, though, if its UI engineers aimed higher.

Technorati Tags

• user experience design
• JavaScript
• Ajax

agile ajax

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment