Пружинистые анимации

Если у вас в интерфейсе что-то выезжает, то хорошо, чтобы оно не просто ехало-ехало, а потом вдруг остановилось, а как-то постепенно и плавно приехало в финальную точку. Это ощущение определяется характером анимации. Вместо линейной анимации, лучше выбрать анимацию с плавным замедлением, то есть ease out. Можно даже понастраивать, каким именно будет замедление.

Иногда встречаются анимации, когда что-то не просто плавно замедляяесь подъезжает к финальной точке, а как-то ещё колеблется вокруг неё:

Примеры с сайта easings.net

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

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

Однажды Эплы на ВВДЦ сформулировали простой принцип: анимация должна плавно замедляться ровно к нужной точке, если её инициировал компьютер, но может пружинить, если её инициировал человек! То есть если я сам пальцем швыряю панельку, она может уехать чуть дальше, чем надо, и потом вернуться. Это логично: я ж не рассчитывал силы как в бильярде, чтобы попасть ровно — просто толкнул, как вышло. Но если панелька выехала сама и пружинит, то это воспринимается как баг. Типа, чё она сразу-то не приехала куда надо? Почему программа не смогла рассчитать нужную скорость? Когда я услышал этот эпловский принцип, я почувствовал себя глупым, потому что это очень простое объяснение, но сам я его сформулировать не мог.

В Ай-ОСе 26, когда появляется уведомление, оно всё время выезжает дальше чем надо, а потом возвращается назад. Тупое, несуразное уведомление, которое само не знает, куда ему надо! Понятно, что дизайнеры Ай-ОСа 26 сами не читали собственные принципы, и поэтому не знают этого, а чувство прекрасного у них отбито многолетней работой с Аланом Даем.

Но зато теперь хотя бы вы знаете и не будете делать такое говно в своих продуктах.

Бабуля ищет контакты в приложении Сбербанка

Случайно провёл качественное коридорное исследование.

Прохожу мимо некоей бабули, а она такая: «молодой человек, не поможете найти контакты мне?» и телефон свой показывает. Смотрю — у неё приложение Сбера запущено. Не успеваю сказать, что из приложения нужно выйти, как она объясняет, что ей деньги надо перевести: «тут где-то контакты должны быть, кому переводить, но я без очков ничё найти не могу». Я вижу приложение Сбера впервые в жизни, так что ничё не знаю, но ничего похожего на контакты не вижу. Бабуля в этот момент замечает иконку человечка в углу и такая: «о, наверное человечек это контакты, да?» Я говорю: «скорее всего это про вас всякие данные». Но она жмёт, чтобы проверить. Потом, наконец, я вижу, где там кнопка перевода, и предлагаю нажать на неё. Говорю: «у меня не Сбер, но наверное оно после этого спросит, кому». В итоге так и оказывается, и бабуля довольна.

Выводы:

  1. У некоторых пользователей идея перевода в голове строится не от самого глагола «перевести — кому», а от получателя «выбрать человека — перевести». Это совершенно неочевидно, если ты опытный пользователь, но абсолютно логично. Скажем, почему я не могу вообще в приложении «Контакты» найти человека, и где-то там выбрать, что я хочу ему через Сбер перевести деньги?
  2. У некоторых пользователей иконка человечка в углу вовсе не значит «мой профиль» автоматически, они могут искать там каких-то других «людей». Тут вообще непонятно, что в связи с этим можно делать.

На интерфейсном курсе: фотки сделать превьюшками и поставить наверх

Смотрим экран документа в программе — хранилке документов. Там есть пункт «Фото документа». Предлагаю вместо него сделать превьюшки самих документов и перенести их наверх. Объясняю, зачем и почему. Коротенько, прям меньше 2 минут:

Это фрагмент № 186 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 5 апреля 2024 года.

Открыта запись на курс, который пройдёт 13 декабря — 11 января.

Почитать о курсе

Программа, отзывы, запись

Автогромкость в Эйрподах

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

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

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

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

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

Может, я слишком много хочу.

Надежда на светлое будущее Эпла

Интернет ликует, что из Эпла уходит главный дизайнер Алан Дай.

Алан — лицо деградации интерфейса в Эпле, происходившей последние годы. Если раньше ключевые принципы хорошего интерфейса было удобно объяснять на примере Эпла, то сейчас на примере Эпла остаётся показывать только, как делать нельзя. Алан получил огромную власть при минимальной компетентности: он просто не понимает, что делает интерфейс хорошим; он необразован и даже не осознаёт этого. Внешний вид и поверхностные эффекты полностью победили глубокую продуманность, и всё продолжает работать только благодаря величайшему фундаменту, построенному в далёком прошлом. Дай не понимал и не уважал этот фундамент.

На место Дая приходит Стив Лемей. Я не слышал это имя, но он работал в Эпле дизайнером интерфейса с 1999 года, так что нет сомнений, что он хотя бы понимает, в чём заключается эта работа. Кроме того, похоже, сами дизайнеры в Эпле не верят своему счастью и связывают надежды с этим изменением. Возможно, это человек, для которого design is how it works — не просто красивые слова. А ведь пару недель назад был ещё слух, что в этом году Эпл сфокусируется не на новых функциях, а на полировке и доработке.

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

Отдельно я надеюсь, что Эпл вспомнит, как много он сделал для удобства перетаскивания как жеста в своё время. В Виндоусе перетаскиванием пользоваться было невозможно, потому что если тащить файл, то всё остальное работать переставало до завершения этого жеста. На Маке, пока «держишь» файл в мышке, раньше можно было прокручивать окно колесом, чтобы бросить файл в нужное место, а ещё можно было нажать пробел, чтобы активировать элемент под курсором, пока кнопка мыши занята. Сейчас эти вещи работают через раз: где-то успели доломать, где-то не успели. А вдруг Эпл теперь вспомнит следствия из закона Фиттса и файлы в Док можно будет снова перетаскивать до самого края экрана, а не целиться в иконку?

Стив Джобс, презентуя Квик-лук лет двадцать назад, рассказывал, что парсинг ПДФа встроен глубоко в систему, и поэтому даже сложные ПДФ-документы отображаются мгновенно как обычные графические файлы. А на сегодняшнем Маке не то, что ПДФ — даже обычный джипег открывается заметное время. Просто откройте папку с джипегами и нажмите стрелку вниз на клавиатуре, чтобы курсор по ним бежал. На старом Маке джипеги, сменяя друг друга, мерцали бы перед глазами. Сегодня Мак ждёт, пока вы отпустите стрелку, и только после этого лениво рисует джипег на котором вы остановились.

Нужно просто не знать, как может быть хорошо; как было хорошо, чтобы считать, что сегодняшний Мак хорош. Единственная причина терпеть это убожество — всё остальное ещё хуже. Хоть бы это перестало быть единственной причиной. Пожалуйста.

Лондон в 2022-м

Просто фоточки из Лондона в сентябре 2022 года:

1
2
3
4
5
6
7
8
9
10

Уют по-лондонски — обтягивающие поезда метро:

11
12
13
14
15
16

Прогнать бы левую машину отсюда:

17
18

На интерфейсном курсе: крутилка значит «программа думает»

Разбираем фрагмент интерфейса, где программа то ли задумалась, то ли ждёт чего-то от пользователя. Объясняю, что крутилка означает именно первое, и точно не второе. 5 минут:

Это фрагмент № 185 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 5 апреля 2024 года.

Открыта запись на курс, который пройдёт 13 декабря — 11 января. Сейчас −20% из-за ранней записи.

Почитать о курсе

Программа, отзывы, запись

Крутилка значит «программа думает»

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

Она ну никак не может означать, что программа, наоборот, ждёт чего-то от пользователя.

Про кнопки «Отменить» и «Стоп»

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

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

Но бывает возражение другого вида: что это привычно и так всегда было. Типа, устоявшийся паттерн, что-то такое.

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

А потом Эплы сделали Айпод, и на нём не было кнопки «Стоп». И с тех пор у Эпла нет кнопки «Cтоп» в проигрывателях. И большинство из вас никогда даже не обращало на это внимания.

Короче, просто не ставьте кнопки «Отменить», всё будет хорошо.

Уличные таблички Ижевска

В Ижевске крутые уличные таблички:

Они как бы наклонены к тебе:

Не то, чтобы это как-то сильно влияет на читаемость, но в этом чувствуется столько человечности, что я растаял сразу:

Номер без улицы:

Бывает более убогая модификация, с такими вот острыми углами:

Наклоняется тоже, но без уважения. А тут ещё и винты жуткие:

А в основной версии даже под винты сделаны пазы красивые:

Цвет полосы вроде бы значит район:

Ну кайф?

Дизайнерам ТСЖ «Центр-1» показалось, что и так сойдёт:

Жители дома справа завидуют жителям дома слева:

А ещё бывает вообще другой дизайн — чёрный, с логотипом «Иж» в углу. Зачем-то табличкой закрыли номер дома:

Этот номер чувствует себя лишним:

«Родной» номер выглядит так:

А номер этого дома мы не узнаем:

Шрифты, конечно, вообще не дружат.

Фотографии из поездки в сентябре 2022 года. Слетайте в Ижевск!

Ещё уличные таблички:

Ранее Ctrl + ↓