Posted by the Android staff
As the most important home streaming and digital content material service in Japan, U-NEXT is all the time in search of new methods to attach its customers to their favourite content material. With only a single utility, the platform hosts an in depth library of over 840,000 titles, starting from motion pictures, anime, and stay streams to manga, magazines, and e-books.
All the time in search of methods to enhance its UX for its increasing consumer base, U-NEXT not too long ago turned to the rising market of massive screens and foldables, which incorporates units like tablets and Chromebooks. Right here, U-NEXT engineers noticed a possibility to create a greater method to view content material by specializing in what makes these units particular. For instance, higher multi-window help on bigger screens might supply a extra visually wealthy UX, whereas an improved foldable UX would possibly higher mimic the expertise readers get with a standard paperback.
However some customers ran into bugs whereas utilizing the U-NEXT app with these bigger and foldable viewing codecs. As an example, the app would usually cover necessary buttons when customers opened U-NEXT on bigger screens, forcing them to look the web page for these navigation instruments.
To optimize a UX overhaul to help these codecs, the U-NEXT staff tackled the challenge in two phases: take away any present bugs, then add the options that its large-screen customers would profit from essentially the most.
|
Clearing out the bugs
To repair the visibility problem for necessary in-app navigation buttons, U-NEXT engineers used a ConstraintLayout to set constraint limitations. These limitations prevented UI components from being pushed off-screen whereas making certain they’re all the time oriented accurately, regardless of the display measurement.
What’s extra, U-NEXT’s utility didn’t all the time show correctly on bigger screens. For instance, pages displaying browsable video lists sometimes encompass a header and a curated listing of content material. These lists are presupposed to occupy a lot of the house on the web page. However on bigger screens, the headers occupied essentially the most on-screen actual property, making video content material more durable to navigate. The U-NEXT staff resolved this problem by proscribing the width of the header picture on bigger screens, giving the listing extra space and making looking simpler for large-screen customers.
When customers view books on the U-NEXT utility, they will faucet the display to disclose a horizontal, scrollable wheel that lets them rapidly and simply navigate their place within the textual content. However when customers tried to entry this navigation software on Chromebooks, it wouldn’t seem on the web page.
“Initially, we used SystemUiVisibility to find out whether or not a Chromebook was full-screen when a consumer tapped it,” stated Tomoya Miwa, principal engineer at U-NEXT. “If SystemUiVisibility detected it wasn’t full display, it’s presupposed to show the controller. Nevertheless, this listener isn’t known as on when SystemUiVisibility is modified on Chromebooks, so the controller couldn’t be displayed.”
This meant U-NEXT needed to change how they handle the visibility of the controller when SystemUiVisibility adjustments on Chromebooks. After this bug repair, the appliance would cover and show the controller on the identical time when the display is tapped on a Chromebook, resolving the problem for these customers.
The final bug U-NEXT devs tackled was one which quickly disrupted video when customers folded their system throughout viewing. Switching system orientation whereas viewing content material is meant to be seamless, however the automated deletion and recreation of the Exercise throughout orientation adjustments triggered movies to momentarily reduce out.
As a substitute of letting Android deal with these configuration adjustments routinely, U-NEXT builders modified the app to deal with them manually. Utilizing onConfigurationChanged(), the staff overrode the change and prevented the UI components from routinely being deleted and recreated, letting the app protect them and stop any viewing interruptions.
Making essentially the most with extra kind elements
As a part of its characteristic overhaul, U-NEXT changed the normal navigation bar with a navigation rail, which U-NEXT engineers anticipated would considerably enhance the consumer expertise. U-NEXT made this transformation in keeping with Android’s Do’s and Do not for Massive Screens presentation from its latest Android Developer Summit, which supplied greatest practices for builders optimizing for giant screens.
“Reachability is a crucial issue in terms of curating snug consumer experiences,” stated Tomoya. “With a standard, horizontal navigation bar, it makes it troublesome to succeed in the buttons within the center. With a navigation rail, it turns into a lot simpler to succeed in these buttons.”
 |
Subsequent, the staff enhanced help for two-page spreads when customers seen any e-books content material on massive screens. Apps sometimes show a single web page when units are oriented vertically on massive screens and foldables. However as a result of most massive screens and foldables supply loads of room for a double-page view, U-NEXT builders needed to make sure customers would all the time see a double-page unfold whether or not in portrait or panorama orientation—even when the system was barely folded.
The U-NEXT staff additionally included some smaller, quality-of-life updates to make the consumer expertise for giant screens and foldables even higher. These included enhancing the app’s compatibility with Compose by making certain the Navigation part was constant on each display measurement, including higher help for Google Play in-app billing on massive screens, and optimizing picture-in-picture viewing.
 |
Android help makes optimization straightforward
The U-NEXT staff was stunned by how straightforward it was to optimize its app for giant screens and foldable units. Because of Android’s developer assets, U-NEXT was capable of enhance content material viewing on its app, throughout units, whereas additionally minimizing effort and time.
“It’s not that troublesome,” stated Tomoya. “Introducing the navigation was comparatively straightforward, and foldable help usually is just not arduous so long as your app is suitable with primary display rotation.”
Since updating the U-NEXT app to higher help massive screens, pill installations have elevated by 1.5X. Moreover, the watch time from customers on massive display units jumped by greater than 10%.
Trying ahead, the U-NEXT staff plans to maintain increasing its app’s massive display capabilities by enhancing mouse and keyboard compatibility, introducing listing element view to enhance search performance, including larger help for tabletop mode, and implementing drag-and-drop options to make content material sharing simpler.
U-NEXT is worked up to see Android add extra assets to its massive and increasing listing of documentation, together with the not too long ago up to date Materials 3 library, which is able to additional assist help the rising variety of customers with massive display and foldable units.
Begin optimizing for giant screens right this moment
Extra persons are utilizing massive screens, foldables, and different up-and-coming kind elements. Be taught how one can higher help your customers on these units with examples from Android’s Massive Display Gallery.
