What Android tablet & foldable apps would like in Google’s perfect world [Gallery]

At the Android Developer Summit 2022, Google shared a “Large Screen Gallery” that provides layout guidance for tablet and foldables apps by category: Social media & communication, Media, Productivity, Shopping, and Reading.

According to Google, these “large screen canonical layouts are proven, versatile app layouts that provide an optimal 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 “aesthetic as well as functional.”

Canonical layouts are large screen compositions that serve as starting points for design and implementation. 

There are three layouts for organizing common tablet/foldable app elements:

• List-detail view: “Many layouts can be established based on the relationship of 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 show the list’s detail.”
• Supporting panel: “The supporting panel layout is a method for extending a screen. Supporting panel layouts are different from list-detail view layouts because the primary and secondary focal points are considered equally important and integral to each other, simultaneously.”
• Feed: “Feeds are a common layout for news and social content. Feeds use a grid composition to enable content browsing and discovery.”
  • “On foldables, however, the feed can be designed as a more immersive view because of the larger screen size.”

Social media & communication apps

• Use list-detail view 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 supporting panel for:
  • Tools: For example, image editing
  • Comments 
• Use feed for:
  • “a collage of posts in a flexible grid format. Use size and position to create groups or draw attention to prominent posts.”

• Differentiated experiences:
  • Tabletop: Google recommends supporting a hands-free Tabletop view on foldables where the screen is open at a 90-degree angle.
  • Drag and drop: “fumble-free drag-and-drop interactions—within apps and, in multi-window mode, between apps”
  • Picture-in-picture
  • Multi-window: “Enable users to research while writing, search while chatting, schedule while video calling.”

Media

• Use feed for:
  • Media discovery: “Create a rich media feed that enables users to discover new content, new artists, new recommendations and reviews.”
  • Media browsing: “Create a media kiosk that lets users browse, sort, filter, and select their favorite movies, music, or TV shows from an extensive media collection on a big-production display.”
• Use supporting panel for:
  • Media+: “Enhance the media viewing or listening experience in the expanded space of large screens with a scrolling list of similar titles, published reviews, or additional works by the same artists or actors.”
  • Immersive mode: “Embed a supporting panel for context, relevance, or reference while maintaining an immersive viewing experience.”
• Use list-detail view for:
  • Easy exploration: “Create an interactive media browser to make media searches productive and engaging. Enable users to browse while watching or listening.”

• Differentiated experiences:
  • Tabletop: “Place playback media above the fold, controls and supplementary content below, for a hands-free viewing or listening experience.”
  • Picture-in-picture
  • Multi-window: “Let users multitask with two apps side by side to browse a collection of movies while checking out casts and characters, or listen to music while searching for covers or the latest music news and reviews.”

Productivity

• Use feed for:
  • File browsing and filtering
• Use list-detail view for:
  • Items and overviews
• Use supporting panel 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 and drop: Faster sharing (as adopted by Workspace apps)
  • Tabletop: “Design tabletop layouts that enable users to drop what they’re doing and focus on what’s important—a colleague’s presentation, a video conference call—while still having easy access to other content and app controls hands free.”

Shopping

• Use list-detail view for:
  • Product specs
• Use feed for:
  • Catalogs and promotions
• Use supporting panel for:
  • Supporting the sale: “assistive features like product filters for targeted searches or a checklist of product options for a subtle upsell.”

• Differentiated experiences:
  • Multi-window: “enabling shoppers to view products in one window while researching product ratings, reviews, and reports in another”
  • Drag and drop: “Make purchasing quick and easy with a drag-and-drop shopping cart. Capture prospective purchases in a drag-and-drop wish list.”

Reading

• Use immersive mode for:
  • Full-screen readability: “Large screens in immersive mode optimize readability with long line lengths and plenty of white space for an eye-pleasing, eye-comforting reading experience.”
• Use feed for:
  • Booklists and buys: “Enable book buyers to scan row after row of the latest editions in a large multi-column grid that showcases best sellers or best bargains with prominent size and position.”
  • What’s inside: “Make book browsing informative and engaging by including synopses or text excerpts for select titles in multi-title book listings.”
• Use supporting panel for:
  • Complementary content: “Supplement your main app content with enlightening, edifying information in a supporting panel.”
  • Markup tools

• Differentiated experiences:
  • Multi-window: Book on one side and note-taking in the other
  • Book posture: “Capture the experience of reading a real book with a two-page layout on a large screen foldable open like a bound book.”
  • Drag and drop: For easier copying into note/document or messaging apps