bannerbannerbanner
Ты – Мастер. Эффективная методика быстрого роста в UX UI для сеньоров

Станислав Молчанов
Ты – Мастер. Эффективная методика быстрого роста в UX UI для сеньоров

Полная версия

© Станислав Молчанов, 2025

ISBN 978-5-0067-0250-9

Создано в интеллектуальной издательской системе Ridero

Введение

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

Мы с вами начнем с того, что выйдем из «рабочего» режима. Представьте: вы – фермер, который всю жизнь выращивал овощи на одном участке. Но если вы хотите больше, чем урожай, вам нужно не только улучшать инструменты, но и изучить рынок, найти новые сельскохозяйственные технологии, возможно, даже создать бренд. Так и в дизайне: продвижение до топ-уровня – это не только умение рисовать, а умение видеть, как ваш дизайн влияет на бизнес, как он решает проблемы тысяч людей. Исследование, проведенное в Стэнфорде в 2020 году, показало, что сотрудники, которые осознанно связывают свою работу с долгосрочной миссией компании, повышают эффективность на 40%. Это ваш первый шаг: перестать быть «исполнителем» и стать «архитектором».

Сейчас вы, возможно, задаетесь вопросом: «Как же начать?». Давайте возьмем пример из реальной жизни. Представьте, что вы пришли в стартап, где нужно запустить новый продукт за три месяца. Вы не просто рисуете макеты – вы проводите воркшопы с разработчиками, маркетологами и клиентами, чтобы понять, как дизайн решит их боли. Это как если бы вы построили мост между разными языками: техническим жаргоном инженеров и простыми словами пользователей. Такие навыки – ключ к тому, чтобы ваши проекты не падали в «пропасть» между идеей и реализацией.

А теперь о том, что пугает многих: зарплата. Да, вы хотите больше, но не потому, что «хочу шикарную жизнь», а потому что ваша работа должна быть оценена как вклад в бизнес. Вот аналогия: если вы – художник, который рисует картины, но не продает их, ваш талант останется в тени. Так и в дизайне: чтобы переступить «потолок» зарплаты, нужно научиться «продавать» не часы, а идеи. Как? Через пресейлы – встречи, где вы показываете, как ваш дизайн увеличит продажи или снизит отток пользователей. Это как если бы вы не просто продавали телефон, а рассказывали, как он изменит жизнь покупателя.

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

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

И да, я не обещаю, что все будет легко. Но если вы готовы пройти этот путь, то сможете не только повысить зарплату, но и, скажем, уйти на полгода в отпуск, зная, что ваш дизайн продолжает приносить пользу. Это реальный пример из моей практики: один из моих учеников, став сеньором, перешел в компанию, где он работает три дня в неделю, а остальное время путешествует. Как? Он перестал быть «исполнителем» и стал «арбитром» между бизнесом и пользователями.

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

Кто я такой

С 2012 по 2017 годы я был студентом и много времени проводил в играх. Параллельно начал увлекаться графическим дизайном, а потом решил перейти к веб-дизайну, потому что увидел, как многое зависит от удобного и понятного интерфейса.

В 2016—2017 годах, еще во время учебы, я попробовал себя во фрилансе на Upwork. Брался за разные проекты – от простых баннеров до сложных концепций, и постепенно дорос до уровня «Эксперт».

С 2012 по 2019 фриланс стал моей основной деятельностью. Я получил статус Top Rated Plus, завоевал награды Awwwards и FWA, а еще отработал свыше 5000 часов для более чем 30 компаний. Эти проекты помогли мне набрать хорошую базу знаний и научиться работать с разными командами.

В 2019—2021 годах я присоединился к Andersen Lab. Там руководил командой из 14+ профессионалов и получил награду «Бог UX». Для меня это был важный опыт, когда я осознал, как важно уметь не только создавать классный дизайн, но и вести за собой людей.

С 2021 года по настоящее время сотрудничаю с Aquiva и Customertimes, где довелось участвовать в проектах для L’Oréal, Meta «признана запрещенной к распространению на территории РФ» и Four Seasons. Сейчас у меня уже 8 сертификатов в сфере UX/UI, и я продолжаю учиться, чтобы оставаться полезным и актуальным для своих заказчиков и коллег.

Глава 1: Дизайн мышление

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

Самое первое, что лежит в основе, – эмпатия. Это не просто «стать на место пользователя», а почувствовать его боль так, как будто это ваша собственная. Представьте, что у вас в ботинке попался камушек. Вы даже не думаете о красоте обуви – хотите только избавиться от дискомфорта. Так и в дизайне: нужно найти эти «камешки» в опыте пользователя. Исследования показывают, что команды с высоким уровнем эмпатии на 35% чаще создают успешные продукты (по данным Harvard Business Review). Но эмпатия нужна и к бизнесу: если решение не принесет прибыли, даже идеальный продукт провалится.

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

После этого приходит время генерировать идеи. Многие думают, что это творчество «от сердца», но на самом деле есть правила. Например, метод «брейнсторминга»: вы не просто сидите и ждете вдохновения, а ставите ограничения. Представьте, что вам нужно создать идеальный календарь. Если дать свободу, люди придумают десяток ненужных функций. Но если сказать: «Думайте, как календарь может помочь человеку, который не любит планировать», – идеи станут практичнее. Такой подход помогает IBM сократить время разработки решений на 40%.

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

Тестирование – этап, где гипотезы сталкиваются с реальностью. Здесь важно не бояться провалов. В 2000-х Netflix предложил DVD-диски по подписке, но тесты показали: люди готовы переплатить за мгновенный доступ. Это привело к стримингу – и компании, которая могла обанкротиться, стала монстром индустрии.

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

Вспомните первый абзац: вы начали читать, потому что я не говорил «10 шагов», а показал, как это связано с вашей работой. Это и есть суть – говорить не сложным языком, а через истории, которые вы уже знаете, и примеры, которые можно копировать. Теперь, когда вы прочитали это, подумайте: где в вашем проекте «камешек в ботинке», который вы пока игнорируете?

Эмпатия

Эмпатия пользователя

Представьте, что вы зашли в магазин, чтобы купить хлеб. Вы видите полки, думаете, где он находится, чувствуете голод, а потом идете к прилавку. То же самое происходит в цифровом мире: пользователь проходит через этапы (например, добавление товара в корзину), и на каждом из них он испытывает эмоции, сталкивается с препятствиями или находит удобства. Эмпатия делится на четыре составляющие – «думает», «видит», «чувствует», «делает». Например, если на экране приложения слишком много кнопок, пользователь может «думать»: «Где кнопка оплаты?», «видеть» неразбериху, «чувствовать» разочарование и «делать» попытки нажать на случайные элементы. Это простая схема, но именно она позволяет выявить боли и возможности.

 

Чтобы собрать данные, используйте реальные сценарии. Например, проследите за тем, как человек добавляет товар в корзину и переходит к оплате. Попросите его описать свои мысли, эмоции и действия на каждом шаге. Можно сравнить это с исследованием автомобильных производителей: они ставят камеры в салоны, чтобы понять, как водители и пассажиры взаимодействуют с панелью управления. В цифровых проектах это делается проще – вы можете использовать инструменты вроде Miro или даже листы бумаги с наклейками. Каждый этап флоу (например, «открытие корзины») становится центром внимания, а участники пишут по карточке для каждого из четырех пунктов. Так, если пользователь «видит» непонятную кнопку, его комментарий станет основой для исправления дизайна.

Ключевой момент – собирать мнения отдельно. Если вы соберете группу людей и спросите их мнение вслух, они начнут влиять друг на друга, как в соцсетях, где токсичные комментарии подавляют конструктивные идеи. Лучше работать индивидуально, как врач, собирающий анализ у каждого пациента отдельно. Исследования показывают, что даже 5—7 участников дают 80% полезных данных, но если собрать 10—15 человек, вы увидите повторяющиеся тренды. Например, в известном исследовании Нильсена 1990-х годов выяснилось, что 10 пользователей выявляют 90% проблем интерфейса.

Не забывайте тестировать даже свои гипотезы. Если вы, как дизайнер, проходите флоу и думаете: «Здесь нужно увеличить кнопку», проверьте это с реальными пользователями. Может оказаться, что проблема в другом – например, в названии кнопки «Оформить заказ», которое пользователи воспринимают как «Сохранить корзину». Как в кулинарии: рецепт может казаться идеальным на бумаге, но только дегустация покажет, что соль добавлена вдвое меньше.

Вовлекайте бизнес-партнеров. Они часто видят выгоду, где пользователи видят сложность. Например, команда может хотеть добавить рекламный баннер на кнопку оплаты, чтобы заработать больше, но пользователи будут его игнорировать, считая это мошенничеством. Здесь эмпатия помогает найти компромисс – разместить баннер ниже, чтобы не мешать основному действию. Это как в ресторане: шеф хочет подать экзотическое блюдо, а повара знают, что гости предпочитают классику.

Используйте инструменты для автоматизации. Есть сервисы вроде Maze или Hotjar, которые проходят по вашему сайту, делают скриншоты этапов и собирают обратную связь. Это как нанять виртуального помощника, который тестирует приложение 24/7. Но даже простые способы, как запись на бумаге или в блокноте, работают. Главное – систематизировать данные.

Самооценка (self-SWOT)

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

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

Важно, чтобы анализ был индивидуальным. Если люди обсуждают SWOT-факторы вслух, они начнут подстраиваться под мнения старших или популярных коллег. Представьте заседание в офисе, где молчун, заметивший проблему в дизайне, не решается высказаться из-за агрессивного руководителя. Отдельные карточки сохраняют честность. Инструменты вроде Miro или даже обычные стикеры помогают организовать это: каждому участнику выделяется своя зона на доске, где он пишет мысли, не видя чужих.

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

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

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

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

Диаграмма сродства

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

Этот этап делится на четыре ключевые категории. Первая – «полезность»: как пользователь оценивает, насколько каждый этап флоу помогает ему достичь цели. Вторая – «начало работы»: насколько легко пользователь понимает, с чего начать и как взаимодействовать с интерфейсом. Третья – «преподнесение»: дизайн, шрифты, цвета, которые могут влиять на восприятие. Четвертая – «замешательство»: моменты, где пользователь теряется, например, не видит кнопку «оплата» или не понимает, зачем вводить промокод.

Каждый участник описывает эти четыре аспекта для всего флоу. Представьте, что вы тестировали процесс добавления товара в корзину и оплаты. Пользователь может написать: «Полезность высокая – я быстро нашел товар, но в конце флоу возникло замешательство из-за непонятной кнопки». Такие комментарии собираются в цифровых инструментах, например, в Miro или Excel. В Excel можно создать таблицу, где каждый пользователь – столбец, а строки соответствуют четырем категориям. Это похоже на школьную доску, где каждый ученик пишет свои мысли, а учитель группирует их по темам.

Инструменты искусственного интеллекта, такие как анализ текстов в сервисах вроде MonkeyLearn, могут автоматически выявить повторяющиеся слова или фразы. Это экономит время: вместо того чтобы просматривать сотни карточек вручную, система покажет, что 70% участников жалуются на дизайн кнопки.

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

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

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

Анализ и определение проблемы

Анализ и формулировка проблемы – это момент, когда все данные, собранные на предыдущих стадиях эмпатии, self-SWOT-анализа и диаграмм, превращаются в четкие цели и задачи. Представьте, что вы собрали сотни комментариев о процессе оплаты в приложении: кто-то жалуется на медленную загрузку, кто-то – на сложность ввода промокода, а некоторые отмечают, что дизайн кнопки «оплатить» слишком неприметный. Теперь ваша задача – не просто собрать эти идеи, а выделить главное.

Первым шагом становится совместная работа с бизнес-партнерами. Вы приглашаете руководителей, маркетологов и разработчиков, чтобы обсудить, какие проблемы важны не только для пользователей, но и для компании. Например, пользователи хотят быстрее оформлять заказы, а бизнес стремится сократить abandon rate – процент пользователей, которые не доходят до конца флоу. Это похоже на поездку в командировку: пассажиры хотят быстрее доехать, а водитель – сэкономить топливо. Обе цели могут совпадать, если выбрать оптимальный маршрут.

Затем вы проводите аудит конкурентов. Это не значит копировать их решения, а анализировать, как они решают аналогичные задачи. Например, вы можете заметить, что Ozon использует промокоды в верхнем меню, а Wildberries – в шаге оплаты. Это дает вам идеи, но не ответы: возможно, ваша аудитория привыкла к другому расположению, и придется тестировать варианты.

После этого формулируется проблема. Она должна быть конкретной, как гвоздь, который нужно забить, а не молоток, которым это делается. Например, не «улучшить оплату», а «сократить время завершения заказа на 30% за счет упрощения этапа ввода промокода». Это важно, потому что размытые цели приводят к размытым решениям.

Далее создается план исследований. Он может включать A/B-тесты (например, показать разным группам пользователей разные варианты кнопки оплаты), дополнительные интервью с теми, кто бросил процесс, или анализ метрик вроде «время на шаге». Инструменты вроде Hotjar или Google Analytics помогут отслеживать поведение пользователей, но без предыдущего анализа вы рискуете собирать данные без цели.

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

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

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

1  2  3  4  5  6  7  8  9  10 
Рейтинг@Mail.ru