Heuristic Compendium for UI Design
Considering the phenomenal rise of 'Battle Royale' games in recent years, I found myself designing lots of studies to measure the usability and functionality of these games especially for clients who were trying to break into the genre. One such client reached out to me looking for a more proactive approach to making design decisions during the development of the interface systems in their upcoming video game.
Defining the problem
I started to review the problem statement with my team and directed our focus to the term proactive. Most usability research is meant to offer a proactive approach to solving design problems by reducing the cost of having to make changes after a product has launched. In this case, we determined that the client wanted to avoid having to spend on user research during the development stages but offer the best possible user experience. After analyzing what influenced this need and what are the business goals of developing this product, we defined the problem as a lack of budget and strict deadlines is preventing the client from investing in future user research. The solution proposed was a report that would serve as a guideline for designing the game's user interfaces during the entire production cycle while ensuring user flow that matches the current successful battle royale games.
I looked at two possible methodologies to achieve this, compiling a functional requirements document through qualitative research or a heuristic analysis of the interface systems of successful battle royale games. After more brainstorming, we decided that a heuristic analysis would provide a quicker and cheaper alternative as a solid guideline. This analysis would then be compiled into a UI Compendium that would serve as a reference for the client's designers to use during development.
I had to determine the right products to analyze. For this, I narrowed down a list of several factors to the essentials and prioritized them. The factor with the highest priority was popularity followed by the growth rate, core audience, price, platform, core features, active users, realism, setting, and e-sports compatibility. This was used to compile a list of games and was them narrowed down to ensure coverage of all possible factors listed. There were four games chosen along with differentiating factors:
Overwatch - e-Sports compatibility and hardcore player base.
Battlefield 1 - Realism
Fortnite - Core audience age range and core features
Apex Legends - Growth rate and price
Next, I had to identify the most suitable heuristic principles to begin the analysis. After a brainstorming session with my team, where a whole bunch of heuristics was defined on the whiteboard, we filtered it down to the principles that were most valid for the interfaces within these products. For this part of the process, we referred to heuristic principles as proposed by Nielsen and Norman group and those from the book 'Universal Principles of Design'.
We created a grading rubric for the purpose of this evaluation. The rubric would help us measure how well an interface matches the specific design principle and also summarize a comparative analysis between the products. The constructs of measurement chosen were:
1. Intuitiveness - The reason for choosing this as a construct is to ensure that the client's interface systems can have a similar look and feel while ensuring instinctive user navigation without frustration. The principles categorized here included:
Hierarchy of Information
2. Aesthetics - This was chosen mainly to serve as a guideline for informing the design decisions made regarding aesthetic appeal and providing a mode for comparing those decisions with the ones found in these successful battle royale games. The principles included here were:
3. Consistency - Measuring this construct was challenging as it was difficult to establish a baseline for comparison, but this was crucial to help identify the similarities between interfaces. The principles identified here were:
4. Functionality - This was a construct that is definitely a staple in heuristic evaluations and influences the identification of key features and tasks. Principles analyzed under this were:
Flexibility and efficiency of use
To further strengthen the measurement of functionality for each interface, I decided to break down the critical and similar tasks using keystroke-level modeling
After a value was given based on the grading rubric, a comparative analysis was compiled. The grade for each construct was calculated by averaging the scores of each principle. These values were then used to determine which product better emulated the specific design principle and a description was given on how this principle influenced the interface design. Overall, Apex legends had the highest scores which could explain its rise in popularity.
The purpose of this analysis was to not only provide an understanding of the usage of various design principles in each product but also allow the client's design team to assess the differences in usage and efficiency
Keystroke - Level Model
The goal here was to determine the efficiency of each interface system without the need for user testing. Although nothing beats actual data from users, we can establish a baseline to compare time on task metrics utilizing this model. For the purpose of consistency, I chose the interface of each system present on the desktop versions of these games. I then proceeded to identify the critical tasks that were similar in each system from the main menu to the start of gameplay and in-game interfaces for changing weapons, issuing commands and accessing game settings. I used Fitt's law to determine the time required to move to a target distance. The sum of these values for each user flow was used to compare and determine the most efficient system in each case.
Execution Time (sec)
Press or release mouse
System response time
Typing n characters
--- (Real Time)
K x n
The execution times for the above operators were chosen based on estimated values for a player who is familiar with the game. The various tasks were then defined and the keystroke level actions were defined. Tasks were chosen based on critical actions that a user would perform in these types of battle royale games like adding friends, modifying inventory, adjusting gameplay settings, finding a match, training and accessing in-game menu systems. To determine the real-time value for the system to respond I executed the task five times and took an average of these times as W(t).
Overall, Apex Legends had shorter average times for most actions calculated although Fortnite scored higher in all social aspects. Overwatch had the fastest time of finding and playing a match which was 6.8 seconds. In the report, I highlighted each keystroke level action along with the user flow that made up these critical tasks. This was done to help the client understand the efficiency in relation to the number and type of actions that a user takes for each task as well as why these values were different for each game. I also provided enough documentation for the client to calculate the ideal task times for the interface systems they design during development.
Apex legend scored the best overall in all the heuristic principles that were analyzed. It makes the best use of design principles in its UI systems while keeping the user in mind when compared to the other games. This could possibly be one of the reasons that helped its rise in popularity. It was also the newest, so it did comparatively lack as many game modes which might have given it the advantage and the design team for Apex probably also conducted an extensive analysis of its competitors.
The report was met with a positive reception and the client was extremely pleased that my team and I were able to provide a comprehensive usability report without spending budget on user testing. The compendium is currently being used in the development of the new game. It was also arcchived and published internally for future reference. The first prototype that the client developed with reference to the report was met with a positive reception in terms of usability.