Решения микро 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-проектах Советуем вам почитать
Комментарии:
Вместо легкой пятничной темы, представляю вольный перевод статьи автора книги «Позитивная иррациональность»....
31 05 2026 18:44:38
Как перенести сайт с http на https и сохранить трафик, потратив минимум времени....
30 05 2026 1:19:29
Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....
29 05 2026 19:12:43
Как быстро увеличить количество заинтересованных подписчиков в facebook, twitter, google+ и linkedIn с помощью контактов из рассылки и аккаунтов Facebook....
28 05 2026 19:48:59
История создания и развития холдинга «Choco Family» помогает понять масштабы онлайн-рынка Казахстана, найти точки роста для собственного бизнеса в Казнете. Каково быть пионером ecommerce в стране? Чем казахстанский рынок ecommerce отличается от Рунета и Уанета? Читать!...
27 05 2026 6:18:34
Настроенная бизнес-страница компании в Instagram и на Facebook помогает в продвижении товаров и услуг в интернете. Поэтому так важно сделать их seo-friendly. Читать!...
26 05 2026 17:55:33
Повышение эффективности продаж через звонки с помощью call tracking....
25 05 2026 2:15:28
Работа велась с конца августа прошлого года до конца декабря и включила в себя анализ рынка, конкурентов, целевой аудитории, поиск инсайта, разработку стратегии, подготовку медиаплана, создание промо-сайта и само проведение рекламной кампании, в котором б...
24 05 2026 6:10:54
Заимствуете лучшее, коллекционируйте идеи и не откладывайте тестирование фишек в долгий ящик...
23 05 2026 20:54:19
SEOmoz создал систему, которая определяет релевантность страницы поисковому запросу....
22 05 2026 22:44:47
SEO-специалист Константин Гайдук поделился с читателями блога постом о фишках работы линкбилдера с поиском Яндекс....
21 05 2026 9:50:42
Бесплатно рекламировать и привлечь первых посетителей/клиентов вполне реально своими силами...
20 05 2026 5:24:21
Если вы не можете разработать технические задания для себя в виде структурированного текста, вы, скорее всего, плохо понимаете, что хотите от исполнителя...
19 05 2026 23:14:30
Разбираемся, как определить самые эффективные источники лидов....
18 05 2026 3:33:39
Facebook + Instagram, Business Manager + основная бизнес-страница на Facebook, BM + рекламный аккаунт и так далее....
17 05 2026 6:22:20
Seznam.cz — одна из пяти поисковых систем в мире, сумевших в отдельно взятой стране стать популярнее Google...
16 05 2026 22:46:43
Быстрый инструмент для повышения CTR — дополнительные ссылки Google Рекламы...
15 05 2026 21:21:52
Хасан Исламов о развитии Chocofamily, крупнейшего интернет-холдинга Казахстана....
14 05 2026 16:28:50
Отслеживаем пропущенные, анализируем входящие и делаем выводы о том, как организовать работу менеджеров....
13 05 2026 7:47:46
Эти советы будут полезны вебмастерам, которые хотят сделать шаблон сайта самостоятельно...
12 05 2026 17:55:49
Зачем нужен мемуарник, как отличить истинные цели от навязанных и многое другое....
11 05 2026 17:56:31
Количество обращений выросло на 43,27%, а рынок перегрет — десятки компаний предлагают свою продукцию, услуги. Что делать, чтобы люди выбрали вас среди других игроков рынка (помимо качественного выполнения своей работы)? Читайте дальше!...
10 05 2026 6:33:13
Кейсы, фишки и советы, опыт крупных брендов, маркетологов....
09 05 2026 11:32:32
Создатели алгоритмов соцсетей используют слабые места человеческого мозга. Случайно или намеренно, но они это делают. Как нам с этим жить?...
08 05 2026 10:39:47
Влияет ли значение показателя отказов на ранжирование сайта в поисковых системах и стоит ли переживать из-за высоких показателей отказов? Узнать больше....
07 05 2026 14:47:35
Как уменьшить время ответа сервера и повысить общий показатель скорости загрузки сайта...
06 05 2026 0:39:59
Как построить самостоятельную комaнду и научиться спокойно делегировать...
05 05 2026 18:16:58
Также повысили количество транзакций на 191% (по сравнению с аналогичным периодом прошлого года)....
04 05 2026 10:42:15
Как и зачем отслеживать конверсии с тегом Google Рекламы...
03 05 2026 7:46:28
Мы собрали и проанализировали ответы 270 владельцев и маркетологов...
02 05 2026 22:54:20
Всё, что важно узнать о лидогенерации и работе с целевой аудиторией....
01 05 2026 10:11:33
Каким образом бизнес-модель маркетплейса может помочь увеличить трафик интернет-магазина в целом....
30 04 2026 12:56:33
Пора сделать так, чтобы мобильная версия сайта приносила прибыль....
29 04 2026 9:33:25
Стратегия продвижения, благодаря которой удалось снизить стоимость заявки от покупателей. Рассказываем об особенностях проведения акций в нише. Узнать больше!...
28 04 2026 9:41:18
Кейс SEO-продвижения в США: рост трафика сайта с помощью низкочастотных запросов....
27 04 2026 20:49:19
Как улучшить видимость сайта после оптимизаторов-староверов — кейс в тематике «световое и звуковое оборудование»....
26 04 2026 8:14:37
Почему нельзя просто взять и перевести. В худшем случае специализированный текст на иностранном языке должен стать для переводчика дорожной картой, в лучшем — источником вдохновения. Почему? Читайте об этом!...
25 04 2026 13:43:15
Фишка, которую можно позволить себе даже когда портал продает всего несколько товаров или услуг...
24 04 2026 0:19:19
2 любопытные истории и 8 успешных стартапов, которые вас удивят....
23 04 2026 14:57:20
Что же такое эти authority и чем они лучше и полезнее, к примеру, чем Page Rank?...
22 04 2026 8:53:45
Как специалисту сэкономить время для создания и оптимизации кампаний, проверки орфографии и другие фишки. Советы из пpaктики....
21 04 2026 19:28:58
Сервисы для определения оптимальной плотности ключевых слов...
20 04 2026 17:36:29
Какие регионы и тематики наиболее выгодно продвигать в каждом из представленных рекламных сервисов, где наибольшая доля мобильного трафика, и другая полезная статистика....
19 04 2026 10:51:22
Как узнать слабые места ваших рекламных кампаний с помощью бесплатного скрипта....
18 04 2026 7:33:20
Чем вам может пригодиться это исследование? Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. Читать!...
17 04 2026 4:20:27
Доминирование маркетплейсов и агрегаторов в Яндексе усилилось. Первый магазин появляется не раньше 5 позиции. Поэтому компания Alto подготовила пошаговое руководство - как обойти агрегаторы в выдаче....
16 04 2026 14:22:34
Один из лучших способов выбрать подрядчика — провести брифинг для компаний. При этом важно предоставить максимум информации: откройте доступ к реальным данным по проекту. Узнать больше!...
15 04 2026 8:12:29
Какой движок сайта стоит выбрать...
14 04 2026 1:27:53
Так называемый Humankindex (доброжелательный стиль управления) способствует инновациям в компании....
13 04 2026 12:37:40
SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...
12 04 2026 15:47:18
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
