Web simulation development fundamentals using Forio Simulate
Week 6 of 6
Michael BeanForio Business Simulations
In six hours over six weeks, you’ll know the fundamentals of building a web simulation
Model BuildingWeek 1: Introduction to model building Week 2: Intermediate model building
Interface DesignWeek 3: Basic user interface design Week 4: Intermediate interface design
Advanced ConceptsWeek 5: Multi-player games Week 6: Game design and project management
What we will discuss today
Game design and project management The difference between models and simulationsHow to make easily understandableHow to make sims convenient to accessHow to make sims enjoyable to useProject managementThe most important thing you can do to create a high quality simulation
Thousands of valuable models and analyses are
trapped.
Organizations and individuals could benefit from these models and analyses if they were
shared.
Putting your material online is
not enough.
Sharing requires a Sharing requires a contributor and contributor and
an audience.an audience.
% o
f T
wit
ter
Use
rs
Number of Followers Per Twitter User
On the web, audience size is
not distributed evenly.
Web simulations and data visualizations follow the
same usage pattern as other web content.
In order to get widely used, simulations should be
easily Understandable,
Convenient to access, and
Enjoyable to use
easily understandable
convenient to access
enjoyable to use
easily understandable
This is not a simulation.
easily understandable
This is not a simulation.
A simulation is the combination of a model and a user interface.
easily understandable
easily understandable
Users have
expectationsabout how
rich internet applications should work.
Ignoring Ignoring these design principles canthese design principles can
frustrate usersfrustrate users. .
easily understandable
easily understandable
There are only four common tools that you need to create
basic web simulations.
QuantitativeOutput
UserDecisions
QualitativeOutput
Actionsand
Navigation
QuantitativeOutput
UserDecisions
Non-Quantitative
Output
Actionsand
Navigation
easily understandable
Tables
Graphs
QuantitativeOutput
UserDecisions
Actionsand
Navigation
easily understandable
Chart ToolsFusionCharts www.fusioncharts.com
Forio Simulate UI Builder forio.com/simulate
Chart Selector http://www.flickr.com/photos/amit-agarwal/3196386402
Table ToolsStephen Few, Designing Tables and Graphs to Enlightenhttp://www.amazon.com/Show-Me-Numbers-Designing-Enlighten/dp/0970601999
QualitativeOutput
Basic qualitative output from web simulations can be created from
text, images, and video.
easily understandable
easily understandable
Where is the qualitative output on user interface?
easily understandable
QualitativeOutput
easily understandable
QualitativeOutput
easily understandable
http://www.youtube.com/watch?v=GA8z7f7a2Pk
Sasquatch Music Festivalvideo to explain diffusion qualitatively.
easily understandable
UserDecisions
Basic user decisions can be created using
Radio Buttons, Sliders, Text Boxes, and Check Boxes.
easily understandable
Actionsand
Navigation
Basic actions and navigation
Buttons, Link, Tab Navigation, Hit Area, and
Drop Down List.
easily understandable
Basic tab navigation
easily understandable
Basic tab navigation
easily understandable
Basic tab navigation
easily understandable
convenient to access
enjoyable to use
Web browsing tools are becoming
increasingly diverse.
convenient to access
convenient to access
96%96% of all displays are at of all displays are at
1024 x 768 pixels1024 x 768 pixels or higher. or higher.
1024 x 768
Source: http://www.w3schools.com/browsers/browsers_stats.asp
convenient to access
2. Select Document Settings
1. Click in here
3. Change Settings Here
convenient to access
Web simulations operate on a variety of operating systems and browsers.
Source: http://www.w3schools.com/browsers/browsers_stats.asp
In the United States, Excel is installed on about
75% of all computers…
convenient to access
…which implies Excel-only results will
lose 25% of your audience.
Source: http://www.webmasterpro.de/portal/news/2010/02/05/international-openoffice-market-shares.html
convenient to access
Every screen size, plug-in, browser or application limitationreduces the number of potential users.
All users Windows users with Firefox and
Excel
Windows users with
Firefox
Windows users
In uncontrolled In uncontrolled environments users environments users can get can get
distracteddistracted……
……therefore web simulations therefore web simulations
need to be need to be interruptibleinterruptible..
convenient to access
convenient to access
ExperimentExperiment
We made half our users We made half our users
enter an email enter an email address address before using a before using a simulation, simulation, the other half could use the the other half could use the simulation without an email.simulation without an email.
What happened?What happened?
convenient to access
When required to enter an email address,
50% drop out.
convenient to access
HTML 5 is the next major revision of HTML and may
eliminate the need for Flex/Flash.
convenient to access
HTML 5 support across all popular browsers is
years away.
Source: http://www.w3schools.com/browsers/browsers_stats.asp
convenient to access
Forio recommends:
1024 x 768 minimum screen size
HTML with javascript and/or Flex/Flash
Testing on both Windows and Mac
Testing on IE7, IE8, IE9, Firefox, Chrome, Safari
convenient to access
Forio discourages:
Client-side Java
Video without using Flash/Flex
Browser-specific designs
HTML 5 reliant web pages
Relying on desktop applications
easily understandable
convenient to access
enjoyable to use
Games and simulations are converging.
enjoyable to use
enjoyable to use
When people talk about computer When people talk about computer games, they often meangames, they often mean
console gamesconsole gamesfor the Wii, Playstation, or Xbox.for the Wii, Playstation, or Xbox.
The problem is, most modeling and simulation
projects have smaller budgets than console game projects.
enjoyable to use
Source: http://wiki.answers.com/Q/Video_game_development_costs
More practical ideas for game dynamics come from
casual games.
enjoyable to use
Game dynamics include
intermittent rewards, leveling up, and player communication.
enjoyable to use
Monopoly provides an example of how to apply
intermittent rewards.
enjoyable to use
enjoyable to use
Attempts at automating Monopoly have been largely
unsuccessful.
The implication for simulations is to allow for
player experimentation, failure,
and repeated play.
enjoyable to use
Leveling up Leveling up meansmeans
start easy start easy and gradually and gradually add complexity add complexity after players after players have mastered have mastered the basics.the basics.
enjoyable to use
Make simulations easy to use at first but then
progressively more sophisticated.
enjoyable to use
Without player communication, Without player communication,
the MIT the MIT beer game beer game can be can be drydry, ,
complicated complicated andand frustratingfrustrating..
enjoyable to use
With player With player communication, communication, the beer game the beer game
can be can be funfun..
enjoyable to use
Providing leader boards encourages competition and increases learning.
enjoyable to use
Creating a user interface is a different skill than creating a model.
Writers, animators, directors, and voice actors all overlap.
Writers, animators, directors, and voice actors are specialized.
< 5 minutes per episode. 20 minutes per episode.
Inexpensive to produce. Expensive to produce.
AssessmentDesignDevelopmentAlpha / Beta / Field TestsRelease
Forio’s current project planning methodology
60
Overview of ideas generated during our meeting
61
Students will experiment with price optimization by applying marginal math.
62
Decisions in previous rounds will affect behavior in the current round.
63
Initial causal diagram for the pricing simulation
Relative Attractiveness
Market Share
Sales Volume
Product Availability
Product Predictability
Product Quality
Net Price
List Price
Price Promotions
Expected Price
Pricing Fairness
Inventory
Capacity
Revenue
Variable Costs
Purchase Frequency
Market Size
Peak / Non-Peak Market Growth RateSeasonality
Fixed Costs
Total Costs
Profit
DELAY
DE
LAY
One test with eight testers will
uncover more problems in a
single test
But the worst problems will keep
them from getting far enough to find others
Total problems found: 5
Frequent testing is the most important thing you can do to create a high quality simulation
One test, eight testers = eight tests
Three testers may not find as many
problems in a single test
But after major problems are fixed, they’ll see problems they couldn’t have seen before.
Total problems found: 9
First test Second test
Two tests, three testers = six tests
Although creating user interfaces is a different skill than creating models,
the same principles apply.
complexity != sophistication
simplicity improves comprehension
http://xkcd.com/552/
Source: http://xkcd.com/605/
Like XKCD, if the content is good, a simple design can be effective.
Surveys
For questions, contact me:Michael Bean
Try building your own web simulation at:
www.forio.com/simulate
Top Related