Week 13: Building IP3

For this prototype, I decided to keep iterating the concept and test different features.

I started by going over what I wanted to achieve from this prototype and features I had not yet developed including:

• change in timer from counting up (record how long it takes a user to complete a level) to counting down (users only have a set time to complete the level).
• change background colour to simulate sunset and passing of time
• add high-scores to stage
• add additional cue to which dot users are meant to press

I also thought about which controllers I would use and how the interaction would take place.  The floor-dots were great but unreliable and I didn't want to re-create them for this prototype.  I also didn't want to go back to using keyboard arrow controllers.  So, I looked for a simple way of having physical controllers for the game and went with playdough balls that corresponded to the colours of the dots on screen.  

When looking for colours for the background changes, I initially looked to blend yellow to navy.  They meant the 'middle' colours were really murky so I changed the colour steps to imitate sunset colours but also tried to avoid colours that were too close to the dot colours.  To help further with contrast, I also added a white outline to some dots to ensure they could still be easily seen on the screen. 

initial colour palette

final colour palette 

I was able to change the colours using a switch statement tied to the timer. The challenge I had wth adding the colours was resetting back to the start colour at the end of game.  To help me problem solve this, I had to draw out how the 'end game' functions interacted with each other as I had initially written this a few weeks ago so writting comments in code was definitely helpful.

 

Week 12: Interactive Prototype 3 - Final Prototype

What is the key function or interaction for your concept?

The user moves the character (Meow Meow Cat) forward through a series of coloured dots.  Users have a set amount of time to complete the game and are given visual cues through a timer and a changing background (from Daytime to nighttime).

I wanted to included a physical element to this prototype but without rebuilding the floor-dot-buttons from the previous prototype (or using the keyboard as an input).  Instead, I have continued to use the Makey Makey device but have substituted the dots you press with your feet for playdough you tap with your hands.

How does it work?

The user taps corresponding coloured balls of playdough to those displayed on screen.   A Makey Makey is used to connect the playdough controls with the computer.  A countdown timer is used to show users how long they have to complete a basic level (25 dots).  The background screen colour also changes colour with the timer to indicate the passage of time (sunshine to nighttime).  User's high scores are also displayed in the top left corner

What do you want to know about your prototype?

• Does the background colour changing simulate the change in time, specifically from daytime to nighttime (in lieu of an actual sun being on the stage)
• Do users like being able to see their high score on the screen (they had previously remembered them)

How do you want IP3 to work?

1. A testing computer is set-up connected to playdough through a Makey Makey device.
1. Four coloured balls of playdough have corresponding dots on them to the dots in the game. 
2. A wire is run from each ball of playdough to the Makey Makey.
3. A stick to tap the playdough is coated with reflective material and is connected to the grounding wire attached to the Makey Makey.
4. When the balls are tapped,  a signal is sent from the dots to the Makey Makey to the computer.  Each four colours corresponds to an arrow key.
2. User sits in front of the playdough and screen, ready to begin and is given verbal instruction:
1. There are four coloured balls in front of you
2. With the stick, tap the corresponding colour to the colour on the screen to move your character forward
3. Level ends when you reach the end of the row of dots
4. You only have 25 seconds to complete a level.  The background colour will change every 5 seconds to show the passage of time from day-time to night-time.
3. There is a start button that the tester will click to begin game
4. Game can end by either reaching the end of the row of dots or by pressing the 'end game' button.
5. Screen includes character on far left-hand side, a row of coloured dots (four colours with patterns), timer in top left corner, 'Begin game' and 'stop' buttons on top right-hand corner, 'High score' display in top right-hand corner below buttons.
6. User taps coloured playdough to move character forward
7. High-scores are records on the screen at the end of each game
8. Users can restart and replay as many times as they like 
9. User can stop play at any time

What is not included

• Appearance of sun or moon moving across the 'sky - only appearance of change through background colour
• More than one level (and level progression)
• Written instructions/walk through

Week 11: Testing IP2 videos

As the in-class testing session had some problems, here are two videos (apologies for the vertical filming orientation) of the first testing session with the two formations.

Interactive Prototype II: Testing

Outcomes

Users were asked to tap four coloured dots on the floor with their feet to play a basic version of the game and provide feedback.  The coloured dots on the screen corresponded to coloured dots on a floor.

Users played the game a minimum of four times (maximum of 7). Most user wanted to get the best time possible and kept playing until they felt they had achieved that.  Users would keep track of their best scores in their head.

I measured user feedback through observation, in-person questions and an online questionnaire. The data from these measures can be found here.

I wanted to know:

• What formation of dots is both challenging (users need to use both feet, can't press multiple dots at once) and fun (is not so hard that user gives up early on or does not want to play)
• How long it takes a user to complete a basic level (25 dots) and how that time improves over multiple goes.

Reflections

The physical format for the prototype was a good way to get more detailed feedback on how the game is played.  It allowed me to observe users' interaction and how physical it was as they became tired and 'puffed' trying to tap all the dots and beat their times.  It was interesting to see how competitive users were with themselves and how even though the timer was there for my benefit for tracking purposes, users manually took note of their times to improve upon.

Testing with more users who weren't from class was again useful.  It was different getting feedback from people who had no prior knowledge of the concept but equally valuable in class as I was able to get comparison feedback (e.g. this element worked better than last time).  A mix of new and previous users led to more insight.

Effectiveness

When it was fully functional, the prototype worked really well and I was able to answer the specific questions I had about the formation on the input. It was very clear both verbally and through the survey which formation was preferred (square).

The first session (not in class) was very successful but the in-class one had problems with one of the dots only working intermittently.  This was a significant obstacle in getting more users to participate in testing. I pulled apart the prototype after the session and am still not sure where the connectedness  failed.  It is a downside of quick prototyping like this that it wasn't robust enough to withstand transport and multiple testing sessions.

Constraints

The constraint of testing the physical input in the session meant that when it didn't work, I couldn't test.  There were no backup inputs as using a keyboard would not have answered the questions I was testing.  It was quite disappointing to have to stop testing because of this.

Implications

Changes to my concept

• concept is unchanged

Future prototypes

• Interactive Prototype 3  (IP3)
• add high-score to screen for users to see 
• change timer from count up to count down
• make background change colour with timer (sunshine to night timer)
• add additional visual cue to stage to make it clearer which dot is next
•  Future prototypes
• on-screen feedback for wrong control pressed (not just sound)
• add movement to cat
• change timer from count up to count down
• add sun rising and setting to stage
• make start/stop easier (enter or other control)
• add in the extra bits (power-ups, levels, etc) 

Future testing sessions

• possible use other input methods to test other elements of game to avoid having input breakdowns affect testing session (if inputs are not the element being tested)

Interactive Prototype II: Testing Data

Here is the raw data from the testing sessions that were run for the Interactive Prototype 2 of Meow Meow Cat.  The data forms two parts, the observations recorded during the session and the questionnaire users filled out.

Testing session: 6 & 7 October (week 10 workshop B & outside-class session)

Users:

• 4 total
• 2 male, 2 female
• 2 not from class

Observations

User #1 (not from class)

• played 4 games (2 square, 2 row)
• startled by 'wrong button' noice
• puffed, said "this is hard work"
• used one leg more and pivoted to make it easier
• "like a dancing game but not dancing"
• square: "looks better"
• times (seconds): 
• 33, 25(final) - row
• 25, 21 - square

User #2 (not from class)

• played 7 games (4 square, 3 row)
• changed feet a lot 
• seemed to enjoy it
• wanted to keep playing to get a better score
• stopped playing when he reached a point where he didn't think he could get a better score
• times (seconds): 
• 27, 18, 11(final) - row
• 19, 18, 15, 13 - square

User #3

• played 4 games (2 square, 2 row)
• initally sat down which made it hard to press foot pads
• used one leg more
• one go was really buggy (40 seconds), sometimes the buttons wouldn't fire
• "my calves burned"
• "best time yet" on final run (22 seconds)
• competed with himself
• times (seconds): 
• 37, 22 - row
• 40, 22(final) - square

User #4

• played 4 games (2 square, 2 row)
• found it enjoyable but wasn't super competitive
• times (seconds): 
• 22, 23 - row
• 23, 23 - square

Observation overview

• Purple dot foot pad was very buggy during class testing session but had worked fine 2 days earlier in aanother session.  I could get it to work for one uesr in class but 2 other users (not recorded above) were unable to finish a game because of this.  I don't know if it was the angle in which it was pressed or the force but it was unsuccessful.  I had my final user successfully play 4 games in the session after this happend.
• Game played 19 times
• Times:
• Lowest time: 11 seconds
• Longest time: 40 seconds
• Average time: 23 seconds
• Start/Stop/Reset button a little buggy - had to press in correct order to work
• All users who played multiple games improved on their previous time

Questionnaire results

Total responses: 4

All questions except the last open 'Any comments?' question was compulsory.

Q1. Which layout did you prefer playing, formation A (straight line) or formation B (square)? Rate your preference on the following 4-point scale. 
Scale '1: Formation A' (row) to '4: Formation B' (square)

2 user: 3/4 on scale (mostly Formation B)
2 users: 4/4 on scale (definitely Formation B)

Q2. Why did you prefer one layout over the other?

• The dots were closer together and made it easier to reach each one faster.
• formation B felt like I was more in the game. It was also a bit easier to hit the different colours when they were separated.
• The layout felt more natural in sense that it surrounded me.
• I'm not entirely sure.

Q3. Would you suggest a different dot layout to those presented in this session? If so, please describe. 

• No layout B is efficient enough
• maybe a diamond like in DDR.
• Perhaps use walls so that a player has to use multiple limbs to interact - my legs get tired.
• No, the second layout was fine.

Q4. How would you describe the instructions for this testing session? 
Scale '1: Clear - it was easy to understand what to do' to '5: Confusing - I did not understand what to do'

3 user: 1/5 on scale
1 users: 2/5 on scale

Q5. If you could change any element of this game, what would it be?

• Nothing
• the dots are hard to see when looking at the screen. But, as I became more familiar with the game it was easier to remember where each colour was.
• Maybe a count down timer to cue the player when to start.
• I'm not sure. I really like that the cat is on the dot this time. It is an improvement from the last prototype. You could maybe deduct from score (which could be based on how long it takes you) if people first tap the incorrect button (before correct themselves).

Q6. Any other comments?

• Nice cat.
• Great game! I really liked it!

Questionnaire overview

• Users definetley preferred the square formation over the row formation
• cat on the dot improved understanding of game play
• well liked
• clear instructions

Week 10: Makey Makey & Prototype construction

The Meow Meow Cat Makey Makey prototype is mostly complete and is finally functional (just a little more gluing to do!).

Process and problems

The initial concept was for foot controls but I couldn't work out how to make the controls conductive without either operating it barefoot or adding conductive material to each user's shoes (neither ideal).  I was thinking about how to change it to hand controls, make it boppy or something which was a bit disappointing.  I had a chat to Peter (tutor) and he suggested making each foot control out of two dots with a spring (sponge) in between them, one that would be grounded, one connected to the control.  This would remove the need for the user to be connected/grounded to the Makey Makey.  When the user steps on the dot, the two circles connect and complete the circuit.

To help with planning out the prototype, I did a quick sketch of how I wanted to connect the components/wires.

Construction

To make the dots, I printed the colours on adhesive paper and stuck them to thick card.  I cut out the coloured circle and a duplicate of the same size.  To make them conductive, I cut out a smaller circle of alfoil to stick on each circle.  I then cut out sections of sponges to glue around the edges of the circle to make them springy (being careful not to touch the sponge to the alfoil).

I was worried that if the sponge wasn't high enough that the two circles might accidentally touch so chose a dense and high sponge. This proved to be a problem as it made it too hard to make the circles touch on step.

Sponges too high

Next I constructed the bottom layer of circles and connected them to a strip of copper tape connected to a grounding wire.  I had thought about grounding them seperately but it made sense to join them into one.

Four bottom circles connected to grounding wire

As I constructed each step, I used the keyboard input checker at http://www.keyboardtester.com/tester.html to test that set-up was working.

Next I connected the tops by using connective tape to attach the open end to the alfoil and non-conductive tape to hold it down at the edge.

Top and bottom circles connected.

I then sandwiched the top and bottom dots and tested the prototype with the game.  I had a small problem where sometimes multiple controls would fire because the wire ends attached to the Makey Makey were touching each other.  This was fixed with a small amount of electrical tape to seal off the ends.

Now that I know the prototype works, I will finish gluing it together ahead of next week's testing session.

Week 9: Concept/feature development

To help look at what I need to change and when (IP2/IP3 or other), I wrote up a list of features assigning Must/Should/Could/Won't.  This helped me work through features in order of priority, starting with Musts for IP2 and going from there.  It also showed where I had questions about features which led to what I wanted to test next (i.e. what question did I want my next prototype to answer)

Week 9: Interactive Prototype 2 - MakeyMakey

What is the key function or interaction for your concept?

The user moves the character (Meow Meow Cat) forward through a series of coloured dots.  Users are timed and are given auditory feedback for correct or incorrect moves.

How does it work?

The user taps corresponding coloured dots on the floor with their feet to those displayed on screen.   A Makey Makey is used to connect the dots on the floor with the computer.  A timer will be used to test how long it takes users to complete a basic level (25 dots).

What do you want to know about your prototype?

• What formation of dots is both challenging (users need to use both feet, can't press multiple dots at once) and fun (is not so hard that user gives up early on or does not want to play)
• How long it takes a user to complete a basic level (25 dots) and how that time improves over multiple goes.

How do you want IP2 to work?

1. A testing computer is set-up connected to large dots on the floor through a Makey Makey device.
1. Two cardboards circles (for each of the four dots) lined with alfoil are connected through a ring of sponges that make a spring.  When the circle is stepped on, the sponges compress connecting the two circles and the alfoil.
2. A wire is run from the bottom circle of each of the four dots to a strip of copper (connecting all the bottom circles) and then to the grounding wire attached to the Makey Makey.
3. Separate wires are run from the top circle of each dot to a control on the Makey Makey.  Each four colours corresponds to an arrow key.
2. Dots are set-up in a set formation (two different formations will be tested)
3. User stands in front of the dots ready to begin and is given verbal instruction:
1. There are coloured dots on the floor in front of you
2. Tap the corresponding colour dot on the floor to the screen to move your character forward
3. Level ends when you reach the end of the row of dots
4. There is a start button that the tester will click to begin game
5. Game can end by either reaching the end of the row of dots or by pressing the 'end game' button.
6. Screen includes character on far left-hand side, a row of coloured dots (four colours with patterns), timer in top left corner, 'Begin game' and 'stop' buttons on top right hand corner.
7. User taps coloured dots to move character forward
8. Time how long users take to reach end of row.
9. Users can restart and replay as many times as they like 
10. User can stop play at any time

What is not included

• Winning or losing (reaching end by a certain time)
• 'Chasing the sun' part of the concept (sunshine changing colour to night time with timer)
• More than one level (and level progression)
• Written instructions/walk through
• On screen record of high scores