SECL Group
Компания
40,57
рейтинг
26 ноября 2013 в 15:19

Разработка → Продающий дизайн интернет-магазина. Часть 3. Дизайн элементов tutorial

Третья часть статьи из цикла «Продающий дизайн интернет-магазина». Для тех, кто пропустил первую и вторую, их можно прочитать тут: «Продающий дизайн интернет-магазина. Часть 1. Аналитика» и «Продающий дизайн интернет-магазина. Часть 2. Элементы интерфейса».

Страница товара


Попав на страницу товара, человек должен получить максимум информации о нем. Здесь не работает правило «краткость – сестра таланта». Так как мы имеем дело с онлайн магазином, то наш покупатель лишён возможности увидеть товар вживую, поэтому мы и должны предоставить ему максимум имеющейся у нас информации: детальное описание, технические характеристики, качественные фотографии, отзывы, видео или 3D-обзор. Отзывы для товаров, кстати, изобрел Амазон, внес социальность на сайт, сильно увеличив тем самым конверсию и продажи.

Расположение элементов на странице. Единой схемы расположения не существует, иначе все магазины были бы на одно лицо. Однако стоит придерживаться определенных правил на странице продукта: что более важно, а что менее, что выделять в первую очередь, а что оставить на втором плане и т.д. Поговорим об этом поподробнее.

image


Самые важные элементы здесь, которые должны быть выделены и быть на первом плане – это название продукта, его фотография, цена и кнопка «Купить». Они должны цеплять взгляд в самую первую очередь, а в идеале приводить к «эмоциональным покупкам». Далее по степени важности идут описание товара, характеристики, рейтинг, информация о доставке и другие элементы. Но, несмотря на степень важности, всё это должно быть как можно более скомпоновано, чтобы пользователь при изучении товара не метался из одного конца сайта в другой, а имел всю информацию под рукой. Кроме того, тут самое время вспомнить про AIDA и выстроить элементы так, чтобы пользователь их просматривал в нужной очередности, все больше приближаясь к покупке.

В левом верхнем углу, под названием, обычно располагается блок с фотографиями. Даже если фотографий много – не делайте переход на другую страницу для их просмотра, это грубая ошибка. Пользователь уже на странице товара, до покупки ему осталось совсем чуть-чуть. Увеличение фотографий можно делать там же (как в zappos.com) или во всплывающем окне. Рядом с блоком фотографий расположите описание, рейтинг, возможность выбора дополнительных параметров. Характеристики товара можно расположить ниже, так же как и отзывы. Все элементы должны быть расположены таким образом, чтобы взгляд пользователя переходил от одного к другому также, как он думает про товар. Примерная логика обычного человека идет в такой последовательности (упрощенно): Что за товар? Как он выглядит? Сколько стоит? Какие условия доставки и оплаты? Все элементы, отвечающие на эти вопросы, нужно располагать последовательно, слева направо, сверху вниз. Это и есть наша AIDA.

Рис. 20. Страница товара на сайтах flipkart.com, zappos.com

image

image

Делайте дизайн страницы товара просторным, с расстановкой акцентов на главных элементах, о которых мы писали выше. По возможности не загромождайте страницу. Информация здесь должна быть структурирована отдельными блоками, люди не должны путаться, что к чему, ведь люди любят конкретику.

Демонстрация товара. Фотографии должны быть высокого качества, подробные, большие. Пользователю не всегда достаточно увидеть 3-4 фотографии, чтобы оценить товар. В оффлайн магазине человек может взять в руки интересующую его вещь и крутить её со всех сторон, внимательно изучая, прежде чем купить. Мы не можем предоставить ему такую возможность, зато можем разместить подробные фотографии товара из разных ракурсов. Производитель всегда предоставит вам фотографии (т.н. официальные фотографии), но их обычно лишь несколько, и часто во многих интернет-магазинах они одинаковы. Бывает так, что товар, не самого лучшего качества, выглядит на таких вот официальных фотографиях совсем иначе, намного лучше и красивее. Придраться тут пользователь не может – полученная вещь та же, что и на фото. Но зато он сможет потребовать обратно свои деньги и отправить покупку обратно. Мнение покупателя о магазине, скорей всего, испортится. А для нас с вами это абсолютно неприемлемо. Поэтому мы должны предоставить максимум фотографий, и чем больше, тем лучше. Даже 10-15 штук – этого не будет «слишком много». Также хорошим дополнением будем видеообзор и 3D-обзор. Качество важно во всех точках визуальной идентификации бренда, даже фотографии становятся неотъемлемой составляющей дизайна и имиджа всего магазина.

Рис. 21. Демонстрация товара на сайтах infibeam.com, homeshop18.com

image

image

Отсутствие товара. По принципам SEO-оптимизации, товары, которых в данный момент нет в наличии на сайте, не убирают, они «висят» наравне с другими. Но нельзя просто убрать кнопку «Купить», ничем её не заменив. В таком случае пользователь просто уйдет, и будет искать тот же товар в других магазинах. Мы должны задержать его даже в случае отсутствия. Ведь если товара нет в наличии, но он присутствует на сайте, то, скорей всего, он еще появится, иначе бы его убрали совсем. Вместо кнопки «Купить» должна появиться кнопка «Уведомить о наличии», или «Купить под заказ». Их можно делать не такими красивыми и привлекательными, как была кнопка «Купить», но замена ей всё-таки должна быть. Цена здесь также должна присутствовать, по тому же принципу — не ярким цветом, как было до этого, а приглушенным, еле видным, или серым. Чтобы пользователь интуитивно понял, что товара нет, но не огорчился из-за отсутствия информации о цене или возможности купить под заказ. Обязательно следите за тем, чтобы информация о наличии товара была достоверной. Не все покупатели уточняют наличие, многие сразу добавляют товар в корзину и делают заказ. Нам с вами никак нельзя расстраивать покупателя тем, что заказанной вещи «не оказалось».

Рис. 22. Отсутствие товара, kubikmarket.com.ua

image

Популярные товары. Когда человек просматривает, к примеру, микроволновые печи, нам нельзя стоять в стороне и ждать, когда он наконец что-нибудь выберет. Мы должны ему что-то предложить. Для этого и существует топ категории, лидеры продаж, те товары, которые покупают чаще всего. Существует для этого понятие товары-комплементы и другие приемы. Как известно из психологии, многие люди часто руководствуются мнением других, берут информацию извне, когда не имеют достаточно знаний о предмете обсуждения. Так и здесь. Человек видит, что существуют товары, которые покупают чаще других, и, скорей всего, можно считать их лучшими. Это поможет ему сделать выбор, если он еще не знает точно, что он хочет. Кстати, товары в топе обычно и бывают лучше своих собратьев. Поэтому о топе товаров нельзя забывать.

Рис. 23. Популярные товары, aliexpress.com, infibeam.com

image

image

Расположение. На странице категории блок популярных товаров лучше всего располагать в правой колонке, так как левая будет занята фасетным фильтром. Товары здесь, разумеется, будут принадлежать к данной категории, например, рейтинг пылесосов. Это поможет человеку, если он еще не определился с выбором. На странице товара этот блок может быть расположен внизу, под основной информацией. На случай, если просмотренный товар не понравился покупателю, мы всегда должны предложить ему альтернативу.

Выделить тут нужно 2 момента: название (например «Топ смартфонов»), и второе — сфокусировать внимание человека на том, что это рейтинг, пятёрка (или 7) лучших товаров, а значит нужно визуально показать их лидерство. Как их выделить и убедить пользователя в том, что они лучше? Используйте визуальные акценты, зацепки. Для привлечения внимания можно использовать, например, некую иконку с символом сертификата. Образ сертификата, печати с ленточками подсознательно внушает доверие, придает официальности. А цифры 1, 2, 3… ясно заявят о первенстве, о победе. Пользователь сразу поймёт, что товары с такими ярлыками пользуются повышенным спросом, лучшие из многих.

На главной странице популярные товары могут располагаться в самом центре, под промо-блоком Здесь они уже будут принадлежать не к одной категории, а к разным. Называться здесь этот блок может «Лидеры продаж» или «Наиболее продаваемое».

Отзывы. Позаботьтесь о том, чтобы на вашем сайте стабильно работала система отзывов и рейтинга товара. Готовясь к покупке, 65% пользователей ищет отзывы других покупателей (данные уличного опроса в Москве). Отзывы должны быть живыми, не выдуманными. Сейчас всё чаще применяется интеграция с социальными сетями. Комментировать через социальные сети очень удобно, многие имеют в них аккаунт, и покупателю не придется заполнять никакие поля. Преимущество этого, помимо удобства, в том, что отзыв на товар, оставленный человеком через профиль социальной сети – с фотографией, инициалами. Это внушает больше доверия, чем обезличенные комментарии с восторженными мнениями. Люди должны верить, что отзывы пишут живые люди, такие же, как они. Когда видишь комментарии людей (или даже ваших друзей), которые пользовались, ставили лайки – доверие растет.

Дизайн формы комментариев из социальных сетей имеет стандартный вид и привязан к дизайну этих социальных сетей. Он будет отличаться от дизайна вашего интернет-магазина, но этого не стоит бояться, преимуществ здесь больше, чем недостатков. Сейчас всё больше людей «сидят» в социальных сетях, проводят там огромное количество времени и привыкли к дизайну того или иного проекта. По исследованиям inFOLIO Research Group 2013 г., 84% пользователей Интернет зарегистрированы хотя бы в одной социальной сети, при этом 36% имеют более одного аккаунта. Этим пользователям будет приятно увидеть кусочек любимой «социалки» на сайте интернет-магазина и оставить комментарий привычным для них способом. Так что такой вид комментариев ничуть не испортит дизайн, наоборот, будет узнаваем, а значит — тоже сыграет роль в увеличении конверсии.

Не бойтесь плохих отзывов. Любой товар, даже самый лучший, кому-то может нравиться, а кому-то и нет (по разным причинам: из-за неправильного обращения с ним, индивидуальной неприязни к производителю, или еще что-нибудь). Отзывы всегда есть, плохие и хорошие, но, как правило, у хорошего товара отзывы и рейтинг всегда лучше, соответственно качеству. Визуально можно больше выделить положительные отзывы, сделав тем самым перекос в нужную нам сторону.

Рис. 24. Отзывы на странице товара, aliexpress.com, flipkart.com

image

image

Если у вас уже появились отзывы о магазине, электронные письма, или благодарности с печатями – не бойтесь их показывать! Это вызовет у покупателей еще большее доверие к вашему магазину.

Заказ в 1 клик. Возможность заказать в 1 клик будет удобна тем, кто готов совершить покупку сразу, и как можно быстрее. Заказ в 1 клик – это минимальное количество заполняемых полей, необходимо указать лишь самое основное, например, номер телефона, на который вам перезвонит менеджер и уточнит все необходимые детали. Раньше купить что-то в Интернет было намного сложнее – менеджер присылал вам платежку, её нужно было распечатывать, идти с ней в банк, затем дожидаться, когда получатель увидит ваш перевод. А потом еще ехать на другой конец города в единственное отделение удобного вам перевозчика. Сейчас всё намного проще: для совершения покупки достаточно сообщить лишь номер телефона, остальное менеджер магазина выяснит при звонке. Всё, товар едет к вам! Мы живём в сумасшедшем ритме, часто приходится быстро принимать решения и действовать, а пользователи становятся все более ленивые и разбалованные. Здесь имеет место и вопрос доверия к услугам он-лайн магазинов: делиться своей конфиденциальной информацией не хотят 26% пользователей (inFOLIO Research Group, 2013 г.), а при заказе в 1 клик покупатель дает лишь свой номер телефона.

Рис. 25. Заказ в 1 клик, amazon.com

image

Кнопка заказа в 1 клик не должна визуально конкурировать с кнопкой «Купить». Они не должны конфликтовать по размеру, акценту и значимости. Кнопка эта может быть чуть меньше, другого цвета, но такая же яркая и привлекательная, к ней применимы те же правила, о которых мы писали выше. Если кнопка «Купить» (или «Добавить в корзину») имеет приоритет «№1», то кнопка заказа в 1 клик следует сразу за ней.

Стоимость доставки


Всегда указывайте точную стоимость доставки. Любой человек, совершая покупку, рассчитывает на какую-то сумму, и для него будет большим огорчением, если стоимость покупки, уже при оформлении заказа, окажется больше, чем указывалось ранее. Это может моментально изменить его решение покупать и испортить мнение о магазине. Всегда указывайте актуальную стоимость доставки, если доставка бесплатная – укажите, на каких условиях, и в какие регионы товар будет отправлен бесплатно. Чтобы пользователю было визуально понятно, о чем идет речь, используйте соответствующие ассоциативные образы: грузовой автомобиль, коробка, курьер. На странице товара эту информацию лучше всего расположить в правой части, недалеко от цены, чтобы человек при просмотре товара всегда видел её и мог ориентироваться, в какую сумму ему выйдет покупка вместе с доставкой.

Рис. 26. Информация о доставке, bigbrownbox.com.au, homeshop18.com

image

image

Кнопки


Речь идёт о самых важных кнопках, «Добавить в корзину», «Купить», «Оформить заказ». Эти кнопки наиболее важны, потому что перед тем, как деньги попадут к вам, пользователь должен будет их нажать. Он всегда должен без проблем находить эти кнопки на странице. Они должны быть крупные, яркие, заметные, находиться на видном месте, привлекать внимание. Если в дизайне вашего магазина преобладает какой-то цвет, не делайте их в таком же цвете. Роль их на сайте особая, и цвет они должны иметь особый. Эти кнопки должны быть контрастными (относительно остального дизайна), выделяться из контента, т.е. быть как бы поверх всего. Делайте их такими, чтобы человеку хотелось нажать на такую кнопку. Используйте в верстке состояния кнопок hover, active. Если для маленьких «сереньких» кнопочек это не настолько важно, то здесь кнопку нужно сделать во всей красе.

Рис. 27. Кнопки на сайтах flipkart.com, bigbrownbox.com.au

image

image

Страница оформления заказа


Когда пользователь попадает на эту страницу, знайте: он уже почти совершил покупку, очень важно ничем его не спугнуть и не отвлечь. Здесь не должно быть ничего лишнего, никаких акций и предложений, которые могли бы помешать нашему покупателю совершить покупку. Кроме, разве что, предложения купить данный товар с сопутствующим, который предлагался на странице продукта (например, сумка при покупке ноутбука). И затем – оформление заказа шаг за шагом и совершение покупки. Это конечная цель, путь к которой мы так подробно описываем – продать товар, сделать покупателя довольным и получить свою прибыль.

Рис. 28. Страница оформления заказа, yebhi.com, bigbrownbox.com.au

image

image

Форма подписки


На вашем сайте обязательно должна быть возможность подписки на рассылку. Любой желающий должен иметь возможность получать свежую информацию. Обычно рассылка включает в себя: поступление новых товаров, акции и товары со скидкой, полезные новости и статьи. Так наш подписчик будет всегда в курсе новинок, это также может служить дополнительным стимулом к покупке. Во многих англоязычных магазинах это один из основных инструментов продаж.

Форму подписки можно расположить в футере, или в правой колонке. Это не самый важный элемент на сайте, но он нужен для увеличения продаж.

Для рассылки часто используют сторонние сервисы рассылки. Недостаток их для нас в том, что форма такой рассылки не впишется в наш дизайн, а в хорошем дизайне всё нужно делать с нуля, чтобы была гармония. Поэтому советуем вам использовать свою.

Выглядит эта форма очень просто: обычно это поле для ввода email и кнопка. Если мы собираемся продавать широкий спектр товаров, рассылку нужно конкретизировать. Но не следует делать это сразу, пользователь может просто не захотеть что-то выбирать и заполнять. Давайте выдавать ему информацию порциями. Для начала достаточно лишь формы и кнопки. Предложить настройку рассылки мы можем следующим этапом, в письме с подтверждением. Здесь уже пользователь должен будет выбрать интересующие его категории. В этом случае ему не будет приходить лишняя информация. В дизайне делайте форму подписки заметной, поле для ввода крупным, кнопку видной и привлекательной.

Рис. 29. Форма подписки в футере, beauty.com, zappos.com

image

image

Контактные данные


Публикуйте на сайте свои актуальные контакты, страница контактов не должна быть пустой. Это может снизить доверие к вам. Есть такие интернет-магазины, где указан только один телефон. Как человек может доверять такому сайту и быть уверенным, что его не обманут? Да никак! Данные уличного опроса в Москве показали: «90% опрошенных столкнулись с обманом при совершении покупки в интернет-магазине», мошенников у нас всегда хватает. Распишите подробно все контактные данные, вплоть до адреса склада. Это очередной раз подтвердит вашу серьезность, и укрепит доверие. На странице контактов делайте крупные заголовки «Адрес», «Телефоны», «График работы», чтобы они сразу бросались в глаза. Также можно поместить здесь карту с расположением склада магазина. Если у вас будут офисы и склады в разных городах – можете сделать на странице кнопку выбора города и менять контакты в зависимости от выбранного города. Или автоматически подстраивать эту страницу для залогиненых пользователей, город которых мы уже знаем.

Рис. 30. Страница контактов, ballarddesigns.com, 2modern.com

image

image

Обратная связь


Позаботьтесь о том, чтобы пользователи неотлагательно, в кратчайшие сроки получали ответы на свои вопросы. Не вынуждайте пользователя ждать, в случае длительного ожидания он просто уйдет с вашего сайта и найдёт другой. Это для нас абсолютно недопустимо, мы должны бороться за каждого клиента. Быстрый и качественный сервис – один из важнейших факторов успеха.

Адаптивный дизайн


В век компьютерных технологий развитие техники идёт гигантскими шагами. Не так давно для доступа в Интернет мы традиционно использовали компьютер или ноутбук. Сегодня возможность быть он-лайн сильно расширилась с развитием планшетов, смартфонов, нетбуков и других устройств. Появились так называемые мобильные покупки, покупатель может сделать заказ с мобильного телефона, смартфона или планшета. По данным Forrester Research, 52,6% пользователей, посещающих ваш интернет-магазин с планшетника или мобильного телефона, делают покупки с этих устройств. А раз так – мы должны всё это учитывать, ведь это часть нашей ЦА.

Адаптивная верстка. Выше мы сказали о разных устройствах, с которых человек может зайти в Интернет и сделать покупку в вашем магазине. Все эти устройства, будь то персональный компьютер, смартфон или планшет, имеют разное разрешение экрана (не говоря уже о том, что у мониторов ПК оно тоже разное, в зависимости от размера дисплея и отношения сторон). Поэтому мы и должны применять адаптивный дизайн и верстку. Это нужно для того, чтобы при разных экранах не пропадала информация, не скрывалась за границами дисплея, образовывая горизонтальные полосы прокруток. Чтобы при уменьшении до экрана смартфона мы видели и могли прочитать весь текст, всю информацию. Чтобы сайт, вне зависимости от используемого устройства, всегда оставался информативным и таким, каким мы его задумали.

Рис. 31. Адаптивная верстка, схематично

image

Размер шрифтов. Более 50% населения имеют проблемы со зрением, таким людям тяжело читать мелкий текст, они вынуждены присматриваться, масштабировать сайт. По данным BPS в Великобритании на 2-х покупателей моложе 25 есть 3-е старше 55. Однако мы не можем, основываясь на этом, сделать слишком крупный шрифт для всех. Кто-то останется доволен, а кому-то это покажется гигантоманией. Не забывайте, нам ведь нужна универсальность. Используйте читабельные шрифты средних размеров, не слишком крупные, но и не мелкие, примерно 12-14 px. Речь идёт о шрифтах контента, описание товара, например. Заголовки в любом случае должны быть крупными и выделяющимися.

Рис. 32. Шрифты оптимальных размеров

image

Тестирование юзабилити


Вот вам живой пример: в одном известном украинском интернет-магазине одно время был такой баг: при оформлении заказа на сайте нужно ввести телефон, в поле стоит фильтрация и допускаются только цифры для ввода, зато под полем надпись «например: (067)-123-45-67».

Рис. 33. Ошибка юзабилити.

image

Что мы здесь видим? В примере есть и скобки и тире, которые вводить нельзя, они введутся, но подтвердить заказ будет невозможно, и магазин к тому же не информирует, в чем состоит ошибка. Пользователь делает все, как ему подсказывают, но подтвердить заказ не может. Этот баг вероятно обошелся магазину в несколько тысяч покупателей. Налицо явная ошибка, которая говорит о невнимательном юзабилити тестировании (или о его отсутствии), или об игнорировании проверки функционала через Journey Map. Мы с вами должны избегать таких ошибок.

Когда разработка будет окончена, а магазин запущен, нужно будет постоянно следить за эффективностью его работы, если мы хотим добиться хорошей конверсии и прибыли. Есть такой сервис Яндекс.Метрика. Он позволяет проводить веб-аналитику для повышения эффективности сайта. С помощью этого сервиса можно собрать карту кликов, чтобы уже на работающем магазине видеть, как ведет себя пользователь, в каких частях сайта проявляет большую активность и т.д. Это позволит нам понять, что нужно сделать, чтобы улучшить эффективность сайта.

Рис. 34. Пример карты кликов

image

Подводя итог


Мы постарались затронуть наиболее важные ключевые моменты, связанные с созданием дизайна для интернет-магазина. Чтобы сделать качественный интернет-магазин, дизайнеру недостаточно «уметь рисовать», тут нужно разбираться и в стратегиях, и в маркетинге, и в технологиях.

Если вы решили создать свой интернет-магазин и уверены в своих силах – мы будем только рады, если наши советы помогут вам добиться в этом успеха. Еще пару слов и рекомендаций.

Не используйте шаблоны, которые часто предлагают как наиболее дешевый и наименее трудоемкий вариант разработки. Шаблон – это всегда шаблон, одинаковость и схожесть со многими другими сайтами. Шаблон не учитывает ЦА и другой специфики, а значит и конверсия с шаблоном будет плачевной. Это дешево, но малоэффективно. Нас с вами такое не устроит. Наш магазин должен быть уникальным, чтобы на него обратили внимание.

Не ждите, что дизайнер сделает вам дизайн с первой попытки, это редко кому удается. Создание дизайна – процесс кропотливый и требующий времени. И попыток, если потребуется. Не спешите запускать магазин, если вы не уверены в дизайне, если он не доработан и не доведен до совершенства. Попробуйте посмотреть на дизайн глазами пользователя и убедиться, всё ли понятно, легко ли находить необходимую информацию, перемещаться по сайту. Подключите к этому процессу своих знакомых. Все они могут дать разный ответ, но здесь как раз и нужно мнение разных людей.

И, когда всё будет учтено, продумано, проработано и проверено, вот тогда уже можно запускать ваш магазин и производить фурор. Становитесь маньяками конверсии! В некоторых лучших интернет-магазинах мира этот показатель достигает 20% – вот цель, к которой нужно стремиться! Желаем вам в этом успеха!

Анонсы от автора:

Курсы по электронной коммерции. Совсем скоро в нашей бизнес-школе «Digitov» стартуют практические курсы от авторов статьи: Проектирование серьезных сайтов, Маркетинг для интернет-магазина и Все о создании интернет-магазина. Спешите записаться на курс и получить скидку!

Книга по электронной коммерции. Мы заканчиваем писать книгу по созданию и продвижению интернет-магазинов. Желающие могут оставить заявку и получить первые экземпляры книги. Для этого нужно отправить на email: info@seclgroup.ru письмо-заявку с темой «Книга по электронной коммерции» и сразу после выхода книги мы отправим подробную информацию.

Новые статьи. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на фан страницы SECL Group: Facebook, VK, и Twitter или на фан страницы Digitov, где будут выкладываться обучающие материалы и мероприятия, в том числе бесплатные: Facebook, VK, и Twitter.

Оригинал статьи: http://seclgroup.ru/article_prodayushchiy_dizayn_internet-magazina_dizayn_elementov_3.html

Авторы:

Сергей Яковенко, Senior Designer, компания «SECL GROUP» / «Internet Sales Technologies»
Никита Семенов (Facebook, VK, LinkedIn), CEO, компания «SECL GROUP» / «Internet Sales Technologies»
Автор: @SECL
SECL Group
рейтинг 40,57
Компания прекратила активность на сайте

Комментарии (35)

  • –16
    Вы правда верите в то, что дизайн может быть «продающим» а может не быть? Что продажи зависят от размера и цвета кнопок и т.п.?
    ИМХО, если мне нужна конкретная вещь, то я конкретно и смотрю: на ее параметры (если есть несколько вариантов — изучаю обзоры и подробности из сторонних источников), на цену, на способы доставки. Все. Размеры кнопок… я бы не сказал даже что они меня интересуют в последнюю очередь — они меня вообще не интересуют:)
    • +6
      Огромная куча исследований показывает, что продажи зависят от дизайна. Я ж не говорю, что нужно ограничиться дизайном. Для больших продаж нужно делать много вещей, не только дизайн. Но тем не менее дизайн очень важен и в этом небольшом цикле статей я говорю только про дизайн и не затрагиваю другие сферы.
    • +4
      По вашей логике, получается, что для продаж достаточно сделать таблицу с информацией о товаре. И что дальше!? Такой магазин будет продавать? Он сможет конкурировать? Не знаю как Вы, я люблю стремиться к идеалу и дизайн для меня важен, а в условиях огромной конкуренции покупать я буду именно на том сайте, где мне комфортно.
      • +1
        Хех, есть в Киеве на Подоле магазин, который когда-то был чуть ли ни единственным, кто продавал Панасоник (давно, ещё в 90-е). Не так давно наткнулся на сайт их магазина и вот что он из себя представляет.

        Думаю, NeoCode согласится, что таким сайтом пользоваться не очень удобно и лично у меня не возникло желания покупать что-либо у них, будь оно там хоть на 10% дешевле, чем в соседнем интернет-магазине. Хотя, раз они существуют, то кто-то же что-то покупает?
        • +1
          Хотя, раз они существуют, то кто-то же что-то покупает?

          Судя по кол-ву посещений – никто там ничего не покупает
    • +3
      Оооо поверьте, дизайн бывает продающим и нет. Продажи зависят от размера и цвета кнопок.
      Никого не интересуют размеры и цвета кнопок напрямую, конечно они пришли за товаром — но практика показывает что визуальное окружение при продаже может изменить продажи в два раза и больше
      • 0
        Интересно. А конкретные истории успеха есть?
    • +2
      Мне вот показалось, что уж больно Вы категоричны. Не надо так.
    • +2
      Вы подходите с позиции покупателя-исследователя, но нужно понимать что это редкий клиент. Стандартный клиент — это потребитель. Он не читает тесты и обзоры (ну может посмотрит одним глазком если вещь дорогая для него). Он не смотрит подробности с разных источников, он вообще не разбирается в том что покупает и не очень хочет. Ему просто «надо холодильник» — вот он пришел на страницу — он ничего особо не понимает в холодильниках и в голове включается визуальная часть — как удобно сделана страница, насколько все доступно и понятно, все кнопки очевидны и процесс заказа прост и удобен. Если ему это понравилось — он купил, если нет — ушел в другое место или передумал вовсе. Товар вообще уже вторичен в этом процессе.
      Конечно не все покупатели такие, но эта масса делает ту самую разницу и те самые продажи. Тем кому всё равно — итак все равно, работают на тех кому это важно.
      • 0
        Я покупатель-исследователь, но мне важен и дизайн. По целому ряду причин.
    • +1
      Покупки технологичных товаров с четкими характеристиками происходят несколько иначе нежели покупки одежды например. Вы не можете найти красный свитер, загуглить его и найти минимальную цену, поэтому тут очень влияет удобство и «продающая способность» странички.
    • +1
      Да, есть такое понятие «продающий» дизайн (не путать с рюшечками и «художествами»).
      Потому что 90% магазинов имеют ужасное юзабилити, а потом думают, а почему продажи не идут!

      И дизайн — это не «рюшечки», а в первую очередь, юзабилити и маркетинг. А большие кнопочки — это как раз юзабилити.
      Интернет-магазин — это не портфолио студий и студентов. Это в первую очередь удобство использования и в последнюю «художества» и «рюшечки».

      Нет удобства, что-то раздражает покупателя — не будет продаж.

      Все должно действовать на подсознание! Это вам не обычный сайт. у ИМ другая специфика.
  • 0
    Спасибо за статью. Очень познавательно.
    • 0
      И Вам спасибо за отзыв. Приятно.
  • 0
    Один я считаю, что дизайн и навигация на aliexpress и amazon далеки от идеала?

    Aliexpress:
    Пробовали когда-нибудь оплатить больше 10-ти товаров от разных продавцов, разом? Не получится.
    И авторизацию проходить каждый раз приходится, когда хочется почитать новые сообщения или добавить что-то в корзину.
    Адрес из профиля не хочет подхватывать. И вообще, любого разумного человека должно нервировать, когда на одной странице поиска нельзя вывести больше 30 товаров. В корзину нельзя добавить больше 100. Всякие золотые, серебряные, платиновые статусы приводят только к тому, что сыпятся больше спама.
    Самое главное, кто сейчас делает такой крупный интернет магазин, без возможности оплатить покупки через PayPal?

    А как на счет удаления документов из облачного хранилища kindle? Считаю, что за это вообще ачивку должны выдавать.
    И это только то, что приходит сразу в голову, что уж говорить а различных мелочах, которые никто не хочет исправлять уже который год.

    зы. ссылка от автора digitov.com — я даже не знаю, что к этому добавить.
    • 0
      «что дизайн и навигация на aliexpress и amazon далеки от идеала»
      В данной статье мы не говорили о дизайне в целом, мы показывали отдельные правильные элементы.

      «И авторизацию проходить каждый раз приходится, когда хочется почитать новые сообщения или добавить что-то в корзину.»
      Верно. Таким образом у магазина остаются Ваши контакты и они могут увеличить средний чек. Да и на западе email маркетинг сильные позиции имеет, им важно собирать с пользователей мыла.

      Да и в целом у них другой менталитет. Кроме того, есть принцип: если что-то работает — не трогай. Я бы на их месте занимался важными стратегическими задачами, а не самые удачные мелочи, которые при это все равно работают — это в долгий ящик, как и в любом крупном бизнесе. А в целом да, Амазон не идеален.
    • 0
      Ну, я не настолько крутой ебаер (слово-то какое...) как вы, и переполнение корзины меня не беспокоит. Но скажу, что реально бесит (и это как раз имеет отношение к статье): Приходит на почту письмо от робота aliexpress:
      Продавец написал вопрос относительно заказа 12345000000000777666.
      Всё!!! Ни текста вопроса, ни хотя бы какой именно товар имеется в виду — нет. И это ещё при том, что последние 5 или 6 цифр у всех заказов одинаковые.
      Нафига нужно такое оповещение? Почтовый ящик засорять?
    • +1
      Есть «дизайн», тот который красивый и тд. А есть продающая способность сайта и с этим там все в порядке, и именно эту особенность нужно развивать в сайте, если нужна прибыль. Бывают случаи, когда простота визуального восприятия и есть нужная черта дизайна для высоких продаж. С авторизацией, да — не удобно, но это скорее дань безопасности и защита от забывчивости. В остальном на али лично мне гораздо удобнее чем на ебей, одно сохранение карточек товаров на момент покупки чего стоит.
      • +1
        Причина популярности этих двух ресурсов состоит не в дизайне. Просто Amazon был одним из первых, а Aliexpress — самая дешевая вариация Ebay.

        Да, это не бага кривых кукисов, а такая фича безопасности, как и с то, что Aliexrpess не учитывает информацию из профиля и не запоминает выбранную валюту.
  • –7
    Если мой коммент наберет хотя бы 10 плюсов, то готов подробно расписать почему этот на половину шлак. Написан лишь для привлечения внимания к своей персоне.

    P.S. Из-за кармы смогу ответить только завтра.
    • 0
      плюсанул, но вас сольют с такой позицией. Лучше просто напишите сразу, что в посте не так
    • +1
      Действительно, сольют. Потому что целью комментария кажется именно сбор плюсов, а не желание поделиться информацией.

      Почему статья не шлак? Потому что «привлечь внимание к своей персоне», как вы говорите, — это тоже вполне себе сформированная задача. И с этой задачей авторы справились. Чтобы собрать людей вокруг этой темы, продвинуть курсы, свои имена и компанию, не нужно писать действительно хорошие статьи. Достаточно написать чуть лучше среднего по «клинике». После них будут другие статьи, ещё чуть лучше, и так далее. Пока не найдётся тот, кто действительно захочет поделиться информацией об интернет-магазинах вне контекста самопродвижения.

      Любые прикладные советы по созданию интернет-магазинов должны основываться на функциональных требований. Которые, в свою очередь, тоже не из пустого места берутся. Чаще всего они нацелены на извлечение максимально возможной прибыли. Но опять же, различия между краткосрочными (срубить денег на товаре, который через две недели потеряет актуальность) и долгосрочными (продажа дешёвого товара, который востребован всегда, но требует для успеха сбора огромной аудитории) стратегиями будут колоссальными.

      Чтобы не быть голословным, приведу примеры, процитировав пару предложений из статьи.

      «Попав на страницу товара, человек должен получить максимум информации о нем». Если речь пойдёт о китайском телефоне, то к набору информации о нём нужно относиться очень трепетно. То же касается лекарств, не прошедших должных испытаний. Или кредитных товаров. Чем меньше информации выдаётся, тем больше шанс получить клиента.

      «На странице категории блок популярных товаров лучше всего располагать в правой колонке, так как левая будет занята фасетным фильтром». Если целевая аудитория магазина — пользователи мобильных устройств, то фильтрацию лучше размещать справа. Особенно, если эта фильтрация динамическая и применяется к списку товаров без перезагрузки страницы. Если разместить её слева, то изменяющийся список товаров в каталоге будет закрыт рукой пользователя. И даже тут мы можем придумать, когда это правило перестаёт действовать (если мы продаём товары для левшей, например). Также, если на сайте с каталогом и фильтрацией существует много другого текстового контента, занимающего лишь одну колонку, то приятней будет, если контентная область не будет скакать на ширину блока фильтрации от страницы к странице.
      Что касается самого блока популярных товаров, то его чаще всего нужно располагать в том месте, где покупатель уже закончил с контекстом ознакомления с текущим товаром. Например, внизу страницы.
      И, как и в любом примере, я мог бы сам себе возразить, придумав новые возможные контексты.

      «На вашем сайте обязательно должна быть возможность подписки на рассылку». Если нам действительно нужно, чтобы народ подписывался, то мы можем… подписывать его по умолчанию, в первом же письме, с сообщением об успешном заказе товара, уведомляя его о том, что он подписан, что мы не спамеры, трепетно относимся к подписчикам и что отписаться можно на такой-то странице.
      Опять же, если мы рассчитываем два месяца поторговать ходовым товаром, а потом закрыться, то нам подписка не нужна.

      «Адаптивная верстка». Тема холиварная. Лично я придерживаюсь мнения о том, что современные гаджеты спокойно справляются с сайтами и без адаптивных вёрсток. Минусы адаптивной вёрстки:
      — Приходится заново знакомиться с интерфейсом, к которому привык на определённом типе устройств;
      — Дополнительная напрягающая деятельность по поиску ссылки, ведущей пользователя на полную версию сайта. Ага, попробуйте зайти в свою группу в контакте с мобильного устройства (например, с айпада, у которого разрешение экрана больше, чем у моего настольного компьютера) и переключиться на полную версию. Будете листать ленту, увеличивающуюся «на лету» вниз, пока не дойдёте до подвала. А если попробуете убрать букву «m» в адресе, то при перезагрузке всё равно попадёте в мобильную версию, т.к. она автоматически определится сайтом;
      — Существенное удорожание разработки

      К чему я это всё? Крутые создатели веб-продуктов мыслят не шаблонными решениями (хотя не хочу умалить их важности! чем больше шаблонов в голове, тем лучше!), а контекстным и функциональным обоснованием любой мелочи в проекте. Поэтому я всегда очень трепетно отношусь к статьям, в которых безо всякой аналитики люди делятся конкретными примерами из своего опыта, описывая контекст, решение и результат.
      • 0
        Я тут недавно. Скажите, а возможно ли добавлять комментарии в избранное? :)
        • +2
          • 0
            Век живи — век учись. Спасибо.

            Upd: Честное слово, у меня до сих пор в избранном живет штук пять тем из-за комментариев, правда спасибо.
      • 0
        Минусы адаптивной вёрстки…

        Вы описываете не адаптивную вёрстку, а мобильную версию, т.к.:
        — адаптивная вёрстка не меняет кардинально интерфейс, только подстраивает под разрешение устройства — изменяется главное меню, масштабируются изображения, меняется количество блоков в строках.
        — отсутствует «полная версия» сайта — она всегда одна.
        — удорожание невелико — увеличивается стоимость вёрстки и немного — дизайна.

        Тонну примеров адаптивных сайтов можно посмотреть здесь: mediaqueri.es/
        • 0
          Я действительно привёл неправильный пример с полной версией сайта и контактом. Проверил на своём блоге на вордпрессе — никаких переходов к полной версии не наблюдается. А вот интерфейс всё-таки поменялся. Меню свернулось в псевдоссылку, блоки из правой колонки ушли в подвал.
          Мне вот интересно, встречали ли вы когда-нибудь адаптивный дизайн для чего-нибудь более функционального, чем блоги, портфолио и новостные ресурсы?
          В статье «продающий дизайн интернет-магазина» написано «адаптивная вёрстка». Помогите мне кто-нибудь найти такой проект в реализованном виде? Наверное, адаптивная вёрстка блога не сильно повлияет на его стоимость, а вот что случится с корзиной, избранным, формами и прочими радостями в интернет-магазине?
          • 0
            Думаю всё дело в сложности. Для блогов, портфолио и новостных порталов гораздо проще делать адаптивный дизайн — акцент сосредоточен на одном компоненте, как правило — тексте статьи, всё остальное можно скрыть/сдвинуть/свернуть/сжать. В магазине же много элементов, которые надо как-то впихнуть в прокрустово ложе маленьких экранов. Но деваться-то некуда — зоопарк устройств настолько огромен, что определить на чём просматривают сайт становиться всё сложнее — android может быть на телефоне, планшете, телевизоре (как вам мобильная версия сайта на 50-ти дюймовом экране телевизора?), поэтому надо «привязываться» к разрешению экрана и адаптировать именно под него, а не устройство.
      • 0
        «Если речь пойдёт о китайском телефоне, то к набору информации о нём нужно относиться очень трепетно. То же касается лекарств, не прошедших должных испытаний. Или кредитных товаров. Чем меньше информации выдаётся, тем больше шанс получить клиента.»
        Это уже обман клиента. Я писал про качественные товары. Тот же китайский телефон может быть в каталоге среди других производителей и конкурировать с ними ценой, а покупатель уже должен иметь возможность выбрать среди товаров разного качества и цены.

        «Если целевая аудитория магазина — пользователи мобильных устройств, то фильтрацию лучше размещать справа. Особенно, если эта фильтрация динамическая и применяется к списку товаров без перезагрузки страницы. Если разместить её слева, то изменяющийся список товаров в каталоге будет закрыт рукой пользователя.»
        И тем самым вы поместите фильтры в слепую зону. Да и еще если кто-то зайдет маленького разрешения, он может не увидеть их вовсе. Да и такие случае бывают крайне редко.

        «Если нам действительно нужно, чтобы народ подписывался, то мы можем… подписывать его по умолчанию, в первом же письме, с сообщением об успешном заказе товара, уведомляя его о том, что он подписан, что мы не спамеры, трепетно относимся к подписчикам и что отписаться можно на такой-то странице.»
        Так и надо делать. Подписывать человека всеми возможными способами.

        Вы в целом правильно мыслите, но описали скорее исключения, чем правила. Я в статью, без привязке к конкретной тематике и особенностям, писал общие рекомендации.

        «К чему я это всё? Крутые создатели веб-продуктов мыслят не шаблонными решениями (хотя не хочу умалить их важности! чем больше шаблонов в голове, тем лучше!), а контекстным и функциональным обоснованием любой мелочи в проекте. Поэтому я всегда очень трепетно отношусь к статьям, в которых безо всякой аналитики люди делятся конкретными примерами из своего опыта, описывая контекст, решение и результат. „
        Для того, чтобы сделать правильно, нужно знать как можно больше вариантов. А головой думать в процессе работы никто не отменял ;)

        • 0
          «Вы в целом правильно мыслите, но описали скорее исключения, чем правила. Я в статью, без привязке к конкретной тематике и особенностям, писал общие рекомендации».
          А я в комментарии развёрнуто написал, что уважаю и поддерживаю ваш труд, но ценность всех типовых решений можно выявить только зная, в каких контекстах те или иные решения используются.

          Мы могли бы до бесконечности отвечать друг другу по каждому пункту. Более того, во время этой дискуссии оба обязательно научились бы чему-нибудь новому. Но если бы мы пошли с другого конца, с контекстов, то всё было бы очевиднее.

          Вот ваш же ответ на первый мой пример: «Это уже обман клиента. Я писал про качественные товары». В том-то и дело, что вы могли писать про качественные товары, а аудитория этого не знала, потому что вы ей об этом не сказали. Это и есть контекст. А если бы ещё определить рамки качества, то было бы ещё понятней. Китайский телефон был не лучшим примером в любом случае. Кредитная карта или квартира в строящемся доме — вот где из продавцов приходится доставать информацию всеми возможными способами.

          С фильтрами в слепой зоне не соглашусь. Иначе тот же яндекс.маркет допускал бы огромную ошибку, во что не хочется верить. А про маленькое разрешение — вот он, один из контекстов, о которых я и говорил.
          • 0
            Головой нужно всем думать, даже если есть самая подробная статья, которая казалось бы все учитывает)
  • +1
    Спасибо за наводку на Palladium boots. Ну и за статью, само собой. :)
    • 0
      Всегда рад помочь)
  • 0
    Примеры не лучшие подобраны.

    Прочитал все 3 статьи цикла и не увидел таких важных практических советов по юзабилити как:
    — комментарии без капчи
    — покупки без обязательных регистраций
    — отображение наличия определенных размеров, цветов товара в реальном времени

    и много-много прочего

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка