Tipitap #6 Working on the interface
I identified Instagram as the main perpetrator of using manipulative tactics on social media from the research I had gathered. I’ll be creating an Instagram-inspired game to show them.
I did a few iterations to the logo design and the game name. I wanted it to illustrate the interaction of liking. Once I created the first one, I tried to show how deep our emotional connexion to social media was by putting the heart on the name to show that it’s almost becoming an extension of ourselves, but it looked like a religious symbol and it looked like darkness that didn’t represent the joy that comes with liking a post The design then evolved to display an arrow pointing down creating an optical illusion of an elevated heart demonstrating what posts make users want to do that is to click it.
Tipitap a name for the game inspired by the term tit for tat, meaning this for that which indicates what impact the interaction of tapping on the post has on the player but also on the social media platform, but the phrase was originally called tip for tap first used in 1558 (Game theory: a critical text, 2004). The game will use Instagram’s infinite scroll interface among other platforms, where the user must tap as many posts within a time limit but not all posts can be liked the same way or be liked (showing the misleading techniques being used). The game style would be arcade-like to show a time when games had one intention to be enjoyable and simple like that, while games are being monitored right now and are not as straightforward as they used to be.
Originally set up on XD, the mockup above was transferred to photoshop to create the animation. The game would start with a countdown to warm up the player showing how to play the game and once it’s over the game starts. The timer begins in the background and is visualised as well as shown at the end. As the player tapes with the heart on the posts they go from grey to red and score one point. One thing emphasised about social media was, for example, how they don’t have an emergency brake like on treadmills and I put the word end as the emergency brake is placed as close to the bottom as near to where the player’s finger might be.
I luckily found an open source template called http://taptaptap.click/ which I could use to start coding the game.
The reason I used this example was that I was told to use phaser while studying how to create a stages game, but I realised it wasn’t appropriate because my game wasn’t complicated. This prototype generated stages by toggling between divs which was much simpler but the code of the template was complicated and I struggled a lot to understand it, but over time, with the help of Matthew, I was able to change the game to how I wanted it to be and learned so much Javascript. I used to the logo for the loading screen but also redesigned it for when a person lost and could see the score, I added the score feature at the end after a person tested the game. I used the logo for the loading screen, but I also changed it to include the score at the end after a person playing the game when a person lost and could see the score. The warm-up stage was to illustrate what to do in the game, but it also found from a couple of user tests that many people ignored reading the instructions, so I made them appear faster. When the player starts playing, the horizontal bar in the original game has been changed to a vertical bar, making the player feel more under pressure. The tapping interactions were the same including the sounds when an unliked post or grey post was selected. However, from a user test the user suggested the idea that if the player tapped a grey post, the game would end, creating more frustration for the player. I also introduced the random aspect for posts and the number of posts changed each time refreshed to imitate the user’s actions when they don’t like all the pictures on Instagram and every time they go on the app it’s different.
This template’s code was complex and I struggled a lot to understand it, but over time, with Matthew’s guidance, I was able to change the game to how I wanted it to be and learned much more about Javascript than I ever had.
Reference:
Heap H S, Varoufakis Y.(2004) Game theory: a critical text. Routledge. p. 191. ISBN 978-0-415-25094-8.