Однажды клиент прислал мне макеты своего будущего сервиса и спросил, сколько будет стоить «просто сверстать». Макеты были красивые, правда красивые: мягкие тени, модный шрифт, иллюстрации с людьми, которые радостно смотрят в ноутбук. Я пролистал их и задал три вопроса. Что видит пользователь, когда у него ещё нет ни одной записи? Что происходит, если платёж не прошёл? Чем экран менеджера отличается от экрана клиента? Ответов не было. Были десятки экранов счастливого пути, нарисованных так, будто в мире не существует ошибок, пустых списков и людей с плохим интернетом. Это была работа маляра, а не дизайнера. И это одна из самых дорогих ошибок, которые я встречаю в проектах.
Маляр красит, дизайнер проектирует
Слово «дизайн» в русском языке пострадало сильнее, чем многие другие заимствования. У нас оно стало означать что-то вроде «сделать красиво». Дизайн интерьера, дизайн ногтей, дизайн сайта. Но изначально design значит проектирование, замысел, конструкция. Стив Джобс сформулировал это лучше всех: дизайн это не то, как вещь выглядит, а то, как она работает. Красота в хорошем дизайне есть, но она следствие, а не цель. Как красота моста: она возникает из того, что мост правильно распределяет нагрузку, а не из того, что его покрасили в приятный цвет.
Маляр получает стену и делает её красивой. Это честная и нужная профессия, я без всякой иронии уважаю хорошего маляра. Но маляр не решает, где в стене будет дверь. Он не думает, как человек с тяжёлыми сумками будет подниматься по лестнице, и не знает, что делать, если в подъезде отключат свет. Этим занимается архитектор. В цифровых продуктах всё точно так же, только маляров у нас почему-то тоже называют дизайнерами, и клиент не всегда может отличить одного от другого, пока не начнёт жить в построенном доме.
Как отличить одного от другого
У меня есть несколько простых тестов, которые работают лучше любого портфолио. Портфолио обычно состоит из самых красивых картинок, а красивые картинки умеют делать оба.
- Спросите про пустые состояния. Что видит новый пользователь в первый день? Маляр об этом не думал, у него в макете всегда двадцать красивых карточек. Дизайнер покажет, как пустой экран превращается в подсказку, что делать дальше.
- Спросите про ошибки. Неверный пароль, закончились деньги на карте, сервер не ответил. У дизайнера на это есть ответы, и они продуманы с той же любовью, что и главный экран.
- Спросите про роли. Кто ещё, кроме клиента, работает в системе? Оператор, бухгалтер, склад? Маляр рисует витрину. Дизайнер проектирует весь магазин, включая подсобку.
- Спросите, откуда берутся данные. Если дизайнер не может объяснить, где хранится то, что он нарисовал, и как это попадает на экран, значит, он нарисовал картинку, а не интерфейс.
- Посчитайте клики. Сколько шагов нужно, чтобы выполнить самую частую операцию? Настоящий дизайн безжалостно эти шаги сокращает, даже если ради этого приходится пожертвовать эффектной анимацией.
Система, а не набор картинок
Есть ещё один признак, который отличает зрелый дизайн. Это системность. Маляр каждый экран рисует заново, как отдельную картину. В итоге кнопка «Сохранить» на одной странице зелёная и справа, а на другой синяя и слева, отступы скачут, таблицы выглядят по-разному. Пользователь этого словами не сформулирует, но будет чувствовать себя как в городе, где на каждом перекрёстке свои правила дорожного движения. Хороший дизайнер строит язык: набор компонентов, правил и состояний, из которых собирается любой экран. Тогда новый экран не нужно рисовать, его можно собрать. Это дешевле, быстрее, и пользователь учится один раз.
Именно на этой идее построен наш подход в Ingello. В Fractal экраны описываются на языке IFL поверх модели данных, а не рисуются как картинки. Сначала мы понимаем, какие сущности живут в системе и как они связаны, потом какой сценарий проходит пользователь, и только потом как это выглядит. Внешний вид при этом никуда не девается, наоборот, он становится одинаково аккуратным на всех экранах, потому что вырастает из общих правил. Получается, что машина берёт на себя малярную работу, а люди занимаются тем, что действительно требует головы.
Хороший интерфейс похож на хорошего официанта: его почти не замечаешь, но всё, что нужно, оказывается под рукой ровно в тот момент, когда понадобилось.
Почему маляр обходится дороже
Красивые макеты без продуманной логики очень опасны тем, что выглядят готовыми. Клиент смотрит на них и думает, что проект почти сделан, осталось «только запрограммировать». А потом программист начинает задавать те самые вопросы про ошибки, пустые состояния и роли, и выясняется, что половину решений нужно принимать заново, уже в коде, где каждое изменение стоит в несколько раз дороже, чем на этапе проектирования. Я видел проекты, где бюджет на разработку вырастал вдвое именно из-за этого. Не из-за жадных программистов, а из-за того, что дизайн закончился на фасаде, а всё здание пришлось проектировать на ходу, прямо на стройке.
Есть и обратная крайность, о ней тоже надо сказать честно. Иногда инженеры, обжёгшись на маляре, решают, что дизайн вообще не нужен, достаточно серых таблиц. Это ошибка с другой стороны. Пользователь не обязан страдать, чтобы доказать нам, что система работает. Вопрос не в том, красить или не красить, а в порядке действий: сначала конструкция, потом отделка.
Что сделать завтра
Если у Вас сейчас есть макеты проекта, откройте их и проверьте по списку выше. Найдите экран, где пользователь впервые попадает в систему с пустыми руками. Найдите, что происходит при ошибке оплаты. Найдите экран любого сотрудника, кроме клиента. Если этих экранов нет, у Вас пока не дизайн, а красивая обложка. Это не повод паниковать, это повод вернуть дизайнера к проектированию, пока не начали строить. А если Вы ищете, с кем проектировать систему целиком, от модели данных до последней кнопки, приходите в Ingello Systems: мы умеем и красить, но начинаем всегда с дверей.
