В номере: как через шрифт рассказать историю книги и влияние качества изображения товара на восприятие сайта и бренда в целом.
Ланч-тайм 258: краткий перевод свежих статей о digital
Сибирикс
Ланч-тайм 258: краткий
перевод свежих статей о digital
В номере: как через шрифт рассказать историю книги и влияние качества изображения товара на восприятие сайта и бренда в целом.
#836
Когда шрифт рассказывает историю

«Может ли дизайн вдохновить людей читать классику?» — таким вопросом задались создатели Font Books — набор шрифтов, основанных на знаковых романах, и спрятали книгу в файл с шрифтом. На данный момент набор включает восемь бесплатных шрифтов, вдохновленные следующими произведениями:

  1. Моби-Дик,
  2. Превращение (the Metamorphosis),
  3. Машина времени,
  4. Камасутра,
  5. Странный случай доктора Джекила и мистера Хайда,
  6. Тайный сад,
  7. Принцесса Марса,
  8. Питер Пэн.

Когда вы загружаете шрифт, получаете копию романа в формате электронной книги и аудиокниги.

Креативный директор агентства BBDO Guerrero Мишель Эду объясняет, что каждый шрифт был создан, чтобы дать более ясную картину сути истории.

Например, книга «Моби-Дик» полностью посвящена стремлению капитана Ахава отомстить белому киту, поэтому глаза и хвост животного заметно выделяются в шрифте.
А многочисленные тонкие ножки и другие части нового тела главного героя Кафки вдохновили на создание шрифта «Превращения» (Metamorphosis).
Вместо стандартного предварительного просмотра шрифта, каждый из них вместо этого использует выдержку из романа.
Перевод: «Сам-то он ускользнул от Нэниных зубов, но тени его не повезло: она не успела выскочить вместе с ним — окно захлопнулось, и тень осталась в комнате». Источник
Вывод: будем надеяться вместе с авторами, что проект по мере роста будет стимулировать больше людей на прочтение классики. Перевели и сэкономили вам 2 минуты: мелочь, а приятно :)
#837
Влияние качества и уровня масштабирования изображения товара на потребителя в e-commerce

Изображение товара помогает покупателю решить купить или не купить этот товар.

Во время масштабного юзабилити-тестирования компания Baymard заметила, что 56% пользователей, оказавшись на сайте, первым делом начинают изучать изображения товаров.

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

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

Ранее результаты тестов исследований UX, связанных с качеством и уровнем масштабирования изображения продукта, показал:

  • изображения с низким разрешением влияют на то, как пользователь сайта воспринимает товар — это проблема 14% сайтов электронной коммерции,
  • если изображение товара невозможно масштабировать в достаточной степени, пользователь не может изучить товар в полной мере — это проблема 11% сайтов электронной коммерции.

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

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

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

На этом сайте пользователь сначала попытался нажать на изображение, а затем растянуть, но так и не смог его увеличить.
Возможность увеличивать изображения товаров уже стало неким веб-соглашением в области электронной коммерции: исследование показало, что у 93% сайтов электронной коммерции эта возможность есть.

Пользователям часто нужно увеличить изображение больше, чем позволяет сайт. Испытуемый несколько раз пытался растянуть изображение, пытаясь прочитать, какая у товара степень защиты от солнца (SPF).
Иногда, даже если пользователь может увеличить изображение, качество оставляет желать лучшего (проблема 5% сайтов). Если полученное в результате увеличенное изображение имеет низкое разрешение или сайт предлагает только небольшой уровень увеличения (обычно из-за отсутствия нужного разрешения изображения), пользователи не смогут рассмотреть товар так, как им нужно.

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

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

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

Удачный пример: благодаря изображению с высоким разрешением и достаточным уровнем масштабирования пользователь может детально рассмотреть товар.
Чтобы убедить руководство, что необходимо выделить большой бюджет для изображений товаров и что все инвестиции окупятся, вам необходимо тщательно отслеживать влияние высококачественных изображений на продажи. Выберите популярные товары или категории товаров и проведите для них А/B-сплит-тестирования.

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

Удачный пример: пользователь увеличивает масштаб, чтобы осмотреть обувь, и полученное увеличенное изображение имеет высокое разрешение.
Вывод: пользователи ожидают большое разнообразие высококачественных изображений и что качество останется высоким при увеличении (как на дэкстопном, так и на мобильном устройствах). Сайты, на которых этого нет, подвергают себя риску оказаться «дешевыми» и непрофессиональными. Переводили и качали высококлассные и не очень картинки, чтобы сэкономить вам 10 минут.
Всем высококачественных выходных! Берегите себя.