Inventory UI Design Patterns for Games

The Grid Layout

The grid layout is the most common inventory pattern in gaming. Items appear as icons in a rectangular grid of uniform cells, each cell holding one item (or one stack of identical items). Players recognize this pattern instantly from games like Minecraft, Diablo, Terraria, and virtually every RPG ever made. The grid's strength is spatial organization: players can arrange items by type, value, or frequency of use, and they remember where they put things by position.

Grid dimensions depend on the game's item volume. A simple game with 10 to 20 items can use a 4x5 or 5x4 grid. A game with hundreds of items needs a larger grid with scrolling, typically 8 to 10 columns wide with vertical scroll. The cell size must balance between showing enough grid at once (smaller cells show more items) and being large enough to recognize item icons (larger cells improve readability). For web games, 48 to 64 pixel cells work well on desktop, and 56 to 72 pixel cells work well on mobile where touch targets need to be larger.

Items in a grid communicate through their icon, their border or background, and optional overlays. The icon identifies the item. The border or background color can indicate rarity (gray for common, green for uncommon, blue for rare, purple for epic, orange for legendary, following the near-universal color coding that World of Warcraft popularized). Overlays in the corner show stack count (for stackable items like potions or ammunition), condition percentage, or a badge indicating the item is new or quest-related.

Variable-size grid items, where some items occupy 2x1, 1x2, or 2x2 cells, add a spatial puzzle element to inventory management (as in Resident Evil 4 or Escape from Tarkov). This pattern increases the complexity of inventory management significantly, both for the player and for the developer implementing it. Most web games are better served by uniform cell sizes unless the inventory puzzle itself is a core gameplay mechanic.

The List Layout

List-based inventories display items as rows in a scrollable list, each row showing the item icon, name, key stats, and action buttons. This pattern works better than grids when items have important text information, like weapon damage ranges, armor values, or effect descriptions, that the player needs to compare without opening individual tooltips.

Each list row typically contains: an icon (40 to 48 pixels), the item name, one to three key stats (damage, defense, value), and action buttons (equip, use, drop). The key stats should be right-aligned or in fixed columns so the player can scan vertically to compare items. Column headers at the top of the list allow sorting by name, type, value, or rarity, which is the list layout's major advantage over grid layouts.

List layouts work particularly well for equipment comparison. When the player is choosing between a Sword of Flame (45 damage, 10% fire) and a Frost Blade (38 damage, 15% ice), seeing both items as list rows with their stats in parallel columns makes comparison instant. A grid layout would require the player to hover over each item individually to see its stats in a tooltip.

The drawback of list layouts is lower density. A grid showing 40 items in a 5x8 arrangement uses the same screen space that a list uses to show 8 to 10 items. For games with large inventories, lists require extensive scrolling. The common compromise is a grid view for browsing (seeing many items at once) with a list view for comparison (seeing detailed stats), toggled by a view-switch button.

Slot-Based Equipment

Slot-based equipment UI is a specialized inventory pattern where specific equipment positions are represented as fixed slots on a character silhouette or equipment screen. The player drags items from the inventory grid to the appropriate slot: helmet to the head slot, sword to the weapon slot, boots to the feet slot. This pattern communicates which items go where through spatial metaphor, making equipment management intuitive even without labels.

The character silhouette approach places slots around or on a character image in anatomically logical positions: head slot above, chest in the center, hands to the sides, feet at the bottom, weapon to the right, shield to the left. This layout is immediately understandable because the spatial mapping matches the player's mental model of where equipment is worn. Diablo, Dark Souls, and most MMOs use this pattern.

The simplified slot approach removes the character image and uses a horizontal or vertical row of labeled slots: Weapon, Armor, Accessory 1, Accessory 2. This works well for games with fewer equipment categories and is easier to implement and make responsive. The slots can be positioned alongside the inventory grid, typically at the top or left side of the inventory screen, so the player can see both equipped items and available items simultaneously.

Equipment comparison is critical in slot-based systems. When the player drags an item toward an equipment slot, or hovers over a new item while an item is already equipped, the UI should display a comparison showing the stat differences. The standard pattern is showing green upward arrows for stat improvements and red downward arrows for stat decreases, positioned next to each stat. This lets the player make equip/unequip decisions without mental arithmetic.

Drag-and-Drop Implementation

Drag-and-drop is the primary interaction pattern for inventory management. The player clicks (or taps) an item, drags it to a new position, and releases it to complete the action. The action depends on the drop target: dropping on another inventory slot swaps or stacks the items, dropping on an equipment slot equips the item, dropping on a discard zone removes the item, and dropping outside any valid zone cancels the action.

For mouse-based drag-and-drop, the implementation involves three event phases. On mousedown, record the source slot and create a visual copy of the item icon that follows the cursor. On mousemove, update the drag visual's position and highlight valid drop targets. On mouseup, determine the drop target, execute the appropriate action (swap, equip, discard), and remove the drag visual. The original slot should show a dimmed or ghosted version of the item during the drag to indicate that the item is being moved.

Touch-based drag-and-drop requires a different interaction model because touch devices do not have a hover state. The most common approach for mobile inventory is tap-to-select followed by tap-to-place. The player taps an item (which selects it with a visual highlight), then taps the destination slot (which moves the item). This two-tap flow is more reliable than touch dragging, which can conflict with scrolling and is difficult on small screens.

An alternative mobile approach is long-press to initiate drag. The player presses and holds an item for 300 to 500 milliseconds to begin dragging, then moves their finger to the target and releases. This avoids conflicting with tap actions but requires the player to discover the long-press behavior, which is not obvious without a tutorial. Many games implement both tap-to-select and long-press-to-drag, giving the player a choice.

Drop validation prevents illegal moves. If an item cannot be equipped in a particular slot (a helmet dragged to a weapon slot), the drop target should show a visual rejection state (red tint, X icon) during the drag, and the drop should be rejected and the item returned to its original position. Invalid drop feedback must be immediate and clear so the player understands the constraint without needing an error message.

Item Tooltips and Detail Views

Tooltips are the primary mechanism for displaying detailed item information without cluttering the inventory grid. When the player hovers over (desktop) or taps (mobile) an item, a tooltip panel appears showing the item's full name, description, stats, rarity, level requirements, and any special effects.

Tooltip content follows a consistent structure across all items: item name (colored by rarity) at the top, item type and subtype below, primary stats in a stat block, special effects or bonuses in a separate section, flavor text in italics at the bottom, and action hints ("Right-click to use," "Drag to equip") at the very bottom. This consistent structure means players learn to scan tooltips efficiently: they know where to find the stat they care about without reading the entire tooltip.

Tooltip positioning requires careful handling. The tooltip should appear near the cursor or tap point but must not extend beyond the screen edges. The standard algorithm places the tooltip to the right and below the cursor, then checks if it overflows the viewport horizontally or vertically. If it overflows right, flip it to the left. If it overflows bottom, flip it to the top. If it overflows both, adjust the position to keep the tooltip fully visible. CSS or JavaScript-based positioning calculations handle this, and getting it wrong causes tooltips to be partially hidden at the screen edges, which is a common UI bug.

Mobile tooltips cannot rely on hover, so they typically appear on tap with a close button or a tap-anywhere-to-dismiss behavior. Some games show the tooltip as a bottom sheet that slides up from the screen bottom, which avoids positioning issues entirely and provides more room for content on small screens. The bottom sheet pattern works especially well for games with complex item stats that need more display space than a floating tooltip can provide.

Comparison tooltips appear alongside the main tooltip when the player has a similar item equipped. The comparison shows both items side-by-side with stat differences highlighted in green (improvement) or red (downgrade). Implementing comparison tooltips requires knowing which equipment slot the hovered item would occupy, finding the currently equipped item in that slot, and calculating the stat deltas. The positioning must accommodate two tooltips without either overflowing the screen.

Sorting and Filtering

As inventories grow, players need tools to find specific items. Sorting rearranges items by a criterion: name alphabetically, rarity from common to legendary, type grouping (all weapons together, all potions together), or value from highest to lowest. A sort button or dropdown at the top of the inventory lets the player choose their preferred sorting order. The sort should be instant and animate items moving to their new positions, so the player can track where items went.

Filtering hides items that do not match a criterion. Filter buttons for item categories (weapons, armor, consumables, materials, quest items) let the player narrow the grid to a single type. A search field lets the player type an item name to find it instantly. Filtering is more useful than sorting for large inventories because it reduces the visible set rather than reordering it, making the target item easier to find.

Combined sorting and filtering provides the most powerful inventory management. A player looking for their best healing potion can filter to "Consumables," sort by "Effect Strength," and immediately find the item at the top of the filtered list. Implementing this requires maintaining the full item list in memory and applying filter and sort functions to generate the displayed subset on each change.

For web games with smaller inventories (under 30 items), sorting and filtering add complexity that may not be justified. If the entire inventory fits on screen without scrolling, the player can find any item by visual scan faster than they could navigate a filter/sort interface. Add these features only when the inventory size makes visual scanning impractical, typically when the inventory exceeds 30 to 40 items.

Responsive Inventory Design

Inventory screens on mobile face a severe space constraint. A grid that shows a 6x8 matrix of items on desktop must work on a 375-pixel-wide phone screen, where 6 columns of 48-pixel cells would require 288 pixels plus padding and borders. This just barely fits, but each cell is small enough to make tapping difficult. Reducing to 4 or 5 columns per row on mobile, with slightly larger cells, is usually the better approach.

The split-view layout common on desktop, where the equipment slots or character view occupies the left half and the inventory grid occupies the right half, does not work on mobile. Instead, use tabs or swipe navigation to switch between equipment view and inventory view. Each view gets the full screen width, making touch targets appropriately sized and avoiding cramped layouts.

Scroll behavior in mobile inventories must be carefully managed. A scrollable grid inside a scrollable page creates a nested-scroll conflict where the player cannot tell whether their swipe will scroll the inventory or the page. The solution is to make the inventory occupy the full viewport height so there is no page behind it to scroll. Alternatively, use the CSS overscroll-behavior: contain property on the inventory container to prevent scroll propagation to the parent.

Context menus (right-click on desktop) need a mobile equivalent. Long-press is the standard replacement for right-click on mobile devices. A long-press on an item opens a context menu with options like Use, Equip, Drop, and Info. The context menu should appear near the touch point as a simple list of tappable options, each large enough to hit reliably. If the game does not use context menus, provide action buttons within the item tooltip or detail view instead.