Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
Проектирование и дизайн сайтов Би-Би-Си, насколько трудно думать над юзабилити




ПОИСК по сайту


    Полный список статей
/ Проектирование и дизайн сайтов / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

Представляю вашему вниманию перевод статьи под названием "User Experience and the design of news at BBC World Service" от Tammy Gur. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании BBC и издания Johny Holland Magazine.



Проектирование окружающей среды для стремительного потока информации, проходящего через новостной веб-сайт в режиме нон-стоп — это вызов, не похожий ни на что другое. Команда дизайнеров и специалистов в области UX в BBC World Service создает новостные сайты для десктопных и мобильных браузеров на 27 языках, удовлетворяя различные аудитории по всему миру. В этой статье мы поделимся этим опытом с вами.




Некоторые из новостных сайтов BBC World Service: русский, арабский, китайский и бразильский.



Особенности дизайна новостных материалов в цифровом виде


Цикл публикации новостей в цифровом виде слишком быстр для того, чтобы разрабатывать дизайн специально для каждого материала. Дизайнеры, создающие бумажные газеты, меняют их внешний вид ежедневно. Дизайнеры, создающие онлайн-СМИ, создают макеты, которые не так сильно зависят от содержимого. Причина этого — крайне высокая скорость обновления информации. Это означает, что мы создаем дизайн сайта лишь однажды, а затем журналисты наполняют сайт содержимым, используя наш дизайн.



Пример макетов бумажных газет, разработанных специально для каждого выпуска. Обложки израильской новостной газеты «Yediot Achronot» от 26, 27 и 28 июня 2011 года.

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



Новостной сайт похож на бэнто-бокс


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



Традиционная коробка Бэнто.

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



Понимание содержимого: иерархия, объем, тон


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

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

Общение с журналистами помогает нам понять тон содержимого, который мы можем отразить в дизайне. Тон — это не просто стиль письма, он также связан с принципами компании, с ожиданиями пользователей и, в случае BBC World Service, с культурными различиями.

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



Понимание поведения и вкусов пользователей


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

Какие качества должны быть у новостного сайта? Какие задачи пользователь хочет решить на сайте? Статистика и анализ поведения пользователей говорит нам, что посетителям нравится:
  • Бегло просматривать заголовки последних новостей;
  • Видеть многообразие контента;
  • Знать, что вся информация максимально свежа;
  • Быть уверенным в том, что сайт предлагает только важную для него информацию;
  • Иметь возможность почитать новости по конкретной теме (например, новости технологий);
  • Сравнивать источники — видеть разные точки зрения на последние новости;
  • Иметь незагроможденную среду для комфортного чтения;
  • Знать, что новости, которые они читают, предоставлены надежным источником.


Создание дизайна, подстроенного под поведение пользователей и контент


У нас есть набор инструментов, при помощи которых мы создаем эффект коробки Бэнто. Давайте рассмотрим некоторые из них.
.

Модульная сетка


Скелет дизайна любого хорошего сайта — это модульная сетка. Она помогает создать визуальный порядок на сайте. На всех сайтах BBC используется одна универсальная сетка, которая является компонентом недавно введенного в эксплуатацию гайдлайна BBC «Global Experience Language». Эта сетка разделена на колонки размером 61 х 16 пикселей, чтобы соответствовать стандартным размерам изображений и видеоплеера на сайтах BBC. Сетку можно разделить на две равные по ширине колонки и еще одну, третью, немного пошире (как показано ниже). С одной стороны эта сетка гибка и позволяет отобразить на сайте все разнообразие информации, от развлекательных новостей до серьезных аналитических. С другой стороны она создает визуальную идентичность, которая присутствует на всех сайтах BBC и представляет собой элемент бренда. Также она стандартизирует размеры рекламных блоков на всех сайтах.



Сетка из Global Experience Language. Две из трех возможных комбинаций.
.

Распределение информации и названия блоков


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



Иерархия и группирование контента на испаноязычном сайте BBC.

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



Примеры названий тематических групп на испаноязычном и китайском сайте BBC.

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

.

Структура сайта


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

Для того, чтобы лучше объяснить это, расскажем о двух сценариях использования сайта. Мария хочет читать новости технологий. Ей нужно, чтобы такие материалы можно было найти интуитивно. Родригес хочет знать все о последних выходках Уго Чавеса. Структура сайта должна удовлетворять обоих этих персонажей.

Для Марии у нас есть несколько категорий верхнего уровня, таких как «Технологии». Категории располагается всегда в одном и том же месте, будь то навигация или область с содержимым на странице.

Для Родригеса у нас есть темы, такие как «Чавес». Тему можно присвоить любой статье — это работает аналогично тегам в блогах. Журналисты ВВС имеют возможность присваивать своим статьям эти тэги, однако они ограничены контролируемым словарем — он нужен для того, чтобы не было тем, в которых содержится всего несколько статей. Еще это позволяет главным редакторам контролировать список тем.

Одним словом, мы стараемся найти компромисс между жесткостью и гибкостью подачи информации. Статьи автоматически категоризируются по самым разным признакам, расходясь по темам и категориям. Это помогает им не затеряться, и попадать на стол тем, кто жаждет почитать именно их — такая система удобна и для Марии, и для Родригеса.



Модули с темами раскрывают более детальную категоризацию статей на сайте.

.

Типографика


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



Определяем типографическую иерархию для бирманского алфавита.

Из-за большого объема информации и того факта, что нашей команде приходится работать с восмью разными знаковыми системами, мы должны дополнительно подгонять работу со шрифтами под каждый сайт. Мы проделываем скрупулезную работу над размерами и стилями шрифта, чтобы создать согласованную иерархию, явно показывающую заголовки, краткие сводки, списки и так далее. Дизайнеры тщательно прорабатывают трекинг и интерлиньяж каждой знаковой системы. Затем выведенные гайды применяют к каждому модулю в каждом его виде: с изображениями разных размеров, без изображений, со списком связанных статей и дополнительными элементами, такими как иконки, означающие наличие комментариев или видео. Мы создали репозиторий модулей, содержащий любой возможный вариант. (Дополнительные подробности о шрифтовой работе, которую мы проделали, вы можете посмотреть ниже.)



Пример модулей для статей: с видео плеером (слева) и просто текстом (справа).

.

Время новости


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



Своевременное обновление новостей подчеркивается в блоке «Прокручивающиеся новости»
В дополнение, мы показываем заметные блоки с временем добавления главных новостей, пока не пройдет час с момента добавления.

.

Дальнейшее путешествие по сайту


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



Страница статьи как мини-версия главной страницы: правая колонка показывает контент с главной страницы и всего сайта.

Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(901) 370-1796

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2017 romver.ru

Полная карта сайта Display Pagerank  
CMS version 3.6.3 | PTG 0,0323 s.