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

Фактор 1. Брендинг

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

Brand в переводе с английского – клеймо; пастухи метили скот, чтобы отличать коров, принадлежащих разным семействам.

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

Визуальным идентификатором может быть не только знак, но и другие детали оформления, например, цвет упаковки или декоративные элементы.

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

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

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

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

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

• идентификация продукта;

• упрощение сравнения продуктов;

• упрощение распространения информации о продукте;

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

• удовлетворение потребности в демонстрации принадлежности к сообществу,

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

Часто параллельно с разработкой прототипа, минимально жизнеспособного продукта (Minimal Viable Product, MVP, подробнее см. главу 5), создается идентификация бренда.

Наблюдая за пользователями, можно убедиться, что от варианта брендинга зависит не только субъективная удовлетворенность клиента (измеряемая, например, с помощью метрики SUS[12]), но и время решения задач.

То, что ныне широко известный Стив Пирс (Steve «Buzz» Pearce){1} сделал для продукта Skype, сильно повлияло на становление термина «цифровой брендинг». Эта работа была одной из наиболее ярких.

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

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

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

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

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

Функция – способность объекта выполнять работу.

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

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

К функциям продукта применимо свойство многосоставности.

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

• просмотр списка пользователей;

• добавление пользователя;

• удаление пользователя;

• редактирование информации о пользователе;

• поиск пользователей.

Поиск пользователей, в свою очередь, можно разбить на пункты поменьше:

• поиск по имени;

• поиск по вхождению слова в описание;

• прочее.

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

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

Вряд ли пользователи скачают приложение с одной-единственной возможностью аутентификации.

Фичи снижают нагрузку в процессе использования функции.

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

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

Ощущение скорости загрузки содержимого

Ключевое слово здесь «ощущение». Объективное время загрузки контента может значительно отличаться от субъективного.

Например, наличие различных прелоадеров (preloader, предзагрузчик) и плейсхолдеров (placeholder, местозаменитель) позволяет передать пользователю ощущение того, что, во-первых, система не зависла, а во-вторых, что идет какой-то процесс.

Определенный прелоадер

Неопределенный прелоадер

Определенный прелоадер показывает либо конкретное значение, либо долю загруженного контента. Неопределенный лишь отображает, что происходит загрузка

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

Прогрессивная загрузка изображений и миниатюры загружаемых документов или интерфейсов также позволяют уменьшить субъективное время загрузки контента

Прогрессивная загрузка изображения с использованием размытой миниатюры

Помимо субъективного ощущения скорости, имеет значение атрибуция негативного опыта. Атрибуция – это то, как человек объясняет причины явлений. Связывает ли он «тормознутость» с продуктом? А может, винит в задержке операционную систему или мобильную связь?

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

Когда iOS-приложение показывало фирменную анимацию прелоадера, пользователи обвиняли в задержках само приложение, когда же там стал отображаться iOS-спиннер, они переложили ответственность на операционную систему

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

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

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

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

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

Человекопонятные ошибки, поведение системы в ситуации сбоя (обработка исключительных ситуаций)

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

Однажды при запуске минимально жизнеспособного продукта мы решили сократить время до релиза, сэкономив на обработке ошибок. После «мягкого запуска»[13] мы, конечно, смогли быстро проверить ряд гипотез, но конверсия в отправку форм сильно упала – у значительного числа пользователей не получалось заполнить форму регистрации до конца. Было принято решение доработать продукт перед «большим запуском». Разрыв оказался столь велик, что с тех пор в нашем плейбуке[14] появилось правило: «Из текста ошибки пользователю должно быть понятно, как он может решить проблему самостоятельно».

Очень важно, чтобы поведение системы при ошибке (exception, в исключительной ситуации) подсказало пользователю, как ему закончить свое путешествие.

На это влияет несколько факторов.

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

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

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

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

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

Информационная архитектура (англ. Information architecture, часто сокращается до ИА) – сочетание схем организации, предметизации и навигации, реализованных в информационной системе.

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

Обычно студенты называют много разных вариантов: «Фрукты», «Овощи»; кто хочет выделиться, говорят: «Ягоды» или «Бахчевые». Кто-то предлагает создать специальный раздел «Арбузы» или поместить его сразу в несколько разделов.

Налицо противоречие между некой «правильной» структурой разделов классификатора (в этом случае таксономией) и той структурой, которую ожидают увидеть разные группы пользователей.

Таксономия арбуза согласно APG II – таксономической системе классификации цветковых растений

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

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

Помимо офлайн-инструментов, существует множество специализированных онлайн-инструментов, таких как OptimalSort, UsabilityTools (UXSuite), хотя можно использовать и универсальные сервисы, такие как Trello или Miro.

Карточная сортировка в Trello

Так какой же таксон выбрать для арбуза?

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

Такие каталоги создаются на основе принципа сервисных тоннелей.

Принцип сервисного тоннеля позволяет сэкономить количество шагов при формировании заказа

Сервисный тоннель (service tunnel) – это принцип построения сервиса, когда после продажи основной услуги клиенту тут же предлагается следующая, которая ему с большой вероятностью понадобится. Понятие пришло из маркетинга, где является созвучным логичным развитием популярного термина «воронка продаж» (service funnel).[15]

Примерами сервисных тоннелей служат многочисленные сайты по продаже авиабилетов: после продажи билета клиенту предлагается страховка, выбор лучшего места, приоритет при входе в самолет, бронирование отеля и аренда авто и т. д.

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

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

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

Тогда для описания сегментов целевой аудитории использовали модную в то время методику персон.[16]

В брифе заказчик выделил персон пяти типов:

• «инвестор» – человек, который покупает квартиру для сбережения и приумножения финансов;

• «трудоголик» – покупает жилье рядом с офисом;

• «молодой семьянин» – человек, у которого появилась семья и которому нужно съехать от родителей; на этом этапе для него важно иметь пусть бюджетную, но собственную квартиру и минимальное число объектов городской инфраструктуры;

• «молодой родитель» – вариант «молодого семьянина», которому нужно съехать от родителей из-за рождения ребенка; для него важны объекты детской инфраструктуры рядом с домом и экология;

• «пенсионер» – человек, который после выхода на пенсию решает переехать за город; для него важны экология и вид за окном.

Каждая такая персона действует, руководствуясь своими побуждениями. Проблема моделирования персон заключается в том, что у нескольких демографических групп может быть одна и та же мотивация. В более современном подходе Jobs to Be Done (см. главу 7) на смену персонам приходят жизненные ситуации, в которых иногда оказываются совершенно разные люди.

Например, мотивация персоны «инвестор» присуща всем людям с потребностью сберечь и приумножить свои средства, вне зависимости от пола, возраста и семейного положения. Подробнее о разнице в подходах читайте в разделе, посвященном Jobs to Be Done.

Персоны: все.

Жизненная ситуация: человек сравнил все варианты и решил купить жилье у нас.

Job Story: я сравнил варианты и выбрал объект, так что теперь хочу видеть перед собой карточку квартиры, чтобы во время звонка мог верно передать описание интересующей квартиры.

Мастер-бренд – это компания-застройщик, саббренд – жилищный комплекс (ЖК) застройщика

Персоны: все.

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

Job Story: когда я только начинаю искать объекты недвижимости, я хочу сравнить между собой несколько квартир, чтобы позвонить насчет одной из них.

Персоны: «трудоголик»; «молодой родитель».

Жизненные ситуации: много времени уходит на дорогу до работы; много времени уходит на дорогу с ребенком до ближайшего парка или детской площадки.

Job Story 1: когда у меня уходит много времени на поездку до работы, я хочу видеть карту с расположением квартир, чтобы выбрать ближайшую к офису.

Job Story 2: когда у меня уходит много времени на дорогу до объекта детской инфраструктуры, я хочу видеть эти объекты на плане рядом с домом, чтобы выбрать квартиру, оптимальную по расположению.

Персоны: «инвестор»; «молодой родитель».

Жизненные ситуации: человек хочет вложить часть сбережений в квадратные метры; ребенок растет, и скоро ему понадобится отдельная комната.

Job Story 1: когда мне надо инвестировать в квартиру, я хочу видеть соотношение стоимости квартиры и эффективной площади, чтобы выбрать объект.

Job Story 2: когда ребенку нужна отдельная комната, я хочу видеть соотношение стоимости квартиры и планировку, чтобы выбрать объект.

Персоны: «молодой семьянин».

Жизненные ситуации: необходимо как можно быстрее съехать от родителей с минимальным бюджетом.

Job Story: когда нужно как можно быстрее съехать от родителей с минимальным бюджетом, нужен список действующих акций от застройщика, чтобы точно выбрать самое выгодное предложение.

Персоны: «пенсионер».

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

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

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