Responsive Upscaling: 11 Ideas for Large-Screen E-Commerce Design

The responsive design revolution is truly over us (if it didn’t already happen!), and even though e-commerce sites haven’t picked up responsive design quite as aggressively as other industries, it’s becoming increasingly popular.

So far, most of the responsive design thinking has revolved around covering the range from mobile experience to the regular desktop experience. Yet little attention has been paid to the opportunities of expanding that range beyond the standard desktop site to create an experience optimized for modern large-scale monitors. Consider this:

1. Only 18% of the 50 leading US e-commerce sites that we benchmarked earlier this year optimize their design for large monitors (yet 94% of those sites have a design optimized for mobile devices).
2. Approximately three-quarters of e-commerce sales still happen on PCs and not mobile devices (1, 2, 3).
3. About one-third of those users will be visiting on a screen wider than 1350px (1, 2, 3). (Note: there’s of course a difference between screen and browser width – the actual number of users with a browser this wide will be lower. We recommend that you track browser sizes in your web statistics for the most accurate picture of how significant this segment is on your site.)

From these stats it should seem well worth the effort to craft an optimized experience for users with large screens. In fact, designing for big screens might turn out to be the next frontier of responsive e-commerce design.

The extra screen real estate afforded by large screens is typically left unused as vast seas of white, while the actual page content is crammed into a tight design optimized to fit a laptop screen. At a very minimum, content could be given a little more “breathing room” with some additional white space between elements on large-sized monitors.

Yet “responsive upscaling” can be taken much further to provide a superior experience for users on large monitors by using the extra space to show larger images, insert additional product columns, provide better page context, and give easy access to relevant site actions (filtering and sorting, “Add to Cart” buttons, etc).

In this article we’ll explore how responsive upscaling could work on e-commerce sites to craft a tailored experience for users with big screens. We’ll cover a core principle along with 11 ideas for upscaling different parts of the e-commerce experience to deal with various usability challenges observed during our e-commerce usability studies.

Core Principle of Responsive Upscaling: Same Content, Different Packaging

There’s fundamentally two ways to utilize the extra space: you can insert additional content on the page (i.e. content that’s only available at the large-scale resolutions), and you can present the existing page content in a different way (i.e. reposition elements, change their layout, scale things up, etc).

You’ll notice that all of the examples shown in this article illustrate existing page content being presented differently (sometimes dramatically so). This is because inserting entirely new page content that’s only available at the large-scale resolutions generally isn’t a good idea. There are of course exceptions, but generally speaking, if the content isn’t important enough to show in the regular desktop design, it most likely isn’t important enough to be shown on bigger screens either.

Unimportant content should never be added to the page just because there’s room for it in the design. And likewise, important content should never be left out just because screen real estate is limited (see our test findings in How Should Your Mobile and Desktop Sites Differ?, which documents this principle). The only time new page content should be inserted at large-scale resolutions is when that content somehow only makes sense on larger monitors but not regular screens.

So as a general rule, a warning bell should ring when new page content is being added at large-scale resolutions. A few times it is justified, but most often the content is either too unimportant to show at regular screens sizes and therefore ought to be excluded from the large-scale versions too, or the content is actually important and therefore should be included on the page regardless of screen size. Obviously the important content might need to be presented very differently depending on the available space, but it should be available in some shape or form in all versions of the design.

11 Ideas of Responsive Upscaling on an E-Commerce Site

Keeping with this principle of generally avoiding insertion of new page content and instead opting for presenting existing content differently, let’s take a look at some of the many different ways responsive upscaling might work on an e-commerce site.

All of the following examples have been illustrated by layering drawings onto screenshots of Wayfair.com. Now, Wayfair’s desktop design currently isn’t responsive at all (i.e. they don’t perform any page scaling or rearrangement based on browser size), neither “up” nor “down” – the page width stays fixed regardless of user’s viewport. It’s therefore a good case for illustrating how the different types of pages on an e-commerce site could be optimized for users with large screens.

In a “real” implementation of these examples, other page elements would likely re-align and possibly scale too (especially page elements like header and footer), but for the purposes of these basic illustrations, the elements are simply shifted around a little. The examples should be seen as inspiration, and some will obviously be more appropriate than others depending on your site’s product verticals and objectives.

1) Inlining a Sign-Up Overlay

Sign-up overlays can be made less obtrusive on larger screens by ditching the overlay and instead permanently placing the dialog alongside other “above-the-fold” content. This makes the sign-up dialog less intrusive because it doesn’t block out the whole page, yet still keeps the dialog highly visible as it is still shown immediately upon page load (since it’s placed above the fold).

Now, users uninterested in the sign-up will obviously find this dialog easier to ignore because they won’t have to actively dismiss it anymore. However, during our usability studies most of the test subjects simply close traditional overlay dialogs without ever reading their content, often referring to these overlays as “pop-ups” (see Avoid These 5 Types of E-Commerce Graphics). It’s a kind of “overlay blindness.” Those users may actually be more likely to read the sign-up dialog when it is instead placed inline above the page fold, because when seeing the element they won’t spend all their attention on finding a way to dismiss it.

2) Header & Footer Shortcuts

The most popular links from the header (e.g. account and order links for signed-in users) and footer (e.g. customer service and FAQ links) could be displayed as a box of links on the homepage when there’s room for them. Obviously the links should still be accessible in their original positions within the header menus and footer sections. On larger screens these shortcuts would simply also be available directly on the homepage.

This is a good example of the content still being available on the page but being displayed differently. This isn’t new page content, but rather existing page content being displayed differently, to optimize the large-screen user experience. In this particular case, the “link shortcuts” box should probably be styled in lightly faded colors to make it appear secondary to other page content.

3) Inlining Carousel Slides

Homepage carousels are fraught with usability issues and must be implemented very carefully to work at all (see the 8 carousel requirements observed during our test studies). On larger screens the carousel could of course simply scale up, making the shown slide all that much bigger. However, if the slides are square or even just reasonably tall, scaling up the carousel slide could actually end up pushing the rest of the page content outside the viewport on large monitors – decreasing homepage overview despite the increased viewport! A solution to this is turning the carousel slide into a multi-column view with two or three slides being shown at once.

If the total number of slides matches the number of columns, the UX-problematic interactive features of the carousel could even be hidden away in favor of a static multi-column layout of the slides. If there are more slides than columns, they will of course still need slide rotation features or a grid representation with rows.

4) Inlining Filled Cart

When users add an item to their cart, most e-commerce sites hope for one of two actions to follow: the user goes looking for more items to add to their cart, or they buy the item(s) in their cart. Having the user continue browsing for other products is obviously great for increasing order values, but it also means that buyer’s remorse is more likely to set in. Especially if the user is having hard time navigating the site while searching for additional products.

By inlining the regular drop-down cart (available from the page header), the user is given an overview of the items already in their cart – reminding the user of the great products they have already found (which they of course should most definitely purchase before leaving!). This provides the user with easy access to the checkout process and can thus help “close the sale.”

Furthermore, during our study on Homepage & Category navigation, users were frequently observed to re-open the cart simply to glance at the name of previously added items. For instance, re-opening the cart to see the model name of the camera they just added, when looking for a matching camera case. Having the cart permanently displayed will make it easier for users to find matching items, as it enables direct comparison between the product list currently being browsed and the items already in the cart.

5) Additional Product Columns

One of the most obvious ways of utilizing the extra screen real estate in grid-based product lists is to rearrange the products so they are displayed across additional columns. This can greatly increase the number of products on the user’s screen. In the above example, the user goes from being able to see 6 products in their viewport to seeing 10.

This approach can significantly optimize the product list view on large screens, but it should be done with some care. If an excessive number of product columns are shown, the grid will ultimately become more difficult to scan as users drown in information and their eyes start having trouble travelling from one line to the next (there’s a reason text has an optimal line length).

Therefore, make sure to restrict the number of columns products get distributed across to a maximum of 5-8 columns (depending on list item size and product vertical) to avoid users getting lost in a sea of information.

6) Larger Product List Images

The other incredibly obvious way to take advantage of the extra viewport space in product lists is to scale up each list item to fit the user’s screen. This can significantly increase the size of the product thumbnails, allowing the user to inspect the aesthetics of each product in much greater detail. This has palpable benefits in visually-driven product verticals as it maximizes the amount of visual information that can be conveyed about each product, making it much easier for the user to identify the products that are to their liking.

However, discretion is once again advised, as simply scaling up images will often result in a vast increase in list item height (assuming aspect ratios are maintained), which can actually cause the number of products on the user’s screen to be greatly reduced. Notice in the above illustration how the second row of columns has been pushed almost entirely out of view.

The trade-off when scaling images up in product lists is therefore an increase in the level of visual detail available about each product but at the cost of limiting the user’s overview of the available products, due to the lower number of products that will fit within the viewport.

7) Scaling and Re-Arranging Product Lists

By combining the two previous approaches – that is, by both adding additional columns and increasing the size of each list item – as the user’s screen widens, we get the best of both worlds. Visual information about each product is increased, yet overview is maintained because the product grid is rearranged to show an additional column whenever the list items reach a set height threshold.

This way list items can grow to show additional visual information about each product without ever growing so tall that it compromises the total number of products that fit on the user’s screen. Indeed, because of the additional columns, the number of products in the user’s viewport will increase. Thus both the total number of shown products and their individual resolution is improved.

8) Sticky Filters

Another way to utilize extra screen real estate is to permanently attach filtering and sorting tools to the user’s viewport via a “sticky” element. This provides the user with additional context about the products they’re currently seeing on their screen and gives them easy access to manipulate the criteria the product list is based on.

Fixated content effectively makes the screen real estate smaller for the actual page content. Therefore, whenever fixing content to the edges of the user’s viewport, it is essential to only do so on screen axes where there’s comfortable space to avoid the fixated content consuming too much of the available room across that axis. For instance, don’t fix content to the top or bottom of the user’s screen without applying a viewport height rule that checks sufficient space is available (e.g. by setting a height-based @media query).

However, with appropriate checks in place, the sticky filtering sidebar could possibly even be rearranged to occupy multiple “list item columns,” with the filtering tools divided into a two- or three-column layout. If a horizontal filtering toolbar is used, it may be attached to the top of the user’s screen if the viewport is sufficiently high, or it may be repositioned into a sidebar upon scroll if it’s the horizontal space that’s plentiful. Browser height may similarly be used to dynamically adjust truncation thresholds for filtering values, increasing the number of filtering values displayed before truncation sets in as the screen height goes up.

9) Recently Viewed Items

During testing, when the subjects landed on a product page and decided the product wasn’t for them after all, they would either continue browsing or leave the site. It’s obviously in the site’s interests to make it easy for the user to choose the former option. By displaying suggestions for alternative and supplementary products or a list of recently viewed items in the sidebar above the page fold, users will instantly see a potential “escape route” should they decide that this product they’re currently looking at isn’t for them.

Making it easy for users to browse from one product to the next can be essential to their product-finding abilities. Of course, product categories could similarly be promoted, although it is a good idea to be mindful of the user flow – is the user being sent back and forth between product lists and product pages, or can they go from one product to the next? Sometimes the former is attractive because it lends the user a more coherent overview of the site’s offerings, but obviously the back-and-forth flow also introduces a lot more friction. Therefore make sure the paths you suggest in “promoted” elements strike a sensible balance between category and product page destinations.

10) Sticky Product Page Summary

Product pages can be long. There’s product images, product descriptions, specifications, customer reviews, suggestions for alternative and supplementary products, product FAQs, etc. All of our usability studies have shown that more product information is virtually always better (so long as the content is of good quality; that is, useful, trustworthy, and reasonably accurate). Yet it also means that the user can sometimes end up very far away from the core context of the product (i.e. its title, price, any possible variations, and the “Buy” button). To provide permanent product context and always keep the “Buy” button within hand’s reach, the extra space available on large screens can be occupied by a “sticky product summary” that attaches itself to the edge of the viewport as the user scrolls down the page.

This sticky product summary can basically be a slightly modified version of the product’s list item design, or if attached to the horizontal axis of the user’s screen take on a more slender aesthetic. Either way, the intent is to provide the user with permanent product context enabling them to see product title, price, and any variations, even if the user is deep down in customer reviews – and of course always keep that “Add to Cart” button nearby so it’s easy to reach when the user is reading that rave review from another happy customer.

11) Sticky Order Summary & Customer Support

During checkout there will often be plenty of unused horizontal space because the pages tend to be very focused and because multi-column forms can cause major usability issues during checkout. On larger screens, this vast sea of white space can be appropriated by an order summary and customer support details. The order summary provides the user with a constant element throughout their checkout experience and serves as a constant reminder of the products they are only moments away from owning.

Meanwhile, customer support features can be moved up from their common footer position to make them readily available to the user should they run into trouble during the checkout process. If customer support being overrun is a concern, the details may be more selectively “promoted” based on the cart order value and how far into the checkout process the user is and whether they have run into validation errors.

Responsive Upscaling for E-Commerce

It’s striking how few e-commerce sites currently optimize their page design for large screens. Even the 18% of leading e-commerces that do offer an optimized large-screen experience have really only taken the first small steps in this direction. Given the large segment of users with big screens, responsive upscaling is an area ripe with potential.

When implementing responsive upscaling, it’s important to keep the core principle of “same content, different packaging” in mind. Either a piece of content is important to all users, or it’s not important enough to bother large-scale monitor users with either – just because a user has more space on their screen doesn’t mean they suddenly want a barrage of low-quality content. Instead, explore ways in which existing page content can be displayed differently to create a better user experience for users with big screens.

The 11 ideas illustrated in this article are all based on this principle of “same content, different packaging” – taking existing page content and scaling or repositioning it, sometimes significantly, other times subtly:

1. Inlining a Sign-Up Overlay
2. Header & Footer Shortcuts
3. Inlining Carousel Slides
4. Inlining Filled Cart
5. Additional Product Columns
6. Larger Product List Images
7. Scaling and Re-Arranging Product Lists
8. Sticky Filters
9. Recently Viewed Items
10. Sticky Product Page Summary
11. Sticky Order Summary & Customer Support

Do you have other ideas for optimizing e-commerce sites to larger monitors? Share them in the comments section. It’s time to optimize the e-commerce experience for big screens too.

This article has been republished at Smashing Magazine on Aug 25th 2015 with Baymard’s permission.