Батоноблог

Сравнение юзабельности трёх новостных социальных сетей на примере их главных страниц. Акцент поставлен на организацию навигации по новостям и на организацию новостной ленты. Общий вывод таков: два самых популярных рунетовских клона digg.com слизали у родителя хорошую идею, но, поставив её на свой дизайн, допустили при этом не малое количество очевидных ошибок.

Данным обзором я даю начало разделу Батоноблога «Веб-аудит». Здесь я буду разглядывать и анализировать сайты, выделять в них всё плохое и очень плохое, а также представлять пути очистки от всего этого плохого. Сегодня к нам на веб-осмотр попадают целых три новостные социальные сети: заокеанский родитель digg.com и два его местных клона. Итак, аудит объявляется открытым.

Шапки и навигация по новостным потокам

Первым делом беремся за самое важное — за шапки страниц и навигацию в них.

На первый взгляд шапка digg.com выглядит стройной, собранной, кристально чистой и понятной. Последующие взгляды это только подтверждают.

• Правильное разделение ссылок по назначению в четырёх строках : авторизация/общее, темы новостей, их отображение, период отображения (оранжевые ссылки).
• Выпадающие меню с темами новостей определяются по небольшим стрелочкам справа от названий разделов. Сами менюшки открываются только по клику (это исключает их ложные появления при случайном наведении на них мышки) и быстро исчезают при отведении курсора. Хорошо сделано.
• Поле поиска контрастно с фоном и расположено на стандартном месте, что позволяет глазу быстро увидеть и запомнить его расположение.
• Наверное, единственное слабое место — это кнопка RSS подписки. Нарисована она хорошо, но её расположение не дает точного ответа на вопрос «На что конкретно я подписываюсь?» Поместив бы кнопку рядом с заголовком новостей, все вопросы отпали бы: «Я подписываюсь на то, что написано рядом!»

Следующий — smi2.ru. Первое впечатление — что-то не то. Действительно, из-за разнокалиберных разноцветных надписей шапка не вызывает чувства собранности и выглядит неряшливо. Посмотрев на это дело подробнее, всё оказывается намного хуже.

• Левейшим образом расставлены графические акценты. Первое, что бросается в оба глаза — красная ссылка «Инструменты», которая ведёт на страницу, где предлагается попиарить smi2.ru на своем сайте. Это гениально. Следующее, что я увидел после «инструментов» — здоровенная зелёная кнопка «Добавить материал». Вообще очевидно, что читателей новостей намного больше, чем писателей, им эта кнопка на буй не ложилась. При этом, если человек хочет что-то написать, то и в этом случае ему не надо тыкать в глаз этой мерзкой кислотной кнопкой — вполне достаточно внятной надписи-ссылки. Кроме того, что такие лишенные смысла акценты выглядят нереально тупо, они вполне реально сбивают с толку.
• Отсутствует поле поиска. Вместо него имеется иконка-кнопка лупы, по виду которой не ясно, что произойдет после её нажатия. То ли новая страница откроется, то ли поле не понятно откуда-то вылезет (таки вылезает!). Это выглядит ужасно еще и потому, что пустого места для небольшого поля поиска абсолютно достаточно даже при минимальной ширине страницы.
• Со ссылкой «Вход» та же проблема, что и у поля поиска.
• Рисунок RSS кнопки просто кривой до неузнаваемости. Я эту кнопку 3 минуты искал. А когда нашёл, то RSS в ней не узнал. Убедился в этом только после того, как посмотрел, куда ведёт ссылка. Никогда не стоит изменять стандартным двум белым четвертинкам окружности с кружочком в центре на оранжевом фоне — это самая быстрая и прямая ассоциация с RSS.

Всё вышесказанное можно воспринять по разному:

— Дело привычки! — скажут дизайнеры smi2.ru.
— А мне проще эту хрень закрыть нах, чем разбираться и привыкать! — скажут неудавшихся 10% посетителей smi2.ru.

news2.ru поступило оригинальнее всех — основное место в шапке использовано аж для трёх полей и двух кнопочек (!). Из навигации здесь присутствует лишь разделение а-ля digg.com на новости, картинки, видео. Реальная тематическая сортировка зажата справа на боку.

• Сразу сверху внимание привлекает кнопка «фильтры». Это оказывается страшно неудобной вещью. Такое чувство, что всю ту часть навигации, которую не смогли более-менее нормально разместить на странице, собрали в виде списка ссылок под названием «фильтры». С помощью одного из фильтров новости можно показать в виде отвратного облака, реальной пользы от которого процентов так ноль.
• Что бы выбрать нужную тематику, надо лазить по папкам. Вообще какой-то устаревший прием. Также здесь присутствует мозговзрыватель: если кликнуть на папку, то откроется собственно папка, а если на название папки — откроется новая страница с общими новостями по всей категории. Я всегда открывал папку, тыкая именно на название, а не на иконку папки. И у меня есть подозрение, что я такой не один.
• Расположение RSS кнопки — хорошо, но сама кнопка выглядит кастрированной — кружочек обрезали :-(

Новостные ленты

Теперь взглянём на не менее важную составляющую данный сайтов — на ленты-списки новостей.

Вообще здесь существует глобальная проблема, касающаяся 99,5% всех подобных ресурсов — количество голосов за новость. Эти числа показываются большим кеглем рядом с новостью, и все считают, что они помогают читать то, что нужно. На самом же деле это большой юзабилистический прокол. Да, эти числа действительно срабатывают, как основной критерий отбора новостей для чтения. И в этом их проблема — вместо того, что бы прочитать заголовок и самому решить, читать или не читать, выбирается из списка 4 из 10 понравившихся числа и новости рядом с ними.

Может показаться, что рейтинг помогает выбрать самое популярное, но ведь чаще всего и так просматриваются страницы «Лучшие» и «Самые популярные новости», при этом самое-самое находится вверху страницы. Также бессмысленно считать новость с рейтингом 354 интереснее новости с рейтингом 346 — ваши личные интересы в этих числах никто не учел.

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

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

• Рейтинг нарисован в мягких цветах и не сильно выделяется, но цифры размером с заголовок трудно не заметить. Можно сказать, что компромисс найден.
• Как минус отмечу, что картинки для текстовых новостей маловаты. Иногда просто не понятно, что там нарисовано, приходится всматриваться.

• Здесь мы видим красные, зелёные, жёлтые кнопки по размерам больше самой новости. Спокойно прочитать текст нереально — в левом глазу светится «светофор».
• Используется устаревший, отвратительный, убивающий юзабилити до полусмерти, прием: список новостей регулярно прерывается Яндекс Директом. Из-за этого читать становится еще сложнее.
• Однако мудизмом высшей степени я возьмусь считать ссылки после каждой новости: зелёные «Комментарии», красное «Утопить!», синее «Волшебство». Такие ссылки — дополнение к новостям, сами по себе они не несут никакого смысла и не должны привлекать ни капельки внимания. Их нужно замечать только после прочтения новости.

• Вижу большие картинки к новостям! Наконец-то.
• Оранжево-желтые таблички можно и поменьше сделать.

Реанимация

Осмотр пройден. Короткое резюме таково: digg.com — отлично, news2.ru — так себе, smi2.ru — плохо.

Теперь в первом приближении воплощаем всё выше сказанное в жизнь:

В общем, на сегодня аудит окончен.

UPD (продолжение истории)

Аудит для smi2.ru не прошёл даром. При разработке нового дизайна были исправлены все описанные выше недочёты, после чего я выполнил заказ на полный, глубокий аудит всех страниц smi2.ru, о котором вы скоро сможете прочитать в отдельном посте. Сейчас ведётся еще одно обновление дизайна проекта в соответсвии с новым аудитом.

Кроме данной статьи, по этой теме вам будет интересно:

• Аудит для smi2.ru — по полочкам и косточкам
• Картинка делает вашу информацию интересной
• Месяц бесплатного аудита ваших веб-проектов (закончился)

Ссылки, иногда в тему:

Спасибо Вам за упоминание о статье у себя:

Также, вы можете быть в курсе последних обновлений Батоноблога, подписавшись на мою RSS-ленту напрямую, или по почте; добавив меня в Твиттере, или через Google Buzz, где, кроме материалов блога, я выкладываю множество интересных и полезных ссылок о дизайне и веб-технологиях.

RSS rss2email Twitter Google Buzz