Personal Interface

APX_icons_color_Personal Interface

Design Problem:

Players cannot use the user interface components due to their size, layout, content, or structure.

Design Solution:

Players can show, hide, resize, pin, or rearrange user interface components so they can effectively and efficiently use them.

Related Patterns:

APX Design Drivers:

The above design problem can occur in the following contexts:

  • Players with physical disabilities may need to increase the size of interface components to make them easier to target.

  • Players with physical disabilities may need to rearrange interface components to move them closer together and reduce the distance traveled with the cursor.

  • Players with physical disabilities may need to pin components in a position around the interface to ensure they can reliably find, target, and activate them.

  • Players with cognitive disabilities may need to hide interface components to reduce the number of things that they must attend to in the game.

  • Players who are neurodiverse may need to reduce the information in the interface components to reduce the amount or type of information provided to them.

Examples of this Pattern in Action.

HUD configuration in Fortnite Battle Royale (Mobile)

Description:

In Fortnite Battle Royale Mobile, players may customize the placement of various heads-up display (HUD) elements using the “HUD Layout Tool” menu. Using this feature, players are given the opportunity to move icons or buttons in the HUD to preferable positions that will be applied during gameplay. Both of the game’s player interfaces, “Combat Mode” and “Build Mode,” can both be customized separately to create a unique layout for each of these interfaces. Players may move a variety of HUD icons including but not limited to the scope icon for weapon aiming, the crouch button, the jump button, or the “build” button (for building structures in the game). Players may also choose to remove HUD elements from the gameplay screen. The removed icons are always available to be restored to the player interface.

Resizable icons in Fortnite Battle Royale (Mobile)

Description:

In Fortnite Battle Royale Mobile, players may resize the elements of the user interface that appear on-screen. Players may change the size and/or display scale of controls and HUD icons. Changing the size of a button adjusts the size of the input surface area for the button. Adjusting the display scale of a button adjusts the size of the button icon within the perimeter of the input surface area. Players may choose to have larger buttons to make them easier to select, smaller buttons to have fewer obstructions on screen, or vary the sizes of each button to create their optimal user interface. These options allow for players to customize the size of each button specifically to their preference.

Resizing and opacity setting for HUD elements in Battlefield 1

Description:

In Battlefield 1, players may choose from a number of individual settings that customize the appearance of the minimap and icons displayed on the minimap. Players have the options to change the size of the overall minimap, the size of icons displayed on it, as well as the visibility (opacity and blurring) of the minimap’s background, icons, and compass. The ability to change the opacity of the minimap’s texture in order to add or reduce details of the in-game terrain is also featured. Players may also decide if they want only heavy stationary weapons or all weapons available displayed on the mini-map.

Players may determine if the minimap rotates as the player character changes directions. Additionally, the game includes options to specify the minimap’s zoom level when on foot, in a land vehicle, or in an aircraft.

When the minimap is expanded to the full map, players can determine the size of the icons, visibility of the map’s background, icons, and compass, the opacity of the terrain texture, and the sharpness of the map’s background.

Players may also adjust the icon size and the icon opacity for friendly soldiers, enemy soldiers, gadgets, grenades, interactions, pick-ups, and squad requests in the in-game environment (or “world” as it’s called in Battlefield 1).

Show/hide elements of the HUD in Horizon Zero Dawn

Description:

Horizon Zero Dawn allows players to customize elements that appear onscreen in the HUD. Players may change which elements of the HUD are visible onscreen. For General HUD settings, there are 3 options. The first setting, “Always on,” will cause the main elements of the game screen at all times. The second setting, “Dynamic” will cause elements of the HUD to only appear or update as a result of player progression or specific interactions with the in-game world. Examples of these interactions include enemy NPC attacks on the player character causing the life bar to appear on-screen, or updates to the player’s current quest progression appearing when objectives are completed.  Important HUD features like quest waypoints and nearby campfire locations (the game’s version of save points) will still appear on-screen on this setting. On the “Dynamic” setting, the player may tap the touchpad on the DualShock 4 to view the HUD at any time.

The third and final setting, “Custom,” allows players to customize which elements of the HUD that appear are onscreen during gameplay. Each HUD element has 2 or 3 of the following options for appearance in the game: “Always on,” “Dynamic,” and “Always off.” “Always on” will result in the respective HUD element always being shown on-screen. Similar to the general setting, the “Dynamic” setting for an individual HUD element will cause the element to appear or update as a result of player progression or specific interactions with the in-game world. The “Always off” setting results in a specific HUD element never appearing on-screen during gameplay. If players select “Dynamic” or “Always off” players may tap the touchpad on the HUD to cause the chosen hidden HUD elements to appear on-screen.

Minimize the complexity of menu navigation in Metal Gear Solid 5: The Phantom Pain

Description:

In Metal Gear Solid 5: The Phantom Pain, after pausing, players may resume the game from anywhere within the paused game menu by pressing the button indicated for “Resume Game” at the top right of the screen. Players may proceed as deep into the game’s pause menu options as they require and unpause the game by pressing the resume game button. While players may also return to previous screens or unpause by selecting menu options that return them to previous screens (using multiple joystick/directional button/arrow key inputs in conjunction with button presses/clicks), a dedicated resume button is a shortcut that leads from anywhere in the menus directly back to gameplay. In short, this feature allows for simpler menu navigation to return to gameplay. Players may find or adjust what they require and subsequently unpause the game with one button press as opposed to several. Additionally, players need not view previous options screens that they no longer require in order to return to gameplay.

Minimize the complexity of menu navigation in God of War (2018)

Description:

God of War (2018) features shortcuts during gameplay that automatically open up the in-game Journal to sections relevant to recently obtained collectibles, newly discovered lore, and updated information about enemy NPCs. When new entries are made to the Journal by way of the aforementioned discoveries, a prompt appears onscreen for several seconds that informs players that they can hold the up-button on the directional pad to jump directly to the new Journal entries. The prompt also includes information about the discovery so that players are informed about the Journal entry they can now view. This serves as a shortcut to standard Journal access which would require multiple button presses that include the use of the PS4 controller’s touchpad, trigger buttons, and directional inputs.

While, the option to toggle press, tap, or hold for these shortcuts would give players further versatility in activating them, this feature does allow for reduced menu navigation by jumping directly to relevant pages.

References and Other Citations.

Fortnite Battle Royale (Mobile) Screenshot Credits to: YouTuber iChase