Решения микро UX на сайтах интернет-магазинов. Удачные кейсы
Любой сайт должен быть удобным, информативным и полезным. А еще неплохо, чтобы он нравился, был интересен посетителю, формировал уникальный пользовательский опыт. Именно для этого существуют Микро UX. Это маленькие милые элементы сайтов, интеpaктивные атомы веб-дизайна. Их цель — стимулировать положительные эмоции юзера. Решения микро UX всегда выражают заботу создателей сайта о посетителях. Заботу на уровне мельчайших деталей.
Минутка теории
Уникальный потребительский опыт (User Experience, UX) можно получить, если четко обозначить, зачем покупателю нужен именно этот продукт (тактики макро UX). Также пользователя подкупают приятные детали юзабилити и элементы интерфейса (микро UX). В большинстве своем деятели Ecommerce концентрируются на подходах макро UX — нюансах разработки проекта, выведения на рынок новых товаров и т. д. Подходы микро UX обеспечивают то, что входит в понятие удачный дизайн сайта — эмоциональную привязку к проекту с помощью фишек веб-дизайна. В последние годы они становятся все более популярными. Детальнее о разнице между микро и макро UX рассказали авторы книги «How to Design Experiences: Macro UX versus Micro UX Approach».
| Критерии | Макро UX | Микро UX |
| Подход к созданию уникального потребительского опыта | Создание концепции товара | Создание элементов для улучшения потребительского опыта |
| Цели | Объяснить, почему пользователю нужен товар | Объяснить, как пользователь будет использовать этот товар |
| Начало работы | Определение потребностей целевой аудитории | Определение фишек дизайна продукта |
| Тип влияния | Концепция продукта, его функциональное использование | Рецепция дизайна товара |
| Этапы | Необходимо на всех этапах работы с продуктом | Необходимо для поддержки продукта только на некоторых этапах |
| Особенности реализации | Высокий уровень абстpaкции. Постановка общих целей и задач | Только конкретные дизайнерские решения |
| Результат | Эффективное достижение уникального потребительского опыта | Эффективное достижение уникального потребительского опыта с минимальными затратами |
А теперь — хорошие дизайны сайтов.
От редакции: этот пост впервые опубликовали в журнале в 2015 году. С тех пор внешний вид перечисленных сайтов, конечно же, изменился, а некоторые и вовсе перестали существовать. Но решения Микро UX все равно интересные и полезные. Поэтому мы решили обновить пост, который продолжает оставаться в нашем топе по просмотрам.
Первое приближение
Среди hover-эффектов на сайте винтажной мебели WrightWood стоит выделить «увеличительное стекло», которое позволяет рассмотреть детали любой модели на отдельном экране. Для увеличения фрагмента достаточно направить на него курсор.
Hover-эффекты — всплывающие подписи, подсказки, плавные переходы, трaнcформация, ротация, увеличение, смещение и другие эффекты, применяемые к элементам веб-сайта при наведении на них курсора мыши. Хороший дизайн сайта обязательно должен включать в себя эти элементы.Интеpaктивный продукт в действии
Танцующие пункты меню сайта American Apparel рекламируют новые коллекции обуви.
Узнать, что внутри
Гаджет Pencil 53 — стилус для iPad в деревянной оболочке. При вертикальном скроллинге сайта стилус «разбирается» и «собирается» заново.
Сила инерции
Картинки продуктов на сайте Apple продолжают движение вверх или вниз уже после того, как пользователь завершил скроллинг. Иллюстрации словно «подстраиваются» к особенностям монитора.
Обратная сторона медали
Ребята из SohoFixed модернизируют и продают ретро-велосипеды. Они решили не перегружать главную своего сайта лишним текстом — здесь только фото уникальных двухколесных механизмов. При наведении курсора на конкретную модель картинка «переворачивается», и пользователь может узнать подробности.
Днем и ночью
Фишка британского бренда часов Nite — в тритиевой подсветке, которая чаще применяется в военной технике. Чтобы посмотреть, как будут выглядеть часы в темное время суток, нужно нажать на кнопку «активировать ночной режим».
«Голодная» корзина
Создатели сайта ThreadLess сместили элемент микро UX к последней стадии воронки продаж. После добавления первой покупки анимированная «корзина» просит добавки.
Забота о мелочах
Напоследок — о фишках, которые стоит взять на заметку игрокам Ecommerce. Сервис онлайн-заказа авиабилетов Virgin America (сейчас — Alaska Airlines) подарил прекрасные примеры микро UX для мобильных сайтов. Так, уже при регистрации пользователь автоматически получает несколько приятных комплиментов :) При бронировании мест можно выбрать индивидуальный аватар и заодно оценить чувство юмора своих будущих соседей по самолету.
Что такое инсайт или дизайн для жизни Филиппа Старка Дмитрий Карпов о творческом мышлении, дизайне и digital-проектах Советуем вам почитать
Комментарии:
Работ по оптимизации всегда много, а выделить приоритеты при продвижении онлайн — непросто. Что стоит проверять и исправлять в первую очередь?...
19 07 2026 7:13:40
Аналитик Netpeak Алексей Селезнев рассказал, как составить и пользоваться сводными таблицами онлайн в excel и за считанные секунды выделить нужные для анализа данные из десятков тысяч строк в отчетах Google ***ytics...
18 07 2026 19:13:17
Что делать контент-маркетологам, когда все тексты в интернете начнут генерировать боты? Спойлер: обновлять старый контент....
17 07 2026 12:14:52
Сезонность — повторяющиеся колебания трафика сайта в зависимости от различных внешних факторов....
16 07 2026 16:10:34
Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...
15 07 2026 1:46:34
Настройка аналитики для пустого поиска, а также поиска по методам GET и POST...
14 07 2026 19:28:48
Рекомендации по ведению переговоров в непростых условиях....
13 07 2026 13:27:24
Данные по 42,5 млн кликов в 25 тематиках и 391 городу...
12 07 2026 17:16:26
Ошибка на странице 404 может выглядеть креативно. Страница не найдена и не может быть найдена, потому что она в розыске, утеряна, украдена ниндзей, путь заснежен и дороги дальше нет, а принцесса находится в другом замке. О чем это?...
11 07 2026 13:35:56
Как узнать особенности бизнеса в нише и что позаимствовать у конкурентов для SEO...
10 07 2026 15:51:42
Блог на новом движке и с новым дизайном, перетянувший в себя огромное количество постов и комментариев за Х лет своей работы...
09 07 2026 14:48:38
Что значит всемирное обновление DMCA-алгоритма и приведет ли оно к полноценной защите авторских прав?...
08 07 2026 4:28:27
Стратегия продвижения, благодаря которой удалось снизить стоимость заявки от покупателей. Рассказываем об особенностях проведения акций в нише. Узнать больше!...
07 07 2026 18:20:54
Зачем размещаться на AppSumo и как запустить продукт в 2021 году? Лайфхаки по размещению, личный опыт и результаты по проведенной кампании...
06 07 2026 6:41:53
Раскрываем тайны показателя качества в рекламе гугл с помощью API...
05 07 2026 1:59:50
«Что такое диджитал и чем это отличается от услуги продвижения в социальных сетях» — о цифровой стратегии, креативных концепциях и том, как это все происходит в крупных агентствах....
04 07 2026 22:37:49
Мы рассмотрим, почему сотрудники на удалёнке стали менее эффективными и как руководить комaндой из дома, чтобы её результаты не падали....
03 07 2026 23:29:27
Короткий кейс и рекомендации по защите аккаунта от взлома....
02 07 2026 13:18:18
Почему встречаются низкие показатели переходов на сайты по всем источникам трафика? Нет рекламодателей, которые могут предложить пользователям те или иные товары и услуги....
01 07 2026 23:17:46
Рассылка ежемecячно занимает второе место среди источников реферального трафика BuzzFeed. Уроки увеличения базы подписчиков от BuzzFeed от базы до метрик оценки. Принцип BuzzFeed — как можно быстрее внедрять в рассылку то, что нравится читателям....
30 06 2026 6:35:46
Какие рассылки можно отправить покупателю, если у вас есть только данные из карточки товара...
29 06 2026 13:28:28
Как настроить эффективную удаленную работу: комментарии топ-менеджмента Netpeak с плюсами и минусами, личными инсайтами и рекомендациями. А также перспективы развития удаленки в комапнии. Читать дальше!...
28 06 2026 17:34:49
Лучшие плагины WordPress для SEO и продвижения сайта в поисковой системе Google и 10 советов для WordPress, которые помогут вам продвигать свой сайт...
27 06 2026 3:11:39
История от первого лица про звуковые сигналы в Facebook....
26 06 2026 18:44:42
Метод настройки с помощью Google Tag Manager. Мануал с подробным описанием каждого шага — показываем на примере, как отслеживать веб-конверсии в рекламных кампаниях LinkedIn. Узнать больше!...
25 06 2026 8:52:31
Где и как разработчик может подобрать ответственных удаленщиков, как составить техническое задание, чем контролировать качество работы...
24 06 2026 11:59:26
Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....
23 06 2026 7:22:46
Выдержка из интервью Дэнни Салливаном с представителями компаний Google и Bing...
22 06 2026 10:11:31
Как узнавать эффективность страницы мобильного приложения в Play Маркете? Учимся работать в Google Play Developers Console....
21 06 2026 1:27:18
Если на вашем смартфоне установлен только стандартный набор Uber, Glovo, 2ГИС и нескольких мессенджеров — смотрите подборку необычных и смешных приложений....
20 06 2026 0:46:31
Новые тактики в рекламных кампаниях, SMM и PR, которые использует бизнес в новых условиях...
19 06 2026 18:47:46
Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....
18 06 2026 19:56:11
Импорт из Google ***ytics в Excel — manual по ***ytics Edge....
17 06 2026 4:51:56
Что такое идеальное время доставки почты и как его использовать для повышения кликабельности email-кампаний....
16 06 2026 22:32:33
Основная цель CTA — помочь посетителю принять решение о покупке, скачивании, регистрации или подписке...
15 06 2026 1:54:26
Насколько классно продается женская одежда в интернете....
14 06 2026 12:22:59
Готовые к использованию таргетинговые идеи для мобильных приложений онлайн в Facebook....
13 06 2026 10:45:46
Cтоимость просмотра в Google Ads дешевле как минимум в два раза по сравнению со Smart TV...
12 06 2026 20:20:12
Можно открыть корпоративную почту с использованием собственного сервера для принятия/отправки и с использованием стороннего сервиса от яндекс или гугл...
11 06 2026 4:29:19
20 сервисов для прокачки контента под SEO. Штуки, которые будут полезны новичкам и экспертам....
10 06 2026 12:38:51
Алексей Селезнев проанализировал 29 млн кликов, и в этой статье вы прочитаете, как дорого обходятся рекламодателям клики в Google Ads....
09 06 2026 2:17:32
Как с помощью ботов ControllerBot и BotFather упростить управление каналами и разнообразить контент....
08 06 2026 11:15:34
Инструкция по интеграции рекламной кампании с чат-ботом...
07 06 2026 10:34:10
Количество обращений выросло на 43,27%, а рынок перегрет — десятки компаний предлагают свою продукцию, услуги. Что делать, чтобы люди выбрали вас среди других игроков рынка (помимо качественного выполнения своей работы)? Читайте дальше!...
06 06 2026 23:40:25
Исправляем ошибки в рекламных кампаниях, аналитике и бюджете...
05 06 2026 2:55:37
Google Adwords: типы рекламных кампаний и объявлений, тонкостях настройки... Все, о чем вы боялись спросить... Или не боялись, а просто не знали, о чем спрашивать....
04 06 2026 23:10:12
Наталья Воскобойникова из контент-студии WordFactory решила дать четкую хаpaктеристику потенциальному заказчику гостевых постов. Если хотя бы один ваш ответ на вопросы в этом посте отрицательный, стоит найти другие тактики продвижения своего проекта....
03 06 2026 10:23:28
Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....
02 06 2026 13:53:35
Продажа климатического оборудования. Кейс о проекте, который продвигался у нас на услуге «продвижение по позициям» и не демонстрировал хороших результатов как по росту трафика, так и по продажам, не смотря на высокие места в выдаче. Узнать больше!...
01 06 2026 10:44:43
Гениальный математик создал систему, которая вполне может конкурировать с Google — Wolfram|Alpha. Или нет? Это не поисковик, тогда при чем здесь Гугл и теория вычислимости?...
31 05 2026 4:22:32
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
