Позднее Ctrl + ↑

Почему слайдер на сайте делает только хуже

Компания решает, что нужен редизайн сайта.

Директор:

— Давайте сделаем слайдер на главной.

Редактор:

— Зачем?
— Будем туда ставить баннеры, рассказывать об акциях и новостях компании.
— Но ведь можно просто положить весь контент прямо на главную.
— Но тогда страница станет длиннее, а люди не листают страницы до конца.
— Тогда почему они должны долистать до конца слайдер?
— Ну карусели же в Инстаграме листают.
— Карусель листать легче, потому что карусели в Инстаграме человек листает пальцем. На веб-странице приходится целиться мышкой в стрелки или ещё хуже — в точки. Карусели в Инстаграме листают по собственной воле. Это не незнакомый сайт, а люди, на которых специально подписываешься. Карусель в Инстаграме — это способ сэкономить место, потому что подписок много, а лента одна.

Клик на сайте дорогого стоит. Чем больше кликов нужно делать, тем больше вероятность, что посетитель уйдёт. Нужно быть готовым, что у человека есть только минимум — собственные глаза и скролл мышкой.

Самое большое издевательство над посетителем — слайдер с автоматической прокруткой: почему-то он сам решает, что я уже достаточно насмотрелся на баннер и мне пора показывать новый. Приходится прицеливаться и нажимать на «Назад» или зажимать кнопку мышки.

В стрелки и точки трудно попадать мышкой.

Всё, что находится после первого слайда, спрятано от посетителя. Чтобы это увидеть, человеку надо нажать или подождать, когда слайдер переключится. Легче просто прокрутить страницу.

Хорошо, когда слайдер сделан в виде фото-галереи. На Крыше вместо неинформативных точек сделаны мелкие превью фотографий квартиры. Хотите посмотреть спальню или туалет — не проблема, нажмите на превью. Не надо тыкать на стрелки, пока не увидите нужную фотографию.

Просмотр квартиры на Крыше

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

Слайдер на официальном сайте Шкоды

На сайте Эпла раньше были слайдеры на страницах с Макбуками и Айфонами, чтобы показать их с разных сторон и подчеркнуть соблазнительный дизайн. Но сейчас, когда слайдер как будто напрашивается, Эпл показывает сразу всё.


Не прячьте контент за кликами.

Как заставить текст продавать

Компания «Биг групп» построила новый жилой комплекс в центре города. Приходит маркетолог строительной компании к копирайтеру:

— Надо сделать максимально продающую статью с красивым текстом для клиентов.

Копирайтер:

— Да без проблем! *Садится писать текст*

Вот что написал:

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

Клиент читает:

— Ну ок. Пойду чай заварю.

Что на самом деле интересно клиенту:

  • А зимой там тепло?
  • Крытая парковка есть?
  • Двор безопасный?
  • А садик рядом есть?
  • Соседи норм?
  • Дорога не шумит?

Переписываем. Что-то такое получается:

Комплекс «Дом у дороги» расположен в центре города, но жилые дома стоят в глубине квартала, поэтому шум с главной дороги не слышен. Мы специально позаботились о плавных спусках и подъёмах для родителей с колясками. Не переживайте, если дети гуляют одни: во дворе постоянно дежурит охрана, а освещение включается автоматически. Мы сделали так, чтобы маленькие дети играли вдали от больших качелей и турников для взрослых. Для малышей есть мини-качели, а большие дети найдут горки покруче и турники повыше.
Мы ставим окна с тройным остеклением. Такие окна сохраняют тепло зимой и прохладу летом. Стены сделаны из газоблока. Пока это самый экологичный стройматериал на рынке. В его составе нетоксичные компоненты, сравнимые с природными: камнем, деревом и стеклом.

Клиент:

Продающего текста не существует, есть только текст о пользе для клиента.


Пожалуйста, напишите комментарий, если не согласны. А то вдруг я что-то не улавливаю и умничаю тут.

Лендинг не продаёт. Не только лишь лендинг продаёт!

Сломался чайник на кухне. Ваша задача — купить новый. Как вы выбираете электрический чайник?

Первый вариант

Погуглили. Увидели лендинг в интернете — тут же нажали на «Купить прямо сейчас» и оплатили заказ.

Второй вариант

Увидели рекламу по телевизору, друг посоветовал, на работе услышали, у родственников такой же стоит, погуглили в интернете, увидели рекламу в Инстаграме, увидели баннер на дороге, посмотрели отзыв на Ютубе, прочитали партнёрскую статью «Как выбрать электрический чайник» или просто пришли в магазин — консультант подсказал. Это человеческий путь к покупке. Пункты можно расположить в любом порядке и необязательно все. Для разных людей окончательным решением чайничного вопроса может оказаться любой из этих факторов. Человек не принимает решения на основе только лендинга.


Лендинг, статья, заметка в Инстаграме — это просто одни из источников информации для покупателя. Ну а если сам продукт говно, никакой лендинг или статья не спасут.

Для чего нужен лендинг, как вам кажется? Были случаи, когда вы купили что-то прямо на лендинге? Что это было? Как вас убедили купить прямо сейчас?

Когда букв слишком много

Редактор заботится не только о фактах, иллюстрациях, синтаксисе, но и о вёрстке. Выразительная вёрстка привлечёт читателя и проведёт за руку. Базовый элемент вёрстки — строка. Чем длиннее строка, тем труднее читать текст. Во время чтения глаз человека проходит путь до конца строки, возвращается в начало и переходит на следующую строку. Если строки слишком длинные, глаза могут теряться в тексте.

Текст выглядит как монолитный столб:

Герман Гессе, «Игра в бисер»

Благодаря широким полям и коротким строкам текст не выглядит пугающе:

Патрик Оуржедник, «Европеана»

Детские книжки привлекают внимание вёрсткой. Лёгкие абзацы, текст занимает совсем малую площадь по сравнению с иллюстрациями:

А. И. Введенский, «Железная дорога»

Правило работает и для экрана. Для удобства читателя текст в вебе занимает 60—70 процентов от ширины страницы.

Тире и дефис

Тире и дефис — это разные знаки препинания. Писать их на бумаге легко: берешь и проводишь черту длиннее или короче. Но как их писать на компе? В Ворде я делал так: ставил пробел после дефиса, а Ворд автоматически удлинял черту. Но даже так получается не тире, а короткое тире. И вообще, так делать это тупо.
А если не в Ворде, а в Фейсбуке? Вот так, например: - — —

Комбинация клавиш для Виндоус

Дефис: кнопка «-»
Короткое тире: Alt+0150
Тире: Alt+0151

Комбинация клавиш для Мака

Дефис: кнопка «-»
Короткое тире: Alt+ «-»
Тире: Shift+Alt+ «-»

Раньше я так не умел, но на работе показали. Теперь бесят эти дефисы, исполняющие обязанности тире. А наши СМИ до сих пор не умеют, не знают и не задумываются.

Друзья советуют типографскую раскладку Ильи Бирмана

Как применяются знаки

Дефис: «ковер-самолёт», «Москва-река»
Короткое тире: «1941—1945»
Тире: «Астана — столица Казахстана»

Как копирайтер добивается человечности в интерфейсе

Окно музыкального сервиса Apple Music

Нравится, как Эпл указывает длительность альбома в человекочитаемом формате:

На самом деле длительность альбома — 47 минут 19 секунд. Копирайтер, который не заботится об удобстве читателя, напишет «Длительность: 47:19». Но 47 чего? Вдруг это 47 часов 19 минут? Что если альбом длится больше часа? 1:45:34? Это уже код, понятный только компьютеру и аудио-плееру. Это ребус, который должен разгадывать пользователь.

Нормальный копирайтер сделает работу за читателя. Просто: «47 минут». Вот и пропала необходимость писать слово «длительность», да и секунды никого не интересуют — всё это мусор. Человеку нужна длительность альбома, чтобы собрать плейлист для длительной поездки, спланировать вечеринку или подготовиться к утренней пробежке. Когда мы советуем музыку другу, то говорим: «Послушай новый альбом, там примерно 40 минут. Как раз на твою поездку в метро».

Другие примеры

Не надо так Уже лучше
Ваши данные успешно отправлены Заявка отправлена
Статус заявки: исполнен Документы готовы
Авторизоваться Войти

Что ещё вас бесит в интерфейсах? Пишите в комментариях.

Редактор убирает мусор

Информационный мусор на веб-странице перегружает её визуально, у читателя в глазах рябит. Мусор в текстах усложняет предложения и абзацы. В таком тексте трудно ориентироваться, текст невозможно прочитать по диагонали. С перегруженной страницы хочется поскорее убраться.

Объясню, что имею в виду. Проведём три чёрные полосы.

На самом деле здесь не три полосы, а пять: три чёрные и две белые. Так на странице ненужные элементы порождают бардак. Так устроены и таблицы, задача которых как раз упорядочивать. Линии делят данные на столбцы и ряды, но сами по себе информации не содержат. Чем толще линии, тем труднее глазу продираться сквозь прутья таблицы.

Таблица из статьи на Википедии. Линии в этой таблице вовсе не нужны

Уберём линии, а элементы в ячейках выровняем по верху и по левому краю:

Фамилия Имя Отчество
Пашков Сергей Владимирович
Лобанов Петр Богданович
Воронов Святослав Владимирович
Левицкий Анатолий Алексеевич
Кузнецов Роман Осипович
Ярошко Сергей Адамович

Уже легче. И без линеек понятно, где имя, а где фамилия.
Продолжим облегчать конструкцию, потому что копирайтер и редактор прежде чем делать таблицу, думают, можно ли обойтись вообще без неё. В конкретно нашем случае с преподавателями можно. Нет смысла подписывать столбцы, потому что из заголовка понятно, что это преподаватели, а у преподавателей, как и у любых других людей, разные имена и фамилии. Задача сводится к простому немаркированному списку.

Преподаватели кафедры программирования:

  • Пашков Сергей Владимирович,
  • Лобанов Петр Богданович,
  • Воронов Святослав Владимирович,
  • Левицкий Анатолий Алексеевич,
  • Кузнецов Роман Осипович,
  • Ярошко Сергей Адамович.

Другие примеры мусора

На странице Яндекса 20-летней давности переизбыток линеек. Разделительные линии разной толщины по всей ширине страницы, горизонтальные полосы разных оттенков серого создают эффект тесноты и грязи:

В 2020-м дизайнеры Яндекса так не делают. Страница делится на смысловые блоки аккуратной вёрсткой:

В новостной ленте Тенгриньюс тоже можно обойтись без перегородок:

Музыка, наложенная на интервью, жутко бесит. В заставке можно, но на протяжении всей программы — нет! Зритель приходит ради интервью, а не дурацкого зацикленного мотива.

Клетка в блокноте слишком агрессивная. Она будет спорить с написанным.

Считаю, что мусором могут быть и слова в тексте, но об этом потом.