Юзабилити в wordpress. Часть 2 – навигация

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

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

Отличительные черты хорошей навигации:

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

Вот пример хорошо выделенной навигации:

Банальщина? Вот какой сайт висит на 3-м месте в яндексе по запросу “новостной портал”:

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

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

• Хороший вариант – использование картинок в сочетании с текстом.

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

• Использование кратких описаний для каждого пункта меню – вообще отличное решение:

• Для любой CMS есть плагин хлебные крошки (breadcrumbs), который отображает место сайта, в котором вы находитесь. Объяснить на словах довольно сложно, проще увидеть глазами:

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

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

• Постраничная навигация. Какие возможности она должна предоставлять посетителям:

- Переключение страниц в одно действие (один клик).

- Удобный переход на последнюю и первую страницу.

- Возможность переключения на следующую и предыдущую страницы.

- Удобочитаемый вывод списка страниц.

- Выделение активной страницы.

На данном блоге вы можете увидеть в действии плагин WP SEO Pager, который всё вышеперечисленно умеет.

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

1. Зайдите в functions.php. Если в нем нет вот такого кода:

if (!function_exists('get_previous_posts_link')) {
 function get_previous_posts_link($label)
 {
 ob_start();
 previous_posts_link($label);
 return ob_get_clean();
 }
}

if (!function_exists('get_next_posts_link')) {
 function get_next_posts_link($label)
 {
 ob_start();
 next_posts_link($label);
 return ob_get_clean();
 }
}

if (!function_exists('get_previous_post_link')) {
 function get_previous_post_link($label)
 {
 ob_start();
 previous_post_link($label);
 return ob_get_clean();
 }
}

if (!function_exists('get_next_post_link')) {
 function get_next_post_link($label)
 {
 ob_start();
 next_post_link($label);
 return ob_get_clean();
 }
}

то вставьте его туда.

В то место шаблона, где вы хотите, чтобы отображалась навигация по статьям вставьтте вот этот код:

<?php
$prev_link = get_previous_post_link('&laquo; %link');
$next_link = get_next_post_link('%link &raquo;');
?>
<?php if ($prev_link || $next_link): ?>

<div class="navigation">
	<div class="alignleft"><?php echo $prev_link; ?></div>
	<div class="alignright"><?php echo $next_link; ?></div>
</div>
<?php endif; ?>

Конечно же классы navigation, alignleft и alignright вы можете заменить на свои. Я их не убирал для большей наглядности.

Может быть я что-то упустил из виду? :write: Если да, то прошу писать в комментариях.
А вот тут туалетные кабины аренда по выгодной цене!