Posted by the Android crew
As the most important home streaming and digital content material service in Japan, U-NEXT is at all times on the lookout for new methods to attach its customers to their favourite content material. With only a single software, the platform hosts an intensive library of over 840,000 titles, starting from motion pictures, anime, and reside streams to manga, magazines, and e-books.
At all times on the lookout for methods to enhance its UX for its increasing person base, U-NEXT just lately turned to the rising market of massive screens and foldables, which incorporates gadgets like tablets and Chromebooks. Right here, U-NEXT engineers noticed a chance to create a greater strategy to view content material by specializing in what makes these gadgets particular. For instance, higher multi-window help on bigger screens may supply a extra visually wealthy UX, whereas an improved foldable UX may 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 conceal 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 crew tackled the undertaking in two phases: take away any current bugs, then add the options that its large-screen customers would profit from probably the most.
|
Clearing out the bugs
To repair the visibility situation for necessary in-app navigation buttons, U-NEXT engineers used a ConstraintLayout to set constraint boundaries. These boundaries prevented UI parts from being pushed off-screen whereas guaranteeing they’re at all times oriented accurately, regardless of the display measurement.
What’s extra, U-NEXT’s software didn’t at all times show correctly on bigger screens. For instance, pages displaying browsable video lists usually encompass a header and a curated listing of content material. These lists are speculated to occupy a lot of the house on the web page. However on bigger screens, the headers occupied probably the most on-screen actual property, making video content material tougher to navigate. The U-NEXT crew resolved this situation 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 software, they’ll faucet the display to disclose a horizontal, scrollable wheel that lets them shortly and simply navigate their place within the textual content. However when customers tried to entry this navigation instrument 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 person tapped it,” stated Tomoya Miwa, principal engineer at U-NEXT. “If SystemUiVisibility detected it wasn’t full display, it’s speculated to show the controller. Nonetheless, 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 modifications on Chromebooks. After this bug repair, the applying would conceal and show the controller on the identical time when the display is tapped on a Chromebook, resolving the difficulty for these customers.
The final bug U-NEXT devs tackled was one which briefly disrupted video when customers folded their system throughout viewing. Switching system orientation whereas viewing content material is meant to be seamless, however the computerized deletion and recreation of the Exercise throughout orientation modifications precipitated movies to momentarily reduce out.
As a substitute of letting Android deal with these configuration modifications robotically, U-NEXT builders modified the app to deal with them manually. Utilizing onConfigurationChanged(), the crew overrode the change and prevented the UI parts from robotically being deleted and recreated, letting the app protect them and forestall any viewing interruptions.
Making probably the most with extra type components
As a part of its characteristic overhaul, U-NEXT changed the standard navigation bar with a navigation rail, which U-NEXT engineers anticipated would considerably enhance the person expertise. U-NEXT made this variation according to 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 vital issue relating to curating snug person 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 crew enhanced help for two-page spreads when customers considered any e-books content material on massive screens. Apps usually show a single web page when gadgets 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 at all times see a double-page unfold whether or not in portrait or panorama orientation—even when the system was barely folded.
The U-NEXT crew additionally included some smaller, quality-of-life updates to make the person expertise for giant screens and foldables even higher. These included enhancing the app’s compatibility with Compose by guaranteeing the Navigation element 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 crew was stunned by how straightforward it was to optimize its app for giant screens and foldable gadgets. Because of Android’s developer assets, U-NEXT was capable of enhance content material viewing on its app, throughout gadgets, whereas additionally minimizing effort and time.
“It’s not that troublesome,” stated Tomoya. “Introducing the navigation was comparatively straightforward, and foldable help on the whole will not be arduous so long as your app is appropriate with fundamental 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 gadgets jumped by greater than 10%.
Wanting ahead, the U-NEXT crew 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 better help for tabletop mode, and implementing drag-and-drop options to make content material sharing simpler.
U-NEXT is happy to see Android add extra assets to its massive and increasing listing of documentation, together with the just lately up to date Materials 3 library, which can additional assist help the rising variety of customers with massive display and foldable gadgets.
Begin optimizing for giant screens immediately
Extra persons are utilizing massive screens, foldables, and different up-and-coming type components. Be taught how one can higher help your customers on these gadgets with examples from Android’s Massive Display Gallery.
