Как стать автором
Обновить

Комментарии 58

Хотелось бы озвучить свои замечания по прототипу:
1. Технические характеристики в табличном представлении более наглядны.
2. В отзывах ссылка «раскрыть остальные» прилеплена к низу. В реальности её могут и не заметить.
3. Проверяйте орфографию в прототипах — ошибки могут переместиться в дизайн-макеты и на реальный сайт.
4. Серьезный магазин может иметь несколько филиалов из которых можно забрать товар самовывозом. Соответственно наличие в этих точках может отличаться, что желательно изобразить.
5. Ожидаемое время доставки может меняться в зависимости от служби доставки. Надо писать либо по каждой службе отдельно, либо «от Х дней». 1-2 дня может сгенерировать нежелательный отказ на последних этапах заказа.

Ниже можно сделать блок с seo-текстом, но это необязательно. Только к товарам с очень высокой конкуренцией.

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

Ну и вопрос на последок — каков смысл дублирования блока «Доставка/Оплата» справа от основной карточки во вкладке внизу?
Отвечаю:
1. Это не ошибка. Тут товар эфемерный, мы просто сделали текст. Для техники только таблицы, для, скажем, чая — можно и текст.
2. Возможно. Для спорных моментов есть А / Б тестирование.
3. Тестирование у нас проводится на последних этапах, тут могут быть ошибки.
4. Да, я это описываю в следующих блоках, по этому поводу будет отдельный пункт «Связь с off-line'ом»
5. Это уже не проектирование, зависит от бизнес процессов компании.

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

«каков смысл дублирования блока «Доставка/Оплата»» — это делать не обязательно, но как правило есть смысл, так как пункт очень важный. Его, например, могут не заметить в блоке справа, так как это рекламная зона.
1. Со стороны технической реализации это разные вещи. Забивать характеристики в базу HTML-таблицей обернется потом проблемами при сравнении товаров. Соответственно юзабилити специалисты должны предусматривать и такие вещи тоже. Есть два вида отображения — укажите это в макете и комментариях к прототипу.
2. Вернитесь в реальный мир. В реальном мире объём контента варьируется. Если характеристики не поместятся на одном экране(например клиент их скопировал с чужого сайта), то при пролистовании вниз у нас справа будет оторванная от логического блока ссылка. Здесь нечего тестировать — здесь нужно думать.
3. Глупое оправдание. Что-то мне не верится, что в реальности у вас такое есть. Извините. Для хабра хотя бы можно было проверить и исправить.
4 и 5. Правильные юзабилисты делают прототипы по реальному бизнесу, по реальным схемам взаимодействия клиент-продавец-товар. Без этого нелья:
— составить правильный портрет целевой аудитории
— выявить потребности ЦА
— разработать правильные прототипы
Таким образом, вы сделали проектирование ради проектирования, а статью ради пиара. Не надо так.

Блок с SEO-текстом — это не usability. Да, юзабилити должно учитывать потребности продвижения, но любые уважающие себя продвиженцы не будут делать «блоки с SEO текстами». Вообще понятие «seo-текст» уже даже не прилично употреблять среди профессионалов. Эпоха бессмысленных портянок с ключевиками ушла в прошлое. А если говорить о вхождениях запросов в контент страницы, то этого можно добиться без так называемых «seo блоков».

Его, например, могут не заметить в блоке справа, так как это рекламная зона

Мне кажется, или юзабилити специалисты должны заранее думать о том, где какую информацию посетитель будет искать глазами? Если вы сами не уверены в своей работе… да что тут говорить.
Мой вам совет, коллеги — попробуйте показать свою экспертность хотя бы в сравнении «было-стало, сделали вот это». Сейчас в ваша работа несостоятельна.
Вообще, как заметил Blumfontein, прототипы создают ощущение замусоренности, а эксперты юзабилити этого допускать не должны.
1. Это не счел нужным указывать, по-моему вполне очевидно
2. Тут соглашусь: ссылка должна ездить за блоком, это реализуется в верстке. В данном случае проектировщик не доглядел, такое бывает. Для обнаружения и исправления таких вещей есть тестирование.
3. Не верите, что у нас есть тестирование?) А как по Вашему баги исправляются?
4. Статья носит обучающий характер и не решает конкретной бизнес задачи. Если она недостаточно хороша, так почему бы Вам не написать лучше!? Очень жду, думаю, пару недель должно хватить.

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

«А если говорить о вхождениях запросов в контент страницы, то этого можно добиться без так называемых «seo блоков»» — как же Вы это реализуете в интерфейсе, например, товарной группы «Ноутбуки»? Поделитесь профессиональными маркетинговыми секретами, я добавлю в статью.

Я вижу Вы большой эксперт в юзабилити, но почему-то не вижу ни статей, ни работ, ничего. Я предполагаю, что никто из читателей не будет против, если Вы напишите «правильный» обзор. Критиковать в комментариях могут многие, а сделать что-то лучше — единицы. Жду статью от Вас, лично поставлю плюс Вашему посту при условии его большего качества.
Искренне желаю всем магазинам с дизайном как на первой картинке побыстрее загнуться. Безобразная свалка всякого мусора.
Посмотрите крупнейшие магазины, они пока не собираются загинаться, судя по всему…
Вы вообще насколько в курсе ecommerce?
Топ 30 активно меняется каждый год. А то и не по разу, и не без сенсаций.
Я говорю про топ 10 мира, который не сильно меняется в принципе.
Поиграем в «найди 10 отличий»?
Согласитесь, ваш «сферический серьезный магазин в вакууме» далёк не то что от лидеров ecommerce — он далёк даже от большинства yet another e-store. Даже некоторые стандартные темы оформления обычных open-source решений более привлекательны, чем ваша работа.

Хотите оспорить моё мнение — приведите мне факты, результаты исследований, реальные кейсы. Свои.
Поиграем. Смотрим сюда:

www.amazon.co.uk/Apple-ME864B-13-inch-MacBook-Graphics/dp/B00G5BER6G/ref=sr_1_2?s=computers&ie=UTF8&qid=1404304601&sr=1-2
rozetka.com.ua/apple_macbook_pro_retina_15_me294ua_a/p338650/
www.ulmart.ru/goods/816075

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

есть проектировщик со знаниями вариантов, который должен предложить идеальное решение для цели

Тогда доносите до людей методику. Только правильную.
Какой Вы хитренький) Я рассказываю про варианты, показываю хорошие, а как проектировать конкретный проект — это уже отдельная профессия, которой люди учатся годами. И мы, кстати, этому учим: digitov.com/course/ux-ui-design-courses — курс денег стоит и занимает много времени, там рассказывается именно методика. Хотите научится — приходите к нам в школу ;)
Нет, спасибо за рекламу.
Скажите тогда, какова цель этой статьи?
Обзор вариантов, статья больше ориентированна на новичков. Не нравится, не читайте ;)
С вашего позволения, приведу небольшую аналогию.
Лет так 5-7 назад в крупных SEO-компаниях новеньким оптимизаторам давали одну очень популярную на тот момент книгу Игоря Станиславовича. И была она своего рода библией сеошников. И было это ещё хоть как-то приемлимо.
Сейчас же я лично против такой практики — мозг юных падаванов захламляется неактуальной(а порой ещё и безосновательной) информацией. Таким образом, приступая к актуальному и единственно оправдонному на сегодняшний день комплексному продвижению(можете его назвать белым SEO, если так проще) теряются в трёх соснах и впадают в бесконечный цикл нелепых телодвижений. Им уже сложно перестроиться — они не могут, не умеют и, возможно, не научатся делать это правильно.

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

Пример:
Под вкладками с информацией о товаре самое время показать блок «Пользователи, которые смотрели этот товар, также смотрели» или «Аналоги».

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

Касательно этого блока объясняю логику: сначала пользователь просматривает информацию про основной товар, которым заинтересовался, а ниже, если он прокрутил на столько вниз, что уже пролистал основную информацию о товаре, следовательно это его вероятно не заинтересовало, следовательно ему нужно предложить что-то аналогичное и он может заинтересуется.

А теперь представьте, что я в статье буду разжевывать все как абзац выше, сколько там страниц получится!? Это целая энциклопедия получится. Еще раз: статья для новичков, для тех, кто хочет углубится — прямой дорогой в нашу школу. Для тех, кто не хочет углубляться, но хочет получить решение своих специфических задач — прямой дорогой к нам в платную разработку. Волшебной таблетки нет и быть не может, тем более бесплатной ;)
Вот всё же, у вас больше коммерческий интерес в этой статье.
1. Коммерческий
2. Я люблю писать, это мое хобби
3. По моим статьям многие учатся и благодарят

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

Топ 10 мира выглядят так не потому что у них проектирование и дизайн предельно юзабельны.

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

Если же вам все таки интересно не только поднять отечественный ecommerce на приемлемый уровень, но и создать что-то новое, оригинальное и вместе с тем не менее юзабельное — мокапы и мысли надо приближать к нашей реальности.
Вопрос спорный. Есть такое правило юзабилити: делай так, как привыкли пользователи. И для екомерс оно как нельзя хорошо работает. Кроме того, эта статья не описывает отличия рунета и запада, для этого можно делать отдельную статью. И еще, мы делаем сайты и для запада, почему бы не описывать некоторые их фишки? В первой статье я говорил, что эта серия статей будет на основе анализа крупнейших магазинов США, Китая, России и Украины и даже ссылки привел, не удивительно, что многое взято из их рынка…
Есть такое правило юзабилити: делай так, как привыкли пользователи

Да с чего вы взяли то?
Если мы говорим про непринятие резких изменений(например в дизайне), то да.

Если бы я спросил людей, чего они хотят, они бы попросили более быструю лошадь.
© возможно Генри Форд

Делать надо так, чтобы людям было комфортно, чтобы у них было желание покупать на вашем сайте.
Верно, но если люди не разберутся в интерфейсе, как они будут покупать!? Инновации — это хорошо, но для этого есть А / Б тестирование, при которым Вы 95% пользователей показываете привычный вариант, а 5% инновационный, затем замеряете конверсию и если в 5% она будет выше, то меняете тестируемую часть сайта для всех на новую. Рисковать огромным проектом ради эфемерного блага никто не будет.
Уважаемый, вы меня просто кормите, спасибо.
Я прекрасно знаю, что такое тестирование, каких видов оно бывает и как с ним работает.

Но вот в чем вы тут точно не правы, так это в последнем высказывании.
В моей практике есть примеры, когда риски реально свести к минимуму за счет глубокой первоначальной аналитики и своевременном анализе уже запущенного тестирования. Да, минус 1 заказ, но опыт крайне полезный.
К тому же, тестов на страницах может проводиться сразу несколько — в этом плане очень интересно устроено всё в Яндексе. Чем вам не огромный проект?
В конце концов, можно проводить предварительные тестирования: на фокус группе, с использованием eye tracker-ов, на дополнительном тестовом сайте через тот же самый дополнительный контекст.
Не знаю, может быть нам очень везёт, но мы ещё нигде, даже при очень резких изменениях, не получали на практике снижение конверсии/объема заказов/прибыли.
Не все такие рисковые. Я привык сначала проверять свою работу, а потом показывать всем.
Так про то и речь — для разных стран разные решения.
А вы свалили всё в кучу и предлагаете для всех рынков.
И уверяете, что амазон будет работать на нашем рынке так же, как на своем (особенно если опустить бренд).

Собственно выше я уже прочитал в чем смысл статьи.
Дальнейшее обсуждение разумеется теряет смысл.

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

Даже по данным майского «Секрета фирмы» Озон лишь на 7ом месте
по среднемесячному обороту. Ebay на шестом. Розетки нет даже в топ-100.
Я как раз таки в курсе. Откройте первую часть моей статьи и прочитайте кто на каком месте по версии Forbes.
Вы ссылаетесь на данные 2010 года? Серьезно?

Вы упорно не понимаете очевидную вещь — новички, для которых вы написали эту статью в 99% случаев несколько лет будут делать интернет-магазины под российский рынок.
При чем здесь рейтинг МИРОВЫХ магазинов и форбс 2010 года?

А нет, это статья 2010 года. Данные-то ещё старше минимум на год.
Вы скроллом пользоваться умеете? Смотрели, что написано под ссылкой на американский Форбс?
Сетка актуальна по большей части для техники.
Для интернет-магазинов одежды или мебели, к примеру:

1. Несколько превьюшек разных ракурсов.
2. Доступные цвета лучше делать ссылкой, с переходом на соответствующую карточку.
3. В комментариях не хватает «полезно/не полезно» + счетчик
4. С доставкой отдельная песня.
Особенно у интернет-магазинов шин и дисков!
5. Помимо характеристик бывает краткое описание.
Тут под него места нет.
6. Три нижних блока такую кашу выдадут в реале, что человек просто потеряется.

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

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

Шрифты в доставке, сравнении и комплекте слишком мелкие.
Если вы попробуете их приблизить к реально читаемым, у вас всё поедет.

Закладка «Всё» объединяет только характеристики и отзывы.
Плюс, не вижу акций, скидок и т.д.
ИМХО

В серьезном проектировании серьезного магазина должна присутствовать матчасть. Со списком литературы.

Например, сетевые магазины прорабатывают сначала маркетинг, потом юзкейсы, и в последнюю очередь — дизайн. А у вас, кроме дизайна, по сути и нет ничего.

Пожалуй, скажу по другому… Основной косяк в вашем «проектировании» — отсутствие юзкейсов, их анализа и проектирования (или адаптации) дизайна магазина под них. Планирование, изучение, оптимизация и главное — стимулирование пользовательских сценариев уже сделает подход научным.

А у вас — где наука? Где инжиниринг? Где серьезный подход?

На пальцах: «что» сделать для какого-то конкретно-произвольного случая — в материале показано. А «почему» это так, и главное — «как» поступать в других случаях — остается под завесой тайны.
Читайте первую часть серии статей, там часть ваших вопросов раскрыто. Далее будут раскрыты и другие, в частности, по поводу маркетинга. Все в одной статье не уместить, это огромная тема.
Да слежу, собственно. Поэтому и вопросы.
На первой картинке опечатка: Просметренные товары
Это надо писать в личку.
Спасибо, сейчас поправим.
Раздражает меня такой макет странички товара. Свалка ведь, реально. Гора вкладок, отдельных блоков, куча кнопок.
И пофиг что у многих (топовых магазинов) так. Я за новые подходы. А еще за развитие каждого макета в процессе жизни магазина.
Тут есть важная деталь: макет показывает в данном случае максимум информации. Если у Вас товары простые, то большинства блоков макета не будет вовсе и Вы получите то, к чему стремитесь — простоту. К каждому типу товаров немного свой подход, по сути.
Что значит «простые»?
У любого товара есть наименование, бренд, артикул, краткое описание, полное описание, изображения, цена.
За исключением вариантов и таблицы с характеристиками, все остальное – поведенческая ерундистика: отзывы, рейтинги, комплекты, кроссейл, апсейл. Все это выдумано не товаром, а проектировщиком сайта с маркетологом. Простой товар = товар без маркетинга?
А вы уверены что все эти рейтинги вообще нужны? Сколько из миллиона реальных посетителей пойдет во вкладку отзывы? А сколько напишет?

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

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

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

В вашем варианте, блок «Купи в комплекте со скидкой» содержит три ноутбука (никогда не понимал прототипы с рыбой) и отвлекает меня от кнопки «Купить», она просто теряется на фоне страницы с перегруженной информацией. Почему-то в блоке «Отзывы» размещен текст технических характеристик. Это ошибка или таково ваше решение? Скорее всего ошибка, которой не должно быть на прототипе, если вы представляете решение на обозрение посетителям Хабра.
В отзывах просто текст, он пишется посетителями и к проектированию не имеет отношения.
Вероятно, я плохо объяснил. В закладке «Отзывы» размещены 2 блока — Технические характеристики и Отзывы покупателей. Вы вероятно забыли убрать блок с характеристиками.
Нет, это не ошибка. Это закладка «Всё», там сборная информация с других закладок, самое важное.
Насколько актуально добавлять шаринг страниц в соцсетях? Часто ли их шарят (и вообще шарят ли), если это не магазин каких нибуть прикольных штучек или ручные изделия?
Смотря какой товар, смотря как реализовать в интерфейсе. В целом — шарят.
Автор, будьте внимательнее к тексту, пожалуйста. Иногда случайно проскакивает стиль школьника, это серьезности советам не добавляет.
Ну тогда я школьник, который пишет статьи для Forbes ;)
Спасибо за ваши статьи, когда мы делали свой магазин, то подобных статей очень не хватало. Надеюсь, что они помогут многим новичкам.
Надеюсь, что вы будете продолжать, не смотря на некоторый негатив в комментах.
Спасибо за отзыв) Продолжать буду, к каждой статье есть негативные комментарии, это нормально.
Это же подчистую перерисованная розетка. Т.е. это рассказ о том, как вы проектировали конкретно этот магазин?
У каждого комментария есть звезды, а при добавлении нету звезд. Видать с розетки не перерисовали
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.