While the main focus of release 3.4 of Android Market client was improving performance and stability, we also continued refining and polishing the visuals of the different screens. Instead of taking a long hiatus, the philosophy is to release often, adding new features and polishing the existing ones in every single release. Release 3.4.4 (which is now at 100% rollout target) is not an exception, and today I want to talk about improving the layout and visuals of the details page for various screen sizes.

This is how the details page looked like in version 3.3.12 (Nexus S on left, Galaxy Nexus on right):

And this is how the details page looked like on a larger screen – a 10″ Xoom tablet in landscape mode:

First (and long overdue), we’ve moved the video preview into the screenshot gallery. It used to be in its own section below the fold, unbalanced and quite awkward. Here is its new place:

Note how the video thumbnail goes into the left margin, with the left sprocket strip aligned with the content in the sections below it.

Next it was time to take a much closer look at arranging the information for larger screen sizes. The existing layout and styling were functional, but not very pretty. The location of action buttons to the right of the thumbnail made the entire left column too wide for the rest of the content, while at the same time restricting the maximum width of the thumbnail itself. This also had another chain effect – due to large width of the left column, we only switched to two column layout at 1000dips, resulting in a very sparse (and quite ugly) single column layout on 10″ tablets in portrait mode.

Our designers had a good starting point for reimagining this layout. The addition of music support in version 3.3.12 added a new type of page – music artist:

Using this layout as a starting point, the new layout for the details page moves the item title and owner into the colored banner, and the action button(s) below the now larger thumbnail:

Tracing the alignment and contents of the screenshot section, you would notice a couple of things (in addition to hosting the video thumbnail). First, the bottom edge of this section is perfectly aligned with the bottom edge of the summary block in the left column, providing nice anchored balance of predominantly image-based content. Second, the screenshots extend into the right margin, taking full advantage of the available screen estate, while the rest of the sections in the right column are restricted to improve scannability and readability of predominantly text-based content.

As with the artist page, the right column scrolls below the colored banner. However, the left column has a new scroll-to-snap behavior “borrowed” from the purchase page. The content scrolls fully, until the rating stars reach the top edge. Then, the rest of the content continues scrolling while the rating stars and the action buttons snap to remain always visible:

While full vertical scrolling, as will be shown later, is particularly relevant for smaller device sizes, snapping the action buttons to always be visible reinforces their functional importance.

A more balanced two-column layout means that we can switch to it at an earlier point. Switching to two-column layout at 800dip means that a 10″ Xoom in portrait mode looks like this (with better layout for embedded cells coming in the next Market release):

The same layout structure is used for details pages of all media verticals. Here is the details page of a movie (note the new and consistent styling of the movie preview section, with darker background extending into the right margin, and the video preview thumbnail horizontally centered in a black box that is bottom aligned with the summary section in left column):

Here is the details page of a book (note that, as with movies, a more non-square thumbnail is right-aligned with the action buttons below it). Some items have very long titles, and in this case the title extends into the right margin and, if necessary, wraps to a second line.

And here is the details page of an album (note that, as with books, the right column is mainly text-based content that starts scrolling directly below the colored banner):

A more compact two-column layout scales down well to smaller 7″ screens. Here is the details page on an Acer Iconia A100 in landscape mode:

This highlights the importance of full scrolling left column – limiting the scrolling to the area below the summary section would have resulted in a very frustrating experience. What about portrait orientation for a device such as Acer Iconia A100 or HTC Flyer?

These are 7″ tablets with 1024*600 pixel screens at MDPI resolution. In landscape we have enough space to show the two-column layout (as mentioned above, we switch at 800 dips). There is not enough space to display this layout in portrait mode (at 600 dips), but we wanted to use the little extra width that we have – compared to the phone screens – to revisit the layout of the summary section. Here is how the details page looks like on a portrait Iconia A100:

Here you see the same visual language, from layout to styling to margins, paddings and gaps. This effectively means that we have three “buckets” of screen configurations for the details page:

• Default single column layout
• Single column layout with a different look for the summary section. This is enabled at 600dp.
• Two-column layout. This is enabled at 800dp.

The numbers are, effectively, switching points of the responsive mobile design, where the presentation of the content adapts to the current context. In addition, a more compact two-column layout has the margin point of 1000dp, with only item title and screenshot section extending into the right margin. The next entry will talk about the technical aspects of implementing the switching points in the current version of the Android Market client. In the meantime, I wanted to show another element of the details page, and how it fits into these different layouts. Here, once again, is the details page on devices with small form factor (Nexus S and Galaxy Nexus):

When the user initiates the download sequence, we show a dynamic section just below the summary to keep track of the download and install process:

Instead of making room for this dynamic section on larger form factors, we show it “embedded” in the summary section for the 600dp-800dp range:

Note how nicely it fits to the right of the thumbnail, as there is no need for a full-width progress bar that will look unnecessarily wide and unbalanced. And in two column layout, the dynamic download progress is shown in the summary section in the left column, replacing the action buttons as long as the download is running:

Stay tuned for more in the coming months as we continue refining and polishing the application across the entire gamut of supported devices.