Bring Back Idiomatic Design: почему мы скучаем по интерфейсам Windows 95 — перевод эссе Джона Лёбера

Каждый раз, когда вы не можете найти кнопку «Назад», не уверены, кликабелен ли элемент или это просто текст, и проводите минуту в выпадающем календаре, чтобы выбрать дату — это не случайность. Это следствие того, что веб разучился быть консистентным. Перевод эссе «Bring Back Idiomatic Design» Джона Лёбера 2023 года — про то, как мы это потеряли и что делать продуктовому разработчику прямо сейчас.

Я из поколения десктоп-софта. От Windows 95 до Windows 7 я рос на преимущественно офлайн-приложениях, которые управлялись мышью и клавиатурой — задолго до планшетов и смартфонов. В последнее время я скучаю по одной конкретной части той эпохи: по консистентности дизайна. В этом эссе я хочу рассказать про идиоматический дизайн, подчеркнуть важность гомогенных интерфейсов и предложить мысль, что мы потеряли что-то важное.

Идиомы дизайна

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

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

Гомогенные интерфейсы

Чекбокс — это ещё и часть интерфейса. Через него вы взаимодействуете с системой и вводите данные. Интерфейс тем лучше, чем меньше думанья он требует: будь то руль автомобиля или онлайн-форма — если на разбирательство уходит хоть какое-то время, это плохо. Когда вы взаимодействуете со множеством вещей, вы хотите гомогенных интерфейсов с консистентным опытом. Если вы выучили, что Cmd + C — это «копировать», вы хотите, чтобы это работало везде. Никто не хочет помнить, что в одних случаях нужно Ctrl + Shift + C, а в других правый клик → «копировать».

Но мы пришли именно к этому. Софт ушёл в интернет, и интерфейсы перестали быть гомогенными вообще. Сотни способов выбрать дату, ввести номер банковской карты, сделать любую банальную операцию. Шорткаты в каждом приложении свои. Способов взаимодействия столько, что их нельзя ни запомнить, ни выучить. Использование веб-приложений в 2023-м — это бесконечное упражнение «где у этой штуки то, что мне нужно?».

Эра десктоп-софта

Для контраста: одной из сильных сторон десктоп-эры была высокая консистентность интерфейсов через идиомы дизайна. Посмотрите на типичный скриншот из Windows 2000 — Microsoft Word.

Визуально это слегка уродливо и устарело: всё прямоугольное, шрифт так себе, цвета тусклые. Но интерфейс делает несколько вещей по-настоящему правильно.

• Структура меню «Файл / Правка / Вид…» была стандартной. В Adobe Photoshop или Microsoft Excel — без разницы, вы знали, что «Сохранить» лежит в «Файле», «Отменить» в «Правке», «Полный экран» в «Виде» и так далее.
• Меню навигируется с клавиатуры. У каждого пункта есть подчёркнутая буква: F в File, N в New. Это шорткаты. Нажимаете Alt + F, открывается меню «Файл», нажимаете N — создаётся новый файл. И мощным пользователям удобно, и шорткаты легко учить.
• Статус-бар внизу показывает всё про текущее состояние: страницу, столбец, количество слов, идёт ли запись правок, в каком вы режиме (вставки или замены) и так далее.
• Пункты меню подписаны словами. Слова, не иконки, — основной интерфейс к действиям. Иконки используются только там, где смысл очевиден. Весь интерфейс не оставляет места для воображения. На скриншоте нет «интересно, а что эта кнопка делает?» — вы знаете, как этим пользоваться, даже если никогда раньше не пользовались.

Возможно, вы не знаете, что значат метки REC, TRK, OVR в статус-баре. Тогда вам помог бы ещё один стандартный паттерн: всплывающие подсказки при наведении мыши, которые объясняют, что эта штука делает.

Что критично — эти идиомы дизайна использовались не только в Microsoft Word, а вообще во всей экосистеме Windows. Посмотрите на экран выхода из Windows XP. Каждая кнопка визуально явно кнопка и подписана прямо тем, что она делает. У каждой подчёркнутая буква для шортката. Разве не приятно?

Эра десктоп-софта была эрой гомогенных интерфейсов — возможно потому, что операционная система и её GUI-библиотеки диктовали огромные пласты дизайна, и эти ограничения подталкивали разработчиков к конформным паттернам.

Стоит упомянуть, что последние десятилетия Microsoft вместе с релизами Windows публиковала несколько-сотен-страничные жёстко предписывающие гайды по тому, как делать идиоматические приложения. Один из недавних примеров — Windows Apps Design.

Эра браузерного софта

Эра браузерного софта — это эра гетерогенных интерфейсов. Возьмите два моих любимых веб-приложения: Figma и Linear.

Я намеренно беру утилитарный энтерпрайз-софт и не сравниваю его с Facebook, Twitter и подобными — это были бы яблоки и апельсины.

Это, пожалуй, два лучших куска энтерпрайз-софта на сегодня. И хотя у них масса общих фич — настройки команд, абстрактные иерархии элементов, коллаборативные комментарии и так далее — у них нет ни одной общей иконки. У них нет ни одной общей идиомы дизайна. У них разные шорткаты. Оба отлично сделаны с нуля по первым принципам, но не конформны ни к одному другому интерфейсу, который пользователь мог видеть раньше.

Мы в эпохе индивидуально хорошо сделанных и полезных веб-приложений, и все они уникальны. Даже в продуктах одной и той же компании опыт гетерогенный: пользоваться Gmail — это совсем не то же самое, что пользоваться GSuites, и совсем не то же самое, что Google Docs. В сумме это очень фрустрирует. Отсутствие гомогенных интерфейсов означает, что я провожу большую часть своего цифрового времени не в продуктивном потоке, а тыкая по экрану и спрашивая себя: «можно ли по этому кликнуть? откроется ли это в новой вкладке? сработает ли кнопка „назад" в браузере?». Жуть.

Эта негомогенность — по двум причинам.

Переход на мобильные

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

Современный фронтенд-разработчик живёт в культуре копирования и переиспользования модульных компонентов, поэтому копировать-вставлять плохие паттерны и закреплять их — очень легко. После 10+ лет такого подхода поколение за поколением фронтендеров деградировало качество UI/UX-дизайна.

Недостаточно идиом за пределами HTML

Если бы все следовали одним и тем же идиомам, интерфейсы бы выглядели довольно консистентно. В ранние годы интернета сильные идиомы были: гиперссылки на другие страницы — синие подчёркнутые, фиолетовые если уже посещали. Прекрасно. Сегодня каждый сайт — это собственная угадайка о том, как стилизованы элементы интерфейса. Это ссылка? Может быть.

Может удивлять, что современный веб-дизайн настолько неидиоматичен — ведь стандарты HTML/CSS очень предписывающие. Проблема в том, что хотя стандарты для написания HTML существуют, его никто не пишет. Все пишут React в TypeScript или последний фреймворк. Импортируют бесчисленные npm-пакеты. Всё это проходит через сложный билд-процесс и выдаёт что-то, что бежит в браузере.

Большая ирония в том, что модульные компоненты должны были обеспечить идиоматический дизайн. Дайте сообществу разработать кучу датапикеров, и пусть лучший победит. Разработчики смогут легко интегрировать самые удачные модули. Так в теории. В реальности — сотни конкурирующих дизайн-библиотек и ни одной окончательной рекомендации, которая выжила бы долгосрочно.

Фронтенд-разработчики не делают ничего неправильного. Браузеры сегодня очень мощные и предлагают универсальные API, которые позволяют делать почти всё, если подходить креативно. Например, Figma не следует ни одной HTML-идиоме, потому что в ней нет HTML. Она написана на WebAssembly; команда на cutting edge-реализации десктоп-стиля софта в браузере. Конечно, это ломает HTML-as-document-модель веб-страницы. Кнопка «назад» в браузере, шорткаты и так далее идут лесом, пока заново выстраивается парадигма взаимодействия человека и компьютера.

Короче, веб-идиом дизайна мало, потому что фронтенд-разработка движется слишком быстро. Инженеры заняты тем, что возможно, а не вопросами полировки — и правильно. Многопользовательская коллаборация в реальном времени гораздо ценнее шорткатов для опытных пользователей. А поскольку существует бесконечное количество и фронтенд-пакетов, и форматов взаимодействия, навязывать единые идиомы на такое большое пространство очень тяжело. Должно пройти время, чтобы передний край остыл, чтобы лучшие паттерны проявились и стали идиоматическими.

Хуже того: даже на техническом уровне правильные идиомы часто пропускают разработчики, которые гонят к финишной черте. Я видел в open source-кодовых базах <span> с обработчиком onclick вместо тега <a>. Это хаос, и это ломает скрин-ридеры и другие средства доступности.

Успех идиоматического дизайна

И всё же некоторые из самых успешных продуктовых организаций сегодня агрессивно навязывают свои идиомы дизайна и достигают какой-то гомогенности интерфейсов.

Apple — отличный пример. Мы говорили про Microsoft прошлого, но Apple сегодня двигает резко бескомпромиссную дизайн-систему. Общая библиотека шрифтов, кнопок, цветов и её консистентность через все нативные приложения и устройства Apple создали мощный эффект подражания для сторонних приложений. Даже когда вы пользуетесь сторонним приложением на iPhone, взаимодействие через клавиатуру, pinch-to-zoom и так далее контролируется iOS. Это большая часть эффекта Apple «оно просто работает». Сильный, со вкусом сделанный, идиоматический дизайн — в ядре успеха Apple.

Что интересно про «оно просто работает»-эффект — он заставляет пользователей доверять дефолтам и избегать кастомизации. Похожая динамика на платформах вроде Substack, где у меня как у автора нет возможности выбрать шрифт или даже подчеркнуть текст. Но ограничивающие дефолты выставлены со вкусом, и это отлично работает. Дизайн-принципы Substack и Apple набирают распространение по мере успеха этих продуктов: дизайнеры смотрят на них как на удачные примеры. Эти решения становятся идиомами через две вещи: (1) люди сходятся на них как на хорошем дизайне, и (2) частоту использования в сообществе.

Что с этим делать

Если вы строите продукт, вы хотите следовать идиомам дизайна так близко, как это практически возможно — это делает софт легче в использовании и максимизирует совместимость на разных устройствах и в разных браузерах. Я следую этим правилам и нарушаю их только редко.

1. Изучайте и следуйте идиомам HTML/CSS, когда возможно. Например, ссылка должна быть подчёркнутой, цветной, с курсором-пальцем при наведении и написана как тег <a>.
2. Избегайте JavaScript-переизобретений базовых HTML-элементов: например, React-компонент Button вместо стилизованного <button>.
3. Изучайте и следуйте идиомам браузера, когда возможно. Кнопка «назад» должна всегда работать. Копирование-вставка URL должны приводить пользователя к тому же интерфейсу. Ctrl+Click по навигационному элементу должен открывать его в новой вкладке.
4. Если отклоняетесь от общих идиом — убедитесь, что ваш дизайн полностью внутренне консистентен и хотя бы «идиоматичен» внутри вашей организации.
5. Предпочитайте слова иконкам. Используйте только иконки, понятные универсально.
6. Если сомневаетесь — делайте визуальные элементы очевидными. Никогда не должно возникать вопроса, кнопка это или таб.
7. Предпочитайте то, что легко понять, тому, что визуально красиво.
8. Если зашли в тупик — обратитесь к двум типам ресурсов: лучшим сайтам с дизайном, которые вы знаете, и книгам по интерфейсному дизайну прошлых десятилетий. Большинство проблем интерфейсного дизайна сегодня — не новые, а повторы исторических, у которых есть решённые аналоги в прошлом.

Я мечтаю о дне, когда каждый датапикер или форма ввода банковской карты в интернете будут абсолютно одинаковыми — когда после 30 лет итеративной разработки и миллионов попыток мы наконец сойдёмся на лучшей. Я мечтаю о будущем, в котором в каждом веб-приложении Ctrl+Click будет открывать ссылку в новой вкладке. Это было бы хорошо.

От переводчика

Эссе написано в 2023 году, но за два с половиной года консистентности в вебе не прибавилось — скорее наоборот. ИИ-сгенерированные интерфейсы и v0/Cursor-style фронтенд-генерация только увеличили число способов сделать одно и то же: каждый промпт даёт чуть новый <Button> с уникальным API.

Из практически применимого для российских команд: совет «следуйте HTML-идиомам» снижает не только риск сломать UX, но и число npm-зависимостей — а значит, и риск supply-chain атак, и порог входа для новых разработчиков. Особенно ценно, когда команда меняется быстрее, чем проект.

Оригинал эссе: essays.johnloeber.com. Сайт автора: johnloeber.com.