Насколько часто каждый из вас посещает интернет-магазины? Наверно, как минимум один раз в неделю-две. То мышку для компьютера надо купить/обновить, то в ближайших магазинах у дома/работы крем для лица закончился, а именно он и нужен! И многое другое, случаев в жизни бесчисленное множество. Но при этом все мы стараемся закупаться в одних и тех же магазинах и только иногда ищем новые, рассматриваем другие сайты. Почему так? Как минимум от того, что они удобны при использовании (не только наличие товара или известность). Отчего же они удобны? Почему, казалось бы, похожие по ассортименту сайты e-commerce совсем разные по посещаемости?
Современный мир электронной коммерции (e-commerce) меняется быстро, гораздо быстрее, чем стандарты корпоративных сайтов или новостных порталов, а значит, это – вызов любому веб-дизайнеру. Вызов, чтобы создать для клиентов возможность удобства покупок и при этом оценить современные тенденции e-commerce и выбрать только самое необходимое для данного вида и конкретного типа сайта.
Но что именно сейчас важно при разработке веб-дизайна интернет-магазина, на что обращают внимание и заказчики и веб-мастера? Мы рассмотрим некоторые основные тенденции, обратим внимание на опыт международных компаний по электронной коммерции и немного прикоснемся к авторским работам этой сферы.
Загадочное меню
Меню в стиле «гамбургера», то есть многослойное, то есть скрытое, с подпунктами и подкатегориями набирает популярность, поскольку позволяет избавить сайты интернет-магазинов от многочисленной лишней информации, страниц и данных. Но, что занятно. Преимущественно, такое меню используют в мобильных приложениях или мобильных версиях сайтов. В десктопном виде оно реже применяется, но имеет и свои вариации. Так, например, интернет-магазины Китая имеют боковое меню, явное и четкое taobao, banggood, gearbest. При том, что дополнительно некоторые категории выносятся на отдельные «плавающие» панели. Мы об этом рассказывали подробнее отдельно. В то же время меню иногда представляется в виде самих товаров Martina Sperl или минималистическим видом Evyi Shop. Также проект Bill Blass представляет интерес, но мы еще вернемся к нему ниже.
И для тех, и для других
Единый дизайн сайта для просмотра на компьютерах, планшетах и смартфонах – обязательное требование заказчиков в 90% случаев. Но работа с адаптивным дизайном весьма сложна, поскольку с каждым годом мониторы пользователями используются с большим разрешением или даже заменяется монитор телевизором. Смартфоны также, при своем огромном ассортименте, обладают разными размерами экрана и разрешением соответственно, и планшеты аналогично. И при этом на всех них сайт должен выглядеть и быть не столько одинаковым, сколько безупречно удобным. Именно поэтому все больше дизайнов создаются с учетом большого разрешения и затем разрабатывается мобильное приложение, либо мобильная версия сайта, либо единый адаптивный дизайн.
Material Design
Material Design до сих пор популярен, как и в 2014 году. Яркий и строгий, он будет еще долго доминировать в веб-дизайне в целом, поскольку идеально подходит для разработки десктопных вариаций сайтов, мобильных, и приложений. Между тем, использовать Material Design для интернет-магазинов сложно, зачастую, можно увидеть частичное его использование, а потому компаний, что решили создать свои сайты в таком стиле очень мало. Например, французский магазин товаров для дома Pa Design, индийский Bewakoof, международный Wildberries, испанский HOMMU. На некоторых Material Design представлен в яркой форме, в иных – как раз таки только основные моменты. Все их лучше видеть вживую.
В движении
Анимация обладает магическим свойством не только придать изюминку сайту любой тематики, но и повлиять на эмоции пользователей, создать удобное взаимодействие с ними, придать нотки доверия и удобства. Главное же, конечно, чтобы движущихся картинок и текста не было в избытке, иначе обильное мигание, мелькание и прочее только отпугнет посетителей.
Новаторы стараются использовать анимацию на кнопках добавления в корзину или добавления в список желаемого товара, значках управления товарами (поворот, увеличение/уменьшения), на загрузочных барах. Интересны варианты анимации в интернет-магазине спортивных товаров из США Fleet Feet Sports, где плитки имеют всплывающий указатель, художественных работ affranchi.myshopify.com, где плитки чуть вздрагивают и меняют оттенок, а проект Good Аs Gold обладает анимационным логотипом, который превращается в загрузочный круг во время прогрузки любой страницы.
Иногда в карточку товаров включают не статическую картинку, а видео товара, как делают это в Wildberries.
Фотографии и видео на витрине
Большие сфокусированные фотографии имеют свою прелесть и способны привлекать внимание покупателей и потенциальных клиентов. Представьте интернет-магазин сумок и рюкзаков, в котором витрина оформлена с помощью фотографий людей, что пользуются этими товарами в различных ситуациях, местности, городах, уголках мира и так далее. Несомненно, это способствует улучшению восприятия товаров и делает выбор необходимого более удобным. Практически все крупные магазины обладают фотографическим оформлением в той или иной степени.
Как правило, фотографии используют на главной странице (витрине), но бывают моменты применения и на страницах категорий или товаров. Более того, вместо фотографий размещают и видео. Примеры ниже наглядно демонстрируют описанное выше. Это и eyeheartworld.org, и helmboots.com, и rebel8.com, и puma.com.
Вариативный поиск
Необычный, но весьма удобный вид поиска приходит не как замена стандартному полю, что располагается обычно в верхней части сайта, а как дополнение. Это горизонтальная прокрутка товаров в категории. Ее удобно использовать при большом количестве товаров, чтобы покупатель имел возможность быстрого ознакомления с ассортиментом. Самыми яркими примерами реализации являются Ozon, Jadopado, Tea Place.
Также стоит отметить, что в моду входят все больше яркие цвета и контрастные, нежели светлые и едва-заметные. Разумеется, не стоит забывать об исследованиях Pantone и создавать акцент на важном невыбеленными окрасами.
Авторские сайты e-commerce
Но одно дело тенденции и стандарты, которые стараются внедрять в большинстве проектов, поскольку они себя уже зарекомендовали, их удобство оценено пользователями, и прочая, и прочая. Другое дело, когда компании по производству авторской продукции желают иметь своеобразный интернет-магазин. И не только красивый внешне, но и удобный. Впрочем, известные бренды стремятся к этому с не меньшим рвением.
NORTHERNISM
Интернет-магазин с минималистическим дизайном, плиточным интерфейсом, красивой типографикой и асимметрией весьма отличается от шаблонных сайтов электронной коммерции. Каждая страница товара содержит подробный текст-описание и несколько простых фотографий, что нагляднее всего представляют товар. Особенность же проекта – обилие фотографий, и не просто товаров на белом фоне, а в живом исполнении, фотографий из быта, то, как представляемая продукция выглядит на даче или квартире, офисе, комнате, на веранде.
Bill Blass
Магазин ритейлер одежды и обуви отказывается от обычных плиток товаров на витрине, а выкладывает продукцию сразу «на стол в исконном виде». При этом все изображения одежды подобраны по цвету, размеру, по стилистике и образу. Если туфельки под платьем, то сочетающиеся, а не сами по себе, если рубашка, то и слипоны, а не мужские модельные туфли, и так далее. И, да, у каждого товара есть всплывающее описание с ценой и названием. Что касается меню, то оно внизу и наверху небольшое, скрытное и разное.
Drybar
Большая цветовая гамма и уточненная анимация по всему сайту придают интернет-магазину уникальность, стиль, шарм и утончённость. Например, подведите курсор мышки к коробке в меню – и она подпрыгнет, к фену – и он будет двигаться верх и вниз. Такая анимация присутствует на всем сайте, но не вызывает раздражения. Что касается карточек товара, то и они имеют всплывающие подсказки. Особенность веб-дизайна – да, в анимации почти всех элементов, даже текст в заголовках вкладок и то подсвечивается. Это способствует обратной связи с посетителями и получения ими приятных впечатлений от посещения.
Подводя итоги
Таким образом, мы представили более наглядные, яркие вариации и примеры того, какими сейчас создаются интернет-магазины и к чему стремятся многие компании мира. Каждый из нас старается невпустую потратить свои заработанные тяжелым трудом сбережения, а потому мы выбираем те магазины, где нам комфортно и уютно, спокойно и понятно, настолько, насколько это возможно. Задумываетесь ли вы о редизайне или новом дизайне, но учитывать основные тенденции необходимо, но это совершенно не означает сразу же бросаться и переделывать то, что уже есть. Разумеется, всегда стоит вопрос о конверсии, о реальной работе дизайне.
И да, возможно банально, но еще и С. Джобс однажды в интервью сказал:
Большинство людей ошибочно считает, что дизайн – это то, как выглядит продукт. Они думают, что это просто внешняя оболочка. По их мнению, дизайнеру просто вручают какую-нибудь коробку и говорят: «Сделай так, чтобы она выглядела красиво». Мы смотрим на это по-другому. Дизайн – это не то, как устройство выглядит, а то, как оно работает.
И данное правило применимо не только к технике и физическим предметам, но и веб-дизайну также, в особенности, к сайтам электронной коммерции.