UX-дизайны интернет-магазинов: хорошие и плохие. 21 пример
Суть UX дизайна в том, чтобы проникая в голову посетителя e-commerce сайта, создать увлекательный, простой и бесшовный опыт пользования. Как быстро передать необходимую информацию и при этом успеть подарить хорошее настроение? Отличный UX (пользовательский опыт) вызывает удовлетворение, увеличивающее выработку допамина в мозге. Правильный интернет-магазин стремится поддержать позитивные желания: ознакомиться, запомнить, заказать. UX-дизайном можно повысить лояльность к онлайн-магазину, увеличить конверсию и продажи.
Далее, как продуманный UX-дизайн eCommerce сайта поощряет энтузиазм онлайн-шопперов, стимулирует желание делать последующие заказы.
Интернет-магазины с элементами хорошего UX
Хороший UXD: Asos
Дизайн этого интернет-магазина часто приводят в качестве образцового и тому есть объяснение – великолепный UX, интуитивный интерфейс. Популярный e-commerce ресурс имеет отличные изображения, внятные описания в разговорном стиле, ясные призывы Call-to-Action с переходами в секции каталога и очевидные выгоды (бесплатная доставка и т.д.).
Еще одна особенность: видео с демонстрацией изделия на модели, чтобы посетитель мог разглядеть товар и покупать уверенно. Полезны опции выбора размера / 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», после всего сделанного опять же потребует входа в аккаунт. Но не отрезайте посетителя от всего процесса оформления покупки, просто заблокируйте продажу.
Кто писал сие шедевр? Даже постеснялся подписаться.
Вы вообще смотрели, что называете хорошим UX? Rent The Runway, например, один из паршивейших UX. Попап на входе, посмотреть коллекции нельзя за 3 клика — спрашивают 100500 вопросов и вконце кидают на какую-то хрен пойми акцию.