OffRoads :
A Persuasive Website
for Motivation of
Fuel Conservation Through
Raised Awareness
of Effects of
Current Energy Consumption
http://www.projectoffroads.com
(See website for demonstration implementation,
mobile device demonstration, online survey and more)
University of Maryland
CMSC 434
Fall 2006
Dr. Shneiderman
12/7/2006
Sally Divita (sally.divita@cox.net)
Steve Horvitz (mdterp25@yahoo.com)
James Taneja (jtaneja@umd.edu)
Ryan Wilby (rwilby@umd.edu)
Table of Contents
Abstract ............................................................................................................................... 4
Credits ................................................................................................................................. 5
Introduction ......................................................................................................................... 6
OffRoads as Persuasive Technology .............................................................................. 7
OffRoads as Tool ........................................................................................................ 7
OffRoads as Medium .................................................................................................. 8
OffRoads as Social Actor.......................................................................................... 10
Adding Fun and Publicizing the Website ..................................................................... 11
Presentation of Design ...................................................................................................... 13
Website - Calculator Portion ......................................................................................... 13
Sequence of Events for Typical Usage ..................................................................... 18
Task Details .............................................................................................................. 20
Monetary Savings ................................................................................................. 20
Environmental Effects .......................................................................................... 21
Personal Effects .................................................................................................... 21
Methods of Usage ..................................................................................................... 22
User Profile ............................................................................................................... 22
Typical Tasks ............................................................................................................ 23
Help and Tutorial ...................................................................................................... 24
Website - Blog and Forum ............................................................................................ 25
Account Information ................................................................................................. 25
Access without Logging in ....................................................................................... 25
Blog Usage ............................................................................................................ 26
Forums Usage ....................................................................................................... 26
Mobile Device ............................................................................................................... 27
Development Process ........................................................................................................ 29
Website - Calculator Portion ......................................................................................... 29
Website – Blog Portion ................................................................................................. 34
System Requirements.................................................................................................... 38
Usability Testing ........................................................................................................... 38
General User Comments and Suggestions ................................................................ 39
Quality of Usability Testing...................................................................................... 39
Usability Subject Detailed Comments ...................................................................... 40
Mobile Device ............................................................................................................... 44
System Requirements................................................................................................ 44
Implementation ......................................................................................................... 44
Conclusions ....................................................................................................................... 47
Acknowledgements ........................................................................................................... 49
Appendix 1 – Usability Test Materials ............................................................................. 50
References ......................................................................................................................... 54
OffRoads
2
Table of Figures
Figure 1 – Low Fidelity Prototype : Main Screen ............................................................ 16
Figure 2 – Low Fidelity Prototype : Displaying Breakdown of Annual Dollar Savings .. 17
Figure 3 – Low Fidelity Prototype : Entering Current Commute Information ................. 18
Figure 4 - Transition Diagram : Website .......................................................................... 19
Figure 5 - WML Preview Showing Simple Layout of a WML Page ............................... 27
Figure 6 - Transition Diagram : Mobile Device ............................................................... 28
Figure 7 - Second Revision of Low-Fidelity Prototype .................................................... 30
Figure 8 – High Fidelity Prototype: Main Welcome Screen ............................................ 31
Figure 9 - High Fidelity Prototype: User Entering Information ....................................... 32
Figure 10 - High Fidelity Prototype: Help Text................................................................ 33
Figure 11 – Blog: Main Screen ......................................................................................... 34
Figure 12 – Blog: User Replying to a Post ....................................................................... 35
Figure 13 – Blog: User Initiating a Post (User Not Logged in) ....................................... 36
Figure 14 – Blog: User Entering a Post ............................................................................ 37
Figure 15 - Survey Chart 1................................................................................................ 41
Figure 16 - Survey Chart 2................................................................................................ 41
Figure 17 - Post Questionnaire ......................................................................................... 42
Figure 18 - Mobile Device Sample Screens ..................................................................... 46
OffRoads
3
Abstract
The OffRoads website persuades users to reduce their gasoline consumption by switching
to public transportation for the purpose of reducing their environmental impact. It is
aimed primarily at people who commute regularly to work via car, as they could have the
most significant effect. OffRoads will use many methods to convince users to change
their behavior. It will show users not only the global effects of carbon dioxide emissions
and foreign oil dependence but the tailored personal rewards in the form of increased
physical activity, free time, and monetary savings. They will also have an opportunity to
communicate with others who have successfully made such a change to mass transit to
gain motivation and encouragement through a local social network in the form of a blog.
A portion of this website will be available on mobile devices.
OffRoads
4
Credits
Sally Divita
 proposal
 user needs (introduction and task examples)
 references
 task analysis (task list and questionnaires)
 low fidelity prototype
 interface design report
 online survey
Steve Horvitz
 high fidelity prototype development tasks
o design
o implementation of calculator interface
 usability testing and report
 references
James Taneja
 user needs (system requirements)
 all blog tasks
o documentation
o design
o implementation
 high fidelity prototype design
 usability testing and report
 project website
o design
o implementation
Ryan Wilby
 references
 tutorial for website and mobile device
 all mobile device tasks
o research
o documentation
o design
o low fidelity prototype implementation
o high-fidelity prototype implementation
OffRoads
5
Introduction
OffRoads is a persuasive website aimed at showing users that changing from driving a
car to using mass transit for a regular commute can make a significant positive impact on
the global world as a whole and the user’s own personal life. It will demonstrate, using
personal data, how much of an effect their single change can make in a year’s time to
such environmental factors as carbon dioxide emissions and crude oil savings. They will
have the opportunity to see how their lives can be further enriched by the side effects of
such a change through increased physical activity and free time and even monetary
savings. The website’s goals will be accomplished through a simple, sleekly designed,
fun user interface. The user will be presented with related facts to support the validity of
the statements made regarding the global effects of their personal choices. The website
will also provide a blog interface for the purpose of social influence from a support
network of local commuters who were previously in similar situations. These will be
motivational success stories. A limited version of this application will also be
implemented for use on a mobile device.
The intention is to build this application for the University of Maryland community
which includes the entire Washington D.C. area. The Washington Metropolitan Area
Transit Authority websitei will be the source for public transportation solutions. It has a
simple interface for users to select a location and destination and it will provide the cost
associated for the time of day for the commute and the necessary details. However, users
who do not reside in this geographical area can still learn from the motivational
information and can obtain customized calculations if they can enter in their mass transit
alternative solution costs (gleaned from their own local source).
While some of the functionality this website will provide has been offered by various
other websites, OffRoads will pull together information to provide a customized yet
comprehensive and simple view of the effect that a single person can have. A website
that most closely matches the functionality of the calculator portion of OffRoads is the
Ride Share Online websiteii. It provides a similar calculator type interface for the user to
enter their daily commute information but its intention is to compare their current annual
costs versus the costs of carpooling or vanpoolingiii. Another website that promotes
carpooling is “Commute Solutions”iv. This website has a very detailed cost accounting of
how much it costs to operate a car. It breaks it down into the number of cents per mile for
all costs associated with car ownership.
A portion of the Environmental Protection Agency’s websitev provides a similar service
with its “Personal Green House Gas Calculator”vi. This calculator is more extensive, as it
calculates a person’s green house emissions in all aspects of their lives, including home
use. OffRoads focuses only on the effects of transportation costs, specifically the regular
work commute. This website was of interest both for its similarity in user interface to
what we propose and its data regarding carbon dioxide emissions.
The American Automobile Association (AAA) websitevii provides a matrix of per mile
costs of operating a car based on its typeviii that was very useful in our research. It
OffRoads
Introduction
6
categorizes vehicles into five types: small, medium, or large sedan, four wheel drive sport
utility vehicles, and minivans. Correlations are provided between these categories and
specific models of automobiles to facilitate best categorization of the user’s specific car.
For more exact approximations specific to buying a new car for any given make, model,
and year see the Edmund’s websiteix for their “True Cost to Own” calculationsx. AAA
also provides the per mile cost of operating each type of car for three different predefined levels of driving: 10, 15, or 20 thousand miles per year. The annual national
average is 15,000 miles per year viii (another websitexi uses the number 12,000). The
local averages could be higher. The national average round trip work commute is 32
milesxii. Maryland state has one of the longest commute times of any other state,
averaging one hourxii. The current average annual costs of operating a car are $7967viii.
This includes all costs such as insurance, routine maintenance, license and registration
costs, depreciation costs, etc. The composite national average per mile is 52.2 centsviii.
These figures are used for the default values for the user’s costs when the user does not
enter his specific profile.
OffRoads has a different approach than any of these websites. It does share a calculatorlike interface with many of them. However, none of these are focusing on eliminating
the everyday work commute via car. None of them offer a social network for support.
Most are broader in scope or just have a different motivation. The authors feel that the
chosen area is where the most return can be realized. The hope is that showing how
simple it is to do, what the real benefits are, having reputable facts to substantiate the
argument, and other people who have made the switch provide support will be persuasive
enough to accomplish the goal.
OffRoads as Persuasive Technology
In his book “Persuasive Technology”, B. J. Fogg defines captology as the study of computers
as persuasive technologyxiii. This website is a very suitable model for this study. Fogg
details the “Functional Triad” of roles xiii that computers play in persuasion. We can
describe the methods by which this website will achieve its goals in terms of his triad:
computers as tools, medium, and social actor.xiii
OffRoads as Tool
As a tool, there are several ways that the website will persuade users to change. The
primary method would be by calculating motivational dataxiii such as the annual number
of barrels of crude oil saved, calories burned by walking to the local public transportation
facility, dollars saved, amount of reduced carbon dioxide emissions or the increased free
time or calories burned. This also improves persuasion through tailoring xiii as all of this
information is customized to the users current commute habits compared to the proposed
commute method.
OffRoads
Introduction
7
A secondary method would be simplification of the desired behaviorxiii. Users will have
an easy interface to help them find the alternative mode of public transportation. During
the initial phase of development of this application, this portion of the website would rely
on the user interface of pre-existing local websites (WMATA), but later releases would
standardize and further simplify the interaction by interfacing (if it existed) through an
API. This would make this application more difficult to port to other localities, so the
focus of this application still remains the Washington, D.C. metropolitan area but most
other parts of this application are not specific to a location.
OffRoads as Medium
In its role as medium, OffRoads will show users the cause-and-effectxiii of their actions
through the calculations discussed above. They will see that they can be responsible for a
large volume of crude oil being conserved and they can infer from that the political and
environmental impact. They will see that they can reduce pollution and will be able to
quantify these potential results. But they will also be able to see the effect this change
will have on their daily life through increased exercise and free time. This simulation of
the effect on everyday routines helps motivate behavior change.xiii
It will also show cause and effect and help a user overcome the feeling many people have
that they alone can not make a difference by showing the impact of the combined efforts
of a group. They will be presented with facts that will encourage them that their single
behavioral changes will make a significant difference when multiplied by a small
realistically sized population. For example,
“If only .5% of the total U.S. population stopped driving their cars to
work, the US could totally eliminate dependence on Kuwaiti
oil.”xivxv
A fact like this would show that it would not require a large percentage of the American
population to make a change similar to what they are considering to make a significant
impact. When users observe the correlation between cause and effect, they are more
likely to be persuadedxiii.
The website will also present statements of related facts that demonstrate the severity and
importance of the problem. These are aimed at persuading users of the value and
attainability of the goal of the website. There will be places where the user can hover the
mouse over a field to browse a fact “bubble” designed to motivate change. For example,
a “Quick Fact” bubble may provide information such as this:
“The USA is the world’s biggest greenhouse gas generator.”xvi
that would illicit concern with some users over the irresponsibility our country has shown
in this matter and the hope that they can have an effect on this problem.
OffRoads
Introduction
8
Other facts may be more provocative and help illicit the feeling of concern for the future.
These effects could be on the global economy as well as the health of the earth. For
example:
“It has been estimated that global temperatures will rise by 4 degrees
Celsius above pre-industrial levels by the year 2100 causing annual
economic damages to possibly reach $20 trillion.”xvii
or
“Each year, 200 cubic kilometers of Greenland’s ice sheet melts.
This is 200 times the amount of water that Los Angeles will
consume this year.”xviii
Since people are inherently such different individuals with different motivations, a wide
variety of motivational reasons will be provided in hopes that one will spark a concern
strong enough to motivate change. A certain segment of users may be more motivated by
personal safety, so highway death statistics could be cited as well:
“Each year there are over 42,000 deaths on U.S. roads”xix
Stress is also a factor to consider for many people since driving can be a stress inducing
experience as opposed to sitting on a train or a bus:
“About a third [of drivers] can be classified as aggressive drivers. Six in 10
concede they sometimes go well over the speed limit. Sixty-two percent
occasionally get frustrated behind the wheel, more than four in 10 get angry
and two in 10 sometimes boil into road rage. And nothing fuels driver anger
like getting stuck in a traffic jam.”xii
There have even been studies linking greenhouse emissions with shortened life spans:
“A recent European study determined that air pollution causes 6% of all deaths,
thereby killing many more people than traffic accidents”xx
“A 2005 European Commission study found that airborne pollution reduced
life expectancy by almost 9 months and was the cause of 310,000 early
deaths.”xxi
“Helpful Hint” types of information bubbles would provide suggestions such as
alternative ways to save fuel:
“If everyone reduced their driving speed from 65 to 55 mph, we’d
save 3 million gallons of gas a day”xxii
or
“The U.S. Department of Energy reports that underinflated tires
increase fuel consumption by up to 6 percent and one study estimates
that 50 to 80 percent of all tires on the road are underinflated. By
OffRoads
Introduction
9
these estimates, the U.S. could save up to 2 billion gallons of gas
each year simply by properly inflating tires.”xxiii
With facts like these, the hope is that when people do choose to drive, they will drive
responsibly and do what they can to reduce their gasoline consumption which is still the
bottom line goal of the website.
A natural tendency of some people may be to try and ignore and not accept or believe in
the ramifications of their current actions. The website will again use poignant facts to try
and clarify potential counter arguments, such as the sentiment that advancements in
science will reduce our emissions significantly:
“Automobile fuel efficiency improvements have been no match for the
continued increase in demand for oilxvi. Currently, U.S.emissions are
7 billion per year – that’s 23 tons per person. Globally, it will be about
80 billion metric tons per year in the year 2050xxiv. It will take decades
before alternative fuels such as hydrogen can reach mass market
statusxvii, but you can make a difference today”.
OffRoads as Social Actor
The blog portion of the website will facilitate the use of computer as social actor, the last in
Fogg’s triad of persuasive roles of technology. The blog was added later in the design
process as a means of providing a social support network of people who have used the
website to make the change and have found it rewarding. The addition of this was spawned
by several of B.J. Fogg’s principles:
“Principle of Social Learning – A person will be more motivated to
perform a target behavior if he or she can use computing technology to
observe others performing the behavior and being rewarded for it.”xiii
“Principle of Normative Influence – Computing technology can
leverage normative influence (peer pressure) to increase the likelihood
that a person will adopt or will avoid performing a target behavior.”xiii
The blog will contain success stories and real people that users can contact to ask
questions regarding their experiences. It will be of particular value for new OffRoads
users to contact other users who have similar issues due to their geographical proximity.
This support network will facilitate sharing information as well as motivation and will
show that it is not only possible but simple and has an overall positive net gain to make
the switch. Therefore, this facet fosters persuasion through social dynamics and praise
xiii
. Why will these previous users continue to blog with new users who are potential
candidates for making the switch? Fogg cites the reciprocity rule which he says is
followed in every human society. It states that if you receive a favor, you should pay it
back in some wayxiii. In this case, the “favor” is the enlightenment that making the
OffRoads
Introduction
10
change is advantageous and simple to achieve. To pay back the favor, the previous users
share their experiences.
Adding Fun and Publicizing the Website
Motivating visitors to the website was viewed as a potential problem that would need to
be addressed. To add an element of fun to this website, equating savings with “prizes”
such as a big-ticket item for an annual dollar savings (big screen television for example)
or a number of calories burned with a number of the user’s favorite snack would be
provided. This aspect could be used to produce advertising revenue if necessary:
“Walking one mile per day burns 93 caloriesxxv which is equivalent to 516 Oreo cookies
annuallyxxvi”. Surely Nabisco would be interested in advertising alongside that
information on an ecologically minded “green” website that would improve their public
image.
As a means of publicizing the website and rewarding users of OffRoads who have
successfully converted to public transportation, bumper stickers would be made such as
ones with the motto “Make the Switch and Make a Difference…I did”. There may be
bumper stickers with a user’s results of how much they are saving by NOT driving “this”
car to work. T-shirts are envisioned with logos on the front stating “I’m saving the
world…” and their annual emission savings numbers on the back: “2,378 pounds of
carbon dioxide per year… How about you?” (with the website url included of course) .
Another T-shirt slogan might read on the front “Breathe Easy” and on the back “I’m
saving the world 2,378 pounds of carbon dioxide a year.” Other T-shirts would simply
prominently display their “numbers”: CO2, money, time, and calories savings and ask
“What are YOUR numbers?” A shirt with a fun fact such as “I can eat 516 more Oreos a
year since I made The Switch”. These shirts would not only be rewards for users but
walking advertisements for the website, too, as we know that motivation to get users to
go to the website will be a challenge.
Other incentives would appear in the blog section of the website and the main portion of
the website by showcasing “star” users. This would come in many forms: the highest
gasoline savings of any user ever to switch, the weekly or monthly spotlighted user, etc.
This requires some amount of validation which would be difficult and is a challenge we
have not addressed. Users could be motivated by these “star” users but only if they
believe that they are true stories. Users need to know that a website is reputable to
maintain faith in itxiii and this is just one small aspect of gaining the users trust that would
need to be addressed. Unfortunately, use of advertising mentioned previously to create
maintenance revenue may have the adverse side effect of reducing credibility, as users
are more likely to trust a nonprofit organizationxiii. An alternative method of revenue for
this website will be contributions from interested corporations and other benefactors.
We hope that users will realize how much they can affect their world when they choose
to take even a small step when it is multiplied by the frequency of the 5-day work week
over a long period of time. If this website could convince even a small fraction of
OffRoads
Introduction
11
current habitual drivers to switch to public transportation, it could prove to be very
worthwhile.
OffRoads
Introduction
12
Presentation of Design
During the original design phase, this application was called “Paths”, as will be noted in
the low fidelity prototype screen shots. The name of this application was a struggle. The
desire for a catchy and short name was never successful. The acronym “Paths” wasn’t
acceptable (“Preferred Alternative Transportation Help System”). “Roads” (“Reliable
Outcome Altenative Driving System) was also tested out. Both of these acronyms
seemed too contrived. So, the team strayed away from acronyms and settled on
“OffRoads”. However, the quest for a catchy name continues.
Website - Calculator Portion
The main portion of the OffRoads website will provide summary information about the
possible benefits of switching from primary car transportation to mass transit. It will
allow users to browse default values and enter their own specialized information to see
the specific results they would attain. Entering this information will be very easy to do
and browsing the information will be simple also, as the website has a very shallow tree
of screens. In the design explored in this prototype, a very simple, sleek, colorful and
modern look is given.
There will be distinct portions that will each have the purpose of calculating and presenting a
different aspect of information. One section will provide the cost savings for the user. To
calculate this, information will be needed about a user’s current commute and the alternative
commute. Other factors will be considered such as car maintenance and ownership. Another
section will calculate environmental benefits. This will mostly be expressed in carbon
dioxide (CO2) emissions, but it may include other effects or indicators of pollution impact.
The last section will provide personal health and wellness information. This will include
exercise and time savings. Exercise will be expressed in calories burned. Time can be
associated with a user’s favorite pastime such as a number of books read.
The interface will rely mostly on numeric entry fields for specifying the parameters that
will be used for the calculations. It will also provide default values so users will quickly
see the estimated possible results. It may rely on using existing calculators to determine
several aspects of the formulae. As previously mentioned, to suggest local public transit
routes, the wmata.com trip calculator will be used. The website terrapass.com calculates
annual emissions based on the make, model, and year of car for a given number of miles.
There is a feature on edmunds.com that calculates the true cost of owning a car, again
based on the make/model, etc.
The main page (figure 1) will simply have a colorful bar for each of the categories of
benefits. While the colorful background is visually appealing, it may need to be modified
if it is deemed to be not easily readable or accessible for many users (continued usability
testing will help determine this). Selecting anywhere on the colored bar will move the
user to the detailed level where they can see how the total was calculated and they can
OffRoads
Design
13
enter their personal data to tailor the results more specifically to them. This selection
mode may be a bit different for users, as they are used to having to click on a single small
button or link as opposed to an entire screen region, so we will want to find a visual cue
to demonstrate this to users. This mode will not seem strange though as clicking on any
element within that screen region will provide the desired behavior, they just may not
realize that they can click anywhere in the colored block to get the same effect. It is
unfortunate that this is the expectation of how web interfaces work, but since it is the
normal design, we will find a way to adhere to it and unfortunately this design may not be
possible with certain technologies.
Originally, it was thought that the website would provide multiple distinct modes that the
user would have to choose from that would require varying amounts of time to enter data.
This revised design will not require the different modes because the default values will be
filled in for all components, allowing the user to pick and choose which values he/she
would like to alter. In this way, they will customize how they use this system to be as
quick and rough or as detailed and exact as they prefer. If they think the default estimates
are close enough to their reality then they can leave them as they are. If they don’t have
the time to determine a more accurate value that is closer to their situation, then they
don’t have to, they can defer it to another time. Eventually, this system will allow
profiles to be stored so that users can come back and refine them as changes occur or as
they gather data rather than having to re-enter their data.
The secondary pages will show the details of how the totals were calculated (see figure
2). This secondary page should be sufficient for the “Emissions”, “Health”, “Foreign
Dependence”, and “Time” categories. However, the “Money” display will in actuality
require another level of retractable windows since there are so many aspects and details
to this final calculation (see screen shot 3). Therefore, the sample screen shot 2 will be
more indicative of the design for the other categories in a future design (unfortunately not
the “Money” screen). A design that is similar to other interfaces such as the one in Flash
that allows a window to be collapsed (when the black triangle is selected) to just a
header will be employed so that the summary information for sub-groupings of data can
be retained while the details are hidden until needed. This website should only need to
be 2-3 levels deep in terms of screens, although the secondary screens will have this
capability to hide/show panels. In reality, all the secondary windows could be
implemented as these expanding/collapsing panels from the first page, but that would
make for a very lengthy page if all panels were expanded simultaneously.
All data on the website that the user can enter will be denoted so that it is obvious to the
user. A different color will be used for the font, but for color blind users another visual
cue will also be used such as a pointing arrow.
For the many questions that are asked of the user, there will be a hover-like pop-up that
will give them more details if necessary. For example, where they will see the question:
“What kind of car do you drive?” The pull down menu has the following selections:
“Small Sedan”, “Medium Sedan”, “Large Sedan”, “4WD Sport Utility Vehicle”,
“Minivan”. The hover information will give examples of what cars fall into these
OffRoads
Design
14
categories: “Small sedan examples are the Chevrolet Cobalt, Ford Focus, Honda Civic.
Medium sedan examples are the Chevrolet Impala, Ford Fusion, Honda Accord, Toyota
Camry. Large Sedans are the Buick Lucerne, Toyota Avalon, Nissan Maxima.”xxvii
Having this kind of information in a hover form will prevent the user from having to do a
lot of window opens/closes. It will need to be confirmed that this is not a violation of any
accessibility guidelines.
For a few of the secondary windows, the user will be able to select how the results are
expressed. For example, the “Time” benefits can be expressed as a number of calories
burned off which can in turn be expressed as a favorite snack, purely for fun. For
example, if the new commute requires 1 mile of walking per day, that would be
equivalent of 93 calories expended per day. Annually, this would be 23,250 calories.
Merely as a form of entertainment, the user could see that this is equivalent to 516 Oreos
(45 calories per). Or they could simply see how many miles that would be, in this case
250 miles, roughly equivalent to the distance from Washington, D.C. to New York
Cityxxviii. Users would feel a sense of accomplishment to know that they walked such a
long way when it is presented in this manner. It helps a user see that a little bit every day
can accumulate to something big.
OffRoads
Design
15
Figure 1 – Low Fidelity Prototype : Main Screen
This main screen is intentionally stream-lined and uncluttered and uses a modern palette
of colors. This design is missing access to the blog which should appear as a button on
the top portion, but this would appear in an operational version. Also, there will always
be a Help button (shown in the High Fidelity Prototype later). The slogan “Make a
Switch and Make a Difference” will appear throughout the application. (Note the name
of the application changed after this design process).
OffRoads
Design
16
Figure 2 – Low Fidelity Prototype : Displaying Breakdown of Annual Dollar Savings
This screenshot shows the summarization of the monetary savings and the breakdown
below. The black diamonds indicate that there is a more detailed screen that will come
down when it is selected. This will reveal any components that went into the calculation
of this field. See figure 3 for an example.
Note that a “Back” button appears in the upper right hand corner of all screens below the
first.
OffRoads
Design
17
Figure 3 – Low Fidelity Prototype : Entering Current Commute Information
This screen shows the most detailed level. Indeed this screen is the only third level
screen in the hierarchy tree of displays for this application. The values that appear in
yellow are the ones that the user can update with his specific information to get a more
tailored view. After a user updates a value, any necessary effected values are
recalculated and redisplayed immediately.
Sequence of Events for Typical Usage
The screen shots show a typical sequence of events:
1. Enter website and browse summary information (figure 1)
2. Select one of the areas of interest
3. View average values for data (figures 2 and 3)
Note: Figure 2 with collapsed panels will only be applicable to the “Money”
benefit. The other benefits will go directly to a screen that looks more like figure
3 where data is entered.
4. Change the average values to be more representative of users actual values (figure
3)
5. View updated summary results (figure 1)
OffRoads
Design
18
“Money”
Paneled
Summary
Window
“Money”
Details
Window
“Emissions”
Details
Window
Main
Introductory
Screen
“Health”
Details
Window
“Foreign
Dependence”
Details Window
“Time”
Details
Window
Blog
Main
Screen
Figure 4 - Transition Diagram : Website
OffRoads
Design
19
Task Details
There will be many specific calculations that will help provide summary information for the
user. Some calculations will be of more interest to some users than others, as users interest
in this website will have different motivations from economical to political to environmental
to health. The areas of savings fall into three major areas: monetary, environmental, and
personal.
Monetary Savings
This section will query the user about his current commute: how many days a week, what
time of day, from what location to what destination, etc. This information will be used to
determine current gas utilization and car maintenance costs. There are many authorities that
provide supporting data to make these calculations. A primary source will be the American
Automotive Association (AAA) and the Edmunds online reference. Current gasoline costs
will be used to calculate this expense with respect to the users car.
As an optional adjustment to the monetary savings, the user will be asked about the possible
sale of an existing car or if the user currently does not own a car and is considering a
purchase. This may also be of interest to a small group of users who are visiting this website
to determine how much they already are saving by using mass transit, but this group is not a
goal of the service provided by this website.
Also in this portion of the website, the user will be assisted in finding an alternate method for
his current commute via car. Finding the alternate commute will not be the primary goal of
this website, but will be provided via existing websites in a first version but will be improved
on in later releases. The primary goal of this portion of this task is to calculate the cost
associated with the alternative solution. The Washington Metro Transit Authorityi
(WMATA) provides just such a service currently for the Washington metropolitan area,
including College Park, Maryland. However, the intention is that this website not be limited
to this region, as it is applicable to all areas of the country, but it would rely on the existence
of such a functionality, as offered via the local government or transportation authority.
In summation then, this portion of the website will calculate :
1. Current gas utilization multiplied times current gasoline prices +
2. Car maintenance costs +
3. Car purchase costs (optional) 4. New commute’s cost =
5. Total net savings.
OffRoads
Design
20
Environmental Effects
This portion of the website will calculate the total environmental effects of using less
gasoline. It will not only consider the reduced CO2 emissions, but the environmental impact
of the oil refinement process, although this information has not been obtained yet.
Unfortunately, it will not be feasible to determine the environmental impact of the increase in
mass transit use, but it is assumed that this would be fairly negligible.
Personal Effects
An often overlooked benefit of a daily public transportation commute is the increase in free
time afforded by not driving. In this section of the website, the user will see how much time
is saved and how much exercise is to be gained by making the switch to public
transportation. While sitting on a bus or train, commuters are able to enjoy activities that
they might not otherwise be able to enjoy as much. Reading, needle work, puzzles, even
personal or professional phone calls are common activities you will see on any public bus or
train. The benefits can be expressed in hours or in something more tangible as a number of
books read, that will be selectable by the user via a drop-down box. For example, if the user
would like free time expressed in terms of books read, then the calculation will be made to
convert the number of hours to a number of books. Arguably, the “free time” is limited in
what can be done, i.e. one can not be cleaning their house while commuting to work. But it
is important for people to realize that 2 hours of driving to and from work is 2 hours wasted
in a day. However, 2 hours in a train can be 2 hours of reading that they would have done at
home. Since a certain percentage of time is spent getting to and from public transit, the
website will adjust the free time accordingly so as not to have the unrealistic expectation that
100% of commute time can be considered free time. The time it takes to walk to the local
station will also be deducted from the free time so that it really represents time for other
pursuits.
When a commuter changes from driving to mass transit, often a small amount of exercise is
added to their daily routine. While this may be small on a daily basis, when multiplied over
the frequency of a 5-day a week commute for 50 or so weeks a year, the increase in physical
activity may be significant and should be considered a serious benefit. The profits of this
can be equated by the user to a number of calories burned and the distance walked. Users
will be able to see this benefit expressed both ways. The miles walked will be displayed in
the number of miles and also a sample of how much that is will be provided. For example, if
they would walk 250 miles in the course of a year, they will be told that they would
successfully walk from Washington, D.C. to New York City! They may want to take this
one step further and translate that into a number of their favorite snack (such as Oreos). This
could be a great advertisement tie-in also for generating revenue for the website support.
OffRoads
Design
21
Methods of Usage
The user will be able to use this website in three different ways. The user will have control
over the accuracy of the results in several different levels of detail, depending on the time
allowance and interest:
1. Default Data – In this case, the user will not need to enter any data specific to his
commute. Using this method, the information displayed in this mode will be obtained
from national averages. In a later revision of this website, these default values could
also be based on the average results of past users. The bottom line numbers will
hopefully entice the user to spend the time to enter personal information to see how
significant the particular results may be.
2. Quick Calc – This mode will allow the user to see tailored results with only a
requirement of a few minutes time to enter a minimal set of data with regards to his
current commute. They may just need to answer these questions: “How many miles
a year do you typically drive?” (select from a small list) and “What kind of car do you
drive?” (sedan, SUV, etc.). These few bits of information are good indicators of
current commute costs. After data from different regions of the country have been
gathered via this website, a zip code could help refine this data further. The purpose
of this method is to keep the users interest long enough to see tailored results. The
hope is that they will continue on to the Detailed Estimate at some point, perhaps if
necessary, at a more convenient time.
3. Detailed Estimate – To get a detailed estimate that is more accurate, the user will
need to spend some more time entering more specific information such as the exact
commute distance.
User Profile
Most users will be people who currently commute to work regularly by car. These users will
have many reasons for taking interest in this website:
1.
2.
3.
4.
5.
6.
7.
8.
Curiosity about current gas consumption
Interest in the environmental repercussions of current daily commute
Desire to change long drive to an alternative method
Justification for consideration of the possibility of not owning a car
Political concern for the U.S. dependence on foreign oil
Desire to reduce stress of driving
Desire to increase physical activity
Interest in increasing free time
OffRoads
Design
22
There may also be a small percentage of curious users who would like to check some
portions of the website for fun. But the hope would be that some of these happenstance
visitors would be so profoundly influenced by the data that they may consider reducing their
gas consumption too.
Typical Tasks
There are many different categories of tasks that this website will address. Therefore there
are many different tasks that will need to be delineated. The following are a subset of tasks
that provide a robust variety that were considered in the design.
1. A man who lives in Silver Spring, Maryland and works in Crystal City, Virginia
thinks that the price of gas has gotten so high that it would be cheaper to use public
transportation instead of driving his minivan to work everyday. He would like to
know what the difference in cost is between the two methods of commuting so that he
may decide if he wants to change. He is not willing to give up his car due to weekend
trips and local convenience, but he is willing to consider the idea of mass transit for
his 5-day work week. He does not think he is concerned with the other possible
benefits, such as environmental impacts, but he would like to review this information
if easily available. He would like to spend the time required to know exactly what the
results would be so he is willing to provide all the detailed information about his daily
commute. This would be a most common type of user.
2. A woman has grown increasingly concerned that the use of her SUV has such adverse
ecological effects that she may consider not using it for her daily commute, and
possibly even selling it and relying solely on public transportation. She would like to
know just how much CO2 emissions her SUV is responsible for. After visiting the
“myfootprint”xxix website and seeing how wasteful she is, she would like to know
what the net effects of her gas utilization really are so that she may possibly be able to
adjust her usage. She is also willing to spend the time necessary to provide detailed
information about her current commute. The concern for the environment will be
one of the more common motivators, but not the most, so this example will be fairly
common.
3. A student drives his 2000 Toyota Camry to University of Maryland campus 4 days a
week from Vienna, Virginia. His classes are scheduled such that he does not have to
travel during rush hour. He wonders whether he could afford the time to take public
transit instead of drive. The student user will probably be more rare than the
professional commuter, so this task may not be as common.
4. A recent American University graduate still lives in Tenleytown and just got a job in
Georgetown. He is wondering whether it is worth buying a car or not for his work
commute primarily. Parking at his new job costs $15 per day. He only periodically
needs a car on the weekend for visiting relatives in Philadelphia and various errands
around the city and suburbs. There will probably be very few people in such a
OffRoads
Design
23
situation in which they are currently considering a car purchase, so this task will not
happen very regularly.
5. A man who lives near Suitland, Maryland works at the Smithsonian from 9-5. He is
tired of the drive and the wasted time sitting in a car. He does not mind adding some
walking for exercise to his daily routine, even if it adds additional time to his daily
commute. His company will give him $105 per month in Metro fares. He currently
pays $150 a month in parking fees. He would like to get a quick estimate without
spending the time to provide details about his commute, but would reconsider
spending more time if the results looked significant. This example will probably be
fairly common.
6. A young woman is concerned about the United States dependence on foreign oil. She
would like to do anything she can to minimize her contribution to this. She wants to
know how many barrels of oil she has been using in the past year of her commute
from Rockville, Maryland to Springfield, Virginia. She is willing to spend some time
providing the parameters necessary to make the calculations accurate, but not a lot.
Political concerns will probably not be high motivators, but will still occur, so this
may be a less likely example than many others.
7. An older couple has recently been in an accident in their only car and it needs to be
replaced. They would like to save up to take a month long European cruise. They are
trying to find out how much money they can save from the purchase of a new car by
learning to use the bus system to get to their doctors appointments and the grocery
store from their apartment on Connecticut Avenue in D.C. This is probably the rarest
type of usage and indeed, it may not be within the scope of this system to address this
case.
These are just a few examples that can be used to test the efficacy of this website. There are
many other similar situations that will need to be considered to have a complete and balanced
sample of the wide range of possible users. This list of typical tasks may need
reconsideration and some expansion in scope and detail as progress is made with the design
of the system.
Help and Tutorial
Help will be provided in two forms: short context-sensitive help text and movie like
tutorials. The help text will be provided in the form of a popup dialog box. It will be
used to provide information about a particular field if the user needs clarification of the
input required. It will also be used for error reporting. Figure 10 shows a sample of this
kind of help text.
The movie tutorial will tell the user step-by-step how to use the system. It will show the
user exactly how to perform the most common tasks through use of a video to show
exactly where to click and what to enter. An audio narrative will explain the features.
OffRoads
Design
24
Website - Blog and Forum
The website portion of the project that allows users to post and read messages will be
known as OffRoads Blog and OffRoads Forum. The blog will allow the users to access
information and stories left by other users. The Forum will be more structured for help
and feedback.
Account Information
Users will be able to create an account by clicking the appropriate links on the website.
They will specify their full name, last name, and email address, however, these fields are
not mandatory. The only mandatory fields are the nickname and password, both used to
log in. Users will be warned that if they do not provide a working email address, then
they cannot request their password via a “Forgot My Username” or “Forgot My
Password” link. This is done to match design standards of security. The site does not
contain important identity information, however, if users wish to leave their name and
email out of the database, they can easily choose to do so.
The account information will not have anything to do with the Cost Calculators, or not as
of now. In the initial release, the Cost Calculators will only maintain averages for an
“easy comparison” based on all the users’ inputs. The more advanced and time
consuming calculators will be user driven, via entering values in text boxes.
The long term plan is to coordinate both the user accounts and the flash so that they can
save their preferences as well as previous data. The way to do this is to link PHP to a
database and to the flash. More research will be necessary on this topic to understand the
details.
Access without Logging in
Access without logging in is limited, but allowed and the users will have read only access
to the blogs and forums. This will allow users to get involved without making a
commitment that is often perceived when you have to enter personal information or
create an account. The user may read any posting on all the pages, but may not respond.
It is necessary to log in or make an account in order to post properly. It will be verified
that the user knows that any post can be viewed publicly without an account and any
member can answer any post.
OffRoads
Design
25
Blog Usage
The actual blogs can be whatever the user or the Webmaster of the site wants to post
about. It can be different each day or it can be changed each week. If this site does
become a success, there may be hundreds of users, and this will encourage more
interaction and more frequent updates.
Many blog websites make categories the user can go into and then find an appropriate
blog for his or her post. Categories like Introduction and Help sections are normal. In this
case we would have more sections on “Public Transportation Options” or “Find a Ride
Here” kinds of blogs where users can find appropriate outlets for their blogs.
There will be a wide variety of users and all with be in the demographic area of
Washington DC Metro. It will be assumed that more of the users are considered novice
or intermediate users. Therefore there will not be very many blog sections, but just a few
to have some variety. They will be informal and very open to whatever the users want to
discuss.
Forums Usage
The forums part of the website is more structured in the way its organized. It is a place to
post help information, website feedback information, and request or make new accounts
and passwords.
This section is very similar to blogs so it might be appropriate to combine them into one.
This is something that will be evaluated later on. The reason is to give the user or guest
many options to the site, but to not overburden them with complexity or cause confusion.
OffRoads
Design
26
Mobile Device
The mobile device aspect of this project is designed to target a broader audience than the
website alone could reach. The limitations of designing websites to be viewed from
cellular phones and PDA’s are significant, and will result in a simpler interface with
fewer options. The benefit however is that this site can be visited from anywhere with
service and a cell phone. While the number of users with PCs in the US is high, 223
million, compared to the next highest country – Japan with 69 millionxxx, the number of
users with cellular phones has risen to 207 million in 2005, representing 69% of the U.S.
populationxxxi. It is reasonable to assume that there is overlap between the pc and cell
phone users, but the convenience and portability of the mobile device ROADS website
should pull in additional users.
The mobile device website will be written using Wireless Markup Language (WML), a
language based on XML, but with stricter rules to allow sites to be viewed on a variety of
phones, including older, limited monochrome screen phones. While more extensive
languages like XHTML MP can provide more options and graphical capabilities, the
phones that can handle this language are limited.
In order to conserve bandwidth and memory space (a significant problem for cellular
phones) the page will be kept as simple as possible, with few graphics and extraneous
information. WML pages can be set up in a “card deck” layout, which allows the device
to download multiple pages at the same time, reducing the number of downloads when
selecting links on the page.
Figure 5 - WML Preview Showing Simple Layout of a WML Page
OffRoads
Design
27
3 card
“deck”
accessed
with
original
page
request
Home Page
Basic Search
Advanced Search
Basic Search
*Avg mpg of current car (int field)
*# miles daily commute (int field)
*area of commute (drop down box)
Calculate
Communicate with server
Advanced Search
*make/model of car
*#miles daily commute
*start/end address of daily commute
Calculate
Communicate with server
Basic Search Results
Advanced Search Results
•$Saved per Day
•$Saved per Year
•Public Transportation to use
(metro / bus)
*$Saved per Day
*$Saved per year
*Public transportation to use + route
Figure 6 - Transition Diagram : Mobile Device
Blue squares represent individual screens on the mobile device. The first three screens
will be downloaded at the same time when the website is accessed.
OffRoads
Design
28
Development Process
Website - Calculator Portion
The low fidelity prototype of the calculator portion was developed in Flash and as such,
had virtually no limitations in how it could be designed and was indeed designed without
regard to whether it could be implemented easily or even possibly given the technology
that would be used for the high fidelity prototype. It was intended that the final
implementation would be developed in HTML. However, the high-fidelity prototype was
also developed in Flash due to some concerns about the success of it in HTML. It went
through many iterations from the original design. The overall look and feel of the design
with its bold colored bars was preserved as a portion of the main entrance screen when
displaying the average users results. The second screen developed (where the user enters
personal data) however, became more of a consolidation of many of the secondary layers
(see the transition diagram in figure 4). This design was tested out because it seemed that
more information could be well contained in a single screen. So, both the entry fields and
the results fields could all be displayed in the same screen. This would need to be
refined further and another round of usability testing would be necessary to determine if
this is acceptable. The current state of it is not complete enough to make the
determination whether this is an improvement over the original design.
The final version will be implemented in HTML and CSS. AJAX would also be needed
to provide the popup “bubble” information that will help motivate users (the “Quick
Fact”, “Helpful Hints”, etc. described previously).
The development of the backend portion of the calculator will be fairly simple to
complete since it entails mostly making simple calculations and displaying them to the
user. The formulae necessary for most calculations are easy to implement. For example,
how many barrels of crude oil are saved based on the number of gallons of gas (there are
42 gallons produced from a barrel of crude oilxxxii).
Some tables of information will need to be created. For example, the list of different car
types and their associated gas utilization. Also, a table of distances between common
cities. This will be used to show the user an example distance similar to the amount of
walking required in a year. This table would have to have a range of distances of varying
lengths so that a similar distance could be equated with the user’s annual exercise.
The tutorial was created using the “camtasia”xxxiii tool. This tool was simple to use and
provided a sleek, refined way to help the user see how to use OffRoads. There will be a
note for users when running the movie (a .AVI file) so that they will be instructed to turn
up their volume if they are not hearing the audio. The hope is always that the user
interface is designed so well that a tutorial is not necessary, however, that is unfortunately
not usually the case, as it is commonly known that all users will interpret any computer
application in their own unique way.
OffRoads
Development
29
Figure 7 - Second Revision of Low-Fidelity Prototype
The low-fidelity prototype was revised slightly before starting implementation of the
high-fidelity prototype to make the application more user-centric: note the use of “My” in
front of the categories (slightly altered also). The dull grey was replaced with bright
orange for a header. An area was added for system messages in the header. Many of
these changes did not carry over to the high-fidelity prototype.
See Figues 1-3 for the first version of the low fidelity prototype in the Design section.
OffRoads
Development
30
Figure 8 – High Fidelity Prototype: Main Welcome Screen
The main screen was modified to include help, a graphic and a different header as well as
a button to move the user to the next screen.
Selecting the “Help” button will provide a pop-up dialog box of contextual information
(see figure 10 for a sample).
OffRoads
Development
31
Figure 9 - High Fidelity Prototype: User Entering Information
In this screen shot, a user is entering some of the information required to make the
summary calculations. Note that what was designed in the low-fidelity prototype to be
the welcome screen is included in this second level screen as it was deemed that perhaps
both levels of information could fit in a single screen. Since not all of the necessary
component data is included in this display, it remains to be seen whether this design
could be used. After a user enters in values, in this prototype, they would need to press
the “Calculate Your Savings” button to have the summary values updated on the right
side. A final version would not require the user to do this, it would update the values
automatically as the user entered the necessary component information.
Selecting the “Tutorial” button will run the movie like tutorial steps the user through the
process of completing common tasks by showing them how to enter the necessary data.
OffRoads
Development
32
Figure 10 - High Fidelity Prototype: Help Text
The help text will be displayed in a pop-up dialog box. This will be used to provide
small amounts of guidance, such as a correct range of values. It will also be used to
explain errors.
OffRoads
Development
33
Website – Blog Portion
The first screenshot of the blog (figure 11) is of the main page. The links need to be
added, it is just the general idea of the website. The website is powered by WordPress
which is an open source web site content management system. Since it is open source, we
are allowed to use its database feature for free as long as we keep a reference to
WordPress on the site. The template functions the same way as it is also open source.
The second screenshot (figure 12) is of a user (Sally in this case) replying to the demo
post. Here you can see that she can write up her post and simply hit submit. The third
screenshot (figure 13) is of an unregistered or registered user not logged in making a post.
Here you can see that this type of user would have to put some sort of information in
order to post correctly.
Figure 11 – Blog: Main Screen
OffRoads
Development
34
Figure 12 – Blog: User Replying to a Post
OffRoads
Development
35
Figure 13 – Blog: User Initiating a Post (User Not Logged in)
OffRoads
Development
36
Figure 14 – Blog: User Entering a Post
OffRoads
Development
37
System Requirements
The low- and high-fidelity prototypes were developed in Flash, but the final version would
be implemented in HTML. Therefore, the user will only need a web browser that is a current
version with no special requirements currently in terms of plug-ins. The user’s browser will
be tested to make sure it is suitably configured so that the user will be informed immediately
if the web browser can not support OffRoads to avoid user frustration later on after using the
website and finding that a feature will not work with his version of a browser. Contact
information for help will be supplied if the user has problems.
The whole website does not need a complex array of pages, therefore CSS based templates
will be used for two reasons. The first is to provide uniformity. The second reason is that it
limits the size of the actual HTML file, as a goal in developing this is to reduce the overall
size of the site since the user might be on dial-up.
The servers hosting the website will need to be dynamic as the amount of traffic to the site
builds. Many hosting packages now come under five dollars a month and with plenty of
bandwidth and storage space (per month). In particular, “1and1” Hosting (www.1and1.com)
has hosting for about three dollars a month and has 500 GB of traffic allowed. This is plenty
to start with.
One consideration of the future design is to maintain a database of users’ data to build up
national and local averages for their comparison purposes. This will require a large database
that will need plenty of space to grow. As more users come to the website and user profiles
start to strain the hosting account, an upgrade to a bigger package might be needed (a
problem that would certainly be welcome).
This website will rely on data that will need to be updated periodically. For example, current
gas prices will need to obtained on a regular basis. There are many sources for this on the
web. AAAxxxiv has data showing trends in gasoline costs for different types of gas. It also
has a regional cost summary.xxxv The government provides a websitexxxvi for calculating true
gas mileage that could be used too to increase the accuracy.
Usability Testing
In general, the users who tested the high-fidelity prototype were positive about the user
interface and found the calculator portion easy to use and the blog portion interesting.
The subject matter was more of interest to some than others, which is expected and an
inherent part of the difficulty with such a subject matter as this website addresses,
specifically changing personal daily habits for the sake of the greater good (improved
ecological environment).
OffRoads
Development
38
The users were given tasks in using our prototype and blog. As per the prototype, they
were asked to enter in values to calculate costs saved and view the help function. They
were also given an introduction to the report and what was missing from our prototype to
gauge their reactions of our project. They were also asked to make an account with the
blog and post a message online. The phone aspect was not tested because it was no
functional at that point in time.
General User Comments and Suggestions
Everyone liked the Help Button and how it was easy to find. However a reoccurring
comment was that it needs to be more in depth. It is very basic right now saying the
minimum, but it could definitely be expanded.
There is also no help section affiliated with the forums pages, which still needs to be
added. The direction of the forums or blogs needs to be worked on. There seems to be a
few ideas of where to take this section among the testers. One approach is to have small
specific sections like carpooling, user testimonies, help, etc. Another approach is leave it
as it is until the site grows big and then deal with sub-categories. By doing this method,
we would leave the forum open to anything as opposed to having many sub-categories
and only one or two entries.
Another comment about the blogs was relatively reoccurring: how to deal with posts or
questions on the forums after a certain period of time. It does not look good to have old
posts or questions that have not been answered in months. It will be necessary to either
‘archive’ them or delete the postings every few months.
Quality of Usability Testing
We picked only undergraduate students for our surveys since they are the most
represented at the school. It was a coincidence that each member happened to pick two
males to participate. The lack of female representation was not intentional and further
plans for usability tests will remedy this problem so it is closer to a 50/50 balance
between male and female undergraduate students.
The average user was about the age of 20 and considering the focus was on under
graduates, that is a good norm. This does indicate that more upper classmen were chosen
than younger college students. The average use of computers per week was between 17
and 20 hours. Computer use was considered to be anything from using the computer for
email, video, homework, papers, etc where the student was actively interacting with the
computer. If the tester was just using it to play music, it was not included in those times.
OffRoads
Development
39
Most of our subjects relied on private transportation methods when they had a choice,
and some of the younger candidates who did not have that option were forced more to
accept public transportation.
All in all, they were all very open to the idea, though some were more drawn to it than
others. A recurring comment was that the website is very easy to use, but the motivation
of why a student or commuter would use such a program was expressed as a concern.
Subjects questioned what would draw a person to look into the site and how much would
they value or trust the outcomes. One solution would be to show the work and logic
behind the calculations. And there are few other possibilities to be considered. Again this
deviates from the point of testing usability so no further detail will be provided. But as a
whole it went great and most people flew through the tasks without asking questions or
raising concerns.
Usability Subject Detailed Comments
The following are notes from a subset of the 8 tested students.
Subject 1: Navpreet
Navpreet is a junior who relies mostly on his car to commute to campus and to work. He
sometimes takes public transportation.
He liked the idea of the calculator, but liked the blog better. He questioned the validity of
the results without seeing the sources. One comment he made is that within the
blog/forum area, there could be a section to try to get people to commute together. For
our test scenario, the commuters still need to get to the Metro station, which will happen
typically by car. Since they have to take the car to get to the Metro, they might as well
drive each other there to save even more gas.
Navpreet suggested that the forum perhaps had a way for people to click on a Metro
station (i.e. College Park Station) and see who travels from that station to arrange a better
commuting schedule. Implementing this is not difficult but it brings up the concern of
security and public posting of information like the commuter’s name and address
proximity. A solution could be that we can make OffRoads email addresses for each login based on the user’s log-in name so if Mr. X wanted to contact Mr. Y about commuting
to the Metro, an email can be sent to MrXLogin@offroads.com (for example) and should
Mr. X care to respond, he can. This sort of system is done on Craigs List. Another simple
option is to warn the poster that his information (name/address proximity) will be public
information. The previous option is more secure and user friendly with novice users, but
for the first phases of this project, the latter option is easier to implement. This will be
considered further.
Subject 2: Malcolm
OffRoads
Development
40
Malcolm is an athlete at the University and is a junior. He does realize the benefits for
public transportation to school and work, but relies mostly on his car to transport himself.
For example, when he has 5 AM practices with the team, he would rather drive himself or
get a ride rather than try to catch the bus. Deficiencies in the local public transportation
are a concern that are outside of the scope of this application. A goal of OffRoads is to
provide users a comparison of public and private transportation.
He found the test to be very easy and straightforward. This seemed to be in common with
the responses of the other subjects. He did spend more time looking at the blogs and the
dummy data. He said that if they were filled with testimonials he would be more
interested in that as opposed to the actual calculations. If that was the case, he mentioned
it would at least spawn an interest in looking at the cost calculator and re-thinking public
transportation.
The idea of trying to estimate cost between public and private transportation is not a new
one, but trying to make it comprehensible and appealing to a variety of users is a goal of
this system. Malcolm agreed that user testimonials would bring more credibility to the
system. He did not seem to care about the models or reasoning behind the calculation (as
Anand was – see below). He was more concerned with the site being useful and attractive
as a whole.
Subject 3: Nikhil
Nikhil is a senior engineering student at the university. Like most of our testers, he relies
heavily on public transportation, primarily the UMD DOT’s busses.
He completed the tasks fine with minimal questions and is anxious to see the final
product. He asked about our sources and as they were explained to him, he saw that there
are many similar projects out there. His main concern was getting this out to the public
and how it would be implemented.
Even though the comments steered away from the point of a usability test, he did bring
up a good question. It is not a question we have fully prepared for. Once we have the
final product done, where does it go from there? How or what is the best way to reach a
good majority of DC-Metro-Area commuters who drive on their own?
Subject 6: Anand
Anand is a freshman student at the University of Maryland. He does not have a car on
campus and relies heavily on public transportation within the school setting and when he
is home. He was more excited about this project because of his heavy use of public
transportation. We think that since he was more enthusiastic about it, his comments were
more complimentary then derogatory. But he did have some useful comments.
OffRoads
Development
41
He loved the blog aspect of the site but had similar comments that Navpreet had,
specifically, that it can be expanded to add more features. His main focus of what could
be added would be specific forums and successful user testimonials.As far as the
OffRoads Calculator, he mentioned to include more of an explanation of how the results
were derived. Perhaps it could be an optional button that would explain the math or logic
behind the results. It does not have to be a mandatory feature where the user has no
choice but to see the methodology behind it, but maybe another click-button that would
bring up a screen explaining how the data was calculated.
As you can see from the figures below, the average age of the surveyed was 20 which is
what we expected since we surveyed friends of our age. One problem of this way was
that we accidentally surveyed only males. Not that this has anything to do with effect of
the survey, but the next rounds should be more even in terms of sex. Most of our
surveyed did use public transportation in general which was a good start since those are
the ones who are more inclined to be anxious with such a project like ours.
Survey Chart 1
35
30
Average
25
20
Age
Hours a week
15
10
5
0
1
2
3
4
5
6
7
8
Users 1-8
Figure 15 - Survey
Chart 1
Survey Chart 2
3.5
Average Days
3
2.5
Days C ommute to Work
2
Average # Days Drive to
Work
1.5
Average # Days Take
Public Trans. to Work
1
0.5
0
1
2
3
4
5
6
7
8
Users 1-8
Figure 16 - Survey Chart 2
OffRoads
Development
42
Our post questionnaire results showed that our idea was great but the main concern was
attracting people to the site, getting our name out there, and actually persuading users to
switch over to public transportation. The most important and time consuming thing we
need to do yet is to complete the design of the calculator and blog to be uniform and have
all aspects working. Next, the blog portions needs to be more defined in categories; help
section, and administrative details. Third in importance came incorporating the calculator
with users. The calculator can have more of a user log-in interface and be connected to
the blog. Another thing we can work on is the actual calculator. In our design, we
incorporated a few ideas on how the user would save. More items can be easily calculated
to prove the effects of public transportation. Lastly, we could develop more of a system
on how we could attract people on the site. This may seem as the most important item,
but this project is originally focused on the design rather than the implementation
process.
week
a
1-8AverageAgeHours
10510152025303512345678Users
Chart
Survey
All in all the users were satisfied with our usability testing and our design. The bar chart
below shows that the “Number of Steps” received the lowest score because the blog and
calculator were not integrated at that point. Also if we include user accounts to both, an
additional step can be saved. The point the users made was that when you are trying to
attract others who are not as interested, the fewer number of steps is better for attraction.
Higher the Score the Better
Work
to
Trans.
TakePublic
Days
#
toWorkAverage
Drive
Days
#
WorkAverage
to
Commute
DaysDays
1-8Average
200.511.522.533.512345678Users
Chart
Survey
Post Questionnaire (Learning Process)
6
5
4
3
Series1
2
1
0
Operating
System
Getting
Started
Number of
Steps/Task
Logical
Sequence?
The Questions
Figure 17 - Post Questionnaire Chart
OffRoads
Development
43
Mobile Device
The OffRoads Mobile website allows users to view the calculator via a mobile device that
is WAP enabled. Many phones and PDA’s are able to access WAP content, but are not
able to access html content, so OffRoads Mobile allows more people to use the
calculator.
System Requirements
Different mobile devices display WML content in different ways, so a very simple
interface must be used in order for the majority of users to be able to view our calculator.
The Nokia Mobile Internet Toolkit allows web developers to test their code on multiple
PDA and cell phone SDKs, giving feedback on whether the code is compatible. Nokia
provides SDKs for each of their phones in production, enabling testing the functionality
on the Nokia 3300, 3410, 5100, 6310i, and 7210. While certain graphical interfaces are
available on the Nokia 7210 SDK, they can’t be run on the 3300, so the interface was
designed around the 3300’s capabilities, which were compatible with all later models.
Implementation
As of now, the actual calculations are not implemented. A CSS page would be needed to
calculate the actual savings given the user’s inputs, along with the functions that provided
the calculations. An actual implementation would communicate with the CSS page and
be sent back the resulting answers, all viewable on the mobile device. All of the links are
enabled however, along with user input and variable selection.
Since a WAP-ready server is required to host the content, it is not possible to give
demonstrations via a website. Testing is possible through WML simulators, like the
Nokia Mobile Browser 4.0 shown in the screen shots below. The simulator reads the
WML page and displays it as a mobile device would, and simulates the limited
functionality of a phone or PDA. OffRoads Mobile can be divided into 4 main sections:
the homepage, the calculator, the results, and “about OffRoads”. Using the arrow keys,
users are able to select between links and input fields, and are able to enter information
via keyboard or numbered keypad represented on the phone. The screen shots below
were taken using the Nokia 3300 SDK (see the project website for a video demonstration
of OffRoads mobile).
OffRoads
Development
44
OffRoads
Development
45
Figure 18 - Mobile Device Sample Screens
These screen shots were captured from the Nokia Mobile Browser WML simulator. The
sequence shows a user using the calculator portion to enter personal data including their
car size and daily mileage, and getting help information.
OffRoads
Development
46
Conclusions
While the blog is fairly functional, the calculator portion of the website needs work. Due
to time constraints, it was deemed prudent that a form for calculations would be
developed in Flash and not HTML. With the good amount of experience this semester
developing various Flash applications, creation of a form that could display these
calculations in an attractive interface was not a difficult task for the group, but it is far
from complete.
HTML is the preferred development tool to make the website more accessible. Using
HTML would not require the user to have any specific plugins or need to download a
software package to view our website properly. This is a goal that our group is working
towards for a final implementation.
Many interfaces still need to be implemented although there is no portion that is
prohibitively difficult. Once development is complete on the various interfaces,
uploading the calculator portion of our project should be fairly simple and create a
smooth transition for the user working with our project. None of the calculations is
difficult, but data will need to be acquired and stored and periodically updated to support
the application. For example, current gasoline prices and car maintenance costs will need
to be verified for changes on a regular basis.
For the future, the website needs to be reviewed and evaluated periodically, probably
once or twice a year. This needs to be done for several reasons. It should be given a fresh
look periodically to keep users interest, especially those who will have used it regularly
for a long time. A new look and new facts will help with this goal. Also the blogs will
need to be archived regularly. If there are new users to the blogs and there are too many,
it might be perceived that it’s too much information at once and they might be turned
away.
While the OffRoads Mobile interface is in place, it still lacks the functionality of real,
calculated results. As well, the .wml file would need to be hosted by a WAP enabled host
in order for users to access the site, and extensive advertising would be required for users
to find it. Mobile device oriented searching is still in its early stages, and not nearly as
advanced as html searches, so sharing links with similar web pages, and advertisements
on phone networks like Cingular and Nextel would greatly increase the accessibility of
the mobile calculator.
With advancement in cell phone technology, a new GUI mobile page could be put into
place in the future, when more phone SDKs are compatible and the phones themselves
are able to handle more advanced graphics. As well, either an opening page, or an autodetection script could route users to the appropriate page for their phone.
OffRoads
Conclusions
47
For current improvement, the page should be tested against more phone SDKs, as not all
phones will display the page the same way. The code should be optimized as to be able
to be displayed on the majority of mobile devices, and the areas of commute should be
expanded to apply to a broader area.
The first task that would need to be completed when this project continues would be to do
usability testing for the mobile device for a first time and again for the website since
significant modifications have been made since they were originally performed.
Appendix 1 has been included to show the materials that would be of use for this task, as
they were designed for the original usability testing, although they may require a small
amount of updates. Unfortunately, the prototype was not completed enough to use all of
these materials as they were designed at that time of usability testing. The survey
included was used, however, an online survey was created for the project website using
the www.surveymonkey.com website, which is very effective for getting feedback from
web users who won’t be testing the website out under official usability testing
circumstances but who would come from a wide background. This will greatly broaden
our base of users for usability testing, as anyone on the web who happens to come across
our project website could be a tester.
The authors hope that the development of OffRoads can continue into the future as the
value of it will increase over time as more people become aware of and become
concerned about our global health. OffRoads hopes to be a part of solving this problem
in the near term and continue into the future.
OffRoads
Conclusions
48
Acknowledgements
A special thank you to Dr. Shneiderman who suggested that we read B.J. Fogg’s book
“Persuasive Technology”. It helped immensely with many of the hardest aspects of this
website. This book and his continued guidance gave us a greater understanding of the
difficult nature of this subject matter and helped us overcome many obstacles.
We would also like to thank the usability testers and project reviewers for their time, as
the objective help of others to see omissions and errors is always greatly appreciated in a
project such as this. We are glad that signing the consent form didn’t scare the usability
testers off and are grateful for their time and constructive criticism.
OffRoads
Acknowledgements
49
Appendix 1 – Usability Test Materials
Test Scenario Description for Usability Testers
The following is the exact text of what will be said to the test subjects to prepare them for
their tasks.
“Welcome and thank you for volunteering to help us test an exciting new website idea
that is currently in development. Thanks to your generous donation of time, this website
can be the best it can be and that will benefit not only the users of the website but the
global community. First, we would like to describe the purpose of the system we call
OffRoads and then we will describe to each of you the type of user that you will be
playing.
OffRoads is a website whose target audience is people who currently predominantly use
their car to commute regularly to work. The purpose is to show them how much they
have to gain by switching to public transportation for one year. They will not only see
the annual personal benefits such as monetary savings, health, and time, but also the net
effects that their small change can make to the world, a veritable butterfly effect. We will
be asking you to carry out typical tasks for certain types of users.
We will have you use the mockup website to carry out a predefined set of tasks that are
described on a piece of paper that we will give you. When you are through, there will be
a brief test to ask you about your experience with the system as well as some
demographic information such as your age, gender, and computer usage. The questions
are simple to answer and will only take a few moments. This will help us analyze the
data that results from these user tests. Please remember that it is not you who are being
tested, but the software. There may be problems with it and we ask that you please ask if
you have any questions at any point. Are there any questions now? Thank you again for
your time. We will begin now.”
Handout the following hardcopy document to the user.
OffRoads
Appendix 1 – Usability Test Materials
50
OffRoads Instructions
First, take a few moments to review the main screen of the OffRoads system and to get
acquainted with it before performing the tasks listed below. Proceed when you are ready.
The role you will be playing when using this system is that of a middle-aged man named
Joe who heard about the OffRoads website from a friend. His friend told him that when
he used the system, he was surprised at the savings that he could realize by taking public
transportation instead of driving. Because his friend had been affected by this and was
seriously considering changing, he thought he would see if the same was true for him.
Joe is not very concerned about the environment, but would be interested to know what
the effects would be.
Joe lives about a half mile from the Silver Spring, Maryland metro stop and commutes
into Washington, D.C. every work day (Monday through Friday, normal rush hour) by
car. He drives 25 miles round trip and pays $15 per day for parking. His office is about
3 blocks away from the L’Enfant Metro station. He drives a 2003 Windstar Van. He
currently pays $2.50 per gallon of gas. Your task is to find out how much money he could
save by switching to public transportation.
Take a moment to see how you could do this with OffRoads. Joe is not interested in
entering any more information than has been provided.
Task 1:
Use the information provided above to find the “Gas Savings”
Task 2:
Find out how much money Joe’s annual commute would cost if he were to take the Metro.
Task 3:
Find out how much emissions the average person is responsible for annually.
Task 4:
Find someone who had a commute similar to Joe who used the OffRoads system before.
OffRoads
Appendix 1 – Usability Test Materials
51
Survey
1. What is your age? ________
2. What is your gender? ______________
3. About how many hours a week do you use a computer? ________
4. Do you work outside of the home? Yes No
If your answer was no, then you are finished with this questionnaire, thank you.
5. How many days per week do you commute to work? 1 2 3 4 5 days
6. How many days per week on average do you drive to work? 0 1 2 3 4 5 days
7. How many days per week on average do you use public transportation to get to
work? 0 1 2 3 4 5 days
OffRoads
Appendix 1 – Usability Test Materials
52
Questionnaire
1
1.1
1.2
1.3
1.4
2
2.1
2.2
2.4
2.5
Please circle the most appropriate ratings below:
Overall Reaction
Terrible
Frustrating
Dull
Difficult
Learning
Learning to operate the system
Difficult
Getting started
Difficult
Number of steps per task
Too many
Steps to complete a task follow a
Never
logical sequence
OffRoads
1
1
1
1
2
2
2
2
3
3
3
3
4
4
4
4
5
5
5
5
Wonderful
Satisfying
Stimulating
Easy
1
1
1
1
2
2
2
2
3
3
3
3
4
4
4
4
5
5
5
5
Easy
Easy
Just right
Always
Appendix 1 – Usability Test Materials
53
References
i
http://www.wmata.com
ii
http://www.rideshareonline.com
iii
http://www.rideshareonline.com/CostCalculator.htm
iv
http://www.commutesolutions.org/calc.htm
v
http://www.epa.gov
vi
http://yosemite.epa.gov/oar/globalwarming.nsf/content/ResourceCenterToolsGHGCalcu
lator.html
vii
http://www.aaa.com
viii
http://www.aaapublicaffairs.com/Main/Default.asp?CategoryID=3&SubCategoryID=9
&ContentID=23
ix
http://www.edmunds.com
x
http://www.edmunds.com/apps/cto/CTOintroController
xi
http://www.terrapass.com
Langer, Gary, “Poll: Traffic in the United States, A Look Under the Hood of a Nation
on Wheels”. ABC News, February 13, 2005.
xii
xiii
Fogg, B.J., Persuasive Technology: Using Computers to Change What We Think and
Do. Morgan Kaufmann Publishers, 2003.
xiv
http://www.eia.doe.gov/pub/oil_gas/petroleum/data_publications/
company_level_imports/current/import.html
xv
Adams, Kathleen; Caplan, Jeremy; Dell, Kristina; Masters, Coco, Time Magazine,
October 30, 2006, page 41, “America by the Numbers”
Ritter, Karl, “Global Warming: Countries Lose Sight of Kyoto Targets”, The Gazette
(online), November, 2006.
xvi
xvii
http://www.EurActiv.com, “Studies Make Case for Fighting Climate Change”
Homer-Dixon, Thomas, “Unleash Canada’s Capitalist Creativity on Global
Warming”, The Globe and Mail, 10/21/06 page A25.
xviii
OffRoads
References
54
xix
http://www.tfhrc.gov/pubrds/05mar/01.htm (Department of Transportation, Federal
Highway Administration)
xx
Künzli, N. et al. Public health impact of outdoor and traffic-related air pollution: a
European assessment. Lancet, 356: 795–801 (2000).
xxi
http://www.chi2007.org/submit/designcomp.php
xxii
http://www.chevron.com
xxiii
http://www.doe.gov
Foss, Brad, “Power Execs Foresee Carbon Emission Caps”, The Mercury News, San
Jose, 10/21
xxiv
xxv
http://walking.about.com/library/cal/uccalc1.htm
xxvi
http://www.nabisco.com
xxvii
http://www.terrapass.com
xxviii
http://www.mapquest.com
xxix
http://www.myfootprint.org
xxx
http://www.c-i-a.com/pr0305.htm CIA Inc (Computer Industry Almanac Inc.)
xxxi
http://www.infoworld.com/archives/emailPrint.jsp?R=printThis&A=/article/06/04/07/
77227_HNcellphonerecord_1.html
xxxii
Gadallah, Mamdouh R., Fisher, Ray L., Applied Seismology: a Comprehensive
Guide to Seismic Theory and Application. Pennwell Corporation, 2004
xxxiii
http://www.techsmith.com/camtasia.asp?CMP=KgoogleCStm
xxxiv
http://www.fuelgaugereport.com/
xxxv
http://www.fuelcostcalculator.com/
xxxvi
http://www.fueleconomy.gov
OffRoads
References
55