| Представляю вашему вниманию перевод статьи под названием "User Experience and the design of news at BBC World Service" от Tammy Gur. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании BBC и издания Johny Holland Magazine.
![](http://habrastorage.org/storage1/8a2a18b0/7d2ac24f/2ee2a2c8/f43820bc.jpg)
Проектирование окружающей среды для стремительного потока информации, проходящего через новостной веб-сайт в режиме нон-стоп — это вызов, не похожий ни на что другое. Команда дизайнеров и специалистов в области UX в BBC World Service создает новостные сайты для десктопных и мобильных браузеров на 27 языках, удовлетворяя различные аудитории по всему миру. В этой статье мы поделимся этим опытом с вами.
![](http://habrastorage.org/storage1/acc2ce36/68dd286e/70dcfdbf/a128ac75.jpg)
Некоторые из новостных сайтов BBC World Service: русский, арабский, китайский и бразильский.
Особенности дизайна новостных материалов в цифровом виде Цикл публикации новостей в цифровом виде слишком быстр для того, чтобы разрабатывать дизайн специально для каждого материала. Дизайнеры, создающие бумажные газеты, меняют их внешний вид ежедневно. Дизайнеры, создающие онлайн-СМИ, создают макеты, которые не так сильно зависят от содержимого. Причина этого — крайне высокая скорость обновления информации. Это означает, что мы создаем дизайн сайта лишь однажды, а затем журналисты наполняют сайт содержимым, используя наш дизайн.
![](http://habrastorage.org/storage1/0dac3885/29fffab1/1afc4d69/225e0e26.jpg)
Пример макетов бумажных газет, разработанных специально для каждого выпуска. Обложки израильской новостной газеты «Yediot Achronot» от 26, 27 и 28 июня 2011 года.
Результатом работы команды дизайнеров является набор модулей и их поведений. Вы можете возразить что так поступают все дизайнеры со всеми сайтами. Это правда, но разница состоит в объеме и многообразии контента, который может появляться в любое время на протяжении дня. Материал может состоять из одного текста, в нем могут быть изображения или целые галереи изображений, а также видео или аудио. Важное экстренное сообщение может выглядеть совсем иначе чем просто статья, помещенная редакцией в список интересных. А еще у главной страницы может быть несколько вариантов стиля — один для будней, другой для выходных (который будет отличаться объемом контента и самим контентом). Все возможные случаи учтены и продуманы как часть дизайна.
Новостной сайт похож на бэнто-бокс Мне нравится сравнивать новостной сайт с японским Бэнто-боксом. Внутри краев подноса располагаются маленькие блюда различных форм и размеров, которые можно расставлять в разных сочетаниях. То же происходит и с нашим дизайном. Еда, которая содержится в маленьких тарелках — это меняющееся новостное содержимое сайта. Гармония между блюдами и боксом определят ощущения, которые мы испытываем во время еды.
![](http://habrastorage.org/storage1/56232af5/61b13e44/eee11164/b5cad84e.jpg)
Традиционная коробка Бэнто.
Пища кажется привлекательной, она словно просит съесть ее. Но была бы она столь привлекательной, если бы все блюда были свалены на подносе в одну большую неаппетитную кучу? Для того, чтобы добиться такого эффекта, тот, кто готовит Бэнто, должен понимать еду (контент) и вкусы желающих поужинать (поведение пользователя).
Понимание содержимого: иерархия, объем, тон С самого начала работы над дизайном мы работаем в тесном сотрудничестве с журналистами. Мы знакомимся с будущим контентом, и просим редакторов распределить типы контента по важности. Так мы получаем иерархию контента.
Также мы узнаем у журналистов, какой объем содержимого проходит через главную страницу за день. Например, нас интересует, как много бывает статей, выбираемых редакцией как самые интересные, как много бывает тематических и региональных статей. В большинстве стран пик читаемости материалов приходится на утро и обеденный перерыв, и именно в это время команда будет писать наибольшее количество статей.
Общение с журналистами помогает нам понять тон содержимого, который мы можем отразить в дизайне. Тон — это не просто стиль письма, он также связан с принципами компании, с ожиданиями пользователей и, в случае BBC World Service, с культурными различиями.
Изучение пользовательской аудитории и анализ конкурентов, проводимые нами многие годы, выявило некоторые интересные факты касательно рынков, на которых мы работаем. Например, мы обнаружили, что на российском рынке и рынках стран среднего востока читатели преимущественно хотят видеть важные политические новости. В то время как бразильцы предпочитают читать разные интересные, но не такие важные факты. Для того чтобы отразить это, на первых двух экранах главной страницы русского сайта показано больше политических новостей, в то время как на бразильском сайте это место усеяно галереями картинок и интересными историями со всего мира.
Понимание поведения и вкусов пользователей Поведение посетителя новостного сайта обычно можно описать двумя разными способами. Пользователь либо бегло просматривает статьи, либо читает их полностью. Или же он делает это попеременно, в зависимости от настроения и того, есть ли у него свободное время. Утром, перед началом рабочего дня у пользователя есть совсем немного времени на то, чтобы изучить последние сводки новостей, а вечером или во время обеденного перерыва он вполне может позволить себе прочитать статью полностью, и даже прочитать другие статьи, связанные с ней.
Какие качества должны быть у новостного сайта? Какие задачи пользователь хочет решить на сайте? Статистика и анализ поведения пользователей говорит нам, что посетителям нравится:- Бегло просматривать заголовки последних новостей;
- Видеть многообразие контента;
- Знать, что вся информация максимально свежа;
- Быть уверенным в том, что сайт предлагает только важную для него информацию;
- Иметь возможность почитать новости по конкретной теме (например, новости технологий);
- Сравнивать источники — видеть разные точки зрения на последние новости;
- Иметь незагроможденную среду для комфортного чтения;
- Знать, что новости, которые они читают, предоставлены надежным источником.
Создание дизайна, подстроенного под поведение пользователей и контент У нас есть набор инструментов, при помощи которых мы создаем эффект коробки Бэнто. Давайте рассмотрим некоторые из них. .
Модульная сетка Скелет дизайна любого хорошего сайта — это модульная сетка. Она помогает создать визуальный порядок на сайте. На всех сайтах BBC используется одна универсальная сетка, которая является компонентом недавно введенного в эксплуатацию гайдлайна BBC «Global Experience Language». Эта сетка разделена на колонки размером 61 х 16 пикселей, чтобы соответствовать стандартным размерам изображений и видеоплеера на сайтах BBC. Сетку можно разделить на две равные по ширине колонки и еще одну, третью, немного пошире (как показано ниже). С одной стороны эта сетка гибка и позволяет отобразить на сайте все разнообразие информации, от развлекательных новостей до серьезных аналитических. С другой стороны она создает визуальную идентичность, которая присутствует на всех сайтах BBC и представляет собой элемент бренда. Также она стандартизирует размеры рекламных блоков на всех сайтах.
![](http://habrastorage.org/storage1/74837c40/beb7e4ba/81aaa932/972d0b42.gif)
Сетка из Global Experience Language. Две из трех возможных комбинаций. .
Распределение информации и названия блоков Мы начинаем с того, что определяем места для блоков содержимого более высокого порядка, как показано выше. Затем мы спускаемся на уровень ниже и размещаем конкретные блоки в сетку. В это время мы основываемся на приоритетах, данных контенту во время обсуждения с редакцией. Кроме того, мы принимаем в расчет ожидания пользователей, а также иногда стараемся повторить модели, внедренные у конкурентов, или обратить особое внимание читателей на наши оригинальные материалы.
![](http://habrastorage.org/storage1/3a1f2689/be259ef6/697f1de0/7ee73c15.jpg)
Иерархия и группирование контента на испаноязычном сайте BBC.
У каждой группы контента есть названия (за исключением блока топовых новостей), которые отражаются в категориях навигационного меню. Названия блоков играют двойную роль на наших сайтах: с одной стороны они явно дают понять к какому типу материалов относится та или иная статья, а с другой служат как визуальные якоря, помогающие бегло просматривать сайт.
![](http://habrastorage.org/storage1/70180d83/fe4da7fe/a279fefd/e965650b.jpg)
Примеры названий тематических групп на испаноязычном и китайском сайте BBC.
Комбинация расположения содержимого в сетке, подхода к названиям в контенте, пробелов между блоками и различных изображений задает визуальный ритм на странице.
.
Структура сайта Есть трение между необходимостью помочь пользователю быстро найти то, что он ищет, и необходимостью показать многообразие материалов на сайте. Как международное новостное агенство, у нас есть еще одна проблема: наши новостные сайты почти всегда конкурируют с лидирующими местными агенствами новостей. Поэтому нам приходится точно продумывать, какие категории показывать пользователям, так, чтобы сайт был актуальным для них и помогал находить материалы по теме, которая их интересует.
Для того, чтобы лучше объяснить это, расскажем о двух сценариях использования сайта. Мария хочет читать новости технологий. Ей нужно, чтобы такие материалы можно было найти интуитивно. Родригес хочет знать все о последних выходках Уго Чавеса. Структура сайта должна удовлетворять обоих этих персонажей.
Для Марии у нас есть несколько категорий верхнего уровня, таких как «Технологии». Категории располагается всегда в одном и том же месте, будь то навигация или область с содержимым на странице.
Для Родригеса у нас есть темы, такие как «Чавес». Тему можно присвоить любой статье — это работает аналогично тегам в блогах. Журналисты ВВС имеют возможность присваивать своим статьям эти тэги, однако они ограничены контролируемым словарем — он нужен для того, чтобы не было тем, в которых содержится всего несколько статей. Еще это позволяет главным редакторам контролировать список тем.
Одним словом, мы стараемся найти компромисс между жесткостью и гибкостью подачи информации. Статьи автоматически категоризируются по самым разным признакам, расходясь по темам и категориям. Это помогает им не затеряться, и попадать на стол тем, кто жаждет почитать именно их — такая система удобна и для Марии, и для Родригеса.
![](http://habrastorage.org/storage1/7a4308f1/ee1ad748/1964622a/ed214f3b.gif)
Модули с темами раскрывают более детальную категоризацию статей на сайте.
.
Типографика Шрифтовая работа — один из важнейших элементов любого сайта с большим количеством текста. Развитие технологий позволило контролировать шрифты в вебе до степени, недостижимой раньше. Мы включили в Global Experience Language амбициозный набор гайдлайнов, которые поставили роль типографики обратно на самое важное место в дизайне. Решения, связанные с гарнитурой и ее размером, узкий трекинг и интерлиньяж, а также использование жирных заголовков: все это стало частью визуального языка сайтов BBC. Применение линии шрифта используется для помощи в выравнивании элементов и для контроля набора. Внимание ко всем этим деталям нацелено на то, чтобы добиться более ясной визуальной иерархии и улучшения читаемости текста.
![](http://habrastorage.org/storage1/b148b925/93eada54/d173659c/67ea633b.jpg)
Определяем типографическую иерархию для бирманского алфавита.
Из-за большого объема информации и того факта, что нашей команде приходится работать с восмью разными знаковыми системами, мы должны дополнительно подгонять работу со шрифтами под каждый сайт. Мы проделываем скрупулезную работу над размерами и стилями шрифта, чтобы создать согласованную иерархию, явно показывающую заголовки, краткие сводки, списки и так далее. Дизайнеры тщательно прорабатывают трекинг и интерлиньяж каждой знаковой системы. Затем выведенные гайды применяют к каждому модулю в каждом его виде: с изображениями разных размеров, без изображений, со списком связанных статей и дополнительными элементами, такими как иконки, означающие наличие комментариев или видео. Мы создали репозиторий модулей, содержащий любой возможный вариант. (Дополнительные подробности о шрифтовой работе, которую мы проделали, вы можете посмотреть ниже.)
![](http://habrastorage.org/storage1/73c77084/e3fa1d7b/a9e147ab/9642b6ea.jpg)
Пример модулей для статей: с видео плеером (слева) и просто текстом (справа).
.
Время новости Время публикации статьи имеет крайне важное значение — от него сильно зависит доверие пользователя к новостному сайту. Понимая это, мы добавили на сайт элемент, который мы называем «Прокручивающиеся новости» — в этом блоке автоматически, в режиме реального времени, появляются заголовки новостей со временем появления новости. Нажатие на заголовок ведет пользователя к короткой статье, описывающей событие. Блок расположен в верхней части главной страницы, рядом с блоком главных новостей за сегодня, он также имеется на странице каждой статьи.
![](http://habrastorage.org/storage1/76a89e71/28580a99/137d317e/c5f59f79.jpg)
Своевременное обновление новостей подчеркивается в блоке «Прокручивающиеся новости» В дополнение, мы показываем заметные блоки с временем добавления главных новостей, пока не пройдет час с момента добавления. .
Дальнейшее путешествие по сайту Большое количество пользователей приходит на сайт сразу через определенную статью, а не через главную страницу сайта. Поэтому мы выделили пространство на странице каждой статьи специально под самый важный контент с главной страницы и всего сайта, демонстрируя на каждой странице сайт во всю ширину. Таким образом мы поощряем посетителя читать сайт дальше. Это недавняя идея. Раньше мы старались показать пользователю только статьи, связанные с той, которую он читает. Дизайнерам нужно было постараться, чтобы при том, что на странице показана куча дополнительной информации, сайт было по-прежнему легко читать.
![](http://habrastorage.org/storage1/50759fee/fda1875c/c7e2e9bc/cb53ed23.jpg)
Страница статьи как мини-версия главной страницы: правая колонка показывает контент с главной страницы и всего сайта.
|
|