Помилки Zara, що коштували мільярди: аналіз інтернет-магазину

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

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

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

Продуктова команда повинна ретельно аналізувати зворотний зв'язок та докладати максимум зусиль для оптимізації процесу оформлення замовлення. Кожне покращення могло б забезпечити фантастичний ROI (повернення інвестицій).

Однак зараз сайт практично непридатний для використання, наповнений помилками та втраченими можливостями.

Мода > Простота та Зручність

Перша і найочевидніша проблема — шалене когнітивне навантаження 🧠.

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

Скажімо прямо: це цифрова інтерпретація модного рекламного буклета, яка провалилася майже за всіма параметрами.

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

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

Який висновок ми можемо зробити? Надмірно стилізований дизайн зазвичай ускладнює використання. Цілком нормально покладатися на знайомі патерни, які добре працюють.

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

Що важливо, а що другорядне?

Ієрархія – основа порядку в дизайні.

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

Проблема Zara полягає в тому, що оскільки все виглядає однаково, ми не можемо зрозуміти, що має першорядне значення. Погляньте на ці скриншоти. Що тут головне? З чим вам хочеться взаємодіяти?

На сайті Zara присутні різні елементи: теги, фільтри, пошук, кнопки "Додати до кошика", розміри, помилки, вхід, часті питання. Ще складніше завдання — якщо ви прокрутили сторінку, згадати, як виглядав конкретний компонент і чим він відрізнявся від інших.

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

Все здається нерелевантним та малозначним.

Що відбувається?

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

Список виглядає нормально, і ви натискаєте кнопку «Перейти до оформлення замовлення».

На екрані з'являється спінер із написом: «Збереження змін».

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

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

Ось як це можна зробити:

Duolingo не втрачає нагоди надати своїм користувачам соціальний доказ. При завантаженні уроку ви бачите рандомну статистику, наприклад, «Приєднуйтесь до 40 мільйонів людей, які вчать іспанську мову з Duolingo прямо зараз!»

Такий контент виконує три важливі функції:

⌛️ 1. Задає контекст
Він інформує користувача про те, що відбувається — завантаження курсу, а не чергового дашборда.

💪 2. Створює ілюзію зусиль
Слово "building" (будування) підкреслює, що курс формуються з відповідних модулів, що робить процес значно привабливішим, ніж просто "loading" (завантаження).

⭐️ 3. Соціальний доказ
Цей текст нагадує користувачу, що 40 мільйонів людей теж вивчають іспанську з Duolingo, підвищуючи впевненість у виборі.

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

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