Fights in Tight Spaces
Usability, Accessibility and UX for deck-building strategy game
Summary
Fights in Tight Spaces is a stylish, deck-building, strategy videogame. The game is in early-access and still has time for quality-of-life updates before its official launch.
Through a heuristic playthrough and analysis, I uncover several areas for significant improvement and apply UX design principles to improve ease-of-play:
Usability and Accessibility
Interaction model consistency
Card layout and design
While the game is meant to be a challenge, the challenge is not meant to be using the interface.
(Some games have challenging UI as a key element of gameplay/narrative [see Getting Over It], this is not one of those moments.)
Usability and Accessibility
While there were many usability improvements to be made, the following will highlight two of the most urgent and exemplary usability needs within the application. These two examples are both urgent needs to improve within the application as they result in critical failures. With the game already in beta, there is not time to rehaul the entire UI, rather, we focus on ways to improve the existing UI through small tweaks meant to solve the core-usability issues.
Inaccessible Color-Contrast Ratio for Primary-UI/Text
The first thing you’ll notice about Fights in Tight Spaces is that it is stylish in its color scheming. Unfortunately, the way this palette is leveraged creates moments of anti-usability and inaccessibility.
Primary UI elements do not meet WCAG accessibility standards, making a majority of the game unusable and inaccessible!
Adjusting background color to a darker shade brings the game up to WCAG standards while maintaining the game’s style.
Lack of User Control; inconsistent interaction patterns
User control is a primary requirement from any software system, including videogames! Not only do you need to provide the control, the control has to be known and understsood by the user. Even if the game provides user control, if the user doesn’t feel in control or doesn’t know how to control the system, it is not usable.
“Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.”
- Jakob Nielson, Nielson Norman Group (on Apr. 24, 1994; Updated Nov. 15, 2020)
There is a lack of navigation allowing the user to exit the “Discard Pile modal” and return to playing the game.
The only way to navigate out of the “discard-pile-modal” is to right-click on the mouse. This pattern has no precedence prior to this specific interaction. This navigation pattern is not used anywhere else within the game! During the initial playthrough, we got stuck here and it took clicking around frustratedly for 30 seconds before accidentally finding the way out. We had to go back in and experiment just to figure out how we had escaped in the first place!
This is considered critical to the success of the system as it prevents the player from returning to playing the game.
Current Interaction:
RIGHT CLICK ON MOUSE anywhere to dismiss the modal
**this interaction is not seen anywhere else in the current Fights in Tight Spaces system!**
Leverage existing design-patterns to provide a more intuitive and less frustrating experience; better allowing players to just play the game.
While many games require a learning curve, that curve doesn’t need to include “how do I use a computer???” By looking at common/global “modal” and “elevation” UX patterns, we can better match the expectations of interaction that our user’s come to us with. Most notably, including an (X) in the corner to dismiss the modal. This is a pattern so common throughout all HCI that it is a part of almost every interaction you have with a computer. It is so core to global design patterns that it’s a part of base WindowsOS and MacOS design systems.
The escape-button is another very common pattern for dismissing modals/elevations and is a common recourse when user’s cannot find other ways to “escape”. Using this pattern here will allow for greater user control in the event that
Improved Interaction:
LEFT-CLICK MOUSE on this button to dismiss
CLICK ESCAPE BUTTON to dismiss and/or
LEFT-CLICK MOUSE on this button to dismiss
CLICK MOUSE anywhere that is not the modal to dismiss
All of the proposed interactions (above) will improve the usability of this system as they better align with the user’s existing expectations within any human-computer-interaction. The proposed interactions leverage the current global-design patterns of “modals” and “elevations” which are common amongst app design today (2021) which provides greater user control over the system.
Interaction Model
Fights in Tight Spaces is certainly not the first virtual card game of its kind. In fact, there is a very large pool of competitors to observe in the “virtual deck-building game” world.
In particular, we will focus on the two industry leaders in virtual deckbuilding UX:
Hearthstone (the most popular virtual deck-building game on the market)
Slay the Spire (the most played virtual deck-building game available on the major PC gaming platform Steam)
Top-competitors follow a consistent 3-step model for playing ALL cards.
Step 0. Gameboard at Rest
Step 1. On-Hover of Card
Increase size of card to reveal card details but do not remove it from the “card shelf”.
Step 2. Select Card
Select card (left-mouse click), removing it from the card shelf
Step 3. Apply Card to Target
Select the target (left-mouse click or drag-and-drop), applying the card effect(s)
Fights in Tight Spaces merges step 2 + 3 for Defense cards ONLY, immediately applying the effect of the card without confirmation from the user; causing unresolvable gameplay errors.
While the game follows this industry standard for 2/3 of their cards (Attack and Movement), it merges steps 2 and 3 for playing Defense cards. This may initially appear to “cut out a step” for the user (as the only viable target for Defense cards is the player character), but it actually results in a mis-expectation of interaction and breaks the existing mental-model established by playing Attack/Movement cards.
Step 1. On-Hover Defense Card
Step 2. Select Card and Apply Card to Target
Interaction-model for “playing a card” must be consistent across the three card-types (Attack, Movement, Defense).
Reducing the “number of clicks” it takes to perform a task, does not improve efficiency (nor usability) within the system. In this instance, it reduces the usability.
This is perhaps one of the most common misconceptions about UX design. It was disproven as a meaningful experience metric back in the 80’s by Don Norman and co. in his work on gulf of execution and gulf of evaluation. While the number of clicks can help us understand behavior, it is far from the most meaningful thing to evaluate an experience with an interface/application.
“I bought this game because I clicked 52 times during the session, while in this other game I clicked 80 times.”, said no one ever.
“A mental model is a theory of how a system works, what its signals mean, and what the outcomes of different user actions will be. To save time, most people rely on their past experiences to quickly build mental models for new systems. Designers can leverage this natural tendency by deliberately including design elements that help users build effective mental models.”
- Kathryn Whitenton with Nielson Norman Group on March 11, 2018
In treating Attack and Movement cards one way, while treating Defense cards another… Fights in Tight Spaces splits the user’s mental model of how the system works.
Improved/Repaired Interaction Model
Step 1: On-Hover Card
Step 2. Select Card
Step 3. Apply Card to Target
In a game where the primary mechanism is “playing cards”, errors while “playing cards” are sure to be frustrating and also game-changing. Within FITS, players apply about 3 cards per turn, an error on just one of those cards reduces the sense of strategy within the game, and at worst can cause an instant and entirely accidental loss, out of the user’s control. This would, of course, be extremely frustrating to a player and is likely to result in what the gamer community refers to as, “rage quitting”.
Card Design
The Fights in Tight Spaces cards are clearly stylish, but they lack key components and design elements to make them usable for players. Without sacrificing the FITS signature styling, through layout/design changes we can increase the ease of scanning and playability of the cards.
Industry standards and global card-design patterns
While there is certainly visual/style variance between cards, each card follows a very clear formula and pattern.
Card Name
Artwork
Card Description
FITS card design does NOT include a card description!
Card Name
Artwork
FITS has created a separate UI-element for the card description; splitting the area-of-focus and creating a mismatch between the real-world and the system.
The “cards” in deck-building games replicate actual-world playing cards. By detaching the card information from the card itself, the user is required to find information (pertaining solely to the selected card), by looking in multiple containers. It is very likely that a user will expect to find this information within the container of the card itself; given real-world affordances. One of the greatest benefits of creating a “card game” is that users already understand the core game-mechanisms and already understand how they will interact with the system!
Situating the card description within the card itself will better match user’s expectations, improving the ease of use.
The card description includes critical text for understanding the card’s effects. This is entirely necessary for players to strategize within the game. Which… as a strategy game, is entirely critical.
Information hierarchy of symbols can be improved for greater clarity, consistency and ease-of-use.
The example here demonstrates some of the variance we see between the ordering of symbols. While both of these cards are attack cards, the Attack-Power symbol is sometimes the second symbol, sometimes its somewhere else.
This can make scanning for specific cards difficult. User’s often need to scan for “an attack with at least 4 dmg”. Inconsistency in the content-rules, causes significant usability issues.
Current content rules do not provide sufficient, visible structure to the end-user. Only the first-symbol in the symbol-stack is consistent between cards.
Cost (Momentum)
ANY SYMBOL
ANY SYMBOL
ANY SYMBOL
Improved Information Hierarchy in Card Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultrices aliquam curabitur at sit. A, consectetur rhoncus tincidunt turpis elementum amet integer. Dolor facilisis volutpat amet, pretium dui diam mauris sed. Ornare at pharetra neque risus, felis augue viverra tincidunt quisque. Diam et bibendum commodo platea rhoncus eu. Id convallis scelerisque nullam viverra nunc. Sit massa gravida id suspendisse a at nunc. Integer bibendum nullam urna cursus arcu quisque.
Cost
Present on every card, it is given its own priority separate from the symbol-stack
Card-Type
(Attack, Movement, Defense)
Target Effect
Varies by card-type
(Attack= #dmg, Movement= #spaces, Defense= #block)Non-Target Effect
Any other special qualifier such as, “Attack from up to two spaces away”.
Visual variance is how industry leaders facilitate ease of scanning and comprehension of card information.
Using variance between the card design helps players easily scan the cards in their hands and know what is available to them. Without needing to read a full card-description, or decipher symbols, these next examples show us how changing formatting can be assistive in players scanning cards. Despite different layouts, the cards continue to have a strong sense of consistency and visual direction.
Hearthstone cards have two card-types:
Slay the Spire cards have two card-types:
*Notice how the layouts vary based on the card-type! This helps facilitate scanning while still maintaining consistency in the deck of cards.
Fights in Tight Spaces also organizes by card-type, but this is not reflected visually.
You probably wouldn’t be able to tell just by looking at them.
This becomes particularly problematic while players scan their hands or whenever they are presented with a large selection of options such as:
Improving ease-of-use through hierarchy and visual cues, such as color.
While the black/white/red theming keeps the artwork feeling unified and consistent; it also makes actually playing the game very difficult. The current design requires significant mental-load just to decipher the cards, which is a serious problem for a game that promises to be action-packed and momentum-based.
While this could be solved much like the above examples: by adjusting the containing-box for the artwork. It can also be solved, perhaps even less intensively, through the use of color.
Before
After
Update: Research In-Progress
Further research is being scoped, planned and scheduled to better evaluate the Fights in Tight Spaces user experience and gameplay interactions.
If you are a gamer. If you play strategy games, card games or deck-building games and would be interested in helping us learn more; please reach out directly to me using the form below.
Participants will be entered in a raffle to win a free copy of the Fights in Tight Spaces game!