A more transparent UI for game ads

Feb 13, 2024

See end for dark mode.

Summary

Giving an ad its own container instead of taking up the entire screen real-estate prevents misclicks on any fake ui. Using tabs helps reduce uncertainty as it shows where you are and how much longer you have to wait until you can return to your game. A 'Continue' labeled button shows clear navigation intent instead of using 'x' for all the views. Having the action button at the bottom makes it more accessible and easier to click on.

Introduction

Everyone playing free mobile games is familiar with the the restless and frustrating search for the close 'x' button as we wait for it to appear. On top of that, the disruption of being taken to the play/app store without our intention when pressing the wrong 'x' as some ads like to sneak in a fake button.

I've tried doing some research to discover any designs attempting to solve the issue or if any top players showcase future improvements. However, I haven't found anything considerable so I decided to spend some time in Figma to approach to the growing frustration of game ads.

The aim for this design project wasn't to simplify the flow into one screen but to hopefully inspire and attract attention. The assumption with these designs is that there is a genuine reason for having 3 separate views for a single game ad. Therefore, the design focuses less on simplifying the flow and more on making the views more user friendly, accessible, and transparent.

Justifications

There are many different game ads so for the designs I chose Mistplay as it is a very frequent and common game ad format people experience.

The first issue is the ad taking up the entire real estate of the screen. This means all the controls and navigation must be overlayed. Bringing the UI elements outside of the ad prevents misclicks on any fake UI and also brings flexibility to the layout and positioning.

This allowed me to tackle the next issue where all the controls are mainly in the top right corner of the screen provoking the need to always reach to the top. Giving the ad its own container now allowed me to bring the important controls to the bottom where it is easier for the user to access.

The 'x' icon usually signifies to close a given pop-up, however it is misrepresented for the first two screens. To tackle this issue, it would be reasonable to rename the label to 'Continue' and use tabs on the top to show where the user is within the game ad. The transparency in the designs reduces the uncertainty of where the user is and how much longer a given game ad will take.

Additional takeaways

This design also allows users to cycle between the views as sometimes there might be cases where a user may want to try the game again or re-watch the video.

This was also posted on Dribbble.