5 найкращих UX-практик у дизайні інтернет-магазинів одягу

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

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

У цій статті ми розглянемо 5 найкращих UX-практик для інтернет-магазинів одягу:

Надавати достатньо інформації про розміри (94% сайтів не роблять цього).
Об'єднувати різновиди товарів в один елемент списку (20% сайтів ігнорують цю практику).
Використовувати окрему кнопку для кожного доступного розміру (63% сайтів не застосовують цей підхід).
Показувати, як речі виглядають на моделях (75% сайтів не реалізують цю функцію).
Забезпечити зображення товарів з високою роздільною здатністю та можливістю масштабування (72% сайтів не дотримуються цього стандарту).

Надавати достатньо інформації про розміри (94% сайтів не надають)

Коли мова йде про купівлю одягу, вибір правильного розміру є критично важливим.

Під час тестування інтернет-магазинів одягу ми виявили, що часто користувачі вагаються купити товар, якщо не мають чіткої інформації про його розмір.

Більш того, якщо знайти відповідний розмір важко, користувачі можуть покинути сайт у пошуках додаткової інформації і, ймовірно, не повернуться.

👎🏻 У магазинах Sears та Debenhams відсутній посібник по розмірам для курток-бомберів та джинсів. Це означає, що користувачі не отримують важливу інформацію для ухвалення рішення про покупку.

Дійсно, під час юзабіліті-тестування як десктопних, так і мобільних версій інтернет-магазинів невпевненість у виборі розміру виявилася однією з основних причин відмови від покупки. Крім того, якщо товар, як футболка чи вечірня сукня, не підійшов за розміром, його повернення стане додатковим клопотом.

👎🏻 У "Посібнику за розмірами" на сайті Pangaia всі параметри вказані лише в сантиметрах. Це може викликати труднощі для користувачів, які звикли до вимірювань у дюймах, а також для більшості покупців, які не знають точних розмірів свого одягу (наприклад, довжини рукава). Через це визначити правильний розмір може бути складно, що потенційно відштовхне відвідувачів від покупки.

👍🏻 В інтернет-магазині Everlane стандартна інформація про розміри розташована поруч із числовими позначеннями та точними мірками одягу. Це дозволяє користувачам легко знайти всю необхідну інформацію для ухвалення рішення про покупку, що значно підвищує зручність користування сайтом.

Дослідження показало, що інформація про розміри вважається достатньою, якщо враховані такі 10 аспектів:

Надано стандартну інформацію про розміри.
Є числові позначення розмірів.
Вказані виміри як у дюймах, так і сантиметрах.
Є таблиця відповідності міжнародних розмірів.
Надано інструкції та поради щодо правильного зняття мірок.
Інформація про розміри відповідає типу продукту (сукня, джинси, взуття тощо).
Посилання на "посібник за розмірами" знаходиться поруч із кнопками вибору розмірів.
Повернення за допомогою кнопки "назад" у браузері повертає користувача на сторінку товару, а не на головну.
У посібнику з розмірів є контактна інформація служби підтримки.
Вказані параметри моделей на фотографіях товарів.

Однак наше тестування показало, що 94% інтернет-магазинів одягу не надають цієї важливої інформації в повному обсязі, підвищуючи ризик втрати покупців, які можуть піти з сайту через невпевненість у виборі розміру.

Об'єднувати різновиди товарів в один елемент списку (20% не роблять цього)

Різновиди товарів, такі як кольори та розміри, а також інші параметри, є важливими факторами при прийнятті рішення про покупку. Вони можуть бути відображені у списку товарів двома способами:

Різновиди поєднуються в один елемент списку, часто позначені свотчами (маленькими зразками кольорів) під зображенням товару.
Різновиди відображаються окремо, де кожна опція (наприклад, сорочки різних кольорів) займає своє місце в списку.

Під час тестування виявили дві основні проблеми, які виникають, коли різновиди товарів відображаються як окремі елементи списку:

Захаращеність списків – це створює надмірне когнітивне навантаження і ускладнює процес огляду асортименту.
Труднощі з пошуком потрібного різновиду – користувачам важко знайти потрібний варіант, особливо якщо варіанти розкидані по всьому списку.

Об'єднання різновидів товару в один елемент списку значно спрощує процес пошуку та вибору потрібного варіанту.

👎🏻 "Так, це все одна й та сама куртка різних кольорів. Насправді це не різні товари... На вебсторінках зазвичай стільки всього. Я не хочу витрачати цілий день, щоб переглянути всі доступні варіанти." Коли ми створюємо кілька елементів списку для одного товару, користувачі змушені витрачати більше часу на перегляд усіх варіантів. Навіть якщо в кожній картці вказано, що доступні ще 3 кольори, як у додатку Urban Outfitters, це не полегшує процес вибору.

👎🏻 На сайті Overstock різні кольорові варіації одного й того ж рюкзака заважали учасникам тестування вивчати асортимент магазину (на сайті представлено понад 3 000 рюкзаків). Проблема ускладнюється тим, що фото товару зроблено з різних кутів, через що користувачі можуть подумати, що це різні рюкзаки, а не просто варіації одного товару.

👎🏻 "Це одне й те саме взуття в різних кольорах? Що?" — цей учасник зайшов на сайт Thousand Fell і був спантеличений тим, що однакові кросівки були представлені в списку кілька разів із незначними візуальними відмінностями. Такий поділ на кілька елементів списку може значно ускладнити навігацію навіть на невеликих сайтах-каталогах, які займаються прямим продажем.

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

Тому різновиди товарів варто поєднувати в один елемент списку, щоб спростити навігацію і полегшити процес вибору.

👍🏻 Інтернет-магазин Neiman Marcus поєднує доступні кольори кожного товару в один елемент списку. В результаті список не виглядає захаращеним, що дозволяє користувачам ефективно вивчити асортимент.

👍🏻 "Добре, що всі забарвлення показані одразу під сукнею. Тож якщо мені сподобається якась модель, я можу просто перейти на сторінку товару і переглянути доступні кольори, не відкриваючи окремі сторінки. Це економить час." Поєднання різних кольорів в один елемент списку, як підтвердила ця учасниця тестування на німецькому сайті Bonprix, значно полегшує процес вибору та економить користувачам час.

Коли ми поєднуємо різновиди товарів в один елемент списку, користувачі отримують чіткіше уявлення про асортимент і легше знаходять потрібний варіант. Це зменшує ймовірність того, що вони пропустять варіацію, яка відповідає їхнім потребам.

Щоб ефективно об'єднати різновиди, важливо, щоб ці варіації були коректно пов’язані у базі даних. На сайтах, що пропонують товари від кількох постачальників, може знадобитися постобробка даних про товар, щоб всі варіації мали один формат і були належним чином пов’язані.

Незважаючи на серйозність цієї проблеми, 20% протестованих сайтів все ще не використовують метод об’єднання різновидів товарів в один елемент списку, що може ускладнювати покупку для користувачів.

Використовувати окремі кнопки для кожного доступного розміру (63% не використовують)

Під час UX-тестування ми виявили, що коли розміри товару представлені у вигляді випадаючого списку, багато користувачів просто ігнорують цю опцію.

👎🏻 "Які милі!" — ця користувачка, яка здійснює покупки на сайті Adidas, знайшла пару взуття, що їй сподобалася (перше зображення), але не зрозуміла, що її розмір відсутній у наявності, поки не відкрила випадаюче меню (друге зображення): "О, у них немає мого розміру". Коли доступні розміри приховані всередині такого списку, користувачам важче визначити наявні варіанти, що може розчарувати чи засмутити їх.

👎🏻 Цей користувач сайту Adidas не вибрав розмір у випадаючому меню перед натисканням кнопки "Додати в кошик", що призвело до появи повідомлення про помилку. Користувачі часто ігнорують мало помітні випадаючі списки та збільшити кількість помилок.

Крім того, коли користувачі все ж відкривали випадаюче меню, вони часто були здивовані або розчаровані наявними розмірами.

Декілька користувачів, які пропустили список розмірів, отримували повідомлення про помилку. Інші змушені були вручну перевіряти наявність потрібного розміру для кожного товару, що є досить стомлюючим процесом і часто призводить до відмови від покупки.

👍🏻 "Схоже, розмір у наявності, так". Учасниця дослідження відзначила, що на сайті Under Armour легко визначити, чи є толстовка в потрібному їй розмірі. Видимі кнопки спрощують перегляд доступних розмірів, не змушуючи користувачів взаємодіяти зі списком, що випадає.

👍🏻 "Тут чітко вказано, які є розміри". На сайті Marks & Spencer (Велика Британія) інша учасниця тестування змогла швидко розібратися з доступними розмірами та швидко вибрати свій.

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

Проте 63% протестованих сайтів не використовують кнопки вибору розміру або реалізують їх неправильно.

Показувати, як речі виглядають на моделях (75% не роблять цього)

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

👎🏻 "Ось цей... я не думаю, що тут є його фото у когось на спині, тому я нічого не знаю про його розмір... я не хочу щось занадто маленьке... наскільки я розумію, це може бути дитячий рюкзак." На сайті Kohl's відсутні зображення товарів на моделях, що заважає користувачам оцінити розміру та посадку товару.

👎🏻 "Я шукаю в Google, наприклад, 'Lolly's Laundry, сукня Єва', і шукаю, чи є фотографії цих суконь на людині." Коли користувачі, як ця учасниця тестування, шукають зображення одягу на моделях, як це було на скандинавському сайті Boozt, існує ризик, що вони можуть піти шукати інформацію в іншому місці і, можливо, не повернутися.

У ході нашого юзабіліті-тестування на комп'ютерах та мобільних пристроях ми виявили, що простої фотографії одягу на білому фоні недостатньо для того, щоб користувачі могли добре уявити його фізичні характеристики.

👍🏻 "Мені подобається, що можна побачити, як це виглядає на людині," — зазначила ця учасниця, зацікавлена зображенням моделі в пуловері на сайті Adidas. Ці зображення допомогли їй отримати більш точне уявлення про посадку виробу та його візуальні характеристики.

👎🏻 "Я думаю, що без моделі важко уявити це на собі. Тому мені не дуже цікаві такі фото. Я б віддала перевагу варіанту з моделлю." Відсутність зображення моделі у цій сукні в додатку Urban Outfitters не дозволила учасниці тестування оцінити його належним чином.

👍🏻 "Відмінні фотографії, є кілька дійсно хороших великих планів, а потім показано, як взуття виглядає на людині. Це чудово." Демонстрація черевиків на моделі в ASOS дозволяє користувачам, таким як ця учасниця тестування, більш точно оцінити, наскільки вони відповідають вимогам.

Натомість сайти одягу повинні показувати, як речі виглядають на моделях на сторінці з інформацією про товар.

Тільки за допомогою контексту – коли ми бачимо продукт, одягнений на модель – досвід взаємодії може наблизитися до реального шопінгу в звичайному магазині. Це дозволяє користувачам отримати більш точне візуальне уявлення про товар і почуватися впевненіше при прийнятті рішення про покупку.

Коли зображень моделей немає, користувачам доводиться використовувати свою уяву, щоб уявити, як продукт виглядатиме на них. Для багатьох цього просто недостатньо, щоб здійснити покупку в інтернет-магазині.

👎🏻 "Манекен у дуже нудному одязі... він не викликає у мене бажання її купити". Зображення сумки на сайті eBags не справило враження на користувача, який вважав зовнішній вигляд манекена дешевим і непривабливим.

👍🏻 "Сумка представлена на моделі, так що я бачу, що вона досить велика". Показуючи, як сумка виглядає на людині, можна уникнути питань щодо її розміру. Це підтверджує тестування інтернет-магазину Next (Великобританія).

Крім того, тестування показало, що використання манекенів або віртуально створених "моделей" слід застосовувати лише в крайніх випадках — учасники тестування переважно негативно сприймали такі зображення.

Тому, де тільки можливо, використовуйте фотографії реальних людей.

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

5) Подбати про те, щоб зображення товарів мали належний дозвіл і добре масштабувалися (72% не роблять цього)

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

👎🏻 "Ці зображення абсолютно марні". Один з учасників тестування відзначив погану якість зображень на сайті Overstock. Якість зображень є критично важливим аспектом для користувачів, особливо в сфері одягу, де візуальна інформація грає ключову роль у прийнятті рішення про покупку.

👎🏻 "Тут представлена лише одна фотографія, і вона нечітка. Я не можу ухвалити рішення, потрібен мені цей гаманець чи ні, спираючись лише на це зображення. Навіть якби в описі було сказано, що він чарівний і приноситиме мені 100 доларів щодня [сміється], я б його не купила. Я б навіть не стала читати опис." Учасниця тестування була розчарована якістю фотографій на сайті Overstock і заявила, що готова піти на інший сайт.

👎🏻 "Я б хотіла зрозуміти, як виглядає матеріал поблизу. Наближення має бути достатнім, щоб я могла відчути це просто по фотографії. Ні, напевно, я все-таки не куплю його". Під час нашого тестування учасники, наприклад, ця учасниця на сайті Zalando (Німеччина) часто говорили про необхідність масштабування зображень для вивчення матеріалів і тканин. Для деяких відсутність можливості "помацати" матеріал стало причиною відмови від покупки.

У багатьох випадках зображення низької якості – гірше, ніж їх повна відсутність. Наприклад, коли користувачі намагаються розглянути товар візуально — наприклад, через мініатюри в галереї зображень на сторінці товару — а потім відкривають збільшене зображення і бачать його зернистим або пікселізованим.

У таких ситуаціях користувачі можуть відчути, що бренд недостатньо дбає про надання візуальної інформації, необхідної для ухвалення рішення про купівлю. Як результат, багато хто з них може піти на інший сайт у пошуках кращих зображень.

Наше тестування виявило дві ключові проблеми, пов’язані з якістю зображень:

Зображення неможливо достатньо наблизити — щоби розглянути деталі (принаймні на 50%).
Зображення мають низьку роздільну здатність.

Будь-яка з цих проблем може спонукати користувача залишити сторінку товару.

👍🏻 "Мені подобається автоматичний зум. Я можу розглянути всі деталі". Користувач сайту Farer високо оцінив рівень візуальної деталізації при масштабуванні зображення.

👍🏻 "Дуже приємно, що можна побачити річ поблизу... розглянути матеріал, так. Це насправді добре". Аналогічно, користувач скандинавського сайту Miinto оцінив функцію наближення зображення, яка дозволяє розглянути тканину, з якої виготовлено сукню.

Сайти, що містять зображення товарів високої якості, сприймаються користувачами більш позитивно — вони виглядають професійніше, а користувачі можуть впевнено приймати рішення про купівлю товарів, які добре вивчені візуально.

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

Щоб надати користувачам інтернет-магазинів одягу всю необхідну інформацію для ухвалення рішення про купівлю, важливо дотримуватися 5 ключових практик.

Отже:

Надавайте достатню інформацію про розміри (94% не надають)
Об'єднуйте різновиди товару в один елемент списку (20% цього не роблять)
Використовуйте окремі кнопки для кожного доступного розміру (63% не використовують)
Показуйте, як речі виглядають на моделях (75% цього не роблять)
Забезпечуйте, щоб зображення товарів мали належну роздільну здатність і добре масштабувалися (72% не роблять цього).

🖤

Сподобався цей матеріал? Приєднуйся до дизайн спільноти Pleex і разом ми зробимо нашу дизайн-культуру кращою.