Интерфейсные проблемы Facebook, или почему с крупнейшей в мире социальной сетью неудобно работать?

0
Статью написал Алексей Литвин12/23/2022

АЛЕКСЕЙ ЛИТВИН
Аналитик данных в IT-сфере. Занимается преобразованием данных о пользовательских действиях в бизнес-рекомендации. Автор книги «UX/UI дизайн: практическое руководство».

Facebook* стабильно входит в топ самых посещаемых сайтов в мире. При этом его интерфейс, мягко говоря, не идеален. Пользователи нередко с трудом отыскивают нужные функции, а элементы интерфейса ведут себя непредсказуемо и не логично – то есть, не соответствуют ожиданиям. В чем причина и как это можно исправить? Читайте в статье.

Компания Meta Platforms Inc., владеющая платформой Facebook, считается на территории РФ экстремистской организацией.

При оценке Facebook’а* легко погрязнуть в мелочах и остаться на субъективном уровне – другими словами, просто описать, что нравится или не нравится автору текста. Чтобы избежать этой ошибки, мы будем оценивать интерфейс по трем критериям: (1) единообразие, (2) однозначность и (3) человекоцентричность. 

(1) Единообразие – это соответствие образа объекта его функции. Или, проще говоря: похожие объекты должны вести себя сходным образом. 

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

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

Негативный сценарий в данном случае мог бы выглядеть так: при нажатии на «Да» папка удаляется, а на «Нет» или перезагружается операционная система, или выпадает меню с дополнительными вариантами… Или, вообще, нажать недостаточно – нужно перетащить кнопку за пределы окна.

(2) Очевидно, что одну и ту же задачу можно решить различными способами. Умение делать одно и то же по-разному может пригодиться в условиях неопределенности, недостатка ресурсов. Например, когда нет спичек, огонь можно добыть при помощи батарейки и фольги от жевательной резинки. Но если речь идет о проектировании интерфейсов и пользовательском взаимодействии, дублирующие функции вредны. Чтобы в этом убедиться, представьте себе пылесос, который можно включить четырьмя различными способами и еще пятью – выключить. Хороший интерфейс стремится удовлетворять свойству однозначности, когда задачу можно решить единственным способом.

(3) Человекоцентричность – одно из наиболее спекулятивных понятий в UX/UI. В рамках данной статьи под этим термином мы будем понимать соответствие интерфейса физиологическим особенностями человека и приобретенному пользовательскому опыту. 

Приведу пример из собственного опыта. Когда я сменил свой iPhone SE, которым пользовался пять лет, на iPhone 12, я столкнулся со значительными изменениями в интерфейсе Safari: поисковая строка браузера теперь по умолчанию находится внизу экрана, а не вверху, как раньше. И хотя новое расположнее физиологически удобнее, при запуске мой палец несколько месяцев машинально тянулся к месту прежнего расположения поисковой строки.

Рассмотрим подробнее каждый из принципов и примеры того, как они нарушаются в интерфейсе Facebook*.

Оценка единообразия

Почему важно соблюдать единообразие?

(1) Единообразие привычно и соответствует бытовому опыту пользователя. Если оно нарушается, пользователь огорчается. 

(2) Единообразие позволяет легче запоминать правила системы. Количество типов объектов значительно меньше, чем количество самих объектов: на кнопки – нажимаем, по ссылкам – переходим, а нажатие на изображение открывает его в отдельном окне.

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

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

Нарушение единообразия на Facebook*

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

Понятно, что исправить ошибку достаточно просто, но само ее наличие свидетельствует о проблемах в проектировании. Хотя, это весьма странно, если учесть, что мы разбираем один из топовых сайтов в мире…

Теперь обратим внимание на главную панель. О ней и о навигации внутри социальной сети можно написать отдельную статью в жанре «как не нужно делать?», но мы ограничимся лишь нарушением принципа единообразия. 

По-хорошему, все иконки внутри одной панели должны вести себя похожим образом, но для Facebook* это правило не работает. При нажатии на иконку «домик» меняется отображение страницы – пользователя переносят в новостную ленту, а «колокольчик» открывает дополнительное меню поверх текущей страницы.

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

Положительный пример единообразия главной панели можно увидеть на YouTube. Все иконки внутри выделенного сегмента главной панели работают одинаково – изменяют отображение правой части экрана.

Еще один правильный пример – снова Amazon. Кнопка «All» функционально отличается от других пунктов навигационной панели: она открывает панель с дополнительными вариантами, в то время как остальные изменяют отображение страницы. Но она и выглядит иначе!

Оценка однозначности

Почему важно соблюдать однозначность?

(1) Пользователю легче запомнить и привыкнуть к одному решению – именно его он и будет использовать, игнорируя остальные. 

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

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

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

Нарушение однозначности на Facebook*

Удивляет и запутывает дублирование навигации. Пользователь может нажать на кнопку с дополнительными вариантами (панель из девяти квадратиков) и увидеть практически то же, что он увидел бы, перейдя на домашнюю страницу (нажав на «домик»). Это очень странное структурное решение: из одного места юзер может двумя различными способами перейти в сходные по функциональности меню, которые к тому же выглядят по-разному…

[Если бы существовал мем «взрыв мозга от беспощадности интерфейса», то здесь ему было бы самое место.]

Как нам кажется, у этой ошибки может быть два истока. 

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

Во-вторых, очень похоже, что здесь неправильно интерпретируется правило «7 ± 2». Действительно, длинный список вариантов не очень удобен, но пользователь может к нему привыкнуть, если соблюден принцип однозначности. Хотя… здесь он все равно не соблюден, так как в открывающемся меню более девяти вариантов!

Как ни странно, у описанной проблемы есть известное, стандартное решение. 

(1) Разделить функции главного меню на две части и визуально отделить их друг от друга. Как правило, реализуется в виде верхнего и бокового меню, которое обычно располагается слева.
(2) Объединить и визуально выделить блоки, сходных по смыслу, функции.

Так например, сделано в Wikipedia.

Понятно, что одна из ключевых функций социальной сети – это общение. Но это не значит, что допустимо иметь многовариантность в написании сообщений. В этом процессе, как правило, реализуется два сценария: (1) от контента, когдапользователь создает сообщение и к нему прикрепляеь адресатов; (2) и от адресата, когда пользователь сначала выбирает получателя, а потом пишет ему сообщение.

В Facebook’е* реализованы сразу оба варианта.

Правильно выбрать что-то одно. В случае социальной сети более предпочтительный вариант – от адресата, как это например, выполнено в Telegram.

Наверное, наиболее грустная ошибка, которая связана с нарушением однозначности – это когда одно и то же действие можно выполнить разными способами в рамках одного экрана. К сожалению, в Facebook’е* такие примеры тоже встречаются. Кнопка «Комментировать» внутри новостной ленты не делает ничего, кроме как активирует функцию ввода текста в поле комментария. Однако то же самое можно сделать, просто кликнув мышью по полю ввода. Это говорит о том, что данная кнопка в интерфейсе избыточна.

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

Оценка человекоцентричности

Почему важно соблюдать человекоцентричность?

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

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

Примеры нарушения человекоцентричности

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

«Любопытное» решение применено на странице пользователя. Чтобы помочь ему найти нужную информацию, разработчики реализовали фильтр-рубрикатор. Есть два распространенных варианта реализации подобной функции: (1) фильтрация – отображаются только данные, относящиеся к выбранному варианту; и (2) перемещение – лента прокручивается до нужного места таким образом, чтобы искомый пункт оказался вверху ленты.

В Facebook’е* реализовано нечто третье, промежуточный вариант. Отображается выбранный пункт и все, что идет вслед за ним. То есть, как бы прокручивание до нужного места с фильтрацией всего, что было выше. Нам очень сложно представить себе пользовательский сценарий, который бы оправдал подобное поведение системы… 

Facebook* – рекордсмен по количеству разнородной информации на одной странице. Подобный подход к организации контента порождает сразу несколько проблем. 

(1) Внимание пользователя перегружено – непонятно, куда смотреть.
(2) Насыщение информацией всей площади экрана провоцирует пользователя блуждать глазами по экрану, а это утомляет и влияет на зрение.

Что мы видим на этом скриншоте?

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

При этом визуальные акценты не расставлены. А значит, непонятно, какая информация на странице основная, а какая вторична. 

Для сравнения, посмотрим на страницу мероприятия ВКонтакте. 

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

Подведем итог

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

Возможных причин, почему интерфейс Facebook* приобрел тот вид, который мы имеем сегодня, как нам думается, две. 

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

(2) Попытка сделать работу пользователя более эффективной привела к появлению дублирующихся функций, что в итоге чрезмерно усложнило и перегрузило интерфейс. Повышение эффективности в ущерб понятности допустимо в профессиональных софтах (вроде Adobe Photoshop), но не в массовых сервисах, которым является Facebook*.

А что вы думаете об этом интерфейсе? Поделитесь в комментариях! 

Сильные разработки создаются не в одиночку, а в коллективе. LIVREZON CLUB объединяет более 50-ти коллективов в разных отраслях научного знания. В ежедневном режиме они делятся опытом, собирают новые данные, пишут книги и статьи, тестируют технологии и получают друг от друга полезную обратную связь. 

Хотите присоединиться к коллективу разработчиков? Пишите на info@livrezon.com

Компания Meta Platforms Inc., владеющая платформой Facebook, считается на территории РФ экстремистской организацией.
Следующая статья
Бизнес и экономика
Чем полезно разделение труда: выдержки из Адама Смита
Подзаголовки, выделения жирным и разделение на абзацы выполнены автором, нашедшим этот фрагмент в трудах Адама Смита.  *** § Разделение труда повышает производительность, а также благосостояние работников [...] Для примера возьмем поэтому весьма маловажную отрасль про­мышленности, но такую, в которой разделение труда очень часто отме­чалось, а именно производство булавок. Рабочий, не обученный этому производству (разделение труда сделало последнее особой професси­ей) и не умеющи...
Бизнес и экономика
Чем полезно разделение труда: выдержки из Адама Смита
Педагогика и образование
Как повышать культурный уровень детей и подростков? Педагогические приёмы для юных айтишников
Бизнес и экономика
Как фиксировать и внедрять лучшие практики в компании – инженер Гаррингтон Эмерсон
Искусство и дизайн
Как создать смешную сцену: изменение темпа воспроизведения
Искусство и дизайн
Как создать смешную сцену: нужно обмануть ожидания зрителя
Педагогика и образование
Рефлексируйте как рыцари, или опыт использования самоанализа в вузовской практике
Искусство и дизайн
Чем отличается работа актёра в театре и в кино
Livrezon-технологии
Смейся, как Анри Бергсон. Сочиняем комедию по его советам из книги «Смех»
Бизнес и экономика
Что делать, если не получилось делегировать? Схема передачи работы другому сотруднику
Бизнес и экономика
Решает ли бизнес-проблемы теория ограничений системы Элияху Голдратта?
Бизнес и экономика
«Производственная система Тойоты. Уходя от массового производства» – реферат: самое главное из книги Тайити Оно
Педагогика и образование
Психодиагностика по рисунку: не так страшен чёрный цвет, как его малюют
Livrezon-технологии
Интерфейс Photoshop: основная парадигма и базовые объекты
Искусство и дизайн
Зачем нужно критиковать произведения искусства
Livrezon-технологии
Исправляем ошибки при создании сайта личного архива
Искусство и дизайн
Как продать фильм в кинотеатры – текст из истории российского кино