0

Оценка юзабилити новостного ресурса Сусанин

Елизавета Саяпова
17 сентября 2009 года

Предисловие

Данный документ (пост) содержит результаты экспертной экспресс-оценки Интернет-ресурса susanin.udm.ru (далее по тексту — сайт). Экспресс-оценка производилась специалистами ООО «Центр высоких технологий» (далее по тексту — ЦВТ) по заявке, поступившей с официального сайта ЦВТ www.htc-cs.ru.

При составлении документа не ставилось цели всесторонне и полностью исследовать сайт. В частности, в документе не затронуты проблемы безопасности, вопросы, касающиеся действующего законодательства, морально-этические вопросы и многие другие. Оценка проводилась только с точки зрения современных представлений о разработке Интернет-ресурсов, оценивались удобство пользования сайтом, его эргономичность, эстетическое восприятие и ряд технических характеристик. За более детальной экспертной оценкой следует обратиться напрямую к менеджерам ЦВТ.

Данный документ не является какой-либо формой предложения о сотрудничестве со стороны ЦВТ и не накладывает никаких обязательств ни на ЦВТ, ни на владельцев ресурса susanin.udm.ru. Рекомендации, приведённые в документе, не являются обязательными для исполнения, а также не подразумевается, что ЦВТ берёт на себя обязательств по внедрению этих рекомендаций. ЦВТ также не берёт на себя обязательств о неразглашении содержания данного документа, а также оставляет за собой право публикации этого документа в любом виде и в любом месте без согласования с владельцами ресурса susanin.udm.ru.

Дизайн

К внешнему виду сайта имеется ряд претензий.

Неудачный логотип

Логотип сайта некрасив. Неудачен выбор и начертание шрифта, неудачна попытка совместить знак «@» с солярным знаком герба и флага Удмуртии, непонятен смыл подчёркивания слова «Сусанин».

Собственно говоря, даже само название «Сусанин» ассоциируется отнюдь не с новостями.

Слишком много красного

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

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

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

Слишком много рекламы

Рекламные баннеры расположены неудачно для посетителя. В поле зрения сразу попадает три мельтешащих картинки и ещё одна выглядывает из-за угла. Реклама никогда не отпускает пользователя, подчас приобретая самые уродливые формы. Это не только создаёт негативное отношение к сайту, заставляя посетителя подозревать авторов в неуёмном желании заработать как можно больше в ущерб качеству, но и порядком нагружает систему — браузер начинает использовать массу ресурсов для отображения флэш-роликов, и потребляет лишний трафик (главная страница со всей рекламой весит более 800 килобайт). Это признак прямого неуважения к посетителю.

Хорошее решение есть на новостном ресурсе www.newsru.com — ресурс имеет зеркало txt.newsru.com, на котором вообще напрочь отсутствуют изображения (кроме счётчиков посещаемости). В результате, заглавная страница зеркала имеет размер всего в 60 килобайт (вместе с файлами скриптов и стилей). Это признак уважения к пользователям и заботы о них.

Удобство пользования

При навигации по сайту тоже возникает много вопросов к разработчикам.

Навигационное меню

Навигационное меню иногда ведёт себя очень странно. Находясь на главной странице сайта мы сразу видим меню и первого, и второго уровней. Но при переходе, например, в раздел «Афиша» меню первого уровня становится совсем другим, и причина этого изменения неясна.

Для наглядности, мы свели в единую таблицу все видимые пункты навигации первого уровня в разных разделах сайта:

Главная страница Блоги Новости Словоблудие Афиша
Главная Главная Главная Главная Новости
Блоги Архив Блоги Иван Кино
Новости Новости Новости Новости Клубы
Пресс-центр Подписаться Пресс-центр Пресс-центр Театры
Словоблудие Войти Словоблудие Словоблудие Музеи
Афиша   Афиша Афиша Выставки

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

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

Меню.

Рубрикатор

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

Но единый рубрикатор существует и работает — достаточно просто кликнуть на главной странице в раздел «Новости» в навигационном меню. Мы считаем уместным поместить рубрикатор на главной странице сайта, чтобы пользователь мог сразу перейти к нужной группе новостей.

Облако тэгов

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

Ну и, кроме того, люди, проставляющие тэги у новостей, не всегда аккуратно относятся к своей работе, иначе откуда тэг «Транспорт» мог появиться у новостей с заголовками «„Русские витязи“ все-таки выступят на МАКС-2009», «Беспризорники Удмуртии „уходят“ на рельсы», «Уличная певица избила ижевчанина за неприятный запах изо рта» и, особенно, «В Ижевске пенсионерки с клюшками стали грозой хулиганов». Конечно, во всех этих новостях есть упоминание какого-либо транспортного средства, но вряд ли это является основанием для присвоения новости тэга «Транспорт».

Поиск и пейджинг

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

Пейджинг результатов поиска выдаёт сообщение «Произошла ошибка при отображении пейджинга!» в случае, когда ничего не было найдено. Очевидно, это ошибка.

RSS

Нами была обнаружена всего лишь две RSS-ленты — в одну из них транслируются, похоже, абсолютно все новости, а во вторую (которую ещё надо найти!) только новости Ижевска, Удмуртии и Поволжья. Мы допускаем, что существуют другие RSS-ленты с таким же заранее предопределённым содержимым, но было бы неплохо автоматически генерировать RSS-ленту для того раздела, в котором находится посетитель, как бы он туда ни попал — через облако тэгов, рубрикатор или и то, и другое одновременно.

Вёрстка

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

Не совсем понятно, почему в некоторых местах над рекламой находится плашка «Реклама», а в некоторых — нет.

Техническая часть

Приведённые ниже временные выкладки не могут считаться абсолютно объективными, поскольку результаты измерений сильно зависят от условий измерения (используемые каналы связи, браузер, компьютер). Впрочем, измерения были произведены на различных браузерах и с помощью профильного ПО — общая картина была одинаковой во всех случаях.

Для более полного измерения скорости сайта и устойчивости его к большим нагрузкам необходимо провести специальное полноценное исследование.

Сайт, в прямом смысле, является жертвой гонки за рекламным доходом. В первую очередь это сказывается на объемах скачиваемой информации и затраченном на это времени. Очень трудно найти на сайте страницу, которая, вместе со всем содержимым, весила бы менее полумегабайта. Более 50% всех запросов при загрузке страницы делаются не к сайту Сусанина, а к сайтам с рекламными баннерами. В сумме, эти запросы отнимают более половины времени и иногда достигают 80% всего потреблённого трафика. Бывают моменты, когда от клика на заголовке новости до отображения текста новости проходит 4-6 секунд — следствие огромного количества посторонних запросов. Полная загрузка страницы и всего её содержимого осуществляется не менее 10 секунд (иногда бывало и более 30 секунд — видимо, это зависит от нагрузки ресурсов, отдающих баннеры).

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

Выводы

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

Рекомендации по улучшению ресурса

Мы рекомендуем переверстать шаблон страниц ресурса и принять следующие меры:

  1. Сократить количество красного цвета на страницах. Оставить его, например, только для ссылок или только для заголовков. Необходимо убрать красный цвет из дат. Использовать дополнительные цвета.
  2. Уменьшить количество рекламы на страницах.
  3. Сделать главное меню одинаковым на всех страницах – единые состав пунктов навигации и месторасположение. Меню 2-го уровня также располагать в одном и том же месте на всех страницах.
  4. Добавить заголовки страниц.
  5. Добавить статусную строку.
  6. Визуально выделять текущий пункт меню от остальных, в том числе и пиктограммы технической навигации.
  7. Блоки с JavaScript-кодом необходимо вынести как можно далее в конец страницы. Количество желательно уменьшить. Это приведёт к ускорению отображения полезного контента.
  8. У изображений в теле новости (а также в других местах, где используется тэг <img>) рекомендуется явно указывать размер (проставлять атрибуты width и height), чтобы вёрстка обтекающего их текста не разъезжалась после загрузки и отображения изображения. К тому же, это ускоряет рендеринг страницы.
  9. Вместо отдельных небольших технических изображений для вёрстки следует использовать в шаблонах технологию CSS Sprites.
  10. Необходимо исправить неправильный порядок вложенности элементов в коде. В частности, элемент <a> должен быть вложен в элемент <h2>, а не наоборот.
  11. Рекомендуется использовать сжатие выдаваемого содержимого.

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

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

Метки: , ,

Оставить комментарий