Stacked Creations

web design & graphic design

Skip Navigation

Create & Experiment Physical Computing

Bounce

The Interactive Virtual Ball

Design Process:

1 Brain Storming:

Before any code was written or design developed, a concept had to first be realised. Numerous ideas were considered, from an exercise circuit that provided users with a gaming element of performing tasks to get to higher levels (Fig 1) to a disco bus stop that encouraged people to get up and dance (Fig 2).

circut

Figure 1 - Circuit Trainer

getonup

Figure 2 - Disco Bus

From all our variations and ideas, there was one space that seemed to present the most opportunity, public transport. Everyday people sitting, waiting and being inactive; how could we utilise physical computing to encourage people to get up an move.

2 Designing for the user and their environment:

How do you encourage people waiting for a train, bus or city cat to get up and move? First understanding how people use the environment. Through some lengthly observations of key locations (including King George square bus stop (image 1), the UQ lakes bus stop (image 2), Toowoong train station (image 3), Central train station and the Cultural Centre bus stop) some key factors were identified. The locations often presented large surfaces, ideal for projecting images or video onto, people would often line up without any guidance and safety had to be a key consideration in the design with buses and trains presenting a real threat.

king-george-square

image 1 - King George Square Bus Stop

uq-lakes

image 2 - UQ Lakes Bus Stop

toowong

image 3 - Toowoong Tain Station

3 More research & concept development:

In conjunction with the field observations some key related works were identified and helped to guide our concept development. These included:

  • Get in the Action: Engages users in an interactive display that invites them to follow an exercise instructor on screen. View work
  • Nautilus: Asks players to engage in a nautical themed game that requires players to physically engage with the games display. View work
  • CityWall: An interactive public display that showcases images from Flickr that have been tagged with "Helsinki". View work.

The proposal document below details the design choices made during this initial concept development stage.

One of the main outcomes from this report was the development of the Super Guitar Hero concept:

Super Guitar Hero:

This concept involved placing five large mats where users would usually line up for a bus, each mat would act as a pressure sensor that would be activated by one or more users jumping on it at an appropriate time. These mats would interface with a guitar hero type game, being that a set of cues would be displayed on a screen for the user to identify the appropriate time to jump on the mat.

The PDF document below helps to further illustrate the Super Guitar Hero concept.

Bounce:

Originally the bounce concept was to be projected onto the floor, where users would kick the ball around on the ground. Unique aspects of the environment were also to be included in the game, e.g. if the ball were to bounce off a chair it could split into two. Further proposed elements included making the ball aware of users playing the game, e.g. if a user was inactive the ball would go to that player, bounce and flash to get their attention and encourage them to participate.

Finalising the design direction:

From these two concepts Bounce was chosen for a number of reasons. It presented as an easier concept for people to understand, it was more flexible to the unique needs of the environment (i.e. a bus stop or train station) and easier to install. It also presented as the more interesting option to pursue for the design team involved.

4 Build - Stage 1:

From the outset Adobe Flash was chosen as the preferred development tool for this project. Whilst no team members had prior experience with Action Script 3 (AS3), the community support and learning resources available for AS3 ensured we would be able to find the answers needed to develop the final prototype.

Initial stages focused on developing a bear bones game that would demonstrate the users interaction. As seen below this low level prototype helped provide a clear direction for the project, and also identify areas that needed improvement.

stage1

The blue areas represent movement (with the large area in the centre being the user), the balls bounce off these areas. Milan Toths' Camera-motion controlled ball tutorial provided an important starting point for the projects development.

5Build - Stage 2, Design refinement:

Feedback from this early stage prototype proved to be very positive. Apart from obvious improvements that needed to be made to the users silhouette, a key issue that was raised was how the design addresses the unique needs of the environment it was designed for. To address this need we included information relevant to the space, being timetable information and bus route maps.

stage2

6 User Testing:

With a number of refinements made to the users silhouette and overall gameplay, and the inclusion of information relevant to the designs context (bus timetable and route maps), user testing needed to be conducted. After a week of user testing some key issues were identified, including:

  • Route and timetable information at first proved difficult for users to interpret. Steps needed to be made to better identify these components.
  • Whilst the silhouette had been improved, further refinements were still required.
  • Users found initial interaction to be very engaging, however this initial engagement wore off quickly as the users were not presented with any goals to achieve.
user-testing1 user-testing2

7Build - Stage 3, Final refinements:

As can be seen below a number of final refinements were made to prototype, these included:

  • The addition of a game challenge, users received points for keeping the ball from touching the bottom of the stage. This helped encourage longer game play by providing the user with a challenge.
  • Improved timetable information. By adding colour and other visual design elements the timetable information in the top right corner was improved, making it easier for people to identify its purpose and relevance to the game.
  • The addition of a complete route map, rather than a simplified map, helped users easily and quickly identify the information in the background.
stage3

References

  • Snibble Interactive. (2009). Get In The Action. Retrieved From: www.snibbeinteractive.com
  • Stromberg, H., Vaatanen, A., & Raty, V.-P. (2002). A group game played in interactive virtual space: design and evaluation. Paper presented at the Proceedings of the 4th conference on Designing Interactive Systems: Processes, Practices, Methods and Techniques. Retrieved From: ACM Database
  • Peltonen, P., Kurvinen, E., Salovaara, A., Jacucci, G., Ilmonen, T., Evans, J., et al. (2008). It's Mine, Don't Touch!: interactions at a large multi-touch display in a city centre. Paper presented at the Proceeding of the twenty-sixth annual SIGCH conference on Human factors in Computing systems. Accessed From: ACM Database
  • Camera-motion controlled ball - Toth, M. (2007)