Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

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

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

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

18 примеров хорошего UX-дизайна интернет-магазинов и 3 плохого

Опубликовано: 01.09.2018

видео 18 примеров хорошего UX-дизайна интернет-магазинов и 3 плохого

Давид Браун, CEO TemplateMonster & Weblium: как продать бизнес и начать новый ПРОДУКТИВНЫЙ РОМАН #36

Суть 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», после всего сделанного опять же потребует входа в аккаунт. Но не отрезайте посетителя от всего процесса оформления покупки, просто заблокируйте продажу.

rss