Skip to content

Bookmark Visualization

February 25, 2009

http://vimeo.com/moogaloop.swf?clip_id=2268285&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1
Bookmarks Slide View from Neil Marshall.

This is a video of a UI I helped create for the never released (out of Beta) AT&T web browser. It’s built in a version of Firefox which embedded the Ogre 3D engine. Our company created a simple API to interact with the 3D engine so that we could create scenes using JavaScript. I was asked to improve the usability of the bookmarks, while still utilizing our 3D technology and this is what I came up with. Previously we had a series of folders in a circle which you would scroll through and then the camera would drop down and display 8 bookmarks on the screen. From there you had next and back buttons to look at another 8 bookmarks. It worked, but it was a really clunky interface which required at least 4 clicks to get to your bookmarked site.

By laying out all of the bookmarks in a grid like fashion it made it easy to quickly scan every folder for the site you were looking for and it only took one click to load the bookmark.  We got around the “multiple clicks” issue by having extra information, like the properties button or title show up only when you hovered over the screenshot.  This worked really well to reduce the amount of UI which was constantly on the screen.

We also came up with a couple other handy features.  We limited where the user could scroll to to the bounding box of the bookmarks.  This reduced the chances of them getting lost in all the data.  If you did happen to get lost, you could use your mouse wheel to scroll out to get more of a birds eye view at any time.  One idea which we never had time to implement was to take a page out of RTS computer games and display a small map in the corner which the user could click on and it would move the screen.

The bounding box made it really easy to scroll along the top of the box, and effectively created 3 more zones which could also be scrolled easily. We used the left side of the bounding box as an oppertunity to display all of the users bookmarks a second time, but this time in alphabetical order. Then depending how the user typically finds a bookmark, they had two choices and both were available at the same time.

We had a couple goals which we never solved before the project was canceled and the company shut down. The biggest one was the ability to show sub folders. As it was we could only really show one level of folders. We wanted to try layering them in the Z-dimension, but ran out of time.

The other issue was management wanted to still show off the fact that we were using 3D.  The best we could come up with was to place the 2D grid on a sin wave or something to add depth to the Z dimension.  We tried using some shaders such as Depth of Field to blur anything in the background, but being a mostly horizontal view the effect was minimal. We just couldn’t come up with a cool looking effect which didn’t affect usability or initiate headaches.

Overall it was a fairly successful project and it would have been interesting to see it used in the wild. Perhaps the ideas used here will live on in some other projects.

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: