Иногда мы просто не читаем инструкцию.

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

Большая часть контента, который мы публикуем на Boston.gov, призвана помочь вам что-то сделать. У нас также есть отдельные страницы, которые мы называем «инструкциями по выполнению действий» для ситуаций, требующих конкретного набора инструкций, например, « Как оплатить штраф за парковку » (очень популярная тема). Правда в том, что если мы не представим эти инструкции в полезной и эффективной форме, то мы мало чего добьёмся! Мы постоянно стремимся к совершенствованию в нашей Цифровой команде. Будь то улучшение цифровых коммуникаций или создание более эффективных онлайн-инструментов, мы заинтересованы в создании более привлекательного опыта для наших пользователей, который со временем будет становиться лучше.

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

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

После первой встречи с цифровой командой мы изучили несколько вариантов для нашего потенциального проекта. В итоге мы решили сосредоточиться на страницах «инструкций» на сайте Boston.gov. Учитывая высокую посещаемость, мы переработали страницу « Как оплатить штраф за парковку ».

Мы были полны решимости общаться и тестировать различные варианты с самыми разными людьми, потому что наш «целевой пользователь» мог быть буквально кем угодно. К концу проекта мы провели в общей сложности 59 тестов юзабилити, которые были разделены между текущим сайтом и нашим новым дизайном. Благодаря нашим усилиям мы смогли получить информацию, которая могла бы быть применена ко всем страницам на Boston.gov. Этот фокус на итеративном тестировании привел нас к дизайну, в котором мы были уверены, что он будет более удобен для людей, использующих Boston.gov для выполнения своих задач.

Image for screenshot of the original how to page

Наш пользователь? Люди.

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

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

В ходе нашего исследования мы сотрудничали с организациями Little Brothers Boston, Legal Services Center и Tech Goes Home. Они помогли нам охватить важные группы населения, которые часто лишены доступа к технологиям.

Наши процессы и инструменты

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

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

Начало тестирования

В мэрии мы столкнулись с двумя типами людей:

люди, которые никогда не будут делать что-либо онлайн, и
люди были уверены, что нужной им информации нет на сайте Boston.gov, или не могли найти, как это сделать.

Мы проанализировали страницу «Как оплатить штраф за парковку» с 15 разными людьми, предложив участникам выполнить два задания.

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

Первые впечатления

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

Согласно исследованиям Nielsen Norman Group, 79 процентов людей сканируют текст при чтении в интернете. Только 16 процентов читают слово за словом.

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

Успех с аккордеоном

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

Image for mockups of our accordion approach (top) and button approach (bottom)

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

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

Возможные направления изменений

Мы нашли пять мест на странице, где изменения окажут значительное влияние:

Подзаголовок

Мы убрали подзаголовок «У вас есть четыре способа оплатить штраф» из большого синего заголовка. Пользователи его просто не замечали.

Вкладки

Мы превратили вкладки в аккордеоны. Пользователи их не замечали, и они не работали эффективно для отображения вариантов.

Размещение информации

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

Контактная информация

Мы переместили контактную информацию в нижнюю часть страницы. Мы также добавили над ней заголовок: «Вам всё ещё нужна помощь?»

Дополнительные ресурсы

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

Image for our redesigned version of the parking ticket page

Проблемы и решения

Я такой же, как все. Я не читаю инструкции.

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

Решение проблемы сканирования

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

Чтобы решить проблему сканирования, мы использовали принцип поэтапного раскрытия информации . Что такое поэтапное раскрытие информации? Nielsen Norman объясняет это как размещение редко используемых функций или дополнительной информации на втором экране. Это делает приложения проще в освоении и менее подверженными ошибкам.

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

Позволим форме F стать нашим ориентиром

Исследования с помощью eye-tracking показали, что пользователи часто сканируют информацию в форме буквы F. Хотя у нас не было возможности проводить eye-tracking, мы сопоставили общую форму F с словами, которые пользователи читали вслух, и траекторией движения мыши в некоторых случаях. Мы обнаружили некоторые области, где пользователи могли упускать информацию на текущем сайте:

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

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

Image for users weren't seeing the whole picture

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

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

Мы также использовали F-образную схему и принцип «точки потребности» в качестве ориентира для переноса контактной информации. Мы разместили её внизу страницы, в самом низу F-образной схемы, под заголовком «Вам всё ещё нужна помощь?». Такое сочетание местоположения и формулировки помогло расширить возможности наших пользователей. Они смогли выполнить свои задачи и транзакции, не обращаясь к контактной информации. Эта формулировка говорит пользователям, что всё, что им нужно, находится на странице, им просто нужно поискать.

Селективное внимание и слепота к баннерам

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

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

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

О команде Генеральной Ассамблеи

General Assembly предлагает ускоренные курсы по востребованным технологическим навыкам. Студенты, с которыми мы работали, были участниками интенсивного курса по дизайну пользовательского опыта весной 2018 года. Их работа над форматом наших страниц с инструкциями была заключительным проектом, который они выполнили за три недели. Мы невероятно благодарны им за участие, профессионализм и ценные результаты. В проекте участвовали Майкл Грейг , Кэсси Хеберт , Аманда Райтер и Билли Валво .