Лого 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
Роман Романович
SmartXML

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

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

«Боты станут умнее, а вы потеряете свою работу»
0
Евгений Разманов

Наверное, всё от отделения зависит. Ровно неделю назад продлял зарплатную карту: пришёл, увидел, победил. На всё-провсё - 10 минут.

Единственное - до этого ни позвонили, ни СМСку не отправили, а месяц уже заканчивался. Позвонил в итоге сам оператору, чтобы узнать, точно ли карта на месте.

Видео: Герман Греф в «костюме инвалида» в отделении «Сбербанка»
0
Юрий Катков

а страхование вкладов не работает в этом случае?

Путин разрешил налоговикам требовать долги компаний с их владельцев и учредителей
0
Газиз Исмаил

Такими темпами боюсь скоро не только инвесторам, но и всем людям придется думать о "пороге входа".

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

В любом случае, я бы не хотел ни в магазине Apple, ни где-либо еще вводить через шприц в свой организм "новые технологии".

«Боты станут умнее, а вы потеряете свою работу»
0
Показать еще