Каждый кадр должен быть идеальным

Не так давно я читал о протоколе Wayland и мне врезалась в память эта фраза:

Заявленная цель Wayland — «каждый кадр идеален».

Я считаю, что к этой цели должны стремиться мы все. В Wayland говорилось о технической стороне дела (современные стеки GPU очень сложные, а Wayland пытается вернуть себе контроль), но этот принцип можно применить и к UI.

Эмпирическое правило таково:

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

Дополнение: раньше оно заканчивалось «…, должно иметь смысл», но в таком случае не учитываются сложные техники анимации, например, размазанные кадры и тому подобное.

Почему нам важен каждый кадр? Потому что это нарабатывает доверие. Пользователи не могут увидеть код, поэтому судить о качестве приложения могут судить только по UI. Если UI хорош, значит, у разработчиков было время на его совершенствование, а значит, они, вероятно, потратили сравнимое количество времени на отладку кода. Это эвристика, но вполне разумная.

Что же это проявляется на практике? Могу привести несколько примеров:

• Отсутствие белых вспышек между экранами.

• Отсутствие частично загруженного контента.

• Структура не меняется при загрузке контента.

• Внутренняя согласованность. Если в одной части UI написано «Доступно 1 обновление», то в другой не должно быть написано «Проверяем наличие обновлений…»

• Чёткие анимации.

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

Наверно, вы заметили нечто странное. Давайте замедлимся, чтобы рассмотреть внимательнее:

Теперь применим наше правило и сделаем скриншоты посередине анимации. Выглядит это неправильно:

И это тоже:

Оба эти кадра неидеальны.

Давайте рассмотрим ещё один пример, Safari:

Тест здесь перемещается из центра, а курсор анимируется из позиции слева:

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

Такая рассинхронизация может сильно сбивать с толку. Например, в Photos при переключении между режимами Crop и Adjust изображение меняется мгновенно, но граница кадрирования анимирована:

Это создаёт ложное впечатление, что при переключении между режимами что-то немного меняется. А я не люблю, когда UI создаёт у меня ложные впечатления. Мне нужен точный инструмент, а не анимированная игрушка.

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

То же самое и с Youtube. У дизайнеров была самая простая задача в мире: переместить прямоугольник из одной позиции в другую! Однако они решили сделать нечто очень странное:

Можете это объяснить? Есть ли в этом смысл?

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

Иногда анимации вставляют необдуманно. Пусть происходит то, что происходит. В результате получаем вот это:

Наблюдать за подробностями очень любопытно:

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

А закончу я анимацией зума в приложении Preview. Будьте внимательны к своему UI!