Interactive Media Design
Outline Notes for
Computing (FT) & IT Management (FT/PT)
Stephen Howell
stephen.howell@ittdublin.ie
1
Contents
1. User Interface Design
03
2. Data Visualisation
34
3. E-Learning Design
62
4. Game Design
80
5. Processing
99
2
User Interface Design
3
User Interface Design

Effective Interfaces


Effective interfaces are visually apparent and forgiving, instilling in their
users a sense of control. Users quickly see the breadth of their options,
grasp how to achieve their goals, and do their work. Effective interfaces
do not concern the user with the inner workings of the system. Work is
carefully and continuously saved, with full option for the user to undo
any activity at any time. Effective applications and services perform a
maximum of work, while requiring a minimum of information from
users. (Prinicipals on next slide)
This work is copyright 2003 by Bruce Tognazzini. Permission to make copies for personal
use is granted without reservation, provided this copyright notice remains on the copy.
Please contact the author for permission to republish on a web site, to publish in bound
form, or to make multiple copies, except that educators and in-house corporate trainers
may make sufficient copies for their own students. No commerical use may be made of
the work beyond this in-house exception. This notice must be retained together with any
version of the work.
http://www.asktog.com/basics/firstPrinciples.html
4
Principals of Effective Interfaces








Anticipation
Autonomy
Color Blindness
Consistency
Defaults
Efficiency of the User
Explorable Interfaces
Fitts' Law








Human Interface Objects
Latency Reduction
Learnability
Metaphors, Use of
Protect Users' Work
Readability
Track State
Visible Navigation
http://www.asktog.com/basics/firstPrinciples.html
5
Web Usability

7±2 Principle

2-Second-Rule

3-Click-Rule

80/20 Rule (The Pareto principle)

Eight Golden Rules of Interface Design

Fitts’ Law

Inverted Pyramid

Satisficing

Psychology Behind Usability
6
Web Usability (continued)

Baby-Duck-Syndrome

Banner-Blindness

Cliffhanger-Effect (Zeigarnik-Effect)

Gestalt principles of form perception

The Self-Reference Effect

Usability Glossary: Terms and Concepts

Eye-Tracking

Fold
7
Web Usability (continued)

Foveal viewport (Foveal area)

Gloss

Graceful Degradation (Fault-tolerance)

Granularity

Hotspot

Legibility

Minesweeping

Mystery-Meat Navigation (MMN)

Physical consistency
8
Web Usability (continued)

Progressive Enhancement (PE)

Readability

User-centered design (UCD)

Vigilance (sustained attention)

Walk-Up-And-Use Design

Wireframe
http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/
Interaction Design Encyclopaedia: http://www.interaction-design.org/encyclopedia/
Usability First Glossary: http://www.usabilityfirst.com/glossary/index_terms.txl
Usability Glossary: http://www.d.umn.edu/itss/support/Training/Online/usability/glossary.html
9
9 Common Usability Mistakes (Web)
1. Tiny clickable areas
2. Pagination used for the wrong purpose
3. Duplicate page titles
4. Content that is difficult to scan
5. No way to get in touch
6. No way to search
7. Too much functionality that requires registration
8. Old permalinks pointing nowhere
9. Long registration forms
http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
10
10 Usability Nightmares (Web)
1. Hidden log-in link
2. Pop-ups for content presentation
3. Dragging instead of vertical navigation
4. Invisible links
5. Visual noise
6. Dead end
7. Content blocks layering upon each other
9. Drop-Down Menus
10. Blinking images
http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/
11
8 Usability Check-Points
1. You don’t use pop-ups.
2. You don’t change users’ window size.
3. You don’t use too small font sizes.
4. You don’t have unclear link text.
5. You don’t have dead links.
6. You have at most one animation per page.
7. You make it easy to contact you.
8. Your links open in the same window.
12
10 Useful Techniques
1. Padded block links
2. Typesetting buttons
3. Using contrast to manage focus
4. Using colour to manage attention
5. White space indicates relationships
6. Letter spacing
7. Auto-focus on input
8. Custom input focus
9. Hover controls
10. Verbs in labels
http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface- 13
Five Principles Of Web Design
1. Use an effective marketing principle
2. Experiment with few colors
3. Strive for Balance
4. Strive for Clarity
5. Address your users’ needs
http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/
14
10 Useful Web Interface Techniques
1. Interface elements on demand
2. Specialized controls
3. Disable pressed buttons
4. Shadows around modal windows
5. Empty states that tell you what to do
6. Pressed button states
7. Link to the sign-up page from the log-in page
8. Context-sensitive navigation
9. More emphasis on key functions
10. Embedded video
http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/ 15
12 Useful Techniques Design
1. Highlight important changes
2. Enable keyboard shortcuts in your Web application
3. Upgrade options from the account page
4. Advertise features of the application
5. Use color-coded lists
6. Offer personalization options
7. Display help messages that attract the eye
8. Design feedback messages carefully
9. Use tabbed navigation
10. Darken background under modal windows
11. Lightboxes and Slideshows
12. Short sign-up forms
http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/ 16
Usability Testing




Evaluate a product by testing it on users
Usability testing focuses on measuring a human-made
product's capacity to meet its intended purpose
Usability testing measures the usability, or ease of
use, of a specific object or set of objects
General human-computer interaction studies attempt
to formulate universal principles
17
Goals of Usability Testing

Usability testing is:



black-box testing
to observe people using the product to discover errors and
areas of improvement
generally involves measuring how well test subjects
respond in four areas


Efficiency, Accuracy, Recall, Emotional response.
The results of the first test can be treated as a baseline or
control measurement

all subsequent tests can then be compared to the baseline to
indicate improvement
18
Goals of Usability Testing (cont.)

Performance


Accuracy


How many mistakes did people make? (And were they fatal or
recoverable?)
Recall


How much time, and how many steps, are required for people
to complete basic tasks? e.g. find something to buy, create a
new account, and order the item.
How much does the person remember afterwards or after
periods of non-use?
Emotional response

How does the person feel about the tasks completed? Is the
person confident, stressed?
19
What Usability Testing is Not



Simply gathering opinions on an object or document is
market research
Usability testing usually involves systematic
observation under controlled conditions to determine
how well people can use the product
Rather than showing users a rough draft and asking,
"Do you understand this?", usability testing involves
watching people trying to use something for its
intended purpose.
20
Methodology

Setting up a usability test involves



creating a scenario, or realistic situation, wherein the person
performs a list of tasks using the product being tested while
observers watch and take notes.
Several other test instruments such as scripted instructions, paper
prototypes, and pre- and post-test questionnaires are also used to
gather feedback on the product being tested. For example, to test
the attachment function of an e-mail program, a scenario would
describe a situation where a person needs to send an e-mail
attachment, and ask him or her to undertake this task. The aim is to
observe how people function in a realistic manner, so that
developers can see problem areas, and what people like.
Techniques popularly used to gather data during a usability test
include think aloud protocol and eye tracking.
21
Think-aloud Protocol




TAP is a method used to gather data in usability
testing in product design and development, in
psychology and a range of social sciences (e.g.,
reading, writing and translation process research).
Think aloud protocols involve participants thinking
aloud as they are performing a set of specified tasks.
Users are asked to say whatever they are looking at,
thinking, doing, and feeling, as they go about their
task.
This enables observers to see first-hand the process of
task completion (rather than only its final product).
22
Think-aloud Protocol (continued)


Observers at such a test are asked to objectively take
notes of everything that users say, without attempting
to interpret their actions and words. Test sessions are
often audio and video taped so that developers can go
back and refer to what participants did, and how they
reacted.
The purpose of this method is to make explicit what is
implicitly present in subjects who are able to perform
a specific task.
23
Remote Testing

Remote Testing or Asynchronous Usability Testing





involves the use of a specially modified online survey
allowing the quantification of user testing studies by
providing the ability to generate large sample sizes
Additionally, this style of user testing also provides an
opportunity to segment feedback by demographic,
attitudinal and behavioural type.
The tests are carried out in the user’s own environment
(rather than labs) helping further simulate real-life scenario
testing.
This approach also provides a vehicle to easily solicit
feedback from users in remote areas.
24
Hallway Testing

Rather than using an in-house, trained group of
testers, just five to six random people, indicative of a
cross-section of end users, are brought in to test the
software



the name of the technique refers to the fact that the
testers should be random people who pass by in the
hallway.
The theory, as adopted from Jakob Nielsen's research, is
that 95% of usability problems can be discovered using this
technique
Jakob Nielsen popularized the concept of using numerous
small usability tests, typically with only five test subjects
each, at various stages of the development process.
25
Hallway Testing (continued)

Nielsen's argument is that, once it is found that two or
three people are totally confused by the home page,
little is gained by watching more people suffer
through the same flawed design.



"Elaborate usability tests are a waste of resources. The best
results come from testing no more than 5 users and running
as many small tests as you can afford."
The claim of "Five users is enough" was later described by a
mathematical model which states for the proportion of
uncovered problems U such that U = 1 − (1 − p)n
where p is the probability of one subject identifying a
specific problem and n the number of subjects (or test
sessions)
26
Existing Problem Graph
http://en.wikipedia.org/wiki/Usability_testing
27
Why You Only Need to Test with 5 Users


http://www.useit.com/alertbox/20000319.html
Some people think that usability is very costly and
complex and that user tests should be reserved for the
rare web design project with a huge budget and a
lavish time schedule. Not true. Elaborate usability
tests are a waste of resources. The best results come
from testing no more than 5 users and running as
many small tests as you can afford.
28
Analysis


In earlier research, Tom Landauer and Nielsen showed
that the number of usability problems found in a
usability test with n users is:
N(1-(1-L)n)

where N is the total number of usability problems in the
design and L is the proportion of usability problems
discovered while testing a single user. The typical value of L
is 31%, averaged across a large number of projects they
studied.
29
Plotting the Curve

Plotting the curve for L=31% gives the following result:
30
Hallway Testing Insights

The most striking truth of the curve is that zero users
give zero insights.

As soon as you collect data from a single test user, your
insights shoot up and you have already learned almost a
third of all there is to know about the usability of the
design. The difference between zero and even a little bit of
data is astounding.

When you test the second user, you will discover that this person
does some of the same things as the first user, so there is some
overlap in what you learn. People are definitely different, so there
will also be something new that the second user does that you did
not observe with the first user. So the second user adds some
amount of new insight, but not nearly as much as the first user
did.
31
Insights (continued)



The third user will do many things that you already observed
with the first user or with the second user and even some
things that you have already seen twice. Plus, of course, the
third user will generate a small amount of new data, even if
not as much as the first and the second user did.
As you add more and more users, you learn less and less
because you will keep seeing the same things again and
again. There is no real need to keep observing the same
thing multiple times, and you will be very motivated to go
back to the drawing board and redesign the site to eliminate
the usability problems.
After the fifth user, you are wasting your time by observing
the same findings repeatedly but not learning much new.
32
10 Usability Heuristics (Nielsen)
1) Visibility of system status
2) Match between system and the real world
3) User control and freedom
4) Consistency and standards
5) Error prevention
6) Recognition rather than recall
7) Flexibility and efficiency of use
8) Aesthetic and minimalist design
9) Help users recognize, diagnose, and recover from errors
10) Help and documentation
http://www.useit.com/papers/heuristic/heuristic_list.html
33
Data Visualisation

Process of taking (possibly large) data set and displaying to show trends or
discover correlations. Many tools / technologies available for developing Viz



Processing is the one we used (see end of slides for some Processing notes)
Data visualization is the study of the visual representation of data, meaning
"information which has been abstracted in some schematic form, including
attributes or variables for the units of information" - Michael Friendly
The "main goal of data visualization is to communicate information clearly and
effectively through graphical means. It doesn’t mean that data visualization needs to
look boring to be functional or extremely sophisticated to look beautiful. To convey
ideas effectively, both aesthetic form and functionality need to go hand in hand,
providing insights into a rather sparse and complex data set by communicating its keyaspects in a more intuitive way. Yet designers often fail to achieve a balance between
design and function, creating gorgeous data visualizations which fail to serve their main
purpose — to communicate information". - Vitaly Friedman (2008)
http://en.wikipedia.org/wiki/Data_visualization
34
Data Visualization Scope



One common focus is on information presentation (Friedman,
2008). Two main parts of data visualization:

statistical graphics

thematic cartography
Seven subjects of data visualization: Mindmaps, Displaying news,
Displaying data, Displaying connections, Displaying websites,
Articles & resources, Tools and services. All these subjects are all
close related to graphic design and information representation.

From a computer science perspective, Frits H. Post (2002)
categorized the field into a number of sub-fields: Visualization
algorithms and techniques, Volume visualization, Information
visualization, Multiresolution methods, Modelling techniques and
Interaction techniques and architectures
35
Related Fields

Data acquisition

Data analysis


Exploratory data analysis (EDA)

Qualitative data analysis (QDA)
Data governance

Increase consistency & confidence in decision making

Decrease the risk of regulatory fines

Improve data security

Maximize the income generation potential of data

Designate accountability for information quality

Data management

Data mining
36
Model Based Classification
Pacific Northwest National Laboratory (PNNL)
(Frank Greitzer)
37
Some Examples
Mindmaps
Graphs
Heat Maps
38
http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/
Thematic Cartography

A thematic map is a type of map or chart especially designed to
show a particular theme connected with a specific geographic
area. These maps "can portray physical, social, political, cultural,
economic, sociological, agricultural, or any other aspects of a city,
state, region,nation , or continent". UW



Using traditional maps and modern data to see
trends/correlations
IBM have large (and good) site
for this (not just TC):
http://manyeyes.alphaworks.ibm.com/manyeyes/
http://en.wikipedia.org/wiki/Thematic_map
39
Overview of Map Visualisations

A thematic map is a map that focuses in a specific idea or theme. A
thematic map illustrates a particular subject and contrasted the
general map, in which the variety of geological and geographical
phenomena regularly appear together. The contrast between the
both of them lies in the fact thematic maps use the base data as
coastlines, boundaries and places, only as point of reference for the
phenomenon being mapped. In general maps the base data as
landforms, lines of transportation, settlements, and political
boundaries are there for their own sake (Thrower, 2007).

Thematic map are sometimes referred to as graphic essays that
portray spatial variations and interrelationships of geographical
distributions. Location, of course, is also important to provide a
reference base of where selected phenomena are occurring.
40
History
An important cartographic element preceding thematic mapping was the development of
accurate base maps. Improvements in accuracy proceeded at a gradual pace, and even
until the mid-17th century, general maps were usually of poor quality. Still, base maps
around this time were good enough to display appropriate information, allowing for the
first thematic maps to come into being.
An other example of early thematic
mapping comes from London physician
John Snow. Though disease had been
mapped thematically, Snow’s cholera map
in 1854 is the best known example of
using thematic maps for analysis.
Essentially,
his
technique
and
methodology anticipate principles of a
geographic information system (GIS).
Starting with an accurate base map of a
London neighbourhood which included
streets and pump locations, Snow
mapped out the incidents of cholera
death. The emerging pattern centred
around one particular pump on Broad
Street. At Snow’s request, the handle of
the pump was removed, and new cholera
cases ceased almost at once. Further
investigation of the area revealed the
Broad Street pump was near a sewer line.
41
Uses of Thematic Maps

Thematic maps serve three primary purposes.

First, they provide specific information about particular locations.

Second, they provide general information about spatial patterns.

Third, they can be used to compare patterns on two or more maps.


Common examples are maps of demographic data such as population density.
When designing a thematic map, cartographers must balance a number of factors
in order to effectively represent the data. Besides spatial accuracy, and aesthetics,
quirks of human visual perception and the presentation format must be taken into
account.
In addition, the audience is of equal importance. Who will “read” the thematic
map and for what purpose helps define how it should be designed. A political
scientist might prefer having information mapped within clearly delineated
county boundaries (choropleth maps). A state biologist could certainly benefit
from county boundaries being on a map, but nature seldom falls into such
smooth, man-made delineations. In which case, a dasymetric map charts the
desired information underneath a transparent county boundary map for easy
location referencing
42
Displaying data

In constructing any type of thematic map (or any map for that matter) it is
understood that location is a key feature. After selecting the physical area to
examine, the next step is collecting data sets.




Data dealing with one subject is called univariate, which examines occurrences of a
single type of event. The distribution of population, cancer rates, and rainfall are all
examples of univariate data.
Bivariate mapping shows the distribution of two sets of data to explore possibilities
of correlations. For example, we can examine population density in relation to
textile manufacturing. Other examples could be cancer rates and population
density, or rainfall and elevation.
More than two sets of data leads to multivariate mapping. Taking three or more
data sets and displaying the result on a map helps determine possible correlations
between different phenomena. For instance, our bivariate example maps two data
sets, rainfall and elevation. If we add another variable such as population density,
our map becomes multivariate rather than bivariate.
Map makers must be careful in designing thematic maps that display too
much information or suggest phenomenon have a correlation when in fact
they do not.
43
Types of Thematic Map

Choropleth

Proportional symbol

Isarithmic

Dot

Dasymetric
44
Choropleth


Choropleth are the most commonly used method of
thematic mapping. Choropleth maps are particularly
suited for charting phenomena that are evenly
distributed within each enumeration unit (set area).
Raw data, e.g. population distribution, should not be
mapped with this technique. If derived values can be
obtained from raw data (such as population densities),
then the choropleth technique can be applied.
45
Proportional symbol

Also known as graduated symbols, these maps
represent data associated with point locations (i.e.,
cities or counties). The data is displayed with
proportionally sized symbols to graphically represent a
realistic difference in occurrence. If the raw data
cannot be dealt with as a ratio or proportion, then
they should be portrayed with the proportional
symbol technique.
46
Isarithmic

These maps, also known as contour maps, depict
smooth continuous phenomena such as precipitation.
They are also well-suited to displaying threedimensional values such as elevation i.e; on
topographic maps.
47
Dot

A map using dots to show the presence of a feature or
occurrence and display a spatial pattern. Dr. Snow
used this method in his famous map. One dot
represented one death. Note, though, that a dot is not
required to represent a single unit and may indicate
any number of entities; 14 armadillos, 7 dwarves, 100
voters.
48
Dasymetric

Dasymetric maps utilize areal symbols. However,
although boundaries are displayed on dasymetric
maps, these geographic units may span multiple
theme values. Plots often represent extremes in the
data sets, without much coverage in between. For that
reason, and because they can be difficult to generate,
dasymetric maps are not very common.
49
Example 1
• We wish to see the distribution of counties that have
won All-Ireland GAA Hurling Finals.
• Steps:
• Acquire Data: http://en.wikipedia.org/wiki/AllIreland_Hurling_Final
• Normally, Wikipedia would not be a safe source without a second,
authoritative source, but it is fine for this small example
• Filter & Refine Data: Take table into Excel, remove
extraneous columns
• Aggregate & Tabulate Data: Calculate totals for each county
• Create simple chart, then thematic cartogram
50
Data
Final Data (As London is not on our map, it will be removed on map):
Winner Total Wins
Laois
1
London
1
Kerry
1
Waterford
2
Clare
3
Offaly
4
Galway
4
Wexford
6
Dublin
6
Limerick
7
Tipperary
26
Cork
31
Kilkenny
32
Total GAA Hurling All-Ireland Final Wins
35
30
25
20
15
Total GAA Hurling All-Ireland Final
Wins
10
5
0
51
What type of Map?
Of all the maps available, Choropleth only one that
makes sense, as it will show counties. Dot etc. will not
tell us anything extra.
This data is univariate, it is a single value (number of
finals won) over a single time span, broken down into
counties. As the counties and time span do not change,
the data is univariate.
52
IBM ManyEyes Visualisation:
53
Processing SVG Visualisation
We can quickly create our own choropleth map using
Processing and SVG. Scalable Vector Graphics files
make this so much easier than using plain bitmapped
image files.
The code for this is about 65 lines, including all keys etc.
Remember, there are multiple ways to create a thematic
map, you don’t have to code it yourself (though that is
often quickest and easiest way to get image)
54
Processing SVG Choropleth Result
55
Example 2
• Show who won and was runner-up in All-Ireland GAA
Senior Final Foorball Championships
• Acquire Data: http://en.wikipedia.org/wiki/AllIreland_Football_Final
• Filter: Remove attendance and score columns
• No Aggregation to be done, data looks like this:
Year
1887
1889
1890
1891
1892
1893
1894
1895
Winner
Limerick
Tipperary
Cork
Dublin
Dublin
Wexford
Dublin
Tipperary
Runner-up
Louth
Laois
Wexford
Cork
Kerry
Cork
Cork
Meath
56
Thematic Cartogram
Use Choropleth, but more complex visualisation needed
(need to be able to change year)
This is bivariate data, there is a year and winner/runnerup to take into account
We need to give user control over year, slider obvious
choice, here I use a separate Swing panel to hold a
JSlider and allow easy navigation
57
Processing Cartogram
58
Class Example: Ghost Estates
This is a quick run through of the class example: creating
a univariate choropleth cartogram of the ghost
dwellings in Ireland.
A Ghost Dwelling (for the purposes of this example) is a
finished dwelling with no one living in it. It is ready to
be lived in, so this does not include dwellings unstarted
(but with planning permission) or simply unfinished.
59
Data
• Acquire: Housing Agency http://www.housing.ie/
supplies the data (up to 2010)
• Filter: Excel file (huge), remove unneeded columns
(most of them) leaving estates list by county with
completed but vacant column
• Aggregate: group estates by county, get total for each
county
• Do all this in Excel, there are other tools (like Google
Refine) but this example is easier to do in Excel
• 26 values now, Dublin and Cork way ahead (expected)
• min is Waterford with 197, Dublin 6816
60
Processing Result
61
E-Learning Design
62
Instructional Design
Instructional Design (also called Instructional Systems Design (ISD)) is the
practice of maximizing the effectiveness, efficiency and appeal of
instruction and other learning experiences. The process consists broadly
of determining the current state and needs of the learner, defining the
end goal of instruction, and creating some "intervention" to assist in the
transition. Ideally the process is informed by pedagogically and
andragogically (adult learning) tested theories of learning and may take
place in student-only, teacher-led or community-based settings. The
outcome of this instruction may be directly observable and scientifically
measured or completely hidden and assumed. There are many
instructional design models but many are based on the ADDIE model with
the phases analysis, design, development, implementation, and
evaluation. As a field, instructional design is historically and traditionally
rooted in cognitive and behavioral psychology.
http://en.wikipedia.org/wiki/Instructional_design
63
History of Instructional Design



US Military (WW2)

B.F. Skinner

Training Within Industry (TWI)
Benjamin Bloom domains of learning taxonomy:

Cognitive (what one knows or thinks)

Psychomotor (what one does, physically)

Affective (what one feels, or what attitudes one has)
David Merrill


Component Display Theory (CDT), which concentrates on the
means of presenting instructional materials (presentation
techniques).
Cognitive Load Theory
64
Cognitive Load Theory

Sweller
working memory load
 the split attention effect


redundancy effect
the worked-example effect
 Cognitive Theory of Multimedia Learning

65
Instructional design models

ADDIE model

Analyze


Design


create instructional or training materials
Implement


develop learning objectives, choose an instructional approach
Develop


analyze learner characteristics, task to be learned, etc.
deliver or distribute the instructional materials
Evaluate

make sure the materials achieved the desired goals
66
Constructivism

Constructivism is a theory of knowledge
(epistemology) which argues that humans generate
knowledge and meaning from their experiences.
Piaget's theory of constructivist learning has had wide
ranging impact on learning theories and teaching
methods in education and is an underlying theme of
many education reform movements. Research support
for constructivist teaching techniques has been mixed,
with some research supporting these techniques and
other research contradicting those results.
http://en.wikipedia.org/wiki/Constructivism_(learning_theory)
67
Constructivism (Learner)

The nature of the learner



The learner is a unique individual (unique needs and
backgrounds, complex and multidimensional).
The importance of the background and culture of the
learner?
The responsibility for learning (resides with the learner)


actively involved in the learning process (unlike previous
educational viewpoints where the responsibility rested with
the instructor to teach and where the learner played a
passive, receptive role)
The motivation for learning?
68
Constructivism (Instructor)

The role of the instructor
 Instructors as facilitators (not teachers)
 teacher gives a didactic lecture which
covers the subject matter (learner
passive)
 a facilitator helps the learner to get to
his or her own understanding of the
content (learner active)
69
Constructivist Learning Process

The nature of the learning process



Learning is an active, social process (learners should learn to discover
principles, concepts and facts for themselves, hence the importance
of encouraging guesswork and intuitive thinking in learners)
Dynamic interaction between task, instructor and learner (instructor and
the learners are equally involved in learning from each other)

reciprocal teaching

peer collaboration

cognitive apprenticeship

problem-based instruction
Collaboration among learners (need for collaboration among learners, in
direct contradiction to traditional competitive approaches)
70
Intelligent Tutoring Systems

Designed to implement Constructivist Learning approach using software

Communications Module

Student Module

Tutor Module

Domain Module
71
ITS Diagram
Next topic to
present (may be
more or less
advanced)
Domain Module
New topic content
(multimedia based)
Tutor Module
ITS
Communications
Module
State of student's
understanding of
current topic
Student Module
Student
Interactions
& Choices
72
Communications Module

This is the component the user interact with

Modern term would be GUI

May be lesson or exploratory learning based

May be pedagogical or assessment oriented

Can be game or other multimedia content

Was once the most difficult module to create (hardware &
software limitations)

Getting easier to build with modern tools
73
Student Module

Statistical model of student's complete
understanding


Based on student choices in ITS
(communications module)
Could be probabilistic model

Ideally, this would allow tutor to assess understanding


e.g. if student knows capital of UK, Ireland and France, what is
the probability they know capital of Germany?
Hard to build accurate model
74
Tutor Module

Contains the data about lessons/assessments



Decides (based on probabilistic model from student
module) what to present student with next
AI rules decide what is most appropriate material to
present next
Can be curriculum or difficulty metric based

e.g. 'The next topic is “Mountains” once “Rivers” is complete' or
'Student failed “Mountains of Europe” topic (difficulty too high)
so present easier “Mountains of Ireland” (lower difficulty)”.
75
Domain Module

Contains all the subject data that the ITS can present


Can be on any domain, English verbs, Spanish History, XML etc.
Most difficult to build


Most build by hand – tedious, prone to error
Some can be build automatically – by generating data from
corpora such as the Internet, WordNet, Wikipedia etc.
76
Dynamic Difficulty Adjustment

If ITS is e-assessment, or Tutoring module is
intelligent, then it will need to make adjustments to
the difficulty of the lessons/questions presented

Requires a metric (measurement) of difficulty of material

Start user/student on a easy/medium level



Based on performance (student module data) the tutor
module can then adjust difficulty accordingly
Climbing effect, where the level rises/falls till it is too
hard/easy and then falls/rises
Over time or sufficient user choices, an accurate gauge of
the most comfortable level for the user can be found
77
DDA Algorithm

Algorithm:

take c consecutive user choices




Assign 0 – 1 value (cn) on each based on how 'good' a move it
was, such as 'best' possible move (scoring maximum points) = 1, a
'reasonable' move (scoring some points) = 0.5 or a 'bad' move,
scoring no points = 0.0
Average the quality of the moves over every c moves
If average is less than 0.3, lower the difficulty level, if greater than
0.3 but less than 0.7, leave difficulty level unchanged, if greater
than 0.7, increase difficulty level
If c = 10, c0 to c9 = 1, 1, 0, .5, .5, 0, 1, 0, 0

Average C0-9= 4/10 = .4 => do not adjust level
78
DDA Diagram
Hard
Adjustment Algorithm rises level until majority of answers are incorrect
Level of Difficulty
Student's actual ability level
Adjustment Algorithm lowers level until majority of answers are correct
Starting Level (may be same for all)
Easy
Time/Moves/Choices: 0
-
n
79
Game Design
80
List of Casual Games Mentioned
• Casual (Demos of all these are available, you only have
to play/watch enough to understand the game
mechanic, level design issues)
•Unusual (Physics) Game Mechanics:
•Red Remover
•99 Bricks
•Braid
•Crayon Physics
•Max and the Magic Marker
•And Yet It Moves
•Unusual Narrative Games:
•Machinarium
•Limbo
•Bastion
•Braid
81
List of Core Games Mentioned
•You do not have to play any of these games, some have
demos, all have YouTube videos describing gameplay
•Games with strong (deep) narrative, normal ludology:
•Mass Effect
•Assassins Creed
•Heavy Rain (PS3 only)
•Games with strong ludology, normal (linear) narrative:
•Portal (Series)
•Stalker (Series)
•Half-Life (Series)
•Games with (open-world, sandbox) emergent narrative,
ludology:
•Grand Theft Auto (Series)
•Red Dead Redemption
•Elder Scroll Series (Oblivion, Skyrim)
•Assassins Creed (Some aspects)
82
Game studies

Prior to the late-20th century, the academic study of games was rare and limited to fields such as
history and anthropology. As the videogame revolution took off in the early 1980s, so did
academic interest in games. To date, the field of games studies can be characterized not only as
multi-disciplinary but also as inter-disciplinary. The approaches taken thus far can be broadly
characterized in three ways:


Social science approach (Studying the effects of games on people)

What do games do to people? e.g. Learning, effects of violence in games

How do people create and negotiate a game?
Humanities approach

Studying the meaning and context of games

What meanings are made through game use?

Studying games as artefacts in and of themselves
e.g. Critical analysis, rhetoric
Industry and engineering approach



Understanding the design and development of games. e.g.: How to make better games

Games as drivers of technological innovations. e.g.: Graphics, AI, networking, etc.
http://en.wikipedia.org/wiki/Game_studies
83
Game Genres

Crawford's Taxonomy of Computer Games (old now)


Casual Games


Sub-genres: action, platformer, role-playing-game etc.
Serious Games


Sub-genres: card, board, puzzle etc.
Core Games


http://www.vancouver.wsu.edu/fac/peabody/game-book/Chapter3.html
Sub-Genres: Brain-training, linguistics, simulation etc.
Also, casual gamers, core gamers & serious gamers

Profile, similarities and differences?
http://en.wikipedia.org/wiki/Video_game_genres
84
Casual Games





A casual game is a video game or online game targeted at or used by a
mass audience of casual gamers. Casual games can have any type of
game play, and fit in any genre.
They are typically distinguished by their simple rules and lack of
commitment required in contrast to more complex hardcore games.
They require no long-term time commitment or special skills to play, and
there are comparatively low production and distribution costs for the
producer.
Casual games typically are played on a personal computer online in web
browsers, although they now are starting to become popular on game
consoles, too.
Casual gaming demographics also vary greatly from those of traditional
computer games, as the typical casual gamer is older and more
predominantly female, with over 74% of those purchasing casual games
being women.
http://en.wikipedia.org/wiki/Casual_game
85
Casual Game Features

Most casual games have similar basic features:





Extremely simple game play, like a puzzle game that can be played
entirely using a one-button mouse or cellphone keypad
Allowing game play in short bursts, during work breaks or, in the case
of portable and cell phone games, on public transportation
The ability to quickly reach a final stage, or continuous play with no
need to save the game
Some variant on a "try before you buy" business model or an
advertising-based model
The word "casual" indicates that the games are produced for the
casual consumer, who comes across the game and can get into game
play almost immediately. Every month, an estimated 200 million
consumers play casual games online, many of whom do not normally
regard themselves as gamers, or fans of video games.
86
Further Reading

Many, many online resources on rise of casual game phenomenon, here a few:

http://news.cnet.com/Casual-games-get-serious/2100-1043_3-6071465.html

http://www.wired.com/wired/archive/12.06/gaming.html

http://www.cnn.com/2006/TECH/fun.games/02/28/casual.games/
87
Ludology & Narrative in Games

Ludology – the study of games as interactive play

LUDOLOGY MEETS NARRATOLOGY: Similitude and differences
between (video) games and narrative Gonzalo Frasca.


Narrative – the study of games as novels or literature

Janet Murray - “Hamlet on the Holodeck: The Future of
Narrative in Cyberspace”


http://www.ludology.org/articles/ludology.htm
http://www.lcc.gatech.edu/~murray/digra05/lastword.pdf
Much disagreement between Lud/Nar camps

A Clash between Game and Narrative (Jesper Juul)

http://www.jesperjuul.net/text/clash_between_game_and_narrative.html
88
Ludology / Narrative Discussion
• Gonzalo Frasca
– Ludologists love stories, too: notes from a debate that never took
place http://www.ludology.org/articles/Frasca_LevelUp2003.pdf
– Simulation versus Narrative: Introduction to Ludology
• http://www.ludology.org/articles/VGT_final.pdf
– Rethinking Agency and Immersion: videogames as a means of
consciousness-raising
• http://www.siggraph.org/artdesign/gallery/S01/essays/0378.pdf
• Jan Simons - Narrative, Games, and Theory
– http://gamestudies.org/0701/articles/simons
89
Flow




Flow is the mental state of operation in which the person is fully
immersed in what he or she is doing by a feeling of energized focus, full
involvement, and success in the process of the activity. Proposed by
Mihály Csíkszentmihályi, the positive psychology concept has been
widely referenced across a variety of fields.
According to Csíkszentmihályi, flow is completely focused motivation. It
is a single-minded immersion and represents perhaps the ultimate in
harnessing the emotions in the service of performing and learning. In
flow the emotions are not just contained and channeled, but positive,
energized, and aligned with the task at hand. To be caught in the ennui
of depression or the agitation of anxiety is to be barred from flow. The
hallmark of flow is a feeling of spontaneous joy, even rapture, while
performing a task.
Colloquial terms for this or similar mental states include: to be on the
ball, in the zone, in the groove, or keeping your head in the game.
http://en.wikipedia.org/wiki/Flow_(psychology)
90
Flow Factors

Csíkszentmihályi identifies the following nine factors as accompanying an experience of
flow:
1) Clear goals (expectations and rules are discernible and goals are attainable and align
appropriately with one's skill set and abilities). Moreover, the challenge level and skill level
should both be high.
2) Concentrating, a high degree of concentration on a limited field of attention (a person
engaged in the activity will have the opportunity to focus and to delve deeply into it).
3) A loss of the feeling of self-consciousness, the merging of action and awareness.
4) Distorted sense of time, one's subjective experience of time is altered.
5) Direct and immediate feedback (successes and failures in the course of the activity are
apparent, so that behaviour can be adjusted as needed).
6) Balance between ability level and challenge (the activity is neither too easy nor too difficult).
7) A sense of personal control over the situation or activity.
8) The activity is intrinsically rewarding, so there is an effortlessness of action.
9) People become absorbed in their activity, and focus of awareness is narrowed down to the
activity itself, action awareness merging.

Not all are needed for flow to be experienced.
91
Flow in Games


Jenova Chen

http://www.jenovachen.com/flowingames/introduction.htm

Cloud Game: http://www.jenovachen.com/flowingames/cloud.htm

fl0w: http://www.jenovachen.com/flowingames/flowing.htm
When analysing or designing a game,

How does each feature contribute to creating a Flow state?

Does the (unusual?) game mechanic contribute?

What detracts from a state of Flow?
92
Game Mechanics

Many different mechanics, some common, others rare, here is
an (old) list of 50 from Ernest Adams:


http://www.edge-online.com/features/50-greatest-game-design-innovations
We looked at physics, time & sandboxes:

13. Reversible time.


15. Sandbox modes


Saving and reloading is one thing, but sometimes what you really want is what as kids we used to call a "do-over"-a chance to
correct an error without the hassle of a reload or going back a long way in the game world. Best-known example: Prince of
Persia: The Sands of Time, 2003. When you made a mistake, you could reverse time for ten seconds. To prevent you from using
it continually, each usage costs you a certain amount of sand, which has to be replenished by defeating enemies. The game
also let the player see into the future to help with upcoming puzzles, another clever innovation. Possible first use: Blinx: The
Time Sweeper, 2002, in which collecting up crystals in various combinations gives the player a variety of one-shot time control
commands.
The term refers to a mode of play in which you can fool around in a game’s world without being required to meet a particular
objective. By far the best-known sandbox modes are in the later Grand Theft Auto games, contributing greatly to their
popularity. Sandbox mode is normally used to describe special modes within otherwise goal-oriented games, not open-ended
games like SimCity. Sandbox modes also sometimes afford emergent behavior, events arising in a game’s world that were not
planned or predicted by the designer. First use: unknown.
16. Physics puzzles.

Many real-world games involve physics, but they’re usually tests of skill. The computer lets us create physics puzzles, in which
you try to figure out how to accomplish a task using the physical properties of simulated objects. They’re about brainpower,
not hand-eye coordination. Possible first use: The Incredible Machine, 1992.
93
Game Mechanics
• Physics:
– Core:
• Half-Life 2 (physics gun)
• Portal (portal gun)
– Casual:
• Crayon Physics: http://www.crayonphysics.com/
• 99 Bricks: http://www.kongregate.com/games/WeirdBeardGames/99-bricks
• Red Remover: http://www.thegamehomepage.com/play/red-remover/
• Time:
– http://www.thegamehomepage.com/red-remover-walkthrough.html
– Core:
• Prince of Persia (series)
• Singuarlity
– Casual:
• Braid (demo available on Steam)
– http://store.steampowered.com/app/26800/
• Sandboxes:
– Core:
• Grand Theft Auto (Series), many other similar games
• Elder Scrolls Series (Oblivion, Skyrim)
• Red Dead Redemption
– Casual:
• Minecraft (We didn’t have time to play this on course, popular with younger players)
94
Emergent Game Play
• Non-linear game play can (and often does) lead to emergent game play, game activities
that the designer may not have anticipated or expected
– http://en.wikipedia.org/wiki/Nonlinear_gameplay
– A game with nonlinear game play presents players with challenges that can be completed in a
number of different sequences. Whereas a more linear game will confront a player with a
fixed sequence of challenges, a less linear game will allow greater player freedom. For
example, a nonlinear game may permit multiple sequences to finish the game, a choice
between paths to victory, or optional side-quests and subplots. Some games feature both
linear and nonlinear elements, and some games offer a sandbox mode that allows players to
explore an open world game environment independently from the game's main objectives.
– The genre may have begun in the 8-bit-era with games like Elite, Mercenary and Cholo. More
recent examples would be the The Elder Scrolls (series), Grand Theft Auto (series), Far Cry 2,
S.T.A.L.K.E.R.: Shadow of Chernobyl, Assassin's Creed (Series), Fallout (series)
– A game that is significantly nonlinear is sometimes described as being open-ended or a
sandbox, and is characterized by there being no "right way" of playing the game.
• A common consequence (intentional or unintentional) of open-ended game play is
emergent game play.
95
Branching Storylines
•
Games that employ linear stories are those where the player cannot change the story line or ending of
the story. Most games use a linear structure, thus making them more similar to other fiction. Many
games have offered premature endings should the player fail to meet an objective, but these are usually
just interruptions in a player's progress rather than actual endings. More recently, many games have
begun offering multiple endings to increase the dramatic impact of moral choices within the game,
although early examples also exist. However, even in games with a linear story, players interact with the
game world by performing a variety of actions along the way.
–
•
Despite experimenting with several nonlinear storytelling mechanisms in the 1990s, the game industry
has largely returned to the practice of linear storytelling. Linear stories cost less time and money to
develop, since there is only one fixed sequence of events and no major decisions to keep track of. For
example, several games from the Wing Commander series offered a branching storyline, but eventually
they were abandoned as too expensive.
–
•
Still, some games have gone beyond small choices or special endings, offering a branching storyline that players may
control at critical points in the game. Sometimes the player is given a choice of which branch of the plot to follow, while
sometimes the path will be based on the player's success or failure at a specific challenge. For example, Black Isle
Studios' Fallout series of role-playing video games features numerous quests where player actions dictate the outcome
of the story behind the objectives. Players can eliminate in-game characters permanently from the virtual world should
they choose to do so, and by doing so may actually alter the amount of quests available or the type of quests that
become available to them as the game progresses. The effects of such decisions may not be immediate. Branches of the
story may merge or split at different points in the game, but seldom allow backtracking. Some games even allow for
different starting points, and one way this is done is through a character selection screen (e.g. Dragon Age: Origin).
Nonlinear stories increase the chances for bugs or absurdities if they are not tested properly, although they do provide
greater player freedom. Some players have also responded negatively to branching stories because it is hard and tedious
for them to experience the "full value" of all the game's content. As a compromise between linear and branching stories,
there are also games where stories split into branches and then fold back into a single storyline. In these stories, the plot
will branch, but then converge upon some inevitable event. This is typically used in many graphic adventure games.
A truly nonlinear story would be written entirely by the actions of the player, and thus remains a
difficult design challenge.
96
Nonlinear Level Design
• A game level or world can be linear or nonlinear. In a game with linear levels, there is
only one route that the player must take through the level. In games with nonlinear
levels, players might have to revisit locations or choose from multiple paths to finish the
level.
• As with other game elements, linear level design is not absolute. While a nonlinear level
can give the freedom to explore or backtrack, there can be a fixed sequence of
challenges that a player must solve to complete the level. Even if a player must confront
the challenges in a fixed sequence, they may be given the freedom to seek and identify
these challenges without having them presented one after the other.
• A more linear game requires a player to finish levels in a fixed sequence to win. The
ability to skip, repeat, or choose between levels makes this type of game less linear.
Super Mario Bros. is an early example of this, where the player had access to warp
zones that skipped many levels of the game. Left 4 Dead 2 is a more advanced example
of non-linear level design, featuring an A.I. structure that is capable of generating new
level layouts on-the-fly according to each player's individual conditions. This makes it so
that players are constantly experiencing a dynamic map layout, and as such may never
follow the same exact path twice.
• When a level is sufficiently large and open-ended, it may be described as an open world,
or sandbox.
• Open world game designs have existed in some form since the 1980s, such as the abovementioned Elite, and often make use of procedural generation.
97
Sandbox mode Vs Sandbox Game
• In a game with a sandbox mode, a player may turn off or ignore game
objectives, or have unlimited access to items. This can open up
possibilities that were not intended by the game designer. A sandbox
mode is an option in otherwise goal-oriented games and should be
distinguished from open-ended games with no objectives such as
SimCity.
• A Sandbox Game, on the other hand, expects the player to interact with
the environment or game world in a largely undirected fashion, such as
GTA 4, where many players ignored the narrative and simply stole cars
and engaged in violent mayhem. The designers expected and catered for
this based on feedback from GTA 3.
• See also: http://en.wikipedia.org/wiki/Open_world
– http://www.cesspit.net/drupal/node/1099
– http://www.shamusyoung.com/twentysidedtale/?p=117
– And finally, why Assassins Creed 1 failed
• http://www.wired.com/gamelife/2007/11/review-why-assa/
• (Assassins Creed 2 improved on almost all these points)
98
Processing Primer
99
Before Processing
/* Copyright (c) Mark J. Kilgard, 1997. */
/* This program is freely distributable without licensing fees
and is provided without guarantee or warrantee expressed or
implied. This program is - not - in the public domain. */
/* This program was requested by Patrick Earl; hopefully someone
will write the equivalent Direct3D immediate mode program. */
#include <GL/glut.h>
GLfloat light_diffuse[] = {1.0, 0.0, 0.0, 1.0}; /* Red diffuse
GLfloat light_position[] = {1.0, 1.0, 1.0, 0.0}; /* Infinite li
GLfloat n[6][3] = { /* Normals for the 6 faces of a cube. */
{ -1.0, 0.0, 0.0}, {0.0, 1.0, 0.0}, {1.0, 0.0, 0.0},
{0.0, - 1.0, 0.0}, {0.0, 0.0, 1.0}, {0.0, 0.0,
-1.0} };
GLint faces[6][4] = { /* Vertex indices for the 6 faces of a cu
{0, 1, 2, 3}, {3, 2, 6, 7}, {7, 6, 5, 4},
{4, 5, 1, 0}, {5, 6, 2, 1}, {7, 4, 0, 3} };
GLfloat v[8][3]; /* Will be filled in with X,Y,Z vertexes. */
void
drawBox(void)
{
int i;
for (i = 0; i < 6; i++) {
glBegin(GL_QUADS);
glNormal3fv(&n[i][0]);
glVertex3fv(&v[faces[i][0]][0]);
glVertex3fv(&v[faces[i][1]][0]);
glVertex3fv(&v[faces[i][2]][0]);
glVertex3fv(&v[faces[i][3]][0]);
glEnd();
}
}
void
display(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
drawBox();
glutSwapBuffers();
}
Then
else
light. */
ght location. */
be. */
OpenGL
void
init(void)
{
/* Setup cube vertex data. */
v[0][0] = v[1][0] = v[2][0] = v[3][0] =
-1;
v[4][0] = v[5][0] = v[6][0] = v[7][0] = 1;
v[0][1] = v[1][1] = v[4][1] = v[5][1] =
-1;
v[2][1] = v[3][1] = v[6][1] = v[7][1] = 1;
v[0][2] = v[3][2] = v[4][2] = v[7][2] = 1;
v[1][2] = v[2][2] = v[5][2] = v[6][2] =
-1;
/* Enable a single OpenGL light. */
glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);
glLightfv(GL_LIGHT0, GL_POSITION, light_position);
glEnable(GL_LIGHT0);
glEnable(GL_LIGHTING);
/* Use depth buffering for hidden surface elimination. */
glEnable(GL_DEPTH_TEST);
/* Setup the view of the cube. */
glMatrixMode(GL_PROJECTION);
gluPerspective( /* field of view in degree */ 40.0,
/* aspect ratio */ 1.0,
/* Z near */ 1.0, /* Z far */ 10.0);
glMatrixMode(GL_MODELVIEW);
gluLookAt(0.0, 0.0, 5.0, /* eye is at (0,0,5) */
0.0, 0.0, 0.0,
/* center is at (0,0,0) */
0.0, 1.0, 0.);
/* up is in positive Y direction */
/* Adjust cube position to be asthetic angle. */
glTranslatef(0.0, 0.0, -1.0);
glRotatef(60, 1.0, 0.0, 0.0);
glRotatef( -20, 0.0, 0.0, 1.0);
}
int
main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
glutCreateWindow("red 3D lighted cube");
glutDisplayFunc(display);
init();
glutMainLoop();
return 0;
/* ANSI C requires main to return int. *
}
/
100
Processing
import processing.opengl.*;
size(100, 100, OPENGL);
lights();
background(0, 0, 0);
noStroke();
fill(255, 0, 0);
translate(width/2, height/2);
rotateX(60);
rotateY(20);
box(40);
Now
Actual (Full)
Processing Code
101
IDE
Processing
Can refer to
the (simplified)
Integrated
Development
Environment
102
API
Using Processing
also means
using the
graphics library
in your
favourite (Java)
IDE
103
Sketches
A Processing program is called a ‘Sketch’
0, 0 (origin)
-x
-y
+x
Canvas
+y
width, height
104
Transformations
translate(x, y)
scale(.4)
rotate(radians(45))
105
setup() & draw() (noLoop – no animation)
106
Animated version
107
More complex (3D) example
108
End of Notes

Good luck in your exams

Remember:

Refer to question in answers – are you answering what was actually asked?

More marks for framing answer as solution to problem

Avoid mindless regurgitation of notes



Don’t focus on implementation languages or operating systems, they is not
relevant to the question or answer
Draw large, well labelled diagrams in pencil (if applicable)
Write short, to the point answers. Think of what you will write before you
put pen to paper. Aim for grammatically correct and cogent answers. Short
sentences with facts and important points better than long waffling essays

Sleep the night before each exam

Remember, they're only exams, don't be too stressed
Stephen Howell
109