Юзабилити иконок: когда и как ее оценивать

Краткое содержание статьи: Эффективность иконок зависит от их узнаваемости и интерпретации. Кейт Каплан, автор книги «Цифровые иконки, которые работают» (Digital Icons That Work), поделилась своими наработками касательно оценки используемых иконок.

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

• Юзабилити
• Узнаваемость
• Интерпретация
• Другие факторы, влияющие на юзабилити
• Выбор методов оценки

Юзабилити иконок

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

Параметр «Узнаваемость» оценивает то, насколько правильно пользователи распознают форму или символ, который изображает иконка. Например, выглядит ли звезда как звезда?

Параметр «Интерпретация» оценивает значение, которое люди придают форме или символу иконки в данном контексте. Что обозначает звезда в этом конкретном интерфейсе?

Узнаваемость иконок

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

Посмотрите на следующие иконки. Сможете угадать, что на них изображено? Постарайтесь опознать именно физический объект, а не действие, которое они предлагают совершить, или идею, что в них вложена.

Попробуйте догадаться сами, прежде чем спуститься к ответам.

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

Узнаваемость иконок — первый шаг к повышению их юзабилити. Один из участников тестирования пожаловался: «Я не знаю, что изображает эта иконка. А если не знаешь, что изображает иконка, то и значение ее не поймешь». Отлично сказано! Часто бывает сложно понять, что обозначает картинка. И это совсем невозможно, если не удается распознать форму самой иконки.

Интерпретация иконок

Интерпретация — это вторая, порой еще более сложная часть уравнения. Как мы уже говорили, здесь речь идет о том, что эта иконка может значить для самих пользователей. Дело в том, что узнавание и интерпретация не всегда идут бок о бок. Даже когда в иконке узнается тот объект, что и был задуман, она может быть интерпретирована иначе, чем предполагалось.

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

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

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

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

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

Другие факторы, влияющие на юзабилити иконок

Узнаваемость и интерпретирование - не единственные факторы, влияющие на юзабилити иконок также. Есть и другие аспекты, которые тоже нужно подвергать оценке в пользовательском тестировании.

• Релевантность: Достаточно ли применимой кажется иконка для текущей задачи или цели, стоящей перед пользователем?
• Находимость: Смогут ли посетители найти иконку на странице, когда она им понадобится?
• Обнаруживаемость: Насколько заметна иконка, легко ли ее обнаружить в интерфейсе?
• Кликабельность: Удобно ли нажимать на иконку пальцем/кликать курсором мыши? Или при выборе цели возможны ошибки?
• Визуальная привлекательность: Красиво ли оформлена иконка?

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

Выбор методов для оценки иконок

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

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

Вот пример того, как можно сопоставить конкретные исследовательские вопросы о перечисленных выше факторах с различными методами на протяжении всего процесса проектирования.

Подберем примеры исследовательских вопросов для оценки этой иконки.

1. Узнают ли пользователи в этой картинке таймер?

Связанный фактор: Узнавание.

Как оценивать?

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

• Распознавание в контексте: продемонстрируйте пользователям скриншот интерфейса и спросите, что значит каждая иконка. Что они могут значить и/или куда вести?

Когда? На ранних этапах проектирования.

2. Ассоциируется таймер ли у пользователей с новинками ассортимента?

Связанный фактор: Интерпретация.

Как оценивать?

• Распознавание вне контекста: покажите пользователям только саму иконку и попросите их предположить, куда она ведет в онлайн-магазине.

• В контексте интерфейса (в том числе в виде скриншота или макета): попросите пользователей объяснить все иконки на странице и предсказать их функции в интерфейсе.

Когда? На ранних этапах проектирования или сразу после составления первых макетов интерфейса.

3. Нравится ли пользователям сама иконка?

Связанный фактор: Визуальная привлекательность.

Как оценивать?

• Оценка вне контекста: покажите пользователям только сами иконки и попросите оценить их красоту (или иные аспекты) с помощью семантического дифференциала или шкалы Лайкерта.

• Тестирование предпочтений вне контекста: продемонстрируйте пользователям разные варианты одной и той же иконки (оформленные в разных стилях), чтобы определить, какой из них более привлекателен.

Когда? На ранних этапах проектирования или сразу после составления первых макетов интерфейса.

4. Пользуются ли вашей иконкой люди, ищущие новые продукты на веб-странице?

Связанный фактор: Релевантность.

Как оценивать?

• Тестирование юзабилити в контексте: попросите пользователей найти на сайте или в приложении новинки и понаблюдайте за тем, как они взаимодействуют с интерфейсом: используют ли они вашу иконку?

• Тестирование A/B в контексте: покажите пользователям разные варианты иконки для сравнения их кликабельности.

Когда? После появления прототипа или рабочего интерфейса либо после запуска сайта/приложения.

5. Замечают ли пользователи иконку в интерфейсе? Обращают ли на нее внимание, когда ищут новинки?

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

Как оценивать?

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

Когда? После появления прототипа или рабочего интерфейса либо после запуска сайта/приложения.

6. Могут ли пользователи нажать на иконку без ошибок?

Связанный фактор: Кликабельность.

Как оценивать?

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

Когда? После появления прототипа или рабочего интерфейса либо после запуска сайта/приложения.

Оригинал статьи: Icon Usability: When and How to Evaluate Digital Icons, автор Kate Kaplan.