You’ve seen 99designs and you still want another slice?
These days, we do just about everything online—and that includes shopping. Which is why there’s never been a better time to be in ecommerce.
Nowadays, if you’re selling anything—whether that’s sneakers, salad dressing, or something in between—you need to hop on board the ecommerce website train. An ecommerce site offers you the chance to build your brand, connect with more customers, and sell more products—but only if you’ve got the right website design.
Here are the top 11 ecommerce web design tips to help you take your shop to the next level:
Время на прочтение
Дизайн интернет-магазинов – задача априори более комплексная в сравнении с обычными сайтами. E-commerce-сайты, как правило, заточены на оптимизацию процесса покупки и, как результат, повышение конверсии. Поэтому в e-commerce дизайне есть два типа трендов — практические, продиктованные юзабилити, и декоративные, пришедшие из веб-дизайна как такового. Что сегодня актуально в e-commerce дизайне, какие идеи воплощаются «для красоты», а какие реально помогают продавать лучше и больше?
Дизайн — это не поиск магической оранжевой кнопки в правом нижнем углу, повышающей конверсию на 300%. Гармония элементов, стиль, соответствующий духу бренда и бизнес-целям, вот что делает дизайн эффективным.
Один из примеров удачного применения 3D-эффектов в e-commerce — виртуальная примерочная. Например, приложение для примерки очков позволяет пользователю создать «модель» своего лица с помощью камеры компьютера или смартфона, и украсить ее понравившимися очками – понятное дело, что такая демонстрация гораздо эффектнее простой фотографии продукта. Грамотно подобрать модель очков без примерки практически нереально, и реально работающее 3d-приложение может радикально изменить динамику продаж такого особенного для электронных продаж товара.
Виртуальная примерочная часто создается с помощью приема дополненной реальности (augmented reality), о котором мы расскажем чуть ниже. Сегодня такие приложения особенно популярны для подбора косметики, одежды, мебели – предметов, которые всегда должны быть вписаны в некий контекст (лицо или фигуру покупателя, интерьер комнаты и т.д.).
Эффект трехмерности также создает параллакс (движение одних элементов на фоне статичного положения других при скроллинге, или их разнонаправленное движение, движение с разной скоростью). Хотя этот эффект используется в оформлении интерфейсов смартфонов с незапамятных времен, он по-прежнему остается в тренде, и выгодно смотрится на e-commerce сайтах при смене/листании товаров.
Дополненная реальность (Augmented reality)
Дополненная реальность все еще мощно рвет шаблоны и грани между реальным и виртуальным миром, и, по всей видимости, устареет еще не скоро. Работает это довольно просто: с помощью AR-приложения камера смартфона или планшета сканирует картинку-триггер в реальном мире, и на мобильном устройстве открывается акционная страница сайта воспроизводится интерактивный контент.
AR открывает широкие возможности для интернет-торговли и промоушена — создание виртуальных примерочных, демонстрация продукта (например видео с показа бренда), встраивание виртуальных объектов в реальный интерьер. И вообще, AR – это сравнительно простой способ создания запоминающейся, эмоциональной коммуникации, которая отлично транслирует ценности продукта и бренда, используя все возможности современных мобильных устройств.
Плоский дизайн. Биоморфизм. Минимализм.
Тренд к упрощению и уплощению дизайна очевиден – интерфейс новых версий iOS и обновленной Android, которая выйдет этой осенью, тому отличное подтверждение. Чем «меньше» дизайна, тем больше легкости в страницах, чистоты в коде, больше отзывчивости и функционала на базе той же производительности (часто ограниченной, если речь идет о мобильных устройствах). В минималистичной дизайнерской парадигме особенно заметен акцент на чистых цветах и выразительных шрифтах. Это особенно важно для e-commerce, где оригинальные шрифты вызывают ассоциации с брендом. С помощью шрифта мы можем управлять вниманием пользователя и направлять его хаотическое сканирование страницы взглядом в нужном направлении.
Вот пример того, как это делаем мы на сайте www.avenue.com
Иконки-гамбургеры. Фиксированное меню. Дроп-дауны.
Иконки-гамбургеры (или иконки с тремя горизонтальными полосами для вызова меню), сегодня в моде и применяются повсеместно. Однако, оказывается, для e-commerce сайтов это не лучшее решение. Как показывают результаты различных тестирований (A/B, Multivariate testing), “гамбургеры” привлекают в среднем на 20% меньше кликов пользователей, чем такая же кнопка со старым добрым словом “меню”.
Стоит отметить, что это решение вовсе не дизайнерское ноу-хау последних лет. Иконка-гамбургер использовалась еще в персональном компьютере Xerox 8010 Information System, известном как Xerox Star, выпущенным компанией Xerox в 1981 году.
Фиксированное меню, которое остается видимым на экране при прокрутке страницы, напротив, заставляет большее количество пользователей кликать и переходить вглубь сайта, чем традиционная панель меню, находящаяся в верхней или нижней части страницы. Очевидно, что отсутствие необходимости скроллить страницу каждый раз при обращении к меню положительно сказывается на настроении пользователя.
Дизайн дроп-даунов, или выпадающих меню, также немаловажен. В тренде сейчас минималистичные выпадающие меню на полупрозрачном фоне. Ключевые моменты здесь — меню должно быть читабельным, кликабельным с любого устройства (даже с маленьким экраном), и не должно сливаться с фоном. Пример хорошей реализации дроп-дауна можно увидеть на сайте Men’s Wearhouse, созданном нашей командой.
Даже не обсуждается. Кроссбраузерность, комфортный просмотр на любых устройствах, с любым размером экрана, touch-screen friendly-дизайн — абсолютно обязательны и непререкаемы. Сегодня адаптивность подразумевает не просто создание мобильной версии сайта, а использование алгоритма, чувствительного к ширине экрана мобильного устройства. Базируясь на платформе сайта, он отрисовывает сайт на небольших и нестандартных экранах, не полагаясь на браузеры планшетов и смартфонов, которые могут трактовать код и разные элементы дизайна сайта очень по-своему.
В веб-дизайне в целом этот тренд проявляется в бесконечной подгрузке контента, сайтах-инфографиках, ховер — эффектах при наведении.
Создание эффекта прикосновения
Преследуй клиента, а не конкурента
В общем, мы не откроем большого секрета, если посоветуем не следовать слепо своим конкурентам и не копировать их решения только потому, что они работают. Пусть вас вдохновляют ваши клиенты, их желания и цели.
Например, Versace одним из первых в сегменте luxury запустили интернет-магазин. Мы выполнили его в традиционном для Versace стиле – темный, графичный и очень стильный – то есть не похожий ни на кого из конкурентов, но при этом отвечающий духу и стилю бренда в глазах своих посетителей.
Не стоит делать свой интернет-магазин иллюстрацией всех трендов одновременно просто потому, что это модно. Главное в веб-дизайне — баланс и гармония. Но нужно помнить, что для e-commerce требования юзабилити всегда в приоритете над требованиями визуального дизайна.
Think like a website visitor
—
If you want your ecommerce website design to connect with your audience, you need to think like your audience. Ultimately, there are just a few things your potential customers want in an ecommerce experience—a site that’s easy to navigate, well-designed, and makes the process of shopping easy, straightforward, and hassle-free.
And if you want your ecommerce shop to succeed, you’d better give them those things.
When you think like your customer, you can anticipate what they want from your ecommerce store—and then design your site in order to meet those needs.
Make your content scannable
—
You can spend days crafting long descriptions for the products on your ecommerce site, but we’ve got news for you—no one is going to read it.
Research shows that most website visitors only read about 20% of the text on any given web page. Instead of reading content word for word, they simply scan the text looking for key information—so, if you want to get your point across (and drive sales in the process), you need to make your content scannable.
The easier to scan your content, the more likely your audience will absorb your key messaging—and the more likely you’ll be able to make a sale.
Use social proof
—
Another way to build that oh-so-important trust? Social proof.
When you’re designing your ecommerce site, look for ways to show your potential customers the positive feedback you’ve gotten from your existing customers. Add a ratings section where people can rate your products (and then get as many 5 star reviews as you can). Add a testimonials section where you feature customer photos with a quote or two about what a great experience they had working with you. Ask customers to review your products—and what they like about them—and then add them to your blog.
The more your website visitors see that other people have had a positive experience shopping on your site (whether that’s through reviews or testimonials) the more trustworthy you’ll appear—and the more your conversions will go up as a result.
Make branding a priority
—
When it comes to shopping online, people want to buy from established brands—not faceless ecommerce sites that look like a front for trying to steal your credit card information.
If you want to build the trust you need to drive serious sales with your ecommerce business, you need to put some serious thought into your branding. Your branding is like the DNA of your ecommerce business; it’s who you are as a company, what you’re about, and how you’re different from your competitors—and it plays a huge part in building a connection with your audience and driving sales.
—
If you want to get the most from your ecommerce design, take the time to define your brand—and then infuse that branding into your design. If you’re not sure who you are as a brand, that’s ok! You’re just going to want to do a little business soul-searching before you get designing. Ask yourself questions like:
- If my brand was a person, who would it be?
- If I had to describe my brand in three words, what would they be?
- What makes my brand different from other ecommerce shops out there?
- What do we do better than anyone else on the market?
Once you know who you are, you can work it into the branding of your ecommerce site. And that branding? It’ll help build trust with your audience—and drive serious sales in the process.
Make it responsive
—
We’ll keep this short—if you want to capture the customers who want to shop on their phones or tablets, you need to make sure your website design is fully responsive. Otherwise you might not convince those valuable mobile visitors that your site is where they want to make a purchase.
Make it look professional
—
The basis of an ecommerce site is that you are asking your website visitors to purchase something from you. And, as a result, you’re asking them to turn over sensitive information, like their credit card information. Which they’re not going to feel comfortable doing if your website doesn’t look profesh.
Investing in a professional website is a must if you want to build trust with your customers—and developing that trust is a must if you want your ecommerce store to succeed.
What do we mean by professional? Your website shouldn’t have any typos or misspellings. Your font, color palette, and footer design should be consistent from page to page. All your product links and buttons should work. Your photos shouldn’t look like you snapped them on an old iPhone 5 and your overall site design shouldn’t look like you swiped it from Geocities circa 1997.
The point is, if you want your customers to take you seriously, you need to show them you take yourself seriously—and the only way to do that is with a professional web design.
Keep it simple
—
One of the top rules you should keep in mind during the ecommerce design process is “KISS”—keep it simple, silly!
When it comes to designing an ecommerce website, simple is always better. The more elements you have on the page (Colors! Banner Ads! ALL THE POP-UPS!), the more it takes away from the entire point of the website—closing a sale.
You don’t need a ton of bells and whistles on your ecommerce website—all they do is act as distraction. Keep your design clear, clean, and simple—and keep the focus on the sale.
What makes a good ecommerce website?
A great website shows the world who you are, makes people remember you, and helps potential customers understand if they found what they were looking for. Websites communicate all of that through color, shape and other design elements. Learn how to make your ecommerce website tell your brand’s story.
Types of websites
How to create a website
Web design colors
Use color to your advantage
—
Different colors can inspire different feelings, emotions, and actions from people—so, if you want your ecommerce site to convert, you need to use those color inspirations to your advantage.
Or, if you want to up your credibility, incorporate blue into your web design. Blue is not only a universally loved color, but it’s also been shown to increase feelings of trust, making it a go-to in the business world (there’s a reason the color blue appears in more than half of all logos).
The point is, color is one of the most powerful tools in your design toolbox—and if you know how to use it, it can have a huge impact on your ecommerce design.
Use high-quality images
—
In the world of web design, it’s common knowledge that images increase conversions (for example, one recent case study showed that incorporating more relevant images into a website design increased conversions by over 40%). And that’s even more true when it comes to ecommerce.
No one is going to buy a product sight unseen. If you want people to buy your products, you need to show them what they’re buying via high-quality product images.
Getting professional images of all your products (and having images of your product from multiple different angles) goes a long way in building confidence and trust in your customers. If they feel confident that they know what they’re buying, they’re more likely to make a purchase. But if there are no images of the product they want to buy (or just a single, low quality image), they’re going to feel more hesitant to make the purchase—and your conversions are going to tank as a result.
Do yourself a favor and have plenty of high-quality images of whatever you’re selling on your ecommerce site. Your conversions will thank you.
Make checkout a breeze
—
Remember how we said nothing kills a sale faster than clunky product pages? Well, a clunky checkout is definitely a close second.
If your checkout process is a pain in the you-know-what, you’re going to lose customers. If you want people to buy from you, you need to make the process of buying as simple, straightforward, and pain-free as possible.
Make your checkout page design clean, simple, and easy to navigate. Give your customers the option to register for your site or to check out as a guest. Make everything about the process crystal clear: what information you need to process the purchase (and where they need to enter it), the different shipping options available (and how much they cost), and what to do in case there’s a problem with their order or they need to do a return. Once the purchase is complete, direct your customers to a confirmation page so they know everything went through.
In a nutshell, if you want people to buy from you, make the checkout process as easy as possible.
Make categories easy to navigate
—
Nothing—and we mean nothing—will kill a sale faster than clunky product pages. If your website visitors have to click around ten different menus before they find the product they’re looking for, they’re going to hightail it out of there fast—and click their way right to a competitor’s site.
Make your product categories and product pages easy to navigate. Make it easy for your customers to search for products and to filter products by things like color, size, or product type. The easier you make your categories and pages to navigate, the easier it will be for your customers to find what they’re looking for—and the easier it will be for them to make a purchase.
How to create your ecommerce website design
If you want an amazing ecommerce website that stands out from the competition, work with a professional designer. Find and hire a designer to make your vision come to life, or host a design contest and get ideas from designers around the world.
Start a contest
Designers from around the world pitch you ideas. You provide feedback, hone your favorites and choose a winner.
Start a project
Find the perfect designer to match your style and budget. Then collaborate one-on-one to create a custom website.
Wrapping things up
—
Designing an ecommerce website can be tricky—but now that you know the top web design tips for ecommerce, you have everything you need to design a site that not only looks amazing, but converts like crazy.
So what are you waiting for? Use these tips to give your online shop the overhaul it deserves.