SECL Group
Компания
43,21
рейтинг
21 ноября 2013 в 15:31

Дизайн → Продающий дизайн интернет-магазина. Часть 1. Аналитика tutorial

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

Это первая статья. Всего их будет 3.

image



Вступление


Сегодня всё больше людей совершают покупки в интернет-магазинах. Процент таких покупок с каждым годом растёт и всё больше набирает обороты. В России 22 млн. человек покупают в онлайне (по данным агентства Data Insight 2013 г.). Сейчас практически всё можно купить в Интернете, и все те товары, за которыми раньше мы традиционно ходили на рынки и в супермаркеты, теперь мы можем найти и купить, не выходя из дома. Масштабы интернет-магазинов самые разные, от крупных мировых лидеров, таких как Amazon, Ebay, Alibaba и др., где можно найти самые различные группы товаров, до небольших тематических магазинов.

Как и в любой розничной торговле, здесь существует огромная конкуренция. Создать и запустить интернет-магазин в наши дни стало проще, чем это было каких-то 10-15 лет назад. Интернет-магазинов сейчас становится всё больше и больше, но вперед вырываются лишь немногие. Единицы из них имеют хорошую конверсию и, как следствие, высокую прибыль.

В чём же секрет? Как сделать интернет-магазин успешным? Кроме грамотно продуманной стратегии и хорошего маркетинга, необходимо создать привлекательную оболочку, внешний вид. По статистике, человек в течение лишь нескольких секунд решает (на уровне подсознания), оставаться ему на сайте или нет. Немногие из нас могут отличить понятия «красиво» от «некрасиво» мгновенно, лишь взглянув на что-то, но наше подсознание – уж оно то знает, что к чему. В данном случае это выбор решения – остаться на сайте или продолжить путешествовать по другим интернет-магазинам. Решит ли сам человек, «да, здесь всё понятно и просто, этому магазину можно доверять», или за него это сделает подсознание – не столь важно, наша цель – задержать человека на сайте, будь то потенциальный покупатель, целенаправленно ищущий конкретный товар, или простой пользователь, который зашел на сайт случайно. Наша задача – задержать обоих, сформировать у них хорошее мнение о магазине, вызвать доверие и привести их к покупке. Не сейчас, так позже.

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

В этом случае он с высокой долей вероятности станет постоянным покупателем. И вот у нас есть довольный клиент, который будет делиться мнением о хорошем интернет-магазине со знакомыми и друзьями, которые тоже придут и будут делать покупки. Останется лишь поддерживать сервис на высоте, предлагать выгодные условия и развивать лояльность клиента. Постоянных покупателей, довольных покупками, будет становиться всё больше и больше, пойдёт рост продаж и прибыли. И вот он, долгожданный успех!

Почему дизайн так важен для интернет-магазина?


Мы сегодня не будем говорить «обо всем», а сосредоточимся только на одной стороне создания успешного интернет-магазина, а именно – на дизайне. Поговорим о визуальной оболочке, интерфейсе. Затронем, конечно, и юзабилити, как же без него?

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

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

Рис. 1. Примеры интернет-магазинов с хорошим дизайном: goodlife.com, flipkart.com, beauty.com.

image

image

image

Каким должен быть успешный дизайн для интернет-магазина?


Первое, что мы должны понять и признать, – это то, что мы делаем дизайн для широкой аудитории. Пользователи интернет-магазинов самые разные: люди разных возрастов, взглядов, вкусов, разного социального положения. Конечно, есть узкотематические интернет-магазины с узкой ЦА, но это скорее исключение, чем правило. Так что, кроме уникальности, о которой мы писали выше, крайне важно сделать наш дизайн универсальным и понятным любому пользователю, будь то ультрамодный тинэйджер, успешный бизнесмен, или сердобольная старушка. Всем должен быть понятен наш сайт. Каждый человек уникален и индивидуален, у всех нас свои вкусы и взгляды. Но в дизайне, как и в любом другом виде искусства, есть своя классика, то, что проходит через время, поколения и не меняется.

«Мода проходит, стиль остается», как гласит известное высказывание. Мода диктует новые тенденции дизайна, в том числе и в веб-индустрии. Сегодня актуально что-то одно, завтра оно сменится другим. Но, если мы хотим приблизиться к универсальности, нам нужно делать упор на то, что признает каждый из нас, несмотря на время и тенденции моды. Это классика. Она есть во всём. Простота и в то же время богатство, однородные цвета, простые формы, внимание к деталям. Это всегда будет актуально. Возьмите, к примеру, автомобили Mercedes Benz классического черного цвета. На одном из них ездил Штирлиц, а сегодня ездят главы государств и многие другие. Мерседес не нужно красить красным цветом в белый горошек, чтобы угодить моде. Это классика, эталон дизайна, это выражение бренда, то, что всегда было актуально, то, что всегда будет на уровне и на ступень выше любого другого дизайна.

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

Рис. 2. Еще примеры хорошего дизайна, zappos.com, 2modern.com, tmlewin.co.uk

image

image

image

Рассмотрим основные этапы создания дизайна, а также отдельных его элементов.

Исследования и аналитика


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

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

Маркетинг в дизайне


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

AIDA. В маркетинге существует такая модель как AIDA. Расшифровывается это так: Attention, Interest, Desire, Action (Внимание, Интерес, Желание, Действие). Принцип её – общий порядок событий, которые могут возникнуть, когда потребитель взаимодействует с рекламой, а в нашем случае – с контентом на страницах сайта. Пользуясь этой системой, мы можем «продать за 4 шага».

AIDA является бизнес логикой, которую мы рекомендуем использовать при создании дизайна. Эта модель может применяться на всем сайте в целом и на отдельных его страницах. У каждой из этих страниц может быть своя цель, для достижения которой можно использовать АИДУ.

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

Рис. 3. Как работает AIDA на примере страницы товара

image

По статистике, более 30% посетителей уходят с сайта после оформления покупки, не завершив её. Они передумывают, или что-то их отвлекает, или недостаточно продумана логика их мышления. Чтобы снизить этот процент, рекомендуем вам использовать AIDA. Это, несомненно, сыграет большую роль для достижения целей сайта и увеличения конверсии. Но мы говорим в этой статье не о маркетинге, а о дизайне, поэтому едем дальше.

Юзабилити


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

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

Сценарии поведения в нашем случае могут иметь разные логики: старт пользователя с главной страницы магазина, при переходе в магазин из поисковой системы, социальной сети, баннера и др. По данным исследований inFOLIO Research Group, в 2012 году самым популярным средством поиска товаров были поисковые системы – 92% аудитории. Если пользователь, например, искал конкретный товар через поисковую систему и попал на наш сайт – он окажется на странице нужного ему товара, или на странице категории, или на странице статьи-обзора. Одним словом, близко к цели. Но если он у нас впервые – само собой, у него могут возникнуть сомнения, можно ли доверять этому магазину. Его могут заинтересовать разделы «О магазине», или «Контакты», чтобы убедиться в том, что магазин «живой» и его не обманут. Кажется, наш покупатель отклонился от цели, ушёл со страницы товара. Вот поэтому и продумываются разные сценарии поведения, которыми мы с вами должны руководствоваться, создавая дизайн. Если наш покупатель оказался, допустим, на странице контактов, напомните ему о его цели, например, с помощью блока «недавно просмотренные товары». Он увидит фотографию того, что искал, вспомнит, что хотел это купить, и вернется к своей цели.

Рис. 4. Пример сценария поведения по получении консультации

image

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

Рис. 5. Пример Journey Map

image

Зачем мы всё это описываем в статье про дизайн? Дело в том, что дизайнер должен мыслить не только как дизайнер, но и как маркетолог, как юзабилист, и как покупатель тоже. Когда мы уже провели исследования, изучили ЦА, проработали маркетинг и собираемся делать дизайн – дизайнер наш должен построить свою работу на основе результатов предыдущих этапов. Как бы взять заложенный фундамент и на его основе уже строить, делать дизайн. Так как всё это – командная работа, последовательная и взаимосвязанная.

Проектирование


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

Зачем нужно проектирование? Многие до сих пор начинают делать дизайн без проектирования, это очень и очень неправильно, это всегда ведет к бесконечным переделкам и никогда не приведет к успеху. Давайте рассмотрим основные задачи проектирования и прототипирования.

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

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

Рис. 6. Прототип главной страницы интернет-магазина Kibet

image

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

Рис. 7. Тот же Kibet, но уже в дизайне

image

Внешний вид, цветовая гамма


По-настоящему хороший дизайн магазина – этот тот, который не сильно заметен. «Хороший дизайн виден сразу. Отличный дизайн незаметен» как выразился Джо Спарано. Дизайн не должен отвлекать внимание пользователя от просмотра товаров, изучения информации, совершения покупок. Но при этом дизайн должен вызывать у пользователя правильные эмоции, которые подготовят его к совершению покупки. Это две стороны медали, которые вызывают конфликт: как сделать дизайн незаметным, но эмоциональным? Ниже мы постараемся ответить на этот вопрос. Очень часто многие допускают ошибку, делая красивые картинки, анимацию и другие «навороты» в дизайне интернет-магазина, но ведь цель то у нас какая? Мы ведь делаем дизайн для покупателей, а не для заказчика, помните это. И, так как это интернет-магазин, где продают товары (а они – самое главное здесь), то нам и нужно выставить их на передний план, а дизайн пусть будет на втором плане, как дополнение и завершение общей картины.

Рис. 7. Примеры, infibeam.com, alibaba.com

image

image

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

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

Рис. 8. Примеры цветовых схем известных интернет-магазинов: ebay.com, amazon.com, bigbrownbox.com.au

image

image

image

Цвет фона также рекомендуется делать однородным, чистым. Если и применять паттерн, то лучше еле видный, неброский или однородный. Фон не должен отвлекать внимание от информации.

Рис. 9. Примеры использования паттернов и фоновых изображений, hushbabies.com, ballarddesigns.com

image

image

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

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

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

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

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

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

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

Авторы:

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

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

  • 0
    Отлично написано, с удовольствием ждём продолжения!
    • +1
      Спасибо. Вторая и третья статья будет на следующей неделе опубликованы на Хабре. Они более углубленные в интерфейсы и дизайн, это больше общая, вступление так сказать…
      • 0
        Удачное вступление, как раз раскрыта суть основ, сейчас занимаюсь проектированием и разработкой одного сайта, следуя основам изложенным в статье — получается меньше головной боли и больше толку, особенно оценил когда перед дизайном проектирование страниц.
    • +5
      Слишком все поверхностно.
      Вот смотрите хороший дизайн… а где плохой?
      И чем один лучше другого для пользователя?
      Где про юзабилити? Фраза «не должно быть ничего лишнего», конечно, относится к юзабилити, но этого по-моему недостаточно.

      ИМХО: дизайн надо рассматривать в контексте тематики магазина, и юзабилити тоже.
      Для примера:
      Магазин электроники: с 100000 товаров.
      Главное в нем не дизайн, а удобство поиска и навигации.

      Магазин мебели: с 100 товарами.
      Тут дизайн на первом месте.
      С навигацией можно извратиться (сделать необычно, но удобство все-равно должно быть), а поиск вообще убрать!
      • +1
        Мы у себя разделяем проектирование и дизайн. Через неделю начну публиковать большой цикл статей именно по проектированию, опишу все функции интернет-магазинов до мелочей, а тут речь больше и «стиле и цвете», собственно я писал это в статье.
        • 0
          да, дизайн — такая субъективная вещь, согласен. Тоже по-моему от тематики магазина зависит. Можно смотреть на мегамоллы всякие, Амазон, Ибэй… Можно смотреть на моно-брендовые магазины: Sony, Apple —
          Первые простые и дизайном по большому счету не обремененные…
          Вторые пытаются показать свой товар в оригинальном, красочном виде — там есть на что посмотреть.

          Но и задачи у них разные.

          Еще пример: сайт с дорогими вещами — реально дорогими: от 300 т.р. не должен выглядеть простецки… Как бы это сказать: ну не ассоциируется ролл-ройс с оранжевым или розовым цветом… и самое главное с этими вот вечными суетливыми показами кучи объектов. Ну купи вот это — ну хоть вот это… ну или хотя бы вот это…
          А такое поведение мы видим во всех крупных интернет-маркетах… И это считается хорошим опытом… И возможно там это и работает… Но ведь есть и другие тематики

          Я к тому, то нельзя вот так обобщать как это делаете Вы
          • 0
            Опять же, я писал в статье про цель. А сами шаги они общие и применимы к любой тематике и любой цели. В любом случае, нельзя что-то делать бездумно, даже имея самую подробную инструкцию. Почти в любой моей статье я лишь показываю путь, куда можно двигаться, но пройти по этому пути нужно еще с головой.
  • 0
    Огромное спасибо за пост! Одна из самых крутых статей на тему дизайна интернет магазинов.
  • +2
    А есть ссылки на исследования, которые показывают, что интернет магазин «с хорошим дизайном» имеет выше конверсию чем магазин с не «хорошим дизайном»? (я использую дизайн в вашей терминологии, как дизайн без юзабилити, удобства и других важных нюансов)
    • 0
      В данном случае есть отличный живой пример:
      Заходите в районный магазинчик, с ремонтов которому уже лет 20, товары размещены в плохо освещаемых витринах, и заходите в современный супермаркет где всё под рукой, продуманы мелочи. Вопрос, где вы больше проведёте времени и оставите больше денег?
      • +2
        Аналогий можно провести много, но они ничего не подтверждают. Эстетическая составляющая носит субъективный характер, кому-то нравятся плоские кнопки, кому-то градиенты.
      • 0
        Посмотрите на дизайн сотомаркета и на дизайн пандавила или алибабы.

        По красоте сотомаркет рулит, по конверсии не думаю.
      • 0
        Тут больше вопрос ассортимента.
  • 0
    Недавно в блоге на сайте писал про увеличение конверсии palpalych.ru/blog/7-prochee/319-10-sposobov-uvelichit-konversiju-internetmagazina.html
    Удачный дизайн/редизайн может даст прирост конверсии до 300%. Личный опыт показывает, что уже 250% уже реально.

    Дизайн важен, но только разработчики должны смотреть на него не как разработчики, а как конечный покупатель в ИМ. И конечно не забывать про основы Юзабилити (в лице автора Якооба Нильсена)
    • 0
      Долго искал, где же я еще видел подобную статью. Оказалось, на cossa. Посмотрел на автора) Хорошая статья
  • +5
    Не хватает отрицательных примеров. Не продающих дизайнов.
    • 0
      Поддержу, в будующих статьях хотелось бы видеть неудачные решения (желательно с обоснованием почему), пусть и отвязанные от конкретных ресурсов.
    • –1
      В 3й части есть один пример неудачного. Но в целом как делать не нужно полно примеров, почти каждый региональный интернет-магазин. Если честно, я в целом не очень люблю негативные примеры, поэтому в своих статьях редко использую.

      Постараюсь учесть на будущее, но не обещаю)
      • +1
        Одними хорошими примерами научить людей делать нормальные сайты не получится. Когда я увижу у вас в плохом примере что-то похожее на свой последний проект, мне дойдет быстрее. Иначе я просто буду всю дорогу копировать хорошие примеры.
      • +1
        На ошибках учатся.
    • 0
      Поддерживаю.
  • 0
    Большое спасибо за статью, очень кстати.
  • 0
    Дизайнер, каким бы опытным он ни был, не может и не должен всё знать и уметь.

    Конечно. Всё знать и уметь должен проектировщик.
    • +1
      А вот об этом цикл следующих статей: 70 страниц полезной информации про проектирование интернет-магазинов ;)
      • +1
        Если нужна помощь, обращайтесь. У меня около 30 прототипов интернет-магазинов в портфолио и книга под редакцией интернет-буржуя Андрея Рябых об интернет-магазинах для начинающих. Буду за вами следить.
        А по поводу моей иронии в предыдущем комментарии: сейчас профессиональный проектировщик действительно должен знать так много обо всём, что идущего за ним дизайнера впору переквалифицировать в иллюстратора сайта.
  • 0
    Спасибо. Статья очень понравилась. С нетерпением жду продолжения.
  • НЛО прилетело и опубликовало эту надпись здесь
    • –1
      Это крупнейшие магазины мира, которые к тому же отлично продают. А в целом дизайн — дело вкуса.
      • НЛО прилетело и опубликовало эту надпись здесь
        • –1
          Лада — не сайт.

          Давайте с обратной стороны, что в Вашем понимании «хороший дизайн»?
          • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              Дизайн красивый, но вот продавать будет плохо, уже вижу у каждого примера кучу ошибок в проектировании. Это проблема всех шаблонов, их ресуют дизайнеры, а магазин должна делать команда из проектировщика, дизайнера, маркетолога и других специалистов.
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Нельзя смотреть только на одну часть сайта и забывать про другие. В статье я не мог писать сразу про все, писал только про часть, но при этом делать не призыв однобоко. Безусловно дизайн должен быть одновременно и красивый и продуманный с точки зрения проектирования!
  • +3
    Один я заметил, что эта статья — лишь перепевка бестселлера «Call to action» Айзенберга?
  • +3
    <занудство><отступление>
    Возьмите, к примеру, автомобили Mercedes Benz классического черного цвета. На одном из них ездил Штирлиц, а сегодня ездят главы государств и многие другие. Мерседес не нужно красить красным цветом в белый горошек, чтобы угодить моде.

    Фирменный цвет Мерседес — серебристый.
    А у БМВ — белый.
    Черный цвет это Российская реальность.
    </занудство></отступление>
  • 0
    Вот у вашей компании интересный дизайн, хотя гугл со мной не совсем согласен (хотя инженерная часть в визуальном восприятии всё же играет не ключевую роль). А то, о чем вы написали, примеры, которые привели, — всё это укладывается в рамки одного шаблона, все они сделаны как будто под кальку.

    Я как пользователь заблудился на амазоне в первый раз. Он неудобен. Регистрироваться, цеплять карту, искать товар, изучать варианты. Но потом привык. И никогда не обращаю внимания на дизайн, точнее его отсутствие, и кучу мусора, в которой выискиваешь нужную тебе информацию. И с остальными интернет-магазинами то же.
    Единственное, что меня интересует — это варианты оплаты/доставки и гарантии продавца. Если с этим всё ок, можно доверять. А дизайн… Есть? Ок, плюсик в карму. Нет — не страшно. Главное, что кнопка «Добавить в корзину» работала корректно.
    • 0
      Нашему сайту, его новой пятой версии, всего несколько дней. Еще не успели оптимизировать. Все будет ;)

      А по поводу Вашего пользовательского опыта — я в целом согласен. Но не все также думаю. Некоторым нужен блок задать вопрос, некоторым важен рейтинг и т.д. Важно сделать удобный и незаметный дизайн, это ведь не промо-сайт. Да еще и угодить многим. Вот пример с тем же Амазоном, который Вы привели: ведь Вы привыкли? Наверняка купили что-то? И будете покупать дальше, верно? Почему Вы покупаете именно в Амазоне, а не в других магазинах? Все это результат работы компании, в том числе их сайта. В интерфейсе может показаться, что элемент лишний, а в реальности он может увеличить средний чек на 20%. Так что все относительно, но к идеалу нужно стремиться.
  • +4
    Я давно уже понял, что самое важное в интернет-магазине — это его бизнес-процессы. Именно по тому, что происходит «за кадром» и становится популярным тот или иной интернет-магазин. Дизайн-студия имеет в данном случае слишком маленькие полномочия, она может лишь сделать максимум красоты и удобство по дизайну, но она не изменит самого важного и не добавит «плюшек», если только этого не захочет клиент.

    Почему все любят заппос? Или тот же асос? Это же банальные, простые, ну ок — аккуратные магазины. Но контент! Какие фотографии, какие видео-ролики и доступные описания. Какой прекрасный подбор образов (если речь об одежде). Как удобно оплачивать товар, какие понятные емейл-нотификации и трекинг покупки. Каждый клик мышкой отзывчив. Не понравился товар — можно вернуть без проблем. Не дошло — все компенсируют. Простыми цветами такого не добьешься, но многие заказчики этого не понимают. Я для себя давно сделал вывод: дизайн — это не как вещь выглядит, а как она работает. В этом плане, надо наступать клиентам на яйца, если это того требует и учить продавать — от их успешности будет зависеть и то, какими будут будущие клиенты. Нарисовали удобную корзину? А теперь пора нарисовать интерфейс коллектора товаров на складе, интерфейс водителя, который товар везет. Вот, где начинается настоящий дизайн.
    • +1
      Согласен! Поэтому и нужно очень качественное проектирование. Про это буду рассказывать в следующих статьях. В этот раз получилось немного не по порядку, ведь сначала делается проектирование, а потом уже дизайн.
  • 0
    А можно примеры плохих дизайнов интернет магазинов? С разбором — почему это плохо?
    • 0
      rozetka.com.ua/ — крупнейший интернет-магазин Украины:

      1. В меню 8 пунктов, нарушено правило 5+-2, внимание пользователя рассеивается.
      2. Промо-блок на главной очень невзрачный и маленький, не вызывает желание что-то купить, да и заметно его плохо. В промо-блоке 14 (!) слайдов, которые вряд ли кто-то когда-то посмотрит полностью.
      3. На главной нет популярных товаров и новинок, ценная страница используется слабо.
      4. Магазин плохо персонализирован, хотя информации о пользователях у них много.
      5. Логотип с 90х, да и сам дизайн по стилю устарел.

      Могу в нем найти больше 50 ошибок или предложить улучшения, хотя для Украины это очень неплохой инетрнет-магазин. Во многом это связано с тем, что он морально устарел, ему уже много лет) Но даже несмотря на это, магазин довольно хорошо проработан по юзабилити.
      • –1
        Пара вопросов:
        1. Почему вы считаете, что в меню должно быть 5+-2 пунктов? Интересует точная ссылка на исследования по этому поводу, а не статьи, где этот факт подан как нечто очевидное. И что делать, например, Амазону с его гигантским ассортиментом?
        2. Зачем критиковать заведомо слабый магазин? Да, большой ассортимент и куча функций, но с точки зрения дизайна — нечитаемая каша.

        Получилась очередная статья начального уровня, каких тысячи. Нужны более серьезные вещи — с цифрами и неочевидными примерами.

        • 0
          Напишите более серьезные вещи, кто ж Вам мешает? А я рассказываю более серьезные вещи тут: digitov.com/course/ux-ui-design-courses и платно, при этом еще и бесплатно много статей и тренингов делаю. Почему-то почти все в СНГ считают, что все должны работать бесплатно. Я бесплатно уже поработал, написал эту статью, если она не нравится — напишите лучше.
        • 0
          Про правило 5+-2 вот информация: ru.wikipedia.org/wiki/%D0%9C%D0%B0%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D1%87%D0%B8%D1%81%D0%BB%D0%BE_%D1%81%D0%B5%D0%BC%D1%8C_%D0%BF%D0%BB%D1%8E%D1%81-%D0%BC%D0%B8%D0%BD%D1%83%D1%81_%D0%B4%D0%B2%D0%B0 — правда тут речь о 7+2, но для сайтов правило уточняется именно 5+2, чтобы точно ни у кого не было сложностей, если больше, то уже часть аудитории может не обратить внимание на какие-то пункты, что неприемлемо. Таких правил очень много, все они ложатся в основу проектирования.

          «Слабый магазин» до сих пор никто в Украине даже на половину оборота догнать не может. Кроме того, выше была просьба показать именно слабый пример, что я и сделал.
          • 0
            В статье про «магическое число 7» сказано не про восприятие информации, а про запоминание. Пункты меню на сайте никто не запоминает, их просто считывают. Согласен, чем меньше, тем лучше, но выделять это как существенный недостаток я бы не стал.

            Тот факт, что магазин имеет большой оборот, может иметь весьма слабое отношение к качеству дизайна. Это может быть следствием монопольного положения, удачного маркетинга, ассортимента, цен, логистики… да чего угодно. За примерами далеко ходить не надо — mail.ru, Amazon, Озон.

            А про статьи и тренинги — не хотел вас обидеть, но, действительно, статей начального уровня уже слишком много. Большинство тех, кто в вопросе не особо разбирается, только их и может написать. Я пошел бы и на платный тренинг, но глядя на вводную статью, как я пойму, что на тренинге будет что-то большее?
            • 0
              Про правило: действительно речь о запоминании. Но разве Вы сможете пользоваться пунктами меню, если не запомнили, что есть на сайте? Каждый раз Вы ж не будете их считывать по новой? Да и если ушли с сайта, важно ведь чтобы Вы помнили, что именно там продается? Кроме того, если не доверяете данному исследованию, просто посмотрите на все крупные сайты, везде пунктов не так и много, а ведь у них куча статистики и наверняка они делали разные эксперименты, в том числе в этой области. Но а в целом, есть, конечно, большие меню, у того же Амазона. Это негативно сказывается на конверсии в отдельных товарных группах, но в целом на объеме продаж сказывается хорошо, просто перекрывая больше потребностей. Тут можно долго рассуждать, но все эти рассуждения должны основываться на психологии и знании, как ведут себя пользователи.

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

              Про наши тренинги: приглашаю на бесплатный тренинг, в статье есть информация. Кроме того, в ближайшую неделю выйдут еще две статьи про дизайн и несколько про проектирование интернет-магазинов. Подождите выхода, прочитай и после решите стоит идти или нет. А я постараюсь Вас и других читателей приятно удивить и привнести что-то более глубокое и интересное для специалистов.
      • 0
        Правило 5+-2 в первую очередь говорит о памяти. Но 8 пунктов не нужно запоминать. Среди них нужно выбрать тот, который интересует. На Яндекс.Маркете, например, 12 пунктов, в каждом из которых ещё и подпункты есть. И это удобно.
  • 0
    Было бы гораздо интереснее, если бы вы привели пару примеров российских(или украинских) интернет-магазинов с хорошим дизайном. Все перечисленные вами — субъективно на одно лицо, скучны и не привлекательны. Думаю в вопросах интернет-торговли дизайн неразрывно связан с локализацией, так как тащиться от красивых картинок в данном контексте это как-то напрасно.

    Ну и вообще по тексту статьи — как то ни о чем, впрочем я знаю почему, обсждать дизайн в отрыве от применения (интерфейсы, юзабилити) очень сложно, только и остается что картинки-примеры показывать, да общими фразами сыпать. Надеюсь заявленная вторая часть будет интереснее
    • 0
      Если Вы разбираетесь в теме глубоко, то для Вас скорее будет интересен другой цикл статей, который выйдет через неделю. Там о проектировании, о логики, о конверсиях, т.е. больше для специалистов. Подписывайтесь на блог, не знаю понравится ли вторая и третья часть про дизайн, но про проектирование точно должна понравиться ;)
  • 0
    А по мне, так статья ниочем.
    Очень приблизительно формула успеха в ecommerce такая:
    Полное покрытие рентабельных каналов * Высокая конверсия в заказы * Высокий средний чек * 99% конверсия в выполненные заказы (если уж Zappos в пример брать) * Возращаемость клиентов = CPO ниже чем у конкурентов * Объем целевого трафика выше чем у конкурентов
    В этой цепочке то про, что Вы написал лишь пару букв. А аналитикой тут даже не пахнет
    • 0
      Ну и в дополнение:
      В ecommerce все решается тестами разных вкусов и видов, А если Вы поймете как работает, например, вот это Conductrics, то в Вашей вселенной случится землетрясение
  • +1
    Лично мне тема интернет-магазинов для девочек (все что в примерах в статье, ИМХО) по профилю совсем не интересна. Куда сложнее и интереснее тема магазинов и каталогов компаний продающих, скажем, спецтехнику, автозапчасти, задвижки водопроводные… Т.е. там где уже избитая тема «зафигачим слайд-шоу на весь экран и кнопочек КУПИТЬ ПРЯМО СЕЙЧАС» не работает либо частично, либо совсем. Вот бы о сайтах «тяжелого индастриала» почитать, ибо тема не раскрыта совсем. Особенно если посмотреть на сайты компаний такой тематики, пытающихся создать сайт в стиле магазина шмоток или просто выкладывающих свой прайс в экселе
  • +3
    Одна из главных вещей, которая должна быть хорошо сделана в интерне-магазине — поиск, подбор по параметрам.
    Если в вашем магазине ничерта не возможно найти… то все остальные элементы дизайна, как мне кажется, вас не спасут.
    Сие исключительно личное мнение, конечно, но тем не менее.
    • 0
      Верно. + страница товара и оформления заказа, без них тоже далеко не уехать.
  • 0
    Какие инструменты используете в разработке прототипов?
    • +2
      Axure

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

Самое читаемое Дизайн