How should I position the "Remove player" button?

Question

Note: There will always be at least two players, so the first two players won't have the "Remove player" button.

---

For the view with three players, it seems to make sense to put the "Remove player" button above the top-right corner of the grid:

For the view with three players where the screen is more narrow, it also seems to make sense to put the "Remove player" button above the top-right corner of the grid:

However, on the view with four players and a wide screen, the players are arranged in a grid, and I'm not sure where it'd make sense to place the "Remove player" button.

Having the tier and category selectors to the right of the grid is important because it allows the user to view everything about two players at once, because it's all above the fold for 13+ inch screens.

Option 1: At the top-right corner of the "player box". Looks really awkward, but I'm having trouble articulating why. Also, there's the downside of it not being consistent with where it's positioned in the other views.

Option 2: Above the top-right corner of the grid (like the other views). Seems decent, but the button doesn't feel like it's associated with the tier and category selectors. Users of the app will probably understand that those components are part of "the player", and thus that they'll also be removed, but it isn't as intuitive as I'd like.

Option 3: Above the top-right corner of the tier selector. In this position, it seems more clear to me that the tier and category components will be removed as well. The downside though is that it's inconsistent with the placement in the other views (in the other views, it is above the top-right corner of the grid).

Option 4: To the right of the equity text. It doesn't pop out this way. You have to read the text to realize what it is. When it's positioned alone, I think UI conventions prime the user to expect some sort of remove/close button.

Answer 1

You have a hierarchy and whitespace challenge. Try containing your player elements in some sort of a subtle container. If you solve this, the header and container can work in a responsive manner, as it still visually contains the properties and status of each player as a separate unit.

Hierarchy organization:

Your current layout has my eyes seeing the 'Equity' title repeating. If I'm a frequent user, my assumption (correct me if I'm wrong) is that I want to see the Equity Values at a quick glance, then perhaps dive into the scoremap below to analyze.

• I've added a 'Player' field so you discern who is leading
• I've made both the Equity and the Player larger, so you can compare the performance of the players, and made the value fields larger
• A slight gray (or other color) header binds the header together
• Making the Equity and Player labels smaller allows you to emphasize the Values, not the Labels.
• 'Remove player' is a subtle link, with color discerning it from the other text (an icon plus text could be even clearer)

Whitespace concerns:

Right now you have elements that have a lot of pockets with whitespace. You can resolve this by making a subtle container, which separates the individual players, their scores, and the adjustment controls that go with each.

Here's the 2 x 2 version:

The header stretches, and you still have the players as separate units.