Путеводитель по кнопкам

Идея написать книгу про интерфейсы родилась, когда автор работал над дизайном Skybonds — сложной платформы для управления активами банка.

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

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

Современные интерфейсы буквально ломятся от таких ошибок. Некоторые из них пользователи не замечают, но многие просто вводят в ступор. Так, в интерфейсе безвременно почившего Skype for Business рядом друг с другом находились две кнопки. Одна из них, с иконкой камеры, включала видео, а соседняя с ней, с иконкой микрофона, — выключала звук.

В другом известном продукте — почте Gmail — дизайнер зачем-то сделал настройки автоисправления и проверки грамматики при помощи двух радиокнопок, хотя можно было использовать галочки. Еще в одном интерфейсе крупной компании кто-то перепутал выпадающий список и выпадающее меню. Популярное мобильное приложение до сих пор использует текстовые поля с подчеркиванием; другое — смешивает вкладки первого и второго уровня. А в каждой второй форме поля вообще теперь подписывают сверху, хотя подписи должны быть слева...

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

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

История интерфейсов от Xerox Alto до Vision Pro

«Путеводитель по кнопкам» — универсальное и самое полное руководство для UX/UI-дизайнеров. Книга дает глубокое, фундаментальное понимание дизайна интерфейсов и оставляет далеко позади поверхностные курсы от Скиллбокса, Курсеры или Яндекса.

Книга имеет стройную историческую линию. Она начинается с изобретения первого графического интерфейса в лаборатории Xerox, а заканчивается на суперсовременном шлеме дополненной реальности Vision Pro. Автор шаг за шагом проводит читателя через развитие дизайна от первых компьютеров к современным настольным и мобильным системам.

Появление первых GUI, революция Newton и iPhone, гонка интерфейсов Windows и Mac OS, рождение и смерть скевоморфизма, победа плоского дизайна и переход от библиотек стилей к дизайн-системам — обо всем этом книга рассказывает не только с пользой, но и со вкусом. История интерфейсов так классно вшита в повествование, что в книге даже есть хронологическая шкала, разбитая на исторические эпохи.

Книга состоит из трех частей. Первая часть посвящена настольным интерфейсам — от Xerox Alto и Apple Lisa до современных macOS и Windows. Вторая охватывает мобильные устройства — от Apple Newton до iPhone и Android. Третья рассматривает будущее интерфейсов: работу в виртуальной и дополненной реальности на примере Quest и Vision Pro.

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

Энциклопедия UX/UI-дизайнера

«Путеводитель по кнопкам» — это настоящая энциклопедия дизайнера. В книге содержится невероятное количество иллюстраций. Их настолько много, что на техническом листе книги даже не указано точное количество.

По приблизительной оценке самого автора, на страницах книги размещено около 500 иллюстраций, схем и зарисовок. Большая часть — это скриншоты и примеры интерфейсов, собранные из 180 (вот это уже точное число) самых известных и популярных приложений: Google Docs, Notion, Airbnb, Uber, Яндекс.Карты, Т-Банк, Telegram.

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

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

Профессиональным дизайнерам книга даст повод для глубоких размышлений о природе интерфейсных решений. Она помогает найти ответы на вопросы, которые кажутся простыми, но на практике вызывают затруднения.

Почему компонент устроен именно так? Подсвечивать ли кнопку при наведении или затемнять? Как правильно отмечать выбранный пункт — галочкой или цветом? Чем отличается выпадающий список от выпадающего меню? Как оптимально выровнять поля в форме?

Эти вопросы кажутся простыми, но они — обманчиво простые.

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

Руководство по созданию дизайн-системы

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

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

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

В-третьих, подход оказался чем-то похож на таблицу Менделеева или стандартную модель элементарных частиц. Это прозвучит забавно, но матрицы компонентов позволили автору буквально открыть недостающие компоненты. Конечно, это метафора, но результат оказался любопытным: логика матрицы подсказала мне новые стили компонентов; затем я пошел их искать в реальных примерах — и нашел!

Дизайн начинается не в Фигме

Автор убежден, что «Путеводитель по кнопкам» — это лучшая книга про дизайн интерфейсов, и вот почему.

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

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

«Путеводитель по кнопкам» возвращает дизайнерам дизайн. Книга объясняет, как строить интерфейс не на основе наивных эмпирических изысканий, а из априорной логики и свойств человеческого восприятия.

Последняя книга, написанная с такой точки зрения, принадлежала Джефри Раскину — создателю интерфейса первого Macintosh. Она вышла в далеком 2000 году. С тех пор интерфейсы усложнились, а понимание их природы покрылось слоем пыли. Эта книга написана как попытка переломить тренд и напомнить, чем является дизайн интерфейсов на самом деле.

Уважаемый дизайнер!

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

Как вы можете видеть, эта книга — три в одной: история, энциклопедия и руководство. Есть в ней и one more thing. Клянусь своим курсором, это единственная в мире книга с интермиссией!