5 полезных инструментов продающего UX-дизайна

Приветствую тебя, читатель. Если тебе поднадоело постоянно слышать производные слова «юзабилити», то сегодня я тебя познакомлю с новыми понятиями – UX и UI. А также ты научишься 5 прикольным фишкам о том, как искусственно заставить посетителя твоей страницы повзаимодействовать с ней.

И вот не надо сейчас кидать в меня шкурки от бананов с криками «Во имя Юзабилити и Правила 3 кликов» — потому что сразу напомню тебе, что как ни крути, ни верти, но изощренного хищника-клиента нам с тобой таки надо поймать в маркетинговую узду. А голь на выдумки хитра. Вот дальше и читай про эту голь – 5 простых способа поиграться с посетителями страницы.

Вводная часть

Постараюсь сжатенько (потому что разжатенько будет в следующих статьях):

UX (в миру – юзер экспириенс от англ. User eXperience) – это качественный показатель степени удобства взаимодействия посетителя со страницей. Иначе, провокатор эмоций посетителя. Он формирует у посетителя эмоциональную ассоциацию с сайтом.

UI (пользовательский интерфейс, англ. User Interface) – система взаимодействия между пользователем и машиной. Или попросту механизм управления любой системой. Условно точкой экстремума «идеального» UI являются два показателя: эффективность и юзабилити интерфейса.

Для более простого понимания этих двух определений, я проведу аналогию с предметом, которым каждый из нас пользуется каждый день — с духами (туалетной водой).

Сам флакон духов (а заметь, производители часто идут просто на невообразимые десигнерские выкрутасы, чтобы выделиться среди конкурентов и запомниться пользователю, привлечь внимание) — это UI. То, что нам помогает получить конечный результат — приятно пахнуть и за километр обозначать свою территорию, привлекая чувствительные носы противоположного пола.

А вот UX в данном случае будут ощущения:

• ощущение соприкосновения с чем-то дорогим, «лакшери», повышающим статус себя в своих глазах — прикосновение с пульверизатором (сразу в голове картинка: какая-нибудь Коко Шанель в лихие 50-ые в маленьком черном платьице и длинных перчатках изящно подносит флакончик с парфюмом к своей лебединой шейке и с характерным звуком «Пшш» распыляет по своему телу амбре роскоши и богатства парижской богемы);
• ощущение аромата духов. Запах в данном случае выступает как тотем твоего дня: в зависимости от того, чем же ты сегодня будешь пахнуть — так ты себя и будешь позиционировать в глазах окружающих. Вспомни хотя бы рекламу Акс — целая компания держится на демонстрации основных обонятельных инстинктов женщин;
• ощущение звука. Тот самый «Пшш» мгновенно дает сигнал мозгу, что сейчас должно запахнуть чем-то особенным. Именно короткий «Пшш», как у духов, а не длинный такой противный аэрозольный «Пшшшш» как у дезодорантов. Вот после этого «Пшш» ты ждешь, что тебя окутает легкое облако запаха и ты счасливый и довольный выйдешь из дома в новый рабочий день.

Как на примере духов UI/UX влияют на посетителя сайта.

В нынешние времена любой инструмент – для интерактивного или механического использования – производят с учетом законов эргономики, подгоняют под параметры юзабилити, тестируют на UX и UI. Происходит это ввиду ряда причин, одной из которых является высокая конкурентоспособность почти на любой нише. Поэтому производители стараются выехать на «человечности и гуманности» по отношению к своим пользователям, а заодно прослыть «чрезвычайно удобным» на рынке своих товаров и услуг.

Далее мы рассмотрим 5 примеров того, как путем 1 динамической уловки получить сразу 4 выгоды: вступить «в контакт» с посетителем сайта, предоставить ему необходимую информацию, немножечко «поиграть» с ним и оставить приятное послевкусие на подкорке его головного мозга. Итак, погнали!

Пример №1: Конструкторы-калькуляторы

Что: конструкторы-калькуляторы.

Зачем: вовлечение посетителя во взаимодействие с лендом (буквально – заставить посетителя сайта совершить действие).

Как: реализуется довольно таки сложно, зато эффективно. Представь, что искал ты, скажем, красный мерседес. Вот зашел на ленд, получил красного коня, смотришь (вертишь его на 360 градусов в слайдере-попапе), листаешь вниз и – бац! – видишь, что красавчика-мерина можно доукомплектовать ещё и аудио долби 7.1, сзади поставить басс-бочку и вообще ксенон прилепить. Таким способом ты оказываешься вовлечен в некий процесс взаимодействия с лендингом (привет, UX!). И просто бомба, если во время твоей укомплектации ты сразу можешь видеть изменение стоимости своего красного мерса. Юзабилити во всей красе – что пожелал, сразу показали и посчитали.

Именно на принципах взаимодействия и держутся ленды с калькуляторами – забавная штуковина. А главное – полезная! Только сразу здесь сделаю примечание: ценник в калькуляторе стоит показывать только тогда, когда стоимость твоего товара и впрямь конкурентоспособна относительно остального рынка или является ключевым фактором принятия решения. Или хотя бы не переваливает за 3 рубля.

Калькулятор на ленде — пример использования на странице.

Пример №2: Выпадающие списки

Что: выпадающие списки.

Зачем: создать «иллюзию» выбора.

Как: предположим, у тебя есть товар с некими характеристиками: цветом и формой. В таком случае достаточно поставить два-три выпадающих списка, позволяющих юзеру найти свой параметр (т.е. самоидентифицироваться) и выбрать желаемые характеристики товара, подходящие к параметру посетителя. Например, машина: мерседес цэ-класса, боковая подсветка или фары, красный цвет. И при этом будет замечательно, если, выбирая эти самые параметры, продающийся товар будет отображен на лендинге в виде картинки-демонстрации. Что будет создавать динамику на экране и вовлечет пользователя в процесс «управления» сайтом.

Выпадающие списки на примере.

Пример №3: Клик

Что: механическое изменение визуального элемента страницы («клик»).

Зачем: чувство собственной важности (ЧСВ).

Как: очень люблю этот пример – сразу двух зайцев хэдшотит наповал. Раз – интригует посетителя, буквально, не оставляя возможности пройти мимо чудодейственной ссылки. Два – у юзера растет ЧСВ, так как он может управлять сайтом (а этого хочет каждый из нас, признайся). Три – помимо визуального WOW эффекта, (четыре) тут демонстрируется главное свойства товара. И бьет прямо туда, куда данный товар нацелен: на создание положительных, захватывающих дух эмоций – пять. Комбо.

Учись, как надо, я лишь апплодирую данному проекту.

Клик великий и прекрасный.

Пример №4: Попап

Что: попапы на оверлее.

Зачем: ненавязчивый акцент внимания.

Как: учитывая, что посетитель ленда попал на него из своего поискового запроса (то есть посетитель находится на «тепленькой» стадии заинтересованности в продукте), то вполне ожидаемо, что юзер ждет ништяков прям с первого экрана. И он их получает. Как правило – в форме скидки-попапа. Обязательным условием здесь является не спугнуть посетителя ярким кричащим дизайном всплывающей формы и, собственно, максимально сгладить процесс появления этой формы. Показательным примером в нашей русской UX маркетинговой среде я Щитаю данный сайт.

Пример использования попапа.

…ну или ещё всевозможные сообщества-журналы джаст фо фан

Еще попап

И еще попап

Пример №5: Анимация

Что: анимация формы захвата данных.

Зачем: привлечение внимания к ошибке заполнения.

Как: стандартно в миру заведено, что если что-то некорректно работает или отображается, это выделяется красным цветом. Только вот красный цвет наша лимбическая система воспринимает как угрозу и сразу возникает на подкорке отторжение от предмета. Как можно сгладить углы на камне преткновения между неправильно заполненной формой захвата данных и юзером? Ответ прост: не тыкайте юзера в глаза красными полями, а добавьте чуть-чуть (ключевое слово: ЧУТЬ-ЧУТЬ) анимации.

Намек на ошибку.

Олын-ол:

Итак, мы узнали, что:

1. UX и UI должны и обязаны учитываться при разработке страницы.
2. Динамика хороша, когда она ведет в положительному UX.
3. Положительный и продуктивный UX могут быть созданы при помощи:

• конструкторов-калькуляторов;
• выпадающих списков;
• механических взаимодействий посетителя со страницей (Кликов);
• попапов (на затемненном общем фоне окна, медленно всплывающих);
• анимации (легкой вибрации формы захвата при некорректном заполнении данных).

Данная статья является примером отступления от всемирно известного холиварного юзабильного «Правила 3 кликов». Я к чему – экспериментируйте, тестите (маркетологи ведь не думают, маркетологи тестируют).

Правила существуют, чтобы их нарушать. Только сначала узнай эти правила, чтобы было ясно, что нарушать.

Хорошего настроения и профитабельной выручки!