UI POSITIONS

Speaking on mobile games, considering that most players are right-handed, the devices have comfort-to-reach area and hard-to-reach area depends on their orientation:

Portrait VS Landscape // reachable areas

Now take a look at the below examples from various mobile games:

As you can see, in the most comfort-to-reach area, the best practice is to place interactive elements which can lead to monetization:

💰 Store button

💰 More apps

💰 Ads

Users are likely to interact with these elements — unfortunately even by mistake. Those mistakes are what we call a dark-UX, but it’s proven to maximize revenues. Note that for bottom ads, you must include at least 10 pixels margin from the ad to the interactive content in order to follow ad-serving guidelines in most of the platforms.

💡 Pro tip: While all interactive buttons on your game will be activated on “touch end”, the store and the more-apps buttons should be activated on “touch begin”.

SLIDERS

Because the screen’s real-estate is limited, and the content in games is just getting bigger, sliders become a very handy component to expose many options to the users regarding extra content, without the need to navigate away from the main scene.

Here are five examples of different slider designs which offer horizontal or vertical sliding, used in world-selection, shop, landscape categories\items selection, portrait categories\items selection, and avatar customization:

Because the slider’s content expands outside the screen, we need to help the users understand there’s more content inside. Here are the best practices for sliders:

📌 Partly visible items: Make sure that content which expands outside the screen’s border will still be partially visible on screen, so users will understand there’s more of it.

📌 Animate from end to start upon launch: When introducing the slider to the users, either by automatic event or by a user-initiated event, make sure to launch it on its end-of-content, and scroll-reverse automatically to the beginning of its content. If your slider contains lots of content (i.e. 10 steps to scroll from beginning to end), you can just start from “step three” of the slider and then animate scrolling to “step 1”. This will show the users that there’s more content on the other side.

Always have a semi-visible content at the edge of the slider.

💡 Pro tip: If your game contains in-app purchase items which are part of the sliders, make sure that they are partly seen most of the time, with a call-to-action of purchasing or unlocking.

POP-UPS

Pop-ups are a good game component for delivering abstract and informational messages to users. Here are some useful best-practices:

📌Associate visible UI with hidden UI via animations: When pop-ups are opened due to user-initiated action on an interactive item\button, animate their launch from the triggering button (i.e. scale up a store-pop-up from the store-button, and scale down the store-pop-up back to the store button upon closing). This way users will associate the pop-ups with their initiators better.

📌Have a semi-transparent dim background behind popups: Because they often require a user-action, and might be big in size on screen, we should help the users understand that their session is paused, but still reachable. Pop-ups should be seen over a dim background that will allow the users to see a bit of their session behind (the dim background should animate quick fade-in parallel to the pop-up open animation, and fade-out parallel to its closing animation).

📌Avoid the X: Many pop-ups contain a default design choice of an “X” button to close them. Most users recognize this “X” button as a pattern of an ‘annoying’ content and closing the pop-up instantly. If your pop-up contains valuable content to the users, and you’d like to increase the probability that they’ll read this content, make sure that the “Close” button will be designed as one of the user’s choices and not as an “X” button. Note: Don’t have duplicate options with the same meaning (i.e. both “X” and “Close” in the same pop-up; users will just tap the “X”).

In the top right example, the “Done” and the “X” buttons are doing the same action — closing the pop-up and proceeding. This could be improved by removing the “X” button and changing the text on the “Done” button to be more accomplishing (i.e. “Claim” as if the users just claimed the rewards of their hard work. I would also change the color of this button to be more positive — i.e. green).

💡 Pro tip #1: Tapping the dim background should close the popup as if tapping “cancel”, unless it’s a store popup — then only closing via “X” will close the store. 💡 Pro tip #2: Popups with rich text (such as intro story popups) should show their “X” or “Continue” button only after 2 seconds delay. This way users will be more likely to read the important content of the pop-up rather then instantly close it.

USER CHOICES (VIA POP-UPS)

As I mentioned above, lots of pop-ups require user-action as they are offering the users to take a decision. Here are several examples of pop-ups which asks the users how to proceed — do you see a pattern?

As you may see, the rule of thumb here is as follow:

📌User decisions which are good for your game are placed on the right side of the popup — As a game designer you want your players to confirm a purchase, you want your players to share the game, you want your players to spend in-game currency… etc. :

📌User decisions which are bad for your game are placed on the left side of the popup —As a game designer, you won’t want your players to quit the game, disconnect, reset progress… etc. :

Although you might think that this is considered as a dark UX, it can actually help the users a lot — you don’t want your users to accidentally reset their progress, do you? Anyhow, the key here is to lead the users to take a decision you want, which is good for your game’s KPIs (IAP, retention, engagement, viral exposure, sharing and so on).

💡 Tip: Associate a button color with its function (negative is red, positive is green, neutral can be blue).

REWARDED VIDEOS

Rewarded-video ads become an industry standard in the past years, as part of a freemium model in mobile-games, which boost revenue and considered as a “win-win” situation (the users who cooperated with the offering to watch an ad, will receive an actual in-app reward in return).

The best icon to represent rewarded video ads should look like a film clapper board with a play icon on it (we’ve tested lots of different icons and this one worked best).

Here are several examples of rewarded video offering in different mobile games:

As a game designer, you should think carefully what the prize is going to be, how to reward it and for ‘how long’. The main scenarios are:

🎬 Permanent — Once the ad is watched, the users receive the prize for an unlimited time (i.e. get an item which is added to their inventory and stays there for good).

🎬 Per Session — Once the ad is watched, the users receive the prize and it’s available to be used anytime during their current session. Once quitting the game and getting back on a later time — the prize is not there anymore. This can be helpful in order to increase session time.

🎬 Per Scene — Once the ad is watched, the users receive the prize and it’s available to be used only at the current level (i.e. getting a booster, or ‘another try’).

The rewarded video prizes should be significant and not ‘little things’ — otherwise, users won’t want to waste their time on the ad. As a game designer, you should think about what your users will want from your game.

💡 Pro tip: Don’t tell users what reward they’re getting, to make the reward more exciting (motivate their curiosity and surprise — and increase the probability that they will watch the ad).

DRAGGABLE OBJECTS

An intuitive game mechanic on mobile is ‘dragging an item’, though many times it can harm the game experience if not done right. When exporting game assets such as PNGs, the design can be very creative, while ‘behind the scenes’ of the device they are all rectangles with some transparent area.

The default anchor points for rectangles are either the top left corner or the exact center. As a game designer, try to demonstrate how the object should be dragged as if dragging it in the real world — where the actual holding point of the item should be positioned for the user:

Default anchors are often outside of the dragged object (top left corner). Even when centered, the dragging won’t make sense to the user most of the time.

Here are important best practices for draggable objects:

📌Set a custom anchor-point offset on draggable objects so the user’s finger will not hide them: Most of the times the default anchor points will have to be adjusted and get a custom offset so the draggable item will be visible despite the user’s finger on the screen.

From right to left: (1) Custom anchor point on the head of the character ; (2) Default anchor point on the top-left corner of the asset; (3) Default anchor point on the center of the asset.

📌The grab area of small draggable items should be larger than their actual canvas size.

📌The dragged item should be in front of other items when dragged (Z-index wise). In special cases (i.e. inserting an object inside another object) this should be customized.

📌Use glow or dashed-outline for drop-zone areas. Don’t expect the user to understand immediately where the dragged item should go to. The best case is when having an intuitive ‘drop-zone’ (i.e. dragging a food item to a mouth) — in this case, no need to highlight the mouth, but just animate it ‘open wide’ when the food item is dragged. Users will know what to do.

💡 Pro tip: In general, pulling is easier than pushing (i.e., for right-handed users, dragging from left to right is easier than dragging from right to left ). If your game is designed for kids, try to have pulling over pushing by design.

INTRO VIDEO

So, you’ve invested a lot of time in creating this intro-video for your game, reviewing the storyboard, enhancing it, continuing to final art, animations, sound effects, music, dubbing… and then the users just skip it. It’s good to allow skipping a long duration content, but you can also try to ensure cooperating with your content better. Here are some quick best practices for skippable content:

📌Intro video shouldn’t be longer than 20 seconds.

📌After watched once, the intro video should be accessible again from the cover page or settings menu. But not upon every launch of the game since the very first launch.

The cover page on the right demonstrates how the game looks like on its very first launch (no intro button). Tapping the ‘play’ button will start the intro-video immediately. The screen on the left demonstrates another game session — now tapping the ‘play’ button will go to the main game’s screen (i.e. world-selection) but the intro-video is still accessible at any time from the top right corner of the cover page.

📌Invisible skip button: Don’t show the skip button on top of your video as a default. It will just escalate the impatience of the user and will call to tap it. The best practice is that it will appear upon a user-action — for example, any tap on the screen will reveal the “skip” button, and if not tapped after 2.5 seconds then it should disappear (another tap will reveal it again and so on until tapped). This will increase the probability that users actually won’t skip your content — they will rest assured that they can, but they won’t.

The skip button on the top right corner is only visible once tapping anywhere on the screen, and not present there all of the time. If not tapped after 2.5 seconds, it disappears again.

RATE US DIALOGS

Lots of game designers are using the ‘rate us’ dialog too soon — calling the users to rate their experience before they actually formed an opinion about your game. When done right, using the ‘rate us’ dialog helps to achieve better ratings on the stores and helps organic promotion. So how to do it? The ‘rate us’ dialog should meet the user on the following scenarios:

🔔 After a big achievement or big satisfaction point (i.e. defeating a boss, completing a world, winning a major challenge, etc.).

🔔 After accumulating small satisfaction points (i.e. win 10 badges).

To maximize the probability that users will rate your game, the ‘rate us’ dialog should be designed as follow:

📌 Have a relevant presenter, looking at the user.

📌”Rate button” should be with positive color (i.e. green) and more noticeable than the ‘later’ button. Also, if you followed the best practices mentioned in the ‘user decisions’ section above, you should know by now that its position should be on the right side.

💡 Tip: Never use “5 stars” reference — it’s against Apple’s guidelines.

STORE DIALOG

The design of your store dialog is critical to your selling. Many times the store dialog will offer some ‘full version’ deal along with some other in-app purchase options. Here are a few examples:

To maximize the purchases of the full version, you can follow these guidelines:

📌Make sure that the ‘full version’ button includes a presenter from the game, with noticeable eyes (preferably looking at the user).

📌The ‘full version’ button should be stronger in color, larger and more attractive rather than the other in-app offerings.

📌Add a ‘breathe’ animation to the full-version button(scaling up to 104%, then back to 100% two times, then stop for another 6 seconds before repeating the animation).

📌The title of the full-version button should be bigger than its inline content.

📌Have a clear “Discount” or “Best Deal” ribbon on the full-version button.

To increase the probability for selling, even more, follow this animation sequence guideline for the store-dialog:

When the dialog opens, the full version button appears first (no other buttons at this stage)

After a 1-second delay, the other IAP options appear

After an additional 1-second delay, the X button appears (and the “restore purchase” button)