Аккуратные вылизанные сайты — ту мейнстрим. Чтобы выделиться, нужен брутальный, волосатый, пахнущий потом и пропитанный слезами пользователей сайт. Вот что точно сотрясёт интернеты, вот что будут кидать в личку друзьям с сообщением «Посмотри на это!». С таким пиаром никакие Awwwards не нужны.

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

Соберите команду единомышленников, с которыми вы вместе будете принимать проект. Вас должно быть не меньше 10 человек: обязательно позовите пару маркетологов, сеошников и уборщицу — как представителя из низов, которые тоже будут пользоваться сайтом. Дрим-тим в сборе, приступаем!

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

Управление делайте с фантазькой, чтобы пользователь не проскролил сайт на автомате. Он должен вкусить, должен прочувствовать каждый экран. Поэтому движение на сайте разбавьте с помощью «Потяни здесь, чтобы увидеть следующий слайд» и «Зажми здесь и держи 10 секунд, чтобы посмотреть следующую картинку». Во, сеошники шепчут, что так глубина просмотра увеличится. Оставляем!

Смотрите-ка, как нервно ёрзают маркетологи. Они боятся, что вы забыли об их потребностях. Успокойте их и установите большой, жирный такой попап: «Вы на сайте уже 10 секунд, но не нашли, что искали? А давайте мы вам позвоним за 29 секунд и поможем!». Маленький лайфхак на случай, если пользователь оставит номер телефона: перезванивать через 29 секунд не обязательно. Лид-то уже отжат, минут через 15 менеджер вернется с перекура — тогда и свяжется с клиентом.

Маркетологи всё ещё недовольны — вы забыли поставить онлайн-консультант. Опять же, отвечать в нём не обязательно — главное, чтобы он привлекал внимание пользователя, усиливал его эмоциональную связь с сайтом. Пусть выскакивает прямо под курсором, пишет сообщения раз в минуту, а если сайт оказался в фоновой вкладке — пиликает звуками из «Вконтакте», Скайпа и Мессенджера Фейсбука.

Тут сеошники шепчут, что сайту нужен seo-текст: возьмите побольше и воткните его на главную. Ни в коем случае не прячьте под кат — кто-то ведь старался, писал его. Возможно, даже вы сами (кстати, идеальный способ сэкономить на копирайтере).

Если главная получилась перегруженной настолько, что превращает мобилки в дымящиеся кирпичи — надо сделать версию для них. Нет, не адаптив, конечно — поставьте заглушку с котиком и сообщением «Даже не пытайтесь, сайт можно смотреть только с компьютера». Котик смягчит удар, это точно.

Теперь приступим к оформлению каталога. Где брать картинки, мы уже писали. А сейчас разберем вопросы юзабилити.

Главное — чтобы пользователь провел много времени на сайте. Чем больше сил он вложит в его исследование, тем вероятнее купит именно у вас. Поэтому не давайте ему легких сценариев.

Цены прямо в мини-карточке, кнопки для добавления в корзину и избранное приелись пользователям, они на них не реагируют. Сделайте так, чтобы при наведении курсора на товар его изображение затягивалось плотным блёром и оставалась одна кнопка (красная, показывают маркетологи) — «Узнать подробности». И только кликая на неё пользователь увидит цену и сможет купить продукт.

Фильтры — отдельный вид UX-искусства. Сделайте так, чтобы можно было поменять только один параметр за раз. А ценовой диапазон позвольте задавать только с помощью ползунка, которым фиг попадёшь в точные цифры. И вообще спрячьте его подальше — лучше пусть пользователь смотрит весь каталог, не фильтруя. Уборщица считает, что так вырастет средний чек.

Пользователь добавил товар в корзину? О, это повод перезагрузить страницу! Удалил товар? Грузим снова! А покупка возможно только после регистрации.

Регистрация — как выкуп невесты. Обе стороны уже вроде как согласны, но жених должен доказать серьезность своих намерений. В нашем случае допускать пользователя к покупке товаров только по емейлу или номеру телефона — довольно ветрено (что люди скажут!). Поэтому выдайте ему форму высотой 1500 пикселей. Спросите всё и сразу: ФИО, паспортные данные, место рождения, девичью фамилию. И ни в коем случае не разбивайте форму на несколько шагов — сеошники говорят, каждый шаг — потенциальная точка отказа. Не то что эта красотка:

Если в форме допущена ошибка — обязательно сообщите об этом пользователю. Вывалите ему диалоговое окно, где капсом написано: «ВЫ ВВЕЛИ НЕПОЛНУЮ ИНФОРМАЦИЮ». Или ещё лаконичнее: «ОШИБКА!». Какая — не уточняйте, пользователи не любят, когда их держат за идиотов. После закрытия диалогового окна сбросьте все данные в форме — пусть пользователь вводит их заново. Опять же, время прибывания на сайте вырастет.

Если вы собираете персональные данные, важно их защитить. Поэтому пароль пользователя должен быть не менее 20 символов, 15% — цифры, 10% — заглавные буквы, остальные — строчные латинские без повторов. Всё, что вводится в поле «Пароль», сразу шифруется в звездочки. Посмотреть, что под ними, нельзя. Скопировать тоже. А потом пароль нужно без ошибок ввести в поле «Подтвердить пароль». Если пользователь его забыл и хочет восстановить — нужно всего лишь позвонить менеджеру (если только он не на перекуре, обеде или в отпуске). Безопасность превыше всего!

Ну а если серьезно — так делать не стоит. Если вы нашли больше трех совпадений с вашим сайтом — остановитесь. Выдохните. Успокойте наглые колбэк-хантеры, выгоните с совещаний левых людей и прислушайтесь к знающим людям, которые плохого не посоветуют: менеджеру проекта и UX-дизайнеру. Они помогут сделать сайт, который решают боли пользователей, а не создаёт новые (если, конечно, ваша ЦА — не мазохисты).

Да и при желании сделать самый мерзкий сайт у вас всё равно ничего не получится — при живом-то Фейсбуке.