7 удачных примеров микро UX на сайтах Ecommerce

06.02.2015 19 369 4
(4,54 из 5 на основе 13 оценок)
Loading ... Loading ...
A A A
http://blog.netpeak.ua/7-udachnyh-primerov-mikro-ux-na-saytah-ecommerce/

Микро UX — это маленькие милые элементы сайтов, интерактивные атомы веб-дизайна. Основная цель микро UX — стимулировать положительные эмоции пользователя. Они информируют, дают дополнительные ценности или просто развлекают. Суть в другом. Решения микро UX всегда выражают заботу создателей сайта о посетителях. Заботу на уровне мельчайших деталей.

Особенно приятно, когда такую заботу проявляют интернет-магазины.

7 удачных примеров микро UX на сайтах Ecommerce

Минутка теории

Уникальный потребительский опыт (User Experience, UX) можно получить, если четко обозначить, зачем покупателю нужен именно этот продукт (тактики макро UX). Также пользователя подкупают приятные детали юзабилити и элементы интерфейса (микро UX). В большинстве своем деятели Ecommerce концентрируются на подходах макро UX — нюансах разработки проекта, выведения на рынок новых товаров и т. д. Подходы микро UX обеспечивают эмоциональную привязку к проекту с помощью фишек веб-дизайна. В последние годы они становятся все более популярными.

Детальнее о разнице между микро и макро UX рассказали авторы книги «How to Design Experiences: Macro UX versus Micro UX Approach».

Критерии

Макро UX

Микро UX

Подход к созданию уникального потребительского опыта

Создание концепции товара

Создание элементов для улучшения потребительского опыта

Цели

Объяснить, почему пользователю нужен товар

Объяснить, как пользователь будет использовать этот товар

Начало работы

Определение потребностей целевой аудитории

Определение фишек дизайна продукта

Тип влияния

Концепция продукта, его функциональное использование

Рецепция дизайна товара

Этапы

Необходимо на всех этапах работы с продуктом

Необходимо для поддержки продукта только на некоторых этапах

Особенности реализации

Высокий уровень абстракции. Постановка общих целей и задач

Только конкретные дизайнерские решения

Результат

Эффективное достижение уникального потребительского опыта

Эффективное достижение уникального потребительского опыта с минимальными затратами

А теперь — примеры.

Первое приближение

Среди hover-эффектов на сайте винтажной мебели WrightWood стоит выделить «увеличительное стекло», которое позволяет рассмотреть детали любой модели на отдельном экране. Для увеличения фрагмента достаточно направить на него курсор.

Hover-эффект: увеличительное стекло

Hover-эффекты — всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и другие эффекты, применяемые к элементам веб-сайта при наведении на них курсора мыши.

Продукт в действии

Танцующие пункты меню сайта American Apparel рекламируют новые коллекции обуви.

Wooden Sandal Jelly Heel
Lattice Jelly Flat Beverly Sandal

Узнать, что внутри

Гаджет Pencil 53 — стилус для iPad в деревянной оболочке. При вертикальном скроллинге сайта стилус «разбирается» и «собирается» заново.

Pencil 53

Сила инерции

Картинки продуктов на сайте Apple продолжают движение вверх или вниз уже после того, как пользователь завершил скроллинг. Иллюстрации словно «подстраиваются» к особенностям монитора.

Иллюстрации словно «подстраиваются» к особенностям монитора

Обратная сторона медали

Ребята из SohoFixed модернизируют и продают ретро-велосипеды. Они решили не перегружать главную своего сайта лишним текстом — здесь только фото уникальных двухколесных механизмов. При наведении курсора на конкретную модель картинка «переворачивается», и пользователь может узнать подробности.

Все лишнее спрятано

Днем и ночью

Фишка британского бренда часов Nite — в тритиевой подсветке, которая чаще применяется в военной технике. Чтобы посмотреть, как будут выглядеть часы в темное время суток, нужно нажать на кнопку «активировать ночной режим».

Фишки дизайна: активируем ночной режим

«Голодная» корзина

Создатели сайта ThreadLess сместили элемент микро UX к последней стадии воронки продаж. После добавления первой покупки анимированная «корзина» просит добавки.

После добавления первой покупки анимированная «корзина» просит добавки :)

Забота о мелочах

Напоследок — о фишках, которые стоит взять на заметку игрокам Ecommerce. Сервис онлайн-заказа авиабилетов Virgin America подарил прекрасные примеры микро UX для мобильных сайтов. Так, уже при регистрации пользователь автоматически получает несколько приятных комплиментов :)

Уже при регистрации пользователь автоматически получает несколько приятных комплиментов :)

При бронировании мест можно выбрать индивидуальный аватар и заодно оценить чувство юмора своих будущих соседей по самолету.

При бронировании мест можно выбрать индивидуальный аватар


Советуем вам почитать интервью с Дмитрием Карповым о дизайне и digital-проектах, а также пост о дизайне для жизни Филиппа Старка.

Если вы нашли ошибку, пожалуйста, сообщите нам об этом: выделите её и нажмите Ctrl + Enter или .

  • http://lightyou.com.ua/ Євген

    Hover-эффект лично меня раздражает (а именно стекло)
    Максимально подробно описать товар в картинках — правильное решение. Но не у всех есть такая возможность. Особенно когда товара более 10к наименований.
    «Голодная корзина» прикольно, для магазинов которые продают сувениры или какие то игрушки наверное .. )
    Спасибо NETPEAK за статью !

    • George Ryaboy

      Это интересная тема. Стекло помогает рассмотреть товар в деталях. То есть ритейлер словно дает обещание, что пользователь получит именно то, что видит на картинке. Вот еще сайт Reebok, например: http://global.reebok.com/V54310.html. Странно, но в Рунете я таких примеров (за редким исключением) не встречал.
      Возможно, это связано с особенностями менталитета отечественных пользователей. И если это так, то такая тема заслуживает отдельного поста) В конечном счете, существует же разница между восприятием ЦА Амазона и Таобао:
      http://blog.netpeak.ua/biznes-fresh-devid-i-kestrel-li-o-neshelkovom-puti-zapadnyh-brendov-k-serdtsam-polzovateley-v-kitae/

      • http://lightyou.com.ua/ Євген

        Спасибо за ответ. Вы не поняли, менталитет тут не причем. Юзабили. вот о чем я. =)