Building Forio Web Simulations - Designing Popular Simulations

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


This is not a simulation.


This is not a simulation.

A simulation is the combination of a model and a user interface.



Users have

expectationsabout how

rich internet applications should work.

Ignoring Ignoring these design principles canthese design principles can

frustrate usersfrustrate users. .



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


Tables

Graphs

QuantitativeOutput

UserDecisions

Actionsand

Navigation


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.



Where is the qualitative output on user interface?


QualitativeOutput


QualitativeOutput


http://www.youtube.com/watch?v=GA8z7f7a2Pk

Sasquatch Music Festivalvideo to explain diffusion qualitatively.


UserDecisions

Basic user decisions can be created using

Radio Buttons, Sliders, Text Boxes, and Check Boxes.


Actionsand

Navigation

Basic actions and navigation

Buttons, Link, Tab Navigation, Hit Area, and

Drop Down List.


Basic tab navigation







enjoyable to use

Web browsing tools are becoming

increasingly diverse.



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


2. Select Document Settings

1. Click in here

3. Change Settings Here


Web simulations operate on a variety of operating systems and browsers.


In the United States, Excel is installed on about

75% of all computers…


…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


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..



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?


When required to enter an email address,

50% drop out.


HTML 5 is the next major revision of HTML and may

eliminate the need for Flex/Flash.


HTML 5 support across all popular browsers is

years away.



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


Forio discourages:

Client-side Java

Video without using Flash/Flex

Browser-specific designs

HTML 5 reliant web pages

Relying on desktop applications



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

[email protected]

Try building your own web simulation at:

www.forio.com/simulate

Technology

Building Forio Web Simulations - Designing Popular Simulations