В конце прошлого года Кирилл подсадил меня на просмотр видео в ускоренном темпе. Даже фильмов и сериалов — хотя бы на скорости 1,1. Художественная ценность не страдает.

Теперь почти весь Ютуб комфортно смотреть в диапазоне 1,25–1,75, и вот что я понял.

Хороший спикер, которого мы смотрим в записи, — не тот, кто говорит быстро (зритель может это настроить), а тот, кто не меняет темп, не ускоряется в отдельных словосочетаниях.

Очень неубедительное письмо от Тинькофф Банка. Просят одобрить получение моих данных из Госуслуг, чтобы:

— Не тревожить звонками. Не страшно, скорее всего, вы до меня просто не дозвонитесь. И вообще пора уже, как говорится, в 2K23 переходить на письменные коммуникации (история с закрытием кредитки);
— Не придётся присылать данные нового паспорта. Ближайшие лет пять менять его не планирую;
— Или данные прав. Не понимаю, зачем банку нужны данные моих водительских прав;
— Точнее показывать актуальные предложения. Ну такое.

В общем, не убедили.

Epic Skills

Наше первое касание вышло довольно комичным. В начале мая 2015 года девушка Маша написала самому крутому (по эту сторону Миссисипи) специалисту по Axure. Она курировала курс веб-дизайна, искала преподавателя для изучения популярного инструмента прототипирования и вышла на Егора Камелева. Здесь бы и сказочке конец, но то была офлайновая «школа интернет-технологий» (поэтому и искали эксперта из Петербурга), а Егор не хотел преподавать офлайн.

Он позвонил мне в Скайпе спросить, стоит ли меня рекомендовать. Я ничего не слышал о них раньше, а знания Егора сводились к сообщениям Киры (писала до Маши), которые были настолько пространными, что было непонятно, работает она в «Эпике» или учится:

— Я так и не понял, представляете ли вы официально Epic Skills или являетесь их студентом?
— Все, кто работает в Эпике, — это бывшие студенты какого-либо курса. Я училась на курсе веб-дизайна.

Маша рассказала, что занятие пройдёт по адресу Невский проспект, дом 130, квартира 6 и продлится три часа. Егор заметил, что этого времени как раз хватит, чтобы вырезать у человека почку. «I’m not afraid of God, I am afraid of man». Потом выяснилось, что это такая творческая мастерская — «квARTира» (надеюсь, они не платили за нейминг), и предложение провести там три часа стало чуть менее мутным.

В общем я согласился блеснуть отвагой и рискнуть здоровьем. Маша по рекомендации Егора написала мне, и уже через день я провёл первое занятие. Саундтреком того дня стал Froot — свежий альбом Марины Диамандис. Чтобы не застрять в пробках, я приехал сильно заранее и слушал его, прогуливаясь по окрестностям.

Школа быстро набрала популярность в петербургской айтишной прослойке и по итогам 2015 года получила звание «Драйвер года» от сообщества цифровых компаний и агентств Specia. Я познакомился с кучей классных ребят среди учителей и кураторов. Прокачался как преподаватель, несколько сотен человек научил создавать интерактивные прототипы. А теоретическую часть своего занятия превратил потом в серию видео об Акшуре, которую посмотрели более шестидесяти тысяч раз.

Последнее занятие в «Эпике» я провёл в 2018-м.

Основатель Глеб Кушедов в 2023-м работает методистом в Skypro и развивает школу программирования на Питоне в Батуми. (И много чего ещё, мне бы его энергию.) Кстати, вот его канал.

Долгий февральский плейлист (1 час 49 минут, 6 треков длиннее 5 минут) — сборник электронной музыки вроде любимых The Toxic Avenger (Франция) и Röyksopp (Норвегия) и известных Gesaffelstein и M83 (оба из Франции), щедро разбавленной более роковыми ребятами вроде Регины Спектор (США), Metric (Канада), Alice Merton (Германия) и Tame Impala (Австралия).

Более мажорный в начале, за исключением перепевших «The Sound Of Silence» Chromatics (которых вы могли слышать в последнем сезоне «Твин Пикс») и Bonaparte (Германия), и более минорный после электронного инструментала Мэттью Беллами, за исключением M83 и Tame Impala.

Неожиданное дополнение истории о запросе на подключение к Госуслугам.

Альфа-Банк прислал пуш, мол, требуется обновить ваши данные, подключите Госуслуги. Упомянули 115-ФЗ для убедительности. Нажатие на пуш (или на «Подробнее» в уведомлении в приложении — на видео) просто открывает Госуслуги, без подробностей.

Хорошо, что из письма Тинькофф Банка я понял, что это вроде как не обязательно, а то задумался бы.

Продолжу тему запросов банков на подключение к Госуслугам. Если рассмотреть оба сообщения отдельно и примерить на себя: призыв Альфа-Банка должен быть эффективнее.

Письмо Тинькофф Банка очень дружелюбно и написано как по заветам Максима Ильяхова (был главредом «Тинькофф-журнала» со дня основания до 2018 года). Оно рассказывает, зачем это банку и как подключение улучшит жизнь клиента. И сформулировано так, что понятно: хотите вот так — подключайтесь. Плюс выбран ненавязчивый способ коммуникации. Имейлами банк ничего важного в последнее время не запрашивал.

Уведомление Альфа-Банка формально корректно. Оно говорит, что банку надо обновить данные клиента, и для этого есть Госуслуги. Проблема в том, что оно безальтернативно и не похоже ни на требование (тогда возник бы вопрос, на каком основании), ни на предложение.

Но фишка в том, что это пуш. Когда он приходит и недолго отображается на экране, в глаза бросается «115-ФЗ» и «требуется». Пользователь воспринимает его уже как требование: «Ой, ну надо так надо». Такое вот боевое НЛП без всякого «Рондо».

Если бы подключение своего банковского профиля к Госуслугам на самом деле было благом, ильяховский подход работал бы хорошо. А без этого эффективнее будет «Нет времени объяснять, подключай Госуслуги». (Напомню, что не знаю показателей этих коммуникаций и сужу по себе.)

Как я стал проектировщиком интерфейсов

Мой путь можно разделить на три этапа. Первые два отвечают на вопрос, почему я им стал.

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

Этап первый: it's alive!

Школьником я читал «Навигатор игрового мира». Кроме статей об играх в нём был раздел Z-Zone с разными околоигровыми материалами, где дебютировал Дмитрий «Гоблин» Пучков с «Санитарами подземелий» и Иван Тропов с «Цензором» — повестями, вдохновлёнными компьютерными играми. А в журнале «Хакер» Даня Шеповалов публиковал свои наркоманские статьи вроде «Школы суицида имени Джордано Бруно» (заблокирована Роскомнадзором). Я тоже стал писать обзоры игр и рассказы. Отправлял их на «Конкурс статей Навигатора игрового мира» и даже дважды его выиграл, но речь не об этом.

В то же время мы с Ваней и парой интернет-знакомых решили выкладывать своё творчество на собственный сайт на бесплатном хостинге boom.ru. Конечно же, назвали его «Массолит». Я сверстал несложные html-странички ещё без вынесения стилей в отдельный файл, но уже с тёмной темой (невыключаемой) и кислотным синим и зелёным цветом текста.

Таймлайн: 2001 год, 10-й класс, мне 16 лет.

Потом на домене grav.spb.ru (больше мне не принадлежит) я сделал, как сейчас говорят, standalone-блог. Разобрался для этого с CSS и PHP, но до SQL не добрался — контент хранил в текстовых файлах. Разрабатывать блог на виндовом компьютере мне помогал «Денвер».

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

Но самое главное воспоминание — один из первых «it's alive!»-моментов с бьющими вокруг молниями, как в лаборатории Франкенштейна, только воображаемыми — когда сработал мой код. Здесь я говорю не о решателе судоку, а об обычной html-страничке, которую отобразил браузер. Словно плиткой я замостил её бежевым прямоугольником со словами «Fuck you», написанными по диагонали синей шариковой ручкой. Молнии заметил папа. Он подошёл, похвалил меня и спросил, неужели ничего приличнее я не придумал?

В наших с Ваней руках было всё необходимое, чтобы делиться своим творчеством со всем интернетом.

Этап второй: halt and catch fire

В 2001-м мы с Ваней поступили в «Финэк». Где-то через год, видимо, чтобы прокачать студенческое самоуправление, в вузе решили провести круглый стол, одной из тем которого было создание неофициального студенческого сайта. Мы собирались показать свой концепт с главной страницей, где семь квадратов складывались в букву F и были ссылками на основные разделы.

Но на встречу пришёл старшекурсник Серёга Павельчук. Он показал не концепт, а вполне рабочий сайт с популярным тогда портальным дизайном в три колонки и контентом вроде расписания занятий, шпор и досье на преподавателей, который он с однокурсниками собрал за время учёбы. Это был finec.org. Мы даже не стали показывать свой концепт и просто присоединились к Серёге.

Я модерировал форум с чатом, писал статьи, из забавного — завёл рубрику «Надписи на партах». Ваня стал редактором «Фабрики грёз» — творческого раздела вроде навигаторовского конкурса, а также публиковал контент. Если не считать форум, чат и комментарии к статьям, портал работал в парадигме «Web 1.0»: чтобы поделиться шпорой, надо было имейлом прислать её анонимным админам, которые её и публиковали.

Потом пришёл Егор, обновил дизайн с логотипом и нарисовал маскота — грифона по имени Гриша. Этот сине-оранжевый стиль остался с Форгом до самого конца.

Таймлайн: 2006 год, 5-й курс, мне 21 год.

Получилось такое нишевое, популярное среди финэковцев СМИ (ох уж эта известность в узких кругах). Было клёво.

В остававшееся после тус, комьюнити-менеджмента и игры в журналистику время (такие были у меня приоритеты) я участвовал в неспешном проектировании Форга версии 2.0. Мы придумывали и описывали механики вроде генерирования масок, чтобы одного препода пользователь обсуждал под именем «Неопознанной капибары», а другого — как «Неизвестный отец». Это позволяло сохранять анонимность и полноценно вести диалог в пределах одного досье, и не давало вычислить студента по преподавателям, в досье которых он отметился. Описывали всё это текстом — о вайрфреймах и прототипах в Петербурге тогда мало кто знал.

Был ещё проект с рабочим названием «Город S» — платформа для создания подобных студенческих порталов и агрегирования их новостей (похожий проект делают герои ваниного романа «Точка»). Но процесс шёл слишком неспешно, появился «ВКонтакте», и мы, как герои сериала «Замри и гори», быстро поняли, что битва за студенческое внимание уже проиграна.

Этап третий: webmaster

Я написал мини-CMS для сайта питерской компании «Панорама», специализировавшейся на остеклении, где сисадминами работали мои друзья (кстати, два рукопожатия до Олега Куваева). А для нового бизнес-центра «Невский, 104», ещё не зная об Axure, сверстал html-вайрфрейм, а потом разработал и сам сайт с админкой.

В 2006-м мы с Ваней поступили в аспирантуру. Он поработал вебмастером уже официального сайта «Финэка» — на четверть ставки или даже меньше — и потом передал это место мне. Я обновлял контент, который сотрудники присылали на почту и даже приносили на дискетах, но в основном торговал и практиковал социальный инжиниринг в Lineage II на своём ноутбуке через неофициальный лёгкий клиент.

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

Я делил кабинет с парнями из Группы электронного обучения (среди них был Джамал Гебеков, с которым мы потом делали один госпроект), но почти всегда сидел один, так как появлялись они редко. Окна выходили на Апраксин двор, где в то время чуть ли не на репите крутили «Don't Phunk with My Heart» группы The Black Eyed Peas.

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

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

Таймлайн: 2008 год, 2-й год аспирантуры, мне 23 года.

Вместе с Димой Новосельцевым мы пробовали в бизнес, на тот момент — в регистрацию товарных знаков и авторских прав. Даже провели регистрацию знака «ВКонтакте». Мы не были лучшими патентными специалистами города, просто Дима учился в одном классе с Дуровым. Забавно было видеть их совместные фото в фильме Родиона Чепеля, вышедшем в 2021 году на Kion.

Мне больше нравилось создание сайтов, и я заинтересовался серёгиным предложением. Требовалось время, чтобы уйти из «Финэка» и бизнеса с Димой, и проектировщиком тогда взяли Тиму «Андерфиша» Сурмина из команды Форга. Я же пришёл в июле — менеджером проектов на этапе проектирования.

Полтора года проработал менеджером, разобрался в проектировании, освоил Axure, на фрилансе сделал для Димы прототип и с таким портфолио перешёл проектировщиком в стартап dnevnik.ru — вслед за Серёгой. Кстати, платили тридцать тысяч рублей в месяц — сейчас кажется, что немного, но тогда это была тысяча долларов.

Послесловие

В 2023-м Серёга работает дизайнером в зарубежном медицинском проекте. Егор создал сервис для генерации посадочных страниц и продолжает проектировать как фрилансер. Оба живут в Петербурге.

Ваня после защиты кандидатской занялся наукой. Сейчас он профессор Ланкастерского университета, гражданин Великобритании.

Тима недолго проработал в айти, а потом и вовсе пропал с радаров.

Впервые побывал в жюри конкурса на дизайн сайта. Вспомнил выпускные в Epic Skills, на которых было что-то подобное. Стрим с презентацией и обсуждением победивших работ.

UX Notes оказались на 3-м месте в списке источников информации для продуктовых дизайнеров, согласно свежему исследованию DevCrowd!

Для Рейтинга Рунета вместе с другими специалистами ответил на вопросы:
— Что такое UX и чем он отличается от CX и UI?
— Роль UX в успехе продукта?

Мой монолог начинается на 2-й минуте. Расшифровка — здесь в комментариях.

Составил топ публикаций в UX Notes в Телеграме и ВК (они пересекаются в 6 материалах, так что можно сказать, довольно разные списки). Заодно понял, что не выкладывал прошлогодний топ к себе в блог. Именно тогда появилось разделение на топы по версии подписчиков в Телеграме и ВК и, видимо, стало лениво. Исправил.

Книжные итоги года: https://vandergrav.ru/books-2023/

Год 2023: https://vandergrav.ru/year-2023/

Слово года: соратник.

Процесс года: отрастание волос Екатерины Воропай.

Приложение Wolt.

Если прочитать подзаголовок, кажется, что это концептуальный нейминг. Но нет, всего лишь кривой автоматический перевод с грузинского на русский. На английский переводится корректно: Smashed cucumber.

На странице паблика в ВК есть кнопка «Ещё», отображающая меню, в котором можно, например, от паблика отписаться.

Разработчики решили показывать меню и при нажатии, и при наведении курсора на кнопку. И скрывать при повторном нажатии. Обычно пользователи наводят курсор на кнопку, чтобы на неё нажать, и получается: при наведении курсора система показывает меню, человек не успевает это осознать и совершает клик, система скрывает меню.

Как починить: не показывать меню при наведении курсора.

Как эмулировать лонгтап в прототипе в Фигме:
— Добавить второе состояние для компонента кнопки, на которую будет жать пользователь;
— Для первого (изначального) состояния добавить ивент Mouse down. Через 500 мс этого ивента — переключать на второе состояние кнопки;
— На второе состояние кнопки добавить ивент Mouse enter, при котором будет происходить действие, вызываемое лонгтапом;
— И ивент Mouse leave, который будет переключать кнопку в исходное состояние;
— В итоге пользователь жмёт на кнопку → проходит 500 мс → курсор оказывается над вторым состоянием кнопки → отображается нужный фрейм (например, попап) → курсор оказывается не над кнопкой → система возвращает кнопку в исходное состояние. Можно закрыть попап и повторить лонгтап.

Update. Оказалось, работает так только на десктопе, на телефоне не работает. Видимо, потому что там проблематично зарегистрировать события Mouse enter и Mouse leave. (Это должно было быть очевидным с самого начала…)

Пока разбирался, понял, что достаточно одного лишь Mouse down с задержкой в 500 мс, которое и будет открывать нужный фрейм. На телефоне тоже работает — Mouse на нём нет, а ивент есть.