Дизайн интернет-магазина: что учесть, чтобы не облажаться?
Первая из цикла статей. Цель цикла — повысить конверсии и сделать онлайн-шопинг удобнее для людей. Мы в 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 миллисекундах на просмотр сайта и при неограниченном времени на анализ.
2. Исследование от Google
Гугл подтвердил числа Линдгаард в собственном исследовании 2012 года. Некоторые аспекты люди оценивали даже за 17 миллисекунд. Другой важный вывод исследования:
Мы ещё вернемся к этому выводу позже.
3. Дизайн определяет первое впечатление в половине случаев
Исследование провели в 2002 году для WebWatch в Стенфордском университете. Исследователи измеряли, как люди оценивают надежность сайта. В 46,1% комментарии людей направлены на дизайн. Следующей по важности — 28,5% — была структура представления информации.
4. Визуал vs. Юзабилити
В 2009 году битву с юзабилити выиграл визуал. Барбара Чапарро из университета Эмбри-Риддл показала, что первое впечатление в большей степени диктуется визуальным наполнением. Для этого оценивалась визуальная составляющая, юзабилити и удовлетворенность самого пользователя по отдельности.
Человек нерационален. Пользователь не разберется в непривычном интерфейсе. Ему просто не понравится страница, и он уйдет. Так «сгорают» рекламные бюджеты.
Что учесть в первую очередь?
Дизайн важен. Он влияет на все пользовательское поведение. Причем в первую очередь человек смотрит на визуал, а потом на юзабилити. Давайте разберемся, что делать с этой информацией.
Прототипичность
В исследовании от Гугл есть два основных термина: визуальная сложность (visual complexity) и прототипичность (prototypicality). Остановимся на втором.
Прототипичность — не про серые блоки без картинок. Самым близким по значению будет слово привычность. Прототипичный сайт удовлетворяет представлению о стандартах вашей целевой аудитории. Принципиально отличающийся внешний вид фрустрирует пользователя. Он либо покупает, либо думает.
Прототипичность схожа по смыслу с «сognitive fluency» или «когнитивной беглостью». Когнитивная беглость подразумевает отсутствие когнитивной тяжести. Этот термин ввел Дрейк Беннет в статье для Boston Globe.
В исследовании Гарварда совместно с университетом Мэрилэнда и Колорадо ученые показали: нет универсального гайдлайна для разных демографических групп.
В опыте использовали 450 веб-сайтов. Их оценивали 548 добровольцев. Они показали, что люди по-разному оценивают все, что связано с цветами на сайте (в исследовании это называется красочность, т.е. colorfulness). При этом визуальная сложность влияет сильнее.
Больше примеров и подробностей найдете в статье CXL. Мы же перейдем к конкретным шагам.
Простейший анализ конкурентов
Я не хотел добавлять этот пункт, потому что о нем говорят «из каждого утюга». К сожалению, я все еще встречаю людей, которые не анализируют рынок.
Проведите расширенный ресерч. Посмотрите на то, как выглядят магазины не только из вашей сферы. Сравнивайте качество дизайна. Забирайте себе то, чем удобно пользоваться. Выкидывайте некрасивое и сложное.
Привычность или прототипичность
После ресерча вы знаете, где люди ищут типичные элементы. Не ставьте корзину в левый верхний угол, каким бы оригинальным вам не казалось это решение.
Меньше = лучше
Представим кейс: вы сомневаетесь, нужно ли добавлять на сайт новый элемент. Поиск по прямым и косвенным конкурентам ничего не дал. Никаких исследований нет. В таком случае просто не добавляйте ничего. Лишний контент или пункт в меню только запутает ваших пользователей.
Оригинальность внутри ограничений
Прототипичность и когнитивная беглость не проповедуют ни скуку, ни деградацию. Творчество внутри ограничений еще более сложная задача. Решите ее.
8 шагов к хорошему тексту и типографике
Текст занимает большую часть контента интернет-магазина: описания, характеристики, отзывы, навигация. Начнем с него.
Шаг 1. Размер
Сложно читать — не буду читать. «Читабельный» текст начинается от 16pt. 14pt можно использовать для вторичного текста. 13pt для футера. Меньше использовать не стоит.
Сделайте сайт комфортным даже людям с небольшими зрительными проблемами. Их число будет расти.
Кстати, текст, который вы читаете прямо сейчас набран 18px. Кажется большим?
Шаг 2. Межстрочный интервал
Интерлиньяж — расстояние между базовыми линиями соседних строк. Слишком большой или малый интервал делают текст нечитабельным. Универсальной формулы нет. Интерлиньяж зависит от семейства шрифта, кегля, длины строки в блоке, начертания, цвета, размера отступов.
Шаг 3. Контрастность
Не делайте светло серый текст на сером фоне — недостаточно контрастно. Черный на белом тоже не делайте — слишком контрастно. Используйте оттенки серого, близкие к белому и черному, вместо насыщенных цветов.
Шаг 4. Длина строки
Универсалий нет. Понятно, как делать не нужно. Описание товара не должно быть вытянуто «от края до края». Ориентируйтесь на 50-75 символов в строку.
Шаг 5. Короткие абзацы
Люди приходят в магазин не почитать, они просто проскроллят текст. Начинайте новый параграф каждые 3-4 строчки или чуть реже.
Шаг 6. Структура
Используйте заголовки, подзаголовки и буллеты. Они визуально делят информацию и точно улучшают ее читабельность.
Шаг 7. Выключка
Не используйте выключку по центру. В бóльшей части случаев будет лучше по левому краю. Такой текст удобнее читать, так как не нужно искать начало следующей строки.
Шаг 8. Информационный стиль
После внешнего вида начинается контент. Убрать воду, оценки и «впаривание» помогут советы Ильяхова. Многие действуют и для английского. Я их благополучно игнорирую в этой статье. Не делайте так.
Полезный инструмент для ленивых — Главред. Помогает удалить мусор.
Гугл — хит сезона
Барбара Чапарро в своем исследовании за 2009 год проводила исследование на главных страницах сайта. В 2020 главная страница больше не главная.
Посещаемость «домашних страниц» падает с 2003 года — об этом сообщил Джерри МакГоверн в 2010 году. В 2014 году падение посещаемости продолжалось. Думаю, причин для изменений нет и сейчас.
Бóльшая часть пользователей попадет в ваш интернет-магазин в поиске конкретного товара, а не в поиске магазина. Если у заказчика есть метрики, проверьте посещаемость главной страницы. Будете удивлены.
Просто держите в голове, что пользователь чаще попадает в каталог или на конкретный товар. Значит, стараться нужно на каждой странице.
Еще один вывод в том, что человеку нужны удобные инструменты для дальнейшего пребывания на сайте. Такими инструментами являются навигация и поиск. О них мы поговорим в следующей статье.
Что мы обсудили?
Для тех, кто промотал в конец статьи.
дизайн важен. Первое впечатление люди составляют за доли секунды;
для хорошего первого впечатления дизайн должен быть простым и соответствовать ожиданиям пользователя;
первое впечатление влияет на весь последующий опыт. Хорошее первое впечатление может «победить» плохой UX. В пределах разумного, конечно.
- главная страница — больше не главная. Люди попадают на конкретную страницу сайта из поисковика.
В статье уже есть советы, как поработать над первым впечатлением. Вы можете подумать, что они очевидные — это не так.
Что дальше?
Новая статья в следующий понедельник! Разберём важные элементы интернет-магазина: навигация, поиск, обратная связь.
Спасибо, что прочитали. Пожалуйста, кликайте «+1», если понравилось и добавляйте в закладки.
Благодарности, вопросы и возражения в комментариях.
Молодцы ребят! Статья отличная!
Спасибо, Егор! Приятно слышать!
Как владелец интернет магазина скажу что для 99% интернет магазинов дизайн не нужен, лучше даже шаблон, чтобы покупателю было легче ориентироваться. Самое главное товар и/или концепция магазина. Мои слова подтвердят крупнейшие интернет магазины мира Амазон, Алибаба и т.д. Дизайн нужен только тем кто продает дизайн)
Думаю, мы действительно с разных берегов смотрим на интернет-магазины. Какую-то конверсию вам обеспечит любой шаблон :)
Дизайн — следующий уровень после качественного товара. Мы считаем, что нужно заботиться об удобстве пользователя и быть честными. Пользователь отплатит вам лояльностью и своими деньгами.
Очень частое заблуждение для владельцев интернет-магазинов. Особенно оно утверждается после того, как владелец все же обновил свой сайт, а продажи не выросли в разы, как он ожидал, а даже уменьшились - из-за того, что кто-то из постоянных отказался от покупки из-за того, что круто поменялось и не оказалось на привычном месте.
Надо ли обновлять сайт - безусловно, но весьма аккуратно. Тот же Амазон и Алишечка это постоянно делают, но вдвойне аккуратно, из-за больших оборотов.
В ваших шаблонах отсутствует дизайн? Что-то сомнительно. Если всё-таки отсутствует, то киньте ссылку, плиз, чисто поржать )
Меня смутило, что в статье говорится о влиянии дизайна на "впечатление о сайте". И исследования проводились так же - пользователей просили описать "впечатления о сайте". В итоге происходит подмена понятий, что "впечатление" = "эффективность сайта". Но это не так. Конечная цель интернет-магазина - это не "оставить хорошее впечатление", а "совершить продажу", эффективность измеряется именно в конверсии.
В реальности посетители заходят на сайт не оценить сайт, а удовлетворить свою потребность в товаре/услуге. И при таком фокусе внимания дизайн играет совершенно другую роль.
Если речь идёт о мультибрендовых магазинах, где пользователи заходят на карточек товаров, то на продажи влияет цена, сервис (скорость, доставка, обслуживание, примерка - вот это вот всё) и доверие к продавцу (рейтинги, отзывы и пр.). ВСЁ! Если человек зашёл с карточки - он знает всё о продукте, он просто ищет где его купить, и тот, кто предложит лучшую цену/сервис и отработает сомнение, что покупателя не кинут - совершит продажу. Пример - самый успешный интернет-магазин РФ - onlinetrade.ru. Цены, доставка и доверие решают. Роль дизайна - скорее не мешать паттернам UX, чтобы пользователь нашёл всю важную информацию.
Если речь идёт о мультибрендовых магазинах, где пользователи заходят с небрендовых категорий каталога типа "Кондиционеры" (то есть они пока не знают какой товар ему подойдет), то кроме цены, сервиса и доверия играет роль качество фильтров, обзоров/отзывов и экспертность продавца, чтобы тот помог выбрать товар. Пример - самый успешный интернет-магазин одежды - wildberries.ru. Видео с товарами, примерка, цены, отзывы, доставка - это всё решает. Роль дизайна как и выше - не мешать паттернам UX, чтобы пользователь нашёл всю важную информацию.
Если речь идет о брендовых интернет-магазинах - тут да, дизайн нужен, потому что нужно продать бренд, атмосферу, а это совсем другая история.
Пожалуй, где дизайн действительно всегда важен - это при продаже услуг, потому что тут уже реально нужно всеми способами заставить доверять организации, которая эти услуги оказывает. И дизайн - одна из методик заставить доверять. Как костюм на собеседовании - надо создать впечатление. И тут уже корректно применять все исследования из статьи про первое впечатление.
Спасибо за такой подробный комментарий, Дарья :) Постараюсь ответить вам также подробно.
1. Что такое дизайн и кто такой дизайнер?
К сожалению, я несколько раз прочитал и не понял, что же вы подразумеваете под дизайном. Для нас дизайнер в команде — эксперт, который напрямую влияет своими идеями на продукт. В том числе, он может предлагать заказчику и менеджеру функции. Он же проектирует пользовательское взаимодействие и руководит/создаёт визуальное наполнение.
2. Как мы подходим к задаче
В первую очередь мы следим за пользовательским опытом. Позже беремся за визуал. В статье я привел опыт Чапарро. Я считаю, Барбара показала: «не только юзабилити единым».
3. Следить только за конверсией — недостаточно.
Действительно, заказчика в первую очередь интересует повышение конверсии. Для нас это тоже одна из важных целей. Есть несколько важных уточнений:
3.1. Покупка — эмоциональное решение. Выбор магазина тоже.
3.2. Конверсия — не единственная метрика, за которой следит хороший продавец. Например, стоит следить за удержанием. Если вашему пользователю не понравилось в магазине (а опыты показывают, что здесь речь не только про функции и UX), то вернется ли он?
3.2. На рынке ритейла высокая конкуренция, так что нужно использовать все преимущества. Особенно, доказанные. Решать это не нам, а заказчику. К нам приходят за хорошим UX и UI.
4. При продаже услуг нужен дизайн
Конечно, нужен. Многие советы из цикла можно применить и для сайтов с продажей услуг. Если внимательно читать, то первая вступительная статья общими мазками рассказывает про смысл и полезные практики абсолютно любого сайта. Это уже, кстати, замечали в комментариях раньше :)
Это было интересно и полезно~ Отдельное спасибо за примеры с иль де ботэ и сефорой, их дизайн всегда заставляет страдать и обливаться кровавыми слезами
Спасибо за отзыв!
Может быть, их маркетологи прочитают нашу статью и что-то изменится :)
Отличная статья @Antro переехало! Рада видеть, что русскоязычный сегмент онлайн магазинов и дизайн студий начал развиваться.
Немного печалит реакция "дизайн никому не нужен". Как человек работающий с западными eCommerce клиентами скажу, что там уровень большинства онлайн магазинов СНГ просто бы вызвал смех.
Вероятно более низкая конкуренция в этой сфере породила отношение "и так сойдет и так купят".
Если речь идёт о новых сайтах для монопродуктов, то где-то все же лучше западные коллеги, а если брать старые 3-4 года и мультипродуктовые, то все же нет.
В целом, рунет довольно прогрессивен и красив.
Поэтому смех больше вызывают западные ИМ, а не наши.
Спасибо, Кристина! Надеюсь, наш цикл статей чем-то поможет :)
Такая реакция меня тоже печалит. Хотя мы ожидали чего-то такого. Особенно, во время кризиса легко видеть, как урезают рекламные и дизайнерские бюджеты. Мол, без этого как-то проживем.
Верим, что всё изменится!
Годно написано. И не только для магазинов. Зачёт!!!
Если уметь анализировать, то что видишь, все ясно и без статей с мануалами! Автору РЕСПЕКТ, экспертная точка зрения.
Очень сложно порой передать словами/символами, все то что наблюдаешь и нужно исправлять на сайтах)) Проще переделать, чем донести до людей))
Спасибо большое, Алексей. Очень приятно слышать такой отзыв :)
Спасибо за статью! Полезно)
Спасибо, что комментируете! Это правда важно. Даже вдвойне:
1. Я понимаю, что людям действительно интересно.
2. Алгоритмы это тоже понимают. И, потенциально, редакторы vc.ru :)
Чем больше людей увидит, тем больше будет хорошего дизайна! Может быть, его даже закажут у нас :)
Отличная статья, хорошо все расписали)
Спасибо большое, Дарья Сергеевна!)
Шикарная обложка, ребят!
Очень много полезного, взял для себя некоторые вещи, материал отлично написан.
Подписался и жду следующую публикацию!
Спасибо! Следующая статья уже почти готова. В понедельник точно будет публикация :)
Спасибо за хорошую подробную статью!
Комментарий недоступен
Повторюсь, выключка по центру непредсказуемо смещает начало новой строки. Пользователь вынужден искать его каждый раз. Это усложняет сканирование и чтение.
Выключка по левому краю, напротив, упрощает чтение. Новая строка всегда начинается с одного и того же места.
Раскрою мысль подробнее. Выключку по правому краю и по центру можно использовать для нетипичных дизайнерский решений. Например, в рекламе или верстке плакатов. Карточка товара — не место для экспериментов. Она должна быть удобной. Поэтому для карточек лучше использовать предсказуемую и удобную выключку по левому краю :)
Кто это писал? Какая еще фрустрация пользователя?
Насколько я знаю, фрустрация — состояние, когда не можешь получить желаемое.
«Принципиально отличающийся внешний вид фрустрирует пользователя» — написано в статье. Условно, человек ожидает=хочет увидеть корзину в правом верхнем углу. Когда он не может её найти, то ощущает что-то близкое.
Можете воспринимать слово «фрустрирует» как преувеличение, если вам это так важно :)
Автор, расскажите про роль дизайна в мобильной версии. Ибо там вообще нет всего того, что написано в Вашей статье.
Второй вопрос: слова словами, а есть цифры увеличения продаж от ваших клиентов после изменения дизайна? Ну там было 10, стало 100. Не обязательно точные цифры, достаточно показать динамику и кратность.
Третий вопрос: допустим, вы говорите - вот дизайн увеличивает продажи на столько-то. Если я заказываю у вас дизайн и он не увеличивает продажи, вы возвращаете деньги? Почему? Ведь дело же совсем не в "ну мы же не можем контролировать ваши продажи, скорее всего у вас бизнес-процессы хромают, а наш дизайн работает на все сто". Вот как понять, что дизайн сработал?
Спасибо.
Сергей, спасибо за вопросы :)
1. К сожалению, не понял, что именно вы хотите узнать про мобильную версию? Все советы первой статьи можно смело применять и для мобилки.
Во второй статье я отдельно рассматриваю вопросы мобильной версии, где это необходимо.
2. Мы бы тоже хотели рассказывать цифры, пока не можем. Потерпите немного, пожалуйста.
Мы в ближайшие месяцы выложим кейс на vc.ru и все разложим по полочкам. Пока могу сказать, что динамика положительная.
3. Продажи зависят не только от дизайна и бизнес-процессов, но ещё и от многих индивидуальных факторов рынка. Наша работа — делать хороший дизайн и использовать научно-обоснованные техники 🙂
Дизайн проверяют разными способами. Как вариант, можно использовать A/B-тестирование.
Очень удачно нашёл статью. Спасибо, хорошо написано.
Спасибо за цикл статей! Взяли частично их за список требований к дизайну. Многие вещи уже были реализованы. Другие - были интуитивно понятны, но теперь подтверждены ещё одним пользователем и приняты к реализации. Третьи - совсем новые для нас, и мы их с удовольствием воплотим в своих проектах.
PS.: очень интересно читать комментарии. Особенно про хорошие и плохие сайты: плеер, вайлдбериз и тд. Также прикольно читать холи вары. Что-то из этого рождается. Про "выключку" центрирование мы больше согласны с пользователем из комментариев.
Itmart.kz - ни когда не задумывался на тему дизайна, тк дизайн и тренды вещь не постоянная. Каждые 2-3 года рекомендуют сметить карточку товара или еще чтото. В данный момент придерживаюсь своего стиля и шаблонимся в нем для информирования клиентов (посты, рассылки и тд)
Кстати, лого многим не нравится. .. квадратик олдскульный)))
Роман, здравствуйте!
Да, тренды вещь непостоянная, но флэт-дизайн держится на протяжении 7+ лет. Зависит от того, что называть трендами. Иногда освежать визауал — важно. «Оценивают по UI, провожают по UX».
Мы, обычно, проводим дизайн-аудит и анализируем, насколько необходимы те или иные изменения :)
де берутся эти умники, что понедельник растянулся до бесконечности )
Спасибо. Полезно!
Комментарий удален модератором