Кейс: Как команда 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-приложения, поэтому нам нужны дизайнеры.
