Приветствую тебя, читатель. Если тебе поднадоело постоянно слышать производные слова «юзабилити», то сегодня я тебя познакомлю с новыми понятиями – 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: Анимация
Что: анимация формы захвата данных.
Зачем: привлечение внимания к ошибке заполнения.
Как: стандартно в миру заведено, что если что-то некорректно работает или отображается, это выделяется красным цветом. Только вот красный цвет наша лимбическая система воспринимает как угрозу и сразу возникает на подкорке отторжение от предмета. Как можно сгладить углы на камне преткновения между неправильно заполненной формой захвата данных и юзером? Ответ прост: не тыкайте юзера в глаза красными полями, а добавьте чуть-чуть (ключевое слово: ЧУТЬ-ЧУТЬ) анимации.
Намек на ошибку.
Олын-ол:
Итак, мы узнали, что:
UX и UI должны и обязаны учитываться при разработке страницы.
Динамика хороша, когда она ведет в положительному UX.
Положительный и продуктивный UX могут быть созданы при помощи:
конструкторов-калькуляторов;
выпадающих списков;
механических взаимодействий посетителя со страницей (Кликов);
попапов (на затемненном общем фоне окна, медленно всплывающих);
анимации (легкой вибрации формы захвата при некорректном заполнении данных).
Данная статья является примером отступления от всемирно известного холиварного юзабильного «Правила 3 кликов». Я к чему – экспериментируйте, тестите (маркетологи ведь не думают, маркетологи тестируют).
Правила существуют, чтобы их нарушать. Только сначала узнай эти правила, чтобы было ясно, что нарушать.
Хорошего настроения и профитабельной выручки!
Этот веб-сайт использует файлы cookie, чтобы улучшить вашу работу во время навигации по веб-сайту. Из них файлы cookie, которые классифицируются как необходимые, хранятся в вашем браузере, поскольку они необходимы для работы основных функций веб-сайта. Мы также используем сторонние файлы cookie, которые помогают нам анализировать и понимать, как вы используете этот веб-сайт. Эти файлы cookie будут храниться в вашем браузере только с вашего согласия. У вас также есть возможность отказаться от этих файлов cookie. Но отказ от некоторых из этих файлов cookie может повлиять на ваш опыт просмотра.
Необходимые файлы cookie абсолютно необходимы для правильной работы веб-сайта. Эти файлы cookie анонимно обеспечивают основные функции и функции безопасности веб-сайта.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
Этот файл cookie устанавливается подключаемым модулем GDPR Cookie Consent. Файл cookie используется для хранения согласия пользователя на использование файлов cookie в категории «Аналитика».
cookielawinfo-checkbox-functional
11 months
Cookie-файл устанавливается в соответствии с GDPR, чтобы записать согласие пользователя на использование cookie-файлов в категории «Функциональные».
cookielawinfo-checkbox-necessary
11 months
Этот файл cookie устанавливается подключаемым модулем GDPR Cookie Consent. Файлы cookie используются для хранения согласия пользователя на файлы cookie в категории «Необходимые».
cookielawinfo-checkbox-others
11 months
Этот файл cookie устанавливается подключаемым модулем GDPR Cookie Consent. Файл cookie используется для хранения согласия пользователя на использование файлов cookie в категории «Другое».
cookielawinfo-checkbox-performance
11 months
Этот файл cookie устанавливается подключаемым модулем GDPR Cookie Consent. Файл cookie используется для хранения согласия пользователя на использование файлов cookie в категории «Производительность».
viewed_cookie_policy
11 months
Файл cookie устанавливается подключаемым модулем GDPR Cookie Consent и используется для хранения информации о том, согласился ли пользователь на использование файлов cookie. Он не хранит никаких личных данных.
Функциональные файлы cookie помогают выполнять определенные функции, такие как совместное использование содержимого веб-сайта в социальных сетях, сбор отзывов и другие сторонние функции.
Файлы cookie производительности используются для понимания и анализа ключевых показателей производительности веб-сайта, что помогает улучшить пользовательский интерфейс для посетителей.
Аналитические файлы cookie используются для понимания того, как посетители взаимодействуют с веб-сайтом. Эти файлы cookie помогают предоставить информацию о таких показателях, как количество посетителей, показатель отказов, источник трафика и т.д.
Рекламные файлы cookie используются для предоставления посетителям релевантной рекламы и маркетинговых кампаний. Эти файлы cookie отслеживают посетителей на веб-сайтах и собирают информацию для предоставления персонализированной рекламы.
Комментарии
Слишком много сленга, очень тяжело было читать статью =(
Нет, нормально.
Главное — не переборщить с количеством попапов, анимации и выпадающих списков. Перебор раздражает посетителей