Юзабилити Facebook. Часть 1: Масштабы бедствия

в 18:03, , рубрики: Facebook, usability, Песочница, социальные сети, юзабилити, метки: , ,

image

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

Первые шаги

Легенда такая: меня зовут Вася Пупкин, и я решил завести себе аккаунт в Facebook по совету друга. Поехали.

Форма регистрации пестрит разнообразием типов элементов пользовательского интерфейса и отпугивает количеством полей. Откровенное удивление вызывает столь трепетное отношение к правильности эл. почты: Вася должен подтвердить свой email повторным вводом, в отличие от скрытого под точками пароля, в котором из-за этого куда проще ошибиться:
image

И вот Василий заполняет все поля и в предвкушении тыкает в большую зеленую кнопку — но не тут-то было. Ничего не происходит, реакции на кнопку не видно:
image

Если бы Вася пришел на сайт с монитора с большей диагональю, он бы увидел спрятавшееся за границей браузера предупреждение:
image

Вообще, Вася уже немного раздражен, но ведь многие его друзья уже там, а он еще нет, поэтому Вася не сдается и методично выбирает из огромных выпадающих списков дату своего рождения (вероятно, datepicker изобрели зря). Посмотрите, этот злобный выпадающий список уже почти зажил своей отдельной от браузера жизнью:
image

Но настоящее разочарование настигает Васю только сейчас: Facebook отказывается признавать его имя настоящим:
image

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

Импорт контактов отовсюду и массовая рассылка приглашений — это очень полезно для развития сервиса и терпимо для пользователя, пусть и реализация, на мой вкус, чересчур навязчива. Нетерпеливый Вася нашел еле заметную кнопку “Пропустить этот шаг” и перешел на страницу своего профиля.

Очень важно найти друзей

Стартовая страница — это просто рассадник функций поиска друзей. Facebook настолько хочет помочь Васе найти друзей, что у нашего героя почти нет шансов пойти каким-то другим путем: в поиск друзей можно перейти из пяти(!) разных мест на странице:
image

Но Вася не поддался на провокацию: он хочет сначала просто попробовать сервис и, если ему понравится, тогда он и пригласит друзей.

Навигация

Наш герой решил, что левая панель навигации — это верный способ исследовать интерфейс, ведь на странице нет больше ничего похожего на меню. Но и тут соцсеть расставила свои ловушки: панель навигации совершенно непредсказуемо пропадает или появляется на разных пунктах. Например, на экране “Найти друзей” панель внезапно пропадает, а на следующем пункте меню “Пригласить друзей” снова появляется:
image
image

Вернуть панель можно по клику на логотип Facebook. Видимо, многие не догадывались или просто не знали, что по логотипу можно кликать, но разработчики не растерялись и продублировали эту функцию кнопкой “Главная”, спрятанной в вернем правом углу страницы:
image

Но Васе нет дела до проблем разработчиков. Вася даже не осознает, что навигация спроектирована как-то неправильно. Просто чувство внутреннего дискомфорта не уменьшается, и наш герой борется с очередным порывом закрыть вкладку и перейти в старый добрый Вконтакте. Но Вася снова сдерживается и продолжает исследовать интерфейс. Надо ли говорить, что подумал наш герой, когда на пункте меню “Центр приложений” вся панель навигации не просто пропала, а еще и заменилась на другую, похожую:
image

Васю искренне удивляет чат в Facebook. Видимо, сначала был чат, а потом сделали поиск друзей в чате. Очень хорошо, но почему если чат справа, поиск друзей в чате должен быть слева?
image

Вася боится нажимать на кнопки, потому что не знает, чего от них ожидать: даже кнопки с неоднозначными пиктограммами не сопровождаются всплывающими подсказками
image

Зато текстовые кнопки щедро пояснены таким же текстом:
image

В какой-то момент Вася обратил внимание на кнопки с изображением карандаша, которые появляются около каждого пункта меню при наведении:
image

Вася решил, что сейчас он нажмет на этот карандашик и настроит свой плейлист. Но нет. В этом и других пунктах меню карандашик вызывает контекстное подменю, содержащее один единственный пункт — не поверите — “добавить в избранное”:
image

Прослеживается работа над этой панелью навигации не одного поколения проектировщиков. Но Вася уже устал исследовать интерфейс своей страницы и решил посмотреть на профиль кого-нибудь из пользователей. Наш герой уже был готов к странностям интерфейса, поэтому его не удивило, что профиль пользователя встретил его предложением “помочь усовершенствовать эту страницу”:
image

Вася уже привык к панели навигации слева, поэтому не сразу догадался, что вот именно эту страницу надо прокручивать. Во всяком случае, необходимость куда-то переключиться, чтобы побольше узнать о человеке, появилась сразу, а из вида страницы по умолчанию удалось узнать немногое. Продвинутый пользователь бы нажал кнопку “подробнее”, но Вася — не продвинутый пользователь и этой кнопки попросту не заметил:
image

Вася начал прокручивать страницу и читать хронику. Ему понравилось необычное дизайнерское решение — располагать статьи слева и справа от некой линии, идущей снизу вверх, но он не переставал испытывать дискомфорт. Дело в том, что наш герой привык читать все сверху вниз (бумажная книга, вконтакте, rss-лента), либо снизу вверх (twitter для iphone). Но чтобы прочитать хронику в фейсбуке, Васе приходилось постоянно дергать колесо мыши туда-сюда. Т.е он дочитывает статью слева, а статья справа уже уползла под верхнюю границу браузера, и наоборот. В итоге, движения колеса мыши были примерно такие: вниз-вниз-вверх, вниз-вниз-вверх, и т.д:
image

В итоге, Вася совсем утомился и решил больше себя не мучить.

Возможно, я был слишком субъективен и критичен к проектировщикам Facebook. Да, при таком трафике нужно очень осторожно вводить интерфейсные обновления, ведь даже если из-за этого уйдет 0.1% пользователей, то компания фактически потеряет миллион клиентов. То ли эта осторожность, то ли консервативная политика руководства в итоге привели к чудовищному наслоению в интерфейсе трендов из разных десятилетий. Повсюду в интерфейсе расставлены “костыли”, рассчитанные на то, чтобы покрыть сразу все возможные ментальные модели пользователей. Я искренне верю, что в один прекрасный день открою Facebook и увижу долгожданную заветную кнопку “Переключиться на новый интерфейс”. Но, видимо, всему свое время.

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

Автор: Klimentij

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js