Разработка удобного и понятного информационного бюллетеня для жителей Бостона

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

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

Этим летом мы сотрудничали с командой по пользовательскому опыту из General Assembly , чтобы пересмотреть все наши информационные бюллетени, а также процесс их создания. Группа исследовала наши текущие процессы, чтобы разработать лучшие решения для информационных бюллетеней. Запись в блоге ниже, посвященная их выводам, написана участниками General Assembly, с которыми мы работали: Марджори Меснис , Максом Нагелем и Катериной Забродской .

Начало работы

Город Бостон искал более удобный способ для рассылки новостных бюллетеней между отделами. Однако у них был широкий круг вопросов, на которые нужно было ответить или которые нужно было решить. В конечном итоге мы сузили наш фокус до двух основных областей:

Понимание существующих систем рассылки новостных рассылок
Проверка формата и макета электронных писем.

В число вопросов, которыми мы руководствовались в своей работе, входили:

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

Кто наш пользователь? С кем нам следует связаться?

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

Процесс и инструменты

В ходе наших интервью с читателями информационных бюллетеней мы смогли выявить следующие модели поведения:

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

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

В ходе бесед с сотрудниками мэрии мы выяснили, что они:

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

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

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

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

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

Результаты нашего опроса:

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

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

Что делают другие крупные города и каковы передовые практики в отрасли?

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

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

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

На этом этапе мы также хотели узнать, как другие города США рассылают информационные бюллетени. После проведения сравнительного анализа информационных бюллетеней, публикуемых другими крупными городами США, мы обнаружили, что:

В Бостоне было самое большое количество информационных бюллетеней (62 против среднего показателя в 20).
В большинстве информационных бюллетеней количество тем ограничивается семью или меньшим их числом, что обычно приводит к созданию одного или двух страниц контента.
Шестьдесят пять процентов городов включают в свои информационные бюллетени менее восьми ссылок.

Разработка решения

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

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

Мы также выявили проблемные моменты, которые необходимо будет решить в финальном дизайне:

Сделайте это коротким (менее 5 минут)
Обеспечьте визуальное и содержательное соответствие во всех публикациях.
Заинтересуйте пользователей визуальными элементами, а не гиперссылками.
Помните, что информационные бюллетени служат для быстрого обмена информацией с заинтересованными сторонами.
Дизайн должен быть адаптивным и доступным.

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

Сначала мы создали три шаблона, предлагающих различные способы решения проблемных моментов. Затем мы провели юзабилити-тестирование, чтобы определить, как пользователи реагируют на новые макеты. Наша цель заключалась в уточнении того, какие компоненты наиболее успешно привлекают внимание пользователя.

Разработка компонентов по одному

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

Структура текста и изображения

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

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

В ходе тестирования юзабилити мы выяснили, что пользователям понравился внешний вид текста в рамке в версии 1 (слева), но они сочли его менее читабельным, чем в версиях 2 и 3. Более того, текст, вставленный в изображение, иногда не распознается программами чтения с экрана. Это ограничивает доступность контента для людей с нарушениями зрения.

Это привело нас к исключению версий 1 и 3 и использованию версии 2 (средней), которая соответствует рекомендациям Американского закона о борьбе с дискриминацией инвалидов (ADA) .

Заголовок

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

Баннер с объявлениями города

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

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

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

Повторяющийся баннер с контентом по отделам

Цель использования простых иконок компонентов заключалась в сокращении длины информационного бюллетеня путем сжатия повторяющегося контента в простые кликабельные иконки:

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

Добавив такой раздел в шаблоны городов, вы сможете:

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

Заключительные мысли

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

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

General Assembly предлагает ускоренные курсы по востребованным навыкам в сфере технологий. Студенты, с которыми мы работали, были участниками летнего 2020 года интенсивного курса по дизайну пользовательского опыта. Их работа над информационными бюллетенями города Бостона стала заключительным проектом, который они выполнили за три недели. В проекте участвовали Марджори Меснис , Макс Нагель и Катерина Забродская .