Идеальный продукт и его UX/UI дизайн

Рецензия на книгу «UX/UI дизайн для создания идеального продукта»

Привет! Сегодня расскажу о том, что узнала из книги-гида Ярослава Шуваева «UX/UI дизайн для создания идеального продукта». Дабы рецензия не вышла совсем уж пространной, решила разделить её на две части. Поговорим о SUS, MVP, концепциях Personas и JTBD, разнице между MVT и A/B-тестированием, об API, как о факторе, формирующем UX, и многом другом.

Глава первая: «Физиологические основы пользовательского опыта»

Интригующее и несколько забавное название главы, не так ли?

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

В этой главе нас посвящают в три преинтересных факта, два из которых упомяну:

1. Чем быстрее, тем качественней пользовательский опыт. И приятней. То есть чем быстрее пользователь получает желаемое, тем выше его удовлетворенность от взаимодействия.

2. Когнитивная нагрузка, если она высокая, приводит к более медленному достижению результата и большему количеству ошибок. Понятно, что чем сложнее интерфейс, тем больше вероятность, что пользователь совершит ошибку просто потому, что не разобрался, куда нажимать, как и к чему это приведет. Именно поэтому важно все время держать в голове главное правило – лучше понятно, чем замысловато.

Глава вторая: «Связь User Experience и Customer Experience»

Совсем коротенькая вторая глава рассказывает, что деление опыта на клиентский и пользовательский условно. Если взаимодействие происходит через цифровые точки касания (сайт, приложение и т.д), то это User Experience, то есть пользовательский опыт. А если через нецифровые (физическое присутствие в отделении банка, к примеру), то Customer Experience, то есть клиентский. И, конечно, есть Human Experience, проще говоря, опыт всех людей, взаимодействующих с сервисами той или иной компании. Он включает в себя и опыт пользователя, и опыт клиента, и опыт потенциального клиента – Prospect Experience.

Глава третья: « В чем разница между UX- UI-дизайном?»

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

В главе почти нет внятного описания разницы. Списываю на то, что ЦА текста – дизайнеры, которые многое понимают и знают. Но как будто можно было и углубиться, да? Изучила информацию самостоятельно. Вот, что могу сказать.

«Проектирование пользовательского опыта охватывает все аспекты взаимодействия пользователя с компанией, ее услугами и продуктами» – говорит Дон Норман, когнитивный ученый и архитектор пользовательского опыта.

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

Дизайн пользовательского интерфейса в свою очередь фокусируется на визуальных элементах интерфейсов продукта. UI-дизайнеры отвечают за все: от цветовых палитр и типографики до тонкой настройки макета и общей эстетики. Из-за этого фокуса на объединении эстетики с удобством использования UI-дизайнеры должны иметь четкое понимание принципов визуального дизайна.

Важно понимать, что чаще всего UX и UI идут рука об руку, и все же можно говорить о том, что UX может обойтись без UI (имею в виду API, к примеру). Это так, заметки ради.

Глава четвертая: «Факторы UX»

Всего в этой главе описываются 20 факторов, которые относятся исключительно к UX. Да, ниже будет текстовое полотно)

1. Брендинг

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

Брендинг — это непрерывный процесс поддержки и развития индивидуальности бренда в сознании потребителей. Хороший брендинг способствует узнаваемости бренда, укреплению доверия и лояльности среди потребителей, поэтому дизайнеры проводят тщательное исследование рынка, определяют руководящие принципы бренда, поддерживают последовательность во всех точках соприкосновения. Дизайн играет важную роль в формировании индивидуальности бренда. Люди запоминают и ассоциируют бренды благодаря броским или, напротив, лаконичным логотипам, цветам, шрифтам. Когда дело доходит до дизайна веб-сайта или мобильного приложения, креативный UI/UX, согласующийся с принципами и посылами бренда, имеет огромное значение.

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

1. идентификация продукта – то самое, благодаря чему мы видим красную жестяную банку и первым делом думаем: «О, Кока-Кола!»;

2. упрощение сравнения продукта – мы предпочитаем знакомое незнакомому;

3. упрощение распространения информации о продукте – рассказываем знакомым о красной баночке, а не о том, что Кока-Кола какая-то особенно сладкая;

4. передача информации о дополнительных свойствах продукта;

5. удовлетворение потребности в демонстрации принадлежности к сообществу – покупка брендовых вещей люкс-сегмента, к примеру.

В рамках этого фактора также объясняются два важных определения.

System Usability Scale (SUS) – шкала удобства использования системы.

Далее пишу от себя исключительно. Опросник SUS был разработан в 1986 году Джоном Бруком и состоял из 10 вопросов. Использовался для того, чтобы определить удобство использования электронных офисных систем. С тех пор шкала удобства использования системы широко используется для оценки юзабилити программного обеспечения и веб-сайтов и по сей день. Для оценки используется шкала Ликерта (опрашиваемые оценивают степень своего согласия и несогласия от «совершенно не согласен» до «совершенно согласен»).

Minimal Viable Product (MVP) – минимально жизнеспособный продукт. Главное преимущество MVP заключается в том, что можно понять интерес клиента к продукту без полной его разработки. Чем раньше выяснится, понравился ли ваш продукт клиентам, тем меньше усилий и расходов будет потрачено на продукт, который может быть и не будет иметь успеха на рынке. Идентификация бренда часто создается вместе с MVP.

2. Функциональность

Для начала нам дают пояснение того, что такое функциональность и функция.

Функциональность – набор возможностей (функций), которые предоставляет система или устройство. Функция – способность объекта выполнять работу…Пользователь «нанимает» продукт, чтобы этот что-то сделал для удовлетворения его потребностей.

Тот интерфейс, с которым пользователю будет проще, понятнее и приятнее взаимодействовать, всегда побеждает. Чтобы опережать конкурентов, необходимо предлагать те функции, которых у них нет, либо те, взаимодействие с которыми обеспечивает получение более качественного пользовательского опыта. Теперь поговорим о фичах, иначе говоря о Product Feature. Автопилот в автомобилях Tesla – фича. Автор книги приводит свой пример – вход в приложение по отпечатку пальца и отмечает: «Фичи снижают нагрузку в процессе использования функции».

3. Техническая доступность

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

Дизайнер может:

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

• Писать понятные сообщения об ошибках. Я уже писала о таких сообщениях в предыдущей рецензии, процитирую себя саму:

Ошибка, возникающая при использовании ПО, не должна вводить пользователя в недоумение. Да, случилась ошибка, но! Важно, во-первых, объяснить её (конкретизировав проблему, предоставив достаточное количество информации). Во-вторых, необходимо предложить способ её решить. А лучше, конечно, вообще предотвращать ошибки, подсказывая пользователю на всем его пути (визуальными подсказками и паттернами взаимодействия).

4. Информационная архитектура

Для того, чтобы интерфейс был понятен, нужно грамотно его спроектировать. В рамках этого фактора объясняется, чем хороша карточная сортировка. Оказывается, некоторые люди думают, что кориандр принадлежит к овощам. Как выяснить это? Методом карточной сортировки, когда пользователи получают возможность самостоятельно разложить карточки по разным отделам и назвать их. Еще нам предлагают ознакомиться с онлайн-инструментами, такими как Trello и Miro. А еще нам рассказывают, что такое сервисный тоннель (service tunnel). Это когда вы хотите заказать все для блинов, идете за молоком, а приложение тут же предлагает муку и яйца.

Можно сказать, что мы проектируем структуру приложения, стремясь снизить когнитивную нагрузку на пользователей.

Для того, чтобы спроектировать крутой и понятный флоу, нужно понять, как мыслит аудитория и в чем она нуждается. Для этого можно применять два подхода – Personas и JTBD (Jobs to Be Done). Метод JTBD заключается в том, что люди на самом деле не покупают продукты, они нанимают продукты для выполнения определенной работы. Например, человек не покупает отвертку из-за ее характеристик, он покупает то, что отвертка в конечном итоге делает для него: помогает собирать мебель, чтобы его дом выглядел лучше. Personas ориентируется на обобщённые портреты пользователей, в то время как JTBD фокусируется на конкретных потребностях каждого пользователя. Первый рассматривает пользователей как статичные сущности, в то время как второй предполагает динамичность и изменчивость потребностей пользователей. Короче говоря, концепция JTBD помогает выявить истинные желания и стремления клиента при совершении покупки, что может быть учтено как при разработке продукта, так и при маркетинге.

5. Стиль повествования

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

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

6. PR

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

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

7. Пуш-уведомления

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

8. Создаваемый пользователями контент

Мне, когда я прочла заголовок, сразу на ум пришла социальная сеть, которую нельзя называть, а также Pinterest, да и наш отечественный ВКонтакте с возможностью делиться постами.

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

И да – я действительно захожу в I не потому, что фанатка его интерфейса. А потому, что хочу смотреть за жизнью других людей, видеть, чем они занимаются, узнавать что-то полезное для себя. Дизайнер может поспособствовать тому, чтобы пользователи реально публиковали контент в социальной сети, например. Каким образом? Сфокусировавшись на функциональности. Постить, делиться контентом должно быть удобно, быстро и приятно. UX-дизайн как раз об этом.

9. Маркетинговые коммуникации

Дизайнер пользовательского опыта берет на себя ответственность за весь путь, а не только за ту часть, которая связана с экранами сайта или приложения.

Email-рассылка из интернет-магазина может включать в себя возможность тут же заказать тот или иной товар, и это должно быть не только понятно, но и удобно. Надо сказать, что маркетинг и UX совсем не близки – команда маркетологов стремится увеличить воспринимаемую ценность предложения компании, а команда дизайнеров пользовательского опыта – снизить когнитивную нагрузку, о которой мы говорили выше. Цель и тех, и других — чтобы по SUS, также упомянутой выше, люди как можно чаще и уверенней советовали приложение кому-либо, т.е. оставались заинтересованными. Кроме того, определенные маркетинговые приемы могут негативно сказываться на UX, но об этом не в рецензии.

10. Персонализация

Как удобно, что лента подстраивается под интересы пользователя. Я недавно надумала купить вторую собаку, тут же полезла в Авито посмотреть, какие вообще есть питомники золотистых ретриверов. Полюбопытствовала, потом вышла, так как «вторая собака, наверное, тяжело», а на следующий день поняла, что мне предлагается множество объявлений по продаже золотистых ретриверов. И снова шальная мысля посетила мою лохматую голову…

В рамках этой главы рассказывается, что такое MVT (Multivariate Testing). Не раскрывается, впрочем, на мой взгляд важный момент – разница между мультивариантным тестированием (кто-то использует формулировку многомерное тестирование) и A/B-тестированием (иначе говоря – сплит-тестированием). Не думаю, что в рамках этой рецензии будет здорово разобраться подробно, и все же нельзя не сказать пару вещей.

В то время как A/B-тест сравнивает исходную версию ‘A’ целевой страницы с измененной версией ‘B’, многомерное тестирование изменяет более одной переменной, одновременно проверяя все полученные комбинации друг против друга. 

Формула для расчета общего количества версий в MVT выглядит следующим образом:

[Количество вариаций элемента A] x [Количество вариаций элемента B] x [Количество вариаций элемента C]… = [Общее количество вариаций]

Но есть один потенциальный недостаток: многомерные тесты требуют бо́льшего объема трафика для достижения статистической значимости, чем A/B-тесты, просто потому, что нужно тестировать больше версий страниц. 

11. Репутация

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

Чтобы понять, какая репутация у компании, используется в том числе метод Sentiment Analysis, т.е. метод анализа тональности. Чаще всего анализируются отзывы в социальных сетях и на разнообразных сайтах. Действительно – многие люди оставляют отзыв о том или ином местечке в Яндекс Картах или пишут о своих впечатлениях в посте. Именно такие тексты алгоритмы анализа прочитывают и размечают тональность цветами – красным, ясное дело, выделяется негатив, а зеленым – позитив. В общем классный инструмент для того, чтобы понимать отношение клиентов/пользователей к компании и их продукту. Чем раньше обнаружится прореха, тем лучше. Благодаря современным алгоритмам анализа время от получения отзыва до исправления недочета сокращается.

12. Модель ценообразования

Автор книги фокусирует наше внимание на том, что модель ценообразования (Pricing Model) – один из сильнейших факторов, влияющих на пользовательский опыт, а матрица сравнения тарифов, например, – важный инструмент UX-дизайнера. Да, в 21 веке мы все покупаем подписки на те или иные сервисы, и нам, как потребителям, важно понимать разницу между тарифами/подписками и видеть выгоду.

Она [матрица] позволяет доносить информацию, но и выполняет коммуникативную функцию, как посадочная страница, на которой мы можем еще раз рассказать о функциональности продукта и бонусах.

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

13. Дорожная карта продукта

Иначе говоря – Roadmap, которая создается перед запуском проекта и дополняется во время его сущестования. Можно сказать, она задает вектор, в котором будет двигаться вся команда. Можете посмотреть, как она выяглдит, тут.

…востребованность продукта не всегда объясняется непосредственно потребностью в функциональности. Иногда она объясняется обещанием функциональности или потенциальной востребованностью функциональности в будущем.

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

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

14. API

API (Application programming interface) – интерфейс прикладного программирования.

UX-дизайнеры, которые преследуют цель сделать пользовательский опыт максимально удобным и приятным, быстро обнаруживают, что интеграция API является одним из основных инструментов, которые они могут использовать. В книге приводится такой пример улучшения UX посредством интеграции API: возможность заказать через Google Maps такси Uber, не пользуясь при этом самим приложением Uber. Такая же возможность есть в Яндекс Картах – можно заказать Яндекс Такси, не открывая приложения. Другой пример – драгоценный голосовой помощник Алиса от Яндекса также существует благодаря API и возможности общения с различными сервисами. Оплачивать доставку чертовски удобно, когда есть возможность за секунду, буквально по Face ID или отпечатку пальца, подтвердить, что все ок и это вы списываете 200 рублей на орешки со сгущенкой и пломбир.

15. Контент

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

16. Экосистема

Самый очевидный пример экосистемы – компания Apple, чьи устройства, например, Mac и iPhone, отлично работают друг с другом (функция AirDrop, хранилище iCloud). В РФ также есть свои экосистемы – Яндекс имеет массу сервисов: это и доставка еды, и такси, и музыка, и облачное хранилище, и почта. И везде есть единая сквозная авторизация: нужен только один аккаунт. Важно, чтобы все продукты вписывались в экосистему, а не воспринимались лишними.

17. Описание приложения в магазине приложений

Прежде, чем загрузить или купить приложение, человек ознакамливается с его описанием в магазине приложений (AppStore, Google Play Market) и снимками экранов – ему необходимо понимать, какие функции есть у приложения, как оно выглядит и так далее. Безусловно, на Releas Notes тоже обращается внимание. В книге упомянули о том, как члены команды «Альфа-мобайл» сделали из описания релиза почти что сериал: в нём как бы разговаривали Герман и Олег (сами знаете, какие). Интересно ли на такое посмотреть? В иные моменты – да.

18. Глубокие ссылки

Диплинки (deeplink) – это тип ссылок, которые направляют пользователей напрямую в нужную точку в приложении. Глубокие ссылки могут принимать несколько форм. Самый простой тип, прямая глубокая ссылка, откроет приложение, если оно уже установлено, и покажет пользователю нужное место. Пример: заходим в Яндекс Карты и делимся геоточкой с другом в каком-нибудь мессенджере. Нажав на линк, у этого друга открываются Яндекс Карты и он видит ту самую геоточку. Бам!

Но что произойдет, если пользователь перейдет по глубокой ссылке в приложение, которое у него не установлено? Вот тут-то и вступают в игру отложенные глубокие ссылки. С отложенной глубокой ссылкой он может быть направлен в магазин приложений. Гениальность отложенной глубокой ссылки заключается в том, что когда этот пользователь устанавливает и открывает приложение, он также может попасть на нужную страницу. То есть друг может скачать Яндекс Карты и увидеть отправленную геоточку.

Весьма полезно. Речь идет о колоссальной экономии времени)

19. Связь с ОС

Ну, тут все понятно.

…операционные системы – настоящие черные дыры, поглощающие функциональность, которая некогда была неотъемлемой частью самодостаточных продуктов.

В книге речь идет об Apple Pay и Google Pay. О том, что возможность внутреннего поиска – классная вещь, экономящая массу времени. И что, конечно, данные каждого контакта в адресной книге постепенно пополняются, т.к. ОС черпают информацию из разных источников. Кажется iOS делает это, в том числе используя почту.

20. Интеграция с голосовыми ассистентами

Siri, Алиса значительно выручают время от времени. Мне нравится, что я могу попросить Алису (колонку) включить джаз поздним вечером – это тот UX, который кажется незабываемым, особенным. Безусловно, голосовые ассистенты, как и тот же самый ChatGPT – это интереснейший предмет для изучения и развития. Предпосылок для развития, как говорит автор, несколько:

• Мы чаще пользуемся сервисами в диалоговой форме. Например, запись в студию гимнастики через ТГ.

• Происходит демократизация роскоши. Самый простой пример – такси.

• Повышается доверие к роботам (хотя это спорно и я не знаю, может ли быть общение с роботом приятным — меня все эти роботы в поддержке раздражают).

Таким образом мы поговорили о многом в этой рецензии, она вышла весьма и весьма объемной. Чтобы вы не заснули, как я сказала в самом начале, поделила текст на две части. Думаю, что вторую можно ждать к концу недели. Пишите, что думаете по поводу прочитанного. А пока – всем хорошего дня!