Essential differences in design philosophy and requirements as felt through experience developing both game UI and web UI

Introduction

Among engineers and designers responsible for UI/UX design of web applications, "user-friendly UI" and "intuitive interface" have long been discussed as the most important themes. On the other hand, in the gaming field, UI itself strongly functions as part of the experience and brand, with design philosophy and implementation methods differing greatly from the web field.

In this article, from the perspective of someone with practical experience in both fields, I will compare "the differences in design principles, purposes, and interaction design between game UI and web UI" from a technical perspective, and organize the underlying philosophy and implementation know-how.

Target Audience and Background

This article is primarily intended for:

• Frontend engineers involved in web application development
• UI/UX designers, product managers
• Developers considering UI applications for game development or entertainment apps
• Technical professionals who want to fundamentally understand "why web UI and game UI designs are so different"

The author has experience in UI implementation and design for both games and web business applications, and writes based on actual field knowledge.

Web UI Design Principles and Requirements

Reproducibility, Standardization, and Accessibility

Web UI prioritizes "reproducibility," "standardization," and "accessibility" based on the premise of a wide range of users and usage environments.

The main design principles are as follows:

• Adoption of Common Design Patterns
  Actively introducing industry-standard UI frameworks and design systems to reduce user learning costs. Emphasis on "UI that looks familiar" and "comfortable operation feel."
  Examples: Material Design, Bootstrap, Ant Design, etc.
• Accessibility
  Compliance with keyboard operation, screen readers, visibility assurance, international standards such as WCAG (Web Content Accessibility Guidelines).
• Responsive and Universal Design
  Optimization for various devices and screen sizes including PC, smartphones, and tablets.
• Usability and Business Efficiency
  Error prevention, input assistance, clear feedback. Prioritizing business efficiency and universal clarity over UI uniqueness and presentation.

Game UI Design Principles and Requirements

Immersion, Uniqueness, and World-Building

In the gaming field, UI design is fundamentally based on "maximizing experience value" and "expressing brand and worldview."

• Unique UI Design
  UI itself functions as the "face" or "brand" of the title. Designs are rarely repurposed for other works, and are optimized for each title/series.
• Immersion and Interaction Presentation
  Maximizing immersion through multi-layered feedback including UI animation, sound, and vibration (haptics). Ensuring the quality of game experience is never compromised by adding movement or presentation even to seemingly "static" screens like loading or menus.
• Opposite Meaning of UI Renewal
  Major UI renewal or differentiation from previous works tends to be positively received as "brand renewal" or "new world-building." Changes to the UI itself become a new game experience or surprise.
• Flexibility in Interaction
  In smartphone games, implementations that might seem incorrect (such as "allowing transition by tapping anywhere on the screen, not just the OK button") are adopted to prioritize tempo and comfort. (Details will be discussed later.)

Fundamental Differences in Design Philosophy

The differences between Web UI and Game UI can be summarized in the following table:

"Movement" in UI and Feedback Settings

In Web UI design, animations and movements are typically kept to a minimum. For example, animations are introduced only to clearly indicate state changes such as "processing" or "completed." This is to minimize the impact on performance and usability, as "excessive movement" is often considered to impede the user experience.

In contrast, "movement" and "presentation" play an important role as part of the experience in Game UI. Even on static screens such as menu screens and loading indicators, some animation or visual movement is always included to ensure that players remain connected to the world. Such presentations go beyond merely avoiding freezes and are intended to "keep users engaged" and "maintain immersion."

Interaction Design and Information Presentation

In Web UI, there is an emphasis on design that utilizes components established as "formats" such as forms and dialogs, and minimizes input and selection errors. For example, clear options such as "OK" and "Cancel" are presented to prevent unintended operations by users. Implementations that allow clicking anywhere on the screen to navigate are generally avoided, as they can lead to unintended screen transitions or operational errors.

On the other hand, in Game UI, especially for smartphones, designs that allow screen transitions by tapping areas other than the "OK" button are common, due to physical device constraints and UX considerations. This is intended to reduce the complexity of touch operations and prioritize play tempo and comfort.

Reception of Renewal

In the world of Web UI, a major UI renewal is a decision that comes with high costs and risks. With the premise that existing users are accustomed to the operation, maintaining "not getting lost" despite design changes is considered the greatest value. Therefore, "familiar UI" and "standard design patterns" that can be used intuitively even by first-time users are actively adopted to minimize learning costs.

In contrast, in Game UI, the UI renewal itself has the meaning of "providing a new game experience" or "refreshing the worldview and brand". In Game UI, the learning process of mastering a completely renewed UI and the surprises that arise during that process tend to be positively evaluated as part of the game experience.

How Can Knowledge from Both Fields Be Applied?

Application of Game-like Thinking to Web UI

In recent years, even in the realm of web applications and SaaS, the importance of expressing the brand value and unique experience of the service itself through UI has increased beyond mere information provision and business efficiency.

• Visuals and animations that convey the worldview and uniqueness of the product
• Unique interactions and transition effects that impress the "character" of the service
• Designing the entire UI to give users an "experience that can only be enjoyed here"

Such "UI experience as a brand" has long been a strength of Game UI, and is gaining attention in the web field as a means of creating memorable service designs and fan conversion.

On the other hand, in situations where business efficiency and universality are the top priorities, balance between uniqueness and usability is extremely important. Even when incorporating presentation and uniqueness, it is essential to design the optimal UI experience after clearly defining the purpose, target, and brand strategy of the service.

Utilization of Web-like Design Philosophy in Game UI

In recent years, the gaming industry has been rapidly adapting to various devices and platforms. In modern times where cross-platform support is becoming the norm for PC, smartphones, home game consoles, and even web browsers and cloud gaming, UI design that is limited to "specific devices" is no longer sufficient.

Against this background, know-how on usability and accessibility accumulated in the web industry for many years, standard flow design and guide methods are being actively introduced to Game UI.

• Seamless experience continuation across multiple devices
• Accessibility features such as color vision support, text size changes, and voice guidance

These are essential requirements for accommodating diverse user groups and devices and achieving "universal usability" that was not present in traditional Game UI. As game experiences further diversify and become more mainstream, actively leveraging design philosophies and best practices from the web field will be key to competitive UI design.

UI Design Trends and Future Outlook

Web UI and Game UI are fields where the correct answers differ greatly due to their purposes and user experience approaches. However, in recent years, knowledge and best practices gained from both web and game domains are developing while crossing over. In the future, it is expected that balancing "immersion" and "fun" with "universal usability" will be increasingly demanded.

• Designing "UI as a brand" for web services with strong entertainment elements
• Ensuring standard operability, accessibility, and cross-device consistency in Game UI to provide a comfortable experience to a wider range of users

Such hybrid UI design will be an important theme going forward.

Conclusion

In this article, I have explained the differences in design principles and implementation methods between Web UI and Game UI based on field experience. UI is not just a means of operation, but an important element that determines the experiential value of services and products. I believe that by mutually referencing the philosophies and know-how of both fields, we can design richer user experiences.