Mobile layout guideline
based on Human ergonomic
Duration
Appx. 2 months
Role
1 UX designer (Side hustle)
Tools
Figma, Miro
The problems
Limited scalability of transversal layouts impacting new feature design
To address issues in Shop revamp, it needed to resolve the lack of scalability in transversal layouts.
These lack of scalability will also limit future design decisions.
Inconsistent layouts across similar screens
Inconsistencies in transversal layout patterns resulted in fragmented user interaction experiences and unnecessary technical overhead.
Similar layouts were not technically unified as (Unity) prefabs, requiring individual adjustments.
Layouts that were uncomfortable to use on mobile
While investigating Shop, mobile usability issues were identified such as long distances between touch points and info being hidden behind multiple interactions.
The solution
Define a scalable, mobile-friendly transversal layout
Discover & Define
Desk research - Human ergonomics
Takeaways
✔️ Thumb-friendly zones were prioritized, especially for horizontal layouts, with primary interactions placed within the right-hand thumb reach.
✔️ Related touch elements were grouped closely together, minimizing touch travel distance.
✔️ Compared to PC, mobile screens are smaller and scanned at a glance, so non-interactive visual elements are prioritized in the center of the screen.
Competitive benchmarking
Takeaways
✔️ Related elements are placed close together, making interactions efficient.
✔️ Interaction elements are clustered on the left or right, with visual info centered, reflecting mobile ergonomics.
✔️ Interactive elements are prioritized within the right-thumb area.
➕ While screen simplicity is important, the amount of info required on a small display often resulted in visual complexity.
Solution #1
Provide the layout guideline template
Based on research, I created a visual template to evaluate whether a layout is mobile-friendly. It can be used to assess mobile usability across existing layouts, and guide new layout directions. Because it is designed to be generic, it can be applied not only to mobile games but also to landscape-oriented digital products.
For R6M, it was applied to Shop requiring a revamp for improvement.
Solution #2
Set the vertical tab as primary navigation
Instead of horizontal tabs alternating between both thumb zones, I proposed vertical tabs operable with a single hand. As primary navigation in menus, tabs are closely tied to players’ usage habits. By keeping it in a consistent position within a single thumb zone, players can navigate the product more smoothly. It also supports scrolling, allowing to add more sub-menus and improving scalability.
Solution #3
Define 3 high-dependency layout patterns
I identified 3 most frequently used layout patterns across menus and applied the visualization template to define mobile-friendly layout.
-
Unify layouts within (Unity) prefabs and technical aspect for efficient development
-
Polish layouts to ensure a consistent, mobile-friendly experience
To develop in the future
As this is a transversal topic, any change requires coordination with multiple stakeholders, so it was difficult to execute at once. Considering resources and priorities, I proposed approaches
-
Continue transitioning remaining screens to vertical tab navigation. Most screens are already updated, with Inbox remaining.
-
Plan and progressively unify (unity) prefabs of similar layout patterns
-
Further improve layouts to deliver a consistent, mobile-friendly experience. Especially for features which has long journey to interact like "Operator", layout improvements can reduce navigation friction