• Gilad Almosnino

Xbox Game Bar Globalization Walkthrough for Bi-Directional Languages


Windows 10 is delivered with a dozen or so inbox app's that cover everything from basic productivity to creativity. In this Globalization walkthrough we will cover the Microsoft Xbox Game Bar App.


About Globalization Walkthrough

Globalization walkthroughs examine international UX and functionality across a product or feature:

  • UX Design reviews provide an opportunity to ensure that international design requirements are taken into account and identify potential design gaps and limitations that may deteriorate the experience for international users.

  • Functionality Reviews examine feature functionality with a focus on international environment configurations and use cases. Test Localized UI Functionality and international text input. Test End to End integration & cross-platform consistency.

Recommended Reading


If you are unfamiliar with design requirements for Bidirectional languages (BIDI) please check out our recent article on UX Best Practices For Bi-Directional Languages.


Microsoft Windows 10 Xbox Game Bar App


The Windows 10 Xbox Game Bar App enables PC gamers to record game footage, take screenshots, stream live game footage, find other gamers or teams, text, and voice chat within Xbox Live.


Main Commanding Strip


The Main Commanding strip had a couple of issues, including the Spotify logo which was displayed in mirrored form. Developers should pay special attention to not mirror logos because this may have legal implications. The hamburger button should have been mirrored in order to better reflect the direction of the linked menu.




Notification Toast


The Xbox Game Bar has a notification toast that appears from the left side when launching App's or games that can be recorded. Unfortunately on Mirrored UI the toast notification is chopped in half making the content unreadable.





Capture and Stream


Capturing game footage is the core functionality of the App, but Microsoft has a number of issues here that make this feature unusable for BIDI languages.


Display Captures


The display capture UI presents video captures in mirrored form on the BIDI builds, We also found that the source video was recorded in mirrored form for legacy WIN32 Apps such as notepad.




Mirrored Source Video while capturing WIN32 App:




After using the Xbox Game Bar frequently we noticed that the system became unresponsive to mouse commanding, upon further investigation we found that the Xbox Game Bar creates a "dead click zone" which prevents users from selectin any UI elements that are placed within this particular area. Stopping the Game Bar process via the task manager will make the "dead click zone" disappear.




Audio

Media controls inherit layout and arrangement from audio video hardware such as VCR's, Cassette and Compact Disk players. Playback and other related buttons retain their original left to right (LTR) arrangement. In Addition, the playback progress bar advances from left to right (LTR) and if the design includes a horizontal sound volume slider it should also retain left to right layout.


We found that all the Xbox Game Bar sound volume controls were mirrored incorrectly, progressing from right to left.




Spotify Music Integration


Users who elect to connect to their Spotify account will find it difficult to read the signup UI as the Spotify logo is overlapping text. Once the service has been setup the Spotify player is displayed with mirrored track controls which are pointing at each other. In addition the track playback progress indicator is also mirrored incorrectly and should progress from left to right.




Performance Monitoring


Arabic users will find that the performance monitor has issues with native digit support most likely because of contextual digit substitution that is triggered by text directionality. In addition, Arabic requires that the percent symbol be positioned to the left of the numerals. For some unknown reason the GPU and CPU strings remain in English while the RAM string was localized. The recommendation is to keep these types of terms in English.




Social


The chat had English text aligned incorrectly (RTL), in many cases the best design option is to detect the content language and apply the most appropriate reading order and text alignment properties automatically.



Settings


Settings had some minor localization bugs which caused reading order issues in certain strings related to streaming quality. This was the results of automatic text alignment which requires certain localization tweaks for mixed direction strings.




How Microsoft can Improve

  • Educate and engage Design, Development, Program Management, and Quality teams on BIDI market requirements.

  • Ensure Development and Quality teams perform product testing on Arabic, Hebrew, or Pseudo Mirrored localized builds.

  • Incorporate content reviews focused on producing a more inclusive multicultural experience.

Looking to create a more inclusive multilingual experience?


Check out my recent articles on the topic of multilingual UX:


What's Next?


The World Ready Guides plan to engage with the world's leading software producers by publishing product reviews that focus on software globalization, our goal is to raise more awareness within the design community by providing practical real-world examples sourced out of today's most popular software products.


Feel free to reach out, via Email or www.WorldReadyGuides.com