Graphical User Interfaces: 2D, 3D, and Web3D
by Larry Rosenthal, cube productions inc.
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.
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.
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:
3D Design Elements Adds to 2D Elements:
Modifying Elements: Each can exist
as "animation" in 2D.
The Principles of Design Order For
Both 2D and 3D:
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
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?