Красота вопреки: когда дизайн важнее удобства

В дизайне интерфейсов принято следовать «лучшим практикам». Но мода, как и искусство, часто игнорирует правила. Когда можно позволить себе жертвовать UX ради эстетики — и стоит ли это делать вообще?

Хорошей практикой считается выносить ссылки на информационные разделы (доставка, оплата и т.д.) на видное место — чаще всего в хедер. Чтобы все было перед глазами и не приходилось ничего искать.

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

У Massimo Dutti похожая ситуация. Но, в отличие от Lime, в бургер-меню вынесены только ссылки на категории товаров и коллекции, а информация о доставке и оплате находится в футере, до которого сложно быстро долистать из-за анимации смены блоков главной страницы.

Это решение может быть продиктовано стремлением сфокусировать внимание на визуальной составляющей и товарах. Бургер-меню помогает сохранить чистоту интерфейса, а постоянные пользователи ведь и так интуитивно знают, где искать нужные ссылки. Если визуал для вас важнее всего — можно пренебречь лучшими практиками. Но если пользователи часто пишут в поддержку с вопросами по доставке — стоит задуматься о том, насколько вам важна такая эстетика.

По привычке пользователи возвращаются на главную страницу, кликая по логотипу, размещённому в левом верхнем углу. Это соответствует паттерну сканирования интерфейса слева направо.

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

Может быть такой нестандартный подход подчёркивает философию бренда — минимализм и интеллектуальный дизайн, рассчитанный на осознанную аудиторию? ;)

Главная страница интернет-магазина должна показывать ассортимент: популярные категории, подборки, карточки товаров. Это помогает быстро сориентироваться, понять, что продает магазин и начать покупки.

Но Balenciaga использует главную как визуальное полотно. Это серия полноэкранных баннеров — каждый уводит на категорию или коллекцию.

Massimo Dutti поступает схожим образом. Главная здесь в формате слайдов — баннеры подстраиваются под размер экрана и занимают всю доступную область. При скролле баннеры на главной странице сменяют друг-друга, как слайды в презентации. Элементы управления минимальны, кнопок нет а подписи мелкие и сливаются с изображениями.

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

Некоторые бренды всё же используют карточки товаров, но адаптируют их под общую эстетику. У Aesop карточки на главной отличаются от тех, что в каталоге: крупные фото, отсутствие цены, кнопок и даже выбора объема.

Такой подход формирует имидж и подчёркивает уникальность, создавая ощущение художественной галереи, а не стандартного интернет-магазина.

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

Модные бренды часто используют нестандартные решения, потому что их аудитория уже понимает цель визита на сайт и выбирает, опираясь на визуальную составляющую. А как с этим у маркетплейсов?

Мегамаркет ушёл от привычного шаблона: на главной — только лента персональных рекомендаций и карточки акций. Популярные категории спрятаны в мега-меню, а карточки содержат минимум информации.

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

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

Фильтры принято размещать на виду — вертикально слева или горизонтально над каталогом. Это облегчает поиск нужного товара.

Но Balenciaga считает иначе. Фильтры спрятаны за кнопкой, а активные фильтры не отображаются на странице каталога — только цифра рядом с кнопкой.

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

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

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

Если ваши товары не нуждаются в подробной фильтрации, то такое решение вполне допустимо.

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

Но вместо этого, в каталоге Massimo Dutti их встречает огромная карточка во всю ширину экрана без подписей, цен и характеристик. Только маленькая кнопка «+» в углу, которая может легко затеряться на фоне большого фото.

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

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

Лучшие практики советуют показывать на странице товара ключевую информацию: доставка, оплата, характеристики. И не прятать ее за аккордеонами.

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

На странице товара сайта Monochrome подробная информация о товаре и доставке спрятана в шторках, ссылки на эти разделы размещены снизу.

С точки зрения дизайна такое решение позволяет сохранить лаконичность и минимализм страницы. Отсутствие большого объёма текста и блоков с деталями помогает сфокусировать внимание на фотографиях товара.

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

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

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

Согласно лучшим практикам, важную информацию лучше размещать прямо на странице, а не скрывать в выпадающих списках — иначе пользователь может её не заметить. Это особенно актуально для косметики, где важно сразу видеть состав и инструкции, чтобы избежать аллергии или неправильного использования.

Однако на сайте Glossier всё описание товара спрятано в аккордеонах, которые теряются на фоне крупных фото и недоступны на первом экране. Это может вызвать трудности и снизить доверие к магазину.

На сайте Massimo Dutti часто используется мелкий шрифт, что противоречит лучшим практикам: для десктопа рекомендуют не меньше 14pt, для мобильных — не менее 12pt. Особенно это важно для ключевой информации — параметров товара и условий доставки.

С дизайнерской точки зрения маленький кегль придаёт странице лёгкость и премиальный вид, подчёркивая минимализм бренда.

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

Одно из базовых правил дизайна — внутренние отступы должны быть меньше внешних, чтобы визуально объединять связанную информацию.

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

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

Выравнивание длинных текстов по центру затрудняет чтение — глазу сложнее находить начало строк.

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

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

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

Возможно у покупателей Balenciaga редко бывает много товаров в корзине, поэтому бренд может позволить себе отойти от стандартных решений, ориентированных на масс-маркет.

У Zara корзина оформлена как каталог: карточки размещены в 4 колонки, а стоимость и кнопка оформления — в закреплённой плашке снизу. Это может вызвать негативные эмоции, ведь по закону Якоба пользователи проводят большую часть времени на других сайтах, а значит ждут привычный интерфейс. Заставлять думать и сомневаться в корзине — рисковая идея.

В погоне за минимализмом легко упустить важные функции. Например, на сайте BORK, чтобы изменить количество товаров или удалить позицию, нужно нажать на неприметную иконку, которая открывает поп-ап. Также нельзя выбрать товары для частичной покупки или отложить часть на потом.

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

Независимые исследовательские институты рекомендуют делать поля ввода такой длины, которая соответствует объему информации. Например, для почтового индекса — короткое поле, так как он не может быть длиннее 6 цифр. Так пользователь не будет сомневаться, достаточно ли данных он ввел.

Однако на сайте Jacquemus поля слишком длинные и не соответствуют типу данных.С точки зрения дизайна одинаковая длина полей выглядит аккуратно и создаёт визуальную гармонию.

Но с точки зрения UX это может вызвать лишние сомнения на таком важном этапе. Также из-за размера полей может показаться, что сайт просит очень много данных. А низкоконтрастный шрифт затрудняет чтение и восприятие текста.

Красивый сайт — не всегда удобный, и это не всегда ошибка. В fashion- и luxury-сегментах визуальный язык бренда часто важнее огромной конверсии. Если вы создаёте не просто интернет-магазин, а иммерсивный опыт, можно позволить себе отойти от стандартов. Но важно понимать: чем выше эстетика, тем выше и цена неудобства для пользователя.

Жертвовать юзабилити имеет смысл, если:

Но если ваш сайт — про массовый спрос, простоту и скорость, лучше не экспериментировать.

Подробнее о том, как совмещать красиво и удобное поговорим на бесплатном вебинаре от Antro.

🗓 3 июля, 17:00–18:00 (МСК)

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

😎 Бонус для участников — чеклист «ТОП ошибок интернет-магазинов».