АЛЕКСЕЙ ЛИТВИН
Аналитик данных в 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* это правило не работает. При нажатии на иконку «домик» меняется отображение страницы – пользователя переносят в новостную ленту, а «колокольчик» открывает дополнительное меню поверх текущей страницы.
Правильнее было бы выбрать что-то одно: все иконки или меняют отображение страницы, или открывают дополнительные варианты для выбора, или они должны в принципе выглядеть по-разному, чтобы визуально отделиться друг от друга.
Положительный пример единообразия главной панели можно увидеть на YouTube. Все иконки внутри выделенного сегмента главной панели работают одинаково – изменяют отображение правой части экрана.
Еще один правильный пример – снова Amazon. Кнопка «All» функционально отличается от других пунктов навигационной панели: она открывает панель с дополнительными вариантами, в то время как остальные изменяют отображение страницы. Но она и выглядит иначе!
(1) Пользователю легче запомнить и привыкнуть к одному решению – именно его он и будет использовать, игнорируя остальные.
(2) Среди множества решений одно будет эффективнее остальных. Предлагая пользователю некоторое количество менее удачных альтернатив, дизайнер запутывает его и увеличивает его временные потери.
(3) Если пользователь решает задачу только одним привычным ему способом (а именно так это и происходит), то все остальные способы и обслуживающие их интерфейсные элементы становятся визуальным шумом – то есть, перегружают интерфейс и внимание пользователя.
Примером хорошей однозначности может служить любой крупный интернет-магазин. Все они имеют единственную процедуру оформления заказа, не считая ускоренных вариантов вроде «купить в один клик», которые позволяют сделать то же самое, но быстрее.
Удивляет и запутывает дублирование навигации. Пользователь может нажать на кнопку с дополнительными вариантами (панель из девяти квадратиков) и увидеть практически то же, что он увидел бы, перейдя на домашнюю страницу (нажав на «домик»). Это очень странное структурное решение: из одного места юзер может двумя различными способами перейти в сходные по функциональности меню, которые к тому же выглядят по-разному…
[Если бы существовал мем «взрыв мозга от беспощадности интерфейса», то здесь ему было бы самое место.]
Как нам кажется, у этой ошибки может быть два истока.
Во-первых, дублирование может свидетельствовать о недостаточности планирования при редизайне интерфейса. Если функции добавляются поверх существующей системы без детального планирования и на скорую руку, возникают ситуации, когда один и тот же функционал реализуется разными командами – и оба попадают в релиз.
Во-вторых, очень похоже, что здесь неправильно интерпретируется правило «7 ± 2». Действительно, длинный список вариантов не очень удобен, но пользователь может к нему привыкнуть, если соблюден принцип однозначности. Хотя… здесь он все равно не соблюден, так как в открывающемся меню более девяти вариантов!
Как ни странно, у описанной проблемы есть известное, стандартное решение.
(1) Разделить функции главного меню на две части и визуально отделить их друг от друга. Как правило, реализуется в виде верхнего и бокового меню, которое обычно располагается слева.
(2) Объединить и визуально выделить блоки, сходных по смыслу, функции.
Так например, сделано в Wikipedia.
Понятно, что одна из ключевых функций социальной сети – это общение. Но это не значит, что допустимо иметь многовариантность в написании сообщений. В этом процессе, как правило, реализуется два сценария: (1) от контента, когдапользователь создает сообщение и к нему прикрепляеь адресатов; (2) и от адресата, когда пользователь сначала выбирает получателя, а потом пишет ему сообщение.
В Facebook’е* реализованы сразу оба варианта.
Правильно выбрать что-то одно. В случае социальной сети более предпочтительный вариант – от адресата, как это например, выполнено в Telegram.
Наверное, наиболее грустная ошибка, которая связана с нарушением однозначности – это когда одно и то же действие можно выполнить разными способами в рамках одного экрана. К сожалению, в Facebook’е* такие примеры тоже встречаются. Кнопка «Комментировать» внутри новостной ленты не делает ничего, кроме как активирует функцию ввода текста в поле комментария. Однако то же самое можно сделать, просто кликнув мышью по полю ввода. Это говорит о том, что данная кнопка в интерфейсе избыточна.
На наш взгляд, одна из возможных причин появления этой кнопки – попытка получить одинаковый интерфейс и для десктопа, и для мобильных устройств. Для телефона нажатие кнопки для дальнейшего ввода выглядит вполне органично, в то время как для десктопа это нонсенс.
Потому что в противном случае пользователь будет испытывать дискомфорт от использования продукта.
Следствие, вытекающее из этой причины, – продукты с человекоцентричными интерфейсами более конкурентоспособны. Когда пользователь меняет привычный для него продукт на менее человекоцентричный и, начав им пользоваться, страдает от несоответствия своему прежнему опыту, он в итоге возвращается.
Довольно простая в исправлении, но от того не менее раздражающая ошибка – кнопка закрытия изображения («крестик») размещена в левом верхнем углу, а не в правом. Это плохо не только с точки зрения человекоцентричности – нарушается и принцип единообразия, так как в интерфейсе можно встретить окна, в которых кнопка закрытия находится справа.
«Любопытное» решение применено на странице пользователя. Чтобы помочь ему найти нужную информацию, разработчики реализовали фильтр-рубрикатор. Есть два распространенных варианта реализации подобной функции: (1) фильтрация – отображаются только данные, относящиеся к выбранному варианту; и (2) перемещение – лента прокручивается до нужного места таким образом, чтобы искомый пункт оказался вверху ленты.
В Facebook’е* реализовано нечто третье, промежуточный вариант. Отображается выбранный пункт и все, что идет вслед за ним. То есть, как бы прокручивание до нужного места с фильтрацией всего, что было выше. Нам очень сложно представить себе пользовательский сценарий, который бы оправдал подобное поведение системы…
Facebook* – рекордсмен по количеству разнородной информации на одной странице. Подобный подход к организации контента порождает сразу несколько проблем.
(1) Внимание пользователя перегружено – непонятно, куда смотреть.
(2) Насыщение информацией всей площади экрана провоцирует пользователя блуждать глазами по экрану, а это утомляет и влияет на зрение.
Что мы видим на этом скриншоте?
При этом визуальные акценты не расставлены. А значит, непонятно, какая информация на странице основная, а какая вторична.
Для сравнения, посмотрим на страницу мероприятия ВКонтакте.
Вся информация уменьшается на половине площади страницы. Плюс, за счет цветовых акцентов и размеров элементов понятно, какая информация первична, а какая имеет второстепенное значение.
В Facebook* одновременно нарушаются принципы единообразия, однозначности и человекосогласованности. В его интерфейсе сложно разобраться, так как часто он не учитывает опыт пользователя, сформированный под влиянием стандартов, принятых на многих других сайтах. С ним сложно работать, ведь интерфейс перегружен дублирующимися функциями и визуальными элементами, которые к тому же ведут себя по-разному даже в рамках одного экрана.
Возможных причин, почему интерфейс Facebook* приобрел тот вид, который мы имеем сегодня, как нам думается, две.
(1) Попытка получить единый интерфейс для мессенджера, десктопной и мобильной версий социальной сети и видеохостинга в одном продукте разрушает единообразие и перегружает исходный сервис десктопной социальной сети.
(2) Попытка сделать работу пользователя более эффективной привела к появлению дублирующихся функций, что в итоге чрезмерно усложнило и перегрузило интерфейс. Повышение эффективности в ущерб понятности допустимо в профессиональных софтах (вроде Adobe Photoshop), но не в массовых сервисах, которым является Facebook*.
А что вы думаете об этом интерфейсе? Поделитесь в комментариях!