Что старит сайт: устаревшее и современное

Устаревший приём — тот, что держался на ушедшей технологии или мешает читателю при любой моде. Датирует страницу то, что не служит читателю.

Одна и та же страница, десять лет разницы

Откройте любой сайт, и за пару секунд вы почувствуете, «свежий» он или «старый». Это чувство складывается из мелочей, и у каждой мелочи есть причина. Научиться её видеть полезно дважды: чтобы не делать устаревшего самому и чтобы не выбросить хорошее, приняв его за старьё.

Для этого нужно различать три вещи.

• Устаревшее. Приём держался на технологии или ограничении, которых больше нет (заставка на Flash, распорки в таблицах), либо он мешает читателю при любой моде (мелкий светло-серый текст).
• Немодное. Приём читается так же хорошо, как и раньше, но сейчас так не принято (например, скругления сильнее или слабее, чем сегодня). Это вкус, и его можно менять или не менять.
• Новое, но вредное. Недавно появившийся эффект, который мешает читать или заставляет ждать. Он выглядит свежо, а стареет быстро.

Правило в одну строку: датирует страницу то, что не служит читателю. Всё, что ему служит, остаётся в строю десятилетиями: простой текст, ясная кнопка, понятный заголовок.

Проверьте себя: чем «устаревшее» отличается от «немодного»?

Устаревшее держалось на ушедшей технологии или мешает читателю в любой моде. Немодное читается так же хорошо, просто сегодня так не принято.

Игра: устарело или современно

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

Пара 1 из 8: Первый экран сайта. Сначала выберите, потом читайте разбор.

◄ слайд 2 из 5 ►

АКЦИЯ! НОВИНКИ! МЫ ЛУЧШИЕ!

● ○ ○ ○ ○ (листается само)

Левая лучше

Ваш проект

Для кого

Что делает посетитель

Правая лучше

Признаки, которые датируют страницу

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

Первый экран.

• Приветствие вместо ответа на «что это и для кого».
• Карусель, которая листается сама. Юзабилити-исследования (в том числе Nielsen Norman Group) не раз показывали, что такие карусели почти не листают, а автоматическое движение читателя раздражает.
• Заставка перед входом.

Текст.

• Мелкий размер и светло-серый цвет. Проверка контраста WCAG требует 4,5 к 1 для обычного текста; об этом будет урок про цвет.
• Строка в 150 знаков на всю ширину или, наоборот, узкая колонка посреди пустого экрана.
• Подчёркнутый всё подряд, выделенный всем сразу.

Структура и устройство.

• Фиксированная ширина страницы. Большая часть посетителей сегодня приходит с телефона, и страница обязана подстраиваться под ширину экрана.
• Меню из десяти-пятнадцати пунктов.
• Разметка, в которой оформление зашито в теги (font, center): так делали, пока CSS не был надёжным.

Картинки и украшения.

• Стоковые «рукопожатия» и «улыбающиеся сотрудники». Nielsen Norman Group показали, что люди смотрят на настоящие фотографии людей и работы и пропускают декоративные снимки.
• Блики, тени под текстом и прочее оформление «под вещь» (скевоморфизм).
• Значки «страница строится», счётчики, плашки про браузер: это остатки эпохи, когда каждый браузер показывал страницу иначе.

Движение.

• Автоматическое движение, которое нельзя остановить: WCAG 2.2 требует дать способ его поставить на паузу.
• Анимация без учёта настройки «уменьшить движение». Для людей с вестибулярными нарушениями прокрутка с параллаксом бывает физически тошнотворной.

Проверьте себя: почему приветствие «Добро пожаловать!» относят к устаревшим приёмам?

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

Современное тоже стареет

Не думайте, что «современное» это финишная прямая. Эффекты «стекла», бегущие градиенты и анимации, которые сегодня выглядят свежо, через несколько лет будут датировать страницу не хуже, чем счётчики. Поэтому разумная стратегия такая:

1. Берите принципы, а не эффекты. Читаемость, иерархия, ясные состояния, понятные слова.
2. Выносите внешний вид в одно место. Когда цвета, размеры и скругления хранятся в именованных значениях (мы займёмся ими в уроках про токены), сменить «моду» можно за час, не переписывая страницы.
3. Спрашивайте: кому это служит? Если ответа нет, приём украшение, а украшения стареют первыми.

Практика

Вам даётся страница из середины девяностых: приветствие вместо заголовка, теги font и center, меню из двенадцати пунктов, мелкий серый текст, кнопка с бликом, плашка про Netscape и жёсткие 960 пикселей. Исправьте семь вещей, перечисленных в задании. Правила пишите во вкладке styles.css, а меню собирайте из ваших разделов: подставьте их названия вместо готовых пунктов.

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

Что было не так с 2014 годом

В 2014 году ещё жили многие приёмы из этого урока: карусели на главных, стоковые снимки, кнопки с тенью. Их сильно критиковали уже тогда, но шаблоны и конструкторы тиражировали их ещё годами. Так что причина старения не только мода: часто приём держится потому, что он есть в шаблоне.