Юзабилити — как сделать свой сайт удобным для посетителей и попытаться их удержать как можно дольше за чтением ваших статей

24 Февраль, 2011

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

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

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

Проблемы юзабилити и навигации по сайту


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

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

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

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

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

Тут я не премину вспомнить свое первое знакомство с блогом на движке WordPress. Это был всем известный проект Михаила Шакина — сколько не лестных слов было произнесено мною, прежде чем я понял, что проще всего будет читать все статьи подряд, пользуясь для этого только постраничной навигацией, реализованной с помощью плагина WP-PageNavi. Этот плагин, кстати, довольно сильно повышает юзабельность, по сравнению с тем, что предлагает нам WordPress по умолчанию. Уже хлеб.

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

Но не тут-то было — мне постоянно указывают на сложности в нахождении материалов и пинают за низкую юзабельность. Да, ссылок в статьях много, но всем хочется системы, чтобы читать материалы по порядку и так далее. Сначала при создании блога я все же попытался устранить то, что мне показалось неудобным у Михаила.

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

Извините, я немного отвлекусь и скажу, что не знаю к какому роду отнести слово юзабилити (usability), поэтому по ходу статьи буду склонять его и так и эдак, надеюсь, что вас не будет от этого коробить. Кстати, в переводе оно означает «удобство использования», «дружественности интерфейс» или, проще говоря, эргономичность.

Блин, какое простое и правильное слово и как же сложно сделать свой проект таким, чтобы про него можно было бы сказать «А юзабилити у него на высоте!». Гораздо проще сделать наоборот. На самом деле, ту без удачи или вмешательства обойтись будет трудно.

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

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

Как я пытался улучшить юзабилити своего блога

Первым серьезным шагом, направленным на улучшение юзабилити KtoNaNovenkogo.ru, было создание страницы «Все вопросы». Мне показалось, что простой карты сайта на плагине Sitemap Generator будет не достаточно, ибо там приводились ссылки на все статьи целиком (кстати, юзабилити могут повысить и географические карты от Яндекса, например, если они будут уместны). Но дело в том, что практически все мои публикации включают в себя описание решения сразу нескольких вопросов, и делятся на части соответствующими внутренними заголовками.

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

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

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

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

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

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

Похожие материалы, хлебные крошки и другие способы


Так же для улучшения внутренней линковки и удержания посетителей на страницах блога KtoNaNovenkogo.ru практически сразу был установлен плагин, реализующий вывод списка похожих материалов — WordPress Related Posts, а потом он был заменен на Yet Another Related Posts и upPrev.

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

Да, и не только сомнительная эффективность останавливает меня от их бесконтрольного использования. Тут все сводится к тому, что вы сильно увеличиваете размер сквозного блога, который будет присутствовать на всех страницах проекта, а это может не понравиться поисковым системам.

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

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

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

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

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

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

В WordPress проще всего реализовать второй вариант, когда, например, под шапкой блога будет выводиться навигационная строка, показывающая путь до того места, где сейчас находится читатель. Здесь приведен вариант хлебных крошек в WordPress без плагинов, а можно организовать все и на базе плагина Breadcrumb NavXT.

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

Так же я пришел к мнению, что лучше заменять стандартные поисковые возможности движков на то, что нам предлагают признанные лидеры на этом рынке — Яндекс и Гугл:

  1. Поиск по сайту от Яндекса
  2. Скрипт поиска от Google

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

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

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

Что еще можно было бы сделать для улучшения юзабилити


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

Для каждой рубрики своего WordPress блога я дописал в файл functions.php (из папки с используемой вами темы оформления) подобный код:

function showads2() {
    return '<p>На сегодня все. Если вы не хотите пропустить появление новых материалов на этом сайте, то можете подписаться на рассылку новостной ленты через форму, расположенную чуть ниже, или же выбрать удобный для вас способ подписки на странице <a  target="_blank"  href="http://ktonanovenkogo.ru/podpiska">Подписка</a></span></span></a>. </p>

<p>Удачи вам! До скорых встреч на страницах блога <a href="http://ktonanovenkogo.ru/">KtoNaNovenkogo.ru</a></p>';
}
add_shortcode('rubrika1', 'showads2');

Теперь, вставив в конце статьи конструкцию:

 [rubrika1]

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

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

Получился аналог того, что очень просто реализовать в Joomla — выводить для различных страниц проекта различные меню. Ведь очень удобно, когда вы, допустим, читаете статью по основам Html, а в боковом меню видите все остальные публикации по этой же теме, а материал, который вы читаете в данный момент, будет к тому же еще и выделен соответствующим образом в этом меню.

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

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

Я, например, вставил в файл sidebar.php (из папки с темой оформления) конструкции кода с условием, при выполнении которого, в зависимости от того, к какой рубрике относится открытая в данный момент в блоге статья, будет выводиться разный список материалов по теме.

Конструкция условия для одной рубрики будет выглядеть примерно так:

 <?php if (in_category('284')) : ?>
список статей нужной рубрики, составленный вами вручную с помощью Html тего LI и тегов ссылки A
<?php endif; ?>

или для нескольких рубрик:

<?php if (in_category( array(3,306,86) )) : ?>
список статей нескольких категорий, составленный вами вручную с помощью Html тего LI и тегов ссылки A
<?php endif; ?>

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

 <?php if (is_page()) : ?>
				 <li>Все материалы блога KtoNaNovenkogo.ru</li>
				  <?php $recent = new WP_Query("showposts=20"); while($recent->have_posts()) : $recent->the_post();?>
                    <li><a href="<?php the_permalink(); ?>">
                      <?php the_title(); ?>
                      </a></li>
                    <?php endwhile; ?>
				 <?php endif; ?>

Благодаря этому условию на статичных страницах блога KtoNaNovenkogo.ru во вкладке «Еще» будет выводиться ссылка на страницу «Все вопросы» и список 20 последних публикаций. В общем, где-то примерно так. Более подробно можно об этом почитать в кодексе WordPress. По поводу эффективности такого способа пока ничего определенного сказать не могу — время покажет.

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

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

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

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

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

Иначе бы все проекты в интернете были в Топе по всем поисковым запросам, а пользователи, однажды на них попав, уже никогда бы не уходили на другие сайты. Утопия, да и только.

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

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

Можете также посмотреть видео «Юзабилити и психология поведения пользователя на сайте»:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Как самому раскрутить сайт

Комментарии и отзывы

Андрей

Ты спецом такие посты длинные катаеш, что бы директа побольше натыкать?

Дмитрий

Андрей: ну, считайте, что вам удалось вставить шпильку.

Meloman

Читаю ваш блог давно чтоб не соврать где то с весны начала лета. Очень интересно, читаю каждый пост до конца, ВСЕГДА!

Сайд баром не пользуюсь. так как подписан на рсс и нечего не пропускаю. Но скажите Заметил что Вы почти перестали выделять жирным ключевые слова, точнее вы их выделяете но самих ключевиков вроде поменьше. Давно заметил и с каждым постом все интересней и интересней. Подскажите с чем это связано?

Overmort

Meloman говорит, что:

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

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

TipRus

Для внутренней перелинковки WP существует куча плагинов, а для карты сайта (у вас «Все вопросы») замечательный плагин Dragon Design Sitemap Generator. Зачем стока гемора вручную?

Алексей

Возникает вопрос- а зачем использовать модуль похожих материалов в джумла? каждый модуль делает работу сайта медленнее.

я думаю просто вручную вводить ссылки на похожие материалы.

только пока не решил- указывать везде по 3-5,или только реально относящиеся к делу?- но тогда будет не очень красиво- где то много а где то 1 ссылка

psevdonim

Алексей: Если у вас слабый хостинг то процесс загрузки страниц будет конечно идти медленнее, а так ни каких проблем со скоростью работы сайта быть из за плагина не должно. Если конечно у вас их не установлено больше 50. И даже если так, плагин похожих постов я думаю будет не самым последнем в списке значимости. И вообще если паритесь за скорость работы блога и потребление ресурсов, используйте тогда плагин который кэшируется все ваши посты, превращая их тупо в html файлы, тогда при загрузке страниц движок вообще не будет обращаться к базе. в Джумле такой плагин я где то уже видел.

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

Утюг

Спасибо!

Теперь я знаю как переводится слово «usability»!

А вот это как перевести: «Subscribe without commenting»?

Подписаться не комментируя?

А то с англ. плоховато у меня увы((

sergoos

Дмитрий, у меня вопрос нуба. Как увидеть на вашем сайте рекламу директа? У меня ни на одном из трех браузеров ее не видно. Что нужно поменять в настройках чтобы ее можно было увидеть? Интересно посмотреть как вы ее маскируете.

ibigcost

Вау, размер статьи поражает =)

Как и все остальные статьи — информация качественная и ее много! Но реально до конца читать хочется, интересно...

Татьяна

Спасибо за подробное информацию про юзабилити.

parey

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

Gregory

Как всегда, одна вода, нельзя сразу к делу и по пунктам? а то напрягает столько читать, особенно лишнего. Конкретики побольше, тогда реальный тебе респект. А то не чтение, а пытки гестапо... 🙁

Эдуард

Цитата:

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

Юзабилити — это калька с англ. usability (дословно — «полезность»), а грамматический род кальки, как и любого заимствования, «переходит по наследству» от языка прототипа. Поэтому чтобы решить поставленную задачу, давайте обратимся к грамматике английского языка. Известно, что неодушевленные имена существительные относятся к среднему роду и заменяются местоимением it, которое переводится на русский язык, в зависимости от смысла, как «он», «она», «оно». В нашем случае имеем дело с заимствованием, а значит, перед нами средний род. Таким образом, надо писать «юзабилити повысилось», о чем автор блога, видимо, догадался интуитивно.

Стелла

Air Script: Разжуйте пожалуйста — сквозной блок?

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

Но что тогда такое «сквозная ссылка»? Здесь тоже нигде как-то особо не описано. На вики Веб Эффектора сказано, что «Сквозная ссылка – присутствующая на всех страницах вебсайта, который ссылается». То есть это все-таки ВНЕШНЯЯ ссылка, а не ВНУТРЕННЯЯ? Так?

Анна

У вас ошибка в слове «тут»: «На самом деле, ту без удачи или вмешательства обойтись будет трудно.»

Макс

У вас проблемка с юзабилити — у меня на нетбуке с Мозиллой блок с сервисами для заработка «не помещается» в экран и нет возможности его просмотреть.

Максим

Андрей, юзайте ABP . и вообще кому какая разница )))

Подписаться не комментируя