At Android Developer Summit 2022, Google shared a “Bigscreen Gallery” that provides layout guidance for tablet and foldable apps by category: social media and communication, media, productivity, shopping, and reading.
According to Google, these “canonical large-screen layouts are proven, versatile app layouts that provide the best user experience on large-screen devices” (tablets, foldables, and ChromeOS), as well as phones. They are based on Material Design guidance and responsive, as well as adaptive, in nature. The goal is to be “both aesthetic and functional”.
Canonical layouts are large-screen compositions that serve as starting points for design and implementation.
There are three layouts for organizing common elements of foldable tablets/apps:
- Detailed view of the list“Many layouts can be built based on the relationship between a list and a detail view. The relationship is established spatially by taking the left side of the screen to display a list and the right side to display the detail of the list. “
- Support panel: “Support panel layout is a method to extend a screen. Support panel layouts are different from list detail view layouts because primary and secondary focal points are considered equally important and integrated with each other. others simultaneously.
- Feed: “Feeds are a common layout for news and social content. Feeds use a grid composition to enable navigation and content discovery.”
- “On foldables, however, the stream can be designed as a more immersive view due to the larger screen size.”
Social media and communication applications
- Use detailed view of the list for:
- “List of conversations side by side with conversation details”
- “a compilation of videos that users can browse and select, play and pause, all on the same screen”
- Use backing board for:
- Tools: e.g. image editing
- comments
- Use to feed for:
- “a collage of messages in a flexible grid format. Use size and position to create groups or draw attention to important posts. »
- Differentiated experiences:
- table top: Google recommends supporting a hands-free table view on foldable devices where the screen is opened at a 90 degree angle
- drag drop: “drag and drop interactions without fumbling – within apps and, in multi-window mode, between apps.”
- picture in picture
- Multi window: “Allow users to search while writing, search while chatting, program while video calling”
Media
- Use to feed for:
- Media Discovery: “Create a rich media stream that allows users to discover new content, new artists, new recommendations and reviews”
- Media Browsing: “Create a media kiosk that allows users to browse, sort, filter, and select their favorite movies, music or TV shows from a vast media collection on a large production screen.”
- Use backing board for:
- Media+: “Enhance the media viewing or listening experience in the expanded large-screen space with a drop-down list of similar titles, published reviews, or additional works by the same artists or actors.”
- Immersive Mode: “Integrate a support panel for context, relevance, or reference while maintaining an immersive viewing experience.”
- Use detailed view of the list for:
- Easy Exploration: “Create an interactive media browser to make media searches productive and engaging. Allow users to browse while watching or listening.”
- Differentiated experiences:
- table top: “Place playback media above the fold, controls and additional content below, for a hands-free viewing or listening experience.”
- picture in picture
- Multi window: “Allow users to multitask with two side-by-side apps to browse a collection of movies while checking out casts and characters, or listen to music while researching covers or the latest music news and reviews.”
Productivity
- Use to feed for:
- Browse and filter files
- Use detailed view of the list for:
- Use backing board for:
- Tools and Settings
- Reviews and comments
- Differentiated experiences:
- Multi window: See Google Docs/Sheets/Slides as an example of opening multiple document instances
- drag drop: Faster sharing (as adopted by Workspace apps)
- table top“Design table layouts that allow users to let go of what they’re doing and focus on what’s important – a colleague’s presentation, a video conference – while having easy access to other other content and hands-free app controls.”
Purchases
- Use detailed view of the list for:
- Use to feed for:
- Use backing board for:
- Support the sale: “support features such as product filters for targeted searches or a checklist of product options for subtle upselling.”
- Differentiated experiences:
- Multi window: “allow shoppers to view products in one window while searching for product ratings, reviews, and reports in another”
- drag drop: “Shop quickly and easily with a drag-and-drop shopping cart. Capture potential purchases into a drag-and-drop wishlist.”
While reading
- Use immersive mode for:
- Full-Screen Readability: “Large screens in Immersive Mode maximize readability with long lines and plenty of white space for an eye-pleasing and comforting reading experience.”
- Use to feed for:
- Book Lists and Buys: “Allow book buyers to browse row by row through the latest editions in a large, multi-column grid that features top sellers or top bargains with significant size and position.”
- What’s inside: “Make book browsing informative and engaging by including synopses or text snippets for certain titles in multi-title book listings.”
- Use backing board for:
- Supplemental Content: “Complement your app’s main content with illuminating and uplifting information in a support panel.”
- Markup tools
- Differentiated experiences:
- Multi window: Book on one side and note taking on the other
- book posture: “Capture the experience of reading a real book with a two-page layout on a large foldable screen that opens like a hardcover book”.
- drag drop: For easier copying in notes/docs or messaging applications
FTC: We use revenue-generating automatic affiliate links. After.
Check out 9to5Google on YouTube for more info: