Как проверить понятность иконок в интерфейсе: смысл, подписи и действия

Понятность иконки проверяют по действию, которое от неё ожидает человек. Сравните ожидание с результатом, добавьте подпись и проверьте доступное имя.

Что должно получиться

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

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

Из чего это складывается

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

Как это сделать по шагам

1. Выберите конкретное действие. Запишите, что должен сделать человек и что изменится после активации элемента. Отделите действие от названия нарисованного предмета.
2. Покажите иконку в рабочем контексте. Используйте реальный экран или прототип с обычными соседними элементами. Не объясняйте заранее назначение проверяемого значка.
3. Узнайте ожидание до нажатия. Попросите человека описать предполагаемый результат. Сохраните формулировку участника, а свои пояснения запишите отдельно. Не исправляйте ответ по ходу проверки.
4. Дайте выполнить задачу. Посмотрите, какой элемент человек выбирает и как понимает результат. Отметьте попытки угадать действие, возвраты и необходимость подсказки.
5. Сравните причину затруднения. Определите, мешает ли форма, подпись, место или несовпадение с действием. Не меняйте весь набор, если проблема локальная.
6. Проверьте доступное представление. Сверьте имя кнопки или ссылки, порядок фокуса и отсутствие лишнего повторения текста от декоративной картинки.
7. Исправьте и повторите сценарий. Сравните вариант с прежним: стало ли легче предсказать результат и выполнить задачу без объяснения автора.

Как отделить предмет от действия

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

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

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

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

Когда нужна видимая подпись

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

Подпись должна описывать действие или назначение. Если она повторяет лишь название предмета, человек всё ещё может не понять результат. Сравните формулировку с тем, что фактически делает элемент, и с языком соседних действий.

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

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

Как проверить доступное имя

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

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

Когда картинка только дополняет уже понятную подпись, её повторное озвучивание может создавать шум. Для декоративного img используют пустую текстовую альтернативу alt=''. Но если изображение — единственный носитель назначения, нельзя просто убрать его из доступного представления и оставить элемент без имени.

Для SVG и других способов вывода значков решение зависит от структуры компонента. Передайте разработчику требование к итоговому имени элемента и декоративным частям. Проверяйте результат в доступном представлении браузера и, по возможности, со скринридером; наличие атрибута само по себе ещё не доказывает удачную работу.

Как сохранить согласованность

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

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

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

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

Что проверить в состояниях

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

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

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

Частые ошибки

• Считать узнаваемый предмет понятным действием. Спросите об ожидаемом результате и сравните его с поведением.
• Проверять символ без контекста и сразу утверждать, что интерфейс удобен. Повторите задачу на реальном экране с соседними элементами.
• Убирать все подписи ради чистого вида. Сначала проверьте, где текст нужен для понимания.
• Использовать имя файла как доступное имя. Название должно помогать выполнить действие.
• Озвучивать декоративный символ вместе с уже понятным текстом. Уберите лишнее повторение, сохранив имя элемента.
• Смешивать одинаковые символы с разным назначением. Зафиксируйте правила и проверьте все места применения.

Как проверить

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

Текстовые альтернативы действий описаны в руководстве W3C о функциональных изображениях, лишнее озвучивание — в материале о декоративных изображениях. Соответствие видимой подписи и имени объясняет критерий Label in Name. Вопросы понятности символов разбирает исследовательский материал NN/g.

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

Вопросы и ответы

Можно ли считать знакомую иконку понятной всем?

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

Нужно ли проверять иконку отдельно от экрана?

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

Скрытая подпись заменяет видимую?

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

Нужно ли описывать каждую декоративную иконку?

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

Почему единый набор не решил путаницу?

Визуальная согласованность не гарантирует соответствие символа действию. Проверьте, какое значение человек приписывает конкретному значку и совпадает ли оно с результатом.

Достаточно ли добавить подсказку при наведении?

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

Что записать по итогам проверки?

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