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

1. Семинар по онлайн
журналистике:
тизер, текст, ссылки, юзабилити
2 июля 2014 г.
http://bit.ly/1yZbjtM

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

10. Тизер
• новостной
• комментарий
• антитеза
• …
• кликабельность (CTR) тизера

11. Рекламный тизер
Арбитраж трафика Как делать тизеры для рекламы в
Вконтакте

12. Информационные и рекламные тизеры

23. Отсутствие в тизере ссылки на источник
заимствования

29. Текст
• Следите за тем, чтобы
текст имел четкую
структуру
• За счет этого упрощается
понимание текста для
всех категорий
посетитеей
• Используйте для
описания ясный и
простой язык.
• Текст должен быть
максимально
коротким.

31. ... Текст
• Подписи к
рисункам, списки,
цитаты можно
обозначить с
помощью HTML
• Гиперссылки, всегда
старайтесь сделать
их максимально
понятными.
• Нет никакого смысла в
гиперссылках вроде
«Щелкните здесь».
• Гиперссылка должна
указывать то место, куда
она позволяет перейти.
• Излишек гиперссылок
раздражает

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

33. ... Текст
1. Как правило -- короткие
предложения.
2. Чем меньше запятых, тем
лучше.
3. Сложные предложения –
для разнообразия
Если текст отображается на
экране монитора, читается
только третья часть от
объема.
При адаптации «бумажного»
текста для Интернета
необходимо его сокращать,
упрощать и
структурировать

34. Традиционная перевернутая
пирамида

35. Перевернутая пирамида в
Интернете

36. Абзацы и подзаголовки
• Тексты в Интернете более разреженные, чем в
газете. Это достигается увеличением количества
абзацев и подзаголовков.
• Максимальная длина абзаца - 8-10 строк.
• Приблизительно через три абзаца вставляется
подзаголовок.
• Идеально, если подзаголовок содержит
ключевые слова.
• Подзаголовки должны быть максимально
короткие: максимум 60 знаков с пробелами.

39. http://www.webmascon.
com/topics/text/17a.asp

40. Я. Нильсен. Как читают web-пользователи?http://www.
webmascon.com/topics/text/17a.asp

44. Инфографика
• Самые простые и давно
известные графические работы -
это карты, показывающие
читателям точное
местонахождение события, о
котором идет речь в статье.
• Рассмотрим примеры
• http://graphics.itar-tass.com/
• Раздел «СОБЫТИЯ В
ГРАФИКЕ»
• http://www.rian.ru/infografika/
• http://www.belta.by/ru/infographica

45. Оформление
• Свободное пространство между элементами
создает порядок и позволяет визуально
разделить различные элементы
• Фон – белый или светлый

46. Шрифты
• Arial (PC) или Helvetica (Mac)
Не имеет засечек, относиться к Grotesk-шрифтам, считается более современным по
сравнению с Times
• Times (PC) или Times New Roman (Mac)
Имеет засечки, относиться к Antiqua-шрифтам. Текст выглядит добротным. Большинство
книг, газет и журналов печатается с использованием такого типа шрифтов
• Courier (PC) или Courier New
(Mac)
Имеет засечки, пример классического шрифта для пишущей машинки. Все буквы отстоят на
одинаковом расстоянии. Считается старомодным.

47. ... Шрифты
• Подчеркивание – пользователь интуитивно
ожидает гиперссылку
• Курсив – на экране распознается значительно
хуже, чем в печатной версии
• ЗАГЛАВНЫЕ – крик
• Болд – традиционное выделение
• Сочетание шрифтов

48. Два принципа хозяев сайтов
гиперссылки
“липкие”, ведут
только на
внутренние
ресурсы
открытые, дают
ссылки и на внешние
ресурсы

49. Проданные слова

50. Наличие гиперссылок в
российских СМИ

51. http://www.kurier.vitebsk.by/

52. Юзабилити (usability)
Термин usability впервые применен по отношению к
сетевым ресурсам Якобом Нильсеном (Jakob Nielsen)
- основателем компании Nielsen Norman Group, которую
он создал вместе с Дональдом Норманом, бывшим
вице-президентом Apple Computer.
До 1998 года Нильсен работал ведущим инженером,
специалистом по юзабилити в фирме Sun
Microsystems.
Некоторые статьи Нильсена на русском: http://www.
webmascon.com/archive/topic.asp?id=22
Сайт Якоба Нильсена: http://www.useit.com/jakob/

53. Дизайн Web-страниц (веб дизайн). Анализ удобства и простоты использования 50 сайтов
Якоб Нильсен, Мари Тахир
Homepage Usability: 50 Websites Deconstructed
Jakob Nielsen, Marie Tahir
• Название и/или логотип компании должны иметь подходящий размер и
располагаться в заметном месте (например, в левом верхнем углу)
• Добавить к странице рекламный лозунг, который четко характеризовал,
чем именно занимается компания
• Подчеркнуть особенности сайта с точки зрения пользователей, его
отличия от основных конкурентов
• Четко выделить первостепенные задачи, чтобы попав на главную
страницу, посетитель сразу понимал с чего начинать
• У сайта должна быть только одна «официальная» домашняя страница
• В пределах главного сайта слово сайт не должно относиться ни к чему
другому, кроме как веб-сайту в целом
• Оформление домашней страницы должно четко отличать ее от остальных
страниц веб-сайта

54. • Сгруппировать информацию о компании, ее инвесторах, связях с
общественностью, имеющихся рабочих вакансиях и другие подобные
сведения в одном местеНеобходимо добавить ссылку на раздел «О нас»
(«About Us»), в котором содержались сведения о компании и ссылки на
более подробную информацию относительно ее товаров, услуг,
инвестиций, бизнес-предложений, руководящей команды
• Необходимо добавить ссылку «Связаться с нами» («Contact Us»),
указывающую на соответствующую страницу с контактной информацией
о компании
• Чтобы о компании писали в СМИ, добавить к домашней странице «Пресс-
релизы» или «Новости компании»С точки зрения пользователей веб-сайт
и компания должны составлять единое целое
• Если вы поддерживаете механизм обратной связи, уточнить — кто будет
читать полученные сообщения

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

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

57. • Реже употреблять слова, набранные только прописными буквами, или не
употреблять их совсем
• Не вставлять дополнительные пробелы или знаки препинания туда, где
это не нужно
• Примеры должны раскрывать, а не просто описывать содержимое сайта
• Каждый пример должен сопровождаться ссылкой на подробное описание
данного продукта, а не категории, к которой он принадлежит
• Рядом с описанием конкретных примеров необходимо разместить ссылку
на категорию в целом

58. • Ссылки на подробную информацию о конкретном продукте должны
отличаться от ссылок на категорию в целом
• Позаботиться об обеспечении легкого доступа ко всем элементам,
которые содержались на домашней странице в последнее время. Для этого
создать список последних изменений, а также постоянные архивы
удаленного содержимого
• Названия ссылок должны отличаться друг от друга и быть
удобочитаемыми
• Не использовать в названии ссылок инструкций общего характера
«Нажмите здесь»
• Ссылку, стоящую в конце списка элементов, не следует называть
неопределенным именем вроде «Еще:» или «Больше:»
• Цвета просмотренных и непросмотренных ссылок должны отличаться

59. • В названии ссылки или группы ссылок не употреблять само слово
«ссылка». Чтобы показать, что данное слово или фраза является ссылкой,
подчеркните его/ее и выделите голубым цветом
• Если функция ссылки отличается от обыкновенного перехода на другую
веб-страницу об этом должно быть сказано явно
• Главная панель навигации должна находиться в заметном месте
страницы, предпочтительно рядом с ее основной частью
• Сгруппируйте области навигации, чтобы подобные элементы находились
рядом друг с другом
• Не создавайте сразу несколько областей навигации, назначение которых
повторяет друг друга

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

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

62. • Не включать в поисковую систему сайта функцию поиска по Интернету
(кроме порталов)
• Домашняя страница должна обеспечивать прямой доступ к
первостепенным службам сайта
• Не добавлять на сайт службы, не имеющие отношения к его основной
тематике
• Не выставлять на сайт службы, которые повторяют стандартные функции
обозревателя, такие как выбор стартовой страницы или создание закладки
• Графика должна отображать реальное содержание сайта, а не только
служить его украшением

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

64. • Позвольте посетителю самому решать, хочет ли он видеть
анимированную заставку к сайту — не запускать ее по умолчанию
(относится к Flash-заставкам)
• Ограничить применение различных гарнитур шрифтов и другого
текстового форматирования (размеры, цвета)
• Использовать высококонтрастные цвета шрифтов и фона страницы
• Стараться обойтись без горизонтальной прокрутки для для наиболее
распространенного разрешения экрана

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

66. • Title должен начинаться со слова, несущего смысловую нагрузку
• Не включать в Title имя домена верхнего уровня, если только он не
является частью официального названия компании
• Не включать в Title словосочетание «домашняя страница»
• Title должен содержать краткое описание веб-узла
• Title должен состоять не более чем из семи-восьми слов и содержать не
более 64 символов
• Домашние страницы коммерческих компаний должны иметь адрес вида
http:// www.company.com, не должны использоваться сложные коды или
названия страниц типа index.html
• Если содержание веб-узла тесно привязано к конкретной стране — URL
должен содержать домен верхнего уровня данной страны

67. • Необходимо зарегистрировать доменные имена, содержащие
альтернативные, сокращенные, а также наиболее часто употребляемые
неправильные варианты написания имени компании
• Если у веб-узла несколько альтернативных доменных имен, выбрать одно
из них в качестве «официального» и перенаправлять на него всех
посетителей, воспользовавшихся другими адресами
• Заголовки статей должны быть сжатыми, но в то же время
описательными, и передавать максимум информации при минимальном
количестве слов

68. • Составить специальное резюме (Summary) для каждой статьи или пресс-
релиза, о которых упоминается на домашней странице
• В качестве ссылки на полную версию статьи необходимо использовать ее
заголовок, а не подзаголовок
• Если все новости, упомянутые на домашней странице, относятся к
событиям последней недели, специально указывать дату и время в
подзаголовке каждой из статей не нужно. Исключение составляют лишь
действительно важные новости, которые могут обновляться по нескольку
раз в день
• Никаких эффектных заставок и промежуточных страниц быть не должно
• Максимально отказаться от раскрывающихся окон (PopUp-ов)

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

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

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

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

73. • Показать посетителям время последнего обновления страницы, а не
текущее время
• При ссылке на время обязательно указывать часовой пояс (для
международных сайтов)
• Использовать стандартные аббревиатуры «p.m.» или «P.M.» (для
международных сайтов)
• Указывая месяц, использовать его полное название или общепринятое
сокращение, а не числовое обозначение
• Для отображения чисел, имеющих пять и более разрядов, использовать
принятый в своей стране разделитель
• Отображая столбец дробных чисел, необходимо выравнивать их по
десятичной точке

74. Критерии проверки
(check list) онлайн-статьи
• - информативность заголовка;
• - привлекательность тизера;
• - оптимизация для RSS-канала на Яндексе (первый абзац!);
• - снимки и подписи к ним;
• - подзаголовки;
• - абзацы;
• - ключевые слова;
• - ссылки внутренние и внешние;
• - интерактивные элементы;
• - мультимедиа;
• - вопрос читателю.

75. Литература
• Й. Якобсон. Концепция разработки web-сайтов. М.: 2006
• А.В. Тарбеев. Шрифтовой дизайн и оформление
современного российского журнала // Вестник Московского
университета. Серия 10 (журналистика), №4/2004
• Д. Кирсанов. Веб-дизайн. М.: 2006 www.kirsanov.com
• Я. Нильсен. Как читают web-пользователи?http://www.
webmascon.com/topics/text/17a.asp