Graphical User Interfaces: 2D, 3D, and Web3D
by Larry Rosenthal, cube productions inc.

The principles of 2D and 3D interfaces and communications:
Web3D developers/designers should become familiar with the differences and similarities of 2D and 3D interfaces and communications. The basis of any "interface" as defined here, is to let the user communicate with the computer as transparently as possible in order to let the content be the message, not the effort involved in using the medium or tools. "Interface" is that layer between the user and the tool or task to be accomplished. The "visual interface " being discussed here can be considered the device to tell the "story of how to work this thing" with "this thing" being the screen based information presented on the computer. A 2D GUI conveys this information very effectively as the successful and growing 2D HTML www demonstrates but the 3D interface offers new elements and communications that effect the experience of the user differently and in ways that a 2D interface cannot.

For developers and designers to discuss the relative values of a 2D or 3D interface, a definition of basic design principles and elements must first be established. These Basic Design elements and principles have developed not over the last "digital" decades, but over the entire time of the existence of humans. They exist as a part of our "human condition" and because of this, they effect and control the "implementation" of any interface or communication, either 2D or 3D.

The Elements and Principles of design are complex and much has been written about them, for the purposes of this article, I provide the following (incomplete) list and brief descriptions so that the thoughts of how it relates to the difference between 2D and 3D and the benefits of each can be examined. I suggest that all Web3D developers and designers begin to learn more about these issues as they truly are the basis of successful 3D or 2D interface.

The Basic 2D Design Elements:

• Line
• Color
• Shape
• Direction

3D Design Elements Adds to 2D Elements:

• Form
• Texture

Modifying Elements: Each can exist as "animation" in 2D.

• Time
• Movement
• Audio

The Principles of Design Order For Both 2D and 3D:

• Dominance
• Subdominance
• Recessiveness
• Scale
• Position

2D is great, why do we need 3D on the web.? What 2D Interface and Communications do well:
The 2D HTML Interface and communication of today is primarily a product of text and image, although audio and animation are becoming more prevalent, the majority of the WWW is text and image. An effective 2D interface and communication is usually created by the balance and interaction of these elements and according to the principles of design above. These 2D design principles can create very effective interfaces and communications. Some of the most effective uses for 2D communications are:

1. Charts and Diagrams

2. Text

3. High Resolution imaging-photography

Why are these types of information ideal for 2D communications? Because Analytical examinations are the best candidates for a 2D interface. Actions and Interactions that require thought and rational logic to be carried out seem to be well suited for the "focused" interface that the 2D offers. With no "world" to distract the interaction, the message in a flat 2D interface can be studied, examined and acted on. 2D interfaces can only offer a limited amount of information per "page or window" this is its strength as an "intellectual" type of interface experience.

Simplifying information in graphic 2D:
2D interfaces and communications are ideal to simplify and can "cartoon" visual information for easy comprehension by the user. This is why text and charts are so effective in 2D representations. Both only require clear line and shape to usually get their message across. If a developer's or designer's goal is to provide an interface that quickly "speaks" organizational image to a user than 2D interfaces contain all the elements to creates successful solutions. The same can be said for "immediate call to action" type interfaces

In the real world, the traffic "STOP" Sign can be used as a good example of this type of effective 2D interface since the text, and shape and color create an "instantly recognized call to interaction" with the understanding user. Successful 2D interfaces on the computer utilize the same principles and the "caution, stop or bomb" icon message windows on a computer interface can best communicate their meanings the same way.

Photography simulating 3D reality:
High resolution screens led to the ability to use high-resolution photography as an interface element. Photography as well as video or moving image can often be confused for the "3D" that an interface can be. Photography can capture detail and representation to such a high degree that as a 2D interface element it can offer such "depth of simulation" that, to many, a photograph of a street scene is more "real" on the screen than a 3D modeled navigational model. The detail of this 2D-interface element can be though its major problem in conveying the designer’s real intentions.

What if the street scene presented on a kiosk is meant to be a map to show walking directions between the buildings in a mall? Then the photographic details of the actual floor tile patterns of each buildings lobby may have no importance to the users main question posed to the kiosks interface: “Is my building to the left or right of where I’m standing?”. Photographic images and moving video can now look great on a high-resolution computer screen- they both offer an ability to simulate a 3D world within the 2D flat desktop metaphor. When aided by audio and movement, they offer many of the elements that 3D look to offer.

So the next questions that have to be asked are what does 3D really add to an interface?

next page

Table of Contents:

• The Last Decade's Battle
• The Principles of 2D and 3D Interfaces and Communications
• What 3D Interface and Communications Add
• Conclusion

(C) 2001 cube3 productions

Previous Features
* Interactive Web Graphics with Shout3D Book
* Web3D 2001 Coverage
* Core Web3D Book
* Spazz3D: Authoring-tool
* Game Programming in VRML
* State of the Industry
* The X3D Initiative (2000)
* Alphabet Soup: Our glossary of technical acronyms