Скотт Хёрф - Как создать продукт, который полюбят

Затем мы удаляем ненужные детали, увеличиваем точность своей работы и двигаемся в направлении того, что мы можем предложить клиентам (рис. 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 выходит на сцену, когда разработчик продукта всего этого не учитывает. Это значит, что где-то в процессе работы нарушаются какие-то правила.