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

Альфа-Банк прислал пуш, мол, требуется обновить ваши данные, подключите Госуслуги. Упомянули 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 на нём нет, а ивент есть.

«Операция Арго по-тайски» — пока только в формате подкаста (можно послушать на скорости 1,5)

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

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

Почему они решили, что AI приятны вежливые формулировки? Возможно, как компьютеру ему приятны совершенно бессмысленные с точки зрения человека вещи вроде безопасного извлечения USB-устройств или терпеливого ожидания сообщения «Теперь питание компьютера можно отключить».

Моя первая публикация в корпоративном блоге на Хабре. Написал, как с помощью переменных и условий быстро сделать в Фигме нелинейный прототип.

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

Но в итоге получился классический туториал.

Возможность вежливо отказаться.

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

Нимакс, кейс Garage 8.

96 и 9,6 — минимальная визуальная разница.