статьи веб дизайн разработка сайтов [advansed search]  [карта сайта]

разработка


графика


продвижение и PR


будни разработки


обзоры




Аудит сайта weaponplace

14.08.2005г.

Вот и лето проходит, середина августа, и - хорошо, если вы уже успели отдохнуть, набраться сил, подготовиться к новому учебному- и бизнес-году. У многих - грандиозные планы по созданию и реконструкции своих проектов - и это здорово! Интернет растет, владельцы сайтов стремятся улучшить свои проекты, совершенствуется дизайн и юзабилити сайтов, качество наполнения, верстки, поддержки. Все большую популярность приобретают системы управления содержанием (CMS - content management system) и - да, сеть уже не та, что была вчера. Делать некачественные проекты сегодня... не модно.

Не мало заявок ко мне в почту приходит с просьбой оценить/проанализировать сайт. Сегодня публикуется небольшой обзор-аудит дизайна/юзабилити/верстки/сервисов очередного рунетовского сайта. Во-первых, меня изрядно заинтересовала тема проекта :), во вторых - просто удивительно, но в кои-то веки заявка на анализ поступила правильно составленная (хоть и с грамматическими ошибками), вежливая, корректная. Как говорится - невозможно отказать :) Итак, вот такая была просьба:

Здравствуйте!
Хотелось бы обсудить дизайн и всякие прочие недостатки или плюсы сайта http://www.weaponplace.ru Собираюсь просто скоро писать для него свой движок. Вот и думаю, что люди скажут о достоинствах и недостатках теперешнего его дизайна, стоит ли его брать за основу дизайна, но уже на новом движке или удобнее для посетителей сделать нечто более комфортное. В общем хочу критики, желательно обоснованной. Впрочем, от похвал тоже н откажусь, хотя кажется мне что критики в любом случае будет больше.

+++++++++++++++++++++

Итак, сайт weaponplace.ru - информационный, некоммерческий проект, тема - оружие, вооружение, защита. В целом сайт не вызывает никаких отрицательных эмоций, прежде всего потому, что цветовая гамма - намеренно нейтральная, серая.

1. Модульная сетка.

Сейчас на сайте используется 4-колоночная модульная сетка (при этом во внутренних документах две внутренние колонки "склеиваются" в одну среднюю колонку). Фиксированный дизайн, с популярным некогда ограничением размера по ширине для разрешения экрана 800х600, выравнивание документа - по левому краю окна в браузере.

Первое, что хочется заметить - информации тесно в такой сетке. Очень тесно. И, кроме того, разрешение экрана 800х600 встречается все реже, идеальный вариант - посмотрите статистику посетителей вашего сайта, в частности - "статистика по разрешению экрана" ваших пользователей. Если обработчик статистики вашего сайта не дает эту информацию - вы можете попросить соответствующие цифры у любого родственного тематического проекта. Я со своей стороны могу поделиться цифрами по "Библиотеке Сайтостроительства": http://top.mail.ru/stat?id=403302;what=set;period=0. Как вы видите, у более 50% пользователей, читающих материалы библиотеки, разрешение экрана 1024x768, не менее 14% - 1280x1024, почти 5% - 1152x864 и выше… И только 8.7% пользователей установили у себя разрешение экрана 800x600.

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

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

Варианты модульных сеток:

Или же так:

Еще один способ избежать тесноты в инфоблоках - делать поля между колонками побольше, минимум - 10px, а лучше - 20px - информация не будет "слипаться", будет легче читаться и меньше раздражать.

Уже после выхода этого материала в 174-м выпуске рассылки по сайтостроительству по почте пришли различные комментарии относительно идеальной модульной сетки для информационного веб-сайта. Вот, к примеру, сообщение от Хохлова Игоря:

Уважаемая Татьяна.
С интересом ознакомился с Вашим сегодняшним (уже вчерашним :-)) выпуском рассылки.
Не могу согласиться с Вашей идеей относительно "резиновой" ширины страницы. При очень большом разрешении (у меня на мониторе домашнего компьютера, например 1600 по горизонтали), строки становятся такими длинными, что читать становится очень утомительно. На мой взгляд, делать колонку шире 500 пикселей - уже неуважение к читателю. У меня на сайте www.nationalsecurity.ru ширина фиксирована - 800 точек, и, все равно, колонка с основным текстом специально сужена.

Ответить могу только следующее. Я вовсе не настаиваю, что резиновая модульная сетка - единствоенно правильное решение для информационных проектов. Речь идет о том, что если уж действительно есть необходимость публиковать на главной странице сайта так много информационных и навигационных блоков, то разместить их следует таким образом, чтобы им не было тесно. Четырехколоночной модульной сетке реально тесно в зафиксированном 770-ю пикселями

2. Шрифты.

Фиксированный шрифт на информационном сайте - это не есть хорошо. А при условии, что на главной странице в новостийном блоке и блоке с темами форумов шрифт используется чрезмерно мелкий, то посетители/обладатели мониторов с разрешениями экрана 1024х768 и выше с трудом разберут ваш текст. Или даже не разберут - и разбираться не станут, просто закроют ваш сайт.

И это еще хорошо, что современные браузеры - и Опера, и Мозилла - умеют увеличивать содержимое документа пропорционально (zoom`ом), но правильно ли так напрягать ваших посетителей? С точки зрения юзабилити это не очень правильный ход, лучше - убрать фиксированный размер, по необходимости уменьшить его, прописав в таблице стилей размеры шрифтов в процентах или *em*-единицах.

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

3. Оформление текста:

В одной из статей для веб-дизайнеров - "Accessibility в WEB" было написано о том, что задачи правильного форматирования текста - сводить к минимуму утомляемость при изучении материалов сайта и по возможности нижать время ознакомления для работы с вашим сайтом для всех пользователей.

Так уже исторически сложилось, что в веб-документах (в отличие от печатных материалов) абзацы выделяются не отступом (красной строкой) перед первым символом нового абзаца, а дополнительным отступом (эмуляция "пустой строки") внизу абзаца. Традиционное использование тегов параграфа - <p>Ваш текст</p> как раз и создают такой отступ (размер этого отступа, разумеется, можно контролировать стилями, однако и параметры по умолчанию - вполне разумны). Причина - попросту с экрана так проще читать текст, и информация лучше воспринимается. В документах сайта абзацы не выделены (а отступ "красной строкой" не идеален), текст читать тяжело.

Решение: не использовать разделение абзацев с помощью <br>&nbsp;&nbsp; - использовать тег параграфа.

Насколько оптимизирован сайт для поисковых систем - я скажу позже, сейчас же - в подразделе про текстовому оформлению, могу заметить еще одну ВАЖНУЮ ошибку: заголовки в документах как раз сделаны абзацем! Ой. Это плохое решение. Потому что заголовок должен быть заголовком, и должен быть заключен в тег <Hn> (где n - уровень заголовка.)

В вашем частном случае на отдельно взятом документе (смотрим страницу /pisrev.php) заголовок "Пистолеты и револьверы" сейчас отформатирован следующим образом:

<p class="title">Пистолеты и револьверы</p>

Однако, если вы подписаны на нашу рассылку "Библиотека Сайтостроительства - новости, статьи, обзоры" и читали информацию в последних выпусках (это я о материале "Бизнес-предложение по продвижению коммерческого веб-сайта в Интернет"), вы уже знаете, какое важное значение для продвижения сайта в поисковых системах и каталогах имеет использование ключевых слов по вашему проекту в заголовках. Важность вашего документа будет определяться по плотности ключевых слов в документе + значимости тегов и мета-тегов, в которых эти ключевые слова находятся. А использование ключевых слов в тегах заголовков, особенно первого-второго уровня, значительно может повысить релевантность вашего сайта с точки зрения поисковиков. В вашем случае слова "Пистолеты и револьверы" - вполне ключевые, имеет смысл заголовок документа оформить так:

<h1>Пистолеты и револьверы</h1>

Для лучшего восприятия информации могу так же порекомендовать больше использовать различные методы форматирования и выделения текста: тег <strong> у вас используется, однако не лишним будет выделять информацию и всеми остальными доступными средствами. К примеру, советую все перечисления, встречающиеся в тексте документа, оформлять не последовательно в предложении - через запятую, а списками - нумерованными или ненумерованными. От этого внешний вид документа только выиграет, да и восприятие информации будет не таким напряжным.

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

4. Оформление иллюстраций

Та же ошибка, что и в целом в оформлении информационных блоков - иллюстрации липнут к тексту. Это не верно. Смотрим на код для иллюстраций в документах:

<img src="glock30s.gif" align="left" alt="Глок 30">

Для того, чтобы фотография лучше смотрелась в документе, могу порекомендовать такой шаблон для кода картинок:

<img src="glock30s.gif" width="198" height="162" vspace="8" hspace="0" style="margin-right:15px;" align="left" alt="Глок 30">

Т.е. у вас добавляется поле вверху и внизу картинки, слева (в случае если картинка выровнена по левому полю) отступа нет, а справа - отступ в 15px (а я обычно рекомендую больше - 20px) - и выглядит опрятнее, и читается лучше.

В верхней части страницы (и остальных страниц) - графическое оформление, название вашего сайта + еще декоративные элементы. Во-первых - не красиво, совсем, совсем не впечатляет. Во-вторых, не логично. Проекту не помешает разработка логотипа (можно использовать шрифтовое начертание названия сайта - хотя желательно тот вариант, который есть сейчас - переделать). Логотип сделать кликабельным (на всех страницах, кроме заглавной, ссылка на логотип должна вести на главную страницу сайта). В коде картинки с логотипом прописать alt-атрибут, содержащий ключевые слова (не одно словосочетание, можно и больше… но не злоупотреблять, разумеется).

И вообще - маленькое замечание не по дизайну, а по оптимизации для поисковиков. Те же ключевые слова. Имеет смысл их использовать более интенсивно и рационально. В конкретно данном примере у вас в атрибуте alt указан тип (серия?) пистолета "Глок 30". Для процесса раскрутки рекомендую в этот атрибут добавить больше текстовой информации по этой модели, к примеру, "Пистолет Глок 30", или даже больше - "Цельнопластиковый пистолет Глок 30" (я не много знаю о моделях огнестрельного оружия, могу ошибаться в терминах, но что касается доработок по дизайну и оптимизации - полагаю, объяснила ясно).

И, кстати, по тем же причинам ошибкой является не использовать атрибут alt для иллюстраций на главной странице! Это важно. Заполненный альт - это дополнительное наличие ключевых слов в документе, это поддержка тех пользователей, у которых по каким-то причинам отключены картинки, это - в конце концов - валидно, соответствует стандартам w3c!

Давайте вернемся к оформлению иллюстраций вашей главной страницы. В центральной колонке - под блоком новостей и форумных сообщений у вас представлена навигация по основным разделам сайта. Отлично. Однако кроме прежнего замечания по поводу отступов вокруг картинки могу добавить еще следующее: название раздела + его краткое описание сделаны ссылкой на раздел - было бы хорошим решением менять контрастность картинок возле каждой темы (реализовать можно java-script`oм или с помощью таблиц стилей) - картинки очень бледные и тусклые, хорошо было бы хотя бы при наведении мыши на ссылку менять картинку на менее бледную, более контрастную. Может быть, даже цветную (если это не противоречит концепции сайта).

А вообще я вам могу сказать, что чрезмерное злоупотребление нейтральным серым цветов и бледными тонами не в пользу дизайну сайта. Низкая контрастность (фон/текст), бледные иллюстрации, и при этом единственные цветные картинки - это баннеры статистики, рейтингов и друзей в правой колонке - именно они привлекают основное внимание посетителя.

Для любого проекта я могу посоветовать публиковать (особенно на главной странице) поменьше баннеров и кнопок, никогда они в пользу дизайну или удобству не идут, внешний вид портят и внимание отвлекают. Если же какие-то кнопки должны присутствовать в обязательном порядке - уберите их в самый низ страницы. Если большая часть аудитории вашего сайта использует в качестве браузера Internet Explorer - используйте стили с фильтром Alpha, который делает ваши объекты прозрачными или полупрозрачными (зависит от заданного в фильтре значения). Готовое решение может выглядеть так:

В таблице стилей объявляем класс:

.banner {text-align:left;}
.banner A IMG {filter:Alpha(Opacity=40, Style=0); border: 0px;}
.banner A:hover IMG {filter:Alpha(Opacity=100, Style=0);}

А в коде страницы все баннеры публикуем в блоке:

<div class="banner">Ваши баннеры </div>

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

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

Оценка в целом цветовой гаммы: она бедная, ее следует обогатить цветовыми решениями.

7. Навигация.

Это вопрос очень сложный. Вам, как владельцу сайта, конечно же, виднее. Только анализ информационной архитектуры вам не помешает. Нет четкой визуальной иерархии элементов (разделов) сайта. В левом столбце следует выделить важные рубрики (подрубрики или скрывать или отделять отступом от рубрики):

Главное меню при этом стоит выделить - более крупным и контрастным шрифтом, или же вообще вынести в горизонтальный блок.

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

Кроме того, вы можете добавить еще очень полезные разделы, которые наверняка заинтересуют ваших поклонников и читателей: вы можете, к примеру, сформировать раздел "Рассказы", где публиковать интересные, смешные или напротив - тревожные истории по теме проекта от ваших же посетителей - наверняка многим есть чем поделиться по вашей теме. Объявление о новом разделе вы можете сделать в вашем форуме + воспользоваться услугами ваших дружественных или партнерских сайтов - разместить приглашение к авторам тематических рассказов и у них; в тематических же форумах и на досках объявлений, в вашей рассылке.

Такой раздел с историями из жизни может стать даже более популярным, чем информационные разделы об оружии. Впрочем, сводить его к разделу "Юмор", конечно же, не следует. Шутки шутками, а жизнь - она штука сложная. Крайне рекомендуется сформировать "карту сайта" - польза и для вашей аудитории очевидная, и для поисковиков помощь.

8. Качество кода.

Качество кода не ужасно, видали мы и похуже верстку. Однако имеет смысл переделать многое. Прежде всего у вас не указан Doctype. Почему это не верно, объяснять не надо - достаточно почитать статью Джеффри Зельдмана "Почему так важен DOCTYPE" http://www.i2r.ru/static/479/out_13654.shtml.

Для отлавливания всех ошибок в коде ваших страниц просто воспользуйтесь валидатором (рекомендую этот: http://validator.w3.org/)

Тест в валидаторе вашего сайта показывает, что надо слишком много переделывать (количество ошибок на разных страницах - около сотни, и это при том, что в качестве дефолтового DOCTYPE был мною указан стандарт HTML 4.01 Transitional, я же рекомендую ваш НОВЫЙ проект разрабатывать с учетом современных стандартов xhtml или xml). В общем, ошибки верстки мы даже обсуждать не будем.

Обнаружено: в титле (тег TITLE) на главной прописано * WeaponPlace.RU - "Главная" * - разумно сделать титл чуть более информативным (однако в разумных, конечно же, пределах) - к примеру так: * WeaponPlace: оружие, вооружение, защита*. А слово "Главная" имело бы смысл использовать во вспомогательном меню (так называемые хлебные крошки), которое показывает путь к конечному документу на сайте:

Главная -> Рубрика -> Подрубрика -> Документ

Более информативными можно сделать также title и внутренних страниц сайта. Не пытайтесь скромничать и экономить на объеме содержимого тега Title - делайте информативный заголовок в 50-70 символов - не только описывающих раздел, но и содержащих ключевые слова. Особенно это важно для заглавной страницы сайта.

Переписать содержимое тега meta descriptions: фраза "огромное количество статей" - лишняя и не имеет смысла ни для пользователей, ни для поисковиков, фраза "Сайт, посвященный современному стрелковому вооружению" тоже требует доработки. Думаю, что "Сайт, посвященный" можно вообще убрать. Кроме того, если ваш description начинается с фразы о "стрелковом вооружении" - именно это словосочетание должно бы быть первым в содержании тега meta keywords (а там на первом месте стоит "стрелковое оружие", а не "…вооружение"). Так же фраза "Большое количество графики, чертежей и схем" - лишняя. Разумно было бы писать "чертежи такие-то", "схемы такого-то оружия", а в том виде, в котором эта фраза присутствует сейчас - не годится и смысла не имеет.

Могу порекомендовать так же (уже не в title, а в теле документа) придумать и разместить краткий и запоминающийся слоган, поясняющий тему сайта (и, кстати, опять же содержащий несколько ключевых слов).

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

Неплохой рейтинг наблюдается по словосочетанию "виды оружия" (в Google - 5 позиция в рейтинге, в MSN Search и Mail.Ru - 3-я, а вот в Яндексе даже по такому словосочетанию позиции слабоваты).

Решение: необходима тщательная оптимизация сайта - работа с ключевыми словами, с кодом сайта, с содержанием сайта должна продолжаться постоянно.

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

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

Анализ вашего сайта показывает, что проиндексировано более 200 документов (196 - Google). Объем значительный. И очень не хватает одного крайне полезного сервиса - поиска по сайту. Это надо бы исправить. На сегодняшний день есть большое количество как бесплатных, так и условно бесплатных скриптов для поиска (хотя бы даже стандартные сервисы от поисковиков, от Google) - они не очень сложны в установке и настройке, и очень полезны в работе с информационным сайтом.

Пользователей всегда привлекала возможность "участия" в жизни сайта. Один из явных способов сделать посетителя *участником* - развитые сервисы обратной связи. Форум у вас присутствует - это замечательно. Гостевая - сервис, в общем-то лишний и для серьезного проекта не популярный, мусора много, нет смысла в тщательной модерации. Но это только лишь мое мнение. Могу посоветовать отказаться от гостевой - но предоставить сервис "оставить комментарий" возле каждой статьи на сайте, использовать голосования за материалы и различные скрипты-опросники - как по материалам сайта, так и по самому сайту.

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

И еще

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

Раздел "Ссылки"

Видите ли, поисковые системы крайне негативно относятся к тем сайтам, которые искусственно повышают индекс цитирования сайта за счет участия в нетематическом линкообмене. Особенно это заметно в тех ситуациях, когда сайт "вырастает" до первых позиций в результатах выдачи поисковых систем по высокочастотным ключевым словам, и завистливые конкуренты, обнаружив список нетематических ссылок на сайте, "стучат" в службу поддержки поисковиков о том, что у вас используется "поисковый спам", накрутка индекса цитирования - в некоторых случаях саппорт поисковика принимает меры и "понижает" в выдаче (пессимизирует) такие сайты. Не по этой ли причине у вашего сайта такие плохие позиции по ключевым словам в Яндексе? Ну не любит Яндекс накрутчиков индекса цитирования! Что здесь можно посоветовать… Постепенно наращивать обмен ссылками с тематическими сайтами, убирать нетематические. Или переформировать такой несолидный список линков в благородный "КАТАЛОГ" ссылок, разбитый по темам и по рубрикам. Но "фильтронуть" ваши ссылки все же не помешает. Если ссылку на сайт "Страхование - медицинское страхование, добровольное медицинское…" еще можно объяснить, как "условно-тематическую", ссылку на "Мусор - контейнеры для мусора, вывоз строительного мусора … мусорные контейнеры, вывоз отходов" - посчитать условно-тематической в разделе "черный юмор", то ссылка на "Матрасы - ортопедические матрацы, пружинные матрасы…" - мне кажется демонстративно нетематическая.

Дополнительные разделы

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

Впрочем, прямо сейчас обнаружилось, что в вопросах раскрутки сайтов автор проекта и сам неплохо разбирается, поэтому с рекомендациями на эту тему остановимся. Если кто-то хочет добавить свои комментарии - пишите в форум Библиотеки: http://www.i2r.ru/forum/thread_table.shtml?F=15882&ST=0&T=27354

 

Внимание! Вся информация, размещенная на этом сайте в разделах "статьи" или "рассылки", является собственностью NunDesign. О полном или частичном использовании материалов вы можете узнать на странице "авторское право".

наверх наверх

MoiKrug - Вукс ТатьянаВукс Татьяна


NunDesign © 2001-2008 All rights reserved