Создание удобного способа поиска ресурсов в районе.
С помощью группы Генеральной Ассамблеи мы доводим до совершенства наши проекты для популярного устаревшего приложения.
Почти три года спустя после запуска Boston.gov мы всё ещё работаем над переносом некоторых наших старых, устаревших систем. Одна из них — наш инструмент «Мои ресурсы в районе» . Хотя он немного устарел, приложение всё ещё очень полезно, предоставляя информацию для жителей на основе их адресов. И ему давно пора обновить дизайн в стиле Boston.gov.
С помощью одного из наших летних стажеров мы смогли провести некоторое исследование приложения и типа пользователей, заинтересованных в нем. Хотя у нас были некоторые предварительные прототипы, мы не смогли протестировать их с нашими пользователями так, как нам хотелось бы. Прежде чем углубиться в техническую сторону дела, мы хотели убедиться, что создаем приложение, которое легко использовать и понимать.
Мы решили использовать наши связи с General Assembly , чтобы поработать с группой специалистов по пользовательскому опыту над созданием прототипов новых дизайнов для приложения. В блоге ниже студенты описывают, как они создавали прототипы дизайна для новой версии приложения.
Начало работы над проектом
На нашей первой встрече команда цифровых технологий попросила нас переработать приложение для поиска адресов под названием «Мои местные ресурсы» . Это приложение размещено на старом сайте города, cityofboston.gov. Прежде чем команда перенесла инструмент на новый сайт города, они хотели убедиться, что создают приложение, ориентированное на пользователя. Приложение предоставляет жителям информацию на основе интересующей их недвижимости или места в городе. Нас вдохновила идея помочь тысячам жителей города быстро находить необходимые ресурсы и услуги на Boston.gov.
Наша задача заключалась в том, чтобы продолжить исследования и тестирование, ранее проведенные бывшим стажером в городе Бостон, и предоставить варианты дизайна, приближенные к финальным. Нам было предложено в деталях продумать, какая информация — и в каком объеме — должна отображаться после поиска по адресу.
В чём проблема?
Сначала мы изучили первоначальные исследования, проведенные по этому приложению. Чтобы лучше понять существующую работу по дизайну и получить исходную точку для нашей работы, мы также проанализировали оригинальный инструмент «Мой район». Мы заметили несколько областей, которые нуждались в улучшении:
- После ввода адреса происходит длительная задержка перед загрузкой результатов. Кроме того, пользователям приходится долго прокручивать страницу, чтобы увидеть результаты.
- Результаты поиска часто неполные и/или недостаточные.
- Шрифты и цветовые схемы в приложении не соответствуют друг другу.
Создание нашего дизайна
Теперь, когда мы лучше понимали распространенные проблемы, с которыми сталкиваются пользователи приложения, пришло время для мозгового штурма и генерации идей. В General Assembly мы узнали о Design Studio — методе опробования множества дизайнерских идей за очень короткое время. Мы решили использовать этот подход в этом проекте.
Во время «Дизайн-студии» команда выбирает один элемент дизайна — например, строку поиска — и у каждого участника команды есть одна-две минуты, чтобы набросать как можно больше вариантов этого элемента. Затем, по очереди, остальные участники говорят, что им нравится, а что не нравится (в приятной форме!), в каждом эскизе, голосуя за свои предпочтения. Элементы с наибольшим количеством голосов сохраняются, а остальные отбрасываются.
Для нашей дизайн-студии мы рассмотрели, как должны выглядеть два элемента:
- страница загрузки с поисковой строкой адресов, и
- результаты поиска, включая ближайшие парки и бассейны.
Проверка, проверка
После того, как мы проголосовали, мы превратили их в простые черно-белые дизайны. Мы намеренно отказались от цвета. Мы хотели, чтобы наши пользователи сосредоточились на том, как работает приложение, не отвлекаясь на цвет, который им может понравиться или нет.
Чтобы всегда помнить о потребностях наших пользователей, мы руководствуемся принципом: «Я — не мой пользователь». Тестирование приложений с пользователями имеет решающее значение. Мы хотим убедиться, что они могут найти то, что им нужно, и получать информацию тогда, когда она им нужна. Мы никогда не хотим предполагать, что наше дизайнерское решение является правильным, пока множество пользователей не подтвердят, что наш продукт действительно прост в использовании.
В этом духе мы перенесли наши дизайны в InVision. Это программное обеспечение используется дизайнерами для создания интерактивной среды для тестировщиков. У нас может не быть всех тонкостей полноценного приложения. Но мы можем получить представление о том, как пользователи будут взаимодействовать с этим приложением. В итоге мы провели шесть раундов пользовательского тестирования с 29 участниками.
Проверяем наш прототип.
Когда тестовое приложение было готово, мы вышли на улицы с телефонами в руках, чтобы найти людей, которые были бы готовы его попробовать.
На целевой странице, где пользователям нужно было ввести адрес, мы разместили значки различных категорий поиска. Мы думали, что эти значки внушат уверенность, давая пользователям представление о том, чего ожидать после ввода адреса.
Пользователи постоянно нажимали на значки вместо того, чтобы ввести адрес. Поскольку основным действием, которое требовалось от пользователей, был ввод адреса, нам нужно было более прямо направлять их к этому. Другими словами, нам нужно было упростить дизайн и не создавать ситуацию, в которой им нужно было бы думать.
Вернёмся к чертежной доске.
Чтобы сделать поле поиска более заметным, мы решили удалить значки. Устранив и убрав основное препятствие для использования приложения, мы добавили цвета, чтобы приложение выглядело более законченным продуктом. Согласовав наш дизайн с брендом города Бостона, мы предположили, что пользователи будут ещё охотнее использовать приложение.
Для следующего этапа тестирования мы расположились в здании мэрии рядом с отделами регистрации и парковочного контроля. Мы ждали, пока жители закончат все свои дела в мэрии, прежде чем спрашивать, не могли бы они дать нам обратную связь.
Если у меня слабое зрение, текст, набранный курсивом, будет трудно читать.
В ходе этого этапа тестирования мы получили первые отзывы, в которых говорилось о трудностях с чтением текста. Очевидно, мы хотим, чтобы этим приложением пользовалось как можно больше жителей, поэтому вопросы доступности были в приоритете. Чтобы облегчить чтение текста, мы увеличили ширину вкладки категории, добавив пространство, и изменили шрифт с курсивного на обычный.
Третий раунд тестов
Завершив последний этап редактирования, мы снова вышли в местное сообщество, на этот раз в филиал Бостонской публичной библиотеки в Чайнатауне. Мы получили отличные отзывы от жителей, которые приносили книги или просто отдыхали во время обеденного перерыва.
Было бы здорово, если бы это было связано с Google Maps или какой-нибудь картой в целом.
В ходе тестирования пользователи неоднократно заявляли о своей потребности в использовании карт в приложении. В настоящее время использование GPS и навигации стало неотъемлемой частью современных приложений. Учитывая это, мы решили выделить ссылки на карты в результатах поиска, подсвечивая текст синим цветом.
Последняя остановка: настольные компьютеры
До этого момента мы придерживались подхода «мобильность прежде всего» в разработке дизайна. Гораздо проще устранить недочеты на мобильных устройствах, а затем перенести этот опыт на экраны больших размеров, чем наоборот. Проведя множество тестов на мобильных устройствах, мы почувствовали себя уверенно, работая над новыми дизайнами для экранов ноутбуков и настольных компьютеров.
Главное различие, конечно, в том, что экраны ноутбуков и настольных компьютеров предоставляют больше пространства для творчества и реализации различных функций. В некотором смысле это может быть освобождающим фактором. Однако рефлексивное решение просто добавить больше может быть опасным. Слишком много информации мешает пользователям выполнять задачи.
«Я хочу перемещаться по странице».
Мы вернулись в мэрию в последний раз для интенсивного послеобеденного тестирования. При тестировании наших дизайнов на экранах настольных компьютеров мы заметили, что пользователи «застревают». Когда они оказывались в части страницы, где им нужно было вернуться назад, прокручивая страницу, они часто чувствовали себя запертыми. Чтобы решить эту проблему, мы добавили «фиксированное» навигационное меню вверху страницы. Эта функция предоставляет пользователям возможность переходить из одного раздела в другой, независимо от того, где они находятся на странице.
В заключение
Для нашей команды было огромной радостью и привилегией помочь в редизайне приложения My Neighborhood для города Бостона. Мы надеемся, что наша работа сделает сайт Boston.gov немного проще в навигации и приятнее в использовании для его пользователей.
О команде Генеральной Ассамблеи
General Assembly предлагает ускоренные курсы по востребованным навыкам в сфере технологий. Студенты, с которыми мы работали, были участниками интенсивного курса по дизайну пользовательского опыта (User Experience Design Immersive) зимы 2019 года. Их работа над приложением для поиска ресурсов в районе была заключительным проектом, который они выполнили за три недели. Мы невероятно благодарны им за участие, профессионализм и ценные результаты. В проекте участвовали студенты: Мэтт Уэстон , Элль Трогер , Вэйнан Ли и Рик Аборн .