Safe Placement of UI Controls
When designing your game’s user interface, consider both the gameplay controls and transient platform UI (such as notifications, NUX prompts, world chat etc) which can partially or permanently obscure your interface.
The following illustration provides general guidance for where you can place UI, combining both desktop and mobile surfaces:
Unobstructed.
Potentially obstructed.
Permanently obstructed.
Note: The amount of space will vary depending on the features your world has enabled, how you set up grabbables, and the user’s screen size.
Always test your world on both mobile and desktop, to check for any overlapping or obscured UI.
For a deeper look at why these regions, let’s take a look at each surface with all possible UI states enabled:
Mobile (@844x390)
Desktop (@1920x1080)Taking into account the typical usage percentage of each gameplay control and the the frequency of each transient UI element, the per-surface safe zones look like this:
Mobile (@844x390)
Desktop (@1920x1080)The most important thing to note for mobile controls is that they are contextual. The number of on-screen buttons is determined by how you set up your grabbables.
For example, if you have a simple world with grabbables that have either one or no actions, then you’ll have more available UI space than a world using complex grabbables, custom input etc.
No held item:

Item with Primary & Secondary actions:

Item with Primary, Secondary and Tertiary actions Holstering enabled on world:

Item with Primary, Secondary and Tertiary actions Holstering enabled on world Using Custom input:

Desktop controls are also contextual, but they’re limited to a list anchored in the bottom right portion of the screen.
You generally have more space available on desktop, because the on-screen elements are confined to the top left, top right, and bottom right corners.