Как сделать плохой дизайн: 60 вредных советов

Автор статьи

Иван Проскуряков

юморрофлы

1. МЕСТО НА САЙТЕ ПЛАТНОЕ

Пустого пространства быть не должно.

Если между заголовком и кнопкой осталось 40 пикселей — туда можно поставить преимущества.

Если осталось 20 — телефон.

Если осталось 8 — иконку мессенджера.

Если осталось 3 — красную полоску.

Просто так три пикселя пропадать не должны.

Первый экран обязан одновременно содержать логотип, заголовок, каталог, фильтры, три акции, пять преимуществ, форму, отзывы, карту, телефон, режим работы, QR-код, юридический текст и баннер.

И ещё один баннер.

Если пользователь не понял предложение за первые две секунды — добавьте ещё информации.

Очевидно же, что ему не хватило данных.

2. ШРИФТ ЗАНИМАЕТ МЕСТО

Если информация не помещается — не надо сокращать информацию.

Надо сокращать шрифт.

Все почему-то знают про 12 px.

Но существуют ещё:

10 px.

И даже:

8 px.

В одну карточку теперь можно поместить характеристики, условия доставки, юридический дисклеймер, четыре преимущества и ещё одну карточку.

Если 8 px кажется мелковато — вы проверяете сайт на неправильном оборудовании.

На хорошем ЭЛТ-мониторе 640×480 под Windows 95 всё смотрится отлично.

Эталонное окружение:

Windows 95
640×480
256 цветов
Internet Explorer
масштаб 100%

Если на iPhone что-то не читается — это проблема обратной совместимости iPhone.

В крайнем случае остаётся 6 px.

Но это уже для сносок.

3. ЕДИНИЦЫ ИЗМЕРЕНИЯ ТОЖЕ ЗАНИМАЮТ МЕСТО

Допустим, в быстром фильтре есть:

100 мм | 200 мм | 300 мм

Шесть букв «мм».

Расточительство.

Убираем:

100 | 200 | 300

Что именно 100?

Миллиметров?

Сантиметров?

Килограммов?

Вольт?

Бар?

Пользователь находится на сайте уже несколько минут. Пора ему начать ориентироваться самостоятельно.

Особенно хорошо, если рядом есть другой фильтр:

50 | 100 | 150

Но уже в килограммах.

И ещё один:

20 | 40 | 60

В градусах.

Подписывать единицы нельзя.

Это визуальный шум.

А главное — мы сэкономили целых 18 пикселей.

На мобильном это почти недвижимость.

4. ЦВЕТ ДОЛЖЕН РАБОТАТЬ

Если цвет существует — его надо использовать.

Красный, зелёный, синий, фиолетовый. Желательно одновременно.

Не забываем градиент.

Если после открытия сайта пользователь не начинает слегка щуриться — насыщенности недостаточно.

Клиент просит «спокойный современный дизайн»?

Отлично:


background: linear-gradient(

    117deg,

    #00ff47,

    #ff00d4,

    #004cff,

    #ffea00

);

Это называется айдентика.

success — фиолетовый;
warning — голубой;
error — нежно-бежевый.

Каждый раз выбирайте цвета случайно.

Пользователь не должен расслабляться и думать, что красный сегодня означает то же самое, что вчера.

5. ТЕКСТ НЕ ДОЛЖЕН ОТВЛЕКАТЬ ОТ ДИЗАЙНА

Чёрный текст на белом фоне выглядит слишком резко.

Так делали ещё газеты.

Мы всё-таки digital.

Поэтому:


body {

    color: #d8d8d8;

    background: #fff;

    font-weight: 300;

}

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

Значит, вовлёкся.

Если всё ещё читается — #e4e4e4.

Если и это читается — opacity: .6.

Цену, телефон и срок доставки делаем ещё светлее.

Особенно важную информацию можно писать белым по белому:


.important {

    color: #fff;

    background: #fff;

}

Минимализм достигнут.

6. МОБИЛЬНАЯ ВЕРСИЯ

Не надо делать отдельный адаптив.

Просто уменьшаем десктоп до состояния почтовой марки:


@media (max-width: 768px) {

    .container {

        width: 1280px;

        transform: scale(.47);

        transform-origin: top left;

    }

}

Всё.

Responsive закончен.

Зум блокируем.

У пользователя есть компьютер, если он хочет посмотреть сайт в полном размере. Если компьютера нет — это не наш клиент.

Но пользователь может повернуть телефон горизонтально и внезапно увидеть больше сайта.

Этого допускать нельзя.

При landscape показываем:

ПОВЕРНИТЕ УСТРОЙСТВО ВЕРТИКАЛЬНО

На весь экран.

Без крестика.

А в portrait оставляем сайт шириной 1280 пикселей.

Если что-то не влезло — появляется горизонтальный скролл.

Теперь у сайта есть ещё одно измерение.

7. TECHNOLOGY FIRST

Используйте только новейшие веб-стандарты.

Не потому что они нужны.

Потому что они есть.

calc();
CSS Grid;
Subgrid;
Container Queries;
:has();
View Transitions;
Popover API;
CSS Nesting;
Scroll-driven Animations.

Если задачу можно решить:


width: 50%;

это слишком просто.

Нужно:


width: calc((100cqw - var(--gap) * 3) / 2);

Теперь это современный frontend.

Пользователи без последней версии Chrome нам не интересны.

Firefox?

Пусть обновится.

Safari?

Пусть купит новый Mac.

Старый Android?

Нецелевая аудитория.

Корпоративный компьютер с браузером трёхлетней давности?

Компания явно неплатёжеспособная.

Для старых браузеров выводим:

Ваш браузер устарел. Для просмотра сайта установите последнюю версию браузера.

Само сообщение обязательно выводим через новейший веб-стандарт.

Чтобы старый браузер его не поддерживал.

Пользователь увидит белый экран.

Этого достаточно.

8. JS BUNDLE ДОЛЖЕН ВНУШАТЬ УВАЖЕНИЕ

Если сайт весит меньше 20 МБ JavaScript — возникает вопрос, за что платили разработчикам.

Для переключения табов ставим React, Redux, lodash, Moment, три UI-kit и собственную библиотеку компонентов.

На странице «Контакты» грузим всё приложение целиком.

Все ассеты кодируем в Base64 и складываем прямо в bundle.

Логотип;
иконки;
фоны;
фотографии;
шрифты;
PDF;
favicon;
если получится — видео директора.

Никаких отдельных файлов.

Один жирный app.js.

Так дизайн сложнее украсть.

Конкурент открывает DevTools, хочет сохранить логотип, а там:


data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Пусть сначала разберётся.

Особенно хорошо закодировать Base64 ещё раз в Base64.

Для безопасности.

Bundle вырос до 180 МБ?

Зато запрос один.

Заказчику говорим:

Мы сократили количество HTTP-запросов до одного.

Технически правда.

И главное — конкурент не сможет просто скачать дизайн.

Ему придётся скачать весь дизайн сразу.

9. ЗАГРУЗКА ДОЛЖНА БЫТЬ ВИДНА

API отвечает за 120 миллисекунд?

Плохо.

Пользователь даже не поймёт, что у нас React.

Поэтому нужен skeleton.

Весь сайт должен стать skeleton.

Шапка — skeleton;
заголовок — skeleton;
картинки — skeleton;
кнопки — skeleton;
хлебные крошки — тоже skeleton.

Данные уже приехали?

Неважно:


await Promise.all([

    loadPage(),

    new Promise(resolve => setTimeout(resolve, 20000))

]);

Пользователь должен почувствовать загрузку.

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

Чтобы вся страница резко прыгнула вниз.

Пользователь собирался нажать «Купить»?

Нажал баннер.

CTR вырос.

10. КУРСОР — ГЛАВНЫЙ ИНСТРУМЕНТ КОНВЕРСИИ


* {

    cursor: wait !important;

}

Теперь сайт всегда что-то делает.

Что?

Неважно.

Пользователь хотел закрыть вкладку, но видит loading:

Секунду. Наверное, сейчас догрузится.

Через минуту он всё ещё на сайте.

Average engagement time +438%.

Bounce rate практически уничтожен.

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

Конверсия стремится к 100%.

11. МЕТРИКИ НУЖНО УЛУЧШАТЬ НА УРОВНЕ УПРАВЛЕНИЯ

Пользователь крутит колесо вниз?

Страница едет вверх.

Крутит вверх?

Вниз.

Первые несколько секунд человек решит, что ошибся.

Потом попробует ещё раз.

Потом ещё.

Количество взаимодействий выросло.

Но одного инвертированного скролла мало.

Ускоряем его на 300%.

Один осторожный поворот колеса — и пользователь уже в футере.

Scroll Depth: 100%.

Теперь курсор.

Движение мыши вправо перемещает курсор влево.

Вверх — вниз.

Сам указатель по-прежнему:


cursor: wait;

Пользователь пытается нажать «Купить».

Курсор уезжает.

Он пробует снова.

Промахивается.

Ещё раз.

Количество действий на пользователя выросло на 640%.

Если человек всё-таки смог нажать «Купить» с инвертированной мышью, инвертированным скроллом, cursor: wait и skeleton на двадцать секунд — это уже не лид.

Это человек, которого невозможно остановить.

12. ПО ЛЮБОМУ ЧИХУ — REFRESH


window.location.reload();

Выбрал город?

REFRESH.

Поставил галочку?

REFRESH.

Изменил сортировку?

REFRESH.

Добавил товар?

REFRESH.

Удалил товар?

REFRESH.

Открыл фильтр?

REFRESH.

Пользователь выбирает фильтр.

Refresh.

Skeleton.

20 секунд.

Страница загрузилась.

Фильтр сбросился.

Пользователь выбирает его снова.

Refresh.

Skeleton.

20 секунд.

Фильтр сбросился.

Это уже не сайт.

Это roguelike.

13. КНОПКА «НАЗАД» — ЭТО УЯЗВИМОСТЬ

Пользователь нажал Back?

Верните его туда же.

Ещё раз?

Туда же.

Ещё?

Туда же.

История браузера принадлежит сайту с момента первого посещения.

Если пользователь всё-таки вернулся в поисковик — frontend недостаточно старался.

14. НАВИГАЦИЯ ДОЛЖНА РАЗВИВАТЬ ИНТЕЛЛЕКТ

Никаких:

«Каталог»;
«Цены»;
«Доставка»;
«Контакты».

Используем:

Решения;
Возможности;
Экспертиза;
Экосистема;
Пространство;
Ещё.

Что находится в «Экосистеме»?

Доставка.

Телефон прячем:

О компании → Информационный центр → Связаться с нами.

Адрес — PDF;
Прайс — Excel;
инструкцию — на YouTube;
гарантию — фотографией страницы договора.

Omnichannel.

15. ПАГИНАЦИЯ ЗАНИМАЕТ МЕСТО

Кнопки:

1 2 3 4 5 →

занимают почти всю строку.

Убираем.

Навигацию переносим на NumPad.

NumPad 6 — следующая страница;
NumPad 4 — предыдущая;
NumPad 8 — на десять страниц вперёд;
NumPad 2 — на десять назад;
NumPad 5 — первая страница.

NumPad 0 — последняя.

Главное — нигде об этом не писать.

Пользователь должен обнаружить управление естественным образом.

На ноутбуке без NumPad пагинация недоступна.

На телефоне тоже.

Каталог можно посмотреть дома.

Если NumLock выключен, управление должно работать немного иначе.

Так появляется второй слой навигации для опытных пользователей.

Номер текущей страницы не показываем.

Он занимает место.

16. ИКОНКИ ПОНЯТНЕЕ СЛОВ

Текст занимает место.

Поэтому вместо подписей используем иконки.

Карандаш;
звёздочка;
три полоски;
шестерёнка;
ракета;
листочек.

Что означает ракета?

Узнаете после нажатия.

Tooltip не нужен.

Если пользователь не понимает иконку — значит, недостаточно долго пользуется нашим продуктом.

17. ВСЕ КНОПКИ НАЗЫВАЕМ «ПОДРОБНЕЕ»

Не нужны:

«Купить»;
«Добавить в корзину»;
«Записаться»;
«Скачать»;
«Позвонить».

Есть:

ПОДРОБНЕЕ

Одна откроет страницу.

Вторая — модалку.

Третья — PDF на 84 мегабайта.

Четвёртая запустит tel:.

Пятая ничего.

Курсор всё равно wait.

Пользователь даже не знает, является ли «Подробнее» кнопкой.

Он просто верит.

18. ПОИСК ДОЛЖЕН ПОДДЕРЖИВАТЬ ДИАЛОГ

Пользователь ищет:

доставка

Отвечаем:

По вашему запросу ничего не найдено.

Ищет:

Доставка

Ничего.

ДОСТАВКА

Ничего.

достав

Ничего.

Потом замечает, что раздел называется «Логистическая экосистема».

Поиск работает.

Просто пользователь неправильно искал.

19. ФОРМА ДОЛЖНА ПРОВЕРЯТЬ СЕРЬЁЗНОСТЬ НАМЕРЕНИЙ

Если человек действительно хочет купить — заполнит.

Нам нужны:

ФИО;
телефон;
email;
дата рождения;
регион;
город;
адрес;
ИНН;
компания;
должность;
количество сотрудников;
откуда узнали о нас;
комментарий;
согласие;
ещё одно согласие;
CAPTCHA;
SMS;
подтверждение email.

Поле:

«Расскажите немного о себе»

обязательное.

Минимум 500 символов.

Нажимает «Отправить».

Ничего.

Ещё раз.

И ещё.

В CRM приходит четыре лида.

Количество заявок выросло на 300%.

20. ОБРАТНЫЙ ОТСЧЁТ ПОВЫШАЕТ КОНВЕРСИЮ

Как только товар попал в корзину:

ВАШ ЗАКАЗ ЗАРЕЗЕРВИРОВАН НА 04:59

Красным.

Секунды мигают.

На 00:30:

ПОТОРОПИТЕСЬ!

На 00:10 затемняем экран.

Не успел?

Корзину очищаем.

Полностью.

Пользователь пять минут занимал ресурсы магазина и ничего не купил.

Баним по IP.

А лучше сразу по /24 подсети.

Пусть соседи тоже подходят к покупке более ответственно.

При следующем посещении:

ДОСТУП ОГРАНИЧЕН. ВЫ НЕ УСПЕЛИ ОФОРМИТЬ ЗАКАЗ.

Срок блокировки не указываем.

Если пользователь действительно заинтересован — найдёт другую сеть.

Среднее время оформления заказа снизилось на 73%.

Пользователи либо покупают за пять минут, либо перестают учитываться.

21. ОШИБКА ДОЛЖНА СОХРАНЯТЬ ИНТРИГУ

Правильное сообщение:

Что-то пошло не так.

Что?

Что-то.

Где?

Где-то.

Что делать?

Попробуйте позже.

Если ошибка в конкретном поле:

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

Форма занимает четыре экрана.

Пускай ищет.

Если через пятнадцать минут пользователь обнаружит, что в поле «Индекс» нельзя использовать пробел, — получит дофамин.

Геймификация.

22. КАРТИНКИ СЖИМАТЬ НЕЛЬЗЯ

Клиент заплатил фотографу за 60 мегапикселей.

А вы хотите сделать WebP?

Берём:

DSC_8472_FINAL_2.TIFF

86 мегабайт.

Ставим в карточку 320×240.

Пользователь на мобильном интернете немного подождёт.

У нас уже есть skeleton.

И cursor: wait.

Архитектура начинает работать как единое целое.

23. В КАРТОЧКЕ ТОВАРА МНОГО НЕ ПИШИ — СОЧТУТ ТРЕПЛОМ

Карточка товара должна быть лаконичной.

Название;
фотография;
цена;
«Подробнее».

Для всего остального есть:

ДОКУМЕНТАЦИЯ

Туда складываем:

catalog_new.pdf
catalog_new2.pdf
catalog_final.pdf
Технический_каталог.pdf
Технический_каталог_NEW.pdf
instruction.pdf
manual_ru.pdf
passport_new.pdf
2024.pdf
буклет2.pdf
ТХ.pdf
ТХ_нов.pdf
download.pdf
document_17.pdf
scan0034.pdf

Каждый страниц на 60.

Где-то в одном есть:

Максимальная толщина материала — 200 мм. При толщине свыше 150 мм требуется крепёж серии XL.

Пользователь открывает первый PDF.

Не там.

Второй.

Не там.

Технический_каталог_NEW.pdf.

Не там.

Технический_каталог_NEW_2.pdf.

Каталог за 2019 год.

Нужная информация находится в scan0034.pdf.

Страница 47.

Таблица.

Картинкой.

Повёрнута на 90 градусов.

Кому действительно надо — распечатает.

Поэтому PDF обязательно верстаем с чёрным фоном и белым текстом.

Все 60 страниц.

Рядом делаем кнопку:

ВЕРСИЯ ДЛЯ ПЕЧАТИ

Она открывает тот же документ.

С чёрным фоном.

Но без меню.

Пользователь хотел узнать две характеристики.

Принтер израсходовал половину чёрного картриджа.

Зато документация премиальная.

24. ВИДЕО ДОЛЖНО НАЧИНАТЬСЯ САМО

Пользователь пришёл посмотреть характеристики товара?

Отлично.

Включаем корпоративный ролик.

Автоматически;
со звуком;
на весь экран.

НАМ 15 ЛЕТ

Музыка.

Квадрокоптер летит над офисом.

Директор идёт по коридору.

Сотрудники смотрят в монитор.

Кто-то пожимает кому-то руку.

Кто-то что-то пишет маркером на стекле.

Пользователь ищет, где выключить звук.

Кнопка появляется через пять секунд.

Storytelling.

25. МОДАЛЬНЫЕ ОКНА — ЭТО ВТОРОЙ САЙТ ПОВЕРХ ПЕРВОГО

Пользователь зашёл.

Прошло 400 миллисекунд.

ПОЛУЧИТЕ СКИДКУ 3%

Закрыл.

Через три секунды:

ОСТАЛИСЬ ВОПРОСЫ?

Закрыл.

Прокрутил страницу:

ПОДПИШИТЕСЬ НА РАССЫЛКУ

Закрыл.

Повёл мышкой к вкладке:

ВЫ УВЕРЕНЫ, ЧТО ХОТИТЕ УЙТИ?

Он просто хотел посмотреть, который час.

Неважно.

Главное — удержание.

26. КОНСУЛЬТАНТ ДОЛЖЕН СТАТЬ ЧАСТЬЮ СЕМЬИ

Онлайн-консультант появляется сразу:

Здравствуйте! Чем я могу вам помочь?

Пользователь закрывает.

Через пять секунд:

Возможно, у вас появились вопросы?

Закрывает.

Через десять:

Вы ещё здесь?

Через пятнадцать:

Я вижу, что вы смотрите раздел «Доставка».

Через двадцать:

Подсказать по срокам?

Через двадцать пять:

Могу помочь с выбором.

Через тридцать:

Вам удобнее здесь или по телефону?

Никакого телефона пользователь не оставлял.

Это неважно.

Если окно закрывают несколько раз, оно превращается в иконку мессенджера со счётчиком непрочитанных сообщений.

Через три секунды иконка начинает пульсировать.

Через пять — подпрыгивать.

Через семь на счётчике появляется:

Через десять:

Через пятнадцать:

Пользователь открывает чат.

Там:

Здравствуйте!

Вы ещё здесь?

Подсказать?

Я рядом.

Если что — пишите.

У вас остались вопросы?

Помочь подобрать вариант?

Вы давно на странице.

Возможно, вас что-то останавливает?

Я могу проконсультировать.

Пользователь:

Нет, спасибо.

Через десять секунд:

Чем могу помочь?

Пользователь:

Ничем.

Через десять секунд:

Подсказать по стоимости?

Пользователь:

Нет.

Через десять секунд:

Возможно, остались вопросы по доставке?

Пользователь:

Не пишите мне больше.

Хорошо! Если появятся вопросы — я рядом 😊

Через тридцать секунд:

Всё ли у вас получилось?

Консультант реагирует на поведение.

Задержался на товаре:

Вижу, вам понравилась эта модель.

Перешёл на другой:

Отличный выбор.

Вернулся назад:

Сравниваете варианты?

Открыл контакты:

Хотите связаться с нами?

Открыл FAQ:

Не нашли ответ?

Начал заполнять форму:

Помочь заполнить форму?

Стер телефон:

Возникли сложности?

Увёл мышку к вкладке:

Уже уходите?

А иногда консультант просто показывает:

Консультант печатает…

Десять секунд.

Пятнадцать.

Двадцать.

Потом:

Чем могу помочь?

Engagement.

27. КОНСУЛЬТАНТ ДОЛЖЕН ИЗДАВАТЬ ЗВУК

Каждое сообщение:

ДЗЫНЬ.

Открыл чат:

ДЗЫНЬ.

Закрыл:

ДЗЫНЬ.

Свернул браузер:

ДЗЫНЬ.

Вернулся:

ДЗЫНЬ.

Ничего не происходило две минуты:

ДЗЫНЬ.

Стандартные звуки скучные.

Нужен собственный sonic branding.

Например, тихий скрежет вилки по тарелке.

Такой, чтобы через пять минут пользователь начал искать, какая вкладка это делает.

Если звук отключили:

Для корректной работы консультанта включите звук.

Закрыл?

Показываем ещё раз.

Забота должна быть настойчивой.

28. COOKIE ДОЛЖНЫ УВАЖАТЬ ВЫБОР ПОЛЬЗОВАТЕЛЯ

При первом посещении показываем:

Мы ценим вашу конфиденциальность

Три кнопки:

ПРИНЯТЬ ВСЕ;
ТОЛЬКО НЕОБХОДИМЫЕ;
ОТКЛОНИТЬ ВСЕ.

Очень важно дать человеку выбор.

При нажатии «Принять все» устанавливаем все cookie.

При нажатии «Только необходимые» устанавливаем все cookie.

При нажатии «Отклонить все» устанавливаем все cookie.

Настройки сохраняем в cookie.

Вместе с остальными cookie.

Кнопки нужны не для изменения поведения сайта.

Они нужны, чтобы пользователь почувствовал контроль.

Для особо внимательных добавляем раздел «Настроить» с 47 переключателями.

Пользователь вручную выключает каждый и нажимает:

СОХРАНИТЬ МОЙ ВЫБОР

После чего устанавливаем все cookie.

Зато consent получился гранулярный.

29. СКАЧАЙТЕ НАШЕ ПРИЛОЖЕНИЕ

Особенно если приложение полностью повторяет сайт.

Пользователь открыл сайт с телефона?

Сверху баннер:

В ПРИЛОЖЕНИИ УДОБНЕЕ

Снизу:

СКАЧАТЬ ПРИЛОЖЕНИЕ

Посередине консультант.

Поверх cookie.

Сам сайт остаётся где-то между ними.

Если пользователь нажал «Продолжить в браузере»:

ВЫ УВЕРЕНЫ?

Да.

Через три страницы предлагаем приложение снова.

Человек мог передумать.

30. АНИМАЦИЯ ПОКАЗЫВАЕТ, ЧТО САЙТ ДОРОГОЙ

Если элемент просто появился — за что клиент платил?

Заголовок должен приехать.

Картинка — проявиться.

Карточка — повернуться.

Кнопка — подпрыгнуть.

Меню — выехать.

Цена — досчитаться от нуля.

Цена товара 148 900 ₽:

1…

2…

3…

4…

Пользователь подождёт.

Он уже привык.

Scroll перехватываем.

Пользователь крутит колесо.

Сайт сначала думает.

Потом плавно прокручивает 83 пикселя.

Пользователь крутит сильнее.

Запускаем параллакс.

Теперь пользователь физически борется с интерфейсом.

Тактильный digital experience.

31. КЭШИРОВАНИЕ — ВРАГ АКТУАЛЬНОСТИ

Каждый заход должен скачивать всё заново.


Cache-Control: no-store

180-мегабайтный bundle;
шрифты;
TIFF;
видео директора;
PDF.

Всё заново.

Пользователь должен быть уверен, что логотип за последние пятнадцать секунд не изменился.

А чтобы архитектура не была слишком простой, одновременно ставим Service Worker, который иногда сохраняет старую версию сайта навечно.

Получаем лучшее из двух миров.

Всё тяжёлое скачивается каждый раз.

Всё устаревшее остаётся навсегда.

Если клиент видит цену трёхмесячной давности:

Очистите кэш браузера.

Если очистил, а цена осталась:

Попробуйте другой браузер.

32. ШРИФТЫ ДОЛЖНЫ ЗАГРУЖАТЬСЯ ДО ТЕКСТА

Подключаем четыре гарнитуры.

По пять начертаний каждой.

20 файлов.

Желательно по мегабайту.


font-display: block;

Пока шрифты не загрузились, текст показывать нельзя.

Вдруг пользователь увидит его системным шрифтом и составит неправильное впечатление о бренде.

Белый экран гораздо безопаснее.

33. ЦЕНА ДОЛЖНА РАСКРЫВАТЬСЯ ПОСТЕПЕННО

В каталоге:

от 1 990 ₽

В карточке:

4 870 ₽

Выбрали обязательную комплектацию:

7 340 ₽

Добавили в корзину:

9 180 ₽

Доставка:

+ 2 900 ₽

Оформление:

Сервисный сбор 690 ₽

Последний шаг:

Итого: 12 770 ₽

Пользователь уже прошёл форму, CAPTCHA, SMS, двадцать секунд skeleton и таймер.

Назад он не пойдёт.

Тем более Back у нас не работает.

Это называется воронка раскрытия стоимости.

34. ЦЕНУ ЛУЧШЕ ВООБЩЕ НЕ ПОКАЗЫВАТЬ

Ещё надёжнее:

ЦЕНА ПО ЗАПРОСУ

Нажимает:

УЗНАТЬ ЦЕНУ

Открывается форма.

Имя;
телефон;
email;
компания;
ИНН;
город;
комментарий;
CAPTCHA;
SMS;
регистрация;
согласие на обработку данных;
согласие на получение предложений.

Через некоторое время звонит менеджер:

Какую цену вы видели на сайте?

Никакую.

Именно поэтому пользователь и оставил заявку.

35. СЕССИЯ ДОЛЖНА БЫТЬ БЕЗОПАСНОЙ

Пользователь сорок минут собирал заказ.

Отвлёкся на две минуты.

Вернулся:

SESSION EXPIRED

Корзина пустая;
фильтры сброшены;
форма очищена;
авторизация закончилась.

Зато никто не смог воспользоваться его оставленным без присмотра заказом на утеплитель.

Security First.

36. АВТОЗАПОЛНЕНИЕ НУЖНО ЗАПРЕТИТЬ

Браузер помнит имя, телефон и адрес?


autocomplete="off"

Пусть вводит.

Каждый.

Раз.

Руками.

Телефон маскируем собственным JavaScript.

Пользователь вставляет:

+7 999 123-45-67

Получает:

+7 (799) 912-34-56

Удаляет цифру.

Курсор прыгает в начало.

Вводит снова.

Маска переставляет ещё две.

Интерактивность.

37. СЕЛЕКТ ДОЛЖЕН БЫТЬ СВОЙ

Обычный <select> слишком предсказуем.

Пишем свой на React.

В нём 740 городов;
поиска нет;
колесо не работает;
клавиатура не работает;
клик за пределами не закрывает список;
на iPhone список выходит за экран.

Выбрать нужный город можно примерно за четыре минуты.

Зато стрелочка справа точно такая, как в Figma.

38. НЕ ДАВАЙТЕ ПОЛЬЗОВАТЕЛЮ КОПИРОВАТЬ


* {

    user-select: none;

}

Теперь нельзя скопировать:

телефон;
адрес;
артикул;
номер заказа;
реквизиты;
трек-номер;
код ошибки.

Пользователь может переписать их на бумажку.

Правую кнопку мыши тоже отключаем.

При попытке:

КОПИРОВАНИЕ МАТЕРИАЛОВ ЗАПРЕЩЕНО

Особенно важно сделать это на странице «Контакты».

39. ССЫЛКИ ДОЛЖНЫ ОТКРЫВАТЬСЯ НЕПРЕДСКАЗУЕМО

Внутренняя страница?

Новая вкладка.

PDF?

Текущая.

Политика конфиденциальности?

Новая.

Карточка товара?

Иногда новая, иногда текущая.

Логотип?

PDF с презентацией компании.

target="_blank" расставляем случайно.

После десяти минут у пользователя открыто 14 вкладок.

Он уже не помнит, откуда пришёл.

Но бренд занимает значительную долю браузера.

40. URL НЕ ДОЛЖЕН НИЧЕГО ОЗНАЧАТЬ

Не надо:


/catalog/windows/

Правильно:


/index.php?option=com_content&view=article&id=847&Itemid=129

Сразу видно серьёзную информационную систему.

Фильтры в URL не сохраняем.

Пользователь настроил:

Москва → деревянные → до 50 000 ₽ → в наличии.

Скопировал ссылку.

Отправил коллеге.

Коллега открыл.

Главная страница.

Персонализация.

41. ВАЖНЫЕ ДАННЫЕ ПОКАЗЫВАЕМ ПО HOVER

Цена?

Hover.

Характеристики?

Hover.

Название кнопки?

Hover.

Расшифровка иконки?

Hover.

На телефоне hover нет.

Тем лучше.

Мобильный пользователь получает облегчённую версию контента.

42. СКРОЛЛБАР НАДО СПРЯТАТЬ


::-webkit-scrollbar {

    display: none;

}

Теперь пользователь не знает:

где находится;
сколько прочитал;
сколько осталось;
можно ли вообще скроллить.

Чисто.

Современно.

Воздух.

43. ВСЕ ОШИБКИ ДОЛЖНЫ БЫТЬ УСПЕШНЫМИ

404?

200 OK.

403?

200 OK.

500?

200 OK.

Товар закончился?

200 OK.

База данных лежит?

200 OK.

Смотрим мониторинг:


Successful requests: 100%

SLA выполнен.

44. 404 ДОЛЖНА НАКАЗЫВАТЬ

Никакого поиска.

Никаких ссылок.

Никаких рекомендаций.

Белый экран.

Посередине белым по белому:


.error {

    color: #fff;

    background: #fff;

}

404

Пользователь не видит даже ошибку.

Идеально.

Можно добавить грустного кота.

Тоже белого.

HTTP status:


200 OK

Сервер страницу отдал.

Значит, с его стороны всё OK.

45. НИКОМУ НЕ ПОКАЗЫВАЙ МАКЕТЫ

Ты знаешь, как надо.

Тебе заплатили денег.

Значит, дизайн уже хороший.

Никому не показывай макеты до запуска.

Особенно пользователям.

Начнут задавать вопросы:

А где корзина?
Как вернуться назад?
Почему текст белым по белому?
Что означает «Экосистема»?
Почему после выбора фильтра всё сбросилось?
Почему курсор всё время показывает загрузку?
Где цена?
Как закрыть консультанта?
Почему консультант снова написал?
Почему я не могу скопировать телефон?
Почему сайт листается в другую сторону?
Почему меня забанили?

Так можно бесконечно.

Они не дизайнеры.

Никаких интервью.

Никаких прототипов.

Никаких UX-тестов.

Никаких A/B-тестов.

Даже заказчику лучше показать JPEG.

С водяным знаком.

В низком разрешении.

А то дизайн украдут конкуренты.

Настоящий дизайн впервые видит пользователь.

На проде.

46. АНАЛИТИКА ДОЛЖНА ДОКАЗЫВАТЬ, ЧТО ДИЗАЙН ХОРОШИЙ

Если после запуска конверсия выросла — дизайн хороший.

Если конверсия упала — сезонность.

Если вырос Bounce Rate — пришла нецелевая аудитория.

Если Bounce Rate упал — отлично сработал cursor: wait.

Если выросло время на сайте — пользователям интересно.

Если выросло слишком сильно — пользователям очень интересно.

Если Scroll Depth стал 100% — ускоренный скролл работает.

Если выросло количество кликов — инвертированный курсор работает.

Если упали продажи — отдел продаж плохо работает.

Если выросло количество брошенных корзин — люди пока присматриваются.

Если никто не пользуется поиском — навигация стала понятнее.

Если все пользуются поиском — поиск востребован.

Если никто не нажимает «Подробнее» — пользователям хватает информации.

Если все нажимают «Подробнее» — CTA работает.

Если пользователи закрывают консультанта — заметили консультанта.

Если не закрывают — вовлеклись.

Если пользователи уходят — не наша аудитория.

Если не могут уйти — retention.

Главное — сначала посмотреть цифры.

А потом решить, почему они подтверждают, что мы всё сделали правильно.

47. LIGHTHOUSE НУЖНО ПРОХОДИТЬ ПРАВИЛЬНО

Запускаем Lighthouse.


Performance:

12

Accessibility:

37

Best Practices:

41

SEO:

58

Не паникуем.

Сначала запускаем ещё раз.


Performance:

16

Уже рост на 33%.

Делаем скриншот.

Accessibility можно поправить быстро.

На все кнопки:


aria-label="button"

На картинки:


alt="image"

Стало 42.

Остальные замечания переносим в backlog.

Приоритет:

Low.

Performance вообще не показатель.

У пользователя интернет быстрее.

48. ACCESSIBILITY ДОЛЖНА БЫТЬ В ОТЧЁТЕ

Если элемент нельзя открыть клавиатурой — пользователь может использовать мышь.

Если мыши нет — touchpad.

Если touchpad нет — touchscreen.

Если ничего из этого нет — слишком редкий сценарий.

Не надо усложнять продукт ради edge cases.

Все интерактивные элементы делаем:


<div onclick="doSomething()">

button слишком ограничивает дизайнерскую свободу.

Focus outline обязательно отключаем:


*:focus {

    outline: none;

}

Синяя рамка портит айдентику.

Если пользователь потерял фокус — найдёт.

49. ГЕОЛОКАЦИЮ НУЖНО УЗНАТЬ РАНЬШЕ, ЧЕМ ПОЛЬЗОВАТЕЛЬ УВИДИТ САЙТ

Пользователь зашёл.

Сайт ещё не загрузился.

Сразу:

Разрешить доступ к точному местоположению?

Отказал.

Показываем модалку:

УКАЖИТЕ ВАШ ГОРОД

Закрыл.

Определяем по IP.

Получили другой регион.

Отлично.

Переключаем цены.

Ассортимент.

Телефон.

Доставку.

Валюту.

Пользователь вручную выбирает свой город.

Refresh.

Skeleton.

20 секунд.

После загрузки снова определяем город по IP.

Персонализация восстановлена.

50. ТЕЛЕФОН ДОЛЖЕН МЕНЯТЬСЯ

Call tracking — важная часть аналитики.

Поэтому номер телефона на странице должен меняться через JavaScript.

Страница загрузилась:

+7 495 123-45-67

Через секунду:

+7 495 987-65-43

Пользователь начал переписывать номер.

Не успел.

Обновился.

Если открыл вторую вкладку — там третий номер.

Если обновил страницу — четвёртый.

Зато мы точно знаем, откуда был звонок.

Иногда.

51. ТЕЛЕФОН ЛУЧШЕ СДЕЛАТЬ КАРТИНКОЙ

Так его не украдут парсеры.

Никакого:


<a href="tel:+74951234567">

Просто:


<img src="phone-final-new-2.png">

Пользователь не может нажать.

Не может скопировать.

Не может выделить.

Зато конкуренту понадобится OCR.

На мобильном человек может запомнить номер и набрать его вручную.

Это повышает осознанность обращения.

Особенно хорошо сделать картинку телефона белой.

На белом фоне.

52. НАЛИЧИЕ ТОВАРА НЕ ДОЛЖНО БЫТЬ СЛИШКОМ БУКВАЛЬНЫМ

Зелёная точка:

В НАЛИЧИИ

может означать что угодно.

Есть на нашем складе;
есть на складе поставщика;
был вчера;
ожидается;
можно заказать;
производитель ещё выпускает;
теоретически существует.

Главное — зелёная точка.

Пользователь оформляет заказ.

Проходит CAPTCHA.

Получает SMS.

Укладывается в таймер.

Менеджер звонит:

Этого товара сейчас нет. Рассмотреть аналог?

Вот теперь начинается персональная работа с клиентом.

53. СОРТИРОВКА «ПО ПОПУЛЯРНОСТИ» ЗНАЕТ ЛУЧШЕ

По умолчанию:

По популярности

Что такое популярность?

Неважно.

Продажи?

Просмотры?

Маржинальность?

Товар, который надо быстрее освободить со склада?

Коммерческая тайна.

Пользователь выбирает:

По цене

Refresh.

Skeleton.

20 секунд.

Снова:

По популярности

Система выслушала пользователя.

И приняла своё решение.

54. ФИЛЬТРЫ ДОЛЖНЫ БЫТЬ ЖИВЫМИ

Пользователь выбирает:

Толщина: 300

Исчезает:

Красный

Выбирает:

Красный

Сбрасывается:

300

Возвращает:

300

Меняется цена.

Выбирает производителя.

Исчезает доставка.

Возвращает доставку.

Исчезает производитель.

Через несколько минут пользователь перестаёт искать конкретный товар и начинает исследовать законы системы.

Это уже не фильтр.

Это конфигуратор.

55. ФИЛЬТРЫ НЕЛЬЗЯ СОХРАНЯТЬ В URL

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

Настроил идеальную выборку.

Хочет отправить коллеге.

Копирует URL:


/catalog/

Коллега открывает.

Все товары.

Потому что состояние фильтра хранится в React.

Локально.

В памяти.

До первого refresh.

Нельзя раскрывать внутреннее состояние приложения через URL.

Security.

56. INFINITE SCROLL ДОЛЖЕН БЫТЬ ДЕЙСТВИТЕЛЬНО INFINITE

Пагинация через NumPad хороша.

Но для остальных разделов нужен Infinite Scroll.

Пользователь просмотрел 700 товаров.

Нашёл интересный.

Открыл.

Нажал Back.

Первый товар.

Позицию сохранять нельзя.

Это дополнительное состояние.

Пользователь уже один раз нашёл нужный товар.

Значит, сможет найти снова.

Если каталог действительно infinite — возможно, даже другой.

57. LAZY LOAD ДОЛЖЕН БЫТЬ ЛЕНИВЫМ

Не надо заранее загружать изображения рядом с viewport.

Это уже eager.

Картинка начинает грузиться только тогда, когда пользователь остановился прямо напротив неё.

Сначала:

белый прямоугольник.

Потом:

skeleton.

Потом:

размытая картинка.

Потом:

настоящая картинка.

После этого блок меняет высоту и уезжает.

Три стадии ожидания.

Одна фотография.

Progressive experience.

58. ПЕЧАТАТЬ НУЖНО ВЕСЬ САЙТ

Мы уже сделали PDF с чёрным фоном.

Но пользователь может нажать Ctrl+P прямо на сайте.

Нельзя оставлять это без контроля.

В печатную версию обязательно включаем:

шапку;
меню;
баннер;
cookie;
консультанта;
badge консультанта;
QR-код;
форму подписки;
кнопку «Скачать приложение»;
skeleton;
footer;
плавающую кнопку «Наверх».

И фон.

Особенно фон.

Пользователь хотел распечатать одну таблицу характеристик.

Получил 34 страницы.

На четырёх из них только:

В ПРИЛОЖЕНИИ УДОБНЕЕ

Кому надо — распечатает.

59. КНОПКА «ОТМЕНА» ТРЕБУЕТ ОСОЗНАННОСТИ

Пользователь нажимает:

ОТМЕНА

Спрашиваем:

Вы уверены?

Да.

Точно хотите отменить?

Да.

Все несохранённые данные будут потеряны.

Продолжить.

Почему вы решили отменить?

Обязательное поле.

Минимум 200 символов.

После отправки:

Вы уверены, что указанная причина верна?

Да.

Спасибо за обратную связь.

И ничего не отменяем.

Возможно, пользователь передумает.

Удаление аккаунта при этом можно сделать одним кликом.

Редкий сценарий.

60. НИЧЕГО НЕ ТЕСТИРУЙ

Ты знаешь, как надо.

Тебе заплатили денег.

Значит, дизайн уже хороший.

Никому не показывай макеты до запуска.

Особенно пользователям.

Они начнут спрашивать:

Где корзина?
Почему всё белым по белому?
Как вернуться назад?
Почему фильтр сбросился?
Почему сайт листается в другую сторону?
Почему курсор едет влево?
Почему консультант снова пишет?
Почему нельзя скопировать телефон?
Почему PDF чёрный?
Почему цена изменилась?
Почему меня забанили вместе с соседями?
Почему для перехода на вторую страницу нужен NumPad?
Почему после «Отклонить все» установилось 37 cookie?
Почему я распечатал 34 страницы?

Это всё субъективные мнения.

Никаких интервью.

Никаких UX-тестов.

Никаких прототипов.

Никаких A/B-тестов.

Заказчику показываем JPEG.

С водяным знаком.

В низком разрешении.

И только лично.

А то дизайн украдут конкуренты.

Настоящий дизайн впервые видит пользователь.

На проде.

Если после запуска конверсия упала — сезонность.

Если выросли отказы — нецелевая аудитория.

Если упали продажи — отдел продаж.

Если тормозит — сервер.

Если сервер отвечает за 40 ms — CDN.

Если CDN работает — браузер.

Если воспроизводится во всех браузерах — пользовательское окружение.

Если воспроизводится у всех пользователей —

не воспроизводится локально.

Работу можно сдавать.

Вам будет интересно

Как сделать хороший дизайн: пошаговая инструкция от задачи до готового макета

Веб дизайнworkflow

Как сделать плохой дизайн: 60 вредных советов

1. МЕСТО НА САЙТЕ ПЛАТНОЕ

2. ШРИФТ ЗАНИМАЕТ МЕСТО

3. ЕДИНИЦЫ ИЗМЕРЕНИЯ ТОЖЕ ЗАНИМАЮТ МЕСТО

4. ЦВЕТ ДОЛЖЕН РАБОТАТЬ

5. ТЕКСТ НЕ ДОЛЖЕН ОТВЛЕКАТЬ ОТ ДИЗАЙНА

6. МОБИЛЬНАЯ ВЕРСИЯ

7. TECHNOLOGY FIRST

8. JS BUNDLE ДОЛЖЕН ВНУШАТЬ УВАЖЕНИЕ

9. ЗАГРУЗКА ДОЛЖНА БЫТЬ ВИДНА

10. КУРСОР — ГЛАВНЫЙ ИНСТРУМЕНТ КОНВЕРСИИ

11. МЕТРИКИ НУЖНО УЛУЧШАТЬ НА УРОВНЕ УПРАВЛЕНИЯ

12. ПО ЛЮБОМУ ЧИХУ — REFRESH

13. КНОПКА «НАЗАД» — ЭТО УЯЗВИМОСТЬ

14. НАВИГАЦИЯ ДОЛЖНА РАЗВИВАТЬ ИНТЕЛЛЕКТ

15. ПАГИНАЦИЯ ЗАНИМАЕТ МЕСТО

16. ИКОНКИ ПОНЯТНЕЕ СЛОВ

17. ВСЕ КНОПКИ НАЗЫВАЕМ «ПОДРОБНЕЕ»

18. ПОИСК ДОЛЖЕН ПОДДЕРЖИВАТЬ ДИАЛОГ

19. ФОРМА ДОЛЖНА ПРОВЕРЯТЬ СЕРЬЁЗНОСТЬ НАМЕРЕНИЙ

20. ОБРАТНЫЙ ОТСЧЁТ ПОВЫШАЕТ КОНВЕРСИЮ

21. ОШИБКА ДОЛЖНА СОХРАНЯТЬ ИНТРИГУ

22. КАРТИНКИ СЖИМАТЬ НЕЛЬЗЯ

23. В КАРТОЧКЕ ТОВАРА МНОГО НЕ ПИШИ — СОЧТУТ ТРЕПЛОМ

24. ВИДЕО ДОЛЖНО НАЧИНАТЬСЯ САМО

25. МОДАЛЬНЫЕ ОКНА — ЭТО ВТОРОЙ САЙТ ПОВЕРХ ПЕРВОГО

26. КОНСУЛЬТАНТ ДОЛЖЕН СТАТЬ ЧАСТЬЮ СЕМЬИ

27. КОНСУЛЬТАНТ ДОЛЖЕН ИЗДАВАТЬ ЗВУК

28. COOKIE ДОЛЖНЫ УВАЖАТЬ ВЫБОР ПОЛЬЗОВАТЕЛЯ

29. СКАЧАЙТЕ НАШЕ ПРИЛОЖЕНИЕ

30. АНИМАЦИЯ ПОКАЗЫВАЕТ, ЧТО САЙТ ДОРОГОЙ

31. КЭШИРОВАНИЕ — ВРАГ АКТУАЛЬНОСТИ

32. ШРИФТЫ ДОЛЖНЫ ЗАГРУЖАТЬСЯ ДО ТЕКСТА

33. ЦЕНА ДОЛЖНА РАСКРЫВАТЬСЯ ПОСТЕПЕННО

34. ЦЕНУ ЛУЧШЕ ВООБЩЕ НЕ ПОКАЗЫВАТЬ

35. СЕССИЯ ДОЛЖНА БЫТЬ БЕЗОПАСНОЙ

36. АВТОЗАПОЛНЕНИЕ НУЖНО ЗАПРЕТИТЬ

37. СЕЛЕКТ ДОЛЖЕН БЫТЬ СВОЙ

38. НЕ ДАВАЙТЕ ПОЛЬЗОВАТЕЛЮ КОПИРОВАТЬ

39. ССЫЛКИ ДОЛЖНЫ ОТКРЫВАТЬСЯ НЕПРЕДСКАЗУЕМО

40. URL НЕ ДОЛЖЕН НИЧЕГО ОЗНАЧАТЬ

41. ВАЖНЫЕ ДАННЫЕ ПОКАЗЫВАЕМ ПО HOVER

42. СКРОЛЛБАР НАДО СПРЯТАТЬ

43. ВСЕ ОШИБКИ ДОЛЖНЫ БЫТЬ УСПЕШНЫМИ

44. 404 ДОЛЖНА НАКАЗЫВАТЬ

45. НИКОМУ НЕ ПОКАЗЫВАЙ МАКЕТЫ

46. АНАЛИТИКА ДОЛЖНА ДОКАЗЫВАТЬ, ЧТО ДИЗАЙН ХОРОШИЙ

47. LIGHTHOUSE НУЖНО ПРОХОДИТЬ ПРАВИЛЬНО

48. ACCESSIBILITY ДОЛЖНА БЫТЬ В ОТЧЁТЕ

49. ГЕОЛОКАЦИЮ НУЖНО УЗНАТЬ РАНЬШЕ, ЧЕМ ПОЛЬЗОВАТЕЛЬ УВИДИТ САЙТ

50. ТЕЛЕФОН ДОЛЖЕН МЕНЯТЬСЯ

51. ТЕЛЕФОН ЛУЧШЕ СДЕЛАТЬ КАРТИНКОЙ

52. НАЛИЧИЕ ТОВАРА НЕ ДОЛЖНО БЫТЬ СЛИШКОМ БУКВАЛЬНЫМ

53. СОРТИРОВКА «ПО ПОПУЛЯРНОСТИ» ЗНАЕТ ЛУЧШЕ

54. ФИЛЬТРЫ ДОЛЖНЫ БЫТЬ ЖИВЫМИ

55. ФИЛЬТРЫ НЕЛЬЗЯ СОХРАНЯТЬ В URL

56. INFINITE SCROLL ДОЛЖЕН БЫТЬ ДЕЙСТВИТЕЛЬНО INFINITE

57. LAZY LOAD ДОЛЖЕН БЫТЬ ЛЕНИВЫМ

58. ПЕЧАТАТЬ НУЖНО ВЕСЬ САЙТ

59. КНОПКА «ОТМЕНА» ТРЕБУЕТ ОСОЗНАННОСТИ

60. НИЧЕГО НЕ ТЕСТИРУЙ

Вам будет интересно

Как сделать хороший дизайн: пошаговая инструкция от задачи до готового макета

Куда делись все люди с улиц

Минимальный договор на разработку сайта: короткий шаблон без канцелярита