youtube ipad 1160x620 - Новостные ленты - это популярный паттерн дизайна, но пришла пора придумать что-то новое

Что общего между Facebook, Instagram, Youtube, Twitter и LinkedIn?

Они используют невероятно мощное машинное обучение, чтобы помочь пользователям найти среди тонны разнообразного контента то, что им действительно необходимо

О да. И все они используют единый шаблон дизайна: новостные ленты.

Новостные ленты - это популярный паттерн дизайна, но пришла пора придумать что-то новое
Начиная от Facebook до Youtube – новостные ленты повсюду!

Ленты являются наиболее распространенным способом разработки системы рекомендаций (это модный термин для программного обеспечения, использующего машинное обучение для анализа наиболее предпочтительного контента для каждого пользователя). Длина ленты варьируется от продукта к продукту, но почти всегда предназначена для облегчения прокрутки, иногда до бесконечности!

Ленты были разработаны для решения важной проблемы: информационной перегрузки. Девяносто процентов информации в мире было создано только за последние два года. Каждый день в поток добавляется 2,5 квинтиллионных байта нового контента. Как вообще можно найти то, что нужно, и не тонуть во всем этом !?

В этом поможет машинное обучение. Оно сортирует всю эту информацию за вас. Для Google или других продуктов поисковых систем это облегчает поиск интересующего вас контента. Для Instagram и Facebook это ускоряет поиск важных для вас сообщений. Для Spotify это музыка. Для Netflix это фильмы. Для Goodreads это книги. Для Steam это видеоигры.

Машинное обучение почти повсеместно распространено в цифровых продуктах. Машинное обучение работает всегда в фоновом режиме и помогает отсортировать огромный поток ненужной вам информации.

Машинное обучение постоянно работает в фоновом режиме, и в дизайне внешнего интерфейса почти всегда отображается в виде новостной ленты

Я работаю в Shopify над одним из наших продуктов машинного обучения под названием Shopify Home. Как вы уже догадались, это конечно же новостная лента:

Новостные ленты - это популярный паттерн дизайна, но пришла пора придумать что-то новое
Shopify Home – это фид карточек с идеями и советами о том, как развивать свой бизнес..

Но чем дольше я работал над Shopify Home, тем больше осознавал, что фиды (новостные ленты) тоже создают проблемы с пользовательским интерфейсом. Машинное обучение развивается и становится все более мощным с каждым днем, но разработка интерфейсов машинного обучения, застряла где-то в 2006 году, когда Facebook впервые запустил новостную ленту.

Почему новостные ленты – это плохие паттерны дизайна

Технологии должны ускорять или устранять рутинные, утомительные и повторяющиеся задачи, чтобы у нас было больше времени для действительно важных вещей. В Shopify это означает, что мы помогаем нашим пользователям более эффективно управлять своим бизнесом, чтобы они могли сосредоточиться на том виде работы, который делает предпринимательство прекрасным – например, позволяет изобретать что-то новое, налаживать отношения с клиентами, короче только самые позитивные стороны данной сферы деятельности.

Но я все более скептически отношусь к тому, что новостные ленты действительно экономят наше время. Вы когда-нибудь заходили в Facebook, чтобы найти адрес местоположения вечеринки, на которую вы идете сегодня вечером, потеряв 20 минут, просматривая ленту новостей, прежде чем вы поймете, что вообще делаете?

Даже если, адрес вечеринки самая важная вещь на Facebook для вас, он никогда не отобразится вверху вашей ленты новостей! Как объясняет Тристан Харрис (бывший маркетолог в Google), это происходит потому, что «Facebook хочет использовать любую причину и повод использования сети, для максимизации времени, которое вы проводите в ней».

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


Ленты также создают тяжелую когнитивную нагрузку для пользователей. Когда мы проводили пользовательское тестирование на домашней ленте Shopify, многие участники отмечали, что «есть контент, действительно стоящий их внимания», а другие «что они не уверены, что есть что-то, на что вообще можно посмотреть».

Пользователи испытывают такие ощущения, потому что фиды обычно показывают длинный, непрерывный список однообразной информации. Как и в случае с картинкой «Где Уолли?», поток информации максимально плотный и сложен для восприятия, что создает более высокую когнитивную нагрузку. Если когнитивная нагрузка высока, то пользователи скорее всего будут чувствовать себя подавленными и обеспокоенными. В большинстве случаев, пользователи будут избегать такой нагрузки, и будут уходить от нее, находя другие источники, с более простым и понятным потоком информации.

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

Последняя проблема с фидами заключается в том, что предсказуемость или постоянство информации стали очень незначительны. Поскольку контент постоянно меняется, пользователи вынуждены сразу же получать и фиксировать самую полезную и нужную им информацию, чтобы она не исчезла. Создавая ситуацию, что-то вроде «сейчас или никогда», которая ставит под угрозу автономию пользователя. Таким образом, вместо того, чтобы позволить пользователям работать в индивидуальном темпе, новостные ленты заставляют их реагировать немедленно, затрудняя постепенное и своевременное извлечение информации.

Лучший способ разработки новостных лент

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

К счастью, есть такие замечательные люди, размышляющие о новых способах решения проблем пользовательского опыта.

Одна из моих любимых функций в Google Now – кнопка [Больше историй] в низу новостной ленты. Это незначительное касание, но оно создает «ограниченный опыт»: взаимодействие, которое не дает пользователю погрузиться в бесконечно прокручивающейся поток информации.

Новостные ленты - это популярный паттерн дизайна, но пришла пора придумать что-то новое

Точно так же и «сломанный» или «сегментированный» фид Netflix пытается разрешить проблему большой когнитивной нагрузки. В этом проекте фильмы сгруппированы по разным категориям (документальные фильмы, комедии, телепередачи и т. Д.), это помогает пользователям сузить выборку интересующего их контента. Огромное количество контента по сей день борется за ваше внимание, но сейчас есть возможность его сортировки.

Новостные ленты - это популярный паттерн дизайна, но пришла пора придумать что-то новое

Но есть ли способ контролировать все новостные ленты?

Ближайший шаг, к этой цели я обнаружил лишь на странице календаря хоста в AirBnb.

Новостные ленты - это популярный паттерн дизайна, но пришла пора придумать что-то новое

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

Хост-календарь AirBnB является отличным примером дизайна машинного обучения, который помогает и расширяет возможности, не занимая у вас много времени.

Необходимый вам контент, появляется в нужный момент, и вам не нужно бесконечно прокручивать ленту, в поисках данного материала.

Создавайте лучшие новостные ленты в Shopify

Вы заинтересованы в разработке продуктов машинного обучения, для успешного пользовательского опыта? В таком случае, я бы посоветовал вам работу в Shopify! Гуд лак!

Оригинал: Gillian Massel

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Система подбора цветов для интерфейса. Основы. Часть 1

Как создать доступный цифровой опыт Цвет, как инструмент Сегодня мы проводим большую…

Новый подход к подбору цвета интерфейса

Совместное использование нового способа построения цветовых систем для доступных пользовательских интерфейсов. Создайте…

Решайте проблему дедлайнов, как дизайнер

Если вы дизайнер, который часто не укладывается в отведенные сроки, эта статья для вас