Иконки — неотъемлемый элемент большинства современных сайтов и приложений. Конечно, чаще всего мы обращаемся к стандартным, проверенным решениям, но бывают ситуации, когда их недостаточно, например, если вы рисуете какой-то оригинальный интерфейс и хотите, чтобы иконки имели определенный характер и эстетику.
Точно ли пользователи воспринимают ваши иконки именно так, как вы задумали?
Иконки — это крошечные иллюстрации, поэтому легко упустить из виду, как много они на самом деле значат для понимания продукта. Мы считаем само собой разумеющимся, что большинство пользователей знакомы с популярными иконками, такими как шестеренка (“Настройки”) или колокольчик (“Уведомления”).
Тем не менее, бывают случаи, когда нам приходится создавать кастомные значки, специфичные для отрасли или продукта, и мы не можем быть уверены в том, что пользователи сразу поймут их значение.
Конечно, иногда возникает соблазн нарисовать первую фигуру, которая пришла на ум, поместить ее рядом с текстовой меткой и полагаться на то, что последняя сделает всю работу. Но мы, дизайнеры, способны на большее! Давайте проведем несколько простых опросов пользователей, чтобы повысить узнаваемость нашей иконки.
Дисклеймер: Эта статья предназначена для дизайнеров, которые хотят провести собственные исследования. Если вы профессиональный исследователь, вам она, вероятнее всего, покажется слишком примитивной.
Прежде чем мы начнем
Мы будем использовать специальную платформу для опросов, которая позволит охватить нашу целевую аудиторию.
В опросах всегда показывайте участникам иконки в реальном размере. Если они имеют размер 24px на 24px в интерфейсе, то и в исследовании они должны быть такого же размера. Наша цель — выяснить, узнают ли люди форму, а если показать им что-то более крупное, это упростит задачу и исказит результаты.
Убедитесь, что все иконки окрашены в один и тот же темно-серый цвет и размещены на белом фоне. Цвет может придать дизайну эмоциональную окраску или определенный подтекст, поэтому лучше полностью исключить подобные риски. Кроме того, белый и темно-серый цвета достаточно контрастные и отлично обеспечивают доступность.
Итак, приступим к исследованию. В идеале у вас должно быть как минимум 3 иконки с одним и тем же значением, которые мы можем протестировать друг относительно друга. Но если вам трудно придумать подходящие символы, мы всегда можем...
1. Почерпнуть идеи из ответов пользователей
Мы начнем с самого общего вопроса: какой символ, по мнению участников, мог бы подойти на соответствующую роль? Здесь нам понадобятся вспомогательные изображения, поэтому нарисуйте вайрфрейм продукта и поставьте большой красный вопросительный знак там, где должна быть иконка. Монохромный макет не только устраняет предвзятость, но и помогает сделать знак вопроса более заметным — чем проще будет участникам найти его, тем лучше.
Как утверждает UserZoom, вы должны сначала задать контекст, затем предоставить пользователю всю необходимую информацию, и лишь после этого просить его совершить определенные действия.
Исходя из этого, я подготовил пример вопроса для данного сценария. Смело копируйте его, вносите необходимые изменения и вставляйте в свой собственный опрос.
Перед вами интернет-магазин модной одежды с открытым меню. Над заголовками разделов размещены маленькие символы, которые задают контекст и отражают их значение. Например, над разделом "Домашняя страница" изображен дом, а над разделом "Поиск" — лупа. Иконка раздела "Спецпредложения" (Deals) скрыта за красным вопросительным знаком. Какой символ вы бы ожидали здесь увидеть?
Скорее всего, в ответ на такой открытый вопрос вы получите несколько ответов низкого качества, но это не страшно! Зафиксируйте повторяющиеся шаблоны и разработайте новые варианты иконок на их основе.
2. Спросите, что, по их мнению, это значит
Теперь у нас есть приличный набор иконок для тестирования, давайте изменим сценарий и сделаем все наоборот — покажем участникам иконки вне визуального контекста и спросим, что, по их мнению, они обозначают. Это исследование поможет по-настоящему оценить эффективность иконок, ведь пользователи будут опираться исключительно на их внешний вид.
Вот подходящий вопрос для этого сценария — он короткий и дает достаточно информации, не подталкивая участников в какому-то конкретному ответу:
Пожалуйста, взгляните на символ. Представьте, что вы находитесь в интернет-магазине модной одежды и встречаете такую иконку. Что, по вашему мнению, она означает?
Подготовьте остальные иконки аналогичным образом. Лучше всего расположить каждый символ на отдельной странице и показывать их участникам в случайном порядке, чтобы исключить предвзятость.
Не оценивайте результаты слишком строго, поскольку люди могут использовать разные слова для обозначения одной и той же идеи. Если ответ попадает в одну из общих категорий, мы его засчитываем.
Например, в случае с иконкой "Спецпредложения" участники могут ответить "распродажа", "скидки" или "акция", и все эти ответы будут приемлемы.
3. Сравните самые удачные иконки
Пришло время сократить количество вариантов. Давайте возьмем наиболее эффективные иконки и сравним их друг с другом. Для этого мы зададим участникам вопрос с несколькими вариантами ответов. Мы объясним, что означают представленные символы, чтобы они полностью понимали, что сравнивают.
Перед вами символы, которые могут быть использованы для обозначения страницы "Спецпредложения" в интернет-магазине модной одежды. Пожалуйста, взгляните на них и выберите тот, который, по вашему мнению, лучше всего справляется с этой задачей.
Конечно, самой удачной можно считать иконку, набравшую наибольшее количество голосов. Однако вполне вероятно, какой-то другой вариант не сильно отстает от победителя, и если это так, следует провести еще несколько тестов, чтобы быть абсолютно уверенными в своем решении.
4. От большего числа вариантов к меньшему
Предположим, больше всего голосов получили иконки бирки и звезды. Чтобы понять, какая из них наиболее эффективна, вернемся в графический редактор и нарисуем несколько версий каждой иконки. Мы зададим участникам 3 вопроса:
Вопрос 1
Покажите несколько версий одного решения (например, звезды) и спросите, какое из них лучше всего отражает смысл:
В интернет-магазинах модной одежды часто есть раздел “Спецпредложения”, где можно найти актуальные акции и скидки. Какой из этих символов вы ожидали бы увидеть в меню рядом с указанным заголовком?
Вопрос 2
Повторите этот вопрос, но покажите разные версии другой иконки (в нашем примере — бирки).
Вопрос 3
Настройте программу опроса таким образом, чтобы на третьем этапе участник увидел иконки, которые он выбрал в первых двух пунктах, и задайте тот же вопрос в последний раз.
5. Убедитесь, что все работает
К этому моменту вы, скорее всего, уже нашли самую удачную иконку, но давайте проверим, узнают ли ее пользователи в интерфейсе, с помощью теста на клики.
Для этого мы можем сделать детализированный мокап продукта, удалить подписи рядом с иконками и попросить участника нажать на заголовок того раздела, в котором, по его мнению, он сейчас находится.
Представьте, что вы находитесь в интернет-магазине модной одежды и хотите купить новые туфли, которые сейчас продаются со скидкой. Пожалуйста, нажмите на кнопку того раздела, куда бы вы отправились, чтобы найти их.
Программное обеспечение для проведения опросов покажет вам, какое количество людей взаимодействовало с целевой областью. Посмотрев, сколько пользователей в процентном соотношении добились успеха, мы сможем определить, была ли наша иконка узнаваемой и достаточно заметной.
Хорошая практика — задать участникам дополнительные вопросы о том, насколько успешно они справились с заданием и насколько сложным оно им показалось, по окончании тестирования. Мы можем сделать это с помощью шкалы Лайкерта, которая позволяет оценить результаты по шкале от 1 до 7.
Дополнительный вопрос 1 — уверенность
Насколько вы уверены в правильности своего выбора?
Дополнительный вопрос 2 — сложность
Насколько легко, по вашему мнению, было найти кнопку "Спецпредложения"?
Ответы участников на эти вопросы помогут нам понять, была ли иконка найдена потому, что она эффективно транслировала правильное значение, или потому, что на странице не было более удачных вариантов.
Что теперь?
Хотя данное руководство предполагает определенную последовательность действий, реальность вносит свои коррективы — иногда смысла соблюдать хронологический порядок не будет. Возможно, вы обнаружите, что вам необходимо вернуться на шаг или два назад, потому что в опросе не было явного "победителя".
Не бойтесь смешивать и сочетать типы опросов — время от времени вам придется экспериментировать, чтобы получить желаемый результат. Пусть вас ведет ваша любознательность! 😉
