Лого vc.ru

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

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

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

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

Поделиться

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

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

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

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

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

В течение нескольких лет сайт, приложения и маркетинг стали обособленными, и в них больше не было общей дизайнерской нити. Многие функции были добавлены без понимания того, как они вписываются в общую концепцию дизайна. Поэтому интерфейс выглядел перегруженным, и пользоваться им было сложно. Не было визуальной иерархии или системы для понимания того, что важно на странице. В результате все вдохновляющие идеи, которые люди сохранили на 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-приложения, поэтому нам нужны дизайнеры.

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

вроде хороший сейчас дизайн у пинтереста. но в статье отсутствует вообще какая-либо полезная практическая составляющая. "мы тут шли, и вот мы пришли". редко когда хороший дизайнер может быть еще и хорошим писателем.
habrahabr.ru/users/kamushken/topics/

лучше бы рассказали о 2-х неудачных обновлениях (август-сентябрь) благодаря которым приложение вылетало на ios 8, и почему в течение 2-3 недель нельзя было это починить))

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

Сейчас обсуждают
Ирэна Моисеева

хаха, смешной вы - неужто не понимаете что Алежка здесь не для того чтобы на вопросы отвечать, а для того чтоб свое ущемленное ЧСВ потешить, ведь в реале за такое в табло можно огрести, и не посмотрят же на его "успешность")

Олег Тиньков потребовал от сотрудников есть один раз за рабочий день и «не красть время» акционеров перерывами на кофе
0
Ирэна Моисеева

что, Пенек, бомбануло, что бессоница замучала, что с утра снова тут коко?) Понимаю почему трах твоя больная тема - твоя старая климатичка тебе уже не дает, вот и скачешь тут от своего спермотаксикоза))

Олег Тиньков потребовал от сотрудников есть один раз за рабочий день и «не красть время» акционеров перерывами на кофе
0
Ilya Gindin

В любых странах есть такие, вообще. Не только в США.

Moen U — душ, который запоминает оптимальную температуру воды
0
Vikarti Anatra

вот представим...
обстоятельства сложились так что Facebook и Microsoft с Oracle национализированы правительство США (или как вариант - Штата Калифорния) и новые владельцы хотят все же сохранить бизнес в какой то форме - автоматически получают еще большие проблемы с заграничными рынками, автоматически получают необходимость объяснять что нет, они все равно данные пользователей по ордерам только отдают и не надо пользователям разбегаться.
При этом топ-менеджемент будет заменен на собственно кого? тех кто смог объяснить новым владельцам (которые и к ИТ и к бизнесу имеют все же отдаленное отношение) они используют в интересах государства для заработка денег.

Если же цели сохранить бизнес и не было...получается национализировали только ради технологий и возможностей сбора данных о пользователях? Пользователи будут рады. На следующий день например VK, PostgreSQL Professional(+другие фирмы кто может себя называть разработчиком БД хоть с некоторой долей правды), Canonical заявят что мы будем хорошими, частными фирмами и интересы пользователей будем защищать...и кстати средства миграции необходимые будут в трехмесячный срок.
А тем временем новому руководству придется объяснять лучщим сотрудникам почему они НЕ должны уволится.

Если же возможность национализировать появилась у правительства России (как - опустим вопрос, и пусть экономика все еще действует в это время) ...вот почему даже если честно будут пытаться сохранить то получится еще хуже чем в США, хотя бы потому что культура все же другая, в других университетах учились. И это еще в лучщем случае, если честно будут хотеть сохранить.

Национализировать просто дорогу, или завод со станками. А у Facebook/Oracle/Microsoft в собственности что? много компьютеров? Немного недвижимости? патенты с копирайтами? Базы данных по пользователям?

Исследование: Состояние восьми богатейших миллиардеров достигло объёма средств половины населения Земли
0
Олег Ивахнов

Там же написано - иди в спортзал вместо курилки/столовки

Олег Тиньков потребовал от сотрудников есть один раз за рабочий день и «не красть время» акционеров перерывами на кофе
0
Показать еще