Дизайн интернет-магазина: что учесть, чтобы не облажаться?
Первая из цикла статей. Цель цикла — повысить конверсии и сделать онлайн-шопинг удобнее для людей. Мы в 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.
Когнитивная беглость — мера того, насколько легко о чем-то думать. Люди предпочитают вещи, о которых легко думать, тем вещам, о которых думать трудно.
В исследовании Гарварда совместно с университетом Мэрилэнда и Колорадо ученые показали: нет универсального гайдлайна для разных демографических групп.
В опыте использовали 450 веб-сайтов. Их оценивали 548 добровольцев. Они показали, что люди по-разному оценивают все, что связано с цветами на сайте (в исследовании это называется красочность, т.е. colorfulness). При этом визуальная сложность влияет сильнее.
Больше примеров и подробностей найдете в статье CXL. Мы же перейдем к конкретным шагам.
Простейший анализ конкурентов
Я не хотел добавлять этот пункт, потому что о нем говорят «из каждого утюга». К сожалению, я все еще встречаю людей, которые не анализируют рынок.
Проведите расширенный ресерч. Посмотрите на то, как выглядят магазины не только из вашей сферы. Сравнивайте качество дизайна. Забирайте себе то, чем удобно пользоваться. Выкидывайте некрасивое и сложное.
Привычность или прототипичность
После ресерча вы знаете, где люди ищут типичные элементы. Не ставьте корзину в левый верхний угол, каким бы оригинальным вам не казалось это решение.
Меньше = лучше
Представим кейс: вы сомневаетесь, нужно ли добавлять на сайт новый элемент. Поиск по прямым и косвенным конкурентам ничего не дал. Никаких исследований нет. В таком случае просто не добавляйте ничего. Лишний контент или пункт в меню только запутает ваших пользователей.
Оригинальность внутри ограничений
Прототипичность и когнитивная беглость не проповедуют ни скуку, ни деградацию. Творчество внутри ограничений еще более сложная задача. Решите ее.
8 шагов к хорошему тексту и типографике
Текст занимает большую часть контента интернет-магазина: описания, характеристики, отзывы, навигация. Начнем с него.
Шаг 1. Размер
Сложно читать — не буду читать. «Читабельный» текст начинается от 16pt. 14pt можно использовать для вторичного текста. 13pt для футера. Меньше использовать не стоит.
Сделайте сайт комфортным даже людям с небольшими зрительными проблемами. Их число будет расти.
Основная информация — 16 pt. Вторичная — 14pt. 13pt используется только для ярлычков. Они распознаются по цвету после первого прочтения.
Дизайн одного из наших проектовКстати, текст, который вы читаете прямо сейчас набран 18px. Кажется большим?
Шаг 2. Межстрочный интервал
Интерлиньяж — расстояние между базовыми линиями соседних строк. Слишком большой или малый интервал делают текст нечитабельным. Универсальной формулы нет. Интерлиньяж зависит от семейства шрифта, кегля, длины строки в блоке, начертания, цвета, размера отступов.
Шаг 3. Контрастность
Не делайте светло серый текст на сером фоне — недостаточно контрастно. Черный на белом тоже не делайте — слишком контрастно. Используйте оттенки серого, близкие к белому и черному, вместо насыщенных цветов.
Шаг 4. Длина строки
Универсалий нет. Понятно, как делать не нужно. Описание товара не должно быть вытянуто «от края до края». Ориентируйтесь на 50-75 символов в строку.
Шаг 5. Короткие абзацы
Люди приходят в магазин не почитать, они просто проскроллят текст. Начинайте новый параграф каждые 3-4 строчки или чуть реже.
Шаг 6. Структура
Используйте заголовки, подзаголовки и буллеты. Они визуально делят информацию и точно улучшают ее читабельность.
Абзац прочитают только гики — слишком длинно. Заголовки, подзаголовки и иконки просканируют почти все.
Интернет-магазин «Apple»
Шаг 7. Выключка
Не используйте выключку по центру. В бóльшей части случаев будет лучше по левому краю. Такой текст удобнее читать, так как не нужно искать начало следующей строки.
Шаг 8. Информационный стиль
После внешнего вида начинается контент. Убрать воду, оценки и «впаривание» помогут советы Ильяхова. Многие действуют и для английского. Я их благополучно игнорирую в этой статье. Не делайте так.
Полезный инструмент для ленивых — Главред. Помогает удалить мусор.
Гугл — хит сезона
Барбара Чапарро в своем исследовании за 2009 год проводила исследование на главных страницах сайта. В 2020 главная страница больше не главная.
Главная страница больше не главная.
Посещаемость «домашних страниц» падает с 2003 года — об этом сообщил Джерри МакГоверн в 2010 году. В 2014 году падение посещаемости продолжалось. Думаю, причин для изменений нет и сейчас.
Бóльшая часть пользователей попадет в ваш интернет-магазин в поиске конкретного товара, а не в поиске магазина. Если у заказчика есть метрики, проверьте посещаемость главной страницы. Будете удивлены.
Просто держите в голове, что пользователь чаще попадает в каталог или на конкретный товар. Значит, стараться нужно на каждой странице.
Вы когда-нибудь покупали книгу у Amazon из-за рекламы, которую вы видели на главной странице? А покупали книгу на Amazon из-за блока «Клиенты, которые купили этот товар, также купили»?
Это два маркетинговых метода. Только первый — это мегафон старой школы печати и телевизионного маркетинга. Второе — веб-маркетинг.
Еще один вывод в том, что человеку нужны удобные инструменты для дальнейшего пребывания на сайте. Такими инструментами являются навигация и поиск. О них мы поговорим в следующей статье.
Навигация и поиск нужны, чтобы клиент остался.
Что мы обсудили?
Для тех, кто промотал в конец статьи.
дизайн важен. Первое впечатление люди составляют за доли секунды;
для хорошего первого впечатления дизайн должен быть простым и соответствовать ожиданиям пользователя;
первое впечатление влияет на весь последующий опыт. Хорошее первое впечатление может «победить» плохой UX. В пределах разумного, конечно.
- главная страница — больше не главная. Люди попадают на конкретную страницу сайта из поисковика.
В статье уже есть советы, как поработать над первым впечатлением. Вы можете подумать, что они очевидные — это не так.
Что дальше?
Новая статья в следующий понедельник! Разберём важные элементы интернет-магазина: навигация, поиск, обратная связь.
Спасибо, что прочитали. Пожалуйста, кликайте «+1», если понравилось и добавляйте в закладки.
Благодарности, вопросы и возражения в комментариях.
Комментарий недоступен
Повторюсь, выключка по центру непредсказуемо смещает начало новой строки. Пользователь вынужден искать его каждый раз. Это усложняет сканирование и чтение.
Выключка по левому краю, напротив, упрощает чтение. Новая строка всегда начинается с одного и того же места.
Раскрою мысль подробнее. Выключку по правому краю и по центру можно использовать для нетипичных дизайнерский решений. Например, в рекламе или верстке плакатов. Карточка товара — не место для экспериментов. Она должна быть удобной. Поэтому для карточек лучше использовать предсказуемую и удобную выключку по левому краю :)
Комментарий недоступен
Пример и объяснения хороши 🙂 Приятно обсуждать с вами этот вопрос.
Однако, все ещё думаю, что для >2 строк в описании лучше использовать выключку по левому краю. В вашем примере для двух строчек описания всё выглядит хорошо.
В случае с Sephora я бы переверстал карточку так, чтобы текст не «висел». Другой вариант — отказаться от длинных описаний. Я бы выбрал переверстать.
К сожалению, никаких релевантных нашему случаю исследований нет. Так что контекстуальность и субъективность сохраняется.