×
Россия +7 (495) 139-20-33

Юзабилити в текстах

Россия +7 (495) 139-20-33
Шрифт:
4 5495

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

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

  1. Шрифт. Существует два типа шрифтов: с засечками (serif) и без засечек (sans serif). Всем, кто хоть немного имел дело с созданием сайтов, известно, что в интернете используется шрифт без засечек, шрифты класса serif подходят только для печатной продукции. Это объясняется тем, что с экрана читать сложнее и характер восприятия не позволяет применять «цепляющие глаз» засечки. Еще незабвенный Якоб Нильсен писал: «Если сомневаетесь, используйте Verdana». На данный момент шрифты Verdana, Arial и Tahoma применяются чаще всего, в западном сегменте можно встретить шрифт Georgia с засечками.

На сайте лучше использовать один-два шрифта в разных начертаниях (полужирный, курсив). Большее их количество выглядит неприятно, заставляя пользователя постоянно перестраиваться на новое начертание. Размещение на сайте текста в стандартном «вордовском» шрифте Times New Roman выглядит убого и напоминает самодельные бесплатные сайты на «народе». Говоря о нашем примере, посмотрите на страницу:

Неудачный шрифт

А вот тот же фрагмент, но на другом сайте, уже без засечек. Фрагмент тоже не идеальный, но вопрос шрифта решен:

Вопрос шрифта решен

  1. Размер и цвет шрифта. Размер шрифта должен быть в пределах от 10 до 14 пикселей, крупный шрифт раздражает, мелкий просто нечитабелен. Для большинства идеально подходит шрифт 10-12, для людей в возрасте нужен 14. С этим все понятно, кто не убежден, попробуйте прочитать текст на Txf.ru или, например, на Velopiter.spb.ru. В том, что касается цвета шрифта, важно учитывать не столько сам цвет, сколько его контраст с фоном.

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

Попробуйте прочесть написанное синим

  1. Интерлиньяж. Это расстояние между строками. В веб-тексте интерлиньяж должен быть в полтора раза больше, чем в печатных изданиях, это облегчает просмотр и чтение текста. Сюда же можно отнести вопрос о разделении абзацев двойным интервалом — это облегчает поиск. Кроме того, не забывайте, что пользователь ленив по своей природе, поэтому, увидев огромный «слепой» текст, он, скорее всего, продолжит поиски на другом сайте. Попробуйте прочитать текст здесь. Такое читать, может, и нетрудно, но как-то тоскливо.
  1. Абзацы. Тут нет каких-то жестких ограничений по размеру и количеству, но всегда хочется сделать текст не просто информативным, но и красивым. Чтобы, например, на скриншоте смотрелся ровными прямоугольниками и не кучей битого кирпича. Поэтому желательно делать абзацы примерно одинакового размера, по 450-600 символов. Слишком большие абзацы плохо воспринимаются из-за той же ленивой природы пользователя, слишком короткие выглядят «грязно».

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

  1. Подзаголовки. Тексты длиннее 1,5-2 тысяч знаков нужно делить на подзаголовки. Дело в том, что пользователь не читает тексты в прямом смысле слова, а просто просматривает в поисках нужной информации. Подзаголовки экономят время и позволяют быстрее найти то, что нужно. Конечно, всегда можно воспользоваться поиском по странице с помощью Ctrl-F, но далеко не все «юзеры» настолько продвинуты, чтобы знать такие тонкости.
  1. Шрифтовые выделения. В арсенале копирайтера есть три вида выделения основных мыслей текста: полужирное написание, курсив и ПРОПИСНЫЕ БУКВЫ. Полужирное выделение используется для обозначения главного слова абзаца, его тематики, курсив традиционно обозначает главную мысль автора, а прописные буквы используются для резюмирования и привлечения внимания. Не рекомендуется использовать прописные буквы слишком часто — это на языке шрифта обозначает крик и наводит на мысли о вменяемости автора. Попробуйте прочесть этот фрагмент:

Попробуйте прочесть этот фрагмент

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

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

Вместо заключения

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

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


(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Journalistka
    14
    комментариев
    0
    читателей
    Journalistka
    больше года назад
    А способов выделения много, для ПС чаще используется полужирное написание. Что мешает написать так:

    Электронный коллайдер: цены ниже!

    По правилам юзабилити в начале заголовка и в начале текста нужно размещать ключевое слово и выделять его жирным. Тут нет противоречия оптимизации.
    -
    0
    +
    Ответить
  • Юлия Вронская
    0
    комментариев
    0
    читателей
    Юлия Вронская
    больше года назад
    Главное, чтобы предпочтение более высокой посещаемости потом не обернулось высоким показателем отказа. Если посетитель пришел на сайт еще не значит, что он быстро не уйдет, "не справившись с управлением")))
    -
    0
    +
    Ответить
  • Journalistka
    14
    комментариев
    0
    читателей
    Journalistka
    больше года назад
    Это да. В идеале - пишется текст в соответствии с юзабилити и оптимизацией. А вот потом в течение месяца производится донастройка статьи под людей.
    Считается, что для обычных пользователей надо писать, как для 12-летних.

    Я против, ибо происки Антанты)))
    -
    0
    +
    Ответить
  • Кирилл Партала
    1
    комментарий
    0
    читателей
    Кирилл Партала
    больше года назад
    Описанные советы по юзабилити расходятся с оптимизацией контента под поисковые системы.
    По правилам юзабилити мы должны выделять и показывать пользователям продающие тексты:
    СКИДКИ до 50%!
    2 товара по цене 1
    Оформить заказ!

    А при оптимизации контента под поисковые системы приходится выделять:
    Электронный колайдер
    ЦЕНЫ на колайдер
    Колайдер купить!
    Заказать Колайдер Москва

    На данный момент большинство компаний отдают ...
    Описанные советы по юзабилити расходятся с оптимизацией контента под поисковые системы.
    По правилам юзабилити мы должны выделять и показывать пользователям продающие тексты:
    СКИДКИ до 50%!
    2 товара по цене 1
    Оформить заказ!

    А при оптимизации контента под поисковые системы приходится выделять:
    Электронный колайдер
    ЦЕНЫ на колайдер
    Колайдер купить!
    Заказать Колайдер Москва

    На данный момент большинство компаний отдают предпочтение оптимизированному под поисковые системы контенту и более высокой посещаемости.
    -
    0
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как выбрать CMS для интернет-магазина
Колян Гусляков
2
комментария
0
читателей
Полный профиль
Колян Гусляков - Если же у вас не получилось решить данную проблему, предлагаю воспользоваться авторской сборкой от neoseo. neoseo.ru/internet-magazin-seo-magazin-model. Они предоставляют дополнительные модули для работы и взаимодействия с вашим сайтом, современный дизайн, качественную оптимизацию и продвижение. Советую попробовать, не пожалеете.
«Юзабилити-лаборатория»: оставляйте заявку на участие!
Анна Макарова
381
комментарий
0
читателей
Полный профиль
Анна Макарова - Антон, добрый день! Ваш сайт не попал в основную выборку для юзабилити-анализа, но эксперты постараются сделать по вашему сайту видеоразбор (ю-ревью). Будем держать вас в курсе )
Тест по SEO – проверь свой уровень знаний
Артем Дорофеев
8
комментариев
0
читателей
Полный профиль
Артем Дорофеев - Полный текст вопроса со скриншотом панели прикладываю. Итого, что имеем: - на скриншоте отмечено, что это фильтр МПК - сайт коммерческий - рекламы на сайте нет С вероятностью 95% это ошибка (которая уже дважды случалась в Яндексе), когда они случайно "закосили" неповинные сайты. Тогда по запросу Платону фильтр быстренько снимали. Но вопрос даже не на знание этого нюанса. В любой непонятной ситуации, прежде чем что-либо предпринимать (особенно переписывать весь контент на сайте или менять дизайн, как указано в других вариантах) - фильтр следует подтвердить. Правильный ответ: "Написать письмо в техподдержку Яндекса".
Выбираем CMS для сайта с точки зрения SEO: базовые требования
SEO.RU
6
комментариев
0
читателей
Полный профиль
SEO.RU - Спасибо за замечание, действительно была допущена неточность - возможно информация была не так давно обновилась. Данные в статье поправим на актуальные.
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Дмитрий
1
комментарий
0
читателей
Полный профиль
Дмитрий - Нейромаркетинговые исследования также могут положительно повлиять на продвижение сайта, я лично убедился обратившись к компании Neorotrack, и результат был отличным
7 способов увеличить авторитетность сайта «в глазах» поисковых систем
Grigo5
4
комментария
0
читателей
Полный профиль
Grigo5 - Понятно.
Digital-marketing: как выжить в кризис. Опыт реальной компании
Maks
1
комментарий
0
читателей
Полный профиль
Maks - Спасибо за опыт Вашей компании, Иван Папусь. Интересно получилось! Желаю Вашему бизнесу стабильности и успешно пережить все кризисы))
100+ ресурсов по SEO для изучения поисковой оптимизации с нуля
Марина Ибушева
0
комментариев
0
читателей
Полный профиль
Марина Ибушева - Спасибо за добавление. Мы уже работаем над отдельным материалом про курсы, потому что одной статьи мало, чтобы охватить все крутое по обучению)
SEO must go on! Почему в кризис нельзя останавливать продвижение сайта
everystraus
0
комментариев
0
читателей
Полный профиль
everystraus - Мы даже варианты не рассматривали. Если проект неустойчив, сразу предлагали сбавить обороты до минимума, но и так, чтоб не свалиться в штопор. Именно по СЕО чаще всего.
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
381
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
89
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!