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

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

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

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

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

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

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

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

Джон Траутман – сооснователь и главный креативный директор компании Canary, которая разрабатывает и продает охранные системы и программное обеспечение для дома. Компания была основана как краудфандинговый проект на Indiegogo и впоследствии стала самым успешно профинансированным проектом, собравшим около двух миллионов долларов. Джон также сооснователь Дискуссионного клуба разработчиков и бывший продуктовый дизайнер коворкинговой компании General Assembly .

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

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

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

Правда?

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

Звучит здорово!

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

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

Если при разработке проекта вы используете код, то можете добавить базовые CSS-стили, чтобы улучшить внешний вид и создать подобие структуры.

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

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

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

Не кажется ли вам, что в этом случае написание текстов становится более емким процессом, поскольку на начальном этапе все внимание уделяется именно ему?

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

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

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