Решения микро 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-проектах Советуем вам почитать
Комментарии:
Отличный способ мотивации, который мы попробовали и вам рекомендуем....
01 04 2026 4:19:22
Менеджер экспортного направления Гугл Украина — об особенностях выхода на рынки разных стран мира....
31 03 2026 20:43:39
Как использовать сервис Serpstat для оптимизации кампаний по контекстной рекламе...
30 03 2026 5:18:58
Подробный алгоритм успешного питча на Product Hunt на примере Serpstat...
29 03 2026 18:21:27
Вести бизнес в интернете с помощью развлекательного сайта, СМИ, узкоспециализированного портала вполне реально. Правда, нужно знать, как на них заpaбатывать....
28 03 2026 17:18:26
SEO-специалист Константин Гайдук поделился с читателями блога постом о фишках работы линкбилдера с поиском Яндекс....
27 03 2026 1:41:32
Зачем нужны пользовательские сегменты клиентов и как их создавать — читайте в завершающей части серии «Как анализировать эффективность рекламы в Google ***ytics?»...
26 03 2026 23:47:28
Обновление от Google: похожие аудитории можно использовать не только для медийных, но и для поисковых и торговых кампаний...
25 03 2026 3:48:37
Что нужно, чтобы реклама в интернете приносила прибыль....
24 03 2026 1:55:44
Достаточно настроить соответствующим способом триггеры и теги. Мануал здесь....
23 03 2026 18:35:31
Работа — рекламировать. Интервью с директором по стратегии агентства Smartica/Skykillers....
22 03 2026 13:55:30
Вам тоже нужно предоставлять отчеты о работе рекламной кампании, посещение сайтов? Держите три примера работы с Google ***ytics и понятных отчета по ним, которые можно продемонстрировать, не открывая доступ к аккаунту....
21 03 2026 21:27:45
Семнадцать крутых шагов к эффективному бренду Заг — это авторский неологизм от слова зигзаг (англ. zigzag). Он подразумевает движение в другом направлении....
20 03 2026 16:36:30
7 советов для оптимизации вашего профиля в Google Мой Бизнес....
19 03 2026 10:29:56
На отклонение исходящих ссылок после загрузки файла может уйти достаточно много времени: от нескольких недель до нескольких месяцев...
18 03 2026 7:43:33
Создание успешного стартапа в нише телемедицины. Без дополнительных трат увеличил за 6 месяцев доход на 1983%, а клиентскую базу — более чем на 1000%....
17 03 2026 16:55:42
Распространенные ошибки в XML-фидах Google и Яндекс, CSV-фидах и как исправить их своими силами. Используем Notepad++, отладчик ленты Facebook и Excel. Узнать больше!...
16 03 2026 10:58:56
Мануал, по которому вы создадите специальный отчет, чтобы применить его на своем сайте....
15 03 2026 13:39:15
Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....
14 03 2026 19:21:46
Чтобы эффективно продвигать товар или услугу в Instagram, необходимо повысить охват целевой аудитории. Одно из возможных решений — привлечение блогеров. Казалось бы, достаточно предложить платное размещение рекламы…...
13 03 2026 11:36:58
Как настроить просто и быстро настроить скрипт в Google ***ytics для отслеживания печати страниц сайта....
12 03 2026 6:46:54
Отслеживаем в статистике Google ***ytics посетителей пришедших через защищенное соединение в поиске Google....
11 03 2026 16:50:13
Положительная динамика с первых месяцев работы....
10 03 2026 6:38:13
Как за один час собрать самые популярные темы для информационных статей с помощью Serpstat и Key Collector?...
09 03 2026 23:19:27
Зачем внедрять BI-решение для бизнеса, какие функции отдел может решить с помощью автоматизации? Кейс Netpeak....
08 03 2026 18:44:34
Возможно, вы купили обувь Intertop именно после просмотра нашей рекламы....
07 03 2026 16:50:16
Данные Google по 6 миллионам кликов 16 городах страны и данные Яндекс по 520 346 кликам, в 54 городах страны в 22 тематиках в обоих рекламных системах. Узнать больше!...
06 03 2026 16:48:40
Как улучшить конверсию сайта: идеи для маркетологов...
05 03 2026 9:47:21
Структура того, чем обладают сотрудники департаментов работы с клиентами лучших компаний....
04 03 2026 19:56:47
Как подготовить фиды в Яндекс.Директ для разных тематик...
03 03 2026 10:29:47
Как сократить время на создание собственных отчетов, если вы работаете с большими рекламными аккаунтами...
02 03 2026 6:18:22
Кто ведет соцсети Netpeak и заказывает мерч для всего агентства...
01 03 2026 2:47:31
Словосочетания и аббревиатуры, которыми пользуются на рынке игрового маркетинга....
28 02 2026 19:52:10
Как быстро увеличить количество заинтересованных подписчиков в facebook, twitter, google+ и linkedIn с помощью контактов из рассылки и аккаунтов Facebook....
27 02 2026 18:36:49
Запускаем первую таргетированную рекламу. Мы составили инструкцию для начинающих таргетолов, а также для SMM-специалистов, которым регулярно нужно рекламировать товары и услуги. Читайте подробнее!...
26 02 2026 18:16:47
SMM от Netpeak — это разработки стратегий продвижения, механики конкурсов, медиапланирование и постоянная интеpaктивная связь с клиентом с помощью «Личного кабинета»....
25 02 2026 4:43:50
Что, если бы покупка в супермаркете происходила так же, как в онлайн-магазине?...
24 02 2026 4:55:44
Как понравиться поисковым системам и пользователям....
23 02 2026 23:28:45
Руководство для всех, кто продает через Instagram: когда стоит воспользоваться рекламным кабинетом Facebook для настройки кампании в Instagram и как правильно запустить рекламу в Instagram через кабинет Facebook. Читайте дальше!...
22 02 2026 15:42:10
Технологии решают, но не всегда....
21 02 2026 19:56:40
Кратко об аутрич-продвижении? Размещайте полезный контент с ссылками на ваш сайт на качественных ресурсах. Хотите подробности — читайте новую статью....
20 02 2026 1:49:30
Мы хотим купить комaнду с компетенциями в сфере медиабаинга, чтобы объединить силы для развития онлайн-рынка...
19 02 2026 6:19:37
Создаём страницы, которые быстро загружаются на мобильных устройствах....
18 02 2026 8:18:19
Как перенести рекламные кампании из адвордс в директ, используя только Google Editor и Директ Коммaндер? Делимся быстрым и эффективным методом...
17 02 2026 6:10:36
Один из самых известных отчетов в Google ***ytics «Аудитория/Обзор». Но кроме него есть еще несколько, которые будут весьма полезны для вашего блога. Какие именно, читайте дальше....
16 02 2026 6:50:59
Как изменить геовыдачу с помощью настроек Google, Яндекс или специальных дополнений...
15 02 2026 4:22:56
От того, что такое оффер до лучших стратегий и избежания ошибок...
14 02 2026 13:13:34
89% предпринимателей не тестируют свои продающие тексты. О том, что и как нужно тестировать, рассказал в гостевом посте директор Студии эффективных текстов Владимир Руков....
13 02 2026 5:14:59
Знаете, как доменная зона Германии связана с криптовалютой, или почему в доменной зоне маленького острова площадью 10 квадратных километров зарегистрировано 20 млн доменов? Сейчас расскажем!...
12 02 2026 17:59:44
Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....
11 02 2026 16:37:45
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
