Pull to refresh

Comments 57

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

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

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

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

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

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

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

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

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

Конечно. Всё знать и уметь должен проектировщик.
А вот об этом цикл следующих статей: 70 страниц полезной информации про проектирование интернет-магазинов ;)
Если нужна помощь, обращайтесь. У меня около 30 прототипов интернет-магазинов в портфолио и книга под редакцией интернет-буржуя Андрея Рябых об интернет-магазинах для начинающих. Буду за вами следить.
А по поводу моей иронии в предыдущем комментарии: сейчас профессиональный проектировщик действительно должен знать так много обо всём, что идущего за ним дизайнера впору переквалифицировать в иллюстратора сайта.
Спасибо. Статья очень понравилась. С нетерпением жду продолжения.
UFO just landed and posted this here
Это крупнейшие магазины мира, которые к тому же отлично продают. А в целом дизайн — дело вкуса.
UFO just landed and posted this here
Лада — не сайт.

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

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

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

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

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

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

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

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

Напишите более серьезные вещи, кто ж Вам мешает? А я рассказываю более серьезные вещи тут: digitov.com/course/ux-ui-design-courses и платно, при этом еще и бесплатно много статей и тренингов делаю. Почему-то почти все в СНГ считают, что все должны работать бесплатно. Я бесплатно уже поработал, написал эту статью, если она не нравится — напишите лучше.
Про правило 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, чтобы точно ни у кого не было сложностей, если больше, то уже часть аудитории может не обратить внимание на какие-то пункты, что неприемлемо. Таких правил очень много, все они ложатся в основу проектирования.

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

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

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

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

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

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