18 примеров хорошего UX-дизайна интернет-магазинов и 3 плохого
01.09.2018
Суть UX дизайна в том, чтобы проникая в голову посетителя e-commerce сайта, создать увлекательный, простой и бесшовный опыт пользования. Как быстро передать необходимую информацию и при этом успеть подарить хорошее настроение? Отличный UX (пользовательский опыт) вызывает удовлетворение, увеличивающее выработку допамина в мозге. Правильный интернет-магазин стремится поддержать позитивные желания: ознакомиться, запомнить, заказать. UX-дизайном можно повысить лояльность к онлайн-магазину, увеличить конверсию и продажи.
Обзор Samsung Galaxy A5 2017. Что лучше купить вместо него?
Далее, как продуманный UX-дизайн eCommerce сайта поощряет энтузиазм онлайн-шопперов, стимулирует желание делать последующие заказы.
Интернет-магазины с элементами хорошего UX
Хороший UXD: Asos
Дизайн этого интернет-магазина часто приводят в качестве образцового и тому есть объяснение – великолепный UX, интуитивный интерфейс. Популярный e-commerce ресурс имеет отличные изображения, внятные описания в разговорном стиле, ясные призывы Call-to-Action с переходами в секции каталога и очевидные выгоды (бесплатная доставка и т.д.).
Margaret Gould Stewart: How giant websites design for you (and a billion others, too)
Еще одна особенность: видео с демонстрацией изделия на модели, чтобы посетитель мог разглядеть товар и покупать уверенно. Полезны опции выбора размера / ZOOM-увеличения / «купить образ».
Хороший UXD: Berghaus
Бренд одежды для активного образа жизни, узнаваемый с первой секунды посещения онлайн-магазина.
Бренд до тонкостей понимает целевую аудиторию. Hero-изображение в первом экране – это воодушевляющее приглашение. Поклонников экстрима главная страница соблазняет мощными призыввами к действию : Распродажа на конец сезона, Собирайся, Призрак экспедиции… и обращением к посетителю «подобрано для тебя / тебе приглянулось». Также, геометрия в дизайне помогает выразить стиль.
Хороший UXD: Rent The Runway
Бренд продвигает свою уникальной концепцию: одежда или наряд напрокат на несколько дней. Идеально подходит для свадеб или проведения торжеств: когда вы не готовы раскошелиться на дорогую вещь, которую не нужно носить постоянно. Сайт представляет идею просто и затем добивается действия со стороны пользователя побуждая использовать эту возможность. Для этой аудитории, минималистичность оформления страниц каталогов и карточки товара визуально поддерживает посыл об экономии.
Хороший UXD: Zara
Предельно простой интернет-магазин с интуитивно понятной структурой , чистым дизайном и минимальным количеством элементов. Ограничение навигационных переходов дает возможность пользоваться чистыми но лимитированными опциями. Идея в том, что большой выбор сбивает с толку, а при его ограничении покупатель почувствует себя уверенней.
Хороший UXD: Graze
Изображение в продуктовом онлайн-магазине лучше всего расскажут о том, что вам нужно. Дизайн с креативными шрифтами заголовков не выглядит скучным, а формулировки пресными. Напротив, оживляющие сочетания зеленых оттенков и применение карточек / плиток для блога , каталога и товарных страниц, создает позитивный настрой.
Graze может послужить примером хорошего и простого UX-дизайна.
Хороший UXD: TopShop
Продающему много товаров интернет-магазину, UX-дизайн дается намного трудней. Как упорядоченно организовать продажу каждой модели джинсов? Мощные фильтры каталогов помогают отсортировать по цене, цвету и стилю.
Функциональность, простота с уникальной структурой соответствуют ожиданиям современного пользователя. Стильность задает минималистичная графика элементов интерфейса: иконка таблицы размеров, trackbar ценового диапазона… Hover-взаимодействия со сменой картинки приободряют посетителя, стимулируют продолжать.
Хороший UXD: Protest
Выпадающее меню обеспечивает гармоничную компактность и быструю навигацию.
Чистый дизайн, лаконичность и ничего лишнего. Чтобы пользователь не терялся на странице, синий цвет всегда обращает внимание на ту область, где бы ему желательно оказаться. Микро-анимации в интерфейсе и скролл-эффекты добавляют eCommerce сайту динамичности. Побуждая к активному взаимодействию, помогают удерживать пользовательское внимание.
Хороший UXD: New Look
В этом минималистичном интернет-магазине интересен подход к UX/UI-дизайну карточки товара.
Выскальзывающие боковые панели для положений о доставке / возврате и таблицы размеров слева и для предлагаемых товаров справа, не уводят клиента с товарной страницы. Посетитель сам контролирует просмотр листая курсором или воспользовавшись ссылкой View full page. Это значит потенциальный покупатель не потеряется, сэкономит время и охотнее воспользуется предложением (позитивный опыт пользования).
Хороший UXD: Firebox
Онлайн-магазин продает необычные подарки и дерзкие вещицы. Товары не вписывающиеся в стандарты Firebox представил креативно и ярко . Их ТОП-50 — идеальный способ представить на рассмотрение наиболее популярное.
При повышенной визуальной нагрузке, плиточный дизайн отлично организует контент для быстрого обзора и мгновенного доступа. Эффективную навигацию и управление обеспечивают креативное выпадающее меню и опция поиска подарков с расширенными фильтрами.
Хороший UXD: Lazy Oaf
Интернет-покупатели часто видят достаточно однообразные интерфейсы и многим не хватает ощущений, которые они получали от листания журналов и перечней товаров в торговых точках оффлайн. Крутым оформлением lookbook-коллекций, Lazy Oaf пробуждает у пользователя знакомое чувство оживления. Вместо «перечисления» товаров один за другим, изделия показаны в различных интересных комбинациях. Ведь так они выглядели в тех буклетах / каталогах, именно так их применение себе и представляют многие покупатели.
Это чем-то напоминает продажу «по старинке» – с эффектом присутствия.
Хороший UXD: ModCloth
Онлайновый продавец одежды стремится сделать опыт покупок лучшим в своем классе. Например, в разделе OUTFIT PHOTOS можно увидеть, как люди носят продаваемую брендом одежду – одно дело на модели, другое в реальности. Есть возможность взглянуть на другую расцветку прямо из каталога.
Хороший UXD: Bonobos
Пример правильного UX подхода к дизайну продуктовой страницы. Карточка товара оформлена крупным изображением товара. Лимитированы опции выбора: меньше кликабельных элементов, только уводящих от цели.
Хороший UXD: Ayr
Еще один пример легкого воздушного дизайна карточки товара, которая просто лишена чего-либо отвлекающего. Привлекательный минималистичный стиль с очень простым для продающего одежду сайта меню навигации , утонченным дизайном футера , плиточным оформление каталога.
UX-дизайн: чего не следует делать
House Of Fraser
Крупнейший в мире онлайновый Department Store делает ошибки, заметные сразу после загрузки главной страницы.
Даже крупному бренду не позволено вести себя нахально, назойливо выпрашивая подписаться, ответить на вопросы, включить куки и т.д. Многие интернет-магазины предлагают скидки посетителям, по этому поводу устанавливать им барьеры / уменьшать пространство экрана это слишком.
Поп-ап в самом начале ознакомления с сайтом – это вообще зло. Но агрессивный маркетинг на этом е-Сommerce сайте видимо практикуется.
Walmart
Продавая все подряд, Wal Mart решает непростую задачу. Но как классифицировать, скомпоновать и представить все это в удобном для пользования виде? Трудно сказать, но явно не так.
В этом месиве категорий невозможно быстро сориентироваться и что-либо отыскать. Слишком большой выбор с большей вероятностью вызовет паническое желание покинуть ресурс.
Ray-Ban
Довольно небольшой выбор товаров и по большей части сайт дружественен к пользователю. Однако как и многие другие E-commerce сайты, также досаждает клиентам:
Не критично, однако лишнее препятствие. Если вернувшийся пользователь не вспомнил пароль, ему потребуется пройти громоздкую процедуру восстановления. На данном этапе клиента можно потерять в любой момент.
Новичков сложности регистрации подталкивают бежать прочь. Предоставленная возможность оформлять заказ как гостю без регистрации «Guest Checkout», после всего сделанного опять же потребует входа в аккаунт. Но не отрезайте посетителя от всего процесса оформления покупки, просто заблокируйте продажу.