Разработка привлекательного и читабельного сайта

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

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

Методы навигации

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

Чтобы понять преимущество облегченной навигации сайта, достаточно воспользоваться расширением для браузера Chrome под названием Ochs, который был создан Майклом Донахью специально для сайта New York Times. Откройте New York Times в любом другом браузере, а потом установите Ochs и откройте сайт в Chrome. Преимуществом Ochs является более чистая разметка и упорядоченная навигация. Из статей удалены инструменты для чтения и дополнительные модули. Больше свободного пространства и отсутствие массивных панелей навигации New York Times делает сайт более приятным для чтения.

Расширение Ochs убирает с сайта New York Times панели навигации.

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

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

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

Экспериментируем со шрифтами и интервалами

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

Не все будут читать ваш контент именно так, как он был разработан. Некоторые читатели устанавливают свой размер шрифта, а некоторые могут изменять разрешение экрана. Для более подробного отображения некоторые читатели пользуются такими вспомогательными технологиями, как экранные ридеры. Только за сегодняшний день я читала блоги со своего iPad, увеличивала страницы новостей через мобильный телефон, редактировала документы на огромном настольном мониторе, и загружала интернет-страницы при помощи телевизора (на маленьком разрешении). Именно поэтому растет популярность таких утилит, как Instapaper, Readability и Evernote. Возможность управлять форматом того, что ты читаешь и где ты это читаешь – это довольно полезная функция.

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

В новом интерфейсе Boston Globe улучшены шрифты и добавлено пустое пространство.

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

Правильная реклама

Как часто вы видите, чтобы люди быстрей пролистывали журнал, чтобы пропустить рекламу? Наверняка редко. Однако на веб-сайтах люди делают это постоянно, пытаясь в панике как можно быстрее найти маленький значок «Закрыть» на всплывающей рекламе или отыскивая, в какой из вкладок браузера вдруг заиграла аудио-реклама. Я надеюсь, что те, кто придумал эту ужасную автоматически запускающуюся рекламу, однажды испытают этот ужас, когда ты поздно в офисе один и вдруг непонятно откуда с тобой начинает разговаривать рекламный ролик.

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

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

Рекламная сеть The Deck гордится собой за размещение хорошей целевой рекламы, направленной на определенный сегмент пользователей, состоящий из креативных профессионалов. Вся их реклама выполнена в одном формате и имеет одинаковое количество текста. Сеть The Deck не платит и не размещает рекламу тех продуктов, которыми не пользуется сама, а потому она может поручиться за все своих рекламодателей. Основное ударение, сделанное на маленьких изображениях, заставляет рекламодателей использовать творческий подход, за что они получают 3% от всего объема посещений сети.

Реклама на The Deck выполнена изыскано и со вкусом.

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

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

Проверка аналитических данных

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

Сайт Financial Times внимательно следит за своей статистикой. На данный момент на этом ресурсе зарегистрировано более миллиона пользователей. В ноябре они объявили, что заменят первоначальную мобильную версию сайта интернет-приложением, созданным в июне 2011. Financial Times также создали программу, которая отображает тип устройства, с помощью которого пользователь зашел на сайт, и время суток. Кроме того недавно этот сервис запустил собственное Android-приложение – вероятно из-за того, что количество пользователей Android-устройств растет с каждым днем.

Financial Times предлагает собственные приложения на App Store.

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

1. Существует ли целевая аудитория для такого типа приложения, и растет ли ее численность?
2. Получает ли эта аудитория достаточно хорошее качество услуг вашего сайта?

Если среди ваших читателей почти нет пользователей iOS, однако достаточно много владельцев Android-устройств, почему бы не начать с этого? Кроме того, чем на вашем сайте занимаются пользователи Android-устройств? Долго ли они рассматривают ваш замечательный сайт или быстро его пролистывают? Последний вариант свидетельствует о том, что дизайн сайта далеко не идеален.

Но если вы хотите знать наверняка – спросите у них.

Кто-нибудь спросил мнение пользователей?

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

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

The Sunday Times прислушались к мнению пользователей и изменили функции загрузки.

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

А если пользователи говорят вам, что им что-то мешает читать ваш сайт, предложите им тихое место.

«Тихое место»

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

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

В A List Apart отсутствует все лишнее, что позволяет читателю сконцентрироваться. Статьи содержат минимум боковых панелей, и только пару небольших и со вкусом подобранных рекламных объявлений. Большая часть страницы выполнена в простом формате: читабельный текст (приправленный иллюстрациями), итог, который выделяет основные моменты статьи, и возможность обсудить статью.

A List Apart создал место, где пользователи могут получать удовольствие от чтения статей.

Когда это не работает?

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

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

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

Это перевод статьи под названием “Designing Engaging And Enjoyable Long-Form Reading Experiences” от Martha Rotter. Перевели в компании UXDepot с одобрением издания Smashing Magazine.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂