Wednesday, July 18th, 2007
Versionate is a new online document collaboration product that uses ajax heavily for the core UI. The user experience was designed to be as fluid as possible. Once you sign in, all the interactions stay on one page. Instead of page reloads, each document or wiki page is opened in a new tab inside the application.
We asked David Zhao to elaborate on his experience developing the application with Ajax techniques:
During the UI design of Versionate, we realized that most of the activity on a Wiki is information seeking. People contribute content, but content discovery far outweighs content contribution. With that in mind, we focused on making content discovery easy.
We have taken a risk from traditional web sites, and added tabs into the application. Every document that you open in Versionate has its own tab, that makes it simple to go back and forth pages without waiting for slow refreshes, or going back in browsing history for the branching point.
You may wonder why add additional tabs when the browser already provides them. First, browser tab usage is low among the non-
technical users; from usability experiments we have observed users opening up new windows or relying on the back button as their main way of navigation, even when browser has capability for tabs. Even for technical users, browser tabs loses efficiency when multiple pages from the same site are opened. Since the tabs have limited display width, it is difficult to distinguish when the visible portion of the tab title are the same. The situation is worsened when tabs from the same site is mixed in with tabs from other sites.
With Ajax, we are able to implement internal tabs so that it behaves pretty much like real tabs. Content within tabs are independent from each other, and you could even drag and drop tabs to reorder them. As a result of that, common page components(navigation, boilerplate text) are only loaded once for the application. It also allows the user to quickly locate any open page on Versionate.
This especially improves usability for the search page. It is much easier to open multiple search results and view the content of them side by side.
We also utilized ajax for the browse widget. It has the responsiveness of a normal application. Since we are rendering a
small section of the browse widget at a time, it is able to have response times in the 100ms range.
Posted by Dion Almaer at 5:44 am