Как создавался April Zero

Как создавался April Zero

Часть 1

Это первая глава истории о том, как я проектировал первый сайт April Zero. Я покажу наброски, отброшенные концепции и старые прототипы и расскажу, как всё это менялось по пути.

Если захотите попробовать сами, теперь можно зарегистрироваться в Gyroscope.

Март 2014: вдохновение

Пора двигаться

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

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

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

Кто-то, возможно, пробовал Moves или похожие приложения раньше и мучился с зарядом батареи. Долгое время любые приложения с GPS или отслеживанием движения (Nike, Find My Friends, Highlight и прочие) были ужасны, потому что мгновенно съедали батарею. А потом вышел iPhone 5S. Но за слухами о готовящихся iWatch прорывной выпуск процессора M7 у Apple прошёл почти незамеченным, в том числе и мной.

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

Удары сердца

Примерно тогда же мне рассказали о приложении Cardiio, которое умеет измерять пульс камерой iPhone. Я скачал его в основном потому, что не верил, что это работает. Мне было совершенно всё равно, как часто бьётся моё сердце.

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

По-настоящему меня зацепило то, что у хорошо тренированных спортсменов пульс покоя обычно ниже. Ниже, значит лучше. Это был очень простой способ объективно измерить своё текущее состояние. И это было весело.

Как-то на неделе я заметил, что пульс аномально высокий, около 80 или 90 там, где обычно ближе к 60. Я из-за чего-то нервничал? Я вышел на долгую пробежку, а на следующий день проверил снова. Снова 60. Любопытно…

Как будто я поставил себе в тело New Relic. Я привык смотреть на графики и чинить неполадки. Только теперь вместо сервера было моё тело.

Беги, чтобы жить

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

Вместо этого я начал бегать. Я как раз отходил от тяжёлого расставания, и это здорово помогало. Раньше я иногда пользовался беговым приложением Nike, пробегал милю-другую, но серьёзных объёмов никогда не набирал. Приложение с GPS убивало батарею, так что удовольствия было мало.

А теперь, с M7, колени сдавались гораздо раньше телефона. Навороченные беговые часы Garmin или Fitbit, о которых я подумывал, стали не нужны. Легко оправдываться тем, что не хватает какого-то важного инструмента, но всё, что мне было нужно, уже лежало у меня в кармане.

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

В этом сходились три моих страсти: бег, фотография и желание внимания. Это было гениально. Отличное было время для бегуна: Runkeeper, Strava, Nike и прочие, вокруг было полно хороших инструментов и сообществ.

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

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

Показатели крови

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

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

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

Процент жира

В книге The 4 Hour Body, Тим Феррис рассказывает о разных приборах и тестах, которыми он себя измерял. Один из них, портативный USB-аппарат УЗИ для точного измерения процента жира. Я и так взвешивался, но знание процента жира дало бы куда лучшее понимание того, что меняется.

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

Я видел, как процент жира подскакивает на выходных после эпических читмилов, а на следующей неделе падает ещё ниже. Данные я получал отличные, а вот интерфейс приложения и подача, нет.

Мне хотелось видеть, как это связано со всем остальным, что я делаю.

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

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

Апрель 2014: первые наброски

Сетка из показателей

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

Даже если я обленюсь или сильно закопаюсь в дела, сайт всё равно не заплесневеет. Я же всё равно буду бегать, слушать музыку или выкладывать новые фотографии в Instagram!

Почему наброски важны

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

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

Планшет Wacom

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

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

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

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

Это был крепкий и рабочий дизайн, но не лучший в мире.

Стайлгайд April Zero

Это было будущее. Возможность как по волшебству анализировать всё о себе и делиться этим не менее фантастична, чем полёты человека или электричество. Мне хотелось, чтобы оно и ощущалось таким же футуристичным, каким было на самом деле.

Когда я строю бренд, я обычно собираю мудборд, чтобы быстро прикинуть разные стили и понять, из чего складывается нужное настроение. Годится что угодно: кадры из фильмов, фотографии, билборды, скриншоты других приложений и прочее. Я часто черпаю вдохновение в моушн-дизайне и рекламе, где хорошие бюджеты и потрясающие авторы. Много отличного находится и на Dribbble с Behance.

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

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

Теперь, когда и содержание, и стиль стали понятнее, пора было возвращаться к чертёжной доске…

Версия 2

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

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

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

«Aviation», журнал всех полётов, пока я учился на пилота

«Underwater», журнал погружений, пока я получал сертификат по дайвингу

«Digital», чем я занимался за компьютером (дизайн, код, скринкасты и прочее)

«Finance» , траты и полоса прогресса на пути к миллиарду

«Love», измерение личной жизни и так далее

Что-то, возможно, пришлось бы закрыть паролем…

Дизайн для Sport

Раздел Sport собрал бы всё, что связано с формой и медициной: текущие показатели крови и рост результатов со временем.

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

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

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

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

Мне хотелось, чтобы всё можно было исследовать и трогать. Наведение показывало бы подробности, ведь под капотом лежало много данных, которые можно раскрыть.

Спиннер

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

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

Так и родился этот спиннер. Мне хотелось сделать что-то настолько же приятное в использовании и революционное, как первый iPod.

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

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

Ранние прототипы в коде

Это хороший пример ситуации, где очень полезно решать задачу и дизайном, & кодом. Важно было, чтобы страница хорошо выглядела, но не менее важно было понять, как она ощущается & движется. Для этого я собрал простой прототип на лёгком Javascript внутри контейнера Jekyll, который изначально предназначался для блога.

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

В версии 3 (ниже) появились кольца и javascript для новых взаимодействий, например вращения круга при наведении на текст.

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

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

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

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

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

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

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

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

Explorer

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

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

Теперь предстояло придумать, как показывать перелёты, смену часовых поясов, пробежки в Центральном парке и счётчик съеденной пиццы. Поездка оказалась очень кстати: я быстро наткнулся на кучу проблем с тем, как Moves работает с часовыми поясами, и это нужно было учесть. Останься я в Сан-Франциско и положись на старые парижские данные для международных тестов, всё бы взорвалось в следующую же поездку через часовые пояса.

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

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

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

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

Версия 9 была на светлом фоне, но в версии 10 я перешёл на тёмный, чтобы места ярче выделялись и всё совпадало по стилю с остальным сайтом.

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

А потом я как-то решил поработать на улице, в парке. Раздел ведь назывался Explorer.

И… я ничего не смог прочитать.

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

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

Теперь предстояло решить: оставить тёмную тему, потому что в помещении она красивее для 95% людей, или имеет смысл переделать всё на светлую. Раз это случилось со мной, это может случиться и с кем-то ещё, а главное, может снова случиться со мной.

Иногда, когда застреваешь или упираешься в кочку, надо просто идти дальше и продавливать, бросая на задачу часы, пока она не решится. В других случаях лучше переключиться и зайти с другой стороны. Я сделал тёмную версию (11) и светлую (12) для архива и решил заняться другими задачами.

Как показать поездки

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

Сводная статистика

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

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

Делаем адаптив

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

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

Мне надоело играть с одними и теми же данными. Дизайн двигался, но чего-то всё ещё не хватало. Нужна была смена обстановки и свежий взгляд.

Я работал в кофейне (Coffee Bar, 6 мая), когда мне написал друг.

Идеальное время.