Создание продукта — это не только вопрос запуска.

Дело не в том, чтобы быть оригинальным.

Не в том, чтобы делать вещи стильными или красивыми.

И не в том, чтобы сделать их простыми в использовании.

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

Проектирование продукта — это создание того, что продается.

Ведь именно для этого продукты вообще существуют.

Эта мысль не нова. «Цель компании — создание клиента», — писал легендарный Питер Друкер в своей «Практике менеджмента»[1] больше 50 лет назад.

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

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

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

Как бы там ни было, я рад, что вы ее читаете.

Вы научитесь отсеивать все лишнее.

Научитесь создавать продукты, которые продаются.

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

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

Вероятно, причина в том, что способ создания успешного продукта — это важное конкурентное преимущество для любой компании, будь то Facebook, или LinkedIn, или крошечный стартап, о котором вы даже не слышали.

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

Так как создать продукт, который будет продаваться?

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

Помню, словно это было вчера, тот прилив дофамина, который я ощутил, работая над сервисом онлайн-видео в стартапе, проинвестированном венчурным фондом Kleiner Perkins.

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

Однако радость была недолгой. Мы достигли пика в 20 миллионов регистраций, после чего интерес пользователей иссяк, и в ноябре 2013 года продукт был закрыт.

Я задавался вопросом, почему это произошло. Как нам удалось убедить 20 миллионов человек подписаться на то, что им было не нужно? Что заставило нас поверить в то, что это был настоящий успех?

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

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

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

Эта книга написана для тех, кто хочет стать лучше в разработке цифровых продуктов.

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

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

Вы узнаете, как создаются и совершенствуются такие сервисы, как Medium, Twitter, Squarespace — и многие другие. Вы сможете изучить рабочие процессы и немедленно применить их в разработке своих проектов.

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

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

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

• Клиенты не понимают, как пользоваться продуктом, хотя команде это казалось «очевидным».

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

• Команда способна распознать «хороший дизайн», но склонна отвлекаться на мелкие детали, не уверена в правильности выбранного решения и забывает о главном: пользователь и его интересы важнее интерфейса.

Создание продукта — довольно запутанный процесс. Я постарался максимально упростить его, разложив на четыре основных этапа. Каждый из них лег в основу одной из глав этой книги (см. рис. П.1).

Рис. П.1. Модель создания продукта состоит всего из четырех этапов

1. Поиск и синтез идеи.

2. Разработка.

3. Тестирование и совершенствование.

4. Запуск[5], отслеживание реакции пользователей и снова запуск.

ПОИСК И СИНТЕЗ ИДЕИ

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

В главе 1 я расскажу об истоках проектирования цифровых продуктов. Вы познакомитесь с пионерами продуктового дизайна начала XX века: Лиллиан Гилбрет, Генри Дрейфусом и Нилом Макэлроем. Все они провели масштабные исследования клиентов и использовали полученные данные для создания выдающихся продуктов.

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

Следующий этап — проведение исследования и донесение его результатов до вашей команды. Вам нужно будет направить ее на правильный путь, поэтому в главе 3 я расскажу о том, как убедить людей поддержать вашу идею. Кто рядом с вами? Что они знают о найденной вами боли? Какие доказательства вы должны привести? Как организовать процесс обсуждения?

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

РАЗРАБОТКА

Не начинайте с логотипа. Не начинайте с разработки рекламного сайта. Начните с создания интерфейса продукта.

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

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

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

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

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

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

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

ТЕСТИРОВАНИЕ И СОВЕРШЕНСТВОВАНИЕ

Создание продукта — это долгий путь усовершенствований перед каждым релизом. Их источником должна служить обратная связь, поступающая со всех уровней — от вашей команды, семьи, бета-тестеров и даже от клиентов. В главе 8 пойдет речь о том, как ее собирать и интерпретировать, причем я расскажу и о положительных, и об отрицательных отзывах. Я хочу, чтобы вы научились, как на ранних этапах распознать, что вы создаете «неправильный» продукт, и поняли, какую роль в его совершенствовании играет обратная связь.

ЗАПУСК, ОТСЛЕЖИВАНИЕ РЕАКЦИИ ПОЛЬЗОВАТЕЛЕЙ И СНОВА ЗАПУСК

Как понять, что продукт готов? Как подготовиться к его запуску? Глава 9 рассказывает о том, насколько важными на этом этапе становятся любые мелочи. Вы владелец своего продукта. В любой момент времени вы должны знать, как он работает, в каком состоянии находится, какие существуют проблемы и что нужно делать дальше. И его запуском ваша ответственность не ограничивается.

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

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

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

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

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

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

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

Во-вторых, раздел «Сделайте прямо сейчас», где я расскажу, что можно использовать в своем процессе.

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

Что дальше?

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

Итак, начнем.

• Подход к работе над продуктом — это конкурентное преимущество для любой компании.

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

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

• Разработка продукта состоит из четырех этапов: поиск и синтез идеи, разработка, тестирование и совершенствование, запуск, отслеживание реакции пользователей и снова запуск.

Прочитайте следующую главу!

«Что такое продуктовый дизайн?»

«Чем занимается продуктовый дизайнер?»

«В чем разница между продуктовым дизайнером и менеджером продукта?»

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

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

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

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

Пять лет. Три продукта. 10 миллионов долларов.

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

Я полагал, что в стартапе так и должно быть.

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

И мы зашли в тупик.

Что мы делали не так?

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

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

Как и вся индустрия, мы хотели добиться успеха, учась на ошибках. Но о провалившихся стартапах было слишком мало информации. Успеха добивались единичные, редкие, как единорог, продукты. Бизнес-консультанты и блоги о стартапах и технологиях были заложниками «ошибки выживших»[6].

Поразительно, но, по нашим данным, за последние 20 лет 62 из 100 венчурных фондов так и не вышли на точку окупаемости[7]. Хуже того, годовой доход лишь 20 из 100 фондов превышал 3 процента!

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

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

Итак, я решил изучить, как создавались успешные продукты. И в процессе исследования я понял, что наша способность как дизайнеров создавать прекрасные, очевидные и даже, черт побери, «виральные»[8] приложения, которые немедленно должны были завоевать популярность, никак не влияла на то, как на самом деле будет работать продукт. Что знали создатели Facebook и чего не знали мы? Почему Dropbox добился успеха, несмотря на обилие конкурентов? Как Basecamp умудрился уцелеть с 1999 года?

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

Рис. 1.1. Мобильные телефоны завоевали рынок быстрее кондиционеров (Источник: New York Times)[9]

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

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

Практика создания необходимых потребителям продуктов не возникла из ниоткуда. Ей уже сотни лет, она объединила опыт множества людей.

Хотите создать продукт будущего? Тогда вам стоит лучше изучить историю дизайна.

Что, если я скажу вам, что мы можем проследить историю появления инновационных, человекоориентированных продуктов начиная с 1920-х годов, когда не умеющая готовить женщина создала современную кухню?

Позвольте мне перенести вас в прошлое.

ЛИЛЛИАН И ФРЭНК ГИЛБРЕТ. РЕВОЛЮЦИЯ КАК РЕЗУЛЬТАТ НАБЛЮДЕНИЯ

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

«Изучение движений», как называли свой метод Гилбреты, давало возможность при замедленном воспроизведении киносъемки детально проанализировать процесс работы[10].

Благодаря лампочкам, закрепленным на каждом пальце испытуемого, камера могла точно фиксировать траектории движений, которые он производил в процессе работы (рис. 1.2)[11].

Рис. 1.2. Пример исследования Гилбретов. Придуманная ими технология позволяла изучать движения рабочего с целью повышения производительности его труда

Зачем? Чтобы повысить эффективность и производительность труда.

Гилбреты смогли выявить и описать 17 базовых, наиболее часто повторяющихся движений. Эти движения они назвали терблигами («Гилбрет» наоборот). Для их обозначения они использовали иероглифоподобные символы (рис. 1.3)[12].

Рис. 1.3. В процессе исследования Гилбреты обозначили каждое движение, которое выполнял рабочий, определенным символом

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

Но эта работа была лишь частью большего плана. После смерти Фрэнка в 1924 году Лиллиан обратила внимание на кухню — как на недооцененную часть дома. Она рассматривала домашнюю работу как «неоплачиваемый труд», который можно было оптимизировать.

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

Неважно, что сама Лиллиан не умела готовить. Наблюдая за тем, как женщины работают на кухне, она выделяла неэффективные этапы приготовления пищи и могла предложить альтернативы. Одно из ранних исследований, проведенное Herald Tribune, показало, что расположение предметов на кухне, предложенное Лиллиан Гилберт, сократило число рабочих этапов с 281 до 45[13].

Та кухня, которую вы сейчас используете для приготовления еды, большей частью основана на этнографических исследованиях Лиллиан Гилбрет. Она навсегда изменила ее дизайн. Рассматривая кухню в качестве рабочего пространства, которое может быть оптимизировано, Лиллиан разработала, в частности, концепцию «рабочего треугольника»[14], которая и по сей день используется для эффективной ее организации[15].

ГЕНРИ ДРЕЙФУС. СОЗДАНИЕ ЧЕЛОВЕКООРИЕНТИРОВАННОГО ДИЗАЙНА

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

Дрейфус завоевал известность в 1930-е годы. С позиции целей и намерений его можно считать Стивом Джобсом первой половины XX века.

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

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

Именно эта мысль лежит в основе многих продуктов XX века. Телефон Bell 302. Круглый термостат Honeywell T87. Фотоаппарат Polaroid Model 100[17].

Например, телефон Bell 302, выпущенный в 1937 году, имел революционный дизайн, учитывавший то, как потребители будут его использовать, как они будут держать трубку. Это один из знаменитых примеров дизайна начала XX века, завоевавший огромную популярность благодаря сериалу «Я люблю Люси» (рис. 1.4)[18].

Рис. 1.4. Тщательные наблюдения позволили Генри Дрейфусу спроектировать знаменитый телефон Люси и бесчисленное множество других продуктов

Дрейфус считал, что хороший дизайн способен увеличить прибыль компании. Он одним из первых начал предлагать своим потенциальным клиентам «рассматривать объект с точки зрения пользователя и создавать не просто более привлекательный, но и лучший продукт»[19].

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

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

Он писал: «В деле отслеживания покупательских настроений ничто не способно заменить прямые исследования»[20].

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

Ярким примером такого продукта был Chrysler Airflow 1936 года. Автомобиль, на производство и рекламу которого были потрачены миллионы долларов, несмотря на все затраченные ресурсы, стал провалом для компании, поскольку «не соответствовал вкусам и ожиданиям общественности»[21].

Больше всего Дрейфус верил в то, что его кропотливые исследования помогут создать товары, которые «дадут людям безопасность, удобство, которые люди захотят купить и которые сделают их счастливее»[22].

НИЛ МАКЭЛРОЙ. ПОЯВЛЕНИЕ «БРЕНД-МЕНЕДЖЕРА»

Историю продуктового дизайна продолжает напечатанный в 1931 году на машинке документ. Его автором был менеджер по рекламе Procter & Gamble Нил Макэлрой — будущий министр обороны в администрации Эйзенхауэра и основатель NASA.

Май 1931 года. Цинциннати, Огайо. Нил Макэлрой отвечал за рост продаж мыла Camay. Дела шли не слишком хорошо, и Camay находилось в тени Ivory — другой марки P&G.

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

И тогда он сел за печатную машинку и напечатал тот знаменитый документ, в котором предложил концепцию «бренд-менеджера» и который и в наши дни продолжает определять работу во всех отраслях (рис. 1.5)[23].

Рис. 1.5. Записка Нила Макэлроя о бренд-менеджере, 1931 год

Для своего времени бренд-менеджер был инновационной идеей. В компаниях, подобных P&G, люди выполняли определенные функции, например занимались продажами, исследованиями или администрированием[24].

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

Кроме того, он должен был выходить «в поле», собирать результаты применения этих методов и на их основе усовершенствовать работу всей группы[25].

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

Вскоре P&G реорганизовала компанию с учетом новой роли бренд-менеджера. Конкуренты по всему миру скопировали ее действия.

Как и работы Лиллиан Гилбрет и Генри Дрейфуса, служебная записка Макэлроя о бренд-менеджере оказала сильное влияние на продуктовый дизайн. Он не мог предвидеть, что его идея станет эталоном продакт-менеджмента в индустрии ПО. Тем не менее именно бывший менеджер P&G Скотт Кук использовал идеи Макэлроя для разработки программного обеспечения. В 1981 году он основал компанию Intuit. Возможно, вы слышали об их продукте Quicken.

СКОТТ КУК. БРЕНД-МЕНЕДЖЕРЫ В ОТРАСЛИ ВЫСОКИХ ТЕХНОЛОГИЙ

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

Скотт Кук одним из первых применил принципы бренд-менеджмента в технологической компании. Работая в P&G, он понял, что для того, чтобы продукт удовлетворял потребности покупателей на протяжении всего жизненного цикла, нужно знать, что им необходимо. Изучение потребностей позволяло ему детально разобраться в процессе разработки продукта[26].

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

Кроме того, в каждую коробку Quicken была вложена карточка для отзывов. Кук также требовал, чтобы каждый сотрудник отвечал на звонки пользователей «четыре часа в месяц и двенадцать часов в течение месяца после запуска нового продукта»[27].

И наконец, он сделал так, что менеджеры продукта следили за продажами своего продукта и «всеми аспектами построения бизнеса… представляли свой продукт и использовали мнение покупателей не только для его усовершенствования и развития маркетинговых коммуникаций, но и для технической поддержки»[28].

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

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

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

И это не совпадение. Сегодня новые продукты терпят крах еще быстрее и без человекоориентированного подхода успех невозможен.

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

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

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

«Факты лучше грез» — так звучит знаменитое высказывание Уинстона Черчилля.

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

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

Черчилль был настолько обеспокоен тем, что подчиненные побоятся доставлять ему плохие новости во время войны, что сформировал подразделение, выведенное из обычной вертикали управления, — Центральное статистическое бюро. В чем заключалась его задача? Передавать безжалостные, не отретушированные новости и факты о ходе военных действий.

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

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

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

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

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

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

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

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

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

И если внимательно читать между строк, то можно заметить, что именно эти принципы породили волну успешных современных цифровых продуктов, таких как Dropbox, Product Hunt и многих новинок Apple.

Dropbox

Dropbox, созданный Дрю Хьюстоном, в течение нескольких лет называли выдающимся примером «продукта с минимальным функционалом». История его появления гласит, что Дрю не удавалось собрать деньги для реализации своей идеи создания сервиса для синхронизации файлов. И тогда он поступил так, как поступил бы любой амбициозный предприниматель в 2008 году: записал видео и разместил его в онлайн-сообществах.

Видео моментально стало хитом и обеспечило посадочной странице сайта 70 тысяч новых email-подписчиков (рис. 1.6)[30].

Рис. 1.6. Первоначальная посадочная страница Dropbox

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

Например, он привлек внимание аудитории, наполнив видео шутками, которые понимали только участники онлайн-тусовок.

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

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

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

К счастью для нас, дискуссия на Reddit, возникшая в ответ на видео Дрю, до сих пор открыта.

Ответы участников служат живым свидетельством того, что продукт и его подача привлекли их внимание.

«Apple? Ты слушаешь? Вот как должен был работать iDisk. Твои убогие попытки — это сплошное разочарование».

«Так много ссылок на /b/ и teh interwebz, я даже все сосчитать не могу…:О».

«Моя бабушка — повелительница упертых! Она просто загружает разделы в файл, используя “dd”, а потом с помощью “strings” ищет то, что ей нужно. Но ей все-таки приходится использовать “grep”! Дикая женщина!»

Какие выводы сделал Дрю? Самый большой риск при создании продукта — «сделать то, что никому не нужно» (рис. 1.7)[31]. Чтобы найти клиентов, нужно знать, «где тусит [ваша] целевая аудитория, и разговаривать с ней на ее языке».

Рис. 1.7. Слайд из презентации Дрю Хьюстона

Apple

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

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

Когда речь идет об Apple, легко впасть в заблуждение, наслушавшись небылиц о перфекционистских истериках или поведении, находящемся на грани обсессивно-компульсивного расстройства. (Например, поговаривали, что Стив Джобс однажды распорядился доставить мрамор, предназначенный для отделки пола в магазине Apple Store в Нью-Йорке, в офис в Калифорнии, чтобы изучить его текстуру[32].) Такие легенды мешают посмотреть фактам в лицо: Apple создает продукты, не расспрашивая людей, чего они хотят, а отмечая, как они себя ведут, и предполагая, как можно изменить их жизнь.

«Мы не исследуем рынок, — как известно, сказал однажды Джобс. — Вы не можете просто пойти и спросить у людей, к примеру, что будет следующим хитовым продуктом»[33]. Мы часто неправильно трактуем эту цитату, полагая, что в Apple при выборе новых идей полностью доверяют собственному чутью и утонченному вкусу. На самом деле Джобс говорил о том, что невозможно понять, как приносить пользу клиентам, расспрашивая их об этом, это можно сделать, только наблюдая за ними.

Джобса направляли его «собственные исследования и интуиция, а не фокус-группы»[34]. Никто из нас не является и никогда не станет Стивом Джобсом, но мы можем учиться на его примере. Джобс не раздавал подарочные карточки Starbucks и не собирал людей за столом, чтобы выяснить их мнение и получить обратную связь. Он не рассылал электронные опросы, чтобы узнать, какие идеи внедрить следующими. Он анализировал то, как люди использовали технологии, изучал, что доставляло им радость, и особенно хорошо понимал, что выводило их из себя.

Подобный подход можно увидеть и у других представителей Apple. Митч Штейн, директор отдела технологий пользовательского интерфейса Apple в 1990-х годах и автор словосочетания «пользовательский интерфейс», описывал схожий процесс[35]:

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

Time Machine, первый iPhone и iPhone 6 — вот три убедительных примера исследования через наблюдение от Apple в действии.

Time Machine

Приложение Time Machine от Apple — один из тех продуктов, которые часто не замечают среди прочей продукции этого гиганта. Оно неяркое, оно внедрено в настольную операционную систему и о нем вспоминают только тогда, когда оно реально необходимо.

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

Стив Джобс представил Time Machine в 2008 году вместе с ОС X Leopard[36]. Его представление выглядело так (рис. 1.8):

Рис. 1.8. Стив Джобс представляет Time Machine от Apple в 2008 году

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

Все мы — ходячие бомбы замедленного действия, которые вот-вот рванут, в том смысле, что что-то пойдет не так и какая-то информация пропадет. Мы случайно сотрем ее. Или еще хуже.

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

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

Time Machine была представлена в каждой ОС X, начиная с ее выпуска в 2008 году, она вдохновила появление таких продуктов, как резервное копирование iCloud и iCloud Photo Library.

iPhone

У нас у всех были мобильные телефоны. Мы просто ненавидели их, они были ужасны в использовании. Программное обеспечение у них отвратительное. Аппаратная часть тоже не слишком хороша. Мы говорили с друзьями, и они тоже ненавидели свои мобильники. Было ощущение, что все ненавидели свои телефоны[37].

Можно говорить о беседах с «друзьями» и родными, но Apple не просила своих клиентов представить ОС X на мобильном телефоне. В своем интервью Джобс рассказал, что решение создать iPhone можно представить в виде следующей простой схемы[38]:

«Что мы ненавидим? (Наши мобильные телефоны.) Что мы можем сделать с помощью технологий? (Телефон с Mac ОС внутри.) Что мы хотели бы получить? (Вы угадали, это iPhone.)»

iPhone 6 и 6 Plus

Перенесемся в 2014 год. Мир выглядит совсем иначе, нежели в 2007 году, когда вышел первый iPhone. Ведущим форм-фактором в сфере мобильных телефонов стали большие экраны. Но, во многом к досаде покупателей iPhone, при выпуске iPhone 5 в 2012 году Apple упорно продолжала держаться за диагональ 4 дюйма.

Однако Apple прислушивалась — об этом говорила просочившаяся в прессу презентация отдела продаж. «Потребители хотят то, чего у нас нет» — так называлась страница из презентации (рис. 1.9 и 1.10).

Рис. 1.9. Просочившаяся в прессу презентация Apple, обосновывающая актуальность телефонов с большими экранами

Рис. 1.10. Презентация Apple, описывающая ситуацию, в которой оказался iPhone

И действительно, темпы роста продаж замедлялись. Самым высоким спросом пользовались телефоны с большими экранами, которые стоили дешевле.

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

Всего год спустя Apple преобразовала всю линию iPhone. Модели 6 и 6 Plus имели экраны с диагоналями 4,7’’ и 5,5’’ соответственно — почти на дюйм больше, чем у iPhone 5.

Что в итоге? После запуска iPhone 6 Apple получила самую большую прибыль в корпоративной истории. Поквартальный рост продаж iPhone на 57% (продано 74,5 миллиона телефонов). И первое снижение продаж Android (рис. 1.11)[39].

Рис. 1.11. Продажи Apple после выпуска iPhone 6 и 6 Plus

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

Он пишет:

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

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

Сегодня их гаджеты красивы, но для многих из нас слишком сложны. Шрифты приятны глазу, но их тяжело читать. Принцип «очевидности» утрачен. Во многих случаях единственный способ узнать, что делать, — это выучить последовательность действий наизусть[40].

Product Hunt

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

Так как возникла идея Product Hunt? Люди на форумах и в социальных сетях снова и снова спрашивали мнение Райана Гувера о новых продуктах[41]. Информация была разрозненной, и ему приходилось штудировать такие сайты, как Reddit, Hacker News, TechCrunch и Twitter, чтобы найти новости и дискуссии, которые были ему нужны.

Райан понял, что другие люди сталкиваются с такой же проблемой[42]. Любителям новинок вроде него приходилось тратить по несколько часов в день, просматривая эти сайты.

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

«Какими клевыми новыми штуками вы пользуетесь?» Мы все задаем этот вопрос. Это типичная затравка для беседы, особенно в среде стартаперов. Я один из поклонников этой темы. Обожаю рассказывать о новых продуктах, разбирать дизайн и обмениваться своими открытиями с умными ребятами. Но эти беседы — нечто большее, чем развлечение. Это отличная возможность чему-то научиться. Создателям продуктов крайне важно понимать их положительные и отрицательные качества.

Райан Гувер запустил раннюю версию Product Hunt в виде простой электронной рассылки. Он нашел людей, которые, как он знал, ее оценят.

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

Через год Product Hunt объявила о том, что получила 6,1 миллиона долларов инвестиций серии «А» от Andreessen Horowitz[44]^, [45].

Как несколько старых историй помогут оборвать бесконечный цикл создания одинаковых продуктов?

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

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

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

Готовы? Тогда продолжим.

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

• Мы можем проследить, как над дизайном продуктов работали наши предшественники: Лиллиан Гилбрет, Генри Дрейфус, Нил Макэлрой, Скотт Кук. Каждый из них изучал поведение пользователей, чтобы затем использовать полученную информацию для совершенствования своих продуктов.

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

• Dropbox, Apple и Product Hunt — компании, которые демонстрируют глубокое понимание своей целевой аудитории. Они тщательно разрабатывают продукты, которые этой аудитории подходят.

• Потратьте немного времени и изучите подробнее истории Лиллиан Гилбрет, Генри Дрейфуса, Нила Макэлроя и Скотта Кука. Почитайте их работы. Исследуйте их методы. Посмотрите на продукты, которые они создали.

• Когда Apple будет запускать следующий продукт, обратите внимание на то, как его позиционируют. Откуда берут информацию? Какие данные приводят во время презентации? Учитесь читать между строк — и вы усвоите важный урок о ценности исследований.

• Для того чтобы понять разницу между наблюдением за людьми и опросами о том, что они думают, советую ознакомиться с противоречивой историей работы антрополога Маргарет Мид «Взросление на Самоа».

Вы предложили своевременное и вдумчивое описание, которое должно было стать «рабочим определением» продуктового дизайна. Что заставило вас начать исследовать новую область и что вы узнали на этом пути?

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

Мне казалось, что есть нечто, что отличает мое представление о продуктовом дизайне от представления моих коллег-дизайнеров. Статья всего лишь упорядочила процесс.

«А если мы запустим продукт, а никто не захочет его покупать?»

Именно эти слова убедили меня записаться на курс «30×500», где студентов обучают, как создавать и продавать свои первые продукты. Это решение перевернуло мою жизнь.

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

Я действительно хочу похвалить подход «30×500», потому что он заставляет дизайнеров обращаться непосредственно к причинам, по которым продукт должен существовать и находить клиента.

Помните слова Питера Друкера: «Цель компании — создание клиента»? И как часто мы об этом забываем. А именно здесь кроется причина столь частых в наши дни провалов технологических продуктов.

Эми Хой и Алекс Хиллман открыли тренинг «30×500», чтобы бороться с явлением, которое они называют «эго-разработками», или попытками представить продукт или идею уникальной лишь потому, что ее создали вы.

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

В 2011 году программа курса продемонстрировала впечатляющую статистику. Студенты, которые ни разу прежде не создавали собственных продуктов, пройдя тренинг «30×500», всего за несколько месяцев зарабатывали десятки тысяч долларов. Увеличение выручки других новобранцев измерялось пятизначными суммами. За время курса совокупный объем продаж составил более двух миллионов долларов, и это несмотря на то, что обучение длится совсем недолго.

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

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

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

Методика, на которой основывается курс «30×500», бросает вызов распространенным суждениям и популярным терминам технологической сферы. В культуре стартапов глубоко пустили корни такие понятия, как «признание потребителем», «минимально жизнеспособный продукт» и «пивот». Но, несмотря на приток капитала и специалистов в эту отрасль, стартапы продолжают умирать[47], а коммерческий успех таких предприятий, как Facebook, LinkedIn или Airbnb, все еще большая редкость[48]. Легкие деньги огромным потоком текут в интернет-сектор, и тем не менее именно к этой сфере принадлежат 70% провальных предприятий.

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

Но это убеждение изначально ошибочно, так как оно предполагает:

• Что вы способны забыть о своем эго и задать правильные вопросы в правильное время правильным людям.

• Что ваши клиенты достаточно рациональны и хорошо осознают свои привычки, понимают, что их беспокоит, и способны четко описать, что сделает их счастливыми.

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

Хиллман сравнивает такой подход с наблюдением за львами в зоопарке и в дикой природе:

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

Нельзя делать выводы о поведении БОЛЬШИНСТВА львов, просто сходив в зоопарк, потому что БОЛЬШИНСТВО львов не живут в зоопарках[49].

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

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

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

КАК ИСКАТЬ ИДЕИ ДЛЯ ПРОДУКТОВ ВМЕСТЕ С «САФАРИ ПРОДАЖ»

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

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

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

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

Хой продолжает:

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

Уникальная черта «сафари продаж» в том, что оно происходит только онлайн. Для этого есть несколько причин.

Доступность

Вы можете связаться с любым уникальным сообществом, существующим на Земле, не вставая со своего кресла.

Скорость

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

Надежное документирование

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

Время для анализа

Как говорит один из авторов курса «30×500», сетевое наблюдение позволяет «разделить то, что говорит человек, и то, как вы интерпретируете его слова».

Дистанция

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

Перспектива

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

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

В 1928 году Маргарет Мид закончила работу над своей книгой Coming of Age in Samoa («Взросление на Самоа»), посвященную жизни девочек-подростков.

Мид жила в самоанской деревне, сама расспрашивала местных жителей и записывала их истории. Однако, как выяснилось позже, многие из рассказов были выдумкой. Мид не наблюдала за поведением подростков, а принимала их рассказы на веру[50]. Через несколько лет антрополог Дерек Фримен приехал в ту же деревню, и уже повзрослевшие к тому времени собеседницы Мид признались ему, что придумывали истории в качестве развлечения[51].

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

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

«Люди стараются не рассказывать о своих проблемах, так как не верят, что их можно решить, — говорит Хой. — Вам нужно лишь напомнить им, что решение существует. “Послушай, кажется, у тебя проблема. Это тяжело, но мы можем разобраться с ней вместе”».

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

Используя современные сетевые инструменты и метод «сафари продаж», вы сможете начать распознавать паттерны, существующие у вашей аудитории.

«Если человек выходит в интернет с вопросом, как ему решить свою проблему, это означает, что он испытывает очень сильную боль, — говорит Хиллман, — пускай даже она кажется вам незначительной. Вы можете подумать: “Ой, это же так просто. Вот что надо сделать”. Здорово, что вы нашли решение, но, очевидно, все не так уж и легко. Иначе люди не обращались бы за помощью».

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

«Сафари продаж» — это полномасштабное исследование. Вам придется потратить на анализ своей аудитории не несколько часов, а десятки и сотни часов.

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

Затем следует этап, который Хой называет пристальным изучением. Это исследовательская техника, направленная на выявление нескольких слоев смысла в тексте. Пристально изучая, вы фокусируетесь на том, как именно пишет человек, как он смотрит на мир и чем аргументирует свою точку зрения[52].

При этом ваша цель — не литературный анализ, а понимание, что именно нужно человеку.

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

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

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

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

Вот что говорит об этом Эми Хой:

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

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

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

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

Эми Хой говорит об этом так:

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

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

ПРОЧУВСТВОВАТЬ БОЛЬ

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

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

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

Обратите внимание на следующие характеристики матрицы боли:

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

• Вертикальная ось показывает частоту возникновения боли. Как часто она упоминается в данных ваших исследований?

Распределив результаты исследования по матрице, вы получите четыре квадрата.

Верхний правый

Частая сильная боль. Если ваш продукт поможет аудитории справиться с проблемами, входящими в этот квадрат, он принесет ей максимум удовлетворения.

Нижний правый

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

Верхний левый

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

Нижний левый

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

Каждому из четырех квадратов соответствует свой тип боли и проблем.

Верхний правый

Ненависть, страх, тревога, подавленность, ощущение собственной глупости, неспособность двигаться вперед, пустая трата времени

Нижний правый

Прокрастинация, сомнения в себе, чувство вины

Верхний левый

Раздражение и неприязнь

Нижний левый

Скука

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

Эту цитату Дрейфуса вполне можно было бы принять за высказывание о современном дизайне цифровых продуктов.

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

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

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

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

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

«Что я помогаю людям сделать, достичь, почувствовать? — задается вопросом Кайл Брэггер, один из основателей сайта о фотографии Exposure. — Для меня подобные вопросы куда важнее, чем “Как продукт выглядит? Какие у него характеристики? Насколько он эстетичен?” и так далее. До тех пор, пока я не выяснил, для кого я работаю и что создаю, детали не имеют значения».

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

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

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

Давайте их рассмотрим.

• Продуктовый дизайн — это процесс, который предполагает глубокое понимание аудитории. До того как вы начнете работу над продуктом, вам придется провести ее комплексное исследование.

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

• Матрица боли позволяет лучше разобраться в полученных результатах.

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

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

• Для кого существует ваш продукт?

• Где ваши будущие клиенты встречаются в сети?

• Что вы знаете о них? Можете ли вы узнать о них больше, изучив форумы, отзывы в AppStore или письма в службу поддержки?

• Распределите их проблемы по матрице боли и сравните с задачами своего продукта. Как они соотносятся? Чего не хватает вашему продукту?

Что такое «30×500» и «сафари продаж»?

Эми: «30×500» — это курс для творческих людей, который ведем мы с Алексом. Наши студенты учатся создавать и продавать собственные продукты, потому что работать по найму, разрабатывая продукты для кого-то другого, очень отличается от прямых продаж. Работая на кого-то, человек остается изолированным от реалий рынка. Он не понимает, чего на самом деле хотят люди, за исключением его руководителя.

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

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

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

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

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

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

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

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

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

Вы даже представить себе не можете, сколько наших друзей и студентов (на первых порах) приходили к нам и говорили: «Я все понял! У моего любимого бара / ресторана / салона красоты проблемы с записью клиентов — я должен сделать для него программу». Они думают, что выявили проблему, но при этом совершенно не представляют, как работает салон красоты. Они не понимают, что эти люди пользуются старой бумажной системой записи просто потому, что вообще не готовы покупать ПО. Если бы они использовали ПО, у них бы вообще не было такой проблемы.

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

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

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

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

Давайте сыграем в игру.

Как вы думаете, сколько человек в командах, которые работают над следующими продуктами или функционалами?

• iMovie и iPhoto компании Apple

• Twitter

• Instagram

• Spotify

Подсказка: их меньше, чем вы думаете.

• iMovie и iPhoto компании Apple: 3 и 5 человек соответственно[59]

• Twitter: 5–7[60]

• Instagram: 13 на момент, когда его купил Facebook за 1 миллиард долларов[61]

• Spotify: 8[62]

Известно, что команда, которая сделала первые прототипы iPhone, была «шокирующе маленькой»[63]. Даже дизайн-студия Джони Айва в компании Apple, воплощавшая промышленный дизайн всех продуктов компании, в том числе iOS 7, насчитывала всего 19 человек[64]. Можно предположить, что эта группа была разбита на более мелкие, каждая из которых работала над отдельным проектом.

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

Джефф Безос, основатель Amazon.com, придумал отличное название для таких команд: «команда на две пиццы»[65]. То есть если команду нельзя накормить двумя пиццами, она уже слишком большая. В реальной жизни это означает, что идеальный размер команды — примерно шесть человек. Изначально эта концепция была задумана как инструмент децентрализации и даже дезорганизации компании, где независимость идей была бы важнее группового мышления. Исследования показывают, что команды такого размера менее склонны к излишней самоуверенности, испытывают меньше проблем в общении и не затягивают выполнение задач.

Ричард Хакман — профессор Гарвардского университета, изучавший психологию организаций, выяснил, что «чем больше группа, тем больше возникает проблем с взаимодействием между ее участниками в процессе коллективной работы… более того, чем больше группа, тем более уязвимой она становится к подобным сложностям»[66].

Хакман определил «проблемы с процессами» как связи — или каналы коммуникации — между членами группы.

С ростом числа членов группы число связей между ними растет экспоненциально. Используя формулу n × (n — 1) / 2, где n — размер группы, Хакман подсчитал, что число связей в группе очень быстро становится труднореализуемым (рис. 3.1).

Рис. 3.1. Чем больше размер группы, тем больше «проблем с процессами» в ней возникает. Это требует дополнительных каналов коммуникации и может замедлить принятие решений[67]

Несмотря на то что в школе я не любил математику, я хотел бы вместе с вами решить несколько задач на размер группы. Начнем с размера, рекомендованного Джеффом Безосом: шесть человек. (Предположим, что двух пицц хватит на шестерых, хотя я, бывало, съедал целую пиццу один!)

• Команда из шести человек имеет всего 15 каналов коммуникации.

• Увеличиваем эту цифру до 10 — и нам придется справляться уже с 45 каналами.

• Если мы возьмем команду вроде той, куда я каждый день хожу на работу, — это Tinder, 70 человек, — число связей возрастет до 2415.

Однако необходимость работать с большим числом связей — не единственная проблема больших команд.

Слишком большие группы слишком уверены в себе. Людям кажется, что они могут сделать все быстрее, они склонны «все больше недооценивать время, необходимое на выполнение задачи». В 2010 году ученые Пенсильванского университета, Университета Северной Каролины в Чапел-Хилл и Калифорнийского университета в Лос-Анджелесе, изучавшие организационное поведение, провели ряд исследований, подтверждающих это мнение[68]. В одном из экспериментов команды получили задание собрать конструкцию из набора лего. Команды из двух человек справились за 36 минут, тогда как командам из четырех человек потребовалось на 44 процента больше времени.

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

Это яркий пример того, почему правило двух пицц отлично работает.

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

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

Всем нравятся совещания по продукту. Особенно если это этап принятия решения о том, что именно предстоит создавать.

Даже Стиву Джобсу нравилось принимать участие в этом этапе. «Однажды он сказал мне, — говорит Гленн Рейд, бывший директор по разработке приложений для потребителей в Apple, — что одна из причин, по которым он хотел быть CEO, — то, что никто не мог ему запретить присутствовать при создании продукта»[69].

Ведите себя так, будто вы работаете вышибалой в известном берлинском клубе «Бергхайн»[70]^, [71]. (Подсказка: вряд ли у вас получится, если вы не говорите по-немецки. К тому же тамошний охранник Свен, «постапокалиптическая версия Вагнера», диктует такой дресс-код, который вряд ли кому-то удастся изменить.)

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

На этом этапе у вас уже должен быть список всех, кто будет работать в команде над созданием продукта. Например:

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

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

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

Итен Ша во время работы в KISSMetrics укомплектовывает такие команды…

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

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

ВЕЧЕРИНКА В СТИЛЕ ДЕВЯНОСТЫХ

Реджису Маккенна[72] есть что рассказать об этом процессе. В начале девяностых, когда он понял, насколько быстро технологии меняют мир, его — как и Нила Макэлроя из компании Procter & Gamble — осенило, что появилась необходимость в новой роли. Новый человек должен был стать «связующим звеном — как внутри компании, объединяя возможности технологий с потребностями рынка, так и вне ее, позволяя заказчику и компании совместно заниматься разработкой и усовершенствованием товаров и услуг»[73].

Если вы проскочили этот абзац, перечитайте его внимательно еще раз. Маккенна отвечал за запуск «визитных карточек» нашей эпохи — первый микропроцессор Intel, первый компьютер Apple и первый розничный магазин компьютеров The Byte Shop. И именно он рассказал историю о «легендарном стартапе в гараже», принесшую популярность компании Apple.

Вы перечитали цитату? Что-нибудь показалось вам знакомым?

Да это же он о вас говорит!

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

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

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

У Джоша Элмана (Greylock Partners, Zazzle, LinkedIn, Facebook, Twitter) есть отличный взгляд на эту часть процесса создания продукта:

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

Не забывайте о «матрице боли» (рис. 3.2). Что вы записали в правый верхний квадрат, где болит сильно и часто? Как вы создадите продукт мечты для заказчиков? Какие из их проблем способны решить только вы?

Рис. 3.2. Матрица боли — простой инструмент, который я создал для себя, чтобы значительно облегчить процесс анализа результатов исследования и получения выводов

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

Диогенис Брито, занимающий пост продуктового дизайнера в стартапе Slack, напоминает:

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

Другими словами: держите в уме актуальные, проверяемые, реальные горести и радости, о которых вы узнали в процессе исследования. Не поддавайтесь соблазну уйти в мечты и надежды. Запомните: выпустить минимально жизнеспособный продукт (MVP) на рынок только для того, чтобы что-то проверить, — это пустая трата времени, денег и таланта ваших специалистов.

Вы можете больше.

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

КОНЦЕНТРАЦИЯ ВНИМАНИЯ!

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

Заведите доску для записи идей. Она послужит сразу трем практическим целям.

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

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

• Лучшие идеи остаются, а те, что похуже, сами собой тонут. Это преимущество проистекает из естественной склонности группы забывать, кому принадлежит идея. Поэтому доска очень полезна, особенно если у группы много идей. Главное, не подписывать идеи: так вы не заденете ничьего самолюбия и не запустите механизм неприятия чужой разработки или механизм «придумано не нами». Технику «общего котла» (The Cauldron) использовали в Apple, где на совещании иногда присутствовал и Стив Джобс. Гленн Рейд, бывший директор по разработке приложений для потребителей в Apple, говорил: «Общий котел позволял нам сделать замечательный суп, сварить зелье — и неважно, где была чья идея. Ретроспектива показала, что очень важно было отделить идеи от их авторов. Если идея была хорошей — мы соглашались, если идея была плохой — она оседала на дно котла. Мы не помнили, кто что придумал, — это не имело никакого значения»[74].

Преимущество есть и у техник ограничения времени, как, например, та, которой воспользовались в онлайн-стартапе Medium. Берете группу нужных людей, формулируете проблему, которую необходимо решить, и — «у вас есть две минуты, чтобы записать все идеи, которые придут им в голову [насчет решения этой проблемы], — сказал мне директор по разработке и запуску продуктов Джейсон Стирман. — После этого у вас будет пять минут, чтобы записать идеи на доску и объяснить их. После этого — еще две минуты, чтобы дописать недостающие идеи… конечный результат — вы получаете максимально возможное количество идей. Мы так часто устраиваем мозговой штурм».

«ЗАДОМ НАПЕРЕД»

Есть еще одна мощная техника, которую используют в Amazon. Она известна как «задом наперед» (working backwards). Сначала владелец продукта должен написать предполагаемый пресс-релиз для будущего продукта, а также собрать придуманные цитаты из отзывов пользователей, часто задаваемые вопросы и рассказы покупателей о том, как они использовали продукт.

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

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

Вернер Фогелс, главный технический директор в Amazon, так объясняет этот процесс:

Формирование технических требований к продукту происходит «задом наперед»: мы начинаем с написания документов, которые понадобятся при запуске продукта (пресс-релиз, часто задаваемые вопросы), а на их основе разрабатываем документы, которые необходимы для практической реализации.

Формирование технических требований к продукту «задом наперед» позволяет увидеть концепцию целиком и четко понять, что именно мы собираемся «взять и сделать»[75].

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

Пресс-релиз

Для чего предназначен продукт и почему он создан.

Часто задаваемые вопросы

Вопросы, которые могут возникнуть после прочтения пресс-релиза.

Описание потребительского опыта

Описание того, что увидит и почувствует потребитель при использовании продукта, и соответствующие иллюстрации к этому описанию.

Руководство пользователя

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

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

Центральным элементом метода «задом наперед» выступает пресс-релиз. Этот документ объемом не более полутора страниц — путеводная звезда и краеугольный камень продукта, и иногда именно он может определять ход развития событий.

«У меня есть проверенное правило: если сложно написать пресс-релиз, скорее всего, и продукт выйдет отвратительный, — говорит Иан Макаллистер из Amazon. — Работайте над ним до тех пор, пока вы ясно не увидите идею каждого абзаца»[76].

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

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

Итак, как должен выглядеть пресс-релиз? Благодаря Макаллистеру у нас есть очень точное описание документа, который используют в Amazon на совещаниях по продукту:

1. Заголовок: название продукта. Поймет ли целевая аудитория значение названия? Захотят ли они узнать больше?

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

3. Описание: кратко опишите суть продукта и его преимущества. Макаллистер предостерегает: велика вероятность, что ваши покупатели дочитают только до этого места, так что «убедитесь, что этот абзац хорош».

4. Проблема: именно это вы и исследовали. Какую проблему решает ваш продукт? Какие нужды ваших покупателей удовлетворяет этот продукт?

5. Решение: как продукт решает проблемы покупателей наиболее безболезненным из возможных способов?

6. Цитата представителя компании.

7. Как начать: как покупатель может сделать первый шаг в новый мир — к вашему продукту? Опишите идеальный «первый шаг», который сразу же принесет выгоду покупателю.

8. Цитата покупателя: что скажет идеальный покупатель после того, как ваш продукт удовлетворит его потребности?

9. Подведение итогов, призыв к действию.

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

«После того как мы прошли через создание пресс-релиза, списка часто задаваемых вопросов, шаблонов и руководств пользователя, картина того, что именно мы собираемся сделать, удивительным образом становится намного яснее, — пишет Фогелс. — У нас появляется портфель документов, которые мы можем использовать для объяснения концепции продукта другим командам в Amazon. В этот момент мы уже знаем, что у каждого члена команды есть общее видение продукта, который является нашей целью».

СОЗДАНИЕ ИНСТРУКЦИИ ПО ПРОДУКТУ

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

Мне нравится подход Кэпа Уоткинса, вице-президента в Buzzfeed и бывшего старшего менеджера по дизайну продуктов в Etsy. По итогам совещания он предлагает создать «инструкцию по продукту»[77]:

После совещания по продукту запишите:

Что вы делаете.

Почему вы это делаете (какие проблемы пытаетесь решить).

Как вы поймете, что делаете это успешно (количественные и качественные показатели).

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

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

Еще до второго пришествия Стива Джобса в Apple появилось правило для любого проекта компании: «Назначить ответственного». Очень просто и очень эффективно. Впишите имя ответственного лица напротив задания на виду у всей компании и будьте уверены — он почувствует личную ответственность за проект[78].

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

Как выстроить контроль и управление? Как выиграть гонку со временем и сделать для клиентов по-настоящему ценный продукт?

Intercom — компания, специализирующаяся на удержании клиентов, определяет для своих продуктов еженедельные цели. «Совершенства можно достичь за 1000 маленьких шагов.

Мы всегда стараемся сделать то, что быстрее и легче приближает нас к цели. Все наши проекты разделены на множество маленьких независимых релизов, и каждый из них предлагает что-то ценное нашим клиентам»[79].

В AngelList Грэм Дженкинс одинаково требователен и к себе, и к своей команде — новый продукт нужно выпустить в кратчайшие сроки. «Мы всегда думаем о том, как закончить задание к вечеру — или к концу недели. Успеем ли мы до конца недели? Если нет, может, мы решаем не ту проблему?» Этот подход представляет собой скорее паутину из необходимостей, появляющихся в конкретный момент, чем жесткий набор дедлайнов.

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

Как бы ни обстояли дела в вашей команде, помните: вы — связующее звено. Будьте лидером. Становитесь на защиту потребителя. Не размахивайте руками впустую, не нужно лишней бравады.

Вы способны на большее. Вы талантливы. И наверняка выглядите лучше.

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

• Собирая команду, следует помнить о правиле двух пицц Джеффа Безоса: команда должна быть такого размера, чтобы ее можно было накормить двумя пиццами. Это означает, что идеальный размер команды — примерно шесть человек.

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

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

• Закончите совещание по продукту созданием основного документа, инструкции по продукту: в нем должно быть указано, что вы собираетесь создать, а также кто и за что несет ответственность.

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

• Подумайте, как ваш продукт может сделать пользователей счастливее. Он действительно приносит им радость? Вы действительно можете уменьшить их боль и удовлетворить их потребности?

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

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

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

Представьте, что вы современник проекта Macintosh.

1979 год. Диско. Брюки клеш. Все с нетерпением ждут, когда на экраны выйдет «Империя наносит ответный удар». Кризис с захватом заложников в Иране.

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

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

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

Джеф Раскин, один из авторов проекта Apple Macintosh, помог претворить этот технологический прорыв в жизнь, потому что верил, что компьютер может стать таким же простым в использовании устройством, как телевизор.

Раскин понимал, что модель Apple II слишком сложна для повседневного использования, и решил разработать основные принципы «простого в использовании» компьютера. В своей книге «Интерфейс»[81], опубликованной через два десятилетия после его ухода из проекта Macintosh, он переосмыслил и дополнил основные идеи об интерфейсе «человек — компьютер».

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

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

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

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

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

Сколько времени вам требуется на то, чтобы ввести слова в текстовом редакторе? А чтобы нарисовать квадраты, в которые вписаны слова, и провести стрелки?

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

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

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

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

Мне нравится, как эту идею сформулировал Джейсон Зимдарс, iOS-дизайнер Basecamp:

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

Как описать пользовательский интерфейс? В три этапа.

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

2. Для каждого экрана пользовательского сценария перечислить компоненты, необходимые для выполнения каждого шага. Формы? Кнопки? Данные? Перечень должен быть максимально подробным.

3. Написать текст интерфейса. Каким будет его заголовок? Контекст? Особенности речевого стиля? Следует ли отразить в тексте личностные особенности? Не используйте Lorem ipsum[83].

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

Что ж, у вас есть возможность узнать, что происходило в голове у Джоан Роулинг, когда она работала над «Гарри Поттером и Орденом Феникса». В 2010 году в интернете появилась составленная ею от руки таблица сюжетных линий. В столбцы внесены номера глав, временные рамки событий, ключевые моменты фабулы, второстепенные сюжетные линии и названия глав (рис. 4.1).

Рис. 4.1. Автор «Гарри Поттера» Джоан Роулинг использует написанную от руки матрицу, чтобы структурировать сюжеты своих романов

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

В итоговой версии книги многие элементы претерпели изменения. Так, в таблице профессора Амбридж зовут Эльвира, а не Долорес, а Орден Феникса и Отряд Дамблдора впоследствии обменялись названиями.

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

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

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

Схемы играют важную роль, поскольку клиенты не выполнят поставленную перед ними задачу с помощью одного экрана. Любой ваш продукт — от регистрации до съемки фото или просто кнопки «ОК» — будет оцениваться в зависимости от того, как экраны… да-да, следуют друг за другом.

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

• Требуется ли на этом этапе экран или можно ограничиться всплывающим окном?

• Нужна ли на этом этапе другая форма для заполнения или можно воспользоваться уже имеющимися данными с предыдущего экрана?

• Если речь идет о потенциально «опасном» сценарии для пользователя, требуется ли для данного действия двойное подтверждение?

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

• Где начинается взаимодействие: внутри самого продукта или после перехода с внешней страницы?

• Каковы ожидания пользователей? Ваши клиенты взаимодействуют с интерфейсом впервые? Они проявляют любопытство или ведут себя осторожно? Или ваши пользователи достаточно опытные и хотят выполнить задачу как можно быстрее?

• Какие решения принимают пользователи на каждом из экранов — и что за ними следует?

• Какую информацию вы должны предоставить пользователям?

• Какие данные должны ввести пользователи?

• Что произойдет, когда пользователи совершат правильные / неправильные действия? Что отображается на экране? Куда вы перенаправляете пользователей?

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

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

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

Например, сервис Snapchat известен тем, что первым экраном, который видит пользователь, служит камера. Каждый раз, когда кто-то запускает Snapchat, приложение открывает камеру. Все остальное — на втором плане: просмотр чужих фотографий, работа с настройками, добавление друзей. Все, что поощряет в первую очередь создание контента. Кроме того, формируются новые ожидания клиента, связанные с обменом фотографиями (рис. 4.2)[84].

Рис 4.2. Демонстрация возможностей Snapchat для бизнеса

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

Одна из самых уникальных методик, о которых я слышал — и которую активно использую сам, — была разработана Джоном Траутманом, сооснователем и главным креативным директором компании Canary. Canary разрабатывает и продает охранные системы и программное обеспечение, позволяющие не только увидеть, но и понять, что происходит у вас дома, где бы вы ни находились.

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

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

Это удобный способ работать в команде и сравнивать результаты составленных коллегами сценариев.

Мы использовали [пустые текстовые HTML-файлы] для работы с остальными членами команды, чтобы удостовериться, что мы хотим видеть этот контент на наших страницах. Как только мы добились правильного содержания, нам не составило труда превратить текст в HTML-прототип, при этом нам не пришлось его стилизовать. Затем мы провели проверку: переходили по ссылкам, чтобы убедиться в правильности и логичности последовательности действий и структурированности информации, и только после этого увеличили точность данных.

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

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

Сценарии призваны дать ответы на несколько вопросов:

• Какая последовательность действий позволяет клиентам решить свои задачи?

• Как они решат эти задачи?

• Что произойдет после?

• Есть ли потенциальные затруднения?

Как происходит взаимодействие? Рисунки? Диаграммы? Интеллект-карты?

Возможно, метод Траутмана вам не подходит из-за минималистичности или недостаточной визуализации.

Кейтлин Фридсон, работая менеджером продуктов для мобильных устройств в компании Care.com, использовала карты сценариев при обсуждении новых продуктов с продуктовыми дизайнерами и разработчиками (рис. 4.3).

Рис. 4.3. Карта сценариев, которую использовала Кейтлин Фридсон, работая над продуктом для Care.com

«Важно, чтобы информация быстро доходила до разработчиков, — говорит Фридсон. — Кроме того, необходимо как можно более тщательно проанализировать особенности продукта, этапы работы над ним, чтобы не выпустить полуфабрикат. Это позволяет избежать множество ошибок».

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

Разработчики учитывают, что будут действовать в границах определенного итерационного цикла. Например, в Care мы создавали сценарий платежей между физлицами. Мы знали, в какую систему мы интегрируемся и еще о 4–6 кейсах использования, над которыми нам предстоит работать. Мы дали нашим специалистам время на изучение и даже кодирование данных сценариев: интеграцию с API, тестирование и так далее. Помимо прочего, это позволило нам найти ответы на возможные вопросы, не прописанные в спецификации продукта.

Иными словами, Фридсон использует сценарии, чтобы разработчики мыслили более конкретно:

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

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

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

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

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

В работе над своими проектами я предпочитаю использовать метод Джоан Роулинг: набросать на листе бумаги текст и соединить его стрелками. Как и в случае с Брито, я делаю это прежде всего для себя. Это отличный способ организовать свои мысли и рассмотреть все возможные варианты развития событий. Вот, например, схема, которую я нарисовал, разрабатывая один из мобильных продуктов (рис. 4.4).

Рис. 4.4. Схема, которую я набросал, работая над одним из мобильных продуктов

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

Обратите внимание: в верхней части схемы я хотел отметить три преимущества, но на тот момент еще не определился с выбором, поэтому не стал останавливаться на них подробно.

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

Например, что, если вы выберете Instagram? А если Facebook? А если вы еще не зарегистрированы в Instagram или произойдет ошибка авторизации (рис. 4.5)?

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

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

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

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

Итак, мы рассмотрели картину в целом, но как насчет отдельных экранов?

Проработка особенностей каждого экрана — один из самых важных этапов в создании пользовательского интерфейса. Так, Джеф Раскин в «Интерфейсе» писал: «С точки зрения потребителя именно интерфейс является конечным продуктом».

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

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

Прежде всего, не бояться. Эрнесту Хемингуэю приписывают фразу: «Первый черновик — всегда дерьмо»[85].

Райан Шерф, продуктовый дизайнер компании Quirky, согласен с этим высказыванием. «Эскизы (скетчинг) — это суперважно. Не бывает плохих идей. Когда мы обдумываем варианты и отбрасываем некоторые из них, необходимо, чтобы вся команда понимала, что плохих идей не существует и что кто-то должен высказать идею первым, пусть даже она, как правило, оказывается самой худшей».

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

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

• Информация о пользователе (имя, возраст, биография, должность и т. д.)

• Элементы коммуникации, такие как список друзей, интересов или посещенных мест, которыми можно поделиться с другими людьми

• Фотографии, видео, иные мультимедиа

• Главные и второстепенные действия, которые может выполнить пользователь

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

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

Рис. 4.6. Перечень элементов интерфейса для каждого экрана

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

В реальном мире у вас есть массив данных для загрузки информации и ограничения по формату: рабочий стол, iPhone, Android и т. д. Какие основные элементы интерфейса вам необходимо сохранить? Что именно требуется для того, чтобы экран был идеальным?

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

В истории интернета можно найти превосходный пример первоначального концепта — это Twitter Джека Дорси (рис. 4.7)[86]. В 2006 году Дорси нарисовал компоненты интерфейса, которые легко узнаются и сегодня. Ему удалось определить ключевые элементы (какими бы очевидными они ни казались), соответствовавшие предназначению продукта.

Рис. 4.7. Один из набросков Джека Дорси, изображающий возможный вид экрана Twitter

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

Рис. 4.8. Twitter и спустя десять с лишним лет сохранил основные идеи первоначальных эскизов Дорси

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

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

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

Джон Траутман из Canary отметает любые попытки вставить на этом этапе текст-заполнитель вроде Lorem ipsum (и даже мой любимый Riker ipsum с цитатами капитана Райкера из «Звездного пути», как бы сильно того ни хотелось)[87]:

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

Кто использует ваш продукт? Пользователям удобно работать с ним на любом экране? Они знакомятся с вашим продуктом впервые или давно о нем знают? Они используют его бесплатно или за деньги?

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

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

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

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

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

Это главная страница? Форма регистрации? Раздел с настройками? Экран, который пользователь видит впервые? Политика доставки товара? Ответ на действие пользователя?

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

Хороший текст учитывает контекстные ограничения. Например, СМС должны быть вежливыми, а общий объем текста не должен превышать 160 символов[88].

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

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

Вы можете «Войти», а затем «Выйти»? Для перехода на новый экран нужно нажать «Продолжить» или «Вперед»? Подтверждение сопровождается кнопкой «ОК», «Отправить» или «Принять»? Базовые команды должны быть одинаковыми для всех экранов продукта.

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

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

Региональные особенности предъявляют к консистентности[89] свои требования. Существует разница между «ZIP-кодом» и «почтовым индексом», равно как и между штатом и областью. Обратите внимание, как отображаются даты: во многих странах сначала ставится день, а затем месяц.

Для различных культур характерны разные нормы. В Великобритании, например, могут счесть оскорбительным избыток восклицательных знаков. Кто же знает об этом? Знать — ваша работа.

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

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

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

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

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

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

• Подумайте о тональности текста. Должен ли он быть остроумным? Успокаивающим? Как это поможет продукту принести пользу клиентам?

• Скажите решительное «нет» Lorem ipsum (и даже моему любимому Riker ipsum»)!

Я хотел бы узнать, как строится процесс вашей работы над продуктом. Начинаете ли вы с создания эскизов? Какие инструменты используете?

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

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

В 1977 году, работая над «Звездными войнами», Джордж Лукас хотел сделать невозможное — снять сцену воздушного боя в открытом космосе.

Лукас говорил об этом так:

В то время последовательность кинокадров обычно представляли в виде раскадровки[94]. Но Лукас понимал: для того чтобы достать визуализацию нужных сцен из своей головы, нужно создать что-то более динамичное.

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

Кадр за кадром смонтированные сцены практически досконально дублировали события будущей киноленты. Например, в фильме «Звездные войны. Империя мечты» есть видеоряд, где «Сокол тысячелетия» улетает от «Звезды смерти» и параллельно с ним — черно-белые клипы, которые Лукас нарезал из военного фильма 1943 года «Военно-воздушные силы». Последовательность сцен, движение моделей на экране, реакции актеров — это практически доскональное цитирование.

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

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

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

Рис. 5.1. Примеры предварительной визуализации для сцен фильма «Железный человек — 3» (студия Westlawn Productions). Это те техники, которые помогли Джорджу Лукасу стать первооткрывателем цифровых технологий киноиндустрии в приквелах «Звездных войн». «Пре-визы» включают в себя диалог, музыку и видоизмененные звуковые эффекты, которые соответствуют смысловой нагрузке сцены. В фильме финальный видеоряд был максимально близким к пре-визу, но в нем были задействованы настоящие актеры, настоящий звуковой ряд и итоговые спецэффекты

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

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

Лукас говорил: «Вам нужно проработать видеочерновики, чтобы как редактору понимать, куда вы идете, насколько длинными будут сцены и работает ли это вообще, потому что фильм — абсолютно кинетическая материя… и в нем все должно рассматриваться в движении».

Затем Лукас брал рабочие сцены и соединял их в видеоряд, руководствуясь ранее составленным им наброском. С течением времени он перемонтировал видеоряд, снимал новые сцены, подгонял тайминг — и так до тех пор, пока все не складывалось в единую картину. После этого создавалась цифровая реконструкция, которую демонстрировали актерам (например, Юэну Макгрегору), параллельно с тем, как снимались их настоящие сцены.

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

«Я не смог бы [снимать эти фильмы] без превизуализации процесса», — комментировал Лукас.

Во время просмотра этого документального фильма меня захлестнула волна дежавю. Процесс казался мне донельзя знакомым. Параллель с разработкой продуктов была просто невероятной. Одностраничный набросок видеоряда Лукаса? Звучит очень похоже на сценарии, которые мы описывали в предыдущей главе. Черновые раскадровки и видеоряд, отснятый «в полях»? Это лукасовская вариация прототипирования.

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

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

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

Точность

Достаточно ли точно выбранный формат передает идеи вашего дизайна?

Имеющееся время

Сколько времени вы можете потратить на то, чтобы рассказать о сути своего решения?

Аудитория

Кто будет принимать ваши дизайнерские идеи? Есть ли у них все необходимое, чтобы их понять?

Комфорт

Насколько уверенно и комфортно вы себя чувствуете при использовании выбранных вами инструментов?

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

Кайл Браггер, соавтор Exposure[99] (инструмента для фотографов от студии программного обеспечения Elepath)[100], считает, что прототипирование — это «сделать что-то, что будет работать, и отполированное до той степени, что способно заставить мозг думать: «Ага, это продукт, я могу его использовать. Я могу повертеть его в руках и посмотреть, каков он в деле».

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

Почему это должно быть таким? Почему мы это так делаем? Вот самые важные вопросы. Они не про эстетику, не про модные фишки и навороты [или] самые последние тренды. «Зачем я это создаю? Для кого я это создаю? Какую проблему я решаю?»

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

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

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

При помощи игры в шарады? Я думаю, что кое-кто из вас прибегал к этим древностям. Сознаюсь: я тоже.

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

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

Статика, таким образом, не позволяет рассказать историю нашего продукта.

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

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

В знаменитой дизайн-компании IDEO есть поговорка, что если картинка стоит тысячи слов, то прототип стоит тысячи встреч[101].

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

Для меня было достаточно удивительно обнаружить, что темп в этом направлении задают большие компании. Оказалось, что такие гиганты, как Airbnb, Evernote, Facebook и Google, невероятно благосклонны к публике и без утайки показывают, как интегрируют прототипирование в свои рабочие процессы. Более того, они служат для нас полезным примером подобного поведения.

Попытки адаптации инструментов прототипирования к рукам продуктовых дизайнеров сегодня встречаются все чаще. Давайте начнем с очевидного: InVision[102]. Я не видел более простого, более демократичного инструмента, призванного помочь как дизайнерам, так и не-дизайнерам высвободить потоки идей, заключенные в их голове. Нарисованные от руки скетчи, каркасы и даже макеты любой точности можно сшить вместе с правдоподобными переходами, которые воспринимаются как свои, а затем передать результат члену команды, который сразу даст обратную связь.

«InVision — мой первый инструмент прототипирования, во многом потому, что он не только быстрый и простой в использовании, но также дает возможность сразу же поделиться полученными результатами, — говорит Поли Тинг, продуктовый дизайнер, который работал с клиентами из списка Fortune 500, крупными ретейлерами и мировыми автопроизводителями. — InVision не требует технических знаний, а значит, с ним могут работать люди без технического образования, то есть барьер для сотрудничества, вовлеченности в процесс дизайна довольно низкий. Это самый быстрый инструмент для создания практически совершенного опыта».

Apple Keynote и Microsoft Powerpoint также пожинают плоды успешного роста за счет прототипирования.

«Особо важную роль анимация играет в дизайне приложений. Например, я на скорую руку делал несколько анимаций с низкой детализацией, чтобы объяснить, что будет происходить, когда пользователь начнет нажимать на экран или перелистывать страницы, — комментирует Тимони Вест, ветеран продуктового дизайна из Flickr, Foursquare и Alphaworks, которой принадлежит сейчас его собственная студия дизайна Department of Design. — Чаще всего анимации используют вместе с раскадровкой, цепочкой экранов. К сожалению, Keynote все еще лучшее, что есть на этот момент. Я не знаю другого такого простого продукта, который позволял бы вырезать и вставлять изображения в векторе, а также делать базовую анимацию с мгновенным предпросмотром».

Но если какая-то компания и достигла мастерства в создании таких интеракций в прототипах, что те воспринимаются как нативные и настоящие, так это Facebook. Facebook занял лидирующие позиции в прототипировании с момента запуска Origami — полного набора инструментов и расширений, надстроенных к Quartz Composer[103] от Apple. Изначально созданная внутри компании, в Facebook Creative Labs, с целью развития новых взаимодействий для iOS приложения Paper (рис. 5.3)[104], она дала старт появлению таких конкурентных инструментов, как Pixate[105], Google Form[106] и Framer[107]. Даже дизайнерская компания IDEO решила поучаствовать в общем забеге, выпустив собственный набор для прототипирования под названием Avocado[108].

Рис. 5.3. Интеракции Facebook Paper пленили и захватили дизайнерское сообщество. Позже журнал Wired писал, что они были разработаны с помощью Origami

Общеизвестным было и то, что компания Apple также располагает собственными продвинутыми инструментами прототипирования. Говорят, что один из них Mica был специально разработан для UI-дизайнеров, чтобы тем было намного проще создавать интерактивные интерфейсы[109]. Предполагалось, что Mica заменит Quartz Composer в проекте 1 Infinite Loop и будет использоваться для создания всего — от интерфейсов до профессиональных итоговых плагинов.

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

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

Это просто-таки святой Грааль.

[На этом месте играет музыкальная тема Джона Уильямса из фильма про Индиану Джонса.]

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

Одновременно с освоением искусства создания прототипов и внедрением их в рабочий процесс я начал перенимать опыт дизайнеров — ветеранов прототипирования: Стива Мезароса (продуктовый дизайнер Wildcard) и Поли Тинга (продуктовый дизайнер, который работал с такими крупными компаниями, как Macy’s, SiriusXM и Jaguar).

Мезарос занимался растущим продуктом Wildcard вместе с Хой Вином, бывшим директором по дизайну New York Times, которого Fast Company назвала одним из 50 самых влиятельных дизайнеров Америки. Мезарос и Вин отвечали за дизайн интерфейса Wildcard и его интерактивность, стремившись объединить производительность и опыт нативных приложений с охватом всего интернета.

Тинг возглавлял отдел пользовательского опыта в Tigerspike, дизайн-компании, которая разрабатывала приложения и мобильные сайты для клиентов Fortune 500 — от ретейлеров до интернет-гигантов. В его задачи входило, по большому счету, удовлетворение запросов не только клиентов компании, но и руководителей этих клиентов, а также клиентов их клиентов.

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

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

«Это как хакатон»[110], — говорит Тинг.

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

«Прототипы интеракций и анимаций были важнейшим элементом цикла разработки в Wildcard и позволяли нам просто и ясно формулировать даже самые сложные идеи», — говорит Мезарос.

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

Вторая цель — увидеть тех, кто будет знакомиться с вашим прототипом, чтобы понять, насколько его требуется прорабатывать — придется охватывать весь сценарий или только действия конкретного пользователя? Или только конкретное взаимодействие? В какой мере стоит уделять внимание деталям? Успешный прототип обращается непосредственно к аудитории.

Но и это еще не все. Один из самых важных вопросов: насколько вы ограничены по времени? Ответ на него позволяет подобрать правильные инструменты для выполнения проекта.

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

Мне очень нравится, как продуктовый дизайнер Twitter Пол Стаматиу описывает компромисс, к которому он пришел, разрабатывая Twitter Video.

Поли Тинг, в свою очередь, пишет:

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

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

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

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

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

Когда прототип будет готов к передаче в разработку, команда должна его обсудить и решить, как продолжить работу.

Хороший пример — Twitter (да, снова) в той форме, в которой вы его никогда раньше не видели. В середине 2006 года Twitter можно было принять за клон Craigslist. CSS не было. Простое текстовое окно, простые изображения (желтая звезда и эскиз стартовой страницы), кнопка отправки и нестилизованные <ul>, которые представляли последние обновления статусов людей, на которых вы подписались, в обратном хронологическом порядке (рис. 5.4)[112].

Рис. 5.4. Один из первых прототипов Twitter

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

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

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

«Визуализация [и тестирование] взаимодействий помогает нам вести конструктивный диалог с крупными командами, — говорит Мезарос. — Прототипы играют важную роль в получении и использовании обратной связи от всех команд: от стратегии до дизайна. Создавая прототипы, мы гораздо лучше контролируем последствия процесса. В Wildcard оценка стоимости играла критически важную роль для достижения конечной цели. Вот почему я яростный сторонник дизайна и прототипирования в любом возможном контексте. Мне кажется, что лучший вариант — встраивать все части пользовательского интерфейса так же, как может быть в финальном продукте».

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

«Одна-две недели — это хорошее время, чтобы прийти с качественными идеями и реализовать их без лишних наворотов и крутизны. Его вполне достаточно, чтобы остановиться, выдохнуть и принять продуманное решение, но и не слишком много, чтобы бездумно его тратить, — отмечает Тинг. — Самое главное, что я выучил при быстром создании прототипов, — это очень мощный катализатор. Использование таких инструментов, как InVision и Quartz Composer, накладывает обязательства на создателей пользовательского интерфейса (UI) и опыта взаимодействия (UX), на менеджеров проектов и инженеров. Они должны вникнуть в дисциплины друг друга, разобраться в них и начать работать вместе. У нас практически не бывает конфликтов, все слаженно работают как единая команда. А все потому, что быстрое прототипирование — это даже не инструмент и не методология, это своего рода культура».

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

«Мы можем улучшать и корректировать [проект] очень быстро в режиме реального времени — за считаные секунды или минуты, — говорит Мезарос. — Подобный уровень контроля действительно восхищает. Это и есть искусство интерактивного дизайна, и прототипирование дает нам определенные преимущества».

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

Рис. 5.5. Модель процесса создания продукта максимально эффективна благодаря прототипированию

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

В зависимости от выбранных инструментов передача кода в руки инженеров может проходить в разных формах. Вы или передаете код, написанный в Framer.js, или делитесь своими раскадровками в Xcode, или, если вы использовали Quartz Composer / Origami, переправляете композиционные файлы и самые важные моменты, такие как переходы и время анимации. Чем больше информации вы предоставите, тем быстрее будет готов ваш продукт.

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

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

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

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

«Довольно часто я в буквальном смысле менял дизайн посреди дискуссии и спрашивал: “Вы это имеете в виду?” — вспоминает Тинг. — А затем мы его тестировали и обсуждали. Это сэкономило часы и дни, которые иначе пришлось бы потратить на написание электронных писем, встречи, дополнительные обсуждения и дебаты».

• В зависимости от того, с кем вы общаетесь, могут потребоваться тысячи встреч, макетов или технических спецификаций. Хотите мое мнение? Да все равно. Если даже это правда, я скажу, что то, зачем мы делаем прототипирование — наращивание глубины проработки продукта, — того стоит.

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

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

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

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

• Если вы хотите выйти на новый уровень, начните осваивать инструменты прототипирования. Играйте на своих сильных сторонах. Не знаете код? Пробуйте InVision. Знаете JS — идите во Framer. Хотите чего-то особенного? Попробуйте Origami.

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

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

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

Использование таких инструментов, как InVision и Quartz Composer, накладывает обязательства на создателей пользовательского интерфейса и опыта взаимодействия, на менеджеров проектов и инженеров. Они должны вникнуть в дисциплины друг друга, разобраться в них и начать работать вместе.

Например, когда я сотрудничал с Macy’s, менеджер проекта сказал мне: «За все годы работы в компании я в первый раз увидел, как все вдохновлены работой: и разработчики интерфейсов, и пользовательского опыта, и девелоперы — все хотели делать одно дело».

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

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

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

Почему? Потому что мы возвращаемся к старым вопросам, по-новому объясняем вещи (в которых люди, в отличие от вас, не совсем хороши).

Один из моих любимых художников новейшего времени Франсуа Помпон родился в 1855 году и поначалу проявлял свои скрытые таланты в качестве помощника знаменитых скульпторов Огюста Родена и Камиллы Клодель. Только в 1922 году, в возрасте 67 лет, собственные работы принесли Помпону известность.

Его огромная скульптура L’ours Blanc[115], «Белый медведь» (рис. 6.1), — нечто поистине уникальное. В ней нет ничего лишнего. Она не пытается казаться реалистичной. Перед зрителем предстает белый медведь в своей чистой форме и сути. Помпон отказывается от мелких подробностей, чтобы дать зрителю возможность сфокусироваться на том, что делает медведя медведем.

Рис. 6.1. L’ours Blanc Франсуа Помпона. Фото Rodney

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

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

Затем мы удаляем ненужные детали, увеличиваем точность своей работы и двигаемся в направлении того, что мы можем предложить клиентам (рис. 6.2). В четвертой главе мы создали образец пользовательского интерфейса и на его основе начали моделировать сценарии и внешний вид экранов. В пятой главе пользовательские пути начали объединяться во что-то материальное, что-то, что мы могли бы использовать для проверки своих идей. Мы начали чувствовать, как может вести себя наш продукт.

Рис. 6.2. Помните нашу модель создания продукта? Мы двигаемся к запуску, но еще не добрались до него

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

Мне кажется, что многие продуктовые дизайнеры совершают ошибку, сразу переходя к Photoshop, Sketch или Illustrator. Они неверно понимают принцип «Первым делом — интерфейс» и пытаются создать идеальную картинку еще до того, как осознают, в каком направлении двигаться.

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

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

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

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

Этот подход в его крайней форме любит использовать Apple. Здесь подобная технология называется «10: 3: 1». Разработчики компании должны создать десять абсолютно разных высокоточных моделей для каждой функции будущего продукта. Затем из десяти идей выбираются три, лучшие элементы которых объединяются в конечное решение[116].

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

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

Так что запуск окончательной версии продукта никого не застанет врасплох.

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

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

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

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

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

Если да, то вы знаете, как выглядит неловкий UI.

Неловкий UI — это отсутствующий индикатор загрузки; это ситуация, в которой вы забываете сказать пользователю, что что-то пошло не так, или делаете это при помощи сообщения об ошибке; это странно выглядящие графики всего с несколькими точками; это сбой системы при вводе новых данных. Если вы еще не поняли, что такое неловкий UI, вот вам простой пример из реальной жизни. Я смотрю Apple TV. Очень часто. (Честно сказать, я это делаю и сейчас, когда пишу эти строки.) Каждый раз, когда я открываю папку с купленными фильмами, я вижу картину, которая представлена на рисунке 6.3.

Рис. 6.3. У Apple TV отсутствует индикатор загрузки для вызова списка приобретенных фильмов. И меня это пугает. Каждый раз

Каждый раз я на секунду пугаюсь. А я ведь открываю эту папку очень часто. Я знаю, чего ожидать.

Но что меня пугает? Из-за чего мой мозг считает, что я вижу именно то, что Apple TV хочет мне показать?

На этом экране отсутствует индикатор загрузки, равно как и любые другие следы деятельности. Так что через мгновение в моей голове появляются жуткие вопросы: где мои фильмы? Я их потерял? Удалил? Их кто-то украл?

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

Как же это бесит!

Сравните эту процедуру с воспроизведением фильма. Нажав кнопку Play на пульте, я вижу индикатор, что «Назад в будущее» готовится к запуску (рис. 6.4).

Рис. 6.4. Успокаивающий индикатор воспроизведения

Видите разницу в ощущениях?

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

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

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

Неловкий UI выходит на сцену, когда разработчик продукта всего этого не учитывает. Это значит, что где-то в процессе работы нарушаются какие-то правила.

Что это за правила?

Правила UI-стека. Давайте-ка поговорим о нем.

ЧТО ТАКОЕ UI-СТЕК?

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

Рис. 6.5. UI-стек состоит из пяти слоев, присутствующих в каждом экране пользовательского интерфейса, а также из логики перемещения пользователя между ними

В зависимости от контекста клиент видит отображение одного из этих слоев. На языке дизайнеров они еще называются состояниями[117], именно их необходимо учитывать для каждого создаваемого вами экрана.

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

Будьте честны сами с собой. Когда вы в последний раз создавали экран, состоящий только из одного слоя? Даже если вы разрабатываете приложения для прогноза погоды (здесь должна быть шутка про Dribbble), одного слоя вам не хватит.

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

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

Вот почему каждый экран, который вы создаете, может иметь до пяти состояний:

• Идеальное состояние

• Пустое состояние, включая состояние при первом использовании

• Состояние ошибки

• Промежуточное состояние

• Состояние загрузки

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

Но для начала давайте совершим краткий экскурс в историю интернета. В 2004 году компания Basecamp (ранее известная как 37signals) выпустила книгу, которая, как мне кажется, перевернула разработку цифровых продуктов с ног на голову. Эта книга называлась The Three State Solution («Решение с тремя состояниями»)[118], и в ней говорилось, что каждый экран должен рассматриваться в трех возможных состояниях — «обычном, пустом и ошибочном». Это открытие изменило мое сознание и заставило иначе взглянуть на дизайн сетевых продуктов.

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

Изменились и требования, и ожидания от UI. UI-стек — это моя адаптация идеи, которую Basecamp создал более десяти лет назад.

А теперь давайте поговорим об идеальном состоянии.

ИДЕАЛЬНОЕ СОСТОЯНИЕ

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

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

И все эти изменения имеют огромное значение для остальных слоев.

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

Если вы еще не до конца понимаете, что я имею в виду под идеальным состоянием, давайте рассмотрим несколько примеров (см. рис. 6.6–6.8).

Рис. 6.6. Живописный вид идеального состояния приложения Qik — видеоклиента Skype. Мы видим несколько групп, из которых можно выбирать, и активных пользователей, готовых получить ваше видеосообщение

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

Рис. 6.8. Идеальное состояние приложения Starbucks, в котором отображаются различные карты пользователя и остатки на них. Единственное, что меня печалит на этой картинке, — это суммы, которые мне приходится тратить каждую неделю, чтобы поддерживать баланс всех этих карт. Что ж, бывают и более дорогостоящие хобби

ПУСТОЕ СОСТОЯНИЕ

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

Существуют три варианта пустого состояния. Первый — что клиент видит, когда впервые открывает ваш продукт. Второй — что появляется, когда пользователь добровольно удаляет с экрана все данные, например при выборе опции Inbox Zero. А третий — что возникает, когда вам нечего показать клиенту, к примеру, если его поиск не дает результатов.

Главная проблема с пустыми слоями в том, что их часто оставляют на потом. В итоге получается либо полная мешанина (рис. 6.9), либо холодный и безликий интерфейс.

Рис. 6.9. О боже! Мне нравится приложение для записи музыки Figure от Propellerhead, но эти подсказки подавляют и отвлекают внимание. С чего вообще начать? И как все это запомнить?

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

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

ПЕРВОЕ ИСПОЛЬЗОВАНИЕ / ЗНАКОМСТВО

Если клиент пользуется вашим продуктом впервые, это состояние — ваш единственный способ объяснить, что ждет его дальше. Это ваш шанс мотивировать его на действия и помочь прочувствовать ценность того, что он сейчас увидит на экране. Первое впечатление бывает лишь раз, поэтому попытайтесь сделать его незабываемым.

Это состояние кажется мне похожим на то, что в литературе и кино называют «путешествием героя» (рис. 6.10). Это понятие, введенное Джозефом Кэмпбеллом, лежит в основе мифологических сюжетов всего мира, от «Одиссеи» до «Звездных войн». Краткое описание того, что оно в себя включает, выглядит так.

Рис. 6.10. Путешествие героя

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

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

Но как это сделать? Вот вам несколько идей.

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

• Используйте контент своего продукта, чтобы объяснить клиенту, что ему следует делать. Например, если вы создаете продукт для обмена сообщениями, то можете начать с отправки сообщения клиенту. Попробуйте сделать заголовком такого сообщения фразу вроде «нажмите, чтобы открыть», а в тексте объяснить, как можно управлять сообщениями и отвечать на них.

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

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

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

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

Рис. 6.12. Facebook Paper постепенно рассказывает вам о своей функциональности и обучает основным действиям. Этот процесс красиво выглядит, но, к сожалению, активируется практически сразу же после входа в систему, не давая мне возможности рассмотреть продукт как следует. Кроме того, некоторым может не понравиться, что для выхода из обучающего режима нужно нажать Х

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

Рис. 6.14. После первого входа в вишлист Airbnb вы видите стильный пустой слой. Мне нравится, что в этом дизайне не чувствуется навязчивость (что вообще характерно для дизайнерского языка Airbnb), но при этом он вполне четко призывает вас начать сбор данных

Тема экранов для регистрации и первого использования настолько широка, что ей можно было бы посвятить отдельную книгу. И, оказывается, такая книга существует. Если вы хотите заняться этим вопросом более подробно, рекомендую великолепную работу Сэмюэля Хьюлика The Elements of User Onboarding («Элементы адаптации новых пользователей»)[119].

ДАННЫЕ, УДАЛЕННЫЕ ПОЛЬЗОВАТЕЛЕМ

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

Этот слой дает возможность вознаградить клиента или мотивировать его на дальнейшие действия (рис. 6.15). В вашем почтовом ящике больше нет писем? Отлично! Получайте за это красивое фото. Вы загрузили всю музыку? Здорово, теперь прослушайте ее. У вас больше не осталось уведомлений? Вот еще парочка, которые могут вас заинтересовать.

Рис. 6.15. Да, это винтажный скриншот из iOS 6, но он позволяет вспомнить тот небольшой прилив дофамина, который ощущали многие из нас, полностью очистив почтовый ящик. Моя награда — выбранная специально для меня фотография из чьего-то Instagram-аккаунта (сцена в кафе или красивый закат). Кроме того, я могу поделиться ею с друзьями, чтобы рассказать им, что у меня в почте больше нет писем, и заодно прорекламировать Mailbox. Тройная польза!

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

ОТСУТСТВИЕ РЕЗУЛЬТАТОВ

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

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

Рис. 6.16. Пример, в котором я признаюсь в своей любви к металлу и Metallica. Когда-то это должно было случиться

В случае с Pinterest (рис. 6.17) результаты не совсем такие же, как в Amazon, но, в конце концов, это Pinterest. Учитывая, как их поисковая система обрабатывает запрос, клиент легко может скорректировать его, чтобы получить желаемое.

Рис. 6.17. Обратите внимание, что результаты поиска распределены по категориям (Handmade), а поисковый запрос можно легко удалить

Запомните, что на этом этапе важно не оттолкнуть клиента, а показать ему что-то, с чем он сможет работать дальше, или предложить альтернативный путь.

СОСТОЯНИЕ ОШИБКИ

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

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

В данном случае можно перефразировать Джефа Раскина, создателя первого компьютера Macintosh и автора книги «Интерфейс: новые направления в проектировании компьютерных систем»[120]. Он пишет:

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

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

Рис. 6.18. American Airlines уже выучили урок, и, я уверен, Wordpress последовал их примеру. Но зачем злить людей, показывая им бессмысленные сообщения об ошибках? Зачем уничтожать все результаты их труда? Это неприемлемо

НЕТ! ДА! МОЖЕТ БЫТЬ?

Наконец, вот пример контекстного сообщения об ошибке, которое легко понять. Юмор делает его более человечным (рис. 6.19).

Рис. 6.19. Прекрасное, очень человечное и полностью понятное сообщение об ошибке, возникшей при регистрации аккаунта в Basecamp

Идеальные сообщения об ошибке, как в случае с Basecamp, появляются динамично и не уничтожают введенные пользователем данные. Если для обнаружения ошибки страница или экран должны перезагрузиться, сделайте всем одолжение и сохраните данные (даже неверные), которые уже были введены в систему. Хотя зачастую перезагрузка страницы для выявления ошибки указывает на то, что разработчик был лентяем. Проделайте небольшую дополнительную работу ради своих клиентов, чтобы все выглядело аккуратно и не вызывало дискомфорта.

Кроме того, состояния ошибки не должны выглядеть слишком драматично или непонятно. Помните «синий экран смерти»? Или «панику ядра» на старых iMac? Или, если вы совсем уж ветеран, команды Abort, Retry, Fail? Каждое из этих состояний указывало на существенную системную ошибку, требовавшую перезагрузки или повтора операции. Мы не забыли их до сегодняшнего дня из-за того шока, ужаса и непонимания, которое они вызывали.

«Синий экран смерти» Microsoft (рис. 6.20) получил печальную известность именно потому, что ужасно раздражал людей. Он появлялся внезапно, вне контекста, и был нашпигован специальными терминами, которые казались пугающими даже тогда, когда действительно были полезны для решения проблемы.

Рис. 6.20. Легендарный «синий экран смерти» Microsoft Windows

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

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

Итак, хорошее сообщение об ошибке должно быть:

• Написанным для аудитории

• Конструктивным, четким и эффективным

• Позитивным, то есть не пугающим и не слишком драматичным

• Содержащим информацию об основной проблеме и, если это возможно, о ее решении

• Четко показывающим, где именно возникла проблема

• Своевременным

• Написанным грамматически и тематически верным языком без специальных терминов и избытка сокращений

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

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

ПРОМЕЖУТОЧНОЕ СОСТОЯНИЕ

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

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

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

В данном случае можно использовать некоторые принципы разработки игр. Я не говорю о том, что ваш пользователь должен собирать кристаллы, как в Clash of Clans (рис. 6.21), речь идет об «ускорении», которое можно задействовать на этом этапе.

Рис. 6.21. Огромная стрелка показывает, что я могу построить пушку, потратив при этом кристаллы, чтобы потом купить еще больше кристаллов. Да, так это и работает[121]

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

Игрок, вступающий в фазу ускорения, не думает о скучных повторениях, которые ему придется совершить, чтобы попасть на следующий уровень. Он просто делает это и наслаждается увеличивающимся результатом… Такие игроки мыслями уже находятся в будущем, где их герои наделены могуществом, недоступным на текущем этапе. Говоря более техническим языком, они видят перед собой экспоненциально увеличивающуюся силу, которая исчезает за горизонтом предвидения их героев. Это не самый традиционный подход, но субъективно игроки получают от него точно такое же удовольствие[122].

На рисунках 6.22–6.24 представлены прекрасные примеры промежуточного состояния.

Рис. 6.22. Знаменитая шкала заполненности профиля в LinkedIn заставляет выполнять задания до тех пор, пока вы не достигнете 100%. Перфекционисты ликуют. Разработчики тоже

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

Рис. 6.24. Приложение «Активность» на Apple Watch ставит задачу «заполнить» все круги

СОСТОЯНИЕ ЗАГРУЗКИ

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

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

Об этом пишет Люк Вроблевски, эксперт в области продуктового дизайна, руководивший дизайнерскими отделами в eBay, Yahoo и Google (где он работает и по сей день после продажи своего стартапа Polar, занимавшегося созданием мобильного приложения для проведения соцопросов).

Вроблевски и его команда заметили, что после того, как они добавили к каждому опросу круговые прогресс-бары, пользователи Polar начали жаловаться, что приложение работает медленнее, чем обычно: «Приходится долго ждать обновления и загрузки страниц. Предыдущая версия была быстрее».

Вроблевски пишет о своем осознании:

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

КАРКАСНЫЕ ЭКРАНЫ

Благодаря этому пониманию родилось то, что Вроблевски называет «каркасными экранами» (рис. 6.25). Эта технология, в частности, используется в десктопных и мобильных версиях Pinterest и Facebook.

Рис. 6.25. Приложение Люка Вроблевски Polar и его каркасные экраны в действии[124]

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

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

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

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

ОПТИМИСТИЧНЫЕ ДЕЙСТВИЯ КАК ПОКАЗАТЕЛЬ ВЕРЫ В УСПЕХ

«Никому не нравится ждать, даже пока он ждет», — сказал основатель Instagram Майк Кригер в 2011 году, описывая инженерные решения, формирующие впечатление высокой скорости работы его приложения (рис. 6.27)[125].

Рис. 6.27. «Оптимизм» в ранней версии Instagram

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

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

Оптимистичные действия позволяют уменьшить воспринимаемое время загрузки. Instagram начинает загружать фото сразу после того, как вы выбрали для него фильтр, а не когда вы нажали «Готово». Это не оптимальное инженерное решение (ведь если пользователь передумает, загруженные данные могут оказаться ненужными), но зато с пользовательской точки зрения загрузка происходит очень быстро. Правило «Перемещайте биты, пока никто не видит» позволяет сделать скорость работы продукта одним из его преимуществ.

ГИПОТЕТИЧЕСКИЙ ПРИМЕР

Мы рассмотрели несколько примеров UI-стека и его пяти слоев по отдельности (рис. 6.28). Но как они взаимодействуют друг с другом? Как пользовательский интерфейс обеспечивает переход из одного состояния в другое?

Рис. 6.28. Напомню, так выглядят UI-стек и его элементы

Сила UI-стека в том, что слои не существуют сами по себе. Они расположены вдоль вертикальной оси, которую в любое время может вызвать продукт. Ваша задача не только создать каждый из этих слоев, но и обеспечить переход экрана между ними.

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

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

Итак, с чем нам предстоит иметь дело в нашем приложении?

Сначала у нас вообще не будет сообщений. Это наш пустой слой.

Промежуточный слой — когда лишь один участник диалога отправил сообщение.

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

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

Можно забыть о механизме устранения ошибки и попытаться отправить сообщение еще раз. Это будет еще одна версия слоя загрузки.

Наконец, мы достигнем идеального состояния — когда одно сообщение превратится в беседу.

ГИПОТЕТИЧЕСКИЙ МЕССЕНДЖЕР

Предположим, Марти и Док Браун из фильма «Назад в будущее» обменялись контактами, и Марти хочет рассказать Доку о том, что он видел в магазине Twin Pines Mall.

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

Рис. 6.29. Переход из пустого состояния в промежуточное

Но что происходит с этим состоянием, когда кто-то отправляет сообщение? Нам нужно аккуратно перейти с пустого слоя в промежуточный. В данном случае промежуточное состояние наступает, когда Марти отправляет Доку первое сообщение.

Давайте перейдем к моменту, когда Док ему отвечает (рис. 6.30). Он уже отправил одно сообщение, но разговор еще не закончен! Поэтому появляется индикатор набора текста, еще одна форма состояния загрузки.

Рис. 6.30. Состояние загрузки (в данном случае отображенное в виде индикатора набора текста) и переход к новому входящему сообщению

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

Но что будет, если Марти захочет ответить (рис. 6.31)? Для начала нам нужно показать готовность приложения к работе, когда текст будет введен в поле. Обратите внимание, что кнопка «Отправить» из серой (неактивное состояние) превратилась в синюю (активное состояние). Затем, после отправки сообщения, возникает еще одно состояние загрузки. В это время сообщение выглядит тусклым, потому что оно еще не доставлено. Наконец пометка «Доставлено» сообщает отправителю, что его действия увенчались успехом.

Рис. 6.31. При отправке сообщения меняется состояние кнопки «Отправить», затем происходит переход в состояние загрузки, а затем подтверждается доставка

Рис. 6.32. Повторная попытка отправить сообщение. Обратите особое внимание на выход из состояния ошибки

Что произойдет, если наше сообщение не будет доставлено (рис. 6.32)? Экран перейдет в состояние ошибки. Вместо индикатора загрузки появится красный маркер, и сообщение по-прежнему будет выглядеть тусклым.

Нажав (или, в данном случае, кликнув в Quartz Composer) на неотправленное сообщение, пользователь сможет повторить попытку.

На этот раз нам повезло. Агрессивный красный восклицательный знак пропадает, сообщение становится ярким, и мы видим индикатор доставки.

Вот так, друзья, работает UI-стек.

Я рассказал о пяти состояниях экрана и плавных переходах между ними. Без переходных элементов наш клиент может смутиться или растеряться, когда перед ним появится экран в новом состоянии. А доставлять дискомфорт, вроде бы, не входит в наши должностные обязанности.

Кстати, о комфорте. Давайте перейдем к вопросам эргономики, которые должен учитывать UI в современном мире тачскринов и мобильных устройств.

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

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

Нет-нет, мы не попали в фильм «Особое мнение», и нам не доведется работать с потрясающими голограммами, которые создает для Тони Старка его друг ДЖАРВИС (хотя друг ли он ему? Хм…)

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

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

Не верите? Посмотрите на рис. 6.33. ДА, ЭТО МЛАДЕНЕЦ С iPAD.

Рис. 6.33. Маленькие дети пользуются iPad. Что дальше, кошки и собаки научатся жить вместе?

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

Что же делать?

Помните, в первой главе я рассказывал об истории разработки цифровых продуктов? Я рассматривал работы Лиллиан Гилбрет, Генри Дрейфуса и Скотта Кука. В чем была их основная тема?

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

Что ж, нам повезло.

Эксперт по мобильным технологиям Стивен Хубер провел такое исследование в начале 2013 года и привлек к нему 1333 респондента[126]. Он выяснил, что люди держат телефоны так (рис. 6.34).

Рис. 6.34. Исследование, проведенное Стивом Хубером в 2013 году, показало, что 49% опрошенных при взаимодействии с мобильным телефоном используют только большой палец[127]

• Одной рукой: 49%

• Между плечом и ухом: 36%

• Двумя руками: 15%

Из тех, кто держал телефоны в руках:

• 67% касались экрана большим пальцем правой руки

• 33% — большим пальцем левой руки

Хубер отметил, что левши составляют лишь 10% населения. Соответственно, выявленная им высокая доля пользователей, предпочитавших держать телефон в левой руке, должна была объясняться тем, что те одновременно делали что-то еще: курили, ехали на велосипеде, пили кофе, ели хот-дог и так далее.

Судя по всему, мобильные устройства с диагональю 3,5 и 4 дюйма очень скоро будут забыты. А это значит, что те из нас, кто зарабатывает себе на жизнь созданием приложений, быстро адаптирующихся сайтов и веб-продуктов, оптимизированных под мобильные устройства, должны что-то изменить в своей работе.

Закат подобных устройств уже начался. В отчете 2014 Mobile Benchmark Report от Adobe говорится, что в мае 2014 года поиск с мобильного телефона с диагональю 4 дюйма осуществляли на 11% меньше пользователей, чем за год до этого (рис. 6.35)[128].

Рис. 6.35. В мае 2014 года компания Adobe сообщила, что телефоны с большими экранами (то есть с диагональю более 4 дюймов) генерируют больше интернет-трафика, чем когда-либо в истории

Но это исследование касается только телефонов, проданных до мая 2014 года. Если помните, Apple объявили о самом успешном квартале в истории своей компании в январе 2015 года. Тогда было продано почти 75 миллионов iPhone, а iPhone 6 стал самым популярным продуктом Apple[129].

Это значит, что сейчас нам, как никогда раньше, важно научиться разрабатывать продукты для тех, кто предпочитает взаимодействовать с мобильными устройствами при помощи больших пальцев. Радует то, что размеры экранов этих телефонов будут практически универсальными. Беглый обзор самых популярных размеров экранов телефонов с Android указывает на диапазон от 5,1 до 5,7 дюйма[130].

Apple несколько упростят нам работу по мере исчезновения смартфонов с небольшими экранами. Диагонали iPhone 6 и iPhone 6+ составляют 4,7 и 5,5 дюйма соответственно.

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

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

ДИЗАЙН ДЛЯ БОЛЬШОГО ПАЛЬЦА

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

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

Но с чего-то нужно начинать. Исследования Хубера показали, что большинство из нас держит телефон так, как показано на рис. 6.36 — основание большого пальца касается правого нижнего угла экрана.

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

ЗОНА БОЛЬШОГО ПАЛЬЦА

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

• Одной рукой

• Большой палец правой руки на экране

• Основание большого пальца находится в нижнем правом углу экрана

На рис. 6.37 представлена карта зоны большого пальца для мобильных телефонов разного размера, от 4 до 6 дюймов по диагонали.

Рис. 6.37. Карта зоны большого пальца для мобильных телефонов размером от 4 до 6 дюймов по диагонали

А вот более подробное сравнение двух больших экранов с диагональю 4,7 и 5,5 дюйма (рис. 6.38).

Рис. 6.38. Зоны большого пальца для экранов с диагональю 4,7 и 5,5 дюйма

Обратите внимание, что удобные зеленые зоны остаются практически неизменными (чуть ниже мы поговорим о том, чем самый большой экран отличается от остальных). Это потому, что наш большой палец не увеличивается в размере как по волшебству. Очень жаль, ведь в детстве в игре Street Fighter моим любимым персонажем был Далсим (рис. 6.39).

Рис. 6.39. К сожалению, наши пальцы не растягиваются, как руки Далсима из игры Street Fighter

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

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

ДРУГАЯ ХВАТКА

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

Вот как это работает для экранов с диагональю 4,7 и 5,5 дюйма (рис. 6.40).

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

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

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

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

Рис. 6.41. Эргономичный дизайн Airbnb

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

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

TINDER

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

Рис. 6.42. Tinder — это рай для тех, кто управляет интерфейсом при помощи большого пальца

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

Размещение контрольных элементов в нижней части экрана, если ваш продукт предназначен для устройств с тачскрином, кажется разумной тактикой. Так они окажутся в зоне досягаемости большого пальца. Даже если ваш пользователь держит телефон одной рукой, а управляет второй, продукт все равно будет оптимизирован под одну руку. Не забудьте, где контрольные элементы размещают производители (Apple — кнопку Home, Android — контрольную панель, а Windows Phone — старт, кнопка Home и поиск). Все они находятся в нижней части устройств.

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

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

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

Рис. 6.43. Исследование компании Charbeat показывает, как меняется интенсивность использования устройств в течение дня. У каждого типа устройства есть собственный специфический паттерн[132]

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

Как же справиться с этим огромным морем устройств, для которых нужно разрабатывать единые и последовательные продукты? Как создавать продукты, которые выдержат испытание будущим и при этом все равно будут бороться с проблемами клиентов, каким бы устройством они ни воспользовались?

С этим важным вопросом я обратился к Бенедикту Ленерту, директору по дизайну в успешной кросс-платформенной компании Wunderlist. Wunderlist работает на множестве платформ, от iOS до Kindle Fire, в том числе на iPhone, iPad, Apple Watch, Mac, Android, Windows Phone, Windows и в десктопных приложениях. В июне 2015 года Wunderlist приобрела компания Microsoft.

Ленерт согласился дать нам несколько комментариев по этому вопросу.

ЧЕГО ХОТЯТ И ЖДУТ ВАШИ КЛИЕНТЫ?

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

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

Именно на таком принципе основывается вся работа в Wunderlist.

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

Сознательно или нет, берлинская компания Wunderlist наполняет свои продукты для любых платформ свойствами, которые важны для ее клиентов, — скоростью, простотой, ясностью и человечностью. Эти характеристики доступны на любых платформах, от iOS до Kindle Fire.

СПЕЦИФИКА ПЛАТФОРМЫ

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

«Кросс-платформенный продукт должен одновременно соответствовать характеристикам основного продукта и платформенным парадигмам каждой операционной системы, — говорит Ленерт. — Наша задача как разработчиков состоит в том, чтобы понимать эти парадигмы и в них уметь ориентироваться». Создавая продукт для нескольких платформ, важно соблюдать нормы. Например, на Android контрольные элементы системы находятся в нижней части устройства, а на девайсах с iOS их заменяет одна кнопка Home. Это существенно влияет на подход к продуктам для мобильных телефонов и планшетов.

Это верно и для любой платформы. Разрабатываете продукты для телевизионных приставок? Значит, вы должны знать характеристики каждого пульта или контроллера. Roku, Apple TV, Google Chromecast, Xbox, PS4 и так далее — у каждого из них свои нюансы. Знание этих нюансов и умение включить их в свой продукт находятся в зоне ответственности дизайнера. Но эта ответственность ограничена. «Для того чтобы понимать, где нужно следовать правилам ОС, а где можно их нарушить для обеспечения единообразия на всех платформах, требуется определенный опыт и мастерство», — утверждает Ленарт. В конце концов, мы создаем продукт для клиентов. Каковы их потребности? Если требования платформы, для которой создается продукт, вступают с ним в конфликт, как вам следует поступить?

«Когда мы обнаруживаем конфликтующее взаимодействие на разных платформах, мы пытаемся найти другое решение, — рассказывает Ленарт. — Следовать инструкциям просто, куда сложнее их нарушать. Мы хотим, чтобы все разработчики и дизайнеры ставили под сомнение существующие парадигмы и раздвигали границы, делая продукты более простыми и приятными в использовании»[133].

Один из примеров такого подхода — жест «потянуть для обновления», заменивший кнопку обновления. Его ввел Лорен Брихтер в Tweetie, а после приобретения компании его включили в функционал Twitter (рис. 6.44).

Рис. 6.44. Ленерт сравнивает элегантность жеста «потянуть для обновления» с кнопкой обновления, которую можно увидеть в более ранней версии Instagram[134]

Рис. 6.45. Так работает жест «потянуть для обновления» в Tweetie

Это идеальный пример того, как пользовательский интерфейс эволюционирует под влиянием платформенных ограничений. В Tweetie 1.0 кнопка обновления располагалась в верхней части ленты. Это решение было порождением своего времени — Брихтер просто не смог добавить ее в панель навигации. В следующей версии он решил это исправить. Он задался вопросом: «Почему бы не сделать обновление элементом самого движения пролистывания?». Так родился жест «потянуть для обновления» (рис. 6.45)[135].

ПОЛЬЗОВАТЕЛЬСКИЕ СЦЕНАРИИ ДЛЯ КАЖДОГО УСТРОЙСТВА

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

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

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

Вот почему, к примеру, для Apple Watch отсутствует полноценная версия Wunderlist. Вместо нее используется лаконичный, сокращенный вариант программы, который просто сообщает пользователю то, что ему нужно знать, в соответствующее время (рис. 6.46).

Рис. 6.46. Контекстное приложение Wunderlist для Apple Watch в действии

«Одна из наиболее интересных характеристик Wunderlist для Apple Watch — бесконтактная работа приложения. Вам не нужно лихорадочно жонглировать телефоном, — говорит Ленерт. — Достаточно идти по супермаркету и вычеркивать пункты из перечня покупок или даже использовать голосовое управление, чтобы составить список дел на завтра»[136].

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

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

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

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

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

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

• Для борьбы с неловким UI можно использовать UI-стек. UI-стек — это сочетание пяти слоев, или состояний (идеального, пустого, промежуточного, ошибочного и состояния загрузки), а также переходы между ними.

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

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

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

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

• Возможно, имеет смысл провести собственное исследование клиентской базы. Как они держат телефоны? В каком контексте используют ваш продукт и что при этом делают руками?

Я хотел начать с твоего недавнего поста «Что означает быть дизайнером и разработчиком: это не так сложно, как вы думаете»[137]. Ты очень четко и понятно описал роли разработчика и дизайнера. Многих людей интересует пересечение областей дизайна и разработки. А как ты пришел к выводу о том, что у хорошего дизайнера и хорошего разработчика много общего? Мне бы хотелось понять ход твоих мыслей.

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

Если ты разработчик-фрилансер, заказчик воспринимает тебя как универсала, и у тебя нет выбора, кроме как делать все и сразу. Когда я накопил достаточно опыта, то задумался: а могу ли я говорить о себе как о дизайнере и разработчике одновременно? Как на это отреагируют люди, поверят ли мне? Это казалось мне нереальным.

Разумеется, мне приходилось нелегко, но все изменилось после речи Остина Бейлза, которую я цитирую в своем посте[138]. Диаграмма появилась еще до поста, а текст уже строился вокруг нее.

Я задумался, почему многие люди считают дизайн и разработку диаметрально противоположными областями. Мне кажется, что в некоторых случаях это воспринимают как противостояние художника и… не знаю, не могу подобрать пример. Кажется, у Бейлза были бариста и инженер ракетостроения.

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

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

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

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

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

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

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

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

Музыканты мирового уровня играют только на одном инструменте. Понимаешь, о чем я?

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

Можно быть профессионалом, можно даже совмещать обе должности на работе, но я бы сказал, что в Squarespace я занимался, скорее, фронтендом, а не дизайном. Сейчас я поменял приоритеты.

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

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

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

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

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

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

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

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

Кажется, когда-то я начал с книги Emotional Design («Эмоциональный дизайн») Дона Нормана. Она заставила меня задуматься о некоторых животных инстинктах, которые необходимо учитывать в дизайне для людей[139].

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

Сейчас я читаю книгу «От хорошего к великому»[140] Джима Коллинза, где он рассказывает о «концепции ежа» — образе, к которому можно привести свою компанию. При этом это не просто абстрактное видение, а вполне реализуемый проект, который строится на желаниях и энтузиазме людей.

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

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

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

Кстати, это напомнило мне о еще одной книге — «Интерфейс: новые направления в проектировании компьютерных систем» Джефа Раскина.

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

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

Они хотят побыстрее перейти от состояния «нубов»[141] хотя бы к среднему уровню. С другой стороны, эксперты хотят быстро решать свои задачи. Поэтому и те и другие стремятся к середине шкалы.

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

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

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

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

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

Важно помнить, что 100% ваших пользователей — люди. Технологии могут стремительно изменяться, но с человеческой мотивацией ничего не произойдет. Пирамида потребностей Маслоу останется прежней.

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

Мне нравится эта фраза: «Если строить свой дизайн исходя из того, чего хотят люди, он продержится дольше».

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

— Матерь Божья, — выпалил инженер c ощутимым возбуждением в голосе. — 396 миллисекунд.

Температура в комнате мгновенно повысилась. Коллеги повскакивали со своих мест и окружили его.

— Черт!

— Не шутишь?

— Ты уверен, что все правильно?

Инженер улыбнулся и кивнул:

— Проверил три раза.

Менеджер проекта созвал всех на общее собрание. Была причина отпраздновать это событие и озвучить его важность.

— Когда инженеры измеряли скорость персональных компьютеров, они говорили о так называемом предельном значении числа Доэрти для времени реакции системы, — сказал он людям, заполнившим офис. — Когда вы даете компьютеру задачу и нажимаете кнопку Enter, если он отвечает вам менее чем за 400 миллисекунд (меньше половины секунды), то вы останетесь за этой машиной на долгие часы. Ваш взгляд остекленеет, но производительность взлетит во много раз. Даже небольшое отклонение от половины секунды в сторону увеличения заставляет ваше внимание блуждать. Меньше 400 миллисекунд — это заветная точка. И знаете что? Наше будущее детище Cardiff-PC, хоть и выглядит сейчас как хлам, только что отсчитало 396 миллисекунд. Когда мы его соберем, эта машина не только станет самым быстрым из всех существующих на рынке компьютеров, она начнет формировать привязанность.

Я нажал на паузу, приостановив просмотр четвертого эпизода «Остановись и гори», и отвлекся от Netflix. «Предельное значение числа Доэрти? Есть ли вообще такое? — подумал я. — Наверняка специально придумали для шоу».

Я ошибался.

Проблема предельного значения числа Доэрти восходит к статье «Экономические преимущества быстрой реакции компьютерной системы» Уолтера Доэрти и Ахрвинда Тадани, опубликованной в IBM Systems Journal в 1982 году.

Исследование Доэрти и Тадани имело практическое значение: требование к скорости реакции компьютера сократилось с 2 секунд (первичного стандарта) до 400 миллисекунд (рис. 7.1).

Рис. 7.1. Скорость реакции системы в зависимости от интенсивности использования системы: чем быстрее компьютер отвечает, тем больше людей будут его использовать

Прежний стандарт был установлен в 1968 году Робертом Миллером, сотрудником лаборатории IBM в Пафкипси[145]. Он верил, что две секунды — более чем достаточный отрезок времени, потому что «пользователи думают так быстро, как могут, и это не зависит от того, насколько долго отвечает система»[146].

Вау! Представьте ожидание ответа в течение двух секунд после ввода.

Доэрти и Тадани развенчали это убеждение. Люди могут держать в голове последовательность из краткосрочных задач, и они более продуктивны, если им не приходится ждать. Концентрация внимания сохраняется за счет принципа ротации. В сухом остатке — более высокая продуктивность, сокращение времени на работу и солидная сумма сэкономленных денег. И продукт будет признан состоятельным.

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

Психологические компоненты продукта, как, например, скорость или время реакции, сильно зависят от контекста — как, где и когда клиент его использует. Например, 400 миллисекунд — это отвратительное время реакции для тач-интерфейсов в таком узком контексте, как рисование. Даже 100 миллисекунд — это все еще плохой результат.

В ходе одного из исследований, проведенного Microsoft, удалось снизить время ожидания до 1 миллисекунды! При этой скорости ответ на касание такой же, как если рисовать ручкой на бумаге (рис. 7.2)[147].

Рис. 7.2. Исследовательская работа Microsoft, в ходе которой сравнивали эффект ожидания от 100-миллисекундного и 1-миллисекундного касания

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

Когда Марисса Майер работала в Google, она пыталась выяснить, сколько ответов на поисковый запрос пользователи компании хотят видеть на странице. 10 результатов? 20? 25? 30? Кульминацией был ответ «Чем больше, тем лучше».

И знаете что? После проведения A/B-тестирования «число поисковых запросов от пользователей, задействованных в эксперименте, упало на 20 процентов», — сообщила Майер во время своего выступления в 2010 году[148]. «Как только мы выдали пользователям 30 результатов на странице, они стали искать на 20 процентов меньше». Более того, использование первой страницы также сократилось на 20 процентов! (Рис. 7.3.)

Рис. 7.3. Исследование скорости поисковых запросов Мариссы Майер для Google (восстановлено с оригинальных слайдов)

Команда пребывала в растерянности. Что это, «парадокс выбора»? Или люди просто перегружены информацией?

Тщательно изучив логи[149], Майер обнаружила, что «на вывод 30 ответов требуется гораздо больше времени, чем для десяти, — примерно в два раза. [Эта] задержка и стала причиной спада. Пользователям действительно важна скорость. Когда сеть становится быстрее, люди ищут больше. А когда медленнее — меньше».

Команда выявила подобную корреляцию и в программе Maps («Карты»): в этом случае после того как размер страницы сократили на 30 процентов, получили на 30 процентов больше запросов по Maps! «Если вы делаете свой продукт быстрее, то почти сразу получаете увеличение объема его использования».

Скорость заставляет нас покупать больше. Shopzilla в течение года проводила редизайн своих страниц, и результат оказался шокирующим: сокращение времени ответа всего на пять секунд (с семи секунд до двух) позволило увеличить прибыль на 7–12% и просмотр страниц — на 25% (рис. 7.4)[150]^, [151].

Рис. 7.4. Более быстрые продукты заставляют нас больше покупать

Итак, если человеческий мозг настолько чувствителен к скорости реакции продукта, что еще является критичным? И что нам, продуктовым дизайнерам, нужно делать с этими факторами?

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

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

Именно таким принципом руководствовался Джонатан Бадин, сооснователь и вице-президент Tinder, приступая к работе над приложением для свиданий. Он же изобрел и пролистывание вправо. Да, то самое пролистывание вправо. «Вам нужно решить проблему, — сказал он в интервью. — И такой проблемой может быть всего лишь избавление от скуки, но это не менее важно, чем поиск партнера. Мне кажется, очень важно заморачиваться на деталях. Настаивать на том, что пользователь должен интуитивно понимать, как работает продукт».

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

Давайте рассмотрим эти факторы ниже.

ЦИКЛЫ

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

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

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

Рис. 7.5. Цикл из реальной жизни, скорее всего, делает жизнь сотрудников курорта во много раз проще

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

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

И, скажу вам честно, мы все убрали за рекордно короткое время. И когда мы закончили, все выглядело абсолютно так же, как на картинке.

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

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

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

Профессор Би Джей Фогг, основатель Stanford Persuasive Technology Lab, эксперт по использованию технологий для изменения поведения и автор книги Persuasive Technology: Using Computers to Change What We Think and Do («Технологии убеждения: использование компьютеров для изменения мышления и поведения»), изобрел поведенческую модель Фогга, или FBM (рис. 7.6). Эта модель позволяет продуктовым дизайнерам понять, что мотивирует их целевую аудиторию к действию[152]. Например, если пользователи не выставляют оценки отелям на сайте для путешественников, FBM помогает увидеть, какого психологического аспекта не хватает.

Рис. 7.6. Поведенческая модель Фогга показывает, что мотивация, способность и стимулы должны совпадать в момент времени, иначе поступок не будет совершен

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

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

Формула Фогга выглядит так: B = mat.

Мотиваторы (рис. 7.7) определяются в трех категориях: ощущение (удовольствие / боль), предвосхищение (надежда / страх) и принадлежность (общественное признание / отвержение)[153].

Рис. 7.7. Мотиваторы Фогга

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

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

Поведенческая модель пропагандирует формирование целевого поведения максимально простым способом. Фогг иногда заменяет способность на простоту, потому что «на практике секрет убеждающего дизайна — в простоте»[154]. Другими словами, если действие выполняется просто, способности человека увеличиваются и препятствия для его завершения преодолеваются гораздо легче.

Последний элемент в поведенческой модели — это правильный стимул (триггер), то, что заставляет человека выполнить действие прямо сейчас. Стимул должен быть максимально простым. Его цель — мягко вести клиента через цепочку событий, подталкивая его совершить желаемое действие.

Хороший пример можно найти в группе LinkedIn. После того как я присоединился к группе, на боковой панели появился маленький индикатор с едва уловимой анимацией (рис. 7.8).

Рис. 7.8. Триггер LinkedIn, после того как я присоединился к группе

Любопытство заставляет меня следить за анимацией (рис. 7.9). Прогресс-бар становится зеленым после того, как я совершил действие. Но когда я отодвигаю мышь, прогресс-бар снова окрашивается в желтый цвет.

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

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

Фогг пишет:

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

Выберите небольшое правильное действие, заложите правильную последовательность — и вам не придется мотивировать себя расти. Это произойдет совершенно естественно, как когда хорошие семена попадают в хорошую почву. (К сожалению, то же можно сказать и о плохих привычках, они тоже начинаются с малого.)[155]

Давайте посмотрим на другие циклы.

АДДИТИВНЫЕ ДЕЙСТВИЯ

Как продуктовые дизайнеры мы довольно часто сталкиваемся с необходимостью представить своим клиентам что-то новое (помните Скрепыша? См. рис. 7.10). То есть нам необходимо уведомить пользователя в правильное время и продемонстрировать достаточную ценность, чтобы вдохновить его на использование продукта.

Рис. 7.10. Если бы только Скрепыш мог триумфально вернуться

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

Нажав на иконку-сердечко, я получил диалоговое окно, подтверждающее действие и объясняющее его ценность (рис. 7.11).

Рис. 7.11. Apple Music подтверждает мой выбор и призывает продолжить использовать эту функцию, но терпит крах в объяснении ее значимости

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

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

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

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

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

Вот некоторые примеры, как этот паттерн может работать в реальной жизни.

Рассмотрим Snapchat (рис. 7.12). Любой, кто делает снэпы и попадает в сценарий их отправки, получает приглашение «Добавить в историю», после того как нажал на кнопку отправки в нижнем правом углу.

Рис. 7.12. Snapchat навязывает мне использование функции Stories каждый раз, как я выполняю простейшее действие — публикую снэп

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

Отдача от столь небольшого диалога колоссальная. Stories сейчас по количеству просмотров соперничают с самыми популярными национальными телешоу[156].

И Apple, и Twitter внедрили схожие техники для публикаций. Когда, например, Twitter запустил видео, то сообщил об этом своим пользователям с помощью ненавязчивой подсказки в окне написания (рис. 7.13).

Рис. 7.13. Анонс запуска видео в мобильном приложении Twitter

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

Рис. 7.14. Apple представил новые варианты цвета кожи для эмодзи

Преимущества следующие: 1) я в любом случае планировал использовать иконку; 2) она показывает, как именно выбирать другие оттенки кожи; 3) выбор оттенка требует всего одного дополнительного нажатия. Даже если бы я не прочитал текст, то уже по виду интерфейса знал бы, как использовать эту функцию.

ДАВАТЬ ЦЕННОСТЬ, А ЗАТЕМ ПРОСИТЬ ОБРАТНУЮ СВЯЗЬ

Чтобы такие продукты, как Uber, Instacart, DoorDash были успешными, требуется культивация экосистемы постоянной обратной связи. Будет ли моя еда доставлена вовремя? Где моя машина? Правильно ли составлен заказ?

Улучшение этих циклов — необходимое условие для инсценировки версий поведенческой модели Фогга. Как мы сообщаем о процессе? Когда мы просим дать обратную связь? Что делаем, если транзакция не была успешной?

Еще один сложный момент — это многоуровневость человеческой памяти. Шанс, что потребитель не сможет вспомнить, какой была его последняя поездка на Uber или как быстро ему доставили курицу, довольно велик. Он будет помнить только, произошло это событие или нет.

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

Я довольно часто использую Instacart для заказа продуктов на дом. Этот сервис отправляет массу текстовых сообщений, чтобы держать меня в курсе и сообщать о проблемах.

Я привязан к этим сообщениям до момента доставки заказа, но после я о них даже не вспоминаю. Я инвестирую до тех пор, пока не получу желаемое. Instacart знает об этом и потому сообщает мне об изменениях в заказе и СМС, и звонком.

Как только заказ передан в доставку, меня об этом также информируют. Более того, я могу в режиме реального времени следить, как водитель подъезжает к моему дому.

И вот та часть цикла, которая интересует меня больше всего: от момента, когда водитель отмечает, что заказ доставлен, и до того, как я получаю запрос на обратную связь, есть небольшой промежуток времени. Instacart специально предусмотрел время на распаковку заказа и размещение продуктов в холодильнике.

Это занимает от 5 до 10 минут. И тогда Instacart просит меня оценить заказ (рис. 7.15).

Рис. 7.15. Instacart присылает мне сообщение вместо просьбы поставить оценку в приложении

Такой цикл обратной связи обогащает экосистему Instacart. Сервис взаимодействует со мной именно в тот момент, когда я думаю о действии и могу сообщить о своем опыте.

От меня требуется минимум усилий: я не должен открывать приложение, я отвечаю на СМС. Я не должен набирать текст, одной цифры от 1 до 5 вполне достаточно.

Uber использует похожую систему для составления рейтинга водителей (рис. 7.16). Приложение блокирует любое другое действие до тех пор, пока клиент не оценит предыдущую поездку. Единственное замечание — этот цикл обращается к потребителю в самый неподходящий момент, когда тот нацелен на заказ новой машины, а не на размышления о прошлой поездке. И кто сказал, что новая поездка происходит сразу? Могут пройти часы, дни и даже недели. Это ставит под вопрос реалистичность рейтингов.

Рис. 7.16. Интерфейс присвоения рейтинга водителю Uber блокирует любое взаимодействие, когда клиент собирается вызвать машину

DoorDash — продукт, специализирующийся на доставке еды из ресторанов, объединил два приведенных примера в один первоклассный опыт.

Продукт одновременно удовлетворяет мой голод и информирует о каждом этапе доставки еды (рис. 7.17).

Рис. 7.17. DoorDash обновляется с push-уведомлениями на каждом шаге

Уведомления включают push-уведомления и оповещения внутри приложения, и должен сказать, что я буквально к ним прикован.

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

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

DoorDash отличается тем, что они уже натренировали меня всегда оценивать их работу. Дело в том, что после того, как я даю обратную связь по заказу, я неизменно получаю купон на скидку в размере от $2 до $7. И знаете, что круче всего? Я должен использовать его в течение нескольких дней.

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

ПЕРЕМЕННОЕ ВОЗНАГРАЖДЕНИЕ

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

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

Ярким примером режима подкрепления с переменной пропорцией служит игровой автомат. Пользователь помещает деньги в машину, тянет за рычаг и выигрывает (или не выигрывает) деньги. Денежный приз зависит от того, сколько раз он нажимал на рычаг.

Я встретился со своим коллегой Джонатаном Бадином, сооснователем и вице-президентом Tinder. Как я уже упоминал, именно он изобрел пролистывание (или свайп), привнеся игровой элемент в процесс поиска партнера[158].

«Я считал курс психологии в колледже весьма поучительным, но я никогда не назвал бы себя экспертом, — сказал Бадин в интервью. — Создавая Tinder, команда была зациклена на мотивации. Мы обсуждали важность режима подкрепления с переменной пропорцией. Мы осознавали, насколько тяжело презентовать себя другим и последствия, которые это может повлечь. Публичность бывает страшной и пугающей. Мы учитывали это при разработке приложения, стараясь, чтобы пользователь чувствовал себя непринужденно. И мне принадлежит лишь малая часть славы и успеха».

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

Но не это заставляет людей свайпать. Они зависимы от «награды», как в игровых автоматах, от дофаминового взрыва, который происходит, когда перед пользователем вспыхивает It’s a Match! («Совпадение!») (рис. 7.18).

Рис. 7.18. It’s a Match! на Tinder — это переменное вознаграждение, которое стимулирует пользователя пролистывать еще и еще, чтобы вновь испытать это чувство или написать сообщение тому, кто отправил ответный позитивный сигнал

Джонатан Бадин говорит:

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

It’s a Match! не только обеспечивает мгновенный выброс адреналина, он побуждает отправить сообщение этому человеку или продолжить игру до следующего совпадения.

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

«Я чувствую себя связанным с Warby Parker более, чем c любой другой компанией в мире, — говорит Курт Варнер, продуктовый дизайнер стартапа Shyp. — Когда я купил [их] очки, они отправили мне видео, в котором сотрудник компании лично благодарил меня за покупку. 30 секунд. Так просто, но они нашли время, чтобы это сделать. Каждое взаимодействие с этой компанией, будь то жалоба, да все что угодно, это удивительный опыт».

У меня подобный опыт был с Product Hunt Райана Гувера. После того как на рынке появились некоторые из моих продуктов, их команда прислала мне написанную от руки записку с благодарностью за мою работу (рис. 7.19): «Огромное спасибо за то, что вы создаете так много прикольных вещей и делитесь ими с нашим сообществом».

Рис. 7.19. Product Hunt использовали неожиданный канал коммуникации — написанную от руки записку, чтобы поощрить поведение

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

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

ЭСТЕТИКА И ЛИЧНОСТЬ

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

Рис. 7.20. Эстетика имеет колоссальное влияние на уровень доверия. Фото Джорджа Маклина Curtis Hotel — Seedy Joint № 1[159] и фото Хизер Коупер Room at the Hilton Hotel, Bath[160]

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

Множество исследований подтвердили, что эстетические факторы играют важную роль в формировании отношения к продуктам[161]^, [162]. Франк Спиллерс, консультант по юзабилити в Experience Dynamics, в своем исследовании зашел так далеко, что предположил, что дизайн продукта, обеспечивающий «эстетическую привлекательность, удовольствие и удовлетворение», существенно влияет на успех продукта»[163].

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

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

Невероятный пример слияния эстетики и личности для формирования эмоциональной связи можно обнаружить в Восточном Лондоне в Cockney Cash Machine (рис. 7.21).

Рис. 7.21. Банкомат с интерфейсом на диалекте кокни очаровывает и при этом выполняет свое предназначение — выдает наличность

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

«В наших банкоматах в Уэльсе менее 1% клиентов выбирают навигацию на валлийском языке, в то время как 15–20% предпочитают кокни, когда им дают такую возможность», — рассказывает Рон Делнево из банка — владельца банкомата Machine Company[165].

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

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

Вот что говорит об этом Джонатан Бадин:

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

Анимацию и движения мы подробно обсудим в следующем разделе, но Бадин подтверждает вывод, что решение о настроении продукта — это хорошо продуманный процесс:

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

Джош Брюер, бывший старший дизайнер Twitter, развивает эту мысль:

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

Брюер фокусирует внимание на опыте, который предугадывает поведение в контексте продукта:

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

Давайте возьмем несколько продуктов, представленных на рынке, и посмотрим, сможем ли мы определить, какую цель ставили перед собой их разработчики: Airbnb, Tinder, USAA банк, Uber и Eat24.

AIRBNB

Airbnb — мировое сообщество людей, которые предлагают свои дома в аренду (рис. 7.22). Оно создано с теплом. Его цель — стимулировать доверие. Airbnb «обращается к общечеловеческому стремлению чувствовать, что тебя рады видеть, тебя уважают и принимают таким, какой ты есть, независимо от того, где ты находишься. Сопричастность — это главная идея, которая определяет Airbnb, однако до последнего времени способ, которым мы были изначально представлены, не отражал этого в полной мере»[166].

Рис. 7.22. Дизайн Airbnb наполняет клиента теплом и внушает доверие

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

TINDER

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

Рис. 7.23. Tinder привлекает внимание яркими цветами, большими кнопками, а аналогия с колодой карт формирует ощущение игрового опыта

Джонатан Бадин описывает это так:

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

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

А когда есть совпадение, клиент переживает это событие как награду.

USAA BANK

USAA появился как банк исключительно для военнослужащих США и членов их семей. Несколько лет назад он открыл свои двери широкой публике и, сделав это, в 2015 году занял 28-е место в рейтинге World’s Most Admired Companies журнала Fortune. «Банк запустил мобильное приложение, которое позволяло клиентам предъявлять страховые претензии в видео- и аудиоформате, подтверждая нанесенный ущерб. USAA стал первым банком, который предложил технологию распознавания голоса и лица для входа в мобильное банковское приложение»[167].

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

Рис. 7.24. Мобильное приложение банка USAA напоминает о доблести, чести и гарантирует безопасность

UBER

Uber — это прекрасный пример сочетания роскоши и эффективности.

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

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

Рис. 7.25. Uber как сочетание роскоши и эффективности

Посыл Uber прост: мобильному приложению не нужно много говорить. Это суперсила, которая позволяет каждому клиенту вызвать машину, которая отвезет его куда он только пожелает.

EAT24

Этот сервис предлагает доставку продуктов. С другими аналогичными приложениями его роднит типичный красный цвет, но Eat24 отличается непосредственностью и чувством юмора. Статьи и истории, призванные привлечь внимание клиентов, позволяют ему выделиться из толпы. Как вот эта, например, прямо перед Днем независимости США (рис. 7.26).

Рис. 7.26. Уморительная рассылка Eat24 с купоном на скидку

Тон этой истории соответствует миссии приложения, которая проявляется даже в простых вещах, таких как, например, оповещение о пустой корзине (рис. 7.27).

Рис. 7.27. Тон Eat24 последователен и постоянен, даже в обыденных сообщениях.

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

«Я всегда чувствовал, что программное обеспечение должно не только эффективно решать задачу, оно должно быть приятным в использовании, — сказал Бадин о Tinder. — Многие упускают это из виду, особенно когда создают не потребительские продукты. Тем не менее у каждого приложения есть свой пользователь, и чем больше радости и удовольствия вы добавите в приложение, тем лучше и приятнее будет день».

Теперь давайте рассмотрим анимацию и движение и то, насколько они влияют на простоту использования продукта.

АНИМАЦИЯ И ДВИЖЕНИЕ

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

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

Дам вам подсказку: ответ кроется в движении.

Движение очеловечивает. Это отражение того, как работает реальный мир. Но в области дизайна, если предположить, что мир движется со скоростью 60 кадров в секунду, «нужно разработать 58 кадров между Состоянием A и Состоянием Б», — напоминает Пол Стаматиу из Twitter[168].

Джош Брюер соглашается с ним: «Как продуктовый дизайнер вы несете ответственность за каждый момент между экранами так же, как и за сами экраны». Брюер называет это «интервал состояний».

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

Движение — это больше чем просто украшение: оно должно быть функциональным. Оно помогает пользователю следить, что происходит после того, как он совершил действие. Еще лучше, если вы визуально сообщаете, как он проходит путь от точки А до точки Б.

В конце концов, мы живем в мире движения. Движение — это история о том, как существуют вещи, как они перемещаются из одного места в другое.

Джонатан Бадин говорит об этом так:

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

Рис. 7.28. Закрытая и открытая анимации Tinder превращают фотографию в карту с полным профилем, сообщая, что одним нажатием два вида просмотра доступны

Сравните этот пример с примером Паскуале ДаСилва из Elepath — безумно прекрасные «Переходные интерфейсы» (рис. 7.29).

Рис. 7.29. Паскуале ДаСилва из Elepath показывает, как анимация способна имитировать реальную жизнь и помочь понять, что происходит на экране

ДаСилва говорит:

Для того чтобы добавить новый элемент, список должен освободить для него место, и после этого новый элемент заполняет пространство. Так гораздо меньше дисбаланса. Мягкая анимация обыгрывает изменения, что воспринимается более естественно, потому что мы имеем контекстный аналог — зеркальное отображение того, как вы бы добавили нечто к пачке вещей в реальной жизни![169]

На самом деле это просто. Подражание реальной жизни помогает нашему мозгу лучше понять, что происходит. Это «иллюзия жизни».

Кстати, именно так[170] называется самая большая книга об анимации. Ее авторы — аниматоры компании Disney Олли Джонстон и Фрэнк Томас[171].

Эти два парня — легенды. Томас присоединился к Disney в 1934 году, а Джонстон — в 1935 году. Они работали с самим Уолтом и анимировали множество персонажей: от Белоснежки до Спасателей.

Их книга стала итогом 50 лет работы аниматорами в Disney. Опираясь на опыт работы над 23 анимационными фильмами, они сформулировали «12 принципов анимации»[172]. В чем же их цель? В том, чтобы отразить эмоции и подчеркнуть индивидуальность персонажа.

Результат? Правдоподобное движение на экране и персонажи, которые казались реальными и, как следствие, стали запоминающимися (рис. 7.30).

Рис. 7.30. Белоснежка оживает благодаря невинным радостным движениям

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

Давайте рассмотрим несколько принципов анимации и проанализируем, какую роль они играют в создании продуктов.

ЗАМЕДЛЕНИЕ И УСКОРЕНИЕ

Джонстон и Томас написали, что важно повторять реалистичное движение, и назвали это принципом «замедления внутрь и наружу». Этот принцип аналогичен компьютерной версии «легкий вход и легкий выход» [из анимации]. Для движения объектов в гравитационном поле Земли характерны периоды ускорения и замедления. Смысл этого явления для анимации в том, что у начальной и конечной позиции должно быть больше кадров, а в середине — меньше. Дополнительные кадры смягчают действие в начале и конце, чтобы имитировать реалистичное движение.

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

Приложение Qik (Skype) (рис. 7.31) — отличный пример добавления в пользовательский интерфейс компонента с воображаемой массой. Моделируемое сопротивление дает ощущение веса, которое не удивляет человека, когда появляется меню. Кроме того, по вектору движения понятно, где оно возникло.

Рис. 7.31. Приложение Skype Qik в движении

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

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

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

Мне очень нравится, как этот принцип был представлен в меню Keezy (рис. 7.32).

Рис. 7.32. Keezy использует «следование и нахлест»

ПОСТАНОВКА

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

Я интерпретирую этот принцип двумя способами.

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

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

В руководстве по дизайну от Google — Google Material Design — есть отличный пример, воплощающий этот принцип, — «Иерархическая синхронизация»[173] (рис. 7.33).

Рис. 7.33. Какая часть этой истории самая важная? Иерархическая синхронизации Google воплощает принцип анимационной «постановки», чтобы обозначить приоритет

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

Движение — довольно захватывающая перспектива в продуктовом дизайне. И еще более захватывающей ее делает состояние наших инструментов, ведь даже с Quartz Composer, Framer.js, InVision или Keynote по-прежнему очень трудно создать полностью оригинальную анимацию и переходы, соответствующие цели продукта.

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

Вот что говорит об этом Джонатан Бадин:

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

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

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

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

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

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

• Заставьте скорость работать на вас. Убедитесь, что ваш продукт правильно реагирует в ключевых областях. Перечитайте главу 6, чтобы лучше понимать, что такое дружественный интерфейс.

• Оцените все циклы своего продукта. Соотносятся ли они с поведенческой моделью Фогга? Если нет, то каких компонентов — мотивации, способности или стимула — вам не хватает?

• Убедитесь, что ваш продукт с точки зрения эстетики и текстового наполнения отражает вашу аудиторию.

• Выучите 12 принципов анимации и, если сможете, прочитайте книгу The Illusion of Life: Disney Animation («Иллюзия жизни: анимация Диснея») Фрэнка Томаса и Олли Джонстона.

• Для вдохновения посетите capptivate.co (дисклеймер: трудно судить о ценности анимации в отрыве от реальности, гораздо более продуктивно изучение в контексте применения).

• Изучите принципы анимации в Google Material Design. Оттуда можно почерпнуть очень много хороших мыслей.

• Воспользуйтесь такими инструментами, как InVision, Origami или Framer.js, чтобы начать создавать собственные оригинальные анимации, необходимые вашему продукту и клиентам.

Каких человеческих / психологических принципов вы придерживаетесь и какие из них внедряете в работу?

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

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

Джош Брюер — основатель Habitat, бывший главный дизайнер в Twitter, сооснователь приложений 52 Weeks of UX, FFFFallback и the Shares и бывший UX-директор в Socialcast[175].

Создание продукта — хлопотное дело. Спросите об этом Джейка Соломона, ведущего дизайнера раскритикованной игры XCOM: Enemy Unknown.

Всецело увлекшись видеоиграми, он направил свою страсть на работу со знаменитым дизайнером, идейным вдохновителем легендарной классики Pirates! и Civilization Сидом Мейером и его компанией Fixaris.

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

Еще будучи ребенком, Джейк увлекся игрой XCOM: UFO Defense. С первых дней в Fixaris он лоббировал идею создания современной версии XCOM. Как писал Polygon[178], он настолько верил в свою мечту, что та стала дежурной остротой.

Тем не менее его настойчивость дала результат: Джейк Соломон получил небольшую команду и несколько месяцев, чтобы придумать прототип новой XCOM.

Но Джейк дал маху. А потом еще и еще раз. На протяжении почти пяти лет.

В интервью он сказал:

Имея за плечами опыт разработки нескольких десятков успешных игр, Мейер отлично знаком с этим этапом, он называет его «долина отчаяния».

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

Но единственный способ освоить эту «долину» — продолжать двигаться вперед. Иногда для этого приходится вспомнить об основах. Что и сделал Джейк Соломон. После многочисленных безуспешных попыток получить права на XCOM Соломон и Мейер вернулись к истокам — к настольной игре.

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

«Мы нарисовали землю и сказали: “Окей. У нас игра-стратегия о вторжении инопланетян. И как это работает?”, — говорит Соломон. — С самого начала вам нужно ответить на вопрос: “Какие существуют варианты действий? Что игрок делает на каждом этапе?”. Игра происходит в реальном времени, но есть отдельные моменты, когда игрокам необходимо сделать выбор. Какие существуют альтернативы? Как игрок выбирает тот или иной вариант? Как он поступает?»[179].

Впоследствии XCOM: Enemy Unknown добьется огромного успеха — станет одним из бестселлеров 2013 года на PC, Xbox и Playstation и получит оценку 89 от Metacritic. Большое достижение для не-ААА игры[180]^, [181].

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

Возьмем, например, одного из величайших героев научной фантастики — Чубакку из «Звездных войн».

Образ иконы красных дорожек не одномоментно возник в голове у Джорджа Лукаса или легендарного дизайнера Ральфа Маккуори (рис. 8.1).

Рис. 8.1. Великолепный Kitbashed.com Майка Хейлемана, отображающий хронику создания «Звездных войн», приводит ранние концепции Чубакки от Маккуори. Образ, определенно, изменился

Хейлеман пишет:

Чубакка не появился из ниоткуда. Его образ сформировался, когда Лукас увидел свою собаку на пассажирском сиденье автомобиля. Это реплика. Один шаг. Многокомпонентная реальность. Из неопределенности рождается идея, изменяя цели и роли персонажей, серьезно их реструктуризируя, представляя вещи в ином свете. Мы перескакиваем от одного персонажа к другому, ломаем существующую концепцию и начинаем двигаться по иному пути, сопоставляя концепции и дополняя одну другой… «Звездные войны» — это не подарок мистической музы и не итог работы необузданного вдохновения[182].

Для любой творческой деятельности — в том числе и для разработки продукта — процесс выглядит примерно одинаково (рис. 8.2). Это поток улучшений перед каждым запуском.

Рис. 8.2. Модель создания продукта: путешествие — это серия уточнений по пути к верности клиентов

Но откуда берутся эти уточнения? Обратная связь или критический анализ от команды, друзей, семьи, бета-тестировщиков или, как мы надеемся, клиентов?

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

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

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

Подобное состояние довольно распространено в ролевых играх, таких как World of Warcraft, Mass Effect или, одной из самых моих любимых, Knights of the Old Republic II (рис. 8.3).

Рис. 8.3. Экран навыка из Knights of the Old Republic II показывает, что требуется игроку, чтобы его персонаж перешел на следующий уровень

Секрет привлекательности бесконечного цикла — в возможности улучшения способностей. С каждой новой единицей снаряжения, которое игрок World of Warcraft получает в рейде, игра становится немного проще. Боссы, которые «роняют» следующий предмет снаряжения, быстрее терпят поражение. С каждым выполненным заданием характеристики персонажа не просто становятся все более совершенными, они еще и улучшаются все быстрее. Положительная обратная связь подводит игрока к выводу, что он особенный: его сила растет постоянно и непреодолимо[183].

Усиление потока происходит по кривой: крупный успех на ранней стадии, за ним следует длительный поступательный рост, а затем, когда игрок приближается к финалу игры, — более быстрое прохождение уровней (рис. 8.4).

Рис. 8.4. Кривая ускорения потоков в ролевых играх

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

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

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

• Команда.

• Существующие пользователи и/или клиенты.

• Потенциальные пользователи и/или клиенты.

Давайте более подробно рассмотрим каждый из источников и разберем эффективные способы сбора и подключения обратной связи.

Есть два варианта критики от партнеров по команде: неформальная (личная) и развернутая.

Давайте вернемся к главе 3, где мы говорили о том, кто определял, каким будет конечный продукт. Просите об обратной связи лицом к лицу, неформально — это отличный способ получить отзывы на ранних этапах и выявить проблемы. В идеале люди должны быть из различных подразделений — из маркетинга, продаж, разработки и т. д. Узнайте у них все, что сможете. Просите о конкретной обратной связи. Это одна из причин, почему важно быстро получить прототип. Дополнительный эффект? Люди чувствуют себя более вовлеченными в процесс, поскольку их голос услышан и непосредственно повлиял на траекторию развития продукта.

Джош Брюер, бывший главный дизайнер в Twitter, в интервью сказал об этом так:

Подобный подход используют и в Pixar. Braintrust — «система доставки прямолинейной обратной связи. Braintrust-встречи проходят раз в несколько месяцев, на них мы оцениваем каждый из фильмов, над которыми работаем. Замысел прост: соберите умных, увлеченных людей в одной комнате, сделайте их ответственными за выявление и решение проблем и поощряйте их искренность»[184].

Использование творческого подхода позволило Pixar обеспечить кассовые сборы на сумму почти 10 млрд долларов по всему миру[185]. 14 фильмов и 14 хитов номер один. Braintrust — основной элемент управления творческим процессом, обеспечивающий правильный баланс откровенности и конструктивной обратной связи.

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

«Давать отзывы — обычная практика в коллективе дизайнеров, — пишет Бенедикт Ленерт из Wunderlist. — Обзоры дизайна (дизайн-ревью) формируют пространство, в котором дизайнеры могут показывать и конструктивно критиковать работы друг друга на протяжении всего процесса создания продукта, таким образом повышая его качество. Наверняка вы знаете, что цель обратной связи — помочь коллегам-дизайнерам добиться успеха в работе… Так что случится, если вы разрешите комментировать дизайны всей компании?»[186]

Дизайн-ревью имеет важное значение для команды дизайнеров, однако существует риск, что со временем они слишком замкнутся в себе. Инновации Ленерта в Wunderlist — прекрасный шаблон для продуктовых дизайнеров, чтобы быть начеку и принимать жесткую внутреннюю обратную связь.

Как директор по дизайну, Ленерт организовал в Wunderlist «Открытые дизайн-ревью», на которых два раза в месяц продуктовые дизайнеры рассказывали о своих проектах и задавали актуальные вопросы.

Дизайн-ревью мне нравятся по нескольким причинам:

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

• Они четко определяют ожидания всех сторон: кто должен быть готов, когда и к чему.

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

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

Получение обратной связи от клиентов отличается от критического анализа со стороны команды.

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

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

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

Я рад, что вы спросили. Давайте начнем с вопроса «с кем?», а затем перейдем к вопросу «как?».

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

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

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

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

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

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

Пытаетесь улучшить процесс регистрации? Отлично. Найдите тех, кто недавно начал процесс регистрации, а еще лучше — тех, кто его не завершил, и узнайте об их опыте.

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

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

Шах подчеркнул, что получение обратной связи от ограниченного числа существующих клиентов помогает, а не вредит процессу.

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

Что вы делаете, когда создаете продукт с нуля, запускаете стартап или замахиваетесь на новую категорию?

Один из шагов — привлечь новых клиентов за счет исследования, которое вы проводили. Но это рискованно.

Помните, что такое интенсивное этнографическое исследование — сафари продаж? Мы рассматривали его в главе 2. Речь о том, что не следует пытаться узнать у случайных людей, что они думают о вашем продукте. Люди не знают, чего они хотят. И (только если вы, конечно, не эксперт, способный исключить любую ошибку из своего вопроса) существует высокая вероятность, что то, что вы намереваетесь сделать, неправильно. Не уподобляйтесь Дональду из шоу «Кремниевая долина», который бродил по Сан-Франциско и терроризировал людей безумными:

«Заинтересовались? Сильно заинтересовались? Или просто очень интересно?»[189]

История переполнена трупами технологических стартапов, которые пытались выяснить у случайных людей в Starbucks, что те думают об их продукте.

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

[Скотт] Кук пересмотрел основные принципы P&G: новые продукты должны создаваться с учетом фактического поведения потребителей, а не того, что те, по их словам, хотели бы сделать. Вот что пишут об этом авторы книги Inside Intuit («Внутри Intuit»):

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

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

Индивидуальный подход может быть по-настоящему полезен для выявления проблем с вашим питчем. Джош Элман из Greylock, Twitter, Facebook и Zazzle описывает это более подробно.

Второй подход — открытое приглашение на тестирование закрытой бета-версии продукта. Именно так был когда-то запущен Dropbox (рис. 8.5). Этот подход, однако, требует большей подготовки. Необходимо ввести обязательную регистрацию в системе и придумать способ, как распространять доступы в систему, чтобы внутрь не могли попасть те, кого вы не приглашали. И наконец, вам необходим способ контролировать использование продукта, чтобы иметь возможность отслеживать действия клиентов без искажения результатов.

Рис. 8.5. Слайд ранней презентации Дрю Хьюстона

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

А вот анализ — это совершенно другая тема. Так как же анализировать обратную связь от клиентов?

АНАЛИЗ ОБРАТНОЙ СВЯЗИ ОТ КЛИЕНТОВ

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

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

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

«Люди узнают один факт, получают одного потенциального клиента или покупателя и думают: “Отлично. Вот оно. Сейчас все сделаем”. Но такой подход обречен на неудачу», — говорит Эми Хой.

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

Здесь возможны две проблемы.

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

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

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

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

Самое большое преимущество, которое вы получите, — не создавать ненужную вещь. Конечно, пытаться разобраться, что на самом деле имели в виду существующие и потенциальные клиенты, — изматывающий опыт, но он менее болезненный, чем работа над неправильным продуктом и запуск в никуда.

Джон Кроуфорд, СЕО и основатель e-commerce компании Storenvy, говорит об этом так:

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

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

• Для любой творческой деятельности — в том числе для разработки продукта — процесс выглядит примерно одинаково. Это цепочка улучшений перед каждым запуском.

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

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

• Критический анализ команды может варьироваться от Braintrust-встреч, как в Pixar, до «открытых дизайн-ревью», как в Wunderlist, или представать в виде внутреннего бета-продукта.

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

• Минимум, что вам следует сделать, это разработать прототип. И сделать это до Braintrust-встречи, чтобы все участники процесса были в курсе результатов исследований и знали основные характеристики продукта, который вы пытаетесь сделать.

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

• Не создавайте неправильную вещь. Проанализируйте обратную связь и серьезно отнеситесь к сделанным выводам. Это ваш шанс скорректировать свой курс.

Руби Анайя — директор по социальным продуктам в WeWork. Ранее работала в Yahoo, Tomfoolery и AOL.

Томас Эдисон в центре общественного внимания.

1882 год. Прошло уже несколько лет с тех пор, как в новогодний вечер 1880 года он распахнул ворота своей лаборатории в Менло-Парк, ослепив гостей электрическим светом. Тогда впервые мир увидел мощь электрического освещения. Для такого случая Эдисон даже сделал праздничные гирлянды[194].

Примерно 3000 ничего не подозревающих, но скептичных зрителей прибыли вечером на платформу пригородного поезда в сонной Менло-Парк. Картина, которая предстала их взору, превосходила даже то, что они видели на Манхэттене (находящемся всего в 20 милях): деревушка была залита немерцающим светом электрических лампочек[195].

Энергия толпы (нет, это случайная шутка), должно быть, передалась Эдисону, который публично пообещал обеспечить новой технологией и городские улицы, начиная с Перл-стрит в Нью-Йорке. Перенос электричества из лаборатории в большой мир не был легкой задачей. Эдисону требовалось не только воссоздать саму технологию, но и придумать все компоненты электрической системы (розетки, генераторы, выключатели и т. д.), а также привлечь первых клиентов. Ух![196]

Как будто этого было мало, но у Эдисона вдобавок еще и не имелось ценовой модели. Он собрал несколько команд, которые должны были провести исследование рынка. Сколько люди платят за газ? Какую сумму они готовы платить за электричество и оборудование?

Несмотря на обещание, Эдисон не стремился немедленно его выполнять. Критиков становилось все больше. Неужели его обещание — всего лишь пустые слова?

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

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

Но как понять, что он уже готов? И как выпустить готовый продукт в реальный мир?

Простой ответ таков: продукт готов… когда он готов.

Я не пытаюсь звучать пафосно. И нет, я не пытаюсь придумать фразу, которую вы немедленно захотите показать миллиардам своих читателей в Twitter.

Дело в том, что «запуск продукта» — это просто модные словечки, ничего более.

Пора сжечь корабли.

К черту! Запускаемся.

Концентрируемся и продолжаем запускаться.

Такие мысли — это неплохо. Но вообще продукт в идеале постоянно совершенствуется, поскольку вы узнаёте что-то новое о своих пользователях и стараетесь лучше соответствовать их потребностям.

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

Мне нравится, что по этому поводу говорит Кэт Нуун, успешный предприниматель и продуктовый дизайнер:

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

И, к сожалению, запуск ради запуска не исправит ситуацию.

Если вы находитесь на этой стадии, сделайте шаг назад. «Нельзя путать скорость и поспешность: людям не нужны неправильные ответы, даже если они получили их в рекордно короткие сроки», — писал Кеннид Боулз, бывший дизайн-менеджер Twitter. Добейтесь правильных ответов.

Именно это прекрасно понимали в Facebook. В 2014 году Марк Цукерберг открыто заявил о пересмотре своего знаменитого принципа Move fast and break things («Двигайся быстро, ломая все на пути»), который красовался на стенах офиса компании и в рекламных проспектах IPO.

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

Говоря о технологических гигантах, можно упомянуть и Apple. Со стороны кажется, будто Тим Кук и Джони Айв выводят продукты на рынок, лишь добившись их «волшебного» совершенства. В конце концов, в их распоряжении больше денег, чем у Министерства финансов США. С такими доходами нужно ли им следить за дедлайном?

На самом деле все обстоит иначе. «Компания не только устанавливает внутренние дедлайны, но и определяет дедлайны для дедлайнов, у которых есть свои дедлайны, — писал бывший старший дизайнер Apple Марк Кавано (сейчас он возглавляет Storehouse — компанию, предлагающую услуги хранения фотоизображений). — Производственный цикл, от начального этапа до даты поставки, тщательно распланирован»[199].

«Подожди-ка, автор, — можете подумать вы. — Ты же сам только что сказал, что продукт можно запускать, только когда он готов. Что-то не сходится».

Как вам такой поворот? Кавано продолжает свою мысль:

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

Цель запуска — создать «минимально привлекательный продукт» (Minimum Loveable Product, MLP). Этот придуманный Кэт Нуун термин отражает стремление подготовить продукт, который будет не только решать проблемы пользователей, но и устанавливать с ними эмоциональную связь.

Нуун пишет:

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

Но, как заметил Бен Бёрт, знаменитый звукорежиссер «Звездных войн», описывая съемочный процесс: «Фильмы не выпускают в прокат, они сбегают сами».

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

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

У каждого из нас свой способ контролировать задачи. Доски в Trello. Стикеры Post-It. Wiki-справочники по проектам. Неважно, каким инструментом пользуетесь вы. Постройте ясные отношения со своей командой. Расскажите им, качество какого уровня вы ждете. Убедитесь, что они понимают, что вы от них ждете. И не забудьте убедиться, что каждый занимается тем, чем должен.

Кэт Нуун рассказала мне, что она и сооснователь компании используют общий доступ к спискам Wunderlist, чтобы отслеживать все, что должен сделать перед запуском небольшой стартап (рис. 9.1).

Рис. 9.1. Команда Кэт Нуун использует меняющиеся в режиме реального времени списки Wunderlist, чтобы не забыть даже о мелких, но важных задачах

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

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

Кейтлин Фридсон, дизайнер мобильных продуктов компании Care.com, использовала сочетание Jira[200] и общих документов в Google Docs. За задачами в Jira могут следить все участники процесса (рис. 9.2), и для каждой из них есть ссылка на документ, в котором подробно описывается каждая функция (рис. 9.3).

Рис. 9.2. При запуске продуктов Care.com Кейтлин Фридсон использует комбинацию Jira и Google Docs

Рис. 9.3. Кейтлин Фридсон использует Google Docs, чтобы глубже изучить пользовательские сценарии

Jira нужна мне для создания пользовательских историй (к каждой задаче можно добавить описание из нескольких абзацев), там удобно отслеживать их изменение. Но еще больше мне нравится использовать Jira в сочетании с Google Docs. Так я могу вносить изменения в режиме реального времени: если что-то в задаче устаревает, я оставляю комментарий об этом и затем обновляю описание. А команда разработчиков может отслеживать все изменения и не упускать ничего из виду.

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

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

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

Когда запуск произойдет, а вы хорошенько отметите это событие — кстати, уверяю, вам точно стоит его отпраздновать, — за чем стоит следить? Над чем подумать? Что проанализировать?

Тимони Уэст и Кайл Бреггер — они создавали продукты для Foursquare, Flickr и Elepath — независимо друг от друга рассказали мне секрет успешного запуска: отслеживать обращения в техподдержку.

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

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

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

Тимони Уэст говорит:

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

Кайл Бреггер соглашается:

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

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

В Care.com Кейтлин Фридсон занималась изучением пользовательских форумов, рейтингов и отзывов в App Store, сообщений в колл-центр и многим другим. В интервью она сказала, что быстро поняла, что «нужно научиться сопротивляться желанию немедленно все исправить после каждого нового сообщения».

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

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

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

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

Немало людей будут желать вам провала: конкуренты, враги, неудачники. Так происходит, потому что вы — будущее.

Джош Элман — опытный лидер продукта, известный своими революционными проектами, которые изменили процесс человеческого общения. Он возглавлял продуктовые команды в Twitter, Facebook, LinkedIn и Zazzle. В настоящее время Джош — один из партнеров в венчурной компании Greylock.

Кэт Нуун — опытный продуктовый дизайнер. В настоящее время она работает над Iris, приложением, которое уведомляет близких человека о том, что с ним произошел несчастный случай.