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

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

Навигация по сайту

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

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

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

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

Отсутствие логотипа в хедере

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

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

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

Главная — как глянец

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

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

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

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

Карточки товаров на главной

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

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

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

Минимализм маркетплейсов

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

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

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

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

Скрытые фильтры

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

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

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

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

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

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

Непривычная структура каталога

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

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

Обратите внимание: Когда внёс деньги во вклад в банке, но там твоих денег никогда не видели.

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

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

Минималистичная страница товара

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

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

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

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

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

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

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

Аккордеоны с важной информацией

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

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

Мелкий кегль

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

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

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

Внутренние и внешние отступы

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

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

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

Центрированный текст

Центрирование длинного текста может затруднить его чтение, поскольку глазу сложнее найти начало строки.

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

Структура корзины

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

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

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

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

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

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

Длина инпутов

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

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

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

Вывод

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

Пожертвовать доступностью имеет смысл, если:

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

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

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

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

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

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

😎 Награда для участников - список "Самых больших ошибок в интернет-магазинах».