Vertical layout guideline
based on Mobile human factors
Duration
Appx. 2 months (Side hustle)
Role
1 UX designer
Tools
Desk research, Competitive analytics, wireframes, prototype
Background
Mobile interfaces must account for thumb zones and different visual attention tendencies compared to PC, which influences layout patterns in mobile games. These patterns are often reused across multiple screens for technical optimization and consistency of experience.
Shop revamp prompted a review of R6M’s overall patterns, revealing leftover wide-screen layouts (e.g., console, PC) that created discomfort in mobile interactions. Addressing these issues could significantly improve the user experience and help prevent misguided design decisions.
Challenges
-
A single layout pattern was applied transversely across multiple screens, requiring coordination with multiple stakeholders for any change
-
Some screens were not technically unified as separate (unity) prefabs, even though they followed the same pattern, requiring individual adjustments
-
Layouts needed to be flexible enough to handle future design requirements (e.g., Shop)
Feature Highlights
Vertical tabs
Replaced horizontal tab navigation with vertical tabs to improve navigation and support future content scalability
Classified into 2 states for clear signal
Provided mobile human factor–based guidelines for touch and visual ergonomics.
Referenced research based on various literatures, including:
-
Mobile design, Steven Hoober
-
Vision in Mobile
Conducted competitive analysis and distilled actionable takeaways
Compared titles from past 5 years with large user bases and revenue, regardless of genre, providing an opportunity to cross-check mobile market trends against R6M
Defined 3 high-dependency layout patterns
and provided in-game R6M examples demonstrating their application.
Outcomes
Navigation issues in the Shop were resolved after application, suggesting a positive impact.
-
Planned and progressively implemented vertical tab navigation across screens.