Этап второй: 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 — минимальная визуальная разница.

Моя статья о переменных и условиях в Фигме выиграла в хабра-конкурсе «Технотекст 2023» в категории Дизайн, подкатегории Middle. Я не прочь и впредь писать не более одной статьи в год, если эффект будет таким же.

Когда анонсировал статью здесь, упомянул, что её концепция во время написания изменилась (и, судя по признанию, изменилась к лучшему, а не как в старом анекдоте). Это произошло благодаря обратной связи Славы Киржаева, head of design розничных продуктов Альфа-Банка, и редактора Кости Рискова, так как статью публиковали в корпоративном блоге. И именно Костя предложил податься на конкурс. Так что, как бы банально это ни звучало, без них этой победы не было бы.

Давно хотел написать (но не так сильно, поэтому пишу только сейчас) небольшой апдейт.

1. В статье я упоминаю способ заполнения отдельных полей через изменение варианта компонента поля по клику (свап). Так в моём итоговом прототипе заполняются два поля из четырёх.

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

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

2. Видимо, всё время, что я создавал переменные в прототипах (начиная с Axure), я неправильно писал слово chosen. И заметил это только при подготовке статьи, так как Фигма и Акшура на орфографию внимания не обращали. В тексте статьи я поправил, но на скриншотах всё ещё можно найти неграмотное choosen.

Немного финансовой этнографии: 3 прикола в грузинских банках на примере Банка Грузии.

1. Стоимость обслуживания

— Рассмотрение заявки на открытие счёта: 50 лари. Заявку при этом могут не одобрить;
— Минимальный тариф: 5 лари в месяц;
— Следующий тариф: 10 лари в месяц.

По курсу на 5 июня 2024 года 1 лари = 32 рубля или 0,36 доллара.

На минимальном тарифе:
— Перевод любой суммы в лари в другой грузинский банк, включая переводы самому себе: 1 лари за перевод;
— Оплата в банковском приложении коммунальных услуг вроде газа, электричества, воды: 0,5 лари за платёж, независимо от суммы;
— Снятие наличных лари в банкомате этого же банка: 0,6 лари за 300 наличных. Возможно, там есть формула вроде 0,2% от суммы, минимум, максимум, но я не готов настолько углубляться и пишу на основании своей истории снятий. А у дантиста, который принимает только наличные, как-то всё по триста. (Рифму не планировал, но сознательно оставил.)

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

Следующий тариф даёт возможность не платить комиссию за переводы и снятия, если переводишь и снимаешь до 3000 лари в месяц. С этим связан второй прикол.

2. Странная работа лимитов

— Они учитывают все переводы, даже переводы другим людям внутри банка, то есть то, что бесплатно даже на минимальном тарифе. Перевёл крупную сумму получателю в Банк Грузии — лимит на месяц исчерпал, изволь снова платить по лари за каждый перевод в TBC или Credo;
— Когда я внезапно перешёл на следующий тариф (это третий прикол), оказалось, что лимит уже успел уменьшиться на 300 лари, снятые за несколько дней до перехода.

3. Не гнушаются обманывать мигрантов

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

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

Сначала я услышал что-то вроде «Вы больше не будете платить 5 лари за обслуживание» и ответил «Хорошо», мало ли, борьба за клиентов ужесточилась, все валят в TBC. Предложили какие-то бенефиты, но за 15 лари в месяц — отказался. Я вообще за справкой пришёл. Предложили платить 10 — я понял, что мне предлагают сменить тариф, и ответил, что хочу оставить всё как есть. Сказали, что тарифа за 5 лари больше нет, как нет больше Ляли в Газгольдере.

Возможно, если бы я на английском говорил напрямую с клерком, я быстрее понял, о чём речь, усомнился в сказанном и твёрдо и чётко отказался или попросил позвать менеджера. Но когда твой юрист как может переводит на русский враньё клерка… Как говорил Эдуардо Саверин (в фильме «Социальная сеть») после подписания соглашения, которое размыло его долю в Фейсбуке: «Я думал, это мои юристы».

В общем, мне включили более дорогой тариф, а на следующий день в приложении банка я снова выбрал минимальный (которого «больше нет»).