DEV Community

Márton Ambrus
Márton Ambrus

Posted on

Memory game as an online experiment - Conflicts between my concept and UX

As a data analyst, I wanted to start a project where I could work with my own dataset. My goal is to build a database that is suitable for predictive modelling and deeper analysis. For this purpose, I created an online memory game that collects data about the games played. It has been a very complex project, and I have had to learn many things from various fields of IT and business, such as web development, UX, data engineering, and social media. To be honest, I’m still in the middle of the journey, and collecting the data is one of the hardest parts of the project.
I’m not sure whether I will be successful, but I’m sure it is worth the effort because I have learnt a lot from this project. This time, I will write about my concept and the conflicts between the concept and UX.

The concept

After I decided to build an online memory game and watched some tutorials about Django, HTML, CSS, and JavaScript, I had a couple of questions to answer. How is the player’s behaviour affected by showing the pictures at the beginning for a few seconds? In which part of the game are more pairs found? How long does each step take, and does this change during the game? Which parts of the table are clicked more, and which are clicked less? Which pictures are hard or easy to find? Are there any pictures that are more likely to be mixed up with others?

To find the answers to these questions, we need to take some measurements, and we also need to store them in a database so that we can analyse them later. As this is a hobby project, I knew I would have very limited resources. That’s why I decided to perform the minimum number of computations during the game and store the smallest possible amount of data. The variables would be created through calculations while analysing the data. I also decided that personal data would not be collected. This decision limits the range of questions that can be answered; for example, it is impossible to determine whether someone played the game two or more times, and I know nothing about the users. On the other hand, there are not as many ethical issues in my experiment, since there is no personal data that could be leaked or used for any purpose to which the player did not consent.

The mechanics of the game should be designed to help the researcher answer the questions mentioned above. At the beginning, the player is randomly given 0, 3, 5, or 7 seconds to memorise the table (if 0 seconds are given, the pictures are not shown). The length of each step, as well as the length of the whole game, should be measured precisely. Because of this, an open pair of pictures disappears only after the player clicks on another pair. The player can look at the images and memorise their positions for as long as they want. I will share more information about this mechanism in the next section.

When I created the game, I had no idea what table size and layout would be ideal for my experiment. A table that is too small may not provide interesting data, as everyone will find the pairs too quickly and easily, without making many mistakes. Users will not have to develop strategies to solve the table. Tables that are too large can also be problematic. Solving the table can take too much time, and website visitors may be in a hurry. The large number of images and mistakes can be frustrating, and many players will leave the game. To solve this problem, I wrote code that can create several table layouts. Finding the best ones was also challenging, as you will see in the next section. Collecting data from multiple layouts can also add new dimensions to my analysis.

Creating and selecting the set of pictures for the experiment is a critical part of the project. As I started building the game before AI-generated pictures were widely available, then did not work on it for years, and I am also bad at graphics, I decided to take some photos. The pictures shown in my game were taken during a hike in the Bakony, between Bakonybél and Zirc in Hungary. After my trip, I selected 30 photos. I tried to include some very similar pictures in the collection, while also choosing pictures of different subjects. Because of the way I took the pictures, this was difficult and almost impossible. I had some buildings, some animals, some landscapes, and many trees and flowers. Even so, I hope I can produce an interesting analysis based on this set of pictures.

The database must record the metadata of each game and the moves the player makes. For this purpose, I created two tables in the database. One of them stores information about the game, such as the start time, the table size, the time the player is given to memorise the pictures, and the positions of the images. The second table stores the metrics for each step, such as the exact times of the first and second clicks, and the names and positions of the selected photos. There is also a column for the result of the step (pair found or not found). As you can see, in my definition, a step means selecting a pair of pictures. Every game receives a unique ID at the beginning. This ID is also the key linking the two tables in my dataset.

Sharing my project on the web and conflicts with UX

Although programming the game and creating the environment was hard but enjoyable work, the most challenging part has been finding users to try the game. After a few fairly successful Facebook and Reddit posts, as well as many others that produced no results, I now have 255 games in my database. This is very far from my goal, which is about 3 000 completed and unfinished games. However there were some valuable comments that helped me improve the experience and make it more user-friendly. User reactions also highlighted several conflicts between my concept and UX.

To be honest, I didn’t care much about the design or how things looked. I love it when things work, and I also enjoy discovering something surprising in a dataset, even when it can be explained. Because of this, my website looked very ugly at first. To avoid negative reactions and build a little more trust, I used AI to generate a CSS design, and this is the only part of my project that contains more, rather than less, than 90% AI-generated work. I made some smaller fixes by hand, but this part was not difficult at all, and now I can say that my project looks like the homepage of a forestry company.

I initially designed my project for a PC or laptop, and when I shared the game, users were told that it was intended for computers and that the user experience was not very good on a smartphone. However, because people use phones more often than computers, I eventually decided to create a mobile-friendly version.

The experiment requires all pictures to appear on one screen so that players see the same layout and I can analyse where they find pairs after the pictures have been shown. Scrolling would be as inconvenient as displaying very small images. To address this, I rewrote the game to use a grid instead of a table, but it did not look much better unless the user rotated the phone by 90 degrees. As all my layouts contained more columns than rows, the only way to solve this problem was to add some mobile-friendly layouts. I am also experimenting with smaller tables. I hope they will be a little more popular and that the strategy for solving them might be different, which could make my experiment more interesting.

The old layouts:
• 5 × 8
• 5 × 10
• 7 × 8
• 6 × 10
• 6 × 9
• 6 × 10

Newly added:
• 4 × 8
• 8 × 4
• 8 × 5

I didn’t add tables larger than 5 × 8 because the others were not popular among the players.

To monitor users’ behaviour and UX issues, I’ve also added two new tables to the database. One stores the sizes of users’ screens and the pictures, while the other stores two in-game events: zooming and rotating the screen. I would be very glad if these metrics could help me better understand the players’ experiences and create better models. I’m planning to create a dashboard about screen usage, but right now there is not enough data for that.

Some parts of my concept cannot be changed because of the design of my experiment. I wanted to give users enough time to memorise the photos, which is why the photos are only hidden when the user selects another pair of pictures. It could be useful to know whether some pictures are viewed for longer or shorter periods. If people spend more time memorising the pictures at the beginning than at the end, that could also be interesting for the analysis, but some users found it annoying.

Changing the pictures in the game presented a more difficult dilemma. Many people who tried the game told me that the pictures were too similar, making the tables difficult to solve. A new set of pictures, even AI-generated ones, could make the game easier, and I could probably collect more data because more people might recommend my page or simply finish the game (unfinished games are also important for my project). Changing the pictures would require a new concept.Tthere could be image categories such as animals, buildings, vehicles, and symbols. Their shapes and colours should also be considered when selecting the pictures. Adding some non-figurative images could also be interesting. Is it harder to find something that you cannot name? Do the shapes, colours, or sounds of item names matter when someone tries to find them?

These questions would be easier to answer with a stronger concept, but I think this set of pictures can help me address them because I tried to include some very similar and some very different images across categories such as flowers, trees, animals, landscapes, and buildings. And, realistically, this is a low-budget hobby project. I do not want to spend much money on advertising or attracting more users. Because finding users is difficult, the data I already have is especially valuable; changing the photos would make it useless for analysis. That is why I chose to keep my old pictures rather than change them, even though there are good reasons for doing so.

Instead of a conclusion

As you can see, my experiment is very far from being complete, and the memory game has also changed a lot since it was first released. The version you can see right now may not be the last one. The changes have improved the game, but the most important features have been retained, so I think the data I gathered before and after the UX improvements can be compared, and I can use both sets of data in the analysis. However, the impact of the update can only be measured after I have collected some new data.
That’s why I would really appreciate it if you tried my memory game if you have a few minutes after reading my article:

https://marcihevesen.herokuapp.com/memory/

And if you still have a few more minutes, I hope you will like my dashboard too.

https://marcihevesen.herokuapp.com/memory/dashboard/

Top comments (0)