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

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

— Добрый день, Егор! Подскажите, пожалуйста, ориентировочную стоимость проектирования и аудита интерфейса. Уже есть готовый проект, думаем о редизайне.

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

Объясняю в переписке, что всё очень индивидуально и предлагаю время созвона. Моя задача — организовать часовой разговор, во время которого я познакомлюсь с человеком и проектом, а также успею провести экспресс-аудит. Это бесплатно и всегда интересно.

Помню, гуляю я с другом по парку, и жалуюсь:

— Написал статью на Хабр — а она не залетела. И ведь полезная! Там столько моего опыта вложено! И структура в порядке, и заголовок. И работал я над ней целую неделю. Несправедливость какая-то. А соседняя статья, которую за час накатал, — зелетела в топ-пять за сутки.

Друг меня поддерживает. Говорит, мол, да, верно, народ не ценит полезные статьи, ему интересные подавай!

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

Сейчас поделюсь с вами сводом правил (фреймворком) написания статей и публикаций, который поможет сделать так, чтобы читатели не могли оторваться даже от самых технически сложных и узкоспециализированных материалов.

Сидим с другом в машине. Скидываю ему в Телегу ссылку на сайт по продаже щёток стеклоочистителей.

— Попробуй найти здесь дворники для своего Пассата.

Друг переходит по ссылке, видит форму подбора щёток по автомобилю. Открывает выпадающий список с перечнем марок. Листает вниз.

— Блин, неудобно же! Volkswagen — в самом низу. А машина популярная. Могли бы, не знаю, поиск какой-нибудь сделать. Или вынести несколько популярных марок наверх.

Кстати, друг — профессиональный дизайнер интерфейсов. В общем, долистывает до конца списка, выбирает Volkswagen и попадает на шаг с выбором модели…

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

В общем, решил сделать пет-проект. ЦРМ нормального фрилансера. Сам я ремесленник-одиночка и пользуюсь ограниченным набором инструментов для ведения дел: Google Таблицы, да Windows-заметки. Решил все эти данные свести воедино в рамках собственной црмки.

Я не разработчик, а проектировщик интерфейсов (UX/UI-дизайнер). Опыта в программировании совсем немного. Поэтому пет-проект был мне особенно интересен. Я уже двадцать лет готовлю проектную документацию для других — а в этот раз для себя.

Сейчас расскажу, как я довёл идею до продукта, как мне в этом помог ChatGPT и почему это было иногда весело и интересно, но большую часть времени — скучно и грустно.

Друг снял офис для работы и ужаснулся, узнав, сколько стоит местный интернет для бизнеса. Он недоумевал, почему такая разница с домашним интернетом. Услуга-то по сути одна и та же.

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

К счастью, я знаком с генеральным директором одной из крупных телекоммуникационных компаний. Это один из провайдеров интернета Санкт-Петербурга. И я задал ему прямой вопрос. Зацените ответ.

Как-то попалась мне на глаза рекомендация от коллег из Яндекса. Они делали аудит рекламы одного из моих клиентов и заодно дали советы по сайту. Меня как UX-дизайнера удивили несколько из этих советов, сегодня расскажу об одном:

«Рекомендуем настроить форму таким образом, чтобы при её открытии курсор ввода автоматически падал в первое поле формы».

Сразу хочется спросить: «Зачем?»

Давайте попробуем сравнить два сценария.

Это программа-парсер. Вы указываете Telegram-канал, выбираете период — и получаете Excel-табличку со всеми публикациями, просмотрами, реакциями, репостами и вовлечённостью.

Хотите узнать, сколько всего текста опубликовал автор? Пожалуйста. Сколько платных звёздочек получил миллионник за 2024 год? Не вопрос. Хотите сформировать топ постов или сравнить эффективность разных форматов? Всё это — в один клик.

Но эта статья — не просто про парсер. Она про путь: как я, не будучи программистом, сделал этот инструмент с помощью нейросети. Что получилось, какие были затыки и чему я научился в процессе.

В конце — весь код и инструкция, как запустить парсер у себя.

Увидели скриншот интерфейса — и сразу захотелось вставить свои пять копеек? Не спешите с критикой.

Вот один из комментариев к моему редизайну интерфейса для радиоприёмника:

— Как говорится, а теперь сравните размер шрифта, контрастность и читаемость в исходном интерфейсе и в новом. Учитывайте мелкий размер экрана. Да, новый интерфейс "красивее", но экран монитора и дисплей устройства — это две большие разницы (с).

А вот другой — от друга, которому я показывал концепт за неделю до публикации:

— Ну у меня всё ещё вытекают глаза, но стало лучше.

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

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

26 июня мне в Телеграм написал потенциальный клиент.

— Добрый день! Хочу пообщаться с вами на тему возможного сотрудничества по поводу UI/UX. Если кратко, это редизайн для электронного прибора (радиолюбительский КВ/УКВ приемопередатчик). Проект открытый, текущий дизайн я делал сам, но хочу переделать. То, что сейчас сделано, можно посмотреть на канале проекта.

Первая мысль: «Не мой клиент». Во-первых, я UX-дизайнер и привык делать прототипы и документацию, а не рисовать редизайн. Во-вторых, если проект открытый, денег там, наверное, не заработаешь.

Вторая мысль: «Зато интересно! Интерфейс для физического устройства. Даже если не смогу взяться за работу — познакомлюсь с интересным человеком. Может, порекомендую кого».

В общем, я точно не предполагал, какой у истории будет конец.

— И это после всего, что я вам рассказал? — я, конечно, уже слышал подобные заявления от потенциальных клиентов, но каждый раз удивлялся.
— Ну да. Зачем нам эти прототипы и функциональные спецификации? Я уже несколько проектов запустил со своей командой и точно могу сказать: никто документацию не читает.
— А как же вы ставите задачу на разработку?
— Пишу небольшую вводную — и всё. В основном, на словах объясняю. Я же каждый день с разрабами общаюсь. Да и сам немного программист. Мы же с вами оба понимаем, что этап проектирования — это просто способ для вас заработать дополнительных денег.

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

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

— Отличная работа, Егор! Я вам на почту правочки прислал по прототипу. Взгляните.

У меня от этой фразы что-то внутри ёкнуло. Захожу в почту, к письму прикреплён вордовский документ (на дворе 2009 год). Открываю… 55 комментариев. Пронумерованных. На четыре страницы.

Пробегаюсь по списку. Часть из них вносятся буквально за пять минут. А часть — перечёркивают мою двухнедельную работу.

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

Сегодня, спустя 15 лет, я знаю ответ на эти вопросы. И сейчас попробую уместить в одну статью почти всё необходимое для того, чтобы клиенты, начальники и коллеги принимали результат работы проектировщика (или дизайнера) с первого раза.

— Я не продаю часы, — ответил я.

— Ну хорошо, тогда что насчёт дней, недель, месяцев? Мне нужно хоть что-то, чтобы прикинуть потенциальные расходы.

— Я обычно оцениваю работу под ключ. Часовой ставки у меня нет.

— У всех есть такая ставка, хотят они того или нет.

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

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

Почему же я сразу не назвал своей часовой ставки?

Я уже двадцать лет проектирую интерфейсы. Делаю интерактивные прототипы, готовлю проектную документацию, вот это всё. Получается, я сочетаю в себе компетенции системного аналитика, UX-дизайнера и ещё всякого по мелочи.

Итак.

Правда №1: я не знаю объективного способа подтвердить, что с проектированием продукты делаются быстрее и дешевле, чем без него.

То есть, для меня это очевидно. Это логично и рационально. Но не проверить.

Я не могу взять две разных команды и дать им две одинаковые задачи, только одна будет в виде устной постановки и заметок на салфетке, а другая — в виде прототипа, сопровождённого проектной документацией. Потому что это две разных команды и результаты могут зависеть именно от участников, а не от постановки задачи.

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

Правда №2: никто не читает…

Яндекс обновляет погодное мобильное приложение. Было несколько этапов.

Первый: «Хотите попробовать новый дизайн приложения? Нажмите сюда».

Второй: «Мы включили вам новый дизайн приложения. Чтобы вернуть старый — нажмите сюда».

Наконец, настало время третьего этапа: «Теперь у приложения новый дизайн. Пользуйтесь с удовольствием!». А включить старый нельзя.

Сегодня третий этап настиг мою жену. И она уже выбирает, на какое новое погодное приложение будет переходить (благо выбор широкий). У меня пока есть возможность пользоваться старой версией. Так что я взял наши телефоны, положил рядом (слева — старая версия, справа — новая), открыл приложения Яндекс.Погоды, сфотографировал и сейчас хотел бы дать обратную связь по поводу новой версии. Во-первых, от лица постоянного пользователя сервисов Яндекса (субъективно и с недовольством). Во-вторых, от лица проектировщика интерфейсов (субъективно, но с пониманием и осторожностью).

Недавно попалась мне на глаза рекомендация от коллег из Яндекса. Они делали аудит рекламы одного из моих клиентов и заодно дали советы по сайту. Меня как ux-дизайнера удивили несколько из этих советов, сегодня расскажу об одном:

«Рекомендуем сделать кнопку отправки формы не активной до тех пор, пока пользователь не заполнит все обязательные поля».

Сразу хочется спросить: «Зачем?»

Давайте попробуем сравнить два сценария.

А я, как обычно, сделал краткий обзор её новых функций и возможностей.

Если кратко: маловато нововведений для того, чтобы присваивать ей новый номер.

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

Под катом мой видеообзор и текстовый перечень основных нововведений.

В Axure, программе для проектирования интерфейсов, есть неочевидная функция, которая позволяет встроить в прототип почти любой код. При этом не покидая интерфейса самой Axure.

Чаще всего я использую её, если нужно встроить в прототип какой-нибудь iframe. Например, Яндекс.карту. Или видео с Ютуба.

Заметил такую возможность ещё в пятой версии программы, в 2010 году. И она до сих пор с нами в десятой версии, спустя 14 лет.

Сейчас объясню, как это работает, и покажу пример.

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

Но одно дело — идея, а другое — её реализация. Чтобы проверить, насколько это вообще интересно магазинам, нужно им что-то показать. А разрабатывать для этих целей mvp — займёт какое-то время.

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

Почти что прототип для пользовательского тестирования, только в этот раз для демонстрации идеи и усиления коммерческого предложения.

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

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

В фрилансерских кругах есть любители поржать на эту тему. Я тоже когда-то таким был. До тех пор, пока не осознал две вещи.

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

Вторая. И тут-то и заключается проблема. Фрилансер, получив странный комментарий к результату своей работы, сразу представляет, как ему придётся тратить время на внесение правок, испытывает от этого дискофморт и его первая реакция (которая очень легко и неприязненно считывается собеседником) — резко возразить.

Как уменьшить количество «дичи» от клиента, да ещё и повысить его удовлетворённость от процесса работы и результата?

Я здесь пишу с позиции проектировщика интерфейсов (UX-дизайнера) на фрилансе, но подход в целом довольно универсальный.

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

В общем, в Diablo 3 некоторое время существовали аукционы. Один за внутриигровую валюту, другой за реальные деньги. Так как игроков было очень много, финансов в этих аукционах было тоже довольно много. Некоторые сделки доходили до десятков тысяч долларов. И как-то меня эта тема зацепила, и я решил попробовать тоже заработать немножко золота. Да, именно внутриигровой валюты. Почему-то меня не тянуло к реальным деньгам (и, пожалуй, зря).

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