Агентство
интернет-маркетинга

 

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

03.06.2015

9 274

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

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

Постараюсь сжатенько (потому что разжатенько будет в следующих статьях): UX (в миру – юзер экспириенс от англ. User eXperience) – это качественный показатель степени удобства взаимодействия посетителя со страницей. Иначе, провокатор эмоций посетителя. Он формирует у посетителя эмоциональную ассоциацию с сайтом. UI (пользовательский интерфейс, англ. User Interface) – система взаимодействия между пользователем и машиной. Или попросту механизм управления любой системой. Условно точкой экстремума «идеального» UI являются два показателя: эффективность и юзабилити интерфейса. Для более простого понимания этих двух определений, я проведу аналогию с предметом, которым каждый из нас пользуется каждый день - с духами (туалетной водой). Сам флакон духов (а заметь, производители часто идут просто на невообразимые десигнерские выкрутасы, чтобы выделиться среди конкурентов и запомниться пользователю, привлечь внимание) - это UI. То, что нам помогает получить конечный результат - приятно пахнуть и за километр обозначать свою территорию, привлекая чувствительные носы противоположного пола. А вот UX в данном случае будут ощущения:
  • ощущение соприкосновения с чем-то дорогим, "лакшери", повышающим статус себя в своих глазах - прикосновение с пульверизатором (сразу в голове картинка: какая-нибудь Коко Шанель в лихие 50-ые в маленьком черном платьице и длинных перчатках изящно подносит флакончик с парфюмом к своей лебединой шейке и с характерным звуком "Пшш" распыляет по своему телу амбре роскоши и богатства парижской богемы);
  • ощущение аромата духов. Запах в данном случае выступает как тотем твоего дня: в зависимости от того, чем же ты сегодня будешь пахнуть - так ты себя и будешь позиционировать в глазах окружающих. Вспомни хотя бы рекламу Акс - целая компания держится на демонстрации основных обонятельных инстинктов женщин;
  • ощущение звука. Тот самый "Пшш" мгновенно дает сигнал мозгу, что сейчас должно запахнуть чем-то особенным. Именно короткий "Пшш", как у духов, а не длинный такой противный аэрозольный "Пшшшш" как у дезодорантов. Вот после этого "Пшш" ты ждешь, что тебя окутает легкое облако запаха и ты счасливый и довольный выйдешь из дома в новый рабочий день.
UI/UX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще попап

cta web-journal

И еще попап

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

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

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

Олын-ол:

Итак, мы узнали, что:
  1. UX и UI должны и обязаны учитываться при разработке страницы.
  2. Динамика хороша, когда она ведет в положительному UX.
  3. Положительный и продуктивный UX могут быть созданы при помощи:
  • конструкторов-калькуляторов;
  • выпадающих списков;
  • механических взаимодействий посетителя со страницей (Кликов);
  • попапов (на затемненном общем фоне окна, медленно всплывающих);
  • анимации (легкой вибрации формы захвата при некорректном заполнении данных).
Данная статья является примером отступления от всемирно известного холиварного юзабильного «Правила 3 кликов». Я к чему – экспериментируйте, тестите (маркетологи ведь не думают, маркетологи тестируют). Правила существуют, чтобы их нарушать. Только сначала узнай эти правила, чтобы было ясно, что нарушать. Хорошего настроения и профитабельной выручки!
Готовы пообщаться?Готовы пообщаться?Готовы пообщаться?

Комментарии

  1. Metalampio

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кейсы