Home Designing Websites Adaptive scaling: designing online stores for large screens

Adaptive scaling: designing online stores for large screens

by admin

Here is a translation of the article " Responsive Upscaling: Large-Screen E-Commerce Design " by Christian Holst.

The adaptive design revolution is just around the corner (if it hasn’t already happened!), and even though online retailers have not taken to responsive design as aggressively as other industries, it’s still becoming popular.

For a long time now, most thinking about adaptive design has not gone beyond designing the transition between mobile and desktop interfaces. It’s time to pay a little attention to the possibilities of extending those boundaries beyond the standard desktop screen to create an interface consistent with today’s wide screens. Take a look at this :

  1. Only 18% from America’s top 50 online retailers that we tested earlier this year have adapted their designs for large screens (while 94% of those sites have designs adapted for mobile devices).
  2. Almost three quarters electronic sales are still done on PCs, not mobile devices (see here , here and here ).
  3. About one-third of these users come from screens wider than 1350 pixels (see here , here and here ). (Note : Of course, there is a difference between the width of the screen and the width of the browser window – the actual number of users with a browser of this width will be lower. We recommend that you Monitor the size of the browser window in your web stats for a more complete picture of how significant this segment is to your site.

Based on these statistics, we can say that designing A special interface for users with large screens is worth the effort. In fact, designing for large screens could be the next trend in adaptive online store design.
In this article, we will explore how online store designers can use adaptive scaling to design an interface specifically for big-screen users. We’ll explore one basic principle, and with it 11 ideas on how to adapt different elements of an online store’s interface. These ideas can be used to solve some of the interaction problems we observed in our research. In the original this article was published by the Baymard Institute.
Adaptive scaling: designing online stores for large screens

Many commercial sites don’t use blank space on large screens. Result : often a lot of white space surrounds fairly truncated search results. ( Enlarge image )
Note the white space surrounding the rather truncated IKEA search results. In the course of our examination. list of items in the online store. it became clear that in a niche of products chosen for aesthetic characteristics, like home decor, users need large previews in order to properly evaluate the product. Taking away free space by using it is one of many "adaptive scaling" ideas for online stores to consider.
The empty space, which appeared mostly due to the large screen, is usually remains unused and is displayed as a wide sea of white if the original page content is cut down to fit the narrow design focused on the laptop screen. At a minimum, there should be a little more air in the content, there should be some empty space left between elements on large-diagonal monitors.
Also, you can go much further in "adaptive scaling", improving the interface users with a large screen. You can use empty space to enlarge images, add product columns, better show page context, and simplify access to contextual operations (filter, sorting, "Add to cart, " etc.).

The basic principle of adaptive scaling : same content, different presentation

There is two main ways to get rid of empty space: place additional content on the page (i.e. content that is only displayed at high resolutions)and show the current content in a different way (i.e. move elements, change their format, enlarge them, etc.).
You will notice that all the examples in this article illustrate how the current content can be shown differently (sometimes drastically differently). The reason is that adding entirely new content that will only show up on wide resolutions is, in most cases, not a good idea. Of course, there are exceptions, but in general, if the content is not important enough to show in "standard" desktop form, then it probably is not important enough to show on larger screens either.
Adaptive scaling: designing online stores for large screens

Show the same content on all devices, but "package" it differently. ( Zoom in )
Availability of a large screen does not mean that the user suddenly wants a cropped page that is difficult to view. Similarly, having a smaller screen does not mean , that the user won’t need some information that has been seen on the site before. Consequently, show the same content, but "package" it differently, so that it is suitable for display on the big screen.
Important content should never be added to a page simply because there is room for it on the page. Likewise, important content should not be cut just because there is limited screen space (see test results " How should your mobile and desktop sites be different? " which describes this principle). The only case where new content can be added on the big screen is if that content only makes sense on the big screen and is not needed on the regular screen.
Universal rule : the emergence of new content at a wide resolution is red flag In some cases this may be justified, but mostly the content will either be too unimportant to show on a standard screen, in which case it should be excluded from the enhanced version, or it will be really important, in which case it should be shown regardless of screen size. Clearly, important content can be presented differently in the available space, but that content must be present in some form in all versions of the design.

Ideas for adaptive scaling of online stores

Keeping in mind the rule of unchanging content described above, consider some of the many ways of adaptive scaling, that can work for online stores.
All of the following examples will be shown with sketches overlaid on screenshots of Wayfair.com. Currently, the desktop design of Wayfair.com does not adapt at all (that is, the pages are not scaled and the layout does not rebuild when the browser window is resized), neither to the right nor to the left – the page width remains fixed regardless of the size of the visible screen area. However, this is a good example to show how different types of online store pages can be adapted to larger screens.
In a real-world setting, other elements on the page are likely to be rearranged and possibly scaled (especially elements like the header and footer). But for our schematic illustrations, it will be enough to move them around a bit. These examples serve to inspiration Some will seem more appropriate than others, depending on your niche and field.

Built-in authorization window

The authorization window can be made less intrusive on the big screen by abandoning the modal display and fixing the form in the visible part of the page instead. Then the form won’t be so conspicuous, as it will no longer block the entire page. At the same time, it will remain visible because it will appear at the top of the page immediately after loading (on top of the main layer).
Adaptive scaling: designing online stores for large screens

The window with the authorization form is embedded as column content on top of the main layer. ( Expand image )
Thus, users who do not want to be authorized will easier to ignore form, because it no longer needs to be turned off on purpose. At the same time, in our usability studies, most respondents simply closed the standard dialog boxes without even reading them, often classifying them as "popups" (see article " Avoid these 5 types of graphics for online stores "). It’s kind of like selective blindness. These people may have more desire to look at the authorization form if it’s not displayed modally, but inside the main column on top of the content. By looking at the element, they won’t have to spend all their attention trying to find how to turn it off.

Quick links from the header and footer

The most popular links from the header (e.g., Personal profile or checkout for authorized users) and the basement (service and questions) can be shown in a block on the homepage, if there is room. Of course, the links should remain accessible in their original place in the header menu and basement sections. On the big screen, these links can just duplicate On the home page.
Adaptive scaling: designing online stores for large screens

Popular header and footer links are displayed as quick links in a block on the homepage. ( Enlarge image )
This is a good example of content that remains available on the page, but is displayed differently. This is not new content, it’s just that the current content has started to be displayed differently, specifically for users with larger screens. Specifically in this example, the quick links should be slightly muted, so as not to draw attention away from the main content.

Built-in carousel slider

The carousel on the home page has many interface problems, and should always be implemented with great care (see eight carousel requirements , derived from our research).On a large screen, of course, the carousel can simply be enlarged, thereby increasing the entire functionality of the slide show. However, if the slides are square or even vertically oriented, their enlarged carousel can omit the rest of the content beyond the boundary of the visible area – will be less visible on the home page, even though the visible area has become larger! The solution is to replace the carousel with a row of two or three slides in a row that are displayed simultaneously.
Adaptive scaling: designing online stores for large screens

The slides in the carousel have been replaced by a series of regular slides. ( Zoom in )
If the total number of slides corresponds to the number of columns, the problems with functional features carousel can be avoided by using a static layout of slides in multiple columns. If there are more slides than columns, you will of course have to leave the carousel or add new rows.

Built-in shopping cart

After a user adds an item to the shopping cart, most online store owners hope for one of two things to happen: the user goes looking for other items to add to the cart, or places an order for the items in the cart. If the user searches for other products, this is certainly good for sales. On the other hand, it means that the user starts to regret about his choice, especially if he has spent a lot of time researching the site as he searched for the added product.
Adaptive scaling: designing online stores for large screens

The standard slamming cart becomes inline when the user adds items to it. ( Expand image )
By embedding a standard slamming cart (available in the header)into the content, the seller creates an overview for the user of the products that are already in the cart. And by doing so, it reminds the user what great products the user has already found (which, of course, must be purchased before they go!). This gives the user quick access to checkout and thus helps close the sale.
In addition, during the course of our study Home page and category navigation we often observed that people reopen shopping cart just to look at the name of the items previously added. For example, they might open the cart to look up the name of the model of the camera that was just added to find the right case. The default cart will make it easier to find a related product because it will allow them to directly compare the current product list to the items in the cart.

Additional product column

One of the most obvious ways to get rid of empty space in the product tile is rearrange the merchandise so that they go in an extra column. This can greatly increase the number of items visible on the screen. In the example below, the user can see ten items instead of six.
Adaptive scaling: designing online stores for large screens

The product list grid is arranged so that additional columns fit on the large screen. ( Click here to enlarge the image )
With this approach it is possible to considerably adapt the list of products to fit a large screen, but do so with care. If the number of columns is too large, the tile will eventually become harder to view. Users will be reading into the information, and it will be difficult for them to skip from line to line with their eyes (for this reason, the text has optimal line length ).
So limit your product list to the width of Five to eight columns. (depending on the size of the items in the list and the product niche)so that users don’t get lost in a sea of information.

Enlarged images of products in the list

Another obvious way to take advantage of the large visible area space in a product list is enlarge each item in the list, to fill the screen. For example, you can greatly increase the size of the product preview, allowing the user to view the design of each item in much more detail. This is a tangible advantage for product niches promoted by appearance, because if the amount of visual information conveyed is maximized, it’s much easier for the user to choose a product they like.
Adaptive scaling: designing online stores for large screens

Product list items are enlarged by loading high resolution pictures and conveying the maximum amount of visual information. ( Enlarge image )
However, you can’t be too careful here either. Simply scaling a picture often leads to serious increase the height of the line of the list (assuming that the proportions are preserved). As a result, the number of items on the page will be significantly reduced. Note the illustration above-the second row in the list was almost completely displaced from view.
Therefore, the trade-off when enlarging the image in the product list is as follows : by increasing the level of detail visual data for each item, we limit the overview of available items because fewer items fit into the visible area.

Scaling and rebuilding the product list

By combining the previous two solutions in case the user’s screen expands – that is, by adding columns and enlarging each item in the product list – we get the best of them. There is more visual data for each item, while the overview is preserved. The product tile is rearranged to show additional columns, even if the list items reach the lower border in height.
Adaptive scaling: designing online stores for large screens

Items in the product list are both enlarged and rearranged into additional columns. ( Enlarge image )
Thus, element of the list can increase, to display additional visual information, but without any increase in height, so that you have to compromise the number of products that are visible on the screen. In fact, because of the addition of columns, the number of products within the visible area will even increase. It turns out that we increase both the total number of products on the screen and the level of detail of each.

Sticking filter

Another way to get rid of the empty space is Fix the panel with filters and sorting in the visible area of the screen as a "sticky" item. This will give the user more information about which product they are currently looking at, as well as quick access to control list options.
Adaptive scaling: designing online stores for large screens

The filter bar can be displayed as a sidebar attached to the edge(s) of the screen. ( Enlarge image )
Fixed content is an effective way to use space if the main content is not very wide. However, whenever you fix content at the edge of the screen, do so only on an axis that has enough space to accommodate it, that is, an axis that has too much space. For example, do not fix the content at the top or bottom of the screen without applying rules based on the height of the visible area (e.g., a height-based media query), which will check to see if there is needed space.
However, with an appropriate rule check, the sticky sidebar of filters can also rearrange into multiple columns, with parameters split into two or three columns. If the filter bar is horizontal , you can pin it to the very top of the screen if the height of the visible area allows. Or, if there’s a lot of horizontal space available, you can rearrange this panel into a sidebar as you scroll the page. You can also use the height of the browser window to dynamically adjust parameter reduction filter – the number of parameters that are displayed up to a certain threshold will increase as the screen height increases.

Recently viewed items

When respondents in the test went to the product page and realized that the product ended up not being right for them, they either continued their search or left the site. Of course, it is in the seller’s best interest to make the option to return to previous screens available. Showing offers. with alternatives and related products or the list of recently viewed items in the sidebar, you immediately give the user escape routes they can choose if the item they’re currently looking at isn’t right for them.
Adaptive scaling: designing online stores for large screens

Product offers or a list of recently viewed items can be placed in the sidebar for easy navigation between products. ( Click here to enlarge the image )
Simplifying the transition from product to product can make a big difference in a user’s willingness to keep searching. Naturally, it is also possible to promote in the same way product category Let’s remember at least custom scripts – user moves backwards and forwards Between product lists and pages or can he move from one product to another?
Sometimes the ability to navigate from product to product can be attractive because it gives the user a more complete view of the site’s offerings. But such a transition scenario also creates quite a few conflicts. So make sure that the path you offer to promote any units strikes a healthy balance between the category and product cards the user is navigating to.

Sticking goods summary

Item cards can be long. They can contain images , descriptions, specifications, reviews, offers from alternative and related products , questions, etc. All our usability studies have shown that more information almost always means better information (as long as the content is of good quality-that is, useful, reliable, and more or less accurate). It also means that sometimes the user can stop very far away from the main product description (that’s the name, price, any possible product options, and the "Buy" button). To always show the context and Keep the "Buy" button within reach, Place a sticky product summary in the free space of the large screen, pinning it to the top edge of the visible area when the user scrolls down the page.
Adaptive scaling: designing online stores for large screens

A sticking product summary and "Add to cart" button attached to the top edge of the screen when the user scrolls down a long product card page. ( Enlarge Image )
The sticking product summary can basically be a slightly modified version of the design used for the product list element. If the bulletin is anchored at the top or bottom of the screen, however, it can be made narrower in shape. Either way, the point is to to show the user the context all the time, letting the user see the name, price, and any product options, even if the user is down deep in the reviews. And, of course, always keep the "Add to Cart" button within reach when the user reads a rave review from a happy customer.

Sticky order summary and support

The excess horizontal space will not be used during checkout because such pages tend to require focus, and because forms in multiple columns can lead to serious usability problems in the buying process. On a large screen, this sea of empty white space can be used to order summary. and support information. The order summary can be a constant element throughout the checkout process as a constant reminder of items the user is only a few steps away from purchasing.
Adaptive scaling: designing online stores for large screens

The order summary and support details are displayed in the sidebar when there is room for them on the screen. ( Enlarge image )
Meanwhile, support details, which are normally located in the basement, can be raised so that they are easily accessible should the user have difficulty with the checkout process. If you’re worried about an overabundance of support calls, you can show support details more selectively based on the order amount and how many steps in the checkout process have been completed and whether validation errors have occurred.

Adaptive scaling for online stores

It’s amazing how few online stores currently have optimized their site designs for large screens. Even the 18% of top online stores that offer big-screen-optimized sites have actually taken only one small step in that direction. Considering numerous segment of the users with large screens, the field of adaptive scaling is mature and has potential.
When applying adaptive scaling, don’t forget about basic principle "same content, different presentation." Either even a small piece of content will be important to all users, or it won’t be important enough to bother users on larger monitors. Just because a user has more space on their screen doesn’t mean they want to see a clutter of low quality content. Instead, look for ways to show existing content differently so that the interface is better for big-screen users.
The 11 ideas described in this article are based on this principle of equal content and different presentation – take the current page content and scale it up or change the layout, somewhere more significantly, somewhere less :

  1. built-in authorization window
  2. Quick links from header and footer
  3. built in carousel slider
  4. built-in shopping cart
  5. additional goods column
  6. enlarged images of products in the list
  7. scaling and rearrangement of the product list
  8. sticky filter
  9. recently viewed items
  10. sticking product summary
  11. sticking order summary and support

Do you have other ideas for adapting an online store for a large monitor? Share them in comments. It’s time to adapt online stores for users with big monitors too.

You may also like