Electronic Arts / Mobile Gaming
HUD Compass & Navigation
︎ UX Internship ︎Mobile Gaming UX/UI︎ Timeline [3 wks] ︎


︎ In this project, I explored new designs for a HUD navigation system. This task was assigned to me while I was working at Electronic Arts as a UX Design Intern. It was a challenging yet exciting project to tackle due to the complexities involved with user interfaces in FPS mobile games.



Problem To Solve


The Initial Environment


What is the simplest way to navigate through the map to collect all five items?

The goal of this game mode is to collect all five items on the map. There are five floating icons that show the positions of the items to help players navigate the map.



However, there are few problems–



The floating icons only give limited directional information without providing a sense of distance.

(Where are the other two pyramids?)

Further limitations occur when the items' locations are far off the screen, which eventually get the floating icons stuck on the sides of the screen, which can confuse players.

The floating icons attract players' attention to the edge of the screen. This is not the ideal experience as it is distracting, and what if there are more visual elements like regular FPS mobile games?


Constraints

    • My task was to solve this problem without using a clunky minimap or text/numbers.
    • The player should be able to see the item’s position at a glance - even the one behind him/herself. (And this game is the first-person perspective!)



    Behavior Sequence


    Before started, I created a list of information and the following behaviors that players would need to see in the HUD.







    Prototypes


    Iteration 1A
    Iteration 1B


    Iteration 2A
    Iteration 2B


    Iteration 3A



    Usability Testing


    I conducted user tests with more than 30 people in our studio for every iteration, asking the following questions:

    • How would you find the items using each HUD design?
    • Which version do you prefer and why?
    • Considering the positioning of your thumbs when playing, which version gives you the best visibility of the screen?
    • Any other opinions or suggestions you would like to add?

    I was able to extract two major defining keywords from my user tests.

    Functional and minimal.

    Players want the navigation HUD to have more information and more features while being as minimal of a design as possible.

    I had to find the perfect balance, a sweet spot between having
    a clean visual and being functional to solve these contradictions.




    Solution


    Avoiding Visual Clutter




    Replaced Bar Design v.1 with Bar Design v.2, which has a concave design so that players can still perceive it as being spherical without being distracted with busy grid lines. 
    ︎︎︎︎︎︎︎︎︎





    Consider The Player’s Mental Model


    The primary keyword from the 2nd round of user testing was “familiar.”

    I needed to create UIs that fits the player’s mental model for familiarity.

    Most FPS gamers are used to traditional UIs used in PC games. For example, a straight compass implies a limited field of view.



    Progressive Disclosure


    What if the terrain was elevated?

    Indicating the elevation of the items on the compass was essential. This does not only help players to find items, but also prevents players from misunderstanding it as an error.

    I solved this problem by progressively disclosing information. The arrow is visible only when players need it.



    Prototype


    I implemented the third navigation HUD on a more colorful environment to test whether its minimal design is still visible over a complex background.







    The Next Step


    My next step for this project is to develop the fourth prototype of diegetic UI based on the third round of user testing results.



    ︎Main︎
    AR Barbie Dreamhouse ︎ Travelnote ︎ EA FPS Mobile Game HUD ︎ AI+Voice Abracadabra ︎ 🔒 EA Mobile Game [︎]


    © Angelina Yeon Woo Shin ︎ About ︎ ︎