{ "author_name": "Лена Очкова", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","pinterest","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","ios","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435_\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f"], "comments": 2, "likes": 11, "favorites": 11, "is_advertisement": false, "section_name": "default", "id": "19539", "is_wide": "1" }
Лена Очкова
3 032

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

#Интерфейсы #Дизайн #pinterest #редизайн #iOS #мобильные_приложения #интерфейсы

{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } } ]