Маркетинг
Mojo
6370

Дизайн интернет-магазина: что учесть, чтобы не облажаться?

Первая из цикла статей. Цель цикла — повысить конверсии и сделать онлайн-шопинг удобнее для людей. Мы в Mojo собрали лучшие практики из своего опыта и подкрепили их исследованиями.

В закладки

Меня зовут Женя Князев. Я — продуктовый дизайнер в Mojo. Мы тщательно анализируем дизайнерские исследования и гордимся своей экспертизой. Недавние eCommerce-проекты вдохновили меня на цикл статей о дизайне интернет-магазина.

Цель цикла — повысить конверсии и сделать онлайн-шопинг людей удобнее. Для этого я собрал best practices сферы и подкрепил их исследованиями. Ценю ваше время, поэтому буду вкратце доносить основную мысль.

Поехали!

Почему дизайн важен при разработке сайта?

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

Первое впечатление решает

Первое впечатление, как телегония, влияет на всё последующее взаимодействие. Телегония — миф, первое впечатление — нет. Разобраться нам помогут студенты, военные и Google. 4 опыта и 4 дизайн-исследования.

1. Классическая история Амбади

Чаще всего, при объяснении феномена первого впечатления упоминают опыт Налини Амбади и Роберта Розенталя. В 1992 году исследователи пригласили к себе студентов и попросили оценить преподавателей. Одни студенты отучились у лектора семестр, другие смотрели 10-секундную видеозапись лекции. Позже записи сократили сначала до 5, а потом до 2 секунд. Амбади сравнила оценки преподавателей от первой и второй группы студентов. Они совпали.

Достаточно двухсекундного видео, чтобы ваш мозг составил мнение о человеке.

2. Торндайк и вояки

Ещё раньше, в 1920 году американский психолог Эдвард Торндайк ввел понятие «гало-эффект» и связанное с ним когнитивное искажение. Торндайк просил военачальников оценить лидерские качества, внешность, интеллект, верность и надежность по фото.

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

Тенденция думать о человеке как о хорошем или о плохом в целом влияет на оценки. Это общее чувство влияет на суждения о конкретном качестве.

Эдвард Торндайк
Психолог, первым привел доказательства гало-эффекта

3. Соломон и порядок слов

В 1946 году польско-американский психолог Соломон Аш предложил подопытным оценить человека по списку прилагательных. В первой группе прилагательные были отсортированы от положительных к отрицательным. Во второй наоборот: от отрицательных к положительным. Первая группа оценивала человека лучше, чем вторая.

4. Опыт в Еврейском университете

В 2012 году в Еврейском университете ученые проанализировали более 200 000 человеческих решений в своём эксперименте. Они обнаружили, что результат первого опыта оказывает существенное и длительное влияние на последующее поведение участников.

«Первый опыт оказывает непропорционально большое влияние на последующие действия»

1. Узнать за 50 миллисекунд

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

Джит Линдгаард сравнила рейтинги. Они совпали. Люди дали приблизительно одинаковые оценки при 50 миллисекундах на просмотр сайта и при неограниченном времени на анализ.

50 миллисекунд
требуется пользователю, чтобы составить мнение о вашем интернет-магазине

2. Исследование от Google

Гугл подтвердил числа Линдгаард в собственном исследовании 2012 года. Некоторые аспекты люди оценивали даже за 17 миллисекунд. Другой важный вывод исследования:

«Чем меньше визуальная сложность, тем лучше»

Мы ещё вернемся к этому выводу позже.

3. Дизайн определяет первое впечатление в половине случаев

Исследование провели в 2002 году для WebWatch в Стенфордском университете. Исследователи измеряли, как люди оценивают надежность сайта. В 46,1% комментарии людей направлены на дизайн. Следующей по важности — 28,5% — была структура представления информации.

46,1%
людей назвали дизайн фактором надежности сайта

4. Визуал vs. Юзабилити

В 2009 году битву с юзабилити выиграл визуал. Барбара Чапарро из университета Эмбри-Риддл показала, что первое впечатление в большей степени диктуется визуальным наполнением. Для этого оценивалась визуальная составляющая, юзабилити и удовлетворенность самого пользователя по отдельности.

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

Барбара Чапарро
Доктор психологии, профессор

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

Что учесть в первую очередь?

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

Прототипичность

В исследовании от Гугл есть два основных термина: визуальная сложность (visual complexity) и прототипичность (prototypicality). Остановимся на втором.

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

Прототипичность схожа по смыслу с «сognitive fluency» или «когнитивной беглостью». Когнитивная беглость подразумевает отсутствие когнитивной тяжести. Этот термин ввел Дрейк Беннет в статье для Boston Globe.

Когнитивная беглость — мера того, насколько легко о чем-то думать. Люди предпочитают вещи, о которых легко думать, тем вещам, о которых думать трудно.

Дрейк Беннет
Статья Boston Globe «Просто = Правда»

В исследовании Гарварда совместно с университетом Мэрилэнда и Колорадо ученые показали: нет универсального гайдлайна для разных демографических групп.

В опыте использовали 450 веб-сайтов. Их оценивали 548 добровольцев. Они показали, что люди по-разному оценивают все, что связано с цветами на сайте (в исследовании это называется красочность, т.е. colorfulness). При этом визуальная сложность влияет сильнее.

Больше примеров и подробностей найдете в статье CXL. Мы же перейдем к конкретным шагам.

Простейший анализ конкурентов

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

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

Привычность или прототипичность

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

Остается только наслаждаться поиском кнопки «Купить» и стоимости. Что заставило дизайнера поставить кнопку в правый верхний угол — загадка.  Сайт регионального представителя Sony

Меньше = лучше

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

Нужен ли отвлекающий от продуктов фон? Зато корзина на месте, правда иконку распознает не каждый. Интернет-магазин «ИЛЬ ДЕ БОТЭ»

Оригинальность внутри ограничений

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

8 шагов к хорошему тексту и типографике

Текст занимает большую часть контента интернет-магазина: описания, характеристики, отзывы, навигация. Начнем с него.

Шаг 1. Размер

Сложно читать — не буду читать. «Читабельный» текст начинается от 16pt. 14pt можно использовать для вторичного текста. 13pt для футера. Меньше использовать не стоит.

Сделайте сайт комфортным даже людям с небольшими зрительными проблемами. Их число будет расти.

Текст характеристик набран 12 pt и даже 11 pt.  Его некомфортно читать даже человеку с идеальным зрением. Интернет-магазин «Эльдорадо»

Основная информация — 16 pt. Вторичная — 14pt. 13pt используется только для ярлычков. Они распознаются по цвету после первого прочтения.

Дизайн одного из наших проектов

Кстати, текст, который вы читаете прямо сейчас набран 18px. Кажется большим?

Шаг 2. Межстрочный интервал

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

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

Шаг 3. Контрастность

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

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

Шаг 4. Длина строки

Универсалий нет. Понятно, как делать не нужно. Описание товара не должно быть вытянуто «от края до края». Ориентируйтесь на 50-75 символов в строку.

Длинные строчки описания заставляют пользователя с большим экраном поворачивать голову. Сканировать не получится, значит, читать не будут. Интернет-магазин «OZON»

Шаг 5. Короткие абзацы

Люди приходят в магазин не почитать, они просто проскроллят текст. Начинайте новый параграф каждые 3-4 строчки или чуть реже.

Длинные полотна текста не читают. Текст выполняет SEO-функцию, но  Интернет-магазин «DNS»
Текст, разделенный на короткие абзацы с подзаголовками читать удобнее. Хороший компромисс. Интернет-магазин «М.Видео»

Шаг 6. Структура

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

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

Интернет-магазин «Apple»

Шаг 7. Выключка

Не используйте выключку по центру. В бóльшей части случаев будет лучше по левому краю. Такой текст удобнее читать, так как не нужно искать начало следующей строки.

На последней карточке можно ощутить физическую боль от «рваных краёв» описания. Интернет-магазин «SEPHORA»

Шаг 8. Информационный стиль

После внешнего вида начинается контент. Убрать воду, оценки и «впаривание» помогут советы Ильяхова. Многие действуют и для английского. Я их благополучно игнорирую в этой статье. Не делайте так.

Полезный инструмент для ленивых — Главред. Помогает удалить мусор.

Гугл — хит сезона

Барбара Чапарро в своем исследовании за 2009 год проводила исследование на главных страницах сайта. В 2020 главная страница больше не главная.

Главная страница больше не главная.

Посещаемость «домашних страниц» падает с 2003 года — об этом сообщил Джерри МакГоверн в 2010 году. В 2014 году падение посещаемости продолжалось. Думаю, причин для изменений нет и сейчас.

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

Просто держите в голове, что пользователь чаще попадает в каталог или на конкретный товар. Значит, стараться нужно на каждой странице.

Вы когда-нибудь покупали книгу у Amazon из-за рекламы, которую вы видели на главной странице? А покупали книгу на Amazon из-за блока «Клиенты, которые купили этот товар, также купили»?

Это два маркетинговых метода. Только первый — это мегафон старой школы печати и телевизионного маркетинга. Второе — веб-маркетинг.

Джерри МакГоверн
Главный дизайнер Land Rover и Range Rover

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

Навигация и поиск нужны, чтобы клиент остался.

Что мы обсудили?

Для тех, кто промотал в конец статьи.

  • дизайн важен. Первое впечатление люди составляют за доли секунды;

  • для хорошего первого впечатления дизайн должен быть простым и соответствовать ожиданиям пользователя;

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

  • главная страница — больше не главная. Люди попадают на конкретную страницу сайта из поисковика.

В статье уже есть советы, как поработать над первым впечатлением. Вы можете подумать, что они очевидные — это не так.

Что дальше?

Новая статья в следующий понедельник! Разберём важные элементы интернет-магазина: навигация, поиск, обратная связь.

Спасибо, что прочитали. Пожалуйста, кликайте «+1», если понравилось и добавляйте в закладки.

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

{ "author_name": "Mojo", "author_type": "self", "tags": [], "comments": 49, "likes": 64, "favorites": 267, "is_advertisement": false, "subsite_label": "marketing", "id": 125182, "is_wide": false, "is_ugc": true, "date": "Mon, 11 May 2020 13:00:02 +0300", "is_special": false }
0
49 комментариев
Популярные
По порядку
Написать комментарий...
13

Молодцы ребят! Статья отличная!

Ответить
0

Спасибо, Егор! Приятно слышать!

Ответить
4

Как владелец интернет магазина скажу что для 99% интернет магазинов дизайн не нужен, лучше даже шаблон, чтобы покупателю было легче ориентироваться. Самое главное товар и/или концепция магазина. Мои слова подтвердят крупнейшие интернет магазины мира Амазон, Алибаба и т.д. Дизайн нужен только тем кто продает дизайн)

Ответить
2

Думаю, мы действительно с разных берегов смотрим на интернет-магазины. Какую-то конверсию вам обеспечит любой шаблон :)

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

Ответить
1

https://www.pleer.ru/ оборот миллиард в год. Какой дизайн? О чем вы?

Ответить
4

Спасибо за хороший пример плохого интерфейса!

Люди могут пользоваться магазинами с плохим дизайном — статья же не об этом. Дело в том, сколько потенциальных покупателей плеер.ру теряет :)

Лично я не купил бы ничего в интернет-магазине с таким интерфейсом.

Ответить
4

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

Дмитрий Алексеев, глава сети магазинов DNS:
"Что касается моих догадок, то могу предположить, что такая цена, левый чек и абсолютно черное юрлицо, говорит о вероятности построения схемы обнала денег и контрабандного ввоза товара."

Ответить
1

Согласен. Плеер жесткачит не только в интернет-магазине, но и в розничной точке на автозаводской.
Постоянная давка, толкучка и жесть. Но зато дёшево и есть в наличии то, чего нет у других.
Хотя я зарёкся с ними связываться.

Что касается DNS, то господину Алексееву нужно потратить время не на поговорить, а на проверить своих программистов/верстаков.
1. Покупаю в интернет-магазине DNS, приходит уведомление на почту.
2. Подтверждаю почту, сайт говорит "спасибо, подтвердили".
3. При попытке зайти или поменять пароль вижу стабильное "нет такого пользователя".

Это же касается и телефона.
То есть я вроде как есть, но вроде как меня нет :)
В духе современных реалий.

Про то что курьер DNS не дозвонился в течение 45 минут (да, я был на скайп-колле, такое случается) и самолично тупо перенёс доставку на другой день я уже молчу. Чтобы вернуть деньги (которые так и не вернулись пока) мне пришлось пройти три круга ада с поддержкой, звонками, распечаткой и сканом заявления и т.д.

Любой дизайн и юзабилити может просрать курьер :)

Ответить
1

А вы оставьте bug report в следующий раз. Я в последнее время начал на себе чувствовать, насколько они важны. Хотя это, конечно, никак не оправдывает наличие таких серьёзных косяков в крупной (да и в любой) компании.

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

Ответить
1

Я сказал менеджеру через рот о том, что вот такая ситуация с учёткой.
Более того, ещё и переспросил, а точно мой email попал в CRM?
А то мало-ли, может это мои руки кривые.

Ответить
0

а если цена будет дешевле чем везде? например везде 100к в плеере 80к

Ответить
2

Я просто не уверен за качество товара, который мне придёт с такого сайта. Магазин не внушает мне доверия изначально. Серьезная разница в цене может мотивировать потратить время на ресёрч:
— спросить у знакомых;
— почитать отзывы в интернете.

Если после ресерча уверенность появится, то сэкономлю 20 тысяч. Тут возникает два вопроса:
1. Где грань такой суммы? Ради скидки в 5 тысяч при стоимости в 100 я бы не стал париться. Купил бы там, где все хорошо.
2. Нравится ли вам демпинговать стоимость? Параллельно, ещё и заставлять человека страдать. 

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

Ответить
2

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

Надо ли обновлять сайт - безусловно, но весьма аккуратно. Тот же Амазон и Алишечка это постоянно делают, но вдвойне аккуратно, из-за больших оборотов.

Ответить
1

Спасибо за пример. Очень важное уточнение.

Вы описали хороший продуктовый подход. Он подразумевает постоянную работу над сайтом: итерации, A/B- тестирование и снятие метрик.

Это много постоянной работы, а ещё это дорого. Если правильно выстроить процесс изменений, то можно обновить любой магазин и не потерять «постоянщиков».

Ответить
0

В ваших шаблонах отсутствует дизайн? Что-то сомнительно. Если всё-таки отсутствует, то киньте ссылку, плиз, чисто поржать )

Ответить
5

Меня смутило, что в статье говорится о влиянии дизайна на "впечатление о сайте". И исследования проводились так же - пользователей просили описать "впечатления о сайте". В итоге происходит подмена понятий, что "впечатление" = "эффективность сайта". Но это не так. Конечная цель интернет-магазина - это не "оставить хорошее впечатление", а "совершить продажу", эффективность измеряется именно в конверсии.

В реальности посетители заходят на сайт не оценить сайт, а удовлетворить свою потребность в товаре/услуге. И при таком фокусе внимания дизайн играет совершенно другую роль.

Если речь идёт о мультибрендовых магазинах, где пользователи заходят на карточек товаров, то на продажи влияет цена, сервис (скорость, доставка, обслуживание, примерка - вот это вот всё) и доверие к продавцу (рейтинги, отзывы и пр.). ВСЁ! Если человек зашёл с карточки - он знает всё о продукте, он просто ищет где его купить, и тот, кто предложит лучшую цену/сервис и отработает сомнение, что покупателя не кинут - совершит продажу. Пример - самый успешный интернет-магазин РФ - onlinetrade.ru. Цены, доставка и доверие решают. Роль дизайна - скорее не мешать паттернам UX, чтобы пользователь нашёл всю важную информацию.

Если речь идёт о мультибрендовых магазинах, где пользователи заходят с небрендовых категорий каталога типа "Кондиционеры" (то есть они пока не знают какой товар ему подойдет), то кроме цены, сервиса и доверия играет роль качество фильтров, обзоров/отзывов и экспертность продавца, чтобы тот помог выбрать товар. Пример - самый успешный интернет-магазин одежды - wildberries.ru. Видео с товарами, примерка, цены, отзывы, доставка - это всё решает. Роль дизайна как и выше - не мешать паттернам UX, чтобы пользователь нашёл всю важную информацию.

Если речь идет о брендовых интернет-магазинах - тут да, дизайн нужен, потому что нужно продать бренд, атмосферу, а это совсем другая история.

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

Ответить
0

Спасибо за такой подробный комментарий, Дарья :) Постараюсь ответить вам также подробно. 

1. Что такое дизайн и кто такой дизайнер?
К сожалению, я несколько раз прочитал и не понял, что же вы подразумеваете под дизайном. Для нас дизайнер в команде — эксперт, который напрямую влияет своими идеями на продукт. В том числе, он может предлагать заказчику и менеджеру функции. Он же проектирует пользовательское взаимодействие и руководит/создаёт визуальное наполнение.

2. Как мы подходим к задаче
В первую очередь мы следим за пользовательским опытом. Позже беремся за визуал. В статье я привел опыт Чапарро. Я считаю, Барбара показала: «не только юзабилити единым».

3. Следить только за конверсией — недостаточно.
Действительно, заказчика в первую очередь интересует повышение конверсии. Для нас это тоже одна из важных целей. Есть несколько важных уточнений:
3.1. Покупка — эмоциональное решение. Выбор магазина тоже.
3.2. Конверсия — не единственная метрика, за которой следит хороший продавец. Например,  стоит следить за удержанием. Если вашему пользователю не понравилось в магазине (а опыты показывают, что здесь речь не только про функции и UX), то вернется ли он?
3.2. На рынке ритейла высокая конкуренция, так что нужно использовать все преимущества. Особенно, доказанные. Решать это не нам, а заказчику. К нам приходят за хорошим UX и UI. 

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

Ответить
1

Если у вас дизайн - это всё что касается интерфейсов - то да, тогда соглашусь, что дизайн влияет на продажи, или можно сказать "интерфейс влияет на продажи".

Когда я писала, то разделяла понятия "дизайн" и "функциональность". Функциональность - это организация сайта: структура, навигация, доступные действия, доступная информация. А дизайн сайта - это визуальное оформление функциональности (цвета, шрифты, графика, видео, эффекты, анимация и пр.).

Ответить
0

Все ещё надеюсь окончательно перетянуть вас на свою сторону :)

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

Мне кажется, лучший User Experience это не только не неудобно, но еще и приятно. Приятно же нам становится и от эстетики, так устроен мозг.

Ответить
2

Отличная статья @Mojo! Рада видеть, что русскоязычный сегмент онлайн магазинов и дизайн студий начал развиваться.

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

Вероятно более низкая конкуренция в этой сфере породила отношение "и так сойдет и так купят". 

Ответить
2

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

Ответить
0

Нашим сайтам тоже есть, куда стремиться :) 

Ответить
0

Бесспорно.

Ответить
1

Спасибо, Кристина! Надеюсь, наш цикл статей чем-то поможет :)

Такая реакция меня тоже печалит. Хотя мы ожидали чего-то такого. Особенно, во время кризиса легко видеть, как урезают рекламные и дизайнерские бюджеты. Мол, без этого как-то проживем.

Верим, что всё изменится!
 

Ответить
2

Это было интересно и полезно~ Отдельное спасибо за примеры с иль де ботэ и сефорой, их дизайн всегда заставляет страдать и обливаться кровавыми слезами 

Ответить
0

Спасибо за отзыв!

Может быть, их маркетологи прочитают нашу статью и что-то изменится :)

Ответить
2

Годно написано. И не только для магазинов. Зачёт!!! 

Ответить
2

Если уметь анализировать, то что видишь, все ясно и без статей с мануалами! Автору РЕСПЕКТ, экспертная точка зрения.
Очень сложно порой передать словами/символами, все то что наблюдаешь и нужно исправлять на сайтах)) Проще переделать, чем донести до людей)) 

Ответить
0

Спасибо большое, Алексей. Очень приятно слышать такой отзыв :)

Ответить
2

Спасибо за статью! Полезно)

Ответить
0

Спасибо, что комментируете! Это правда важно. Даже вдвойне:
1. Я понимаю, что людям действительно интересно.
2. Алгоритмы это тоже понимают. И, потенциально, редакторы vc.ru :) 

Чем больше людей увидит, тем больше будет хорошего дизайна! Может быть, его даже закажут у нас :)

Ответить
2

Отличная статья, хорошо все расписали)

Ответить
0

Спасибо большое, Дарья Сергеевна!)

Ответить
2

Шикарная обложка, ребят!

Ответить
1

Очень много полезного, взял для себя некоторые вещи, материал отлично написан.

Подписался и жду следующую публикацию!

Ответить
1

Спасибо! Следующая статья уже почти готова. В понедельник точно будет публикация :)

Ответить
1

Спасибо за хорошую подробную статью!

Ответить
–1

Не используйте выключку по центру.

Как раз в примере на скриншоте выключка по центру весьма кстати, т.к. она соответствует центральной композиции в фото на карточке. Единственный изъян — выключка бейджей в карточке сверху должна быть тоже по центру («лучшая цена», «новинка» и пр.).

Ваша «боль» — это субъективщина. 

Ответить
1

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

Выключка по левому краю, напротив, упрощает чтение. Новая строка всегда начинается с одного и того же места.

Раскрою мысль подробнее. Выключку по правому краю и по центру можно использовать для нетипичных дизайнерский решений. Например, в рекламе или верстке плакатов. Карточка товара — не место для экспериментов. Она должна быть удобной. Поэтому для карточек лучше использовать предсказуемую и удобную выключку по левому краю :)

Ответить
4

Пользователь вынужден искать его каждый раз. Это усложняет сканирование и чтение.

Это ваша гипотеза или вывод в рамках проведенного вами исследования?
Выключка по левому краю, напротив, упрощает чтение. Новая строка всегда начинается с одного и того же места.

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

Ответить
0

Пример и объяснения хороши 🙂 Приятно обсуждать с вами этот вопрос. 

Однако, все ещё думаю, что для >2 строк в описании лучше использовать выключку по левому краю. В вашем примере для двух строчек описания всё выглядит хорошо.

В случае с Sephora я бы переверстал карточку так, чтобы текст не «висел». Другой вариант — отказаться от длинных описаний. Я бы выбрал переверстать.

К сожалению, никаких релевантных нашему случаю исследований нет. Так что контекстуальность и субъективность сохраняется.

Ответить
0

Кто это писал? Какая еще фрустрация пользователя?

Ответить
0

Насколько я знаю, фрустрация — состояние, когда не можешь получить желаемое. 

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

Можете воспринимать слово «фрустрирует» как преувеличение, если вам это так важно :)

Ответить
0

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

Ответить
0

Сергей, спасибо за вопросы :)

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

Во второй статье я отдельно рассматриваю вопросы мобильной версии, где это необходимо.

2. Мы бы тоже хотели рассказывать цифры, пока не можем. Потерпите немного, пожалуйста.

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

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

Дизайн проверяют разными способами. Как вариант, можно использовать A/B-тестирование.

Ответить
0

Очень удачно нашёл статью. Спасибо, хорошо написано.

Ответить
0

Спасибо за цикл статей! Взяли частично их за список требований к дизайну. Многие вещи уже были реализованы. Другие - были интуитивно понятны, но теперь подтверждены ещё одним пользователем и приняты к реализации. Третьи - совсем новые для нас, и мы их с удовольствием воплотим в своих проектах. 
PS.: очень интересно читать комментарии. Особенно про хорошие и плохие сайты: плеер, вайлдбериз и тд. Также прикольно читать холи вары. Что-то из этого рождается. Про "выключку" центрирование мы больше согласны с пользователем из комментариев. 

Ответить
0

Itmart.kz - ни когда не задумывался на тему дизайна,  тк дизайн и тренды вещь не постоянная. Каждые 2-3 года рекомендуют сметить карточку товара или еще чтото. В данный момент придерживаюсь своего стиля и шаблонимся в нем для информирования клиентов  (посты, рассылки и тд)
Кстати,  лого многим не нравится. .. квадратик олдскульный)))

Ответить
0

Роман, здравствуйте!

Да, тренды вещь непостоянная, но флэт-дизайн держится на протяжении 7+ лет. Зависит от того, что называть трендами. Иногда освежать визауал — важно. «Оценивают по UI, провожают по UX».

Мы, обычно, проводим дизайн-аудит и анализируем, насколько необходимы те или иные изменения :)

Ответить

Комментарии