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

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

В закладки
Аудио
Ян Спалтер на презентации нового стиля Instagram​ highresolution.design

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

Nike+ FuelBand

В начале карьеры, в 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 владельца.

Одним из подходов в разработке для нас стала мантра «телефон, ключи, бумажник, FuelBand». Устройство должно было стать тем, что вы захотите всё время носить с собой. Но тогда шагомер был как постыдное клеймо. Его мог заставить носить врач. Устройство напоминало, что у вас лишний вес, фитнес-браслфеты не были тем, что хотелось надеть.

Ян Спалтер
​Фитнес-браслет Nike+ Fuelband

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

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

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

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

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

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

Ян Спалтер

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

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

Foursquare

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

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

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

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

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

Старый ​Foursquare 6.0
iclarified.com
​Обновлённый Foursquare 7.0
iclarified.com

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

​Страницы заведений в Foursquare 6.0 и 7.0
https://foursquare.tumblr.com/

YouTube

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

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

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

​YouTube после редизайна в 2014 году
pr-cy.ru

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

Instagram

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

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

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

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

Презентация работы над логотипом Instagram

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

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

Но в конечном счёте к логотипу привыкли. И разве можно сегодня представить Instagram другим? Люди вообще не любят перемены. Весь мир говорил одно, а чутьё подсказывало нам совсем другое.

Ян Спалтер

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

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

​Instagram до и после редизайна
techcrunch.com
​Редизайн иконок семейства приложений Instagram, Layout, Boomerang, Hyperlapse
medium.com/@ianspalter

За несколько лет число пользователей 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 искали самый подходящий эффект, рассказывал дизайнер.

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

​Спалтер рассказывает о новых функциях Instagram на мероприятии Apple iPhone 7 Media в Сан-Франциско apple.com

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

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

Креативные приёмы

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

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

Приём первый: работа в обратном порядке

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

Я писал релизы, как в игре Mad Libs (популярная в США игра, в которой нужно вписывать в текст пропущенные слова — vc.ru), а дизайнеры заполняли пробелы, добавляя качества, которые ожидали от продукта. Это помогало понять, что важно. И убедиться, что клиент и команда R/GA имели одну и ту же цель.

Ян Спалтер

Приём второй: рисовать пользователя

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

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

Приём третий: карта успеха

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

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

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

Дизайн и игры

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

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

  2. Бездельники изображают видимость деятельности, хитрят и проигрывают. Это Теон Грейджой.

  3. Соперники — два таланта, которые больше думают о том, как уничтожить друг друга, а не об общей цели, как Серсея и Тирион Ланнистеры.

  4. Независимые предпочитают работать обособленно и удалённо, а не в команде — это Варис и Мизинец.

  5. Созависимые одновременно являются командой, которая переживет любой шторм, могут создавать по-настоящему хорошие вещи, но с трудом справляются поодиночке, как Серсея и Джейме Ланнистеры, Ходор и Бран.

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

Лекция Яна Спалтера “Best Practices for UX/Product Integration”. Какая пара иллюстрирует шестой тип, неизвестно: запись обрывается на этом моменте

Дизайн и данные

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

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

Кадр из фильма Netflix

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

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

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

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

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

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

Ян Спалтер

UX и ограничения

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

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

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

Эти устройства действительно меняют нас, и мы пока не знаем, куда они нас заведут. Сейчас у моих детей нет телефонов. Даже старший, а ему 12 лет, чётко дал понять, что смартфон ему не нужен.

Ян Спалтер

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

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

Кадр из фильма Netflix

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

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

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

{ "author_name": "Александра Домина", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","instagram"], "comments": 8, "likes": 38, "favorites": 172, "is_advertisement": false, "subsite_label": "design", "id": 109122, "is_wide": false, "is_ugc": true, "date": "Sat, 29 Feb 2020 18:34:48 +0300", "is_special": false }
0
8 комментариев
Популярные
По порядку
Написать комментарий...
5

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

Ответить

Комментарий удален

3

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

Чувак что-то знает.

Ответить
4

Сидит с левого, очевидно же!

Ответить
1

Мне кажется, неудачный пример:)

Ответить
3

 у его детей нет смартфонов

и они носят шапочки из фольги

Ответить
2

О, оказывается вышел второй сезон сериала Абстракция: Искусство дизайна.

Ответить
2

От дизайнера интерфейса Инстаграмма меньше всего хочется знать приемы проектирования.

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

0

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

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

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

Ответить

Прямой эфир