$2231»?

5%

‘1};

‘1

l

»

 

UL!» ‘

3

u i.
3113‘- ’
2‘72 . I ‘
‘F

3'1"”

,, ~m

V m
“w

This is to certify that the
thesis entitled

30 INTERACTIVITY VS. 20 INTERACTIVITY:
USING 3D TECHNOLOGY FOR WEB NAVIGATION

presented by
JESSE PAGE

has been accepted towards fulfillment
of the requirements for the

Master of degree in Telecommunication,
Arts Information Studies and Media

Major Professor’s Signature

X—Qé‘oy

Date

 

MSU is an Afiinnative Action/Equal Opportunity Institution

 

 

LIBRARY
Michigan State
University

 

 

 

PLACE IN RETURN Box to remove this checkout from your record.
To AVOID FINES return on or before date due.
MAY BE RECALLED with earlier due date if requested.

 

DATE DUE DATE DUE DATE DUE

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6/01 c-JCIRC/DateDue.p65-p.15

 

3D INTEIxtACTIVI’I‘Y VS. 2D INTERACTIVIIW’:
I‘SINU 31) TECHNOLOGY I‘OR WEB NAVIGAI‘ION

By

Jesse Page

A THESIS
Submitted to
Michigan State University
in partial fulfillment ofthe requirements
for the degree ol‘
i\I.-\S'I"I-Z R OF ARTS

Department of I'eleeomnumieution. lnlbrmutiun Studies. LIIILI Media

Zuu4

ABSTACT

3D INTERACTIVITY VS. 2D INTERACTIVITY:
IISING 3D TECHNOLOGY FOR WEB NAVIGATION

By

1

Jesse Page

To date. most web sites that have utilized 3D technology have been purely
exploratory. That is. the user only has the capability to navigate around the environment
without point and click capabilities. Like flash. the interest level pertaining to 3D
technology and its use in web development has dwindled amongst users. There is a
craving for more interactive 3D interfaces that allow for point and click interactivity.
Can 3D technology be used as a functional. efficient component in interface design for
the web C’

The objective of my thesis was this: to create a functional. efficient website that
utilized 3D technology for navigation and to display content. and then test its
functionality and practicality by subjecting it to user testing. Ultimately. this testing
helped to give an indication as to whether 3D technology would be a viable alternative to

2D technology in the production and development of web sites.

Copyright by
Jesse Richard Page
2004

DEDICATION

To my mother and father, Ron & Joanne Page, for supporting me through all of my
academic endeavors.

iv

ACNOWLEDGEMENTS

Again, I would like to thank my mother and father for all of support, both
financially and mentally. Without their help, I would have never realized my academic
potential, and I would have never accumulated so many years worth of great memories
from attending college. They are, and will always be, the two people I respect most.

I would like to thank Brian Winn for being my primary advisor for this
production, and Carrie Heeter and Dr. Tom Muth for being my second and third advisors.
Without all of their guidance and help, along with the many courses I have taken under
their tutelage, it would have been very difficult to do any of this.

Finally, I would like to thank Matt Larson for sending me images that helped with
the design aspect of this production and Zoo Chae for letting me use his office. When I
was looking for a place to conduct subject testing, he was one of the first persons I turned

to. Hopefully I did not leave it in too big of a mess.

TABLE OF CONENTS

LIST OF TABLES ........................................................................... viii
LIST OF FIGURES ......................................................................... ix
INRODUCTION ............................................................................ 1
OVERVIEW ................. '. ................................................................ 3
Applications Considered for Development .................................................. 3

Adobe Atmosphere ........................................................ 3

3D State Webmaker ....................................................... 5

3D Studio Max + Macromedia Director ................................ 7

Choosing the 2D commercial Website .......................................... 9
MLive.com ................................................................. 1 1

. Green & Whitecom ...................................................... 12

Deciding on a Theme ............................................................... l3
PRODUCTION .............................................................................. 17
Designing with 3D Studio Max ................................................... 17
Organization of the Scene ................................................ 18

Main Room ........................................................ 19

Locker Rooms ..................................................... 26

Other Helpers and Objects ................................................ 35

Lighting the Scene ......................................................... 36

Thinking of Low-Poly ..................................................... 37

Texture Creation ........................................................... 38

Camera and “Dummy” Placement ....................................... 40
Implementation with Director ..................................................... 42
Displaying Articles and Content ......................................... 42

Designing the Web Interface and Overlay .............................. 43

Camera / Dummy Movement ............................................. 46

Collision Detection ........................................................ 47

Triggering Roll-over Effects ............................................. 49

Article Swaps ............................................................... 51

The Photo Slideshows ..................................................... 52

Implementing the Back and Forward Buttons ......................... 53

Performance Optimization ................................................ 54

Publishing the Movie ...................................................... 55

vi

SUBJECT TESTING ........................................................................ 57

Identifying the Subject Population ................................................ 57
Justifying the Sample Size ................................................ 57

Criteria for the Inclusion of Subjects .................................... 58

Criteria for the Exclusion of Subjects ................................... 59

Recruiting Subjects ................................................................. 59
Overview of Subject Testing Sessions ........................................... 60
Subject Identification ............................................................... 61
Exploratory Stage ................................................................... 62

2D Interface: Interaction Analysis and Comments .................. . . 63

3D Interface: Interaction Analysis and Comments ................... 67

Task Performance Stage ............................................................ 77
Parallel Tasks ............................................................... 77

Non-parallel Tasks ......................................................... 9O

Post-notes and Analysis from the Task Performance Stage... .. 92

Interview Stage ..................................................................... 93
Post-notes and Analysis from the Interview Stage .................... 107
CONCLUSIONS ............................................................................ 108
REFERENCES .............................................................................. 112

vii

LIST OF TABLES

Table 1 A listing of the subject number, alias used, age, gender and major .......... 62

Table 2 Summary of responses to demographic questions................................ 94

viii

Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6
Figure 7
Figure 8
Figure 9
Figure 10
Figure 11
Figure 12
Figure 13
Figure 14
Figure 15
Figure 16
Figure 17

Figure 18

LIST OF FIGURES

An example cathedral scene designed with Adobe Atmosphere .......
A screen capture of a fireplace scene designed with 3D Webmaker...
NPD Online Survey of plug-in penetration — March 2004 ..............
The MSU Men’s Basketball locker room .................................

A close-up of a MSU Men’s Basketball locker stall .....................
The main navigation bar from Green & White.com .....................

The main headline section from the Green & White.com home page

The columnist section from the Green & White.com home page. .

The calendar graphic from the Green & White.com home page .......
The “information board” designed for the main room ...................
The “contact us” computer station designed for the main room. . .
The “sponsors” bulletin board designed for the main room .............
Wall within the main room where flags were placed .....................
Smooth, textured view of the main room from the 3D scene ...........
Wire-frame view of the main room from the 3D scene ..................
Wire-frame view of the men’s locker room, labeling each section.
The drop-down menus from Green & White.com..........

Roster and schedule/results links for pages of Green & White.com. ..

ix

15

16

18

20

20

21

23

24

25

25

28

29

29

Figure 19
Figure 20
Figure 21
Figure 22
Figure 23
Figure 24
Figure 25
Figure 26
Figure 27
Figure 28
Figure 29
Figure 30
Figure 31
Figure 32
Figure 33
Figure 34
Figure 35
Figure 36
Figure 37
Figure 38
Figure 39
Figure 40

Figure 41

The Women’s Softball whiteboard with the standard organization.
The “Other Sports” whiteboard with the alternate organization ........
View of the Men’s Basketball section of the men’s locker room ......
Photo Gallery viewer from Green & White.com .........................
“Men’s Photo’s & Pictures” wall with “Stop Slideshow” sign .........
Doorway sign for the men’s locker room ..................................
Directional sign for the main room .........................................
Chairs and table. featured in both locker rooms ...........................
Wire-frame t0p view of the environment, showcasing lights ...........
Men’s Hockey lockers, with top faces eliminated ........................
Plane UVW map applied to one of the flags ..............................
Texture map for one of the Men’s Football headline panels ............
Camera, dummy object, and safe-plane from the 3D scene .............
Graphic of the entire interface from Fireworks ...........................
The overlay graphic of the W3D ............................................
Rays shooting along the z-axis from the dummy. left box, right box..
The Information Board showcasing the roll-over effect .................
Roll-over and article swap for the men’s basketball headline ..........
J ava-script pop-up window for Ohio State University ...................
Captions within the 2D viewing area .......................................
Cast libraries from Director used for the production ....................
Back and forward buttons ...................................................

Publish settings used for the final shockwave movie .....................

3O

31

32

33

34

35

35

36

37

38

39

40

41

44

45

48

50

51

52

52

53

53

55

Figure 42 Search box from the home page of Green & White.com ................ 67
Figure 43 An example of what happens when collision detection fails ............ 69

Figure 44 The plasma TV against the wall within the main room .................. 70

"Images in this thesis are presented in color."

xi

 
 

 

-. _ \c
I‘T‘me‘vfi -.
. ', ‘7

»

  
  
 
 

,_ ' 46"}.
.,,

     

a

 

When Flash was first introduced as media that could be used in combination with
HTML, there was an influx of Flash media used for many sites. One common use of this
media was to provide a splash page that would serve as an introduction to a site. There
would be some type of animation, and then the user would then be re-directed to another
page that contained the actual content. At first, there was a great amount of interest in
Flash technology, which fueled more development of Flash media for this type of use.
However, because of overuse, many users became annoyed with sites that used Flash
media. Many users just wanted to get to a site, access the information they were after,
and leave in timely manner. Realizing this type media was becoming a nuisance, most
developers turned their focus to using flash as an advertising tool, as well as a tool to
create entire web page interfaces.

Web developers that utilize 3D technology and media are coming to a similar
crossroad. To date, most web sites that have utilized 3D technology have been purely
exploratory. That is, the user only has the ability to navigate around the environment
with very limited point and click capabilities. And like flash, the interest level and
demand for these 3D applications dwindled amongst users, after it established an identity
as strictly a visual tool. There is a craving for more interactive 3D interfaces that allow
for point and click interactivity. Can 3D technology be used as a functional, efficient
component in interface design for the web? This is what I set out to answer.

The objective of my thesis was this: to create a functional, efficient website that

utilized 3D technology as means of navigating through content, and then test its

functionality and practicality by subjecting it to user testing. Ultimately, this testing
helped to give an indication as to whether 3D technology would be a viable alternative to
2D technology in the production and development of websites. An analysis of the data
taken from subject testing, details of the production, and my final thoughts and

conclusions are documented in the following sections of this report.

 

 

 

For this production, two websites were needed. An existing 2D commercial
website was used as a source for articles and publications, and was also used during the
user testing stages of the production. The second website was based off this pre-existing
2D site, but instead utilized 3D technology as a means to navigate through content. The
creation of the 3D site was the main point of emphasis during the development stage.

The following section describes the applications and/or tools that were considered
for use in the development of the production. These applications and/or tools included
Adobe Atmosphere builder, 3D State Webmaker, and 3D Studio Max + Macromedia
Director. Although a few other programs like Swift 3D, Flash, and QuickTime VR could
have been included in this list, ultimately they were not considered viable options

because my familiarity with using these tools for 3D development was very minimal.

Applications Considered for Development
> Adobe Atmosphere

Adobe Atmosphere is relatively new authoring tool that specializes in the creation
of “3D interactive stage sets”. With this tool, developers have ability to present a variety
of media components such as three-dimensional objects, Flash media, sound, and video
“all within the context of live theater performance”1

One of the most intriguing tools within the Atmosphere builder is ability to insert

portals within the environment. These portals are usually represented as animated

objects to which users can virtually walk through in order to get to another area of the
environment. With the ability to integrate portals into the environment, along with other
types of interactive media, Adobe Atmosphere is an ideal application to use for the
creation of virtual tours, presentations, and other related content. On top of that, Adobe
Atmosphere also includes the ability to chat with other users. In a review by PC
magazine, this was described as one of the main selling points: “Viewers can not only
see interactive 3D objects but can also collaborate with other viewers in the

environment”2. Figure 1 below shows a sample layout of the builder interface.

Figure l

 

 

u— 4-; .u- :a-«iucz-o-u-xcuu. once-.1: v- ..--\.:r<- i413.“-

An example cathedral scene designed with Adobe Atmosphere:
from Adobe.com

Although Atmosphere makes navigating virtual environments less tedious, and
allows developers to integrate other types of interactive media, this environment is still
mainly exploratory. There is very little (if any) point and click capabilities within the 3D

environment itself. This makes it difficult to consider Adobe Atmosphere as a viable

application to use in the creation of 3D web interfaces that require constant point and
click interaction from users.

Adobe Atmosphere applications also require the user to download an Atmosphere
player, which is more than a plug-in. As a review from ZD Net states, “At more than
2MB, the Player is not a lightweight download for those using a dial—up connection, but it

”3. The player utilizes an entire interface that enables users to view the

is a heavy lifter
3D content, as well as control other aspects within the environment such as the selection
of avatars, chatting to friends, changing camera perspectives, and others. However, all
interactions with the mouse take place outside the 3D world itself, using standard buttons
located within the player to interact with the 3D environment. Although this certainly an
interesting application, because the 3D worlds are purely exploratory and because the
Atmosphere player has not been developed for both PC’s and Macintosh (it is not

available for Macintosh systems yet), this application was not suited for the development

of this production.

)9 3D State Webmaker:

3D Webmaker is a free downloadable application that can be used for the creation
of 3D interactive websites. 3D State is most popular amongst game designers due to the
development of the 3D State game engine, but has since expanded. The developers at 3D
State like to promote Webmaker as an easy to use tool that requires very little
programming: “Even if you can’t program, you can design fantastic programs with
nothing but your mouse”4 Within Webmaker, there are a variety pre-made models and

effects that are made available to the developer. Models can be dragged and dropped into

the environment from the library, and when the desired environment has been created, the
user can then publish with ease into a fully functional website. Figure 2 below is screen

capture of the 3D Webmaker 2.0 interface.

  
 

Figurez
D
II
‘59 bbpafl ' 0 LI!
II C‘
" “‘tl‘tx- 50
«P"‘
U I 9 D
......2... g ;
." * :
ill‘ .
u a? .,’
. .3 4i z
- ‘ .3—
,, I P.
v .‘ I
31 .
111'” K

A screen capture of a fireplace scene designed with 3D Webmaker

Although Webmaker has a variety of pre-made models available for use, in order
to create new models for use in an environment, another application called 3D State Edit
needs to be downloaded and installed. This application is capable of creating some
impressive models, but does not offer the flexibility or options that other 3D creation
tools offer. If a developer wanted to make a complex, detailed environment, this

application may not be the best choice to use. Models created in 3D Edit are also saved

with the 3D State extension (.STATE), which makes it impossible to use with other
applications such as Macromedia Director.

Additionally, web pages published out of 3D Webmaker require an Active X
plug-in to be installed, and if the user does not know how to enable Active X within the
Internet browser settings, they may have a hard time viewing pages created from 3D
Webmaker. If 3D State continues to develop this application, it may become a major

alternative to other applications that specialize in 3D creation and implementation.

> 3D Studio Max + Macromedia Director:

Discreet 3D Studio Max and Macromedia‘s Director are two applications that
have been mainstays within their respective markets. 3D Studio Max is a professional
3D creation tool that has been used in a variety of ways, ranging from 3D modeling to
animation and rendering solutions.5 Macromedia Director is a powerful multimedia tool
that gives developers the ability to create CD’S, DVD’s, Kiosks, and interfaces for the
web.6 Director also allows the developer to import and add interaction to a W3D file,
which is a specific Shockwave format that can be exported out of 3D Studio Max.

When used in combination, 3D Studio Max and Director provide a powerful way
to produce and implement 3D content for web use. Entire environments can be created in
3D Studio Max, and by using the 3DPI Xtra and additional Lingo coding in Director,
models can be made interactive with point and click capabilities. Additionally, Director
can also be used to add navigation and movement to cameras and models within the
scene, which makes it ideal developers seeking to add a ‘first-person’ perspective to

navigation. And like Flash, which is another timeline-based application, Director can

also be used to create the entire web interface to which the developer can publish directly
into an HTML page.

According the a recent survey conducted in March 2004 by NPD7, the Shockwave
plug-in it requires to run in browsers has reached a higher penetration amongst users than
some of the other plug-ins or media players required for similar applications (see figure 3
below for more information). With the capabilities of these two applications, 3D Studio
Max and Macromedia Director were the obvious choices to use for the production of the
3D interface and virtual environment. Screen captures of these two applications can be

found in the production chapter of this report.

Figure 3

100
90 .
so , 1 ~ we;
70 ‘
so , . 5 ‘ E
so
40 -

30
20

10 _.
0 , II" t -. :4 I-.. ,1. .. - - '15.» . 4 4.“. .1 .. . .
Flash Acrobat Shockwave QuickTime SVG
Java WMP Real VIewPoInt

w— —.. nun-.1-— _u—-»‘I—-—m

Percentage of of Internet-enabled PC's

 

H- .-.-mm-.- a. v.4— J

U—

NPD Online Survey of plug-in penetration — March 2004: from Macromedia.com

Choosing the 2D Commercial Website

 

Before any development was to be done on the production, there were few details
that needed to be thought out first. The first detail was determining what existing 2D
website was going to be used. Because the 3D website was going to be based off of the
existing 2D website, this site needed to be clarified, with the desired content in mind as
well as the desired scale of the production in mind. To further explain, most web users
like to go to certain websites on a daily basis. They often have a list of bookmarks that
they might cycle through daily, looking for any new articles or publications that have just
been published. These are websites that usually have a large volume of information and
are constantly updated periodically. Some examples might be online newspapers like
The New York Times or USA Today, or online informational technology websites like
TechWeb8 or Slashdotg.

Initially, these were the type of websites that were targeted for use in this
production because they have a high amount of traffic. However, the problem with the
sites mentioned above is that their range of content was just too broad and impractical to
use in a full-scale 3D environment. Why is this so? Unlike 2D based content, 3D based
content has to be more visually descriptive to the user in order for the environment to
make sense when the user is navigating through it.

To elaborate further, links placed within a 2D interface are usually represented by
text, a button or a graphic and are almost constantly in sight at all times and do not move
(unless the user has to scroll to get them within site). Interactive content within a 3D
environment can be anywhere within a 360 degree viewing area. This means that some

information will not be in sight and will take interaction by the user in order to bring the

content within sight. These areas can almost be compared to the ‘blind spots’ when
looking into a car’s side view or rear view mirrors. Serving as links within the 3D
environment are models, and if there are a bunch of models placed randomly around a
room, it would be extremely confusing to the user when they are navigating through the
environment. So when designing a three-dimensional environment, the proper separation
and organization of the interactive content (or models) is key, and if there is a
monumental amount of content, that means that the overall size of the environment would
have to be very large in order to display all of the content properly. For instance, if there
was a section of USA Today pertaining to foreign headlines, an entire 3D section would
have to be designed and implemented in order for it to make more visual sense to the
user. The same would go for other sections or genres such as sports, local news,
business, and so on. An environment representing all of these sections would be
extremely spacious and complex.

Keeping these aspects in mind, there were a couple informational websites that
immediately came to mind: MLive.com and Green & White.com. What made both sites
appealing was that the range of topics covered was narrower, the information presented
was generally targeted toward a specific target audience, and like the other major online
newspapers mentioned above, these two sites were still updated with new articles and
publications on almost a daily basis. It also helped these two websites also placed a
strong emphasis on a topic area that is extremely appealing to me: sports information.

These two websites are described in more detail below.

)‘v MLive.com

10

MLive.com is an online information site that deals with “Everything Michigan”'0.

Basically, any newspaper, broadcast station, radio station, or any other interested parties
in Michigan can become an affiliate of MLive.com. Once an affiliate, MLive.com will
take any articles, publications, or information produced by their affiliates a post them on
the MLive.com website. Now, even though it only dealt with content related to
Michigan, the entire website was still larger in stature and contained a wider range
sections than what was desired. So it was decided that if this website was to be used for
the production, only one section could be focused on for the design.

Another problem with using MLive.com is that there were a few key features that
I could not or was not planning on representing in the 3D environment. One such feature
that is used extensively by users accessing MLive.com is the forum. Although it would
have been possible to implement a forum into the website, it probably would have been
represented in 2D since forums require some sort of database language such as PHP or
ASP. The main goal was to keep all interactive content three-dimensional, so the forum
would not have been an option and was eliminated from consideration.

Another feature was the streaming Real Video content. Although it is possible to
stream Real Video using Macromedia Director, the streaming itself would hinder the
real-time performance of the production. Additionally, users would be required to
download the Real Player which, compared to other media players and plug-ins, does not
have as high of a penetration percentage amongst most computer users (see the previous
Figure 3 for the penetration rate of the Real media player among households). This
feature was never intended to be a focal point of the production, but is a focal point of

MLive.com. When all of this was considered, it was decided that MLive.com would not

11

be used for the production and that another website would have to be considered. The

website that was ultimately used is described below.

> Green & White.com

Green & White.comll is a sports information site dedicated solely to Michigan
State University athletics, and is actually run by the Lansing State Journal online”.
Basically, the content focuses mostly on Michigan State Athletics, but it also has some
limited links to other campus news and main headlines from Lansing State Journal
online. Because the content is really targeted toward users interested in Michigan State
athletics, and the range of topics covered is narrowed down, it made the website ideal to
use for the production. Another nice aspect of this site is that, even though it is run by
the Lansing State Journal, it has its own domain name, unlike MLive.com where the
sports section is just an extension of the MLive.com domain. This may not seem like a
big deal, but to some users, it makes navigating easier.

The main focal points of Green & White.com that were represented within the 3D
interface were the main headlines and articles from sport, rosters for each sport, the
schedule/results from past seasons for each sport, picture galleries, articles from the
Lansing State J ournal columnists’, recruiting headlines, calendar entries of sporting
events, links to the sponsors for the Lansing State Journal, links to the official websites of
the other schools in the Big Ten conference, and contact information. Once it had been
determined that Green & White was going to be used for the production, the next step

was to think of a metaphor or theme of 3D interface and environment.

12

Deciding on a Theme

Before constructing the actual scene, a theme for the 3D environment needed to
be established. In other words, the environment needs to be based on a metaphor. l have
always had strong interest in sports related topics and issues. Sports have been a passion
of mine for many years now, and eventually, I would like to start a career within the
sports entertainment industry. Because of this interest and familiarity, it made the
brainstorming process much easier when trying to think of a theme or metaphor for Green
& White.com.

Why does the environment need a theme? As stated previously, the environment
has to be extremely visually descriptive and organized in a way that users will be able to
learn or get a sense of where a section is. For example, take four rooms developed equal
in size and visual appearance, but meant to showcase different content. If clickable
models were placed in each room, each sharing similar visual appearances to one another,
but each producing different actions when clicked, the user could have trouble recalling
what model was where and what model did what. This would make navigating around
such an environment more tedious to the user. With a traditional 2D site, it is different
because most clickable content is represented by text, which is much more definitive.

There were initially a few ideas under consideration for the theme of the
production. The first idea was to base the environment on the set of a television
broadcast studio, such as something similar to ESPN’s Sports Center. The user would be
able to walk around to different monitors to view headlines and content, and they would

also be able to interact with commentators on the set.

13

The second idea was to base the environment on a cafe setting, where the user can
walk to a specific area and pick up virtual newspapers related to each sport. The problem
with this system is that it would be in-practical to have a newspaper for each and every
headline. It would also end up feeling somewhat unrealistic because the newspapers
would have to be spread around the environment in a deliberate fashion, and most likely
plastered against flat surfaces instead of being placed loosely and realistically around the
environment. Besides, most café’s don’t have any association to sports whatsoever, so
the entire theme would be a stretch.

The third idea for the environment was to create something similar to a “Hall of
Fame” setting, where users can navigate to different areas of the environment and interact
with objects situated in modeled trophy cases and informational booths. This did not
seem like a bad idea initially, but in retrospect, it would have been difficult to try to
associate trophies and other objects usually found in a Hall of Fame setting with articles,
rosters, and other dynamic content found on Green & White.com.

The final idea was to use the concept of a locker room setting. Within this setting,
the user could navigate to locker rooms representing each sport, and then click on bulletin
board or white-board panels to bring up the latest articles and publications related to that
sport. What was also nice about this concept is that the setting would be exclusively
related to sports, where as the settings for the cafe’ and the studio could be used for just
about any type of content.

It was difficult to decide what type of theme would be used for the production. It
ultimately came down to the broadcast studio concept and the locker room concept. In

the end though, it was decided that. the locker room concept would probably work out the

14

best, but only because I was able to get in contact with a representative from the
Michigan State University athletic department, who sent me photos of some of the
official locker rooms at various Michigan State’s athletic facilities. Having these photos
would make it much easier to create textures for the scene, as well helping to provide an
idea of the overall organization and placement of objects within a locker room. Figure 4

and Figure 5 below are a couple samples of those images received.

Figure 4

 

The MSU Men’s Basketball locker room

Figure 5

 

 

 

A close-up of a MSU Men’s Basketball locker
stall

’ T“

{y The Production

 

As previously stated, my objective is to create a functional, efficient website that will
utilize 3D technology for navigation and to display content, and then test its functionality
and practicality by subjecting it to user testing. This would ultimately help to determine
if 3D technology would be a viable alternative to 2D technology in the production and
development of web sites. Once the 2D website was chosen and the theme/metaphor was
decided upon, it was time to move on to the development stage. The first part of the
development was creating the virtual environment in 3D Studio Max, and the second part
of development was implementing the environment into a clickable interface using
Macromedia Director. Details and the thought process involved during the design

process are described in more detail in the following sections.

Designing With 3D Studio Max

 

Even though there are two parts to the development stage, it was not as if the
entire scene was designed in 3D Studio Max first, and then shipped to Macromedia
Director for the implementation process. The designing of the environment actually took
place in smaller increments at a time. Not every idea or concept works out the way it is
intended to during development. If the entire scene was developed in 3D Studio Max and
then brought into Macromedia Director, what would happen if there was some major
aspect of the design caused problems when it came time to add interaction in Director? It

would have to be brought back into 3D Studio Max to be fixed, and when a scene is

17

rather complex, even the most simple re-designs will have some effect on other objects
designed in the scene. Often times, those other objects will also have to be redesigned or
their placement will have to be changed. All of this adds more time on to the
development process, so to avoid these occurrences, small portions of the environment
were designed and then sent to Director to be tested in order to make sure they would fit
into the concept. In all, there were approximately 21 different 3D Studio Max Files
(.MAX extension) and approximately 10 different Macromedia Director Files (.DIR

extension) that resulted from this process of trial and error.

> Organization of the Scene

The first step of the design process was determining the organization of the scene,
thinking mainly about where each section and/or sport will be represented, and the
placement of the objects within that section. As stated previously, careful consideration
has to be made when determining the organization of the scene and the placement of
objects within the scene in order for the environment to make sense to the user. To help
determine this, an analysis of the organization of the 2D commercial website was needed.
The two aspects that were focused on were the organization of the main navigation bar
and the structure of the cover pages for each section or sport. Figure 6 below is a screen

capture of the navigation bar from Green & White.com.

Figure 6

 

Iootball Itasketball Ice Hockey 1 ‘ Women's Recruiting Contact Us

Screen capture of the main navigation bar from Green & White.com

18

Initially after looking at the organization of the navigation bar, the idea was to
create rooms for each button within the navigation bar, with the exception of the
“Recruiting” and “Contact Us” button. These two buttons could be represented within
another section and did not require an entire room. The “Cover” button takes the web
user to the home page of Green & White.com, the “Fans” button takes the web user to a
section where they can download wallpapers and view headlines pertaining to other news
around Michigan State University, and all the other buttons take the user to the desired
section related to that sport. Details of the design process for each room are described in

the following sections.

' The Main Room

The development process of the 3D environment kicked off with the design of the
main room, which represented the “Cover” button of the navigation bar and home page of
Green & White.com. After looking at the home page of Green & White.com, a list was
compiled of features and/or items that would be represented within the Main Room of the
3D environment. These included the four main headlines, the columnist section, the
MSU Sports Calendar, and the table with links to all of the official websites of all the
schools within the Big Ten conference. There were a variety of other features and links
on the home page, but most of these where headlines that did not related directly to
Michigan State Athletics, or they were multimedia features that could not be represented.

In some ways, the Main Room had to have its own theme because it was not
exactly a locker room, but it still had content that had to be tied into the overall concept

of the locker room them. How could this room be represented? Some sports facilities

19

have lobbies or rooms next to locker rooms where the media can wait outside until
summoned in the locker room. Some of these lobbies can also be open to the general
public, and often showcase trophy cases, bulletin boards with news and other postings,
and other various items situated around the room such as statues, flags, and so on. This is
how the Main Room would be represented. Now the focus turned to how each of the

features from Green & White.com would be represented.

Figure 7 Figure 8

m Nam Columnist
Muslim
Wen—alarm
Fourth prep player verbally commits In: '05 i
Southfield defensive back Ross Weaver has wanted to k-
play football at Michigan State since his high school
playing days started. Head motel - Published 2034-08-04

Past columns
l;chul;@ls com

Screen capture of the

MSU 5 mm (“l est Columnist section from Green
Head more! ' Pubhshed 200438-04 & White.com home page.
Thml vellval commitment liimijs speed Figure9

Michigan State's third verbal commitment for the 2005
football recruiting class brings a good dose of speed and
size with him. I read ITICII r— I - Pubished 2004-08-03

 

MSU Sports
[read more] - Pubished 2004-08-01

Screen Capture of the Main Headline section from the
Green & White.com home page

 

Screen capture of the Calendar
Graphic from Green &
White.com home page.

Some of the items generally found on bulletin boards include posters,
advertisements, calendars of events and things of that nature. so it seem logical that the
main headlines, calendar of MSU events, and columnist section from Green &

White.com be represented in a similar fashion. Figure 7, Figure 8. and Figure 9 above

20

are screen captures of these three features. The next step was to determine how many
bulletin boards would be used, what would be displayed on each bulletin board, and the
appearance and placement of the bulletin boards. It was initially proposed that the main
headlines, calendar of MSU events, and columnist section would have their own board
and these would be placed against different walls around the room. However, this would
meant that in order for the user to access this information, they would have to travel to
each section, which didn’t seem practical considering the amount of information
displayed on each board would be rather minuscule. Instead, these items were all placed
on one board or display labeled the “Information Board”, with each item or panel being
clickable. Some facilities have similar boards that display a variety of information, and
are located in a central location instead of mounted against walls or other flat surfaces.

Figure 10 below shows the design of the information board within in Main Room.

Figure 10

INFORMATION

 

 

‘ Catch nachos to. at maintain
' mu Digest; new
' nu M Dione 1 211004

. i u". “MW" '00 "v...
K “0‘ M I “.11 I10 '—
cm“; T.“ “W

‘l :‘n. e.."... ..c’.‘_
Mthw

 

The “Information Board” designed for the Main Room

21

The other items on Green & White.com represented within the Main Room of the
3D scene included contact information, sponsors, and the links to the official websites of
each school within the Big Ten Conference. When to web user clicks on the “Contact
Us” button within the navigation bar on the Green & White website, it takes them to a
page with all sorts of contact information. There is also a “Contact Us” link at the bottom
of every page within Green & White.com, which is common on most websites. Instead
of representing this on the main information board, this information was made accessible
by navigating to a table within the Main Room and clicking on a flat panel monitor sitting
on top of the table, displaying “Contact US” on its screen. The idea was to simulate an
instance where, if the user wanted to contact the website by email, they could click on the
computer flat panel and it would bring up information on how to contact Green & White
by email, as well as other by other means. Figure 1 1 below shows the computer
workstation designed within the Main Room. The radio that also appears within this

image will be talked about at a later time.

Figure 11

 

The “Contact Us” computer station designed for the
Main Room

22

Every commercial website typically has a list of sponsors that are represented on
a specific page, or an area site-wide where graphics of each sponsor are placed. The
sponsors on Green &White .com are displayed as graphics, the main sponsor being
placed at the top within the Green & White.com banner, and the other sponsors being
places at the bottom-left of the page. Within the Main Room of the 3D scene, these
sponsors were represented within a smaller bulletin board located on one of the walls to
the left of the Main Information Board, the main sponsor being the first sponsor at the

top. Figure 12 below shows the “Sponsors” board designed within the Main Room.

Figure l2

0 SPONSORS O

 

The “Sponsors” bulletin board designed for the Main Room

The last item from Green & White.com that was represented within the Main
Room of the scene was the table with links to the official websites of all the schools
within the Big Ten conference. At first, it was difficult to think how these would be
represented within the scene. But then it occurred that all of these schools have some

type of mascot or flag. so the idea was to make a flag for each one of the schools within

23

the conference and place them on one of the walls. This would make it easy for the user
to identify what they were there for. as well as providing an aesthetically pleasing way to
display all of the links instead of putting them within a bulletin board similar to the others
already within the scene. Figure 13 shows the wall of the Main Room where the flags

where placed, representing each school of the Big Ten Conference.

Figure 13

 

 

Wall within the Main Room where the flags were placed, representing
each room of the Big Ten Conference

Once the Main Room of the 3D scene was organized, it was time to move on to
the design and organization of the locker rooms. Figure 14 on the next page displays the
wire frame view of the finished Main Room and Figure 15 displays the smooth, textured

view of the Main Room.

24

Figure 14

 

Smooth, textured view of the Main Room from the designed 3D scene.

Figure 15

 

.......

Wire-frame view of the Main Room from the designed 3D scene.

25

' Locker Rooms

As stated previously, locker rooms would be designed representing each button on
the navigation bar, with the exception of the “Fans” and “Contact Us” button. However,
if you look at the wire-frame of the Main Room above (Figure 15), there are only three
doorways: the two doorways that are opposite of each other another one that is slightly
offset in front of the Information Board. The doorway that is set in front of the
information board does not actually work as a doorway and is only there for looks. That
leaves only two doorways, which are supposed to branch into the locker rooms.

After some thought, it was decided that it would not be best to create locker
rooms after each one of the buttons for different reasons. One reason is that environment
would be way too large. There would be six different locker rooms, which would make
navigating around the environment very time consuming to the user. In order to decrease
the time it takes the user to access information for this production, the environment had to
be smaller in stature. The optimal size had to be limited to two or three rooms, with
interactive content placed in close proximity. Although it may take more time to
navigate through than a traditional 2D site, the hope was that users would find the time to
navigate through the environment tolerable.

In order to make this happen, the organization of the rooms in comparison with
the navigation bar buttons had to be a little different. The organization of the navigation
bar from Green & White.com is constructed in a way that the three most visited sport
sections have there own button, and the other sport sections are displayed under the
“Men’s” and “Women’s” buttons, which activate drop-down menus when the mouse rolls

over them. But ultimately, all the content within Green & White.com basically breaks

26

down into two categories: men’s and women’s sports, so it was decided that only two
locker rooms would need to be developed for the production.

The next step was deciding how to lay out each section (or sport) within the room.
Initially, the concept was to develop a huge room, and section off portions of the room to
represent each sport. Again, this environment would have been way too large and the
thought was to make it function similar to a 2D website, where the most trafficked links
would be more visible and more accessible. That’s exactly how each locker room ended
up being constructed. For the men’s locker room, the basketball, football, and hockey
sections were given their own section, and all the other sports were put into another
section. The women’s locker room was constructed in the same way with the basketball,
volleyball, and sofiball sections receiving their own wall, and all the other sports were put
into another section. In addition, both the men’s and women’s locker rooms had a
recruiting section and a section for photos.

As far as the shape of the rooms is concerned, originally the idea was to use four-
sided rooms for the locker rooms, much like how the Main Room was constructed. But
because there were more than four sections that needed to be represented, the shape of the
room needed to be different. Ultimately, hexagonal shaped rooms were created, with
each section having its own wall. The photo wall was placed opposite of the doorway,
which was nice because the photos are the first thing seen when the user enters the room,
and the recruiting section was placed on the wall with the doorway entrance/exit. All the
other sports sections were placed around the remaining walls. Figure 16 below shows the
organization of the men’s locker room, which is practically the same as the women’s

locker room.

27

Figure 16

 

Wire-frame view of the Men’s Locker Room, with a labeling of the sections

Within each sports section of both the men’s and women’s locker rooms are three
items: representations of a whiteboard, lockers, and a sign displaying what section it is.
As a means to display the latest headlines for each section, originally the idea was to have
a standing A-Frame and poster located somewhere within the section. However, there
where a couple other things that also needed to be represented somewhere, and space
within the poster area was too limited to display the items properly. These included a list
of the current roster for each sport and the schedule/results of the current season. Both
can be accessed on Green & White.com by either using the links in the drop-down menus
(Figure 17) or by clicking on the links in the upper left-hand side of the page (Figure 18).

There are some buttons, however, that do not have the option of selecting the roster or

28

schedule/results from the drop-down, so the in-line links within the page have to be used

in order to access the information.

Figure 17 Figure l8
Im' F Emilia-all [minim
IFootball cover [I C_ov_er
' i 13 Schedule
.m a m

D Archive

D Galleries

Screen capture of a Screen capture of the roster and

drop-down menu schedule/results links for pages
from Green & of Green & White.com
White.com

Instead of using A-Frame and poster concept, an alternative was thought of,
which was to use a white-board (Figure 19) type representation. Within the white board
there are 4 clickable panels displaying latest headlines pertaining to that sport, a
schedule/results panel, and a roster panel. The 4 panels displaying the headlines were of
higher priority than the roster and schedule/results panel, so they were place in the upper
left-hand comer of each white board. The roster panel was placed in the upper right-hand
comer of the whiteboard, and the schedule results panel was placed at the bottom of the
whiteboard below the main headlines. There was one exception to the placement of these
panels within one of the sections. For the “Other Sports” section, the rosters and the
schedules were not compiled for each of the sports represented in the section, so these
had to be replaced with other items. Since only the latest headlines out of the entire pool

of sports represented would be posted, not every sport was going to be represented on the

29

whiteboard, so a “What Sports” panel was created and inserted in place of the “Roster”
panel. When the user clicks on this panel, a list comes up displaying what other sports
are covered within the section. If the user does not see a headline from one of these
sports on the whiteboard, there probably have not been any new postings for that
particular sport in some time. As far as the schedule/results panel is concerned, this was
replaced with another headline panel, which brought the count for the number of
headlines displayed to 5 instead of 4. Figure 19 below shows the standard organization
of a whiteboard, and Figure 20 shows the organization of a whiteboard for one of the two

“Other” sports sections.

Figure [9

LOTCST News 6 ‘ ,
'—\ Roster ’ .
\4. I

Q Softball odds assistant Gleason
fl Lcc pitcher is MSU bomd

fl Green, Peterson are all-region

 
  
 
 
  

«- I, w...»- Qt- '

fi softball team's dream ends
Q SCheduIeJIReSI-Il?! " T "' T x"

 

The Women’s Softball whiteboard with standard organization of panels

30

Figure 20

   

   
    
   
         
   

 

What
5““ New: ®
% Baseball: Moody oinong baseball signees
% Cross-Country: MSU junior smashes record

% Golf: Spartan strong or Mich Am
% Wrestling: Simmons 0 wrestling winner

« Swimming: Swimmers make grade lists

The “Other Sports” whiteboard from the Men’s Locker Room with alternate organization.

On a couple final notes, regarding the Whiteboards, the text appearance for the
panels on each board was deliberately designed using the Comic Sans Serif font. This
was done so that it gave the appearance that it was written by hand, like how coaches
might write on a whiteboard when diagramming plays, putting up motivational quotes. or
any other thing coaches might write on a whiteboard. It may look a little more un—
organized in real-life, but the font still adds a nice hand-written touch. Additionally, the
white board within the “Recruiting” section was simplified, only displaying the latest

recruiting headlines. with the roster area and schedule/results area being cut out of the

design.

31

The other two items within each sports section of the locker rooms are the sign
displaying what section it is and the actual lockers, both serving as helpers to make it
easier for the user to determine what section they are in. Signs representing each section
display text of what the section is and they also have some sort of graphical symbol that
correlates to that particular section. The lockers for each section also have their own
distinctive design, with pictures of various men’s sports displayed at the top of the each
locker, as well as uniforms or jerseys displayed within the inner cavity of each locker.
The uniforms or jerseys for each section represent that specific section or sport and,
although they are not displayed in every locker. See Figure 21 below, which showcases

the Men’s Basketball section of the Men’s Locker Room.

Figure 21

 

 

Luresme Dual-r

...". n e.. *u w.-

 

 

 

-rl
’31
H 5*

“was“;

1“
I J
l‘

'A
r

g; \
‘1

 

 

View of the Men’s Basketball section of the Men’s Locker Room.

32

The last section within each locker room that I would like to talk about is the
“Men’s Photos & Pictures” section. On Green & White.com, there are multiple links that
the user can click on to go the “Galleries Archive“ page. These links can either be
accessed within drop—down menus (where applicable) or within the cover pages of each
sport on the upper left-hand side (see Figure 17 and Figure 18). Within the galleries
archive page, there are a variety of links that, when clicked, open up the Green & White
Photo Gallery viewer in a new JavaScript window. The user can cycle through the
images by clicking on the number links below the image (Figure 22).

Figure 22

V ', 1.7 '5‘, .‘ ‘7

    

n The MSU loathe! teun posa tor a photo In the
Er? . Aime ttemoon

on Sunday 0
CHRIS HOLAESLe-ns'ng Side Journal

Photo Gallery viewer from Green & White.com, featuring
football pictures from the Alamo Bowl, 2004

To represent these photos within the 3D scene, four photo panels were placed

against the wall within the photo section of each locker room, each displaying a different

33

picture frame-type photo. Below these photos, a podium or shelf was designed with a
clickable representation of a photo album on top. Originally, it was intended that when
the user clicked on the photo album panel, a photo gallery viewer similar to the one found
on Green & White.com would open up in a new browser window. This photo gallery
was completely HTML and was actually implemented into the project. The problem with
this concept, as stated before, was that the intention was to try to keep all clickable
content within the production three dimensional. So the focus turned to trying to find

another way to display the photos.

Figure 23

   

“Men’s Photos & Pictures” wall with “Stop Slideshow” sign appearing.

Ultimately, the end result was this: when the user clicks on the photo album
panel, the photos on the wall change in a slide-show type manner. Additionally, there
was a sign designed and mounted on the face of the shelf that says “Stop Slide Show”
(Figure 23 above). When the slide-show is not turned on, this sign is not visible, but
when the slide-show is activated, the sign becomes visible and the user has the option of
clicking on the sign to stop the slide-show. More details of this development can be

found in the “Implementation with Director“ section of this report.

34

> Other Helpers and Objects

Within the environment, there are few other objects that were created. Within the
Main Room, signs were created that label what doorways lead to each locker room and
set of matching chairs, along with an end-table, were created within both locker rooms.
The primary sign within the Main Room was placed just behind the information board
and hangs down from the ceiling, displaying directional arrows and text telling the user
what way to take to get to the men’s and women’s locker rooms (Figure 24).
Additionally, signs were placed above each doorway labeling what locker room the user

is entering (Figure 25).

Figure 24 Figure 25

Men's
Locker Room

73 “Lg-3111!] I

   

kINFORuATION E

Directional sign for the main room Doorway sign for the Men’s locker room

 

The chairs and tables were created to fill a void within the middle area of each
locker room (Figure 26). Many locker rooms in real-life typically have lounge chairs that
players can sit down, often just to talk to other teammates and socialize. There are also
typically items like TV’s, media equipment, game consoles and so on that players can
utilize to pass the time or study up on the opposition. Because space was limited against

the walls, the location of these items would have to be within the center of the locker

35

room, which probably would have appeared awkward, so they were left out of the design.
But in all, the chairs and tables are only there for looks, and they help to fill the void left

in the middle of room, so their purpose has been served.

Figure 26

 

Chairs and table featured in both locker rooms

> Lighting the scene

All scenes that are designed with 3D Studio Max start out with one default
ambient light, which illuminates the entire scene. Initially the scene was designed with
the intention of only having this one light, but after looking at a rendered image of the
entire scene, it was apparent the scene needed more illumination. The default light also
was not adjustable and was in-capable of emitting shadows, so four omni-directional
lights were placed in the scene. Simply one omni-directional light would not be enough
because there would be way too many shadows emitted from certain objects, depending
on where the light was placed. Within the finished scene, however, the ability to cast

shadows was turned off because casting shadows within Macromedia Director requires

36

more processing time and power. When Director has to draw every detail of these
shadows as the user moves through the environment, it hinders the performance of the
application. This will be elaborated upon in the “Performance Optimization” section of
“Implementation with Director". Figure 27 below is a wire-frame top view of the

environment, showcasing the placement of the four lights.

Figure 27

 

Wire-frame top View of the environment, showcasing light placement

> Thinking of Low-Poly

Every model within the scene was designed with an emphasis of keeping the
poly-count of entire scene low, which means the amount of faces each object possessed
was as minimal as possible. This also has a direct correlation to performance
optimization. Most of the clickable objects within the scene are strictly planes with
textures mapped to the face to face of the object. Any objects that were designed with
more than one face were cut down in a way that, if a face was not going to be visible to
the user when navigating through environment, it was eliminated or deleted. Since the
user is not able to see the back, bottom, and top faces of many of the objects, the faces of

these objects were often eliminated. When navigating through the environment, any face

37

or faces that Director does not have to draw is a plus, and benefits performance. The
lower number of polygons also keeps the files size smaller. Objects such as the lockers,
information board, computer station and so on were had faces eliminated. Figure 28

below is an example of a set of lockers that had faces eliminated.

Figure 28

 

Men’s Hockey lockers, with top faces eliminated

‘9 Texture Creation

Every panel and/or object within the environment had their own unique texture
mapped to it. With the exception of the panels, most textures were created by finding
images on the web that best fit what I had in mind for the design of the objects, and then
editing them with Macromedia Fireworks in a way that they would look realistic when
mapped to the object. By using the UVW mapping modifier in 3D Studio Max, the
textures could be mapped in either a box or plane-type fashion (Figure 29). There are

also other methods to UVW map a texture to an object such as in spherical and

38

cylindrical-type fashions, but there were to no objects within the scene that resembled
these types of primitives. The ceiling and floors of each rooms also had carpeting textures
that had to be tiled using the UVW mapping modifier because the textures initially

appeared to blurry when stretched over the objects.

Figure 29

 

Plane UVW map applied to one of the flags. The
orange border represents the UVW map

For each one of the panels, simple textures were created from scratch using
Macromedia Director (Figure 30). Originally the intent was to map these textures to
panels by using Director itself. Director has the capability to map textures contained
within the cast libraries to models within the scene. Additionally, this would have made
the headlines more dynamic. If any changes needed to be made to any headlines, this
could be done solely in Director, without having to use 3D Studio Max to alter the
textures and then export and import the altered W3D file into Director. However, there

were a few problems that came up when experimenting with mapping these textures in

39

Director. One problem was that textures always looked a little distorted no matter how
much the UVW map coordinates were tweaked. The visibility and clarity of the
headlines had to be one of the top priorities, so any loss of clarity was un-acceptable.
The other problem related to the transparency of the white background within the
headline textures. Even though the white background was part of the image, when
mapped to a panel, the while background completely disappeared, leaving only the text:
You could see the text and the walls behind the panel. It was almost as if the white
background was part of the alpha channel, but this was impossible because the graphic
image was a J PEG, which does not support alpha transparency. Ultimately, these
problems went unsolved and this method of mapping textures to panels was not used.
Besides, in order to map textures to objects using Director, quite a few lines of coded are
needed to make it happen. With the amount of panels designed in this production, having

to map a texture to every one using this method would have been rather impractical.

Figure 30

 

% Coach reaches top of mountain

 

 

 

Texture map for one of the men’s football headline panels.

“2 Camera and “Dummy” Placement

The last few items in the environment that should be addressed before moving on
to the “Implementation with Director” stage are the camera, dummy object and safe plane
objects. A camera was created for the scene and placed directly in from of the
Information Board within Main Room. The camera represents where the user will

virtually start out within the 3D environment when Shockwave file is played. When

40

navigating through the environment, the dummy object moves and the camera follows
closely behind the dummy as it moves through the environment, rather than simply the
camera itself moving (Figure 31). When running the simulation, the dummy object
actually is invisible, which helps to give the user a first-person perspective. This method
was used in the event that if an avatar was ever added to the scene, the avatar would

simply replace the dummy within the scene as the object the camera would follow.

Figure 3|

(hm...
...
D) x ,.

 

Camera, dummy object, and safe-plane from the 3D scene

As you can see from the image above, the dummy object has two boxes attached
to it, along with a plane placed directly in front of it. These objects were specifically
created with collision detection in mind, which will be described in further detail within

the next section. This concludes the description of 3D Studio Max design process.

41

Implementation with Director

 

The next phase was to implement this environment into a 3D interactive
application and develop the graphical interface using Macromedia Director. Elements of
interaction implemented within the scene included the addition of camera and dummy
movement, roll-over effects when mouse cursor moves over an interactive object, the
capability to start and stop the photo slide show, and ability to use back and forward
buttons to cycle through previous articles and/or camera positions after an object had
been clicked on. Details of these developments are documented in the following

sections.

> Displaying the Articles and Content

The first major obstacle was to determine how the articles and clickable content
would be displayed within the interface. Although it would have been nice to display
every thing as three-dimensional, because the user needed to be able to scroll through
some the articles, this content would have to be displayed in some type of scrollable 2D
viewing area. There were two different ideas on how this would be done.

The first idea was to have the scrollable 2D viewing area pop-up in a window
over the t0p of interface. The user would be able scroll through the article and then close
out the window by pressing an exit-out button and resume navigation within the
environment. The second idea was to place the scrollable 2D viewing area next to the
W3D sprite. This area would be stationary, meaning it does not need to be closed.
Whenever another object is clicked on, it simply replaces what was previously displayed

in the 2D viewing area.

In order to determine which method would be used, two simplified interfaces
were developed using these two different concepts, and I had 5 of my close friends test
out each method and give me feedback as to which method they preferred. 3 out of the 5
users said they preferred the second method (stationary) over the first method (pop-up)
for a couple different reasons. One reason mentioned was that the pop-up method felt too
much like, pretty obvious here, a pop-up. Some web users have a bad reaction when any
type of window pops up while they are surfing the web, so naturally, an association
between popups and this method might be made. Another reason mentioned was that
the stationary method did not break the “flow”, meaning the environment was still visible
and active. The user could immediately resume interacting with the environment without
having to click to close out any windows. The only disadvantage mentioned, pertaining
to the stationary method, was that the overall width of the interface was too wide and the
2D viewing area was too narrow. Based on the feedback, ultimately it was decided that

the stationary method would be used.

> Designing the Web Interface and Overlay

After deciding on how articles were going to be displayed, the next step involved
creating the web interface that would house the W3D and 2D viewing area. This was
done using both Macromedia Fireworks and Director. First, the entire interface was
designed and laid out as one entire graphic in Fireworks, with a screen capture of the 3D
scene placed on middle left-hand side in order to help me determine the placement and
size of the 3D and 2D viewing areas. Then, the screen capture was removed, which left

only the transparent background in that area (Figure 32).

43

Figure 32

    

lilirlviil &Whitecom

 

Graphic of the entire interface from Fireworks, with transparent area

Since there are many web users who can still only obtain a resolution of no more
than 800 X 600 on their computer monitors, the size of the interface was designed to keep
this in mind. The entire interfaced ended up at a size of 800 X 510: the more viewing
area allocated for the 3D viewing area, the better. Once the final size was determined,
the interface was then “sliced" into four different sections: The top graphic, bottom
graphic, 2D viewing area graphic (the area on the right-hand side in Figure 32), and the
overlay graphic (the checkered 3D viewing area). The checkered (or alpha transparency)
area represents the area of the W3D sprite that is visible when the movie is playing.
These slices were then exported in a .PNG format and imported into Director. The
reason for using the .PNG format is that it supports alpha transparency, which is needed

for the overlay graphic, and the quality is higher than say a .GIF because it’s 32 bit.

44

The only objects that can appear over the top of the W3D sprite as the movie is
playing are called overlays. In order to make the 3D viewing area less “boxy” looking, I
wanted the 3D viewing area to appear as though it was underneath the jagged edges of
the top and bottom graphics, or to make it appear as though the 3D viewing area was
embedded within the interface. To produce this effect, the overlay graphic was
implemented and the W3D sprite was scaled to the exact dimensions of the overlay
graphic. Figure 33 is the end result of what the overall interface looked like afier it was

all said and done.

Figure 33

   
    
   
  
  
   

‘iLi—l Ell! &Whitecom

lh
mum: Brakemove Backward

 

loin:

Lem: View articles and any other
clickable content

= Fmrd to recent
article, posttlon

n rt = Barkto previous
article. postnon

 

The overlay graphic of the W3D, which helps to produce the effect as though it is
embedded within the interface.

The last element of the interface designed in Director was the introductory screen.
When the movie is first opened, the user sees this screen first, which does not actually
have that much to it. There is some text in the 3D viewing area that gives a short

description about the experiment and mentions that all the articles and publications come

45

from Green & White.com. The controls are displayed on the right-hand side, and when
the user is ready to proceed, they can simply click on a button located just below the
description to initialize the scene and begin interacting with the environment.
‘9 Camera/Dummy Movement

The camera is the user’s portal to the world, providing the first-person perspective
needed to make it realistic. As stated previously, the user does not control the camera
directly. When navigating throughout the environment, they are actually controlling the
invisible dummy object, and the camera simply follows the dummy object around.

Moving the object requires the use of the directional pad on the keyboard. The
“UP” arrow moves the dummy forward through the scene, the “Down” arrow moves the
dummy backwards, the “Right” arrow rotates the dummy clockwise, and the “Left” arrow
rotates the dummy counterclockwise. Originally, there were different controls used in the
initial stages of development. The up and down arrows functioned the same way, but the
right and left arrows strafed the object right and left instead, and rotation was controlled
by the mouse. If the user moved the mouse cursor right or left, away from the center of
3D viewing area but still inside, the dummy would rotate in the direction the mouse
pointer was heading. This was a reasonable approach, but one annoying problem arose.
If the user wanted to scroll through an article that was selected, they would have to move
the mouse cursor over to the right hand side of the interface, which also caused the
camera to rotate to the right. This might not sound like a big deal, but if the user wanted
to view a bunch of articles, all of this added movement would get annoying after some

time. Thus the previous method of movement described was used.

46

Another aspect focused on in development was the smoothness of the camera and
dummy movement. With a minimal amount of coding, it is simple to move any object
throughout the environment. However, the movements of these objects typically have an
incremental-type feel. For instance, when moving in a forward direction, the start and
stopping of the object may feel abrupt and unnatural. For this production, acceleration
and deceleration were factored into the movement of the camera and dummy object.
When the up arrow is pressed, the dummy accelerates until it reaches top speed. When
the down arrow is pressed, the dummy decelerates until it reaches the minimum speed.
The acceleration rate, deceleration rate, maximum speed, and minimum speed can all be
adjusted to produce the desired effect. This method adds a great amount of flexibility
when adjusting to make the movement as realistic as possible. It also factors into

functionality of the collision detection for the scene, which is described next.

‘iv Collision Detection

Once navigation of the environment was made possible, collision detection had to
be implemented, which is how the movie determines if the dummy object makes contact
with another model in the environment. There are two different ways to implement
collision detection in Director. The first method is by using the built in “Collision
Modifier” of Director. If I wanted to classify an object within the scene as an object that
could be collided with, I could add the modifier to this object with a few lines of code.
However, because there are so many models within the scene, using this method would
have been rather in-practical because it would have to be applied to every one. Although

I have never used this method, it has also been said that using the collision modifier can

47

drastically put a strain on performance. This is something that I wanted to avoid, so
ultimately this method was not used.

The second method involves the use of “rays” to check for collision detection.
An invisible ray, or multiple rays, can be cast from any model and towards any direction
on the X, Y or Z axis. As an object with a ray attached moves around the environment,
Director checks the list of models within the scene to determine if the object has made

contact with any other models within the environment.

Figure 34

 

Top view of the dummy, left box, right box and safe plane, with rays shooting
out along the z-axis
As stated previously, the dummy object has two other boxes attached to it on the
right and left, and a safe plane was placed directly in front of the dummy. The two boxes
attached to the dummy help to serve as the left and right boundaries for the dummy object

as it moves throughout the environment. This was accomplished by shooting a ray along

48

the z-axis (forward direction) from each one of these boxes. If the rays make contact
with any other model within the scene, it brings the dummy object to a stop.
Additionally, another ray was shot behind the dummy along the z-axis, bringing it to a
stop if the user backs up and makes contact with an object. Figure 34 above is atop view
illustrating the placement of these rays along the z-axis.

The safe plane shown in Figure 34 functions slightly different. As the dummy
moves throughout the environment, the distance between the safe plane and the dummy
object will either increase or decrease depending on the speed. The faster the speed of
the dummy, the greater the distance will be. If the safe plane makes contact with another
model, it will attempt to deflect the dummy left or right away from the object instead of
bringing it to a stop. It determines when to deflect and when not do deflect based on the
distance between the safe plane and the dummy, along with the angle at which the safe
plane makes contact with a model. For instance, if the speed of the dummy is at its max
and the dummy does not make contact with a model straight on, it is very likely that it
will deflect instead of bringing the dummy to a standstill. This feature is very useful
because it helps to sustain movement. Without it, any contact the other arrays make with
other models would automatically cause the dummy to stop. which can make the

navigation feel less realistic.

> Triggering Roll-over Effects
To make it easier for the user to identify clickable panels or objects, roll-over
effects were implemented for all of the clickable content within the scene. These types of

effects resemble those commonly found on standard HTML web pages, where graphical

49

buttons and text may change when the mouse cursor rolls over the top of them. This was
accomplished similarly in Director by changing the “specular shader“ of clickable objects
to a different color when the mouse cursor rolled over the top of them, and then changing
it back to its original color after the mouse cursor left. Shaders actually define how the
surface of a model reacts to light, and specifically, the specular shader controls how the
surface of the model is highlighted”. It does not change a model’s texture, but it does
have some affect on how it looks. If a model’s specular shader was changed to green,

that model would appear to be highlighted in green.

Figure 35

    

‘NFORMAIION

.Ltlles‘l f‘irrwso

   
 

' Coach reaches top at mountain
0 MSU Digest: 1202004

- MSU Spam Digest: 12mm:

Screen capture of the Information Board showcasing the roll-over effect

Determining what this color would for each model took some tweaking. The
headline panels of each whiteboard are mostly white, so it was decided that the specular
shader of the panels would probably look best with a color like blue (Figure 35). Other
objects such as the Big Ten flags had darker textures using a variety of colors, so a white
specular shader was used instead to make the change feel more noticeable. Additionally,

the intensity of the specular shader color had to be adjusted down for some of the models

50

once active. Four lights are placed around the border of the environment and light
emitted from these lights hits some models more directly than others. The more direct

light a model receives, the more the intense the highlight is.

> Article Swaps

Within the 2D viewing area of the interface, the movie initially starts with a
scrollable text member displaying how to navigate and interact with the environment.
Once the user navigates through the environment and clicks on one of the objects or
panels, this text member is swapped with another scrollable text member displaying
pertinent information related to that object, such as an article or caption. For instance, if
the panel displaying “Gray is eligible as a freshman" is clicked on, the current text
member within the 2D viewing area is swapped with another text member displaying that
article. In addition, a sound effect is played and a Flash movie located above the text
member blinks on and off, signaling to the user that new information has been displayed

in the 2D viewing area. See Figure 36 below.

Figure 36

    
   
  

     
       
    
    
 

4
Gray is ellgble u freshman - A
Incoming MSU haskemaii recruit gets
necessary ACT score to nlay

\ews
fl Rowley Join; 3.9 r... ,m
fl 6"" " “'96" a: a in»...
“ I’UU‘I Puts 49" cm of W;
fl use; no... add my: '9' 05

@ scheduieuusum— - «v

B/mRenode
W State .oumi

EAST LNJSINO- unwise ovaywill bring
his ramming game to Bieslm Conley
his season

Guy. In incoming neskemall lumnfiom
Flint learned Wednesday he has

Montgomery r afled Gray to give him the
news

'llyusl feels great, man,‘ Gray said
an. nirln

 

 

Roll-over and article swap for a men’s basketball headline

51

Clickable objects such as the Big Ten Flags and the Sponsors function somewhat
differently. When these objects are clicked on, another browser widow opens containing
the web page representing these objects. JavaScript is used to control the overall size of
the window when it opens, which was set to be re-sizable and to contain scroll bars, a
menu bar, and a tool bar. Additionally, objects that trigger and external event like this
also swap the text member within the 2D viewing area with a short caption displaying
what has just been clicked on and cautioning the user that the browser may take some
time to appear (Figure 37 and Figure 38 below). Similar captions are also triggered when

the user clicks sectional signs above each whiteboard, such as the Men’s Hockey section.

Figure 37 Figure 38
c:u—~mm.un~n -..-wt..."- , 3L1

. :5, - ...-.. ,, ,—,.. , ,, External Browser Opening -

You are going to the official website of
Ohio State Uriversity.

The browser may take some time to
appear.

 

Captions within the ZD viewing area that displays
where the user is going, triggered from the flag.

JavaScript pop-up window for Ohio State
University, triggered from the Flag

‘P The Photo Slideshows
When the user clicks on the photo album graphic, on the modeled shelves within
the photo and picture sections of each locker room, it begins a photo slide-show. All four

photos are swapped with other images every couple seconds or so. The stop slideshow

52

sign will also appear and when clicked, the user can stop the slideshow at any time.
Director retrieves these images from different cast libraries and each photo panel has its
own library. This also creates some flexibility when determining what particular images
will be swapped for a particular photo panel. For example, if I only wanted men’s
football pictures to be displayed in the first photo panel within the men’s locker room, I
would go to the cast library representing that library and I would insert only men’s
basketball photos. Figure 39 illustrates the cast libraries in Director used for this purpose,

starting with the “mens_photos” library.

Figure 39

   
  

 

“L. ”.1 Li'i‘i” .4U‘Jfl’.i :'r ., .‘_.... . ., -_';\1.-.‘.—-=—'1-th . .. ,-.__._ . . u<,.~a_~,, ., “o 4 . . .-.. _ ,, _ ,_ _ . . . . . . J__ __ .,_ __ ‘_ I
’39.”; 997-. 3W3. m . “9L ”WI M‘Mmi‘ mwffnm‘29f9‘9iMM” -WM MM°L m£9§.w.-F°'°3

ass i D in‘e’flifim "(’90 ' E

' r_-~—--- i-n— :— 7 A:
i — a L.-- i... ' L. ‘,
_rrM-m_pt_pham_p M)! j 7' 0 7 O f 5 ' ' ll ‘ 12 ’

Screen capture of the cast libraries used for this production, the cast library shown being the library
that the first men’s photo panel uses to retrieve the other photos from.

 

 

 

 

 

 

 

 

 

 

 

 

 

’i Implementing the Back and Forward Buttons
The last clickable objects implemented within the interface were the back and
forward buttons located just below the 2D viewing area (Figure 40). When clicked, the

back button displays the previous article within the 2D viewing area and moves the

 

dummy and camera back to the location where the

Figure 40

user last clicked on an object or panel. Likewise for

 

 

the forward button, returning to the article and

 

Back and forward buttons

 

 

dummy location before there was interaction with

the back button. The idea was to make this function similarly to how the back and

53

forward buttons of a browser window function, which are utilized quite repetitively and
often by most web users. This is accomplished in Director by using lists to record
previous interactions. When the user clicks on an object or panel, Director identifies
what the current article in the 2D viewing area is, and then adds this reference to a list.
Additionally, the current world transform position of the dummy object (also referred to
as the x, y, z coordinates) is recorded into a list. When the back and forward buttons are
pressed, Director will refer to these lists to bring up the previous article or caption
displayed in the 2D viewing, and will also return the user to the previous location of
interaction. The user is able to press the back and forward buttons multiple times in order

to return to the desired article/caption and location within the environment.

> Performance Optimization

Most of the techniques used to enhance performance optimization were already
briefly touched upon in previous section of this report. These techniques included
keeping the number of polygons (of faces) of each object at a minimum, keeping
shadows emitted from lighting to a minimum, and using the arrays instead of the built in
collision modifier for implementation of collision detection. All of these help to decrease
any type of lag that might occur and enhances the performance of the application.

Another technique that was used, more out of necessity than being optional, was
creating all the texture map sizes in some power of two. When the W3D is running and
the user is navigating through the environment, all texture maps that do not have sizes in
some power of two are automatically scaled to dimensions that meet the power of two

standards. The reason for this being that the renderer of Director requires that all textures

54

be in some power of two. '4 These adjustments can drain processing power and slow the
overall performance of the application. Additionally, as Paul Catanese states in his book
“Director’s Third Dimension”, all textures should also be no larger than 512 X 512. It
becomes a question as to whether the user’s machine will be capable of displaying

textures with dimensions larger than this.'5

‘ir Publishing the Movie

Once the performance of the application was optimized as much as possible, the
final step was to publish the movie into a Shockwave file and HTML page. An HTML
template with content loader and progress bar was selected under the publish settings, and
the background color of the HTML page was set to a medium gray. Additionally, the box
was checked asking whether browsing scripting was used (J avaScript pop-ups), and

standard compression settings were used (Figure 41).

Figure 4|
Publish Settings 2”; i

I Foundational smattéiél Burgesslonl "é”hookmsml a ‘_ ,

 

 

Playback: .Valune Control .Zoom'ng ‘
Transport Control Save Local

Loading Display Progress Bar Display Logo I
Stretch Style: f Stretch to fill . " _ , :vi .
HorizontalAign Vertical Align j
Stretch Position i

Background Color: j [ acccccr:

JavaS cript: Movie Uses Browser Scripting

 

 

 

Publish settings used for the final shockwave movie

55

Typically, larger movie files would be compressed more to enhance download
optimization, but because the focus of this production was on 3D navigation, content
display, and performance, optimizing the movie for download from the web was not a
priority. Texture quality, clarity, and visibility were top priority, and compressing the
movie a great deal would have affected these aspects more than what was desired.

The next phase of the production was to begin user testing in order to test its
functionality and practicality compared to traditional 2D sites. This phase is described in

more detail within the next section.

56

 

' - giSubject Testing

 

Once the development of the interface and website utilizing 3D technology was
finished, the next step was to conduct research in order to see how subjects interacted
with the site and its interface, in comparison to the Green & White.com commercial site.
But before any research and testing was to be conducted, the subject population had to be
identified and subjects had to be recruited and screened properly. Details of the subject

population and recruiting process are described below.

Identifying the Subject Population

 

The subject population for this experiment included students emailed at Michigan
State University with at least basic computer and intemet knowledge, and who have an
interest in sports and like to follow current sports topics and headlines. This subject
population may also have incidentally included women of childbearing age, low income
persons, minorities, and individuals with HIV or AIDS. Overall, there were a total
number of 10 subjects that participated in the experiment, with an ages ranging anywhere

between 18 and 35.

r Justifying the Sample Size

The research conducted for this experiment was intended to provide a first look at
the interactions and reactions of various users as they navigated through a 3D interface
designed to distribute web content. Usability research, where the goal is to identify
serious and minor problems with usability, often uses only 5 or 6 subjects and is believed

to be able to identify 60% of the problems. The type of research conducted for this

57

experiment not only looks at usability, but also at user reactions and attitudes towards
both the 2D interface and 3D interface. So instead, ten subjects were used as opposed to
six in order generate a larger pool of reactions. All ten could have felt the same way
about the 3D site, the majority could have felt the same, or reactions could have been

mixed amongst the subjects.

‘9 Criteria for the Inclusion of Subjects

The subject population for this experiment included students enrolled at Michigan
State University with at least basic computer and intemet knowledge, and who have an
interest in sports and like to follow current sports topics and headlines. Two screening
questions were used to determine whether subjects were qualified to be included within
this subject population identified for this study. Subjects who responded that they used
the web at least once a week to obtain news or statistics about various sports, and who
also responded that they enjoyed using computers to browse the intemet, were all
candidates for inclusion within the study. The two questions asked are below.
/ Question 1:
Do you use the web AT LEAST ONCE A WEEK to read news stories or Statistics about
professional sports? (If no, they were thanked and screening was ended. If yes,
continued to the next question)
/ Question 2:
Do you enjoy using computers to browse the internet? (If no, they were thanked and

screening was ended. If yes, they were invited to be a part of the study).

58

> Criteria for the Exclusion of Subjects

Based on the screening process described above, subjects who did not use the web
at least once a week to obtain news or statistics about various sports, and those who
responded that they did not enjoy using computers to browse the intemet, were all

excluded from consideration for participation within the study.

Recruiting Subjects

 

To recruit subjects, a convenience sample of students was taken based on peer and
friendship networks. I served as the secondary investigator and was responsible for all
initial contact made with potential subjects. I actually knew some of the volunteers
because they had come from peer and friendship networks. However, the association was
not formal - I was not an employer or a teacher or teaching assistant. So the participant
rights were not threatened, nor was there coercion involved with the research. When
initially contacting a potential subject, the candidate was politely asked a question, which
is stated below.

“ Would you like to sign up to participate in a research study comparing 2D and

3D web interfaces to online sports news and information for master thesis

project? If you are interested, I can give you more information ”
Those students who were interested were told that “Participating in the project will take
up to an hour of your time. We would meet in a room with a computer. You would be
asked to explore two sports information web sites, one with a 3D interface, and one with
a 2D interface, while a researcher observes and takes notes. Then you would complete a

short survey about your reactions to the two sites. Does this sound like something you

59

would like to do?” If they said yes, the secondary investigator asked the two screening
questions mentioned previously and if the interested participant qualified for the
inclusion, he or she was shown a sign-up sheet. Once the interested participant picked a
time slot and eventually arrived at the room specified by the secondary investigator

during the screening process, the subject testing session commenced.

Overview of the Subject Testing Sessions

All research and testing was conducted in a controlled lab environment. Upon
arrival, the subject was immediately presented with a consent form detailing what the
experiment was about and any risks and benefits associated with participating in the
experiment. Once the subject had signed and dated the consent form, they were asked to
sit down at the computer workstation to begin the experiment. The secondary advisor
was positioned behind the subject in another chair and took notes with a laptop during
each stage of the experiment. All notes taken by the secondary advisor were logged in
digital form using Microsoft Word and separate templates that were constructed and
organized with the necessary categories. tasks, and questions required for each stage of
the experimental process.

Research was conducted in three stages: The exploratory stage, the task
performance stage, and the interview stage. The first stage was strictly exploratory and
required the subject to freely explore both the 2D commercial website (Green &
White.com) and the 3D experimental website, with the secondary investigator taking

notes of the subject’s interaction with both websites. During this entire process, the

60

subjects were also encouraged to “think aloud” any comments or suggestions they had
when exploring both websites.

The second stage was task oriented and required the subject to perform a list of
tasks compiled for each website, with the secondary investigator taking notes of the
subject’s interactions with each site as well as how the subject performed each task.
These tasks were verbally relayed from the observer to the subject one at a time.

Once a task was completed, the subject notified the secondary investigator and was given
the next task to perform. During this entire process, the subjects were also encouraged to
“think aloud” any comments or suggestions they had while performing each task.

The third and final stage of the experiment was the interview. During the
interview, the subject was verbally asked a series of questions, with the secondary
investigator taking notes of every response to each question. Upon completion of all
three stages, the subject was thanked for participating in the experiment, and was free to
leave. Additionally, any other notes or thoughts the secondary investigator had after each
subject testing session were added to the “Post notes from the observer” sections of the

templates.

Subject Identification

 

In order to make it easier for you to identify and recall what subjects did what and
what subjects said what, instead of referring to each participant as Subject 1, Subject 2
and so on, each subject mentioned in the following sections of this report will be referred

to by an alias name. The aliases used for each subject are listed below in Table l.

61

Additionally, the subject’s gender and major gathered from the survey are also listed in

order to provide you with a better association between the subject and research described.

Table]
(sandman. [Alias ”[Ag'e' ‘ ‘   Geode." " ’Major/Fioldofstudy

Subject 2 Tony 22 : Male Computer Science

Subject 3 Aaron 20 Male Electrical Engineering
Subject 4 Andy . 22 i Male Medicine

1 Subject 5 Tom 23 Male Telecommunication

Subject 6 Kevin : 21 Male Political Science / Pre-law g
Subject 7 Terry : 21 Male Advertising 4
Subject 8 Joey 24 Male i Electrical Engineering
Subject 9 Andrea : 21 Female Telecommunication

: Subject 10 Stacy 2 20 Female Computer Science

A listing of the Subject number, alias used, subject’s age, the subject’s gender, subject’s major

Exploratory Stag;

 

The first stage was strictly exploratory and required the subject to freely explore
both the 2D commercial website (Green & White.com) and the 3D experimental website,
with the secondary investigator taking notes of the subject’s interaction with both
websites. Subjects were asked to freely explore the two sites, viewing whatever content
they choose and “thinking aloud” about the sites as they explore. Subjects had

approximately 15 minutes of exploratory time — seven minutes on each site. An analysis

62

of the subject’s interactions and tendencies after using both interfaces are described

below.

‘\

r 2D Interface: Interaction Analysis and Comments

When exploring the 2D interface (Green & White.com), every subject had their
own method of navigating and interacting with the content displayed. A couple subjects,
mainly Derrick and Aaron, were already pretty familiar with the website and asked to
move on to the 3D website after exploring for a short time. The other subjects took a
little more time to explore and gave a good amount of feedback as to what they liked and
disliked about the site. In addition to feedback, some notable observations and
tendencies relating to how the subjects interacted with the website were also recorded as
they explored the website. These observations and comments are described in further

detail in the following sections.

/ Organization of the navigation bar / drop-down menus:

Typically, most websites either place their navigation bar horizontally across the
top of the page or vertically along the left-hand side of the page. For Green &
White.com, this navigation runs horizontally, and there were a couple of comments made
by subjects about the organization of the navigation bar.

Aaron mentioned that he liked the organization of the main navigation bar and
Kevin and Joey mentioned that they liked the drop-down menus and sub-menus, and how
they appeared animated. Terry on the other hand mentioned that he disliked the drop-
down menus and would have rather had the buttons in the navigation bar take him

directly to the cover pages for each section. Tom mentioned that he did not like the

63

organization of the navigation bar. He wondered why it couldn’t continue with a listing
all the sports instead of just listing football, basketball and hockey and then having drop-
downs with all the other sports. If the navigation bar would have been place vertically
along the side (like ESPN.com) there would have been room for all the buttons. Tom did

however mention that he liked the drop-down menu effects.

1 Opening of pages in another window:

For links that send the user to a different domain, many websites often have the
page open up in another window. Aaron and Andrea clicked on “The Noise” link, which
sent them to a page outside of Green & White.com and they did not initially realize this
and tried to use the back button to go back. Often times this method tends to slow down
navigation because most users like to use the back button on the browser to return to the

previous page instead of exiting out a window.

/ Using Right Click to go bacl_(_:

There are a couple of different methods users can go back to the previous article
or page of a website. The most common method is using the browser back button.
However, there were a couple subjects that used different methods. Tony used a short-
cut key on the keyboard to go back and Andy used the right click button on the mouse to
go back. These are methods that were never thought of as an option in the production.
and methods I personally have never used. However, some users may rely heavily on
these methods for navigation. Even though these details may seem minor, they shouldn’t

be ignored.

64

\/ Using the banner graphic to go Home:

Most websites often make the main banner graphic at the top of the page a link.
sending the user back to the main cover page or “home” page. If Andy wanted to return
to the main cover page, he often used the main graphic at the top of page in order to
return. This is something that could have easily been implemented into the design of the

3D web interface but was overlooked. Some users rely on this feature quite often.

\/ Congestion of information displayed:

News media and information sites typically have a large volume of content that
have to be displayed, and even though Green & White.com has less content than many
other larger news media websites, it still can appear pretty cluttered. Aaron commented
that the 2D interface was really cluttered and that “There’s a whole lot coming at you”.
Specifically, he mentioned that the headlines were very congested. Stacy also had similar
comments about the congestion.

Another aspect that might add to the congestion of headlines and content is that
there are additional headlines and links within the website that do not have any relation to
Michigan State athletics. Terry mentioned this, saying he did not like how Green &
White.com pushed non-related MSU headlines such as the AP headlines from the
Lansing State Journal. Joey, Andrea and Stacy on the other hand, while browsing various
sections, mentioned that they liked how there were AP headlines on the left that

displayed headlines related to other news around the world.

65

V Using the Calendar:

Green & White.com has a calendar graphic where the user can click on the
individual number within the month displayed to see if there are any events happening on
that day. If an event is not registered for that day, it takes the user to a page that allows
the user to search for an event. Tom also tried to access the calendar but initially thought
it was something that you would register events with instead of retrieving information on

what events were coming up in the coming months.

V State-wide search engine:

On the cover page of green and White.com, there is a search box that the web
users can use to search for anything state-wide (Figure 42). This search box also appears
on some additional pages, but it does not appear on every page within the Green & .
White.com domain. Some users rely heavily on search engines like this to find what they
are looking for. Kevin noticed the lack of a search box on some of the pages and quickly
commented that it would be nice to have them on every page. Some search engines can
be annoying, however, because the results that come up are often too broad or they will
list entries that come from archives that have not been active in a while. This is probably

something that would have been fairly difficult to implement in Director.

66

Figure 42
7-DAY SEARCH:

 

[El

Archives: [1999 - l

J

Search box from the home page of Green & White.com

V Virtual Breslin and Jennison multimedia

On the right-hand side of each page within Green & White.com, there typically is
a box or area that displays links to various multimedia. Within this box, there are two
links that, when clicked on, open up interactive simulations of the Breslin Center and
Jennison Field house at Michigan State University. By using a few simple buttons, the
user can rotate the view in order to see the inside of these facilities in 3D. Both Joey and
Stacy were the only subjects that took a look at these to features. and both thought these

features were “really cool”.

‘r 3D Interface: Interaction Analysis and Comments

When exploring the 3D experimental interface, every subject had their own
method of navigating and interacting with the content displayed. Some subjects focused
more on viewing the content where as other subjects focused more on testing the
functionality of the website and providing feedback. Observations and tendencies
relating to how the subjects interacted with the website, along with some of the feedback

produced by the subjects. are described in further detail below.

67

V One h_anded or two-hgngecLapproach:

Most subjects used either a one-handed approach to navigate through the
environment and to click on articles, or they used a two-handed approach. The initial
thought was that users would use the two-hand approach because this is similar to the
controls necessary to play most computer games. However, 6 out of 10 subjects ended
up using the one—handed approach. These subjects included Derrick, Andy, Torn, Terry,
Andrea, and Stacy. When observing, navigating and clicking using the one-handed
approach felt much slower than the two-handed approach because subjects using this

method had to keep switching between the mouse and the keyboard.

V Testing collision detection:

There were a few subjects that tested the limits of the collision detection as much
as possible. These subject included Tony, Tom, and Aaron. Tony and Tom spent a great
deal of time exploring the environment by running into walls and trying to find weak
points in the'collision detection, and both were successful at finding weak points. During
both of their sessions, the interface froze up and had to be restarted (Figure 43). Not
coincidently, these two subjects are both computer science majors, so they may or may
not know a thing about collision detection, or they most likely have had experience
testing other interfaces. Aaron is an electrical engineering major and had similar

aspirations to try to figure out a way to crash the application, but was unsuccessful.

68

Figure 43

Director

‘ I Subterrorlndexcuolrmge
i Mi Iflnndellnane <> "“saieplme that

 

 

An example of what happens when collision detection fails

V Clickable photos and plasma TV

Practically all of the users tried at some point to click on the photos against the
“photos” wall of each locker room to see if there was interaction. The capability to click
on these photos was something that was thought about during production. The original
idea was to make each photo clickable, and with each click, it would swap out the photo
with another. However, the photo slideshow concept was used instead. In retrospect,
after observing how many of the subjects tried to click on those photos, it probably would
have been best to use the previous idea.

Another object within the scene that also had no interaction, but subjects often
clicked expecting interaction, was the plasma TV within the Main Room (Figure 44).

This object was put into the scene because I wanted to experiment with Real Video. and

69

the face of the plasma TV was going to be what the Real Video was going to stream off
of. However, because of performance issues, it was decided that Real Video was not
going to be used. It reinforced the theory that if there is a curious looking object within

the scene, users are going to want to click on it.

Figure 44

 

The Plasma TV against the wall within the Main Room

V Making photos downloadable:

Somewhat related the section above. Tony and Andy suggested that each of the
photos should be downloadable. The method to save photos from an HTML page is
fairly simplistic. The userjust has to move the cursor over the image, right click. and
choose the "save file as” option. In Director however. making this happen would be a

little more complex. especially if all the photos were clickable too.

V Help system:

Both Tony and Andy suggested that a help system, or some type of help menu. be
made accessible after the user begins exploring the environment. The controls text

member is the first thing displayed in the 2D viewing area at the start of the movie. but is

70

quickly replaced as soon as the user clicks on a panel or object. If the user wanted to
access that again, they would have to start the application all over again. A help system
is definitely something that was overlooked and probably would have been implemented

had it been thought of more in production.

V Map Display:

Somewhat similar to a help system, Joey suggested that it would be nice to be
able to toggle a map in order to help the user get a better idea of where they are at.
Although this would have been an interesting feature, how often would it have been
used? The environment is not that large, so a map is not really needed. Perhaps if the
environment was larger, the capability to toggle a map showing the top view of the

environment would have been a nice feature.

V Short-cuts to each room:

Because of the time it takes to navigate to each room, a couple subjects suggested
that some type of short-cut buttons be implemented. Aaron and Andy mentioned that
they wouldn’t mind having short-cut buttons at the bottom of the interface that would
take them to each section of the locker rooms. However, this would somewhat defeat the
purpose of the experiment if all the subject had to do was click on buttons to go to a
particular section. A more reasonable approach would be to have short-cut buttons that
would take the user to the middle of each room, and from there, they could navigate to
the desired section. That way, they would be able to get to the rooms faster, but they

would still be required to navigate through the environment some.

71

V Back and forward buttons:

Most of the subjects, with the exception of Joey, did not utilize the back and
forward buttons during the time they had to explore. Joey was the only one that really
experimented with these buttons and commented that he liked the way the camera moved
from one location to another when these buttons were pressed. This movement is almost
similar to the way the camera and dummy object moves when the arrow buttons are
pressed, but much faster and without having to manually navigate through the

environment.

V Clickable calendar number:

Aaron commented that it would have been nice to be able to click the individual
numbers of the calendar graphic to bring up entries for that day. Although this would
have been feasible to do, it would have been rather painstaking. Each of those numbers
would have had to have a corresponding clickable panel and text members displaying

events for that day. Just how many events are going to be listed on one day?

V Ability to strafe:

Five out of the ten subjects while exploring mentioned that would like to be able
to strafe, or move the camera from side to side instead of just being able to rotate. These
subjects included Aaron, Andy, Tom, Terry, and Joey. This type of motion is commonly
using for most video games, and was actually used in the initial stages of the

development for this production. The right and left arrows were used to strafe and the

72

mouse was used to rotate the camera left and right. However, because of some minor
problems, the lefi and right arrows were re-assigned to instead rotate the camera. Other
keys on the keyboard other than the arrows could have been used to strafe, but they
would have been less practical. If I were to do this production over again, or if was to

tweak or add one thing, it would be to implement some way for the user to strafe.

V Looking up and down:

Joey and Andrea mentioned that it would be nice to have ability to look up and
down. When the subject got too close to an object or wall, they often had to move back
in order to get ever thing within view. Having the ability to look up and down could have
helped with this, but again, more keys would have had to been assigned to accommodate
these controls. Just how many keys are the subjects willing to use during the time they
are exploring the site? That’s a good question. I have a feeling that after initially playing
around with interface and all of the controls at start of the movie, most of these controls

would go un-used by most users.

V Camera clipping:

There were a few comments about camera clipping,.most notably by Tony and
Aaron. This occurred mostly around the doorways of each locker room because the
camera’s field of view is bigger than the dummy object. If the dummy came really close
to the edge of the doorway but did not hit it, sometimes it made it appear as though they
were going through the edge of the doorway because the camera field of view is just a

little larger than the boundaries of collision detection for the dummy.

73

V Scroll wheel capability:

One simple feature that was completely overlooked during development was
ability to scroll through the article using the scroll wheel on the mouse. Tony, Andy, and
Stacy all mentioned that it would be nice to have this capability. I do not know whether
it is capable to implement this using Director, but when thinking about it, it’s amazing
how important the scroll wheel of the mouse has become in during web use. I personally
always use the scroll wheel when scanning through material on the web and rarely ever
use the arrows on the scroll bars. Some mice today even have scroll wheels that have the
tilt feature, which scrolls the window horizontally. This would have been a nice feature

to have implemented and was completely overlooked in production.

V Article soundJand music:

Two subjects, Tom and Terry, made comments about sounds used for the
production. Tom did not like having the music constantly going in the background and
also suggested that there be a way to turn off the “article toggle” sound, saying that “it
can get annoying”. This probably could have been done by inserting a button somewhere
within the interface that toggles the article sound on and off. Terry also made a reference
that the music in the background is a neat feature, but he did not particularly like that it
constantly played. Maybe it would have been best to have the music turned off at the
start of the movie, and if the user wanted to hear it, they could simply click on the radio

representation to start it.

74

V Article display:

There were two subjects, Andy and Kevin, who made some comments about the
way the articles were displayed. Kevin mentioned that he liked the way the article
immediately came up without any delay. Most web pages, after a link has been clicked
on, have a little delay before the page completely loads. This delay is extended even
longer for those pages that have to load through a slower connection. Because the entire
Shockwave movie is loaded at once, this delay does not occur when viewing articles
within the 3D interface. Andy mentioned that he wouldn’t mind seeing the articles come

up in a pop-up window, or some window that can be expanded more.

V Texture Clarity:

The clarity of the textures was a concern for a couple of the subjects. Tom
mentioned that it was hard to see the textures from greater distances, and from certain
angles, they became blurry. Terry appeared to have some problems seeing some of the
textures, often having to squint in order to read headlines and other panels. However,
these textures were not meant to be read from extreme distances or from across the room
anyways, which is what these subjects sometimes attempted to do. Most of the other
subjects responded that they liked the way the headlines looked and that they had no

problems reading the panels and other clickable content.
V Multi-media suggestion:

Tony suggested that it would be pretty neat to have implemented some type of

multimedia within the production, such as streaming video and so on. Initially, there was

75

some experimentation with this, which involved streaming Real Video off of the faces of
objects within the scene. But it would have sapped the performance of the movie and
thus was not used. There is however the capability to use QuickTime in Director too.
Tony stated that I would be cool to be able to play QuickTime movies within the 2D
viewing area of the interface, triggered by clicking on some object with the scene. This
wouldn’t be a bad concept.

Currently, there are an extensive variety of sports information websites, but very
few that have innovated and pioneered new ways to display content. ESPN.com has
made the biggest move by developing ESPN Motion: a multimedia application
embedded into most pages, which provides hi gh-quality streaming video to the user. The
user can stop, play, and select different headlines within ESPN Motion to view different
clips of video.16 Developing more efficient ways to stream audio and video over the web
has become one of the main focal points for many web developers.

One major reason for progress made in the development of streaming audio and
video is the connection speeds users have been able to achieve. Residents living in urban
areas, or close to urban areas, often have multiple ways to connect to the intemet via
cable modem or DSL. Users connected via DSL or cable modem achieve much higher
speeds than when connected via a 56k modem, which opens the door for web
applications that require more bandwidth such as streaming video, and in this case, 3D

content for the web.

V Select and copy text from the 2D viewing area:

76

Another small feature overlooked but often very important when viewing content
is the ability to select and copy text. Tony was the only subject to mention this, but
nonetheless, this should be a standard feature. Also related to this was the observation
that a few of the subjects, while exploring the 2D website, liked to highlight text on and
off while they were reading articles, almost as if they were trying to keep their hands
busy. It’s quite possible that simple interactions like this may help to make some web
users more comfortable when browsing because it keeps them busy. This is something

that was never thought of during production.

Task Performance Stage

 

)9 Parallel Tasks
After the exploratory stage, it was on to the task performance stage. This

method of research involved testing the subject by having them run through a list of
parallel pre-determined tasks for both websites while observing how well they managed
each task without any guidance. Parallel tasks are matching tasks that were performed
for both the 2D interface (Green & White.com) and the 3D experimental interface.

These tasks were verbally relayed from the observer to the subject one at a time
and once each task was completed, the subject notified the secondary investigator and
was given the next task to perform. The data taken from this stage then was evaluated
and analyzed to see if there were any patterns. Ultimately, this research helped to
determine how functional and efficient each interface was to use, as well as providing a
means to compare how well the subject managed a task from one interface to the same

task in the other interface. In all, there were 18 parallel tasks performed by each subject,

77

and each subject had approximately 15 minutes to complete the list of tasks. An analysis

of the parallel tasks performed is below.

V la_s_k_1_: Locate and click on the 2nd Men’s Football headline: “John L. makes a
molehill out of a mountain”.
Performance Analysis:

For this task, the objective for the 2D interface was to see what drop-down menu
the subjects would use. There are the 3 main drop-down’s featuring the 3 most trafficked
sports such as basketball, football, and hockey, and then there are 2 drop-down’s
featuring a listing to all the sports for both women and men. All but Tom and Stacy, or
80 % of the subjects, used one of the 3 main cover buttons, in this case football, to access
the cover page.

The objective for the 3D site was simple: to see how well the subjects managed
to find the football section and the headline representing the article. All subjects
immediately started from the main room and knew which locker room they had to go in,
and all but Andy, Joey, Stacy, or 70% of the subjects, found the headline with little
hesitation. Those subjects that did hesitate some, or had some delay in reaching the

section, the time it actually took to reach the section was very minimal.

V Task 2: Locate and click on the 3”d Women’s Softball headline “Green, Peterson are

all-region”.

Performance Analysis:

78

For this task, the main object was similar for the 2D interface as the previous task,
but aimed to see how well each subject found the women’s softball section under the
drop-down. Because this was not a more trafficked sport, it did not have its own button
along the navigation bar. All but Tony, or 90% of the subjects, was able to instantly
locate the section under the navigation bar without any delay. Tony cycled through a few
different drop-down menus, but eventually found the section in little time.

The main objective for the 3D interface was to see how well the subjects found
and navigated to the headline. First they had to recollect what room the women’s sports
were in, and then navigate to it. All subjects did so instantaneously. In regard to finding
the actual headline, all but Derrick and Aaron, or 80% of the subjects, found the headline
with little delay. Both of those subjects had to navigate around and look at the other

sections before they found the right one.

V M3: Locate and click on the 2nd Main Cover headline “MSU Sports Digest —
Published 7-22-2004”.
Performgnce Analysis:

The main objective for the 2D interface was to see whether the subjects made an
association with the word “Cover” and the home page, and also to see the method they
used to get there. All subjects but Joey, or 90% of the subjects, used the “cover” button
within the main navigation bar to locate the article on the front page. Joey ended up
using the browser back button to return to the cover page. Additionally, all but Derrick
and Tom, or 80% of the subjects, had little trouble finding the link. Tom and Derrick

ended up searching around the page for the link a little before finding it.

79

The main objective for the 3D interface was to see if the subjects would make the
association between the “cover” and the main information board where all of the main
headlines were placed. 100% of the subjects made the association and navigated to the
headline with ease. Terry had some delay reaching the information board, but only
because he tried to use the back button to return, which did not work because he had not

previously clicked on anything in that section.

V Ia_sk_4: Locate and click on the Men’s Football “Roster”.
Perform_ance Analysis:

The objective for the 2D interface was to see what method the subjects used to get
the roster. There are two ways: the first is by going the “football” drop down and
selecting the roster, or by going to the cover page for football and clicking on the link on
the left hand side. 60% of the subjects ended up using the drop-down menus rather the
in-line page links. Not coincidentally, the other subjects, who included Joey, Andrea,
Derrick, Stacy took longer to find the roster information. It seems as though information
can be accessed much quicker by using the drop-down menus.

The objective of the 3D interface was to see if the subjects would associate the
rosters with the clickable roster panels on all of the Whiteboards within each section.
When clicked, the lockers of each section will also bring up the roster information, which
was also noted if performed. 90% of the subjects had little trouble making the
association and bringing up the roster information, with the exception of Derrick who

clicked on the hockey roster instead and took some time to locate the men’s football

80

roster. Tony, Tom, Kevin, and Andrea, or 40 % of the subjects, ended up clicking on the

lockers instead of the panel onthe whiteboard.

V l§s_k_§: Bring up the previous article “Green, Peterson are all-region”.
Performafle Analysis:

The sole objective for the 2D interface was to see whether the subjects used the
back button on the browser, right click, or short-cut key to go back to the previous article
instead of simply recalling where the article came from and navigating to the section to
click on the headline. Only Derrick, Tony, and Stacy, or 30% of the subjects, used the
methods above to go back to the previous article. All of the other subjects tried to recall
what section the article was in. Not coincidentally, these subjects took longer to find the
previous article than those subjects that used the browser back button or some other
method to go back.

The sole objective of the 3D interface was to see if the subject would use the
interface back button to go back to the previous article and camera position. Derrick,
Andy, Tom, Kevin, Terry, and Joey, or 50% of the subjects, used the back button to go
back to the previous article. This was encouraging to see. All of the other subjects

navigated back to the section of the article, which took more time.

V Task 6: Return to the Men’s Football “Roster”.
Perform_ance Anyalysis:
Like the previous task, the objective of the 2D interface was to see what method

the subjects used to return to the men’s football roster. All but 30% of the subjects

81

 

 

manually navigated to the men’s football drop-down menu to select the roster. Derrick
used the browser back button, Andy used the right click on the mouse, and Tony used the
short-cut key and also mentioned that he would have used the buttons found along the
side of some mice that, when clicked, take the user to the previous page. It is interesting
that more subjects think about using the back button more so than the forward button.
The objective of the 3D interface was to see whether subjects would use the
forward button to return to the men’s football roster. All but Andrea, Stacy, and Aaron,
or 70% of the subjects, used the forward button to return to the previous selection. And
much like the results from using the back button, users were able to return much faster

using the forward button than if they navigated manually.

V M: Locate and click on the Women’s Softball “Roster”.
Performance Anglysis:

The Objective for the 2D interface was to see if those subjects that used the drop-
downs to select the roster in the previous task would be able to locate the roster link for
women’s sofiball. Because this sport does not have its own button on the navigation bar
like football, basketball and hockey, the link to the roster was only accessible by going to
the cover page and clicking on the roster link on the left-hand side. However, all of the
subjects managed to find the link with ease.

For the 3D interface, because the subjects had performed a similar task to bring
up the men’s football roster, every subject accomplished this task with ease. However, it
was noted that some of the subjects started to use the back and forward buttons more

often. Joey, Terry, Kevin, Tom, Andy, Aaron, or 60% of the subjects, all used the back

button in some way to navigate to a location closer to the article. So instead of using
these buttons to go back and forth between articles, the subjects started using these for

navigational purposes so they didn’t have to manually navigate to the section.

V Ia_sl_<_§: Locate and click on the link to go to the “Michigan State University” official
website. Exit out when completed.
Performance Angiysis:

The objective for the 2D interface was to see how well the subjects managed to
find the area where there are links to all of the official websites of the schools within the
Big Ten conference. This area is located on the cover page, below all of the headlines
and other content, which can sometimes be overlooked. 60% of the subjects had some
sort of difficulty find this area. Most of these subjects either cycled through the drop-
downs or went to other various pages to try to locate the link. This was most likely
because the subjects had to scroll down in order to bring this area within site on the cover
page, so the placement made a big difference.

The objective for the 3D interface was to see whether the subjects made an
association between the flags in the main room and the links to the official schools within
the Big Ten conference. 40% of the subjects had some difficulty making this association
initially, but found after a short time. Both Derrick and Tony had to navigate around
main room for some time before realizing the flags. Joey and Andy initially thought that
they would be able to access the link from the main information board and had to look

around before finding it.

83

V 31532: Locate and click on the Men’s Hockey “Schedule/Results”.
Performance Apalysis:

The objective for 2D interface was to see whether the subjects could locate the
men’s hockey schedule and results by either using the drop-down entry or using the link
on the left-hand side of the hockey cover page. Because this task was much like the one
that required the subject to find the men’s football roster, most of the subjects found this
with ease. 60% of the subjects used the hockey drop-down menu and the other 40% used
the link within the hockey cover page.

The objective for the 3D interface was to see how well the subjects could locate
the schedule results panel on the whiteboard within the hockey section. 100% of the

subjects were able to locate this panel with ease.

V Tas_k10: Locate and click on the Women’s Basketball “Schedule/Results”.
Performance Anilysis:

Because of the previous tasks, all subjects performed the above task for both the
2D interface and 3D interface with ease, and the task probably could have been
eliminated. At this point, it seemed like some of these tasks had become repetitive

because the subjects have become more familiar with the interfaces of both websites.

V Task 11: Locate and click on the headline from Columnist Todd Shultz: “Coaches

secret - other interests”.

Performance Analysis:

84

The objective for the 2D interface'was to see whether subjects could locate Todd
Shultz’s columnist section. This was typically located on most of the web pages within
the Green & White.com domain along the left-hand side, half-way down the page. 30%
of the subjects had some initial difficulty locating this section. Tony, Tom, and Joey
scrolled through various drop-downs looking for it. However, most of the subject found
this section pretty quickly, most likely because it is more graphical with a picture of
Todd, and it is also on most pages within the Green & White.com domain.

For the 3D interface,‘none of the subjects had any type of difficult finding the
column. Because the subjects started out in front of the information board, which is

where the column was located, it was probably much easier to recall where it was.

V M: Locate and click on the link to go to the sponsor: “Gannett”. Exit out when
completed.
Performance Apply/sis:

The objective for the 2D interface was to see whether the subjects could locate
where links to the sponsors were located. These were graphical representations located at
the bottom of every page within the Green & White.com domain. 90% of the subjects
found the link with relative ease. Most websites typically have links at the very bottom
of the page and one of the links usually is for sponsor information. Based on the
subjects’ performance, it would be safe to assume that most of the subjects knew
immediately where to go to find information about the sponsors.

The objective for the 3D interface was to see if the subjects could locate the same

link. Most of the subjects were already in close proximity to the board for the sponsors

85

because of the previous task which took them to the main room. 90% of the subjects
quickly identified and found the sponsors board. Only Stacy had some difficulty finding
it, often looking for it on the main information board. Placement of these sponsors on the

main board actually would not have been a bad idea either.

V TQM—3: Locate and click on the Recruiting headline “Neitzel has Skiles-like skills,
demeanor”.
Performance Argilysis:

The objective for the 2D interface was to see whether the subjects had difficulty
finding the recruiting section, which can be accessed by clicking on the “recruiting”
button within the main navigation bar. Only one subject, Terry, had any sort of difficulty
locating the link. Because he knew the article related to men’s basketball, he kept trying
to locate the article in the men’s basketball section instead of the recruiting section.

The objective for the 3D interface was to see whether the subjects could identify
and locate where the recruiting Whiteboards were in each locker room. This was a little
bit different than the 2D interface because it had been split into two different categories,
men’s recruiting and women’s recruiting. The recruiting button on the 2D interface took
the subjects to a page with a listing of all recruiting headlines, women’s and men’s
combined. 50% of the subjects had trouble finding the whiteboard displaying the article.
Stacy, Bianca, Joey, Terry, and Kevin all tried navigating to different sections trying to
find the headline. A few of the subjects knew that the article related to men’s basketball,
so they kept trying to find the headline in that section. The others tried to find the

headline by looking on the main information board. Maybe this whiteboard should have

86

 

been made more visible, or maybe each sports section should have had a panel or area

that displayed information about recruiting for that sport.

V w: Locate and click on the Recruiting headline “McCallie’s secret: Improved
recruiting”.
Performance An_alysis:

After performing the previous task, this task was performed by all subjects with
relative ease for both interfaces and seemed rather repetitive. For the 2D interface, the
subjects were already on the page they needed to be because of the previous task. Some
subjects, however, did take a little time when scanning through the links because, as
Andy commented, they appeared really congested. For the 3D interface, all the subjects

had to do was navigate to the women’s locker room and locate the recruiting whiteboard.

V Task 15: Bringing up information on how to contact Green & White.com.
Performance Apalysis:

The objective for the 2D interface was to see which method the subjects used to
bring up information on how to contact Green & White.com. There were two ways to do
this. One was to use the “contact” button in the main navigation bar and the other was to
use the link at the bottom of the page to open the contact information page. 80% of the
subjects used the contact button in the navigation bar instead of the link at the bottom of
the page, most likely because it was more obvious and visible.

The objective for the 3D interface was to see whether the subjects associated the

flat anel com uter as a wa to contact the site. 70% of the sub'ects made the association
P P Y J

87

 

and located the flat panel monitor with ease. Andy, Kevin, and Terry on the other hand
initially went to the main board to look for the contact information link. It seems one of
the main disadvantages of having the information board is that some of the subjects
expected most of the general content (sponsors, links to Big Ten schools, so on) to be
displayed on this board. Maybe it would have been best to break this content up and
place the separate categories against the walls on separate Whiteboards, much like how

the content is displayed in the locker rooms.

V Lash 16 — 2D Interface: Locate and click on the “3/25/2004 Season Review” link to
open “Photo Gallery” viewer. Exit out when completed.

V Task 16 — 3D Interface: Start the Men’s Photo Slide show. Stop photo slide show
when completed.

Performance Apalysis:

Although these tasks were not exactly parallel, the objective was to focus on how
easy it was for the subjects to access the photos. For the 2D interface, there are
“Galleries Archive” links state-wide that send the user to a page with various links for
different sports and, when a link is clicked, a photo gallery viewer will open to which the
user can cycle through photos. However, it was a little bit confusing to some subjects
because they thought the “Galleries Archive” links within particular sections like football
would bring them to a page displaying links exclusively for that sport, instead of every
other sport too. Roughly 7 out of the 10 subjects second-guessed themselves. Most of
them actually went to the galleries archive page, but did not locate the link among the sea

of links, and ended up browsing around some more before they finally realized the

88

location of the link. This could have been attributed to the fact that a particular sport was
not specified.

For the 3D interface, the objective was to see whether the subjects knew how to
turn on and off the photo slideshow. A 100% of the subjects were able to start and stop

the slideshow with ease.

V Lask 17 -— 2D Interface: Locate and click on the “2002 Softball Practice” link to open
“Photo Gallery” viewer. Exit out when completed.

V Task 17 — 3D Interface: Start the Women’s Photo Slide show. Stop photo slide show
when completed.

Performance An_alysis:

Again, this task was a little repetitive. Even though most of the subjects were
already on the same page with the location of the link, 40% of the users ended up going
to the softball section to look for the link because the task specified that they find the
“2002 Softball practice” link. Once they were within the section, they all clicked on the
galleries archive link, which sent them to the same page they were just on. So this got a
little confusing to most of the subjects. For the 3D interface, none of the users had any

problem activating and deactivating the slideshow.

V Task 18: Locate the calendar entry: Sat, 9/4/2004, “Rutgers”, Football.
Performance An_alysis:
This is probably the task that caused the most problems for subjects within the 2D

interface. The objective was to see if the subjects could find the calendar entry above.

89

The problem was that the calendar graphic only displayed the current month and most
subjects tried clicking on this graphic multiple times thinking they could change the
month to September. But this was not an option. If they had clicked one of the
individual numbers, it would have brought up a search page, to which they could then
enter in the dates and get a list of results for the date entered. However, 80% of the
subjects did not realize this and spent a great amount of time looking for the entry
elsewhere. So this was a rather confusing for most of the users.

The objective in the 3D interface was to see if they could locate the entry from the
calendar graphic located on the main information board. The graphic of the calendar was
pretty visible, and the subjects had visited the information board a few times before, so

none of the subjects had any problems completing the task.

)‘v Non-Parallel Tasks

The following are non-parallel tasks performed by the subject exclusively for the
3D experimental interface. The reason these tasks were exclusively for the 3D interface
is because they involved interaction with features that were not represented within the 2D

interface. An analysis of the non—parallel tasks performed is below.

V Task 19: Start and stop the “MSU Fight Song” music playing in the background
' Performance Analysis:
Most of the subjects were able to toggle the sound on and off in the exploratory

stage and did not have any trouble doing the same for this task. Only Andrea had trouble

90

identifying what object turned the music in the background on and off, which was the

representation of the radio.

V M: Open up the caption (or article) displaying what other MSU Men’s sports
are covered in the section.
Performance Analysis:

The objective of this task was to see if the subjects knew where to locate the list
that displayed what other MSU men’s sports were covered, which was located in the
“Other MSU Sports” section within the men’s locker room. This list could be triggered
by clicking on the “What Sports” panel of the whiteboard or the lockers. Initially, a
couple of the subjects were confused by the question and did not know what to do, so the
task had to be repeated. But after a short time of exploring, every subject managed to

complete the task.

V Task 21: Open up the caption (or article) displaying what other MSU Women’s
sports are covered in the section.

Performance Analysis:

 

Once the previous task was performed, there was no more confusion, and all of
the subjects completed the task with relative case after navigating to the “Other MSU

Sports” section within the women’s locker room

V Task 22: Use an alternate way to bring up the Men’s Hockey roster (besides the task

you did previously that required you to click on the “Roster” link).

91

Performance Analysis:

The objective of this task was to see if the subject could trigger another way to
bring up the men’s hockey roster, besides the method they used to bring up the men’s
football roster from a previous task. The subject either could click on the lockers of the
hockey section or the “Roster” panel on the whiteboard. All subjects quickly identified

the alternate method and completed the task with case.

>- Post-notes and Analysis from the Task Performance Stage

It was interesting to see how some of the subjects navigated through the 3D
interface. Once the subjects became familiar with the 3D interface and where objects
were located within the scene, recognizing where to go for each task was almost
immediate as the testing went on. It was also interesting to see that some of the subjects
started to use the back and forward buttons to move around the environment, instead of
using the arrow keys to manually navigate. This definitely reinforces the idea that there
should be some sort of short-cut buttons that can take the user to each of the rooms.

Within the 2D interface, a couple of the tasks caused confusion, mainly the tasks
that involved the calendar and photo galleries. The entire method to search for events in
the calendar was confusing for most subjects. It also appeared that some of the material
and headlines within the 2D site were a little hard to find because of the congestion of the
information. The headline could be right in front of them, but would get overlooked

because of all the other surrounding information.

Interview Stage

The third and final stage of the research process was the interview. During the
interview, the subject was verbally asked a series of questions, with the secondary
investigator taking notes of every response to each question. Each question and the

response are detailed in the following sections.

Table 2 summarizes responses to demographic questions.

93

Table 2

 

>85

 

 

865x
zoON
wEmEo>w< Ebb
oocofim Bog—om 5.6M
05332 Bob
o. _Nmo
mctoofiwcm .8585 N 03521 boa/x,
SN :23
owfio>< N nothgEEoooEH N .N 8 =83“.
oN 80¢
2:5 bo> N owEo>< _ meteofiwcm 8 038$ N wows: mach
own
owneo>< o>on< o owm8>< o>on< a maroofiwcm— 83an0 a .258 w Hooansm onoQ
$885 mtomm omens—302M $8980 zuBm mo EQEEoFEf 8280 09.. mm=<

 

 

 

 

 

 

 

Summary of responses to demographic questions

94

V Have you ever visited another 3D based website prior to this experiment?
Question An_alysis:

3 had not done so, 7 had done so. If subjects said “Yes”, responses are listed below.

Aaron stated that he did so for a previous experiment. He interacted with a 3D State
museum and an Adobe Atmosphere site. He also stated that he “didn’t really like it”.
The controls were not too good and it felt buggy. Kevin also stated that he went to
another experiment and visited a 3D State website and Adobe Atmosphere website. They

were good, something new. It was interesting.

Aaron stated that he had visited an online 3D church: you could be a character and chat
with other users using the application at the same time. He states “it was all right”. It

reminded him of a video game for the most part.

Derrick stated that he could not remember the names. They related to Student Orgs and a
couple company websites. They had some form of 3D, but you could not walk through

it. It was a good experience, but most took too long to load.
Joey stated that he has visited some virtual environments using flash, but nothing where

he could navigate through to bring up articles. Its fun for a little while, but it gets boring

after a while. “Depends on how often you go”.

95

Andrea states, “I know I have” but cannot remember. She couldn’t remember any
specific ones. There were two research projects for the college. “I think one was a
classroom and the other was a campus”. She disliked the classroom one because “it felt
very sterile”. There was nothing she disliked about the campus one.

Stacy stated that she has visited a 3D restaurant site and some motel sites that used 3D
and loved it. ...thought it was cool. As an international exchange student, she stated she

would have liked something similar for something like the dorms for orientation.

V Have you ever visited an online sports information site? If so, which site(s)?
How much time do you spend browsing during a 7-day week?
(mestion An_alysis:

All 10 subjects said yes. lf subjects said “Yes”, responses are listed below.

All subjects stated that they have visited ESPN.com at some point. Derrick said he visits
Bitter Rivals and MLive.com. Derrick and Tony have visited Fox Sports. Aaron and
Kevin have visited Green & White.com and Spartan Tailgate.com. Andy has visited
Sportsline.com and SoccerNet.com. Tom, Kevin and Andrea have visited MSU
Spartanscom. Kevin has visited the Detroit Free Press Online. Terry has occasionally
visited Sports Illustrated.com and sometimes the state newspaper sites. Joey has visited
USSoccer.com and ESPN’s Soccemet.com. Andrea has visited Pacers.com, various
minor baseball sites, CBS Sports, various local newspapers and the Indy Star. Stacy has

visited F1.com.

96

Derrick spends about 2-3 hours per day browsing sports sites, about 21 hours per week.
Tony spends approximately 1 minute per week, Aaron spends an average of 7 hours per
week, and Andy spends approximately 7 hours per week. Tom generally spends about 5
minutes a week browsing sports information websites. He said it depends on whether a
MSU team is in action. If in action. . .he spends more time. . .if not. ...he doesn’t spend as
much time. Kevin spends approximately 7 hours a week, Terry spends about 3.5 — 7
hours per week, Joey and spends 10-30 min a week, and Andrea spends about 2 1/2 hours
per week. Stacy spends 20-30 minutes per week browsing sports information sites. She

said it depends on whether a race is that week.

V During testing, which website did you prefer: the traditional 2D commercial site

or the experimental site using 3D technology?
Question Analysis:

4 subjects preferred the 3D interface, 6 preferred the 2D interface.

Derrick stated that he preferred the 3D site because it was something new and made
things easier to find. Stacy stated that she liked the 3D website because “the 2D site is
everywhere. It is more interactive, new. It’s a pretty logical”. Terry stated that the 3D
site was more fun. He wished there would have been more short-cuts. It was fun to look

at. Looked smaller, but it was probably limited as to how much stuff could be put on it.

97

Andy stated that he would prefer the 3D if there was a quicker way to get from one topic
to the next. He enjoyed the layout, but “there was too much physical time to get there”.
He stated that he preferred the 2D website in the end because it was faster to go where he
wanted to go. Tony stated that the 2D had a lot more info. “Once you’re familiar with it,
you can find everything pretty fast”. He also stated that he did not have learn how to use
2D website, but had to learn how to use the 3D website. Kevin stated that he liked the
3D website. It was easier to see content, headlines, and sections. Overall, he liked the
3D. The 2D was a little faster, but only because you had to learn how to use the 3D

website.

Aaron stated that he liked the 2D site. The 2D site “is what I’m used to”. It is easier to
get from place to place. In 3D you had to walk from room to room. He also stated it
would be better if there were short-cuts. Tom stated that he preferred the 2D because the
navigation was easier than the 3D site, plus the keyboard mouse combo is more

problematic; He also noted some things about the collision detection.

Joey stated that in this case, he probably would prefer the 2D site because it was easier to
navigate, but purely for practical reasons. The 3D was entertaining, but for regular use,
he stated that he would prefer the 2D site._Andrea stated that she preferred the 2D website
because of familiarity. However, she stated that during the tasks, she did not feel as

familiar with it.

98

 

V Which website was easier to use? Did you have any trouble navigating through
the 2D website or the 3D website environment?

Question Anglvsis:

4 subjects said the 3D was easier to use. 4 thought they were equally easy to use. And 2

said the 2D was easier.

Denick stated that the 3D site was easier to find things than the 2D site, like the sponsors.
But the 3D site took some time to get from section to section, especially the way the tasks

were organized: Men’s to Women’s, back to Men’s. Andy stated that the 3D was easier

 

to navigate through. The 2D was harder because of the huge list of articles. He also '
stated that the 3D website had an intuitive way of organization, but the physical time it

took to navigate was bad. Kevin stated that there was no time involved with the 3D site.

In 2D, a couple times he had a hard time finding something. In all, he thought the 3D site

was easier to use. Joey stated that he had trouble with the 2D website because there was

so much content thrown at you. He liked the 3D website because it was separated by

men’s and women’s, but it took a while to get from each section to each section. 3D also

“gave you a visual reference, to help you locate what you were looking for”. Andrea

stated that the 2D website was harder because everything was spread out all over the

place. She states, “The 3D site, once I knew where everything was, it seemed very

organized, but it took a while to get there”. Overall, the 3D site was easier.

Terry stated that overall he preferred the 2D site because of familiarity. He knew how to

work it. Tony stated that 2D website was hard to navigate because “I was unfamiliar”

99

 

with it. He also stated that the 2D was really cluttered. The 3D needed a scroll feature
for article. He stated it felt like he could get to items more immediately in 2D. Aaron
stated that the 2D website was easier, but he didn’t really have any problem with either of
them. “I’m a computer pro”. You had to walk from room to room in the 3D website.
There could have been a lot more info in the 3D site. Tom stated that one site was not
easier to use than the other. Because of the keyboard mouse combo, it made the 3D site
more problematic. He also noted that the calendar on the 2D site was a bit confusing and

that the months should have been swappable.

Stacy stated that the 2D website had a lot of information and was hard to navigate
through, especially the small font ones. Todd Shultz was easy to find because of the
picture. There is just so much info within the 2D website, plus she did not like the way it
directed to the main Lansing State Journal. She preferred the 3D website, but it would

have been more difficult if there was more content.

V If you rated 1 for question 5, did the content displayed in the 3D interface seem
confusing or difficult to understand? If you rated 2 or 3 for question 5, did the
content seem easier or more difficult to understand?

Question An_alysis:

2 subjects said it was harder, 6 said it was the same, and 2 said it was easier.

Derrick stated that there were NO complications, easy to use. Andrea stated that the 3D
site was easier because it was right there on the right. The 2D website “had all this crap

on the right and left side of the article”.

100

 

 

Tony stated that he did not really read in depth, but he could understand the content well.

Aaron states, “Say it’s about the same as normal sites”.

Andy stated that the article would be easier to read if it was expandable and wider. He
also stated that he would have preferred a pop-up feature, possibly having multiple

windows open at once.

Tom stated that the 2D site was cluttered when it came to looking for headlines and that
he had to use the search a couple times. The 3D site headlines were blurred from a

distance and could have used a thinner font.

Kevin stated that it was different, the way the article pops up on the right hand side. He

states, “If it’s there, I’m gonna read it”. But neither site was easier or more difficult.

Terry stated that he had trouble with 2D calendar task and the gallery section. He said it
was fun navigating through the 3D site using the arrow keys, but going back and forth

was annoying. He wished there would have been short-cuts.

Joey stated that one site was no easier to use than the other. “When you clicked on it the
article came up”. Referring to the 3D site, he states “It did give you a 2D aspect though”.
“If it popped up on say a wall or something, I think that would be frustrating”. It was

nice to have a combo.

101

Stacy stated that she thought the headlines were blurry, but the articles were fine. She

also had to circulate around the room to see the headlines correctly.

V Were there any bugs that came up, or technical problems that occurred during
your testing of the site using 3D technology?
Question An_alysis:

6 subjects said no bugs, 4 encountered bugs.

Derrick stated that the music and sounds were not playing, and he went right through the
wall into black. He had to restart the 3D site. Tony stated that it crashed a couple times
and he had to restart. There was clipping with the camera, appearing to go through some
walls. He also stated that after you clicked on a website link, you had to click within the
w3d to gain control back. Tom stated that he could walk through the walls and through
the tables and chairs sometimes. Kevin stated that it crashed the one time on the back

button operation after pressing it really fast a few times. It had to be restarted.

V How did you feel about your 3D experience? Did it frustrate you? Was it
enjoyable? Describe any feelings you had.
(mestion Analysis:

6 subjects said it was enjoyable. Two were unsure. Two said it was frustrating.

102

Stacy stated that it was very exciting and was not frustrating at all. It was a lot like a
game. “If I had to do it every day, it would not feel professional”. Derrick stated that he
thought it was enjoyable, interesting, and something new. He thought “wow” and didn’t
know what to expect, but “it surprised me” gTony stated that “it was enjoyable”. He also
stated that he wished there was more content. In general, it needed more content. The
interaction did not matter to him as much. Aaron states, “I’d say it was enjoyable”, it was
different. Graphics were pretty decent. Kevin stated that “it definitely did not fi'ustrate
me”. It was a little different. It was nice to move the guy around. It was a cross between
the new and old, with being able to navigate, but also being able to use the back buttons.
Joey stated that it was enjoyable and entertaining. He also stated that “On a day-to-day

basis, I would prefer the 2D site”.

Andy was somewhat unsure and stated that it “felt like more of an exploration instead of
a digital newspaper”. Tom stated that “It was new experience, but not really”. A lot of
Flash multi-media used flash media graphics. so it’s not really anything different then

what we have out on the web already.

Terry stated that while getting around, he got a little frustrated. Navigating from room to
room was difficult and annoying, but navigation through the actual content was not.
Andrea states, “I was frustrated when performing the tasks”. “But once I started doing it,

it became better.”

103

V Did the 3D sports website environment feel realistic? If so, what elements felt
realistic? If not, what elements did not feel realistic?
Question Analysis:

8 subjects said that it felt realistic, 2 said it did not.

Tony stated that it did not feel very realistic. He could not look up and down. The
models did not look real. Anti-aliasing felt wrong. He saw black from a distance. But
the movements, forward, left, right, felt real. He would have liked to look up and down.
Tom stated that it did not feel that realistic. He saw seems in the walls and lockers.

Some of the colors were off. The chairs looked pretty good though.

Derrick stated that it “Felt realistic”. He was a bit skeptic as to whether the lockers from
the 3D site really looked like the actual lockers from the real locker room but everything
in the Locker rooms looked pretty realistic. He states that the only thing that did not
seem realistic was the Main Room Information Board because “that probably would not
be in a locker room”, and the music probably wouldn’t have been playing either. There

would not have been band music playing in the background. But it was a cool feature.

Aaron stated that it was realistic. The jersey’s felt realistic. The TV that didn’t work felt
un-realistic, but other than that, it felt pretty realistic. Andy stated that it felt realistic in

the event of the motion back and forth. The search method was realistic, intuitive. There
wasn’t really any un-realistic stuff. Kevin stated that it felt “Realistic-enough of me” “It

made sense, a locker room for sports”. Nothing was random. It was all pretty obvious.

104

Terry stated that the locker rooms felt really realistic. He also said the dry boards with
the headlines felt pretty realistic. Joey stated that he thought it felt realistic. The music
in the background, the slideshow on the wall, individual lockers and uniforms, chairs, and
the whiteboard font all felt pretty realistic to him. However, walking through objects and
the blurriness of the images sometimes did not feel realistic. Andrea stated that it felt
pretty realistic, the locker room. “Most people do not get to be in a locker room. But it’s
not something that distracting”. She also stated that walking through the chair felt
unrealistic. Stacy stated that she thought it was realistic, but “not in a sense that I was

walking through it in real life”. But in a graphical sense, it was realistic.

V At any point did you feel nauseas during testing?
Question An_alysis:

All 10 subjects said no.

V Having experienced the website using 3D technology, would you like to see more

sites developed that use similar 3D technology?
Question An_alysis:

7 subjects said yes, 2 were unsure, and one said no.

Kevin stated “Sure. . .why not. Try it out. The more options the better”. Terry stated that
yes, he would like to see more developed, but it depends on how they present it. Like the
sports concept and how it was set up with the locker rooms. “It’s hit or miss”. So for

instance, the metaphor is good, but if it wasn’t and it was just more random objects. . .than

105

 

 

no. “So yes, I would like to see more”. “It’s much more interactive”. Andrea stated that
she thinks it’s a beneficial tool for learning. “It’s easier to pick up things”. 2D sites tend
to change their organization and navigation more often. Stacy stated, “Sure, the dorm

room one or 3D version of that” or “Even for Formula 1”.

99 66

Derrick states, “I would like to see it. , A lot more sites”. Aaron states “Yea sure. You
can get more information on a 2D site, but 3D felt like an overall immersive experience”.
Tom stated that he liked the 3D objects in the form of graphics and stuff because they
stood out realistically. Graphically. . .yes, functionally right now. . .no. He states that
“pretty much whenever memory catches up processor speed”, maybe he would like to see

more sites developed.

Joey stated that he thinks so, but only with certain websites. Not with news websites or
sites that are constantly updated. Like websites built for movies and sites that you can
have a metaphor or theme to it. He also stated that it makes you feel more into it. Andy
was a little more non-committal about whether he would like to see more 3D sites and
stated that he wouldn’t mind it as long as they had buttons (short-cuts) to go to areas

faster.

Tony said no, stating that “I surf the intemet for content. If I want interaction, I’ll play

games”.

106

 

 

‘iv' Post-notes and Analysis from the Interview Stage

The most interesting data collected from the interview stage was that 4 out of 10
subjects preferred the 3D interface more so than the 2D interface. I thought it would
have been around 1 to 2 subjects, or 20%, that would have preferred the 3D interface over
the 2D interface, so the results were somewhat surprising.

I also noticed that those subjects that said they preferred the 3D interface over the
2D interface, and mentioned that they would like to see more development of similar
interfaces, also had and medium to high interest in sports, so there is a definite correlation
there. Those subjects that had a higher interest were less critical and more forgiving.

It was nice to see that 6 out of the 10 subjects thought their experience with the
3D interface was enjoyable and 2 out of 10 were unsure or non-committal. Also related
was the ease of use of each interface. 4 out of 10 said the 3D interface was easier to use,
another 4 said the 2D interface was easier, and the other 2 said it was about the same.
This tells me that they had a relatively easy time with navigation and they did not get
frustrated that often, which is critical if you want users to keep coming back.

As far as the suggestions are concerned, the short-cut buttons to each room, the
ability to strafe, and the ability to scroll and copy text were a few of the most common
suggestions. All of these suggestions could have and should have been considered in the

design, but were overlooked, neglected, or just plain forgotten about.

107

I" “vi"

3: Conclusions

 

 

To emphasize again, the objective of my thesis was this: to create a functional,
efficient website that utilized 3D technology as means of navigating through content, and
then test its functionality and practicality by subjecting it to user testing. Based on the
results of the research, I would have to say my thoughts are somewhat mixed as to
whether this type of technology would be a good alternative to what already exists on the
web today. Are 3D interfaces such as the one developed for this production practical
enough to be considered for use in the development of websites?

First of all, in order for this type of technology to be considered, many of the
features overlooked or neglected during the development of this production would have
to be included in most designs. There were many little things, or not so little things, that
could have and should have been implemented. Some of these features included the
ability to select and copy text, being able to save pictures and images, and the ability to
use the scroll wheel to scroll through content. These features may seem minor, but all
have become standard interactions of web use and are interactions that most users expect
to be capable of doing.

Other features overlooked or neglected that would have made it much easier on
the user in terms of navigation included the ability to strafe, the ability to look up and
down, being able to access a help system, and possibly providing short-cut buttons to

speed up the time it takes to navigate through the environment. These short-cuts. along

108

the ability to strafe, were two of the most common topics brought up during subject
testing amongst the subjects.

With all this being said, there were some great things that came out of the
research that provided a great amount of optimism. I particularly liked the response by a
couple subjects during interviews who mentioned that they thought the interface was
more immersive and they felt ‘more into it’. There are not very many websites on the
web today that have the capability to bring out these types of feelings amongst web users.
This is something that might'give 3D interfaces an edge over 2D interfaces in the future —
the ability to immerse the user. If a proper theme or metaphor is carefully thought of, it
certainly helps to make the user feel more immersed into the interface.

Although 60% of the subjects said they still preferred the 2D site, many of them
mentioned that their familiarity with using 2D interfaces was the main reason why. This
is something that comes with time. Some of the subjects initially had a hard time finding
certain sections during the task performance stage, but once they Ieamed where
everything was situated and became more familiar with the layout, the tasks were
completed much faster. Like every new development that comes out on the web, users
often have to adapt, and it would be no different if 3D interfaces started to become
mainstream. I

Another interesting observation derived from the results of the survey is that there
seems to be a strong correlation between the subject’s interest in sports and some of the
responses they provided in the survey. Out of the ten subjects that responded whether
they would like to see more 3D interfaces developed for the web, 70% of the subjects

said they would like to see more, 20% of the subjects were unsure or non-committal, and

109

10% said they would not like to see more 3D interfaces developed. Out of that 70%, all
seven subjects listed that they had an average to above average interest in sports, where
as two out of the three subjects representing the other 30% specified they had a below
average interest in sports. What does this mean? It probably means that the general
theme and content of the site (athletics) had some affect on what the subjects thought of
the production. Those subjects that had a higher level of interest in sports appeared to be
more interested and accepting of the 3D interface where as those subjects that had a
lower level of interest in sports were more critical and less accepting. These types of
interfaces would most likely have to be designed with a pretty narrow and specific target
audience in mind in order to be effective.

So the question still remains: Can 3D technology be used as a functional,
efficient component in interface design for the web? Based on the results of the research,
I would say yes base on some of the research, but only after a few more advances are
made, and if the methods to develop such interfaces are simplified. Ultimately though, at
its current state, I would have to say that 3D technology is not a practical alternative for
interface design in web development. There is a great amount of potential, even if 60%
of the subjects said they still preferred the 2D website. 40% is not a bad figure for a
technology that has not been used all that much to create interfaces for the web. Like
Flash when it came onto the scene, current 3D Shockwave movies are still best suited for
entertainment use instead of for practical interfaces, but they will adapt. And when they
are able to do so, and when web users become even more familiar with the technology,

that’s when we’ll see a boom in development of interfaces utilizing 3D technology.

110

REFERENCES

111

 

REFERENCES

 

I Adobe.com: http://www.adobe.corn/eroducts/atmosphere/main.html

2 Saucier, Christine. Add a 3D Atmosphere to Your Website. PC Magazine Review,
March 2, 2004

3 Turner, Daniel Drew. Edited by Jasmine France. CNET editor’s preview, July 2, 2004.
4 3D State.com: http://v~ww.3dstate.com

5 Discreet.com: http://www.discreet.com/3dsmax/index.html

6 Macromediacom: http://www.macromedia.com/software/director/

7 NPD Online Survey, Macromedia Flash Player Statistics,
http://www.macromedia.com/software/player census/flashplayer/, March 2004

8 TechWeb.com: http://m~w.techweb.com
9 Slashdot: http://www.slashdot.org

'0 MLive.com: http://www.mlive.com

 

” Green & White.com: http://wwwgeenandwhite.com

'2 Lansing State Journal: http://www.lsi.com

 

'3 Catanese, Paul (2002). Directors Third Dimension: Fundamentals of 3D Programming
in Director 8.5. pgs 263-267

'4 Catanese, Paul (2002). Directors Third Dimension: Fundamentals of 3D Proggamming
in Director 8.54 pg 482

'5 Catanese, Paul (2002). Directors Third Dimension: Fundamentals of 3D Prgramming
in Director 8.5, pg 483

112

 

      

IGA WE ITY L 8

millljjjlijjllllllljljl

31 5043