Welcome to A 101 workshop on

Considering touch gestures and sensor based affordances

design serious games for hand-held device.

Sameer Sahashrabudhe 1 & Rwitajit Majumdar 2

1 Tata Institute of Social Sciences
2 Indian Institute of Technology, Bombay

What is Affordance?

  • "action possibilities" latent in the environmentJ.J. Gibson

  • Affordance is the quality of an object that allows an individual to perform an actionPaul Seys

  • Affordance is a term used to refer to an attribute of an object that allows people to know how to use it Sharp et al.
  • Identify Affordances of the objects below
    ~mini activity (peer instruction)~
    • pair up with your neighbour
    • Identify the type of affordances in the examples shown

    Change in the carriers of e-Content

    Activity 1a

    Examples from E-learning simulations

    Open the example in the next slide
    & list the Interactions and its description that you see.

      Example of what kind of Interactions needs to be written: Interaction: Sliders
      Description: it can be clicked and moved on a line.
    PhET eg.1
    Baloons & Static electricity

    Activity 1b

    Revisit the example
    & note the Purpose of interaction that you saw.

      Example of the Purpose of Interactions needs to be written: Interaction - Sliders

      Purpose: Change parameter value
      Description: drag the slider up or down to increase or decrease value repectively.
    ~mini activity (peer instruction)~
    • pair up with your neighbour
    • Identify the purpose of the interactions in the examples
    PhET eg.2
    PhET eg.3
    Beer's law lab

    How many of us are gaming natives?

    1. Which games did you play on desktops?
    2. Which of these do you play on hand-held devices?

    Activity 2

    Examples from mobile Gaming

    Please look at any game present on your hand-held device and note it in the online worksheet.
    left row - link 1
    right row - link 2

      Game: Candy Crush
      Interaction: Swipe
      Purpose: Move similar colored objects to form a set of 3 or more.
    swipe (Fruit Ninja)
    maneuver (Real Racing 3)
    pinch (Sherlock Holmes)
    record audio (Talking Tom)
    Video (Mosquito)
    video (Type N Walk)
    tally time - educational content vs games
    understanding Tablets
    Access 3G, Bluetooth, Wifi
    Input Touch screen, Camera, Microphones
    Other sensors Accelerometer, Gyroscope, Compass, Barometer

    Porting existing content to hand held devices

    No changes
    java based

    example: ask a question
    Modifying (desktop) content.
    Making Responsive UI & Replacing Mouse by touch
    PhET HTML5 Simulations
    Creating new (tablet specific) content
    Hello Ocean


    Topic: Internal Structure of eye

    Activity 3

    modify existing simulations considering hand-held device affordances

    • Choose any one of the simulations from the PhET HTML5 list
    • Go back to the worksheet form in the other tab
    • left row - link 1


      right row - link 2

    Activity 4

    create groups
    create the interaction plan
    for your own content

      Go to the next worksheet here

      Learning objective:
      The users should be able to have a look at the internal parts of the organs from all direction

      Possible Interactions:
      1. Swipe - rotates it along the axis perpendicular to swipe.
      2. Tilt - rotates the model.

    So, what was done in this workshop

    1. Worked in groups and meet new people who have come to attend this workshop!

    2. Identified interactions and purposes of
      • educational simulations
      • entertainment games

    3. Applied learnings to modify design for existing educational simulations to have richer experience by aligning affordances and purposes

    4. Designed a module for our content considering the learning objectives and appropiate affordances. (Homework!)
    Thank You