4.3 юзабилити: простота
и удобство для пользователЕЙ
Авторы: М. А. Зорин, Е. А. Павленко
Время чтения: 17 мин.
4.3.1 Первое взаимодействие
Первый контакт предопределяет эмоциональное состояние пользователя при взаимодействии с сервисом. Для него имеют большое значение скорость загрузки сервиса и его отображение во вкладках браузера.
Главные критерии: скорость загрузки, способность сервиса адаптироваться к разным устройствам/экранам. Второстепенные критерии: удачный узнаваемый фавикон, адекватные названия страниц во вкладках браузера.
Главные критерии: скорость загрузки, способность сервиса адаптироваться к разным устройствам/экранам. Второстепенные критерии: удачный узнаваемый фавикон, адекватные названия страниц во вкладках браузера.
Главные критерии
Пользователи уже привыкли, что большинство популярных сервисов загружается и открывается мгновенно. Медленная загрузка или пустое окно вместо нужной страницы в браузере вызывают тревогу по поводу работы сервиса, компьютера или интернета. Уже на этом этапе пользователь может закрыть страницу сервиса. Наши измерения показали, что у семи сервисов из 30 — долгая загрузка.
Для оценки скорости загрузки сервиса мы использовали инструмент PageSpeed Insights (PSI). Этот инструмент Google позволяет получать отчеты о скорости загрузки страниц на мобильных устройствах и компьютерах, а также советы по увеличению скорости. Мы выбрали четыре показателя скорости загрузки сервиса:
- на десктопе до отображения первого контента;
- на десктопе до взаимодействия;
- на мобильном телефоне до отображения первого контента;
- на мобильном телефоне до взаимодействия.
Например, на портале «Работа России» Федеральной службы по труду и занятости РФ первый контент появляется меньше чем за секунду, и это очень хороший результат. На рис. 20 приведены показатели скорости загрузки этого портала для компьютера; круговая диаграмма показывает общий балл производительности (57). До появления первого контента проходит всего 0,9 с, до взаимодействия — 2,8 с. Отображение крупного контента занимает 3,6 с.
Рисунок 20
Пример работы инструмента PageSpeed Insights (оценка скорости загрузки портала «Работа России»)
«Скорость исключительно важна. Она имеет значение и для мобильных версий, и для приложений, и для десктопной версии. Но при этом исторически сложилось так, что добиться быстрой загрузки на компьютере немного легче, чем на смартфоне. При этом у пользователей мобильных версий ожидания выше: они пользуются телефоном на ходу, заходят с ним в лифты, спускаются в метро... Это все ситуации, в которых люди обычно торопятся и поэтому рассчитывают на более высокую скорость взаимодействия: медленная загрузка их больше раздражает. Так что скорость в мобильных телефонах гораздо важнее, чем скорость на десктопе».
Анна Потанина,
специалист Google по UX на мобильных устройствах
Анна Потанина,
специалист Google по UX на мобильных устройствах
Примером долгой загрузки служит портал бизнес-навигатора МСП, однако индикатор загрузки на экране не позволяет пользователю оценить, как долго ему придется ждать.
Мы также проверили верстку сервисов и удобство их использования с мобильного устройства и с компьютера при увеличении интерфейса до 250%. У 10% сервисов отмечены проблемы с версткой. Например, на смартфоне портал «Ваш контроль» выглядит как уменьшенный вариант декстопной версии. В результате текст в верхней и нижней частях сайта оказывается настолько мелким, что его невозможно прочитать (рис. 21).
Рисунок 21
Пример использования слишком мелкого текста на главной странице (мобильная версия портала «Ваш контроль»)
Второстепенные критерии
Один из таких критериев — картинка около названия вкладки в браузере, или фавикон. В выдаче поисковых систем фавикон позволяет быстро опознать сервис и отличать его от других; чаще всего для него используют логотип (рис. 22). У половины протестированных сервисов фавикон выделяется хорошо. Например, логотипы порталов «Работа России» (четыре красных треугольника) и «Ваш контроль» (салатовый круг) имеют простые формы и один контрастный цвет, поэтому хорошо опознаются в качестве фавиконов. Логотип сайта Росреестра можно узнать по сочетанию цветов, но на фоне стандартного серого браузера он виден плохо. Название вкладок в браузере помогает понять, что это за страница, не переходя на нее. Обычно для главной страницы используется название компании. У 10 сервисов из 30 с этим наблюдались проблемы (в частности, вкладки отображают название всего сервиса, но не страницы).
Рисунок 22
Примеры фавиконов на вкладках в браузере
4.3.2 Структура сервиса
и управление вниманием
Как правило, пользователь обращается к сервису, чтобы разрешить конкретную жизненную ситуацию: у него есть запрос, он ищет информацию или услугу. Интерфейс сервиса должен помогать ему.
Главные критерии: логичное меню, главная страница ориентирована на популярные запросы, информация сгруппирована по категориям. Второстепенные критерии: наличие «хлебных крошек», полезная страница ошибки 404.
Главные критерии: логичное меню, главная страница ориентирована на популярные запросы, информация сгруппирована по категориям. Второстепенные критерии: наличие «хлебных крошек», полезная страница ошибки 404.
Главные критерии
Хорошо, если пользователь в первые три секунды увидит, куда кликать. Для пользователя оптимально, если на первом экране сразу выделены переход к самому популярному действию сервиса и форма поиска. Но семь из 30 главных страниц проанализированных нами сервисов не дают пользователю быстро сориентироваться. Иногда почти всю главную страницу занимают новости (рис. 23). Чтобы добраться до нужной информации, необходимо пройти через еще одну страницу: Главная — Деятельность — Ключевые направления работы.
Рисунок 23
Пример главной страницы сайта, где основное место занимают новости (сайт Министерства просвещения РФ)
Всплывающие окна, реклама и мигающие баннеры создают визуальный шум и мешают пользователю, отвлекая от контента. Из 30 сервисов всего на одном сервисе (платформа обратной связи на сайте администрации г. Челябинска, cheladmin.ru) количество отвлекающих факторов критично, на пяти — допустимо.
Второстепенные критерии
Ориентироваться внутри сервиса помогают «хлебные крошки» — навигационные цепочки с названиями страниц, через которые пользователь попал на текущую страницу. Они информируют пользователя о его местоположении на сайте сервиса, отображают структуру и помогают перейти на любую страницу из цепочки. На семи сервисах из 30 «хлебных крошек» нет.
У девяти сервисов есть проблемы со страницей 404. Эта страница важна для навигации, сюда пользователь попадает, введя некорректный адрес или несуществующую ссылку. Страница 404 сообщает возможную причину сбоя и предлагает полезные ссылки, например на главную страницу. Если перенаправлять сразу, без перехода на страницу ошибки, это дезориентирует пользователя.
4.3.3 Скорость понимания контента
Восприятие и понимание контента пользователем во многом зависит от верстки сайта (или мобильного приложения), расположения изображений и интерактивных элементов.
Главные критерии: понятное описание сервиса, удобное оформление, удобство чтения. Второстепенные критерии: изображения должны дополнять, а не заменять текст.
Главные критерии: понятное описание сервиса, удобное оформление, удобство чтения. Второстепенные критерии: изображения должны дополнять, а не заменять текст.
Главные критерии
Главным критерием является возможность быстро и без усилий понять, на каком ресурсе пользователь находится, удобное оформление текста и легкость чтения. Важно, чтобы логотип с названием организации был читаемым, а на первом экране был дан ответ на самый частый вопрос пользователей. Проблемы с идентификацией сервиса были отмечены на портале Ярославской области «Делаем вместе»: небольшой логотип, который сложно прочитать, на первом экране нет описания сайта.
Удачный пример — инвестиционный портал Краснодарского края. Крупный заголовок с цифрой дает понимание, чем может быть полезен сервис, а кнопка вызывает желание узнать больше (рис. 24).
Рисунок 24
Пример удобной идентификации сервиса на инвестиционном портале Краснодарского края
Слишком длинные строки усложняют чтение: дочитав до конца строки, пользователь долго ищет взглядом начало следующей, слишком короткие строки вынуждают часто перескакивать. Примерно половина исследованных сервисов использует длинные строки и/или мелкий текст
Когда текст не структурирован или не имеет заголовков, повышается вероятность, что пользователь пропустит важную информацию. Сложности может создавать и внутренне противоречивая информация. Например, на сайте Министерства внутренних дел РФ (рис. 25) часы работы приемной, приведенные в таблице, считываются быстро. Однако ниже размещен длинный сплошной текст, причем информация, выделенная в нем красным шрифтом, сводит на нет ценность сведений о часах приема в таблице: зачем указывать часы приема, если он не ведется?
Рисунок 25
Пример неудобного размещения информации на странице приемной Министерства внутренних дел РФ
Второстепенные критерии
Изображения сервиса могут сопровождать или дополнять текст, но не должны полностью заменять его. Изображения, которые передают смысл, а не служат графическим оформлением, должны быть достаточно крупными с возможностью увеличения. При тестировании мы встречали удобные слайдеры с увеличением и одиночные изображения без увеличения. В половине тестируемых сервисов встречалась такая ошибка.
4.3.4 понятность интерфейса
Используя знакомые пользователям паттерны, разработчики интерфейса способствуют когнитивной легкости: пользователь будет воспринимать ментальную задачу обработки информации как простую. Согласно закону Якоба, пользователи проводят бóльшую часть времени на других сервисах, поэтому предпочитают, чтобы ваш сервис работал так же, как и все известные им сервисы.
End of Web Design // Nielsen Norman Group.
Главные критерии: плавный сценарий, понятность каждого элемента, неоднозначные элементы подписаны. Второстепенные критерии: страницы сервиса должны быть единообразны.
Главные критерии: плавный сценарий, понятность каждого элемента, неоднозначные элементы подписаны. Второстепенные критерии: страницы сервиса должны быть единообразны.
Главные критерии
Создатели сервиса могут спроектировать оптимальный сценарий работы пользователя с сервисом, постепенно отвечая на возникающие у него вопросы. Переход по ссылкам, предложение выполнить целевое действие, показ похожих материалов шаг за шагом приближают к результату. У половины сервисов мы увидели прерывания сценария и несоответствие ожиданиям пользователя в разной степени критичности.
Например, на сайте Центральной избирательной комиссии РФ предлагается скачать материалы в формате pdf для печати плакатов. Но при чтении с экрана такой формат неудобен. На сайте Росреестра для получения информации о программах предлагается позвонить по телефону в Управление государственных программ. У пользователя возникает закономерный вопрос о том, почему этой информации нет на странице.
В качестве положительного примера можно привести сайт Федеральной налоговой службы РФ. В статьях предложены полезные ссылки, а в конце статей указаны ссылки для возможного следующего действия (рис. 26).
Рисунок 26
Пример удачного проектирования сценария работы пользователя с сайтом (сайт Федеральной налоговой службы РФ)
Пользователь запоминает визуальные паттерны тех сервисов, которыми пользуется регулярно, и ожидает, что элементы ведут себя предсказуемо. Например, иконка лупы означает поиск по сайту, ссылки подчеркнуты, стрелка или плюс возле текста раскрывают информацию. У восьми из 30 сервисов значимые элементы интерфейса непонятны. У пяти из 30 сервисов при клике происходит неочевидное для пользователя действие.
Так, на главной странице туристического портала Республики Коми есть неочевидные переходы на разделы. При наведении на текст курсор-стрелка превращается в курсор-руку, но этого недостаточно, чтобы распознать кликабельный элемент. На платформе обратной связи на сайте администрации г. Челябинска одни ссылки открывают новые страницы, другие служат для скачивания файла. Одинаковое оформление не дает пользователю понять, каким будет результат клика.
На инвестиционном портале Краснодарского края (рис. 27) у документа есть название, краткое описание, вес файла и понятные кнопки для скачивания и просмотра файлов в формате pdf.
Рисунок 27
Пример понятных кнопок для скачивания и просмотра файлов на инвестиционном портале Краснодарского края
Второстепенные критерии
Веб-сайт или мобильное приложение выполняют роль «представителя» одной организации, но ресурс не воспринимается целостно, если страницы выглядят по-разному. Некоторые сервисы имеют переходы — на отдельные документы, «Госуслуги», связанные сайты. В таких случаях пользователю требуется время, чтобы сориентироваться в новом интерфейсе. Несколько сервисов имеют переход на «Госуслуги», мы не считали это ошибкой, так как услуга будет оказана на портале, который уже всем знаком. Но у трех из 30 сервисов есть страницы, которые сильно отличаются от основных.
На сайте Министерства строительства РФ одни страницы, например раздел «Деятельность», имеют бежевый фон и иконки, на других фон белый. Разное оформление дезориентирует пользователя, вызывая вопрос, один это сайт или разные.
4.3.5 Удобство заполнения форм
Форма считается доступной, если при заполнении у пользователей не возникает никаких вопросов. У некоторых проанализированных сервисов своих форм нет, для получения услуг или персональной информации они перенаправляют на «Госуслуги», куда нужно входить через ЕСИА. Но если для получения общей свободной информации нужно регистрироваться, то, скорее всего, пользователь откажется от работы с сервисом в поисках более доступных источников.
Главные критерии: правильный формат поля ввода — информативность, подсказки, сообщения об ошибках. Второстепенные критерии: обязательные пункты отмечены и подписаны.
Главные критерии: правильный формат поля ввода — информативность, подсказки, сообщения об ошибках. Второстепенные критерии: обязательные пункты отмечены и подписаны.
Главные критерии
На странице формы должна быть вся информация для заполнения и ответы на возможные вопросы. Правильный формат поля — выбор варианта из списка, календарь и формат выбора даты, ограничение ввода символов (например, ввод только цифр в номере паспорта) — помогает исключить большинство ошибок. Даже длина поля ввода может подсказать количество текста, которое нужно вводить.
У девяти сервисов из 30 поля не отвечают этим критериям. Например, на сайте Калининградской областной научной библиотеки в форму года рождения можно ввести любую цифру. А на сайте Фонда социального страхования РФ в формах на получение пособий нет подсказок, где искать запрашиваемые данные. Но есть положительные примеры: на портале «Работа России» (рис. 28) поле для номера телефона не позволяет вводить буквы, и внутри есть подсказка о формате ввода цифр и их количестве.
Рисунок 28
Пример удобной формы с подсказками по заполнению на портале «Работа России»
Даже имея подсказки по заполнению полей, пользователь может совершить ошибку. Поэтому интерфейс должен мягко сообщить о ней и рассказать, как исправить. Но на сайтах 23 сервисов из 30 при заполнении форм не появляются сообщения об ошибке, а если и появляются, то оказываются бесполезными, так как не сообщают точно, в чем ошибка и как ее исправить. Например, на портале «Культура.РФ» подсказка советует ввести валидный e-mail; такая формулировка не помогает пользователю понять, где именно он совершил ошибку.
Второстепенные критерии
В форме должно быть указано, какие поля обязательны для заполнения. У шести сервисов из 30 обязательные поля не отмечены. У 10 сервисов из 30 поля отмечены, но непонятно, что означает отметка. Например, на сайте Федеральной налоговой службы РФ обязательные поля отмечены красной звездочкой около заголовка, но нет пояснения, что красная звездочка обозначает обязательные поля.
4.3.6 Использование поиска на сайте сервиса
Не у всех рассмотренных сервисов поиск оказался одинаково результативным, есть сложности с настройкой поиска, фильтрами и т. д.
Главные критерии: удобство поисковой выдачи, исправление ошибок в поисковом запросе. Второстепенные критерии: подсказки — автозаполнение поисковых запросов, указание количества результатов поиска.
Главные критерии: удобство поисковой выдачи, исправление ошибок в поисковом запросе. Второстепенные критерии: подсказки — автозаполнение поисковых запросов, указание количества результатов поиска.
Главные критерии
Фильтры и сортировка помогают настроить поисковую выдачу под запрос, однако большинство сервисов уделяют недостаточно внимания странице поиска. 21 сервис из 30 не имеет дополнительных функций, которые позволяли бы сузить выдачу. Ошибки при вводе запроса в поисковую строку должны быть подсвечены (см. раздел 4.3.5), также желательно, чтобы интерфейс подсказывал правильную форму слов в процессе ввода. 23 сервиса из 30 не имеют функции исправления поискового запроса.
Положительным примером может служить поиск на сайте Федеральной службы судебных приставов РФ (рис. 29): нужное слово подсвечено, список выдачи начинается с тех страниц, где оно находится в заголовке, есть расширенный поиск.
Рисунок 29
Пример удобной формы поиска на сайте Федеральной службы судебных приставов РФ
Второстепенные критерии
Удобно, когда пользователь может не дописывать слово или фразу в строке поиска, а подходящие результаты или продолжение ввода появляются в виде подсказок, по которым можно сразу перейти. Так, интерфейс портала «Госуслуги» подсказывает продолжение запроса еще до того, как пользователь нажмет кнопку поиска. Среди проанализированных нами сервисов всего у двух из 30 отображаются подсказки во время ввода поискового запроса.
Как правило, на странице с поисковой выдачей отображается количество найденных результатов, чтобы пользователь мог решить, сужать поисковый запрос или посмотреть все ссылки. Так, встроенный в сайт Фонда социального страхования РФ поиск «Яндекса» показывает количество найденных результатов. Однако на восьми из 30 сайтов количество результатов не отображается.
В результате тестирования сервисов по 25 критериям, описывающим уровень юзабилити (см. раздел 3.5), наибольшее количество баллов набрали «Госуслуги» (64 балла), сайт АО «Почта России» (64) и портал «Работа России» (63). Меньше баллов за юзабилити, чем другие сервисы, получили сайт Фонда социального страхования РФ (32), туристический портал Республики Коми (37) и сайт Государственного архива РФ (38).
1
Исследованные сайты в основном отвечают следующим критериям: понятная структура сайта и навигация по нему, возможность просмотра с телефона, оформление текста для удобного чтения. Степень соответствия сайтов отдельным критериям показана на рис. 30.
Рисунок 30
Оценка юзабилити сайтов государственных сервисов по отдельным критериям
2
В ходе тестирования были выявлены наиболее распространенные ошибки, связанные с обеспечением удобства сервиса для пользователя.
- Основная критическая ошибка — ссылки и иконки, не сообщающие о том, что будет происходить при клике. Часто ни названия ссылок, ни контекст не дают понимания о том, что произойдет: откроется новая страница, сайт, скачается документ или откроется pdf-файл.
- Многие сервисы не уделяют должного внимания странице поиска, странице 404 и формам ввода данных, тем самым затрудняя пользователям нахождение необходимой информации или получение услуги.