3D Interfaces for the Web
Three dimensional interfaces have been around for many years, but have only started to catch on in the mainstream recently. With the development of programmatic tools such as Papervision 3D, developers and engineers are able to use three dimensions for aesthetic purposes. However aesthetic purposes for using 3D are only the stepping stone to encourage users into using fully interactive 3D enabled interfaces and environments.
Recently there have been many impressive web sites created with Papervision 3D. Some of these sites are not only used for 3D aesthetic purposes but also used as interactive pieces. One such site is: Absolut’s, “In An Absolut World” http://www.absolut.com/iaaw/. This site features interactive 3D cubes that may be stacked on top of each other to form different shapes. They may be grabbed with the mouse and thrown around on screen. They may be rotated and spun in different directions, where the speed changes depending on the speed at which the users’ mouse moves. It is a impressive site to play with, however it does have its pitfalls. One of its pitfalls is the camera movement and viewpoint. When looking around the site the camera follows the movements of the mouse which makes the user experience less enjoyable. It feels and seems somewhat awkward and annoying when you want to look at the cubes at a certain angle but you simply can’t, the camera moves and changes the view.
However, a 3D web interface which has excellent camera control is, “The Eco Zoo” http://ecodazoo.com/. The user may control the camera by grabbing inside the viewport and moving the mouse in any direction which in turn allows the camera great flexibility in its movements. Not only does this site have excellent camera control but the interface is very robust, it incorporates both 2D and 3D navigation formats. The main navigation is a cardboard 3D tree with characters making their home on or in it which may be interacted with or they may be selected via a 2D menu at the top of the screen. The interface was created very intuitively and makes navigation to the characters’ specific pop-up books very simple. “The Eco Zoo” is not only an excellent example of a 3D web interface, but is also educational and it handles some current problems with these types of interfaces very effectively.
Current problems with 3D interfaces deter users away from them for the following reasons: They don’t really use the third dimension in a way that is useful or convenient, computer resources demand is high, and displaying large amounts of data may become overwhelming. These may seem like significant problems with 3D interfaces but they may be worked out solved effectively. One site which has worked out a way to display large amounts of information in an intuitive 3D web interface is MSNBC’s “Spectra visual newsreader” http://www.msnbc.msn.com/id/24207533/. “Spectra” has been able to effectively meld a 2D web interface with a 3D web interface to make it much more useful, entertaining and aesthetically pleasing experience to the user.
In order to make 3D interfaces more useful and convenient we first need to develop simple applications and interactive environments which are intuitive to users. Despite everything we can do today with 3D interfaces we are more than likely able to accomplish the same things with 2D interfaces. However the 3D interfaces are much more entertaining and engaging to users. Such is the case with the White Voids web site: http://www.whitevoid.com/application. White Void could have created their site in a 2D space but decided to go 3D because of the spacial and aesthetic value 3D offered. Use of a 3D interface for their site made the user experience exponentially more enjoyable. It also separated them from the norm and made them nationally recognized and known through out the design world for creating one of the best 3D web interfaces.
However, many people are accustomed to a 2D desktop because that is what we see and use on a day to day basis. We place items on our desks and remember where they are using spatial memory. When we do this in a third dimension we also do the same thing, in both ways we are using spatial memory. Both 2D and 3D interfaces require certain amounts of persistence in that when you put something down you expect it to remain there till you get back to it. Persistence will also be required of the user; the user will need to be patient in order to develop efficient usage patterns, the interfaces themselves will need to entertain in order to maintain the user’s interest.
3D interfaces are mainly used for entertainment purposes such as video games or for presenting data which is naturally three dimensional, (CAD, Architecture, etc.) However we are slowly creating 3D web interfaces which are not only aesthetically pleasing and intuitive but are useful 3D web interfaces. Creating a third dimension on the web maintains a user’s interest, provides entertainment value and creates an intuitive experience. When a user picks up a wrench to tighten a bolt with the mouse or interacts with 3D folders in a tree structure they are becoming more accustomed to interacting with a 3D environment. Intuitive interactive 3D environments will pave the path for 3D interfaces. The more we expose ourselves to 3D elements on the web the easier it will be to implement 3D interfaces in an intuitive, entertaining and useful application. The World Wide Web is going in the direction of 3D web interfaces and we may only hope to take steps in the right direction to ensure its success.
Greg Peczkowicz
Greg is an Interface Engineer at StudioNorth. He designs and develops highly complex and usable Web applications for all ranges of StudioNorth’s clientèle. When Greg isn’t programming ActionScript or creating smooth exponentially eased tweens you can find him snowboarding in Wisconsin or kayaking on the Des Plaines river.
About this entry
You’re currently reading “3D Interfaces for the Web,” an entry on StudioNorth Interactive
- Published:
- 8.31.08 / 3pm
- Category:
- 3D, Breakthrough, Interfaces, Technology, Trends
- Tags:
- 3D, Interfaces, Papervision 3D

2 Comments
Jump to comment form | comments rss [?] | trackback uri [?]