Utilize Graphical Elements to Communicate Information to Players
On this page
Players rely on GUI elements to receive feedback and interact effectively with your game.
Review the following list of GUI elements to determine whether any of them could enhance your design:
Buttons
Virtual buttons allow players to trigger an event without the need to input commands manually. While buttons are often used for simple operations, they are particularly effective for executing complex or repetitive tasks, where pressing a single button facilitates quick and easy control during gameplay. Therefore, during playtesting, observe whether players repeat specific sequences of actions and consider designing a button to help them execute these sequences more efficiently.
In This War of Mine, the “Grab all” option significantly speeds up gameplay, as players can transfer all items to their inventory with a single click instead of moving them individually.
Credit: 11 bit studios S.A.. Footage captured by the author.
When designing buttons, ensure that players are always able to clearly recognize whether a button is currently pressed or inactive.
Checkboxes
A checkbox provides players with a means to select one of two (or three) states. When multiple checkboxes are available, players can quickly configure custom settings. Ensure that each option is accompanied by a clearly defined label, keeping the text concise whenever possible. It is preferable not to pre-select any checkbox options, allowing players to make independent choices. You may also incorporate a parent checkbox that enables players to check or uncheck all associated checkboxes in a single action.
In Gone Home, players can modify their gameplay experience by enabling optional modifiers. These modifiers are disabled by default, and their clear descriptions assist players in making informed decisions.
Credit: The Fullbright Company. Screenshot captured by the author.
Combo Boxes
A combo box is a drop-down element that allows players either to select an item from a predefined list or to type a value directly for quicker access, especially useful when the list of options is extensive. Ensure that the labels for each item are clearly defined, while keeping them as concise as possible.
In Frostpunk, a combo box facilitates the location of individuals within the convoy, making navigation more efficient.
Credit: 11 bit studios S.A.. Footage captured by the author.
Context Menus
A context menu displays a list of relevant options based on the current game state. Keep the labels of each option brief and meaningful.
In a role-playing game, when players right-click on an assault rifle icon in the inventory, a context menu with five available actions appears. Players can then select a desired action by moving the cursor and left-clicking on the corresponding option.
Cursors
Cursors indicate the current position, where interaction is taking place. Your game can use different cursors for different purposes. For example:
- Pointer: Use it when you want players to manipulate with visual elements on the screen.
In Stronghold Crusader 2, a pointer cursor is visible when players navigate through menu options.
Credit: Firefly Studios. Screenshot captured by the author.
- Reticle: Use when players need to survey or shoot.
In Sniper Elite 4, a reticle is displayed when players aim their weapon.
Credit: Rebellion Developments. Screenshot captured by the author.
- Text Cursor: Use to indicate where players will input text.
In Celeste, a blinking text cursor is clearly visible, signaling the location where text will be inserted.
Credit: Extremely OK Games. Footage captured by the author.
If your cursor needs to respond dynamically to the current state of the game, refer to the section Make the HUD Cursor Dynamic.
Data Grids
A data grid organizes information in rows and columns. It can be particularly useful in games where players are required to manage collections of data, enabling operations such as searching, filtering, sorting, inserting, or deleting records.
In a business simulation game, players can adjust vehicle pricing and discounts by entering specific values. Players can also filter and sort this data for more effective management.
Dialogue Boxes
Dialogue boxes are used to request input from players, such as selecting options or entering text. These boxes can serve several functions:
Request confirmation before executing a destructive action: Particularly useful for operations that cannot be undone, such as permanent game state changes or irreversible file modifications.
In Evil Genius 2: World Domination, players must confirm their strategic plans by clicking the “Confirm all” button.
Credit: Rebellion Developments. Screenshot captured by the author.
Request acknowledgment of a past or upcoming event: This may involve notifying players of an error or requesting them to confirm that they are prepared to wait for an operation to complete.
Request critical information necessary for continued progression.
For further guidance on how to provide feedback during such interactions, see Provide Suitable Feedback When Executing Destructive Actions.
Drop-down Lists
A drop-down list allows players to select a single option from a list of predefined items. Ensure that the labels are clearly defined and maintain brevity for clarity.
In Evil Genius 2: World Domination, players encounter a drop-down list when configuring the frequency of autosaves, enabling them to select their preferred interval.
Credit: Rebellion Developments. Footage captured by the author.
Images
Images are used to provide visual representations of information. Utilize them whenever textual descriptions are unnecessary or redundant. Ensure that images are easily comprehensible to players across different age groups and levels of gaming experience.
Images can take various forms, including pictures, drawings, icons, diagrams, graphs, and maps.
Drawings and Paintings
In Celeste, players can view a portrait of the character currently speaking, which adds emotional depth to the dialogue.
Credit: Extremely OK Games. Screenshot captured by the author.
Icons
When selecting icons for display, consider using elements that are recognizable both in the virtual domain (e.g., software applications) and in the physical world. This enables players to intuitively understand the meaning an icon conveys at a glance.
Common icons include:
Animated Circles: Use these to indicate ongoing progress.
In This War of Mine, animated circles are displayed to show that characters are engaged in looting activities.
Credit: 11 bit studios S.A.. Footage captured by the author.
- Arrows: Employ arrows to guide players toward specific destinations.
In Tacoma, players can use arrows to navigate backward through a list of messages.
Credit: The Fullbright Company. Screenshot captured by the author.
- Emoticons: Use emoticons to express emotional states through symbolic characters.
In Tacoma, emoticons are used to convey how much oxygen the crew has remaining for survival.
Credit: The Fullbright Company. Screenshot captured by the author.
Exclamation Marks: Use these to alert players to critical information or urgent situations.
Information Icons (“i”): These suggest that additional information is available.
In Evil Genius 2: World Domination, selecting a minion allows players to click on the information overlay icon in the upper-left corner of the screen to view helpful tips for understanding that minion’s details.
Credit: Rebellion Developments. Footage captured by the author.
- Locks: Use a lock icon to communicate whether a particular feature or option is accessible.
In Tacoma, a red-lit lock indicates that it cannot be opened.
Credit: The Fullbright Company. Screenshot captured by the author.
- Playback Buttons: These inform players that they can control time-based elements.
In Tacoma, players can rewind, pause, and fast-forward through recordings, which helps them uncover clues to advance the story.
Credit: The Fullbright Company. Footage captured by the author.
- Question Marks: Use question marks to represent unknown information.
In Tacoma, entering a room with recoverable AR crew data causes a timeline with question marks to appear. Once the player interacts with the appropriate crew member’s AR desktop, a question mark is replaced with a checkmark.
Credit: The Fullbright Company. Footage captured by the author.
Photos
In This War of Mine, the photos of Katia, Bruno, and Pavle contribute to players’ emotional connection with these protagonists.
Credit: 11 bit studios S.A.. Screenshot captured by the author.
List Boxes
A list box enables players to select one or more options from a predefined list. Ensure that each label is clearly defined and, if possible, concise.
List Builders
List builders allow players to transfer items between two or more list boxes. These are especially useful when managing multiple lists that contain numerous options.
In This War of Mine, players can move items from a scavenged inventory into their personal inventory.
Credit: 11 bit studios S.A.. Footage captured by the author.
Menus
A menu presents players with a list of options to choose from. Make sure the labels for each option are clear and brief.
Pie Menus
A pie menu displays options in a circular layout.
In Sniper Elite 4, players access a circular inventory display when choosing between items.
Credit: Rebellion Developments. Screenshot captured by the author.
Radio Buttons
A set of radio buttons allows players to select only one option from a group. Clearly define each label and keep it concise. Assist players by selecting a default option. When displaying a group of radio buttons, arrange them vertically to make the association between labels and buttons clear. Avoid horizontal arrangements, as they may cause confusion and lack aesthetic clarity.
In Stronghold Crusader 2, players may retain their digital distribution username or select a custom name.
Credit: Firefly Studios. Screenshot captured by the author.
Scrollbars
Scrollbars enable players to navigate along a single axis on a 2D plane when the full content cannot be displayed simultaneously. Consider including navigation buttons for incremental scrolling.
Search Boxes
A search box allows players to input text queries. As the user types, the box can provide relevant suggestions. Filters may also be applied to narrow down search results.
Sliders
A slider enables players to select a value from a predefined range by moving a marker along a linear track.
Spinners
Spinners allow players to cycle through options using on-screen arrows.
In Strange Brigade, players can select a character using keyboard arrow keys or by clicking the spinner arrows on the screen.
Credit: Rebellion Developments. Footage captured by the author.
Tabs
A tab provides a window for organizing related elements. Use tabs for a clean and structured layout, especially when you need to display numerous items that can be grouped into categories.
Text Blocks
Text blocks are used to display written content. When considering the use of text, evaluate whether an image might convey the same message more effectively, as the human brain processes images more rapidly. However, when precise information is required, textual representation is preferable.
In Tacoma, text is used for environmental storytelling (e.g., writing on walls) and for transcribing dialogue (e.g., closed captions).
Credit: The Fullbright Company. Screenshot captured by the author.
For additional information on using text in games, refer to Use Text Effectively to Communicate Information to Players.
Text Boxes
A text box allows players to enter free-form text.
In Celeste, players interact with a text box to input their character’s name.
Credit: Extremely OK Games. Footage captured by the author.
Tooltips
A tooltip is a brief text element that appears near a relevant component when the player hovers the cursor over it. Tooltips are useful for providing short explanations about visual elements.
Tooltips are particularly appropriate when:
You want to supplement visual feedback with additional textual or non-textual cues to improve clarity.
In Frostpunk, the game offers numerous helpful tooltips.
Credit: 11 bit studios S.A.. Footage captured by the author.
You need to explain the effects of specific options. In such cases, ensure that tooltips detail how these options influence gameplay. If a tooltip becomes too lengthy, consider placing its content in a dedicated text area instead. Refer to Textual Descriptions for more details.
Avoid using tooltips in the following scenarios:
When a standard textual description would enhance the user experience more effectively than a tooltip.
When the same information could be displayed without requiring cursor hovering. Providing direct access to information improves accessibility.
There is no necessity to require players to reveal a tooltip by hovering over a dedicated tooltip icon. It is more accessible and user-friendly to display the tooltip automatically when the player hovers over the relevant text field. Alternatively, the error message can be shown for the entire duration of the error condition without requiring the player to hover over the corresponding text field.
When the tooltip contains a large amount of text. In such cases, a dedicated text field is more appropriate.
When interaction with the tooltip’s contents is expected. Use a standard text element in such instances instead.
Windows
A window presents a collection of related visual elements.
In Strange Brigade, selecting “Career Stats” from the main menu opens a separate window that displays player statistics.
Credit: Rebellion Developments. Footage captured by the author.