Practical Ecommerce

5 Ecommerce Site Design Trends for 2018

New techniques, technologies, and user behaviors drive ecommerce website and application design every year. In 2018, expect ecommerce sites to employ the CSS Grid Layout, use mobile-friendly full-screen modal windows, offer a lot more video, and include microinteractions and guided selling.

1. CSS Grid Layout

CSS Grid Layout is a two-dimensional layout model and part of the CSS standard from the World Wide Web Consortium.

It gives designers significantly more control over how a web page is laid out and helps make much better use of space across devices and screen sizes. Put another way, CSS Grid Layout makes optimizing user interfaces relatively easy when compared to other methods.

 

“As websites evolved from simple documents into complex, interactive applications, techniques for document layout, e.g. floats, were not necessarily well suited for application layout,” wrote World Wide Web Consortium editors in the CSS Grid Layout recommendation.

“By using a combination of tables, JavaScript, or careful measurements on floated elements, authors discovered workarounds to achieve desired layouts. Layouts that adapted to the available space were often brittle and resulted in counterintuitive behavior as space became constrained. As an alternative, authors of many web applications opted for a fixed layout that cannot take advantage of changes in the available rendering space on a screen.”

CSS Grid Layout addresses those problems and makes web design a lot better all around.

In 2018, look for ecommerce website designers and theme makers to include CSS Grid Layout, especially on product category pages or on search results pages.

The only possible barrier may be that some early versions of web browsers do not completely support CSS Grid. But the most recent versions of all leading browsers — including Chrome, Firefox, Safari, Opera, and Edge — do support it.

2. Full-screen Search, Forms

In web design, a modal, modal box, or modal window is an element, typically controlled with a script, that is overlaid on top of other elements (content) to permit user interaction.

Modals have been an effective user interface for several years and are common on many ecommerce websites. What may change for 2018 is the use of full-screen modals for search and forms.

The trend comes from mobile-first web design. On a mobile device, many modals take up most or all of the available space on the screen.

Overstock's newsletter subscription form uses a full-screen modal box.

Overstock’s newsletter subscription form uses a full-screen modal box.

Overstock, as an example, is using a full-screen modal for its newsletter registration form, which pops up for new site visitors. On a mobile device, the form is centered and full-screen and even on a much larger screen the translucent gray stretches end to end.

The Ralph Lauren website includes a search modal that covers nearly all of the content on the page when displayed on desktop or laptop computers, and is, in fact, full-screen on a mobile device.

The Ralph Lauren site uses a search modal that is full-screen on mobile devices and covers most content on larger screens.

The Ralph Lauren site uses a search modal that is full-screen on mobile devices and covers most content on larger screens.

Look for designers who are building for mobile first to use full-screen modals for search and other forms and carry those full-screen implementations into larger layouts, too.

3. Much More Video

Video is an excellent medium for conveying complex information, telling stories, and evoking emotion. The amount of videos distributed on the web and watched by Internet users rises every day. So it should not be a surprise that online retailers are also using more video elements in web design.

Sites such as Beardbrand, which has been using videos and content marketing for several years, lead the way by adding video inline on product detail pages.

Online videos are both popular and effective. In 2018, look for ecommerce site designs to include video on product pages, landing pages, and even as backgrounds. <em>Source: Beardbrand.</em>

Online videos are both popular and effective. In 2018, look for ecommerce site designs to include video on product pages, landing pages, and even as backgrounds. Source: Beardbrand.

You may also see video used as backgrounds, on-site merchandising, or hero images.

4. More Microinteractions

Microinteractions have been around at least since Facebook added the “Like” button to its posts. What started as a way to rate social media contributions has grown into one of the most popular website and application trends for 2018.

An animated success message tells a user he has successfully joined the mailing list.

An animated success message tells a user he has successfully joined the mailing list.

For online sellers, a microinteraction’s best trick may be its ability to help create habits or, at the very least, reward users for completing specific tasks, such as adding a product to the shopping cart, reviewing a product, or subscribing to an email newsletter.

As Nick Babich, editor-in-chief of Planet UX, points out, “Microinteractions have the power to encourage users to actually interact. They are strong instruments that help to form habit loops.”

Shoppers on an ecommerce website, for example, might write a review for recently purchased products. When they submit the review, a small animation (microinteraction) rewards them for the submission, encouraging them to write another review.

There are four main parts to a microinteraction, according to Dan Saffer, author of the book Microinteractions.

  • A trigger that initiates or begins the microinteraction.
  • Rules that define or determine what happens in the interaction.
  • Feedback communicates what is happening or what just happened.
  • Loops and modes which govern, if you will, the content.

In 2018, expect ecommerce site and application designers to season their designs with microinteractions.

5. Guided Selling

Guided selling is the act of asking shoppers questions about features and usage to help them discover specific products.

In ecommerce, guided selling has been around for several years. Victoria’s Secret, for example, has a sports bra selector. The North Face will help you find jackets. And Bodybuilding.com has a three-step supplement finder to help you meet your fitness goals.

Bodybuilding.com's simple supplement finder leads shoppers to a good solution.

Bodybuilding.com’s simple supplement finder leads shoppers to a good solution.

Like some other design trends on this list, guided selling could become much more common in 2018.

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Maryna November 28, 2017 Reply

    Hi Armando, thanks for the great article! What’s interesting is that we’ve seen that Guided Selling is not exclusive to B2C any longer. This year we’ve seen companies in various industries including B2B embrace this approach. Here are some interesting examples:

    •Swisscom, telco and digital transformation company in Switzerland, launched a Smart Business Connect Consultant (https://www.swisscom.ch/en/business/sme/internet-fixednetwork-television/tariffs/sbcon-consultant.html). It asks their visitors targeted questions about their industry, size, business needs and challenges and suggests the right business solutions.

    •SMARTASSISTANT launched an interactive B2B Solution Advisor (https://smartassistant.com/products#solution-advisor). It helps buyers and sales reps understand product benefits and quickly figure out the perfect product mix according to given business needs and goals. This means more informed leads, more focused inquiries and shorter sales cycles.

  2. Ivan Burmistrov November 28, 2017 Reply

    1. Don’t know about CSS.
    2. Full-screen modals are definitely a wrong trend because users mistakenly perceive them as new pages and use browser’s “back” button to close them. I hope, the consequences of this mistake is understandable. Normal lightboxes should be always used instead of full-screen modals. (And, yes, people hate any automatic modals. Only user-initiated modals are acceptable.)
    3. People do not have enough leisure time to watch videos. In most cases photos and textual descriptions beat videos with a lopsided score. Pioneers of introducing videos on apparel websites like ASOS, Zappos and KnickerPicker were not successful with the results they achieved and either removed videos or lowered their priority on webpages.
    Background/hero videos are a well-known disaster. People hate them.
    4. Don’t confuse microinteractions with normal feedback that should acknowledge any user action (a basic usability principle known from early 90s).
    5. Any research in support of using guided selling over conventional methods of presenting products?

    Armando, your serious mistake is that you perceive any trends positively. In reality, 99% of trends in webdesign and ecommerce are harmful to customers and businesses. So I expect a more sceptical approach to any trends.