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

Первая из цикла статей. Цель цикла — повысить конверсии и сделать онлайн-шопинг удобнее для людей. Мы в 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
Остается только наслаждаться поиском кнопки «Купить» и стоимости. Что заставило дизайнера поставить кнопку в правый верхний угол — загадка.  Сайт регионального представителя Sony

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

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

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

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

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

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

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

Шаг 1. Размер

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

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

Текст характеристик набран 12 pt и даже 11 pt.  Его некомфортно читать даже человеку с идеальным зрением. Интернет-магазин «Эльдорадо»
Текст характеристик набран 12 pt и даже 11 pt.  Его некомфортно читать даже человеку с идеальным зрением. Интернет-магазин «Эльдорадо»
<p>Основная информация — 16 pt. Вторичная — 14pt. 13pt используется только для ярлычков. Они распознаются по цвету после первого прочтения.</p> Дизайн одного из наших проектов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<p>Абзац прочитают только гики — слишком длинно. Заголовки, подзаголовки и иконки просканируют почти все.</p> Интернет-магазин «Apple»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше?

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

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

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

9797
51 комментарий

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

13
Ответить
Автор

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

Ответить

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

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

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

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

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

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

6
Ответить
Автор

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

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

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

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

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

1
Ответить

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

6
Ответить
Автор

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

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

2
Ответить

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

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

2
Ответить