UX/UI дизайн для создания идеального продукта. Полный и исчерпывающий гид

UX/UI дизайн для создания идеального продукта. Полный и исчерпывающий гид
Ярослав Александрович Шуваев

Библиотека цифровой трансформации
Успех любого цифрового продукта складывается из многих факторов. Ваш продукт может быть уникальным и востребованным, но без проработанного UX ему не суждено заслужить лояльность клиента. Эта простая истина прекрасно известна Ярославу Шуваеву, основателю школы UXAcademy и руководителю крупных digital-проектов для российских и западных компаний, среди которых Администрация Президента, Внешэкономбанк, Coca-Cola, «Газпром», «Татнефть», «Башнефть», Bosco, QIWI, STADA и многие другие.

«Моя главная цель – описать факты через призму личного опыта и конкретные жизненные примеры», – пишет Ярослав. Его книга – авторский подход к дизайну, выработанный годами плодотворной работы. Вы сделаете пользовательский опыт лучше, побуждая клиентов возвращаться к вашему продукту снова и снова.

Ярослав Шуваев

UX/UI дизайн для создания идеального продукта: полный и исчерпывающий гид

© Шуваев Я.А., текст, 2022

© Оформление. ООО «Издательство «Эксмо», 2023

* * *

О книге

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

Занимаясь преподаванием, я обратил внимание на то, что в личном и профессиональном развитии движение идет в направлении от интуитивных практик к контринтуитивным.

Поэтому структура книги выстроена следующим образом.

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

• Определяем основные факторы, которые влияют на опыт использования цифровых продуктов, помимо интерфейса.

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

• Интуитивно кажется, что цель работы UX-дизайнера – создавать различные объекты (артефакты), и потому далее мы изучим артефакты, необходимые для реализации продукта на каждом слое.

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

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

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

О себе

Долгое время я работал в одном из самых известных российских брендинговых агентств – DDVB. Я начинал как дизайнер интерфейсов и разработчик в одном лице. Команда росла и впоследствии превратилась в отдельную компанию, где я занял пост CEO и партнера. Мы сфокусировались на производстве цифровых продуктов под названием Direct Digital и делали проекты для крупнейших отечественных и зарубежных заказчиков, среди которых: Администрация Президента РФ, Внешэкономбанк, Coca-Cola, «Газпром», «Татнефть», «Башнефть», Bosco, QIWI, STADA и др.

В тот момент я увидел, что цифровая трансформация охватывает все больше бизнесов. Клиентские сервисы постепенно переходили в Интернет и мобильные приложения. Цифровые продукты стремительно усложнялись, и появилась необходимость в применении более системного и технологичного подхода к их дизайну. Мы одними из первых в России стали оказывать услуги в области дизайна пользовательского опыта (user experience design).

Сейчас на рынке труда не хватает UX/UI-дизайнеров, их готовы приглашать на хорошие зарплаты ведущие компании по всему миру. Но тогда все лишь начиналось – бизнес уже ощущал потребность в специалистах, но еще не осознавал ее. Клиентский поток был очень маленький. Рынок только зарождался, и ему требовалась помощь.

Одним из стратегических шагов в его формировании стал запуск образовательного курса UX/UI: Digital Product Design в Британской высшей школе дизайна. Он до сих пор входит в число самых известных и успешных образовательных курсов по UX/UI в России. Впоследствии я адаптировал программу курса под онлайн и запустил собственную школу uxacademy.ru.

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

Я не упускал возможности практиковаться и, помимо основной деятельности, помогал друзьям с UX в их стартапах. В результате такой коллаборации появился проект Agrarus.ru – сельскохозяйственная торгово-логистическая площадка. Погрузившись в мир Agile[1 - Гибкая методология разработки. – Здесь и далее прим. автора, если не указано иное.] и Lean Startup[2 - С англ. «бережливый стартап»; концепция бережливого предпринимательства.], я почувствовал, что хочу завязать с выполнением заказов, и примкнул к команде в роли CXO (Chief eXperience Officer).

Мы не получали зарплат и все инвестиции вкладывали в разработку. Для содержания семьи я создал компанию shuvaev.com, и она до сих пор оказывает услуги в области UX-дизайна, консультирования и цифровой трансформации.

Тогда я занимался проектированием и работал как сам по себе, так и с разными компаниями. Ярким опытом была коллаборация с агентством Suprematika, и в ее результате было получено множество отечественных и зарубежных наград за дизайн, включая международную награду Red Dot.

Через некоторое время основной инвестор принял решение остановить финансирование Agrarus.ru по внешним причинам, и меня пригласили развивать мобильный банк «Альфа-Мобайл» в «Альфа-Банке».

Банк находился на волне Agile-трансформации, и на тот момент основные цифровые продукты централизованно разрабатывались в выдающемся офисе подразделения «Альфа-Лаборатория» – мекке цифровых энтузиастов, финтех-гениев и дизайн-мыслителей. За эти потрясающие два года работы мы достигли больших результатов – обновили дизайн мобильного банка и хорошо развили функциональность, что позволило подняться в рейтинге мобильных банков Markswebb с 11-го места на 2-е, 4-е и 1-е места (для операционных систем Android и iOS и в категории «Планшеты»). Аудитория за это время выросла в два раза.

Меня захватил опыт цифровой трансформации банка, и когда мне предложили участвовать в создании компании «Ак Барс Цифровые Технологии» – инновационного центра группы «Ак Барс Банк», – я сразу же согласился и присоединился к команде в качестве руководителя направления R&D.[3 - С англ. Research & Development – «исследование и разработка»; такое направление работы, где компания ищет и создает новые продукты внутри бизнеса.]

Пока компания росла, я совмещал несколько ролей.

Как Agile-тренер, я с командой запустил гибкий, бережливый производственный процесс, базирующийся на «бирюзовых» ценностях[4 - «Бирюзовые» ценности – ценности, присущие «бирюзовым» организациям в классификации Фредерика Лалу, основанной на исследованиях Кена Уилбера. Именно Уилбер в своей книге впервые описал структуру turquiose – там понятие было переведено как «бирюзовая» организация, хотя исторически она называется «изумрудная». Им свойственна плоская управленческая структура, максимальная автономность и самостоятельность ее членов, а также прозрачность и самоорганизация.], и в итоге уже с первых месяцев мы получили прорывные результаты.

В роли Scrum-мастера я внедрил Scrum[5 - Методология управления проектами. – Прим. ред.] в пяти командах, не без поддержки самих команд, конечно, и это позволило в рекордные сроки обновить цифровой банк, перезапустить его сайт и выпустить ряд других продуктов.

В роли владельца продукта вместе с командой R&D я запустил несколько пилотов, начиная с тех, что обеспечивали быстрые победы, – интеграции c Apple Pay, Android Pay[6 - С февраля 2018 года сервис называется Google Pay. – Прим. ред.] и Samsung Pay, – и продолжая высокотехнологичными проектами в области искусственного интеллекта и автоматизации.

Приведу основные.

• Aimee – система автоматизации контакт-центра на основе искусственного интеллекта, которая более чем в 40 % случаев отвечает за оператора.

• Face2Pay – система оплаты, основанная на распознавании лица.

• Сервис на основе диалогового ИИ, помогающий обычным людям начать инвестировать.

В этой самой любимой роли я пребываю до сих пор, так что ждите новостей.

Затем меня пригласили создавать новую IT-компанию Viasat Tech на позицию директора по цифровым проектам. Мы делаем революцию в области стриминга цифровых развлечений.

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

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

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

Введение

Пользовательский опыт: основные определения

Пользовательский опыт, или опыт пользователя, – буквальный перевод английского выражения User Experience (UX), потомок термина Customer Experience. Связь терминов описана в главе 2.

Термин UX тесно связан с понятием цифрового продукта (Digital Product).

Для дальнейшей работы с книгой введем ряд определений.