Saturday, February 15, 2014

'Flow' in game design

Be one with Flappy Bird: The science of 'flow' in game design | Mobile - CNET News"A core reason why recent hits like Flappy Bird and Threes found success -- and are massively addictive -- lies in the way they put us in a unique zen-like state known as flow."

(Flappy Bird game is removed from app store;
there is a similar web based game: Play flappy Doge)

Too bad that this and similar games are perfectly useless, except for "killing time".
But there may be some value in this approach, except for making advertising money.

Conditions for achieving such a state (Flow)
  • There must be a clear and simple task
  • that task must provide instant feedback
  • there must be no distractions that either disrupt your concentration or make you ultra-aware of your own actions; and, key to the act of game playing especially, 
  • it must be a challenge with appropriate balance with regards to your own skill and the task's difficulty.
...creating a near-unequivocal difficulty balance
no matter how good at games you were...

So the task needs to get harder if the user is more skilled,
but not too hard to be not possible to do it.

In fact that would be relatively easy to implement
by adjusting difficulty based on monitoring user's actions.

The same concept could be used for (gamification) in learning / education,
as well as in web sites and other apps.

Flow theory postulates three conditions that have to be met to achieve a flow state:
  • One must be involved in an activity with a clear set of goals and progress. This adds direction and structure to the task.
  • The task at hand must have clear and immediate feedback. This helps the person negotiate any changing demands and allows him or her to adjust his or her performance to maintain the flow state.
  • One must have a good balance between the perceived challenges of the task at hand and his or her own perceived skills. One must have confidence in one's ability to complete the task at hand.
"Challenging assignments that (slightly) stretch one's skills lead to flow"
4.09: Go With The Flow @ Wired
According to Mihaly Csikszentmihalyi, great Web sites are not about navigating content, but staging experience

What do you mean by flow?
Being completely involved in an activity for its own sake. The ego falls away. Time flies. Every action, movement, and thought follows inevitably from the previous one, like playing jazz. Your whole being is involved, and you're using your skills to the utmost...

A Web site that promotes flow is like a gourmet meal. You start off with the appetizers, move on to the salads and entrĂ©es, and build toward dessert. 

Unfortunately, most sites are built like a cafeteria. You pick whatever you want. That sounds good at first, but soon it doesn't matter what you choose to do. Everything is bland and the same. 

Web site designers assume that the visitor already knows what to choose. That's not true. People enter Web sites hoping to be led somewhere, hoping for a payoff.

SVG To RaphaelJS Converter - Ready.Set.Raphael

SVG To RaphaelJS Converter - Ready.Set.Raphael. Beta 2:

online tool to extract coordinates from SVG files

Chapter 6: Map, Take 1 - JSFiddle

Chapter 6: Map, Take 2 - JSFiddle

Chapter 6: Map, Take 3 - JSFiddle

The Little JavaScripter

The Little JavaScripter:

Douglas Crockford comparing power of JavaScript with LISP
on example of teaching recursions. 

Free Courses on Pluralsight

Free Courses on Pluralsight blog:

Why does Pluralsight exist? And what does it mean for you?

(by its President/CEO Aaron Skonnard)
"Pluralsight exists to democratize professional technology training for people around the world."

book: Getting Started with D3

D3.js - Data-Driven Documents

Getting Started with D3 - O'Reilly Media:
"learn how to create beautiful, interactive, browser-based data visualizations with the D3 JavaScript library. This hands-on book shows you how to use a combination of JavaScript and SVG to build everything from simple bar charts to complex infographics. You’ll learn how to use basic D3 tools by building visualizations based on..."

Creating Data-Driven Documents

Getting Started with D3: O'Reilly - Safari Books Online

Gallery · mbostock/d3 Wiki