Анализ данных, рисование, «Игра престолов»: приёмы проектирования интерфейса от бывшего дизайнера Instagram Яна Спалтера

Руководивший отделом дизайна Спалтер создал новый визуальный стиль сервиса и запустил «истории». При этом у него закрытый аккаунт, на который подписаны менее 500 человек, а у его детей нет смартфонов.

UX-дизайнер Ян Спалтер возглавлял работу над первым фитнес-браслетом Nike+ Fuelband, изменил дизайн приложения Foursquare под новый на тот момент стиль iOS 7 и работал над оформлением YouTube. Спалтер разработал новый логотип Instagram, запустил «истории» и до конца 2019 года руководил всеми визуальными изменениями приложения.

В начале карьеры, в 1999–2003 годах, Спалтер разрабатывал интерфейсы этнических социальных сетей BlackPlanet.com, AsianAvenue.com и MiGente.com (сейчас работает только BlackPlanet).

На тот момент он был вице-президентом по управлению продуктами и UI-дизайну в Community Connect — компании, которая создавала сайты этих соцсетей. Это были первые масштабные проекты Спалтера, связанные с разработкой интерфейса, объединяющего миллионы людей. Позже соцсети стали его основным профилем.

Первой известной работой дизайнера стал интерфейс фитнес-трекера Nike+ FuelBand, созданный в 2011–2012 годах. Nike разработала устройство в сотрудничестве с Apple, вначале оно синхронизировалось только с iOS.

Интерфейс и дизайн поручили креативному агентству R/GA, в котором работал Спалтер. В итоге он возглавил креативную команду со стороны Nike+.

До создания Fuelband агентство R/GA разработало для Nike и Apple приложение Nike+ Running. Оно считывало данные спортсмена и синхронизировало их с устройствами Apple.

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

Cпалтер рассказывал, что в создании FuelBand опирался на опыт приложений для бега Nike+ Running и Nike + GPS, над интерфейсами которых работал ранее. Он изучал, зачем пользователи следят за своими данными, как это меняет их поведение и что в этом важного. Дизайнер искал решение, которое бы мотивировало людей.

Разработчики остановились на такой механике: Nike+ Fuelband фиксировал физическую активность пользователя за день и пересчитывал её в NikeFuel — очки, заработанные владельцем браслета. Эти очки переводились в калории в соответствии с личными параметрами: полом, ростом, весом и возрастом.

Каждый день пользователь мог выставлять себе цель по очкам, и когда она достигалась, на браслете высвечивалась надпись «Goal». Эта игровая и соревновательная механика отличала Nike+ Fuelband от похожих устройств.

Работа над Nike+ Fuelband продемонстрировала подход Спалтера к дизайну и интерфейсам: делать приложения удобными, полезными, мотивирующими.

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

В эпоху коллаборации с Nike глава Apple Тим Кук, который входил и в совет директоров Nike, регулярно носил Fuelband. В конце 2013 года часть команды разработчиков Nike перешла в Apple.

В 2014 году корпорация выпустила на рынок собственные часы Apple Watch. В том же году Nike прекратила выпуск FuelBand: решила не развивать направление носимых устройств.

В 2012 году Спалтер занял пост директора отдела UX и дизайна в сервисе Foursquare. Спалтер и команда UX-дизайнеров проекта разработала приложение в новом на тот момент стиле Flat Design, как в iOS 7.

Обновление приложения вышло в декабре 2013 года. Спалтер тогда уже не работал в компании: он перешёл в Youtube. Но большая часть работы велась под его руководством.

Foursquare презентовал обновление как более «изящное, быстрое и умное».

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

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

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

В YouTube Спалтер руководил UX-командой с конца 2013 до середины 2015 года. Тогда видеохостинг начал тестировать концепцию Material Design, разработанную Google.

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

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

Но полный редизайн видеохостинга произошёл только в 2016 году. Спалтер к тому времени уже работал в Instagram.

Отдел дизайна Instagram Ян Спалтер возглавил в 2015 году. К тому времени, после появления iOS 7, почти все приложения перешли на плоские иконки, а Instagram — нет. Смену визуального стиля как раз поручили Спалтеру.

История редизайна Instagram подробно описана в документальном проекте Netflix “Abstract: The Art of Design”, один из эпизодов которого посвящён Спалтеру. В нём создатель и бывший гендиректор Instagram Кевин Систром рассказал, что первой задачей Спалтера было обновить приложение, сделать его более современным. А также создать новый логотип, который не менялся с запуска приложения.

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

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

Пользователи не сразу приняли перемены. Новый логотип, который команда представила в мае 2016 года, получил массу критики. Издание Adweek назвало его претендентом на худшее решение в истории дизайна.

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

Все привычные пользователям инструменты работали без изменений. В противовес критике логотипа приложение получило хорошие отзывы: TechСrunch назвал версию более чистой и более современной.

За несколько лет число пользователей Instagram выросло с 200 млн человек в 2014 году до 1 млрд в 2018 году.

В августе 2016 года в Instagram появились «истории». Впервые исчезающие фото и видео появились в Snapchat. Затем формат скопировали Instagram, Facebook и «ВКонтакте».

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

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

По данным The Wall Street Journal, авторы формата «историй» Snapchat собирали данные о методах, которые использовала Facebook в борьбе за пользователей. В документах, полученных WSJ, говорилось, что глава Facebook Марк Цукерберг (на тот момент уже владевший Instagram) предлагал купить Snapchat. После отказа он якобы заявил, что Facebook будет копировать технологии и станет конкурентом сервиса.

Формат в итоге был заимствован. Через два года после его появления издание Recode назвало «истории» лучшим решением Instagram. Число людей, которые делятся ими, в 2018-м достигло 400 млн человек — на тот момент уже в два раза больше, чем в Snapchat.

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

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

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

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

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

На тот момент число пользователей «историй» Instagram достигло 500 млн.

В 2013 году Спалтер вошёл в списки американского бизнес-журнала Fast Company «Самые креативные люди в мобильной индустрии» и «100 самых креативных людей в бизнесе 2013».

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

В агентстве R/GA, где он занимался проектами Nike, Спалтер обычно создавал пресс-релиз продукта, прежде чем его команда начинала работать над ним.

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

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

Для другого упражнения в Foursquare Спалтер собрал команду вокруг доски «Монополии». Каждую позицию на доске в переименовали соответствии со сценарием: «чекин в баре по совету друга» или «посещение местного кафе».

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

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

В бытность работы в YouTube Спалтер рассматривал взаимодействие менеджеров по продукту и UX-дизайнеров на примере персонажей сериала «Игра престолов». Спалтер выделил шесть типов отношений.

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

И в Nike, и в Foursquare, и в YouTube Спалтер разрабатывал интерфейсы, опираясь на большие объёмы данных пользователей. В одной из лекций он сравнивал Nike, как компанию, которая очень много внимания уделяет дизайну, с YouTube, который теснее связан с анализом данных. По мнению дизайнера, у обеих фирм есть чему поучиться, чтобы создать гибридную модель в своей работе.

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

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

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

В интервью и лекциях Спалтер не раз рассуждал об ответственности и возможном влиянии соцсетей вроде Instagram на общество в будущем.

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

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

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

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

В марте 2019 года Ян Спалтер покинул пост главы отдела дизайна Instagram и переехал в Японию, где возглавил японский офис Instagram.

Переход Спалтера фактически на ступень ниже произошёл спустя полгода после того, как Instagram покинули его основатели: исполнительный директор Кевин Систром и технический директор Майк Кригер. На место Спалтера пришёл Люк Вудс, экс-глава дизайна в Facebook.

Fast Company отмечает, что в последние годы нескольких руководителей Instagram постепенно сменили коллеги из Facebook. Сейчас Instagram возглавляет Адам Моссери, бывший глава новостной ленты Facebook.

#instagram #интерфейсы