Джон Траутман — сооснователь и главный креативный директор компании Canary, которая разрабатывает и продает охранные системы и программное обеспечение для дома. Компания была основана как краудфандинговый проект на Indiegogo и впоследствии стала самым успешно профинансированным проектом, собравшим около двух миллионов долларов. Джон также сооснователь Дискуссионного клуба разработчиков и бывший продуктовый дизайнер коворкинговой компании General Assembly.
Я хотел бы узнать, как строится процесс вашей работы над продуктом. Начинаете ли вы с создания эскизов? Какие инструменты используете?
Один из важнейших моментов моей работы — помощь моих сотрудников. В начале карьеры я хотел быть независимым и решать все вопросы самостоятельно, и хотя, что скрывать, эта черта во мне частично сохранилась, сегодня мне придает сил огромная поддержка моей команды. Мне кажется, именно совместное обсуждение, планирование и обмен знаниями на начальном этапе, в противовес ситуации, когда дизайнеры и программисты расходятся по разным углам, является ключевым в рабочем процессе.
И, пожалуй, еще некоторые инструменты. Может показаться странным, но зачастую я начинаю работу в TextEdit.
Правда?
Да, и это забавно, потому что этот инструмент не позволяет работать с визуальной составляющей. TextEdit — канва для создания контента, на которой я записываю то, что точно появится на странице или в приложении. Я упорядочиваю свои мысли именно в TextEdit без каких-то конкретных причин — сейчас мне удобно и привычно с ним работать, — но изначально ограничения формата вынуждали меня думать не о визуальных элементах продукта, а прежде всего о его контенте. Потом, когда я приступал к работе над сайтом или онлайн-приложением, мне достаточно было просто взять информацию из TextEdit, закинуть ее в HTML и добавить теги.
Звучит здорово!
В течение шести месяцев я работал над редизайном сайта General Assembly. При этом начинать приходилось с нуля. Прежде всего мы прописали контент.
Мы с командой начали работу в TextEdit, чтобы быть уверенными, что это будет именно тот контент, который все мы хотим видеть на странице. Как только мы добились правильного содержания, нам не составило труда превратить текст в HTML-прототип, при этом нам не пришлось его стилизовать. Затем мы провели проверку: переходили по ссылкам, чтобы убедиться в правильности и логичности последовательности действий и структурированности информации, и только после этого увеличили точность данных.
Если при разработке проекта вы используете код, то можете добавить базовые CSS-стили, чтобы улучшить внешний вид и создать подобие структуры.
Все это своего рода наброски. Самое эффективное — сделать несколько эскизов, затем проработать визуальные детали, после чего отступить на шаг назад, к CSS, и добавить соответствующий набор правил. Именно так я создаю сайты. Сейчас я делаю исходное приложение для iOS и полагаю, что, хоть эта задача и более высокого уровня, инструменты и процессы будут аналогичными. Но пока я вижу в этой задаче вызов, поскольку это первое платформозависимое приложение, над которым я работаю. И принцип деятельности несколько иной.
С текстом связана одна особенность: кажется, что он не имеет отношения к разработке, но интернет — это именно текст. Поэтому контент имеет огромное значение, и я не должен об этом забывать.
Я записываю текст, который действительно появится на экране. Это гораздо эффективнее, чем ввести Lorem ipsum, шаблон заголовка и тому подобное. Я размещаю реальный контент, и поэтому впоследствии мне не приходится выбирать шрифт и его размер — все уже будет готово. Ориентированность на мобильные платформы имеет первостепенное значение, даже если вы разрабатываете сайт, который не поддерживает мобильную версию. Такой подход структурирует мышление: пользователь видит один элемент за раз или просматривает их в линейном формате. TextEdit приучает к линейности. Начинаешь задумываться о важности информации: какие данные и в какой последовательности необходимо сообщить, нужно ли распределять контент между несколькими страницами или схемами. Расставляешь приоритеты и в соответствии с ними структурируешь контент. Отсекаешь всю ненужную информацию, делаешь фразы более короткими и емкими и начинаешь переорганизовывать данные. Это основная составляющая моего рабочего процесса, и я делаю это все время.
Не кажется ли вам, что в этом случае написание текстов становится более емким процессом, поскольку на начальном этапе все внимание уделяется именно ему?
Это именно так. И я считаю, что копирайтинг — неотъемлемая часть разработки. В этом случае вы не станете подгонять текст под дизайн, это совершенно неправильно.
Круто. А теперь не могли бы вы напомнить, как именно вы создаете HTML-прототипы с высокой точностью? Как выглядит этот процесс?
Например, работая с сайтом General Assembly, я должен был сначала спроектировать его информационную архитектуру, все правильно структурировать, а затем передать файлы коллегам. Я буквально архивировал HTML-документы и рассылал папку некоторым членам команды. Они извлекали файлы из архива, перетаскивали один из них в браузер и просматривали нестилизованный или предварительно стилизованный сайт. В течение дня они обдумывали увиденное, а я в это время продолжал экспериментировать с дизайном, перемещая элементы и меняя их в HTML, чтобы добиться более высокой точности прототипа.
В какой момент вы и ваша команда принимаете окончательное решение, что прототип готов, и переходите к следующему этапу?
Каждый раз в разные моменты. Если мы не отправляем продукт клиенту, а, как молодожены, проводим с ним все время, то решение, что текущий этап завершен, приходит само собой, как только уровень детализации становится достаточно высоким.
Нужно быть ответственным. Мне нравится итеративная разработка, поскольку вся деятельность в таком случае воспринимается как набор шагов. Я всегда совершенствую продукт, выбрасываю ряд старых элементов и пробую новые, но в то же время я очень ответственно подхожу к работе, в которой участвую.
