Mobile Game
Get ready for your
space mission
THE STARTING POINT
For this project, I joined the development team to offer support with the main mission screen for a mobile game with a space setting. My main objectives were to create a working information architecture that prioritized the most relevant functionalities and create a mapping that could be tested and iterated, so the UI artists could take over after that and proceed with creating appealing visuals. The mission screen posed quite some challenges in the first place, because as envisioned by game design, a multitude of information should be provided to the players, all within a small screen of a mobile device.
USER EXPECTATIONS
I compared the development strategy and the design documents with the project's main persona and tried to identify main touchpoints between the product and our users. In order to emphasize, which steps were crucial for a good user experience, I created a user journey / experience map, so the developers could focus on the most decisive aspects.
Experience map and user touchpoints with the game
From this experience map it became clear that the main area, where designers could create the most positive impact on the user's experience at the current point of process, was the "Decision"-part, directly linked to the mission screen. Further user research and a bunch of semi-structured interviews also communicated the most expected features and possibilities within this interaction step, among our future players.
Results from interviewing 18 focus groups participants
For finding out more (also about the expected art style and game design features), we set up two sessions of focus groups with 9 participants, each. Afterwards, I interviewed them and mainly focused on their most desired features, they would not want to miss on such an overview panel. The results were pretty clear and I was able to identify three main aspects that were supposed to be part of the upcoming mission screen.
1. Overview about the available missions and the benefits/ resources they would gain when completing such a mission. This was considered as the main drive for any further decisions.
2. Overview about available characters that could become crew members for the selected mission, as well as their skills. Since those were a significant factor that determined the success or failure of a mission, those skills had to be visualized prominently, so users could easily compare them.
3. Crafting and improving ships, equipment and skills was also considered as an mandatory feature for such a game, however, for this, a separate screen within the game was planned.
THE CHALLENGE
The focus groups also provided some valuable insight on the expected style for such a game. Since the setting was futuristic and in space, several participants expressed the wish to have that reflected in the interfaces as well.
If I play a game with spaceships,
I expect the controls to be cool and futuristic as well... nothing boring like plain lists.
[Quote from focus groups]
But how to convey so many information about characters, missions, skills, resources and all of that with additional information that they also regarded as crucial in a stylish way, especially on the small screen of a mobile phone. Especially, when not all areas of the screen could be used, due to overlapping with users' hands and fingers, when holding and navigating with the device?
Various scribbles on how to approach the main mapping
My fist take on this, was to look into the possibility of a carousel menu. It seemed as a perfect solution for touch devices, duo to its seamless and intuitive navigation. Also, it was definitely more fancy than those lists. The idea looked quite promising, I was however not convinced, if that would actually work on the small mobile device screen as well as it looked on the computer screen in the first place and present all the relevant information in an un-cluttered way.
BACK TO STEP ONE
Since I wasn't really convinced by the usability of the carousel and of course, also could not settle for the first idea, I went a few steps back and started to create various mappings, all with the same, very basic information, but with different approaches.
The five created mappings covered several approaches on how to structure the required information, ranging from the fancy carousel to plain list menus. Throughout the process, I had to remind myself that fancy does not equal functional and even though the participants, I interviewed stated, they want something cool looking, they surely wanted something with a good usability even more. That was the reason, I did not leave out the regular lists as well, since they provided good overview and people are generally pretty familiar with that way of showing information.
LOW/MID FIDELITY PROTOTYPING
Next, was to turn my mappings into interactive prototypes that could be tested and evaluated in the next step. As the setting of the game was quite fancy itself, with space and all the futuristic icons and visuals, I decided to enrich my low-fidelity prototype a bit and add some place-holder visuals. The main reason for me to do so, was the concern that even though the information was pretty clear in the b/w prototype, this might change, once colors and forms get added, making the information suddenly way more cluttered and decrease the conclusiveness of the overall layout. So, in order to get more accurate results already at this step, I added some bold colors and visuals to the prototypes at this stage.
Together with a UI programmer, we coded the main functionalities of this mission screen and exported it to a mobile device, so the upcoming user tests could happen with the correct restrictions and technical requirements.
LET'S PLAY!
For the upcoming testing, I wrote a user testing manual that would help us stick to the same requirements and information provided to the participants. The protocol described the upcoming test and introduced the five variations of the mission screen in the low-fidelity version. It also included a grading for the participants, so they could grade their experience with each prototype after the play session.
For this user testing I had 22 participants
Overview about the questions and the assignment rundown
1. Access the Mission screen by pressing the mission button.
2. Now, please select the mission of your choice.
3. Please assign crew members that will ensure the most promising
outcome of your mission.
4. Start the mission.
Post-Assignment Questions that participants graded from 1-5
1. How intuitive and natural did the screw selection appear to you?
2. Did you have enough overview about the availability of the crew members?
3. Did you have enough information about the skills / stats / resources?
4. Did you have enough information about the effects of the assigned crew member in regard of the overall mission success?
5. How understandable, clear and accessible was the relevant information?
I gathered 22 participants and asked them to test our prototypes. Overall, the testing session took around 15 min each, because the assignment was quite straight-forward and the focus was set clearly on the mapping of the information presented on the screen.
EVALUATION AND RESULTS
Interestingly, the fancy carousel-prototype did not make it to the top favorites. The participants liked it in the beginning, but after interacting with it for some time, they stated to feel bored and even annoyed by the functionality and the need to constantly rotating for available information.
Ultimately, the best results could be found among the list-prototypes, either the one with a regular, plain, horizontal list or the one with the fancier, rounded vertical list.
The two most preferred mappings
MAIN FINDINGS
As mentioned above, two of the prototypes were the clear favorites among the participants. Further investigation have shown that the results were mainly based on the way, participants held the smartphone and navigated through the interfaces.
Key-Learnings
1. Results depend on the holding-style of the smartphone.
2. We cannot do anything about that.
3. Users holding the smartphone in both hands, usually used their thumbs for navigation. They preferred the vertical, rounded list, because it ergonomically supported the natural movement of their thumb.
4. Users holding the smartphone in one hand and navigating with the other hand, mostly preferred the regular, horizontal list.
The rounded list looks like a control element from a space ship, that's cool.
It also is so natural and intuitive to navigate with my thumb.
[Quote from user testing]
NEXT STEPS
While the rounded, vertical list seemed like the perfect compromise between a very natural element with good usability and the fancy unusual visual demand, the players initially asked for, the development team decided to go for the regular, horizontal list in the end, to safe coding and testing time. Also, it worked well for both, right- and left-handed users and did not need further adjustments here.
Therefore, my final task in this project was to provide a list of recommendations and suggestions to the designers, on how to optimally create such a menu and where they should pay the most attention, in terms of usability.
I presented all the results and the recommendations to the development team and handed over the UX documents to the designers and UI artists. After this, I continued supervising the project until the end of pre-production, offering UX coaching on demand and supporting the team with further prototyping and iterating of their designs.