Улучшаем юзабилити сайта (часть 2)

Когда нахожу нужный подзаголовок, то вместо

прописываю 

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

 и так по нарастающей. Если заголовок третьего уровня, то будет примерно так,

. Получается вот так:

Название подзаголовка в самой статье

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

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

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

А вот пример правильного и красивого содержания:

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

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

Оформление неактивных и наведенных ссылок

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

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

Цвет не наведенных (неактивных) ссылок старайтесь подгонять под главный цвет сайта. К примеру, у меня это синий цвет. У вас может быть зеленый или еще какой-нибудь. Только не делайте слишком темным цветом. Мне попадались некоторые темы, где все ссылки были черного цвета. Это неправильно! Такие ссылки будут практически незаметны в тексте.

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

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

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

Как оформить посещенную ссылку?

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

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

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

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

нужный класс a:visited {
 color: #609;
}

От вас потребуется определить нужный класс и вписать его в код перед a:visited {. В большинстве тем он может быть разным. Чтобы было понятнее, рассмотрим на примере одной темы WordPress. Далеко ходить не будем и возьмем дефолтную Twenty Thirteen.

Так, тему я установил. Теперь мне нужно перейти на какую-нибудь статью и нажать F12. Браузер в том же окне мне покажет исходный код страницы. Я использую Google Chrome. Нажимаем на значок поиска (3) и наводим курсор на ссылку (4).

Далее в исходном коде смотрим вкладку Styles (она правее находится).

Там видно, что стиль ссылки привязан к классу:

• .entry-content — оформление ссылок в самом посте;
• .comment-content — оформление линков в комментариях.

Все, класс узнали. Теперь заходим в стили (файл style.css) и ищем этот класс. Для удобного поиска не забываем про Ctrl + F. На рисунке выше видно два класса со стилями, отвечающие за оформление ссылки. Один для неактивной (5), другой для наведенной ссылки (6). Вот между ними вставляем такой код:

.entry-content a:visited,
.comment-content a:visited {
 color: #609;
}

Получится так:

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

Создаем активные ссылки

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

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

Теперь вопрос: «Как оформить активную ссылку?» Тут практически все то же самое, как и в случае с посещенными ссылками. Только в этом случае вместо псевдокласса visited нужно прописать active и задать нужный код цвета. Если брать предыдущий пример с темой Twenty Thirteen, то по идее, к необходимым стилям вам дополнительно нужно вставить вот такой код:

.entry-content a:active,
.comment-content a:active {
 color: #ffff00;
}

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

Оформление внешних ссылок

Казалось бы, ну что еще нужно от этих ссылок. Мы уже и так почти оформили все 4 состояния линков. Что еще может остаться? Оказывается, что есть еще один очень важный момент! Это оформление внешних ссылок.

Скажу вам, что на сайте пользователь всегда должен видеть где внешняя, а где внутренняя ссылка. Многие веб-мастера при наведении любят полностью скрывать адрес контекстной ссылки. Хорошо если в таком случае установлен RDS-бар и на сайте используются noindex/nofollow. Тогда еще можно увидеть внешние линки.

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

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

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

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

Оформить внешние ссылки на сайте можно разными способами. Я тут расписывать не буду, так как материала очень много. Скажу, что сам я использую плагин WP Fontallic EasyPromoWeb со шрифтами от Font Awesome. Там также есть еще два дополнительных набора иконочных шрифтов. Так что выбрать есть что. Можно, конечно, и кодом вывести, но мне плагином удобнее. Ничего не слетает и все сразу видно в редакторе. Можете тоже его попробовать.

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

Направления пользователя

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

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

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

Теперь давайте переключимся на сквозные ссылки и линки в анонсах постов. Если это внутренние ссылки, то они должны открываться в старой вкладке. По сути сквозные ссылки (они расположены в меню и в боковых колонках) транслируются на всех страницах сайта. Поэтому нет смысла открывать их в новой вкладке. Человеку не нужна информация в старой вкладке, поэтому ее можно перекрыть новым материалом в этой же вкладке.

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

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

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

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

P.S. Сейчас многие веб-мастера настолько погружены в это SEO, что забывают о более важных задачах.