Кейс: Как команда Pinterest проводила редизайн iOS-приложения

Креативный директор Pinterest Андреас Пильстрём в своем блоге рассказал о процессе редизайна iOS-приложения сервиса.

Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой Sketchapp.

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

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

Спустя 20 лет мои дети играют с игрушками моего детства. Я прямо сейчас слышу, как они стучат ими о деревянный пол в своей комнате. Такие вещи не становятся хуже с годами.



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

Несогласованный интерфейс.
Несвежая визуальная система.
Ощущение оторванности маркетинга от продукта.


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

Пользовательский опыт в Pinterest основан на простоте и единообразии. Мы хотели определить основные принципы построения интерфейса. Я провел несколько недель, создавая различные варианты дизайна, но даже не был уверен, что делать в первую очередь. Это похоже на конструктор для взрослых. Я задумывался над вопросами типа: Почему люди любят Pinterest? Что делает наш продукт уникальным? Кто мы?

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

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

Интуитивно понятный интерфейс,  — не нужно изучать сервис, чтобы понять, как он работает.
Дает пользователю ощущение значимости. Недоверие к системе рождает неудобства. Система показывает правильно подобранные элементы и спрашивает у вас, что ей делать дальше.
Контент важнее всего. Мы спрятали систему от пользователя. Элемент не появится, пока вы не начнете взаимодействовать с ним. Вы решаете, что делать, а не мы.

Анимированный


Цветной. Сервис должен быть узнаваемым.
Визуально-адаптивный. Опыт использования на физическом уровне.
Неожиданный. Веселый и не перегруженный опыт пользователя.

Прочный

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

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

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



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





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



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

Мы хотели узнать, что случится, если просто удалить все контейнеры из интерфейса. Вернется ли фокусировка на объектах или все окончательно разрушится?

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

Создание новых стандартов

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

Для начала решили протестировать iOS-приложение. Первым шагом стала переработка визуальной составляющей дизайна с последующей переработкой архитектуры. Вы можете почитать о редизайне iOS-приложения и переработке системы на Wired.

Во время редизайна приложения мы также создали то, что позже получило название Стандарт дизайна продукта Pinterest, который включал в себя:

Систему — формы, типографику, цвета, сетку.
Структуру — порядок компонентов.
Окружение — все мелкие элементы, которые мы отрисовывали.





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



Команда, которая сделала это

Практически вся команда дизайнеров Pinterest была вовлечена в процесс создания новой дизайн-системы. Также у нас была небольшая команда великолепных дизайнеров (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang), которые работали с нами над переходами и линиями, созданием прототипов различных жестов и так далее. Это была лучшая часть процесса. Работа с разными командами и отзывы с различными взглядами помогли достичь высокого результата.

Также я тесно сотрудничал с командой брендирования Pinterest для создания новых принципов. А наш маркетинг заговорил на одном языке с продуктом.

Мы планируем исправить некоторые ошибки в iOS-приложении, сделать редизайн сайта Pinterest и Android-приложения, поэтому нам нужны дизайнеры.