August 15, 2014 at 15:55Trends in e-commerce design
The design of online stores is a priori more complex task compared to regular sites. E-commerce sites are usually focused on optimizing the purchase process and, as a result, increasing conversions. Therefore, in e-commerce design there are two types of trends - practical, dictated by usability, and decorative, coming from web design as such. What is relevant today in e-commerce design, which ideas are embodied “for beauty”, and which really help to sell better and more?
Design is not a search for the magic orange button in the lower right corner, which increases conversion by 300%. The harmony of the elements, the style consistent with the spirit of the brand and business goals, is what makes design effective.
3D effects
One example of the successful use of 3D effects in e-commerce is a virtual fitting room. For example, the app for trying on glasses allows the user to create a “model” of his face using a computer camera or smartphone, and decorate it with your favorite glasses - it’s clear that such a demonstration is much more effective than a simple product photo. It’s practically unrealistic to select a model of glasses without trying it on, and a really working 3d-application can radically change the dynamics of sales of such a product special for electronic sales.
A virtual fitting room is often created using augmented reality, which we will talk about below. Today, such applications are especially popular for the selection of cosmetics, clothes, furniture - items that should always be included in a certain context (the face or figure of the buyer, the interior of the room, etc.).
The three-dimensional effect also creates parallax (the movement of some elements against the background of the static position of others when scrolling, or their multidirectional movement, movement at different speeds). Although this effect has been used in the design of smartphone interfaces since time immemorial, it still remains in trend and looks favorably on e-commerce sites when changing / paging products.
www.noleath.com/noleath
krystalrae.com/2012/summer
Augmented reality Augmented reality
is still powerfully tearing patterns and boundaries between the real and virtual worlds, and, apparently, will not become obsolete soon. It works quite simply: using an AR application, the camera of a smartphone or tablet scans a trigger picture in the real world, and on the mobile device the promotional page of the site opens, interactive content is played.
AR opens up great opportunities for online trading and promotion - creating virtual fitting rooms, demonstrating a product (for example, video from a brand show), embedding virtual objects in a real interior. In general, AR is a relatively simple way to create a memorable, emotional communication that perfectly conveys the values of the product and brand.using all the capabilities of modern mobile devices.
Flat design. Biomorphism. Minimalism.
The trend towards simplification and flattening of the design is obvious - the interface of new versions of iOS and updated Android, which will be released this fall, is an excellent confirmation of this. The “less” the design, the more lightness in the pages, cleanliness in the code, more responsiveness and functionality based on the same performance (often limited when it comes to mobile devices). In a minimalistic design paradigm, the emphasis on pure colors and expressive fonts is especially noticeable.This is especially important for e-commerce, where the original fonts evoke brand associations. Using the font, we can control the user's attention and direct his chaotic scanning of the page with his gaze in the right direction.
Here's an example of how we do it at www.avenue.com
Hamburger Icons. Fixed menu. Drop downs.
Hamburger icons (or icons with three horizontal stripes to open the menu) are in fashion today and are used everywhere. However, it turns out that for e-commerce sites this is not the best solution. As the results of various tests (A / B, Multivariate testing) show, “hamburgers” attract on average 20% less user clicks than the same button with the good old word “menu”.
It is worth noting that this solution is not at all the design know-how of recent years. The hamburger icon was also used in the Xerox 8010 Information System personal computer, known as the Xerox Star, released by Xerox in 1981.
The fixed menu, which remains visible on the screen while scrolling the page, on the contrary, forces more users to click and go deeper into the site than the traditional menu bar located at the top or bottom of the page . Obviously, the absence of the need to scroll the page every time you access the menu has a positive effect on the user's mood.
The design of drop-downs, or drop-down menus, is also important. The trend is now minimalistic drop-down menus on a translucent background. The key points here arethe menu should be readable, clickable from any device (even with a small screen), and should not merge with the background . An example of a good drop-down implementation can be seen on the Men's Wearhouse website created by our team.
Adaptability
Not even discussed. Cross-browser compatibility, comfortable viewing on any device, with any screen size, touch-screen friendly design are absolutely mandatory and indisputable. Today, adaptability means not just creating a mobile version of the site, but using an algorithm that is sensitive to the width of the screen of a mobile device. Based on the platform of the site, he renders the site on small and non-standard screens, without relying on the browsers of tablets and smartphones, which can interpret the code and various elements of the site’s design in a very different way.
Interactivity
In web design as a whole, this trend manifests itself in the endless loading of content, infographic sites, hover effects on hover.
In e-commerce, an important interactive design element is at the interface with user experience, and on the Internet it is most often found under the name Ajax Shopping Cart.Adding an item to the basket and removing it from there occurs without refreshing the page, the basket somehow appears before the eyes of the user, confirming his choice, and disappears after confirmation, without taking the user away from the product page. This is done so that the process of selecting and folding the product into the basket is not interrupted, proceeds smoothly and without unnecessary jerks, without distracting the user from the sacred action.
Creating a touch effect
In the real world, before making a purchase, we have the opportunity to touch, try on, examine the product. In the virtual world, this effect is ... difficult, but possible. They usually try to convey realistic sensations with the help of high-resolution photos of the product, the maximum Zoom which allows you to see the texture and other features of the product(natural cracks in wood, porosity of the skin, fabric texture, etc.). In addition, manufacturers of smartphones and tablets are working on improving the vibration modules of mobile devices and their software shell, so that they can perceive finely tuned vibration profiles for different products, surfaces and textures, and can make the user understand what this thing is to the touch. This is a matter of a very near future.
Chase a client, not a competitor.
In general, we will not reveal a big secret if we advise you not to blindly follow your competitors and do not copy their decisions just because they work. Let your customers inspire you, their desires and goals.
For example, Versace was one of the first in the luxury segment to launch an online store. We performed it in the traditional style for Versace - dark, graphic and very stylish - that is, not similar to any of the competitors, but at the same time meeting the spirit and style of the brand in the eyes of our visitors.
Do not make your online store an illustration of all the trends at the same time simply because it is fashionable. The main thing in web design is balance and harmony. But you need to remember that for e-commerce, usability requirements are always a priority over visual design requirements .
Design is not a search for the magic orange button in the lower right corner, which increases conversion by 300%. The harmony of the elements, the style consistent with the spirit of the brand and business goals, is what makes design effective.
3D effects
One example of the successful use of 3D effects in e-commerce is a virtual fitting room. For example, the app for trying on glasses allows the user to create a “model” of his face using a computer camera or smartphone, and decorate it with your favorite glasses - it’s clear that such a demonstration is much more effective than a simple product photo. It’s practically unrealistic to select a model of glasses without trying it on, and a really working 3d-application can radically change the dynamics of sales of such a product special for electronic sales.
A virtual fitting room is often created using augmented reality, which we will talk about below. Today, such applications are especially popular for the selection of cosmetics, clothes, furniture - items that should always be included in a certain context (the face or figure of the buyer, the interior of the room, etc.).
The three-dimensional effect also creates parallax (the movement of some elements against the background of the static position of others when scrolling, or their multidirectional movement, movement at different speeds). Although this effect has been used in the design of smartphone interfaces since time immemorial, it still remains in trend and looks favorably on e-commerce sites when changing / paging products.
www.noleath.com/noleath
krystalrae.com/2012/summer
Augmented reality Augmented reality
is still powerfully tearing patterns and boundaries between the real and virtual worlds, and, apparently, will not become obsolete soon. It works quite simply: using an AR application, the camera of a smartphone or tablet scans a trigger picture in the real world, and on the mobile device the promotional page of the site opens, interactive content is played.
AR opens up great opportunities for online trading and promotion - creating virtual fitting rooms, demonstrating a product (for example, video from a brand show), embedding virtual objects in a real interior. In general, AR is a relatively simple way to create a memorable, emotional communication that perfectly conveys the values of the product and brand.using all the capabilities of modern mobile devices.
Flat design. Biomorphism. Minimalism.
The trend towards simplification and flattening of the design is obvious - the interface of new versions of iOS and updated Android, which will be released this fall, is an excellent confirmation of this. The “less” the design, the more lightness in the pages, cleanliness in the code, more responsiveness and functionality based on the same performance (often limited when it comes to mobile devices). In a minimalistic design paradigm, the emphasis on pure colors and expressive fonts is especially noticeable.This is especially important for e-commerce, where the original fonts evoke brand associations. Using the font, we can control the user's attention and direct his chaotic scanning of the page with his gaze in the right direction.
Here's an example of how we do it at www.avenue.com
Hamburger Icons. Fixed menu. Drop downs.
Hamburger icons (or icons with three horizontal stripes to open the menu) are in fashion today and are used everywhere. However, it turns out that for e-commerce sites this is not the best solution. As the results of various tests (A / B, Multivariate testing) show, “hamburgers” attract on average 20% less user clicks than the same button with the good old word “menu”.
It is worth noting that this solution is not at all the design know-how of recent years. The hamburger icon was also used in the Xerox 8010 Information System personal computer, known as the Xerox Star, released by Xerox in 1981.
The fixed menu, which remains visible on the screen while scrolling the page, on the contrary, forces more users to click and go deeper into the site than the traditional menu bar located at the top or bottom of the page . Obviously, the absence of the need to scroll the page every time you access the menu has a positive effect on the user's mood.
The design of drop-downs, or drop-down menus, is also important. The trend is now minimalistic drop-down menus on a translucent background. The key points here arethe menu should be readable, clickable from any device (even with a small screen), and should not merge with the background . An example of a good drop-down implementation can be seen on the Men's Wearhouse website created by our team.
Adaptability
Not even discussed. Cross-browser compatibility, comfortable viewing on any device, with any screen size, touch-screen friendly design are absolutely mandatory and indisputable. Today, adaptability means not just creating a mobile version of the site, but using an algorithm that is sensitive to the width of the screen of a mobile device. Based on the platform of the site, he renders the site on small and non-standard screens, without relying on the browsers of tablets and smartphones, which can interpret the code and various elements of the site’s design in a very different way.
Interactivity
In web design as a whole, this trend manifests itself in the endless loading of content, infographic sites, hover effects on hover.
In e-commerce, an important interactive design element is at the interface with user experience, and on the Internet it is most often found under the name Ajax Shopping Cart.Adding an item to the basket and removing it from there occurs without refreshing the page, the basket somehow appears before the eyes of the user, confirming his choice, and disappears after confirmation, without taking the user away from the product page. This is done so that the process of selecting and folding the product into the basket is not interrupted, proceeds smoothly and without unnecessary jerks, without distracting the user from the sacred action.
Creating a touch effect
In the real world, before making a purchase, we have the opportunity to touch, try on, examine the product. In the virtual world, this effect is ... difficult, but possible. They usually try to convey realistic sensations with the help of high-resolution photos of the product, the maximum Zoom which allows you to see the texture and other features of the product(natural cracks in wood, porosity of the skin, fabric texture, etc.). In addition, manufacturers of smartphones and tablets are working on improving the vibration modules of mobile devices and their software shell, so that they can perceive finely tuned vibration profiles for different products, surfaces and textures, and can make the user understand what this thing is to the touch. This is a matter of a very near future.
Chase a client, not a competitor.
In general, we will not reveal a big secret if we advise you not to blindly follow your competitors and do not copy their decisions just because they work. Let your customers inspire you, their desires and goals.
For example, Versace was one of the first in the luxury segment to launch an online store. We performed it in the traditional style for Versace - dark, graphic and very stylish - that is, not similar to any of the competitors, but at the same time meeting the spirit and style of the brand in the eyes of our visitors.
Do not make your online store an illustration of all the trends at the same time simply because it is fashionable. The main thing in web design is balance and harmony. But you need to remember that for e-commerce, usability requirements are always a priority over visual design requirements .