Решения по дизайну: обновление главной страницы раздела «Парки»

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

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

На веб-сайте парков и зон отдыха доступно множество полезных ресурсов. Мы хотели убедиться, что предоставляем эту информацию людям в понятной форме. Для этого мы обратились к нашим друзьям и партнерам из General Assembly . Благодаря этой организации мы смогли поработать с группой студентов, изучающих пользовательский опыт, осенью, чтобы взглянуть на сайт парков по-новому и разработать идеи по упрощению его использования для жителей. В группу General Assembly, с которой мы работали, входили Зак Родригес, Калсанг Бхутия и Майкл Родригес. Они написали о своей работе в блоге, который приведён ниже.

---

Понимание проблемы

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

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

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

---

Ознакомление с местностью.

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

1. Заинтересованные стороны в отделе
2. Обычные пользователи веб-сайта Parks
3. Прежние партнеры Департамента парков (например, поставщики)

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

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

---

Кто наши пользователи?

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

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

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

---

Строим для людей.

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

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

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

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

• Аудит контента
• анализ данных (через Google Analytics)
• карты сайта текущего и будущего состояния
• сравнительные анализы на других веб-сайтах Департамента парков, и
• сортировка карточек.

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

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

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

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

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

Сайты, реализованные неудачно, имели такие проблемы:

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

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

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

---

Превращение наших идей в дизайн.

Мы провели дизайн-студию, которая позволила нам трём:

• поделиться нашими разнообразными дизайнерскими идеями
• обобщите общие черты и
• обсудить и решить спорные моменты.

Мы все согласились на создание отдельных веб-страниц для:

• события
• специфическая информация о парке, и
• Информация о деловом партнерстве.

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

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

Мы провели первый раунд юзабилити-тестирования с использованием макета интерфейса низкой или средней степени детализации. Мы попросили пользователей выполнить следующие задачи:

• Найдите страницу с событиями.
• найдите календарь мероприятий, специфичный для этого парка, и
• найдите ресурсы для сотрудничества с Департаментом парков.

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

Хотя пользователи смогли выполнить поставленные задачи, это не всегда было для них легко. Мы получили единодушные отзывы о том, что:
Объявления в верхней части страницы отвлекали внимание.

• ссылки-якоря были недостаточно заметны
• было слишком много кликабельных ссылок, и
• Свиток был очень длинным.

---

Строительство с учетом результатов наших испытаний

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

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

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

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

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

---

General Assembly предлагает ускоренные курсы по востребованным навыкам в сфере технологий. Студенты, с которыми мы работали, были участниками интенсивного курса по дизайну пользовательского опыта (UX) осенью/зимой 2020 года. Их работа над веб-сайтом Департамента парков и зон отдыха города Бостона стала заключительным проектом, который они выполнили за три недели. В проекте участвовали студенты Зак Родригес , Калсанг Бхутия и Майкл Родригес .