Icon Usability
Удобство использования значков
Резюме: Понимание пользователем значка основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности.
Помимо передачи индивидуальности бренда с помощью цвета и стиля, значки должны в первую очередь передавать смысл в графическом пользовательском интерфейсе. Значки - это, по определению, визуальное представление объекта, действия или идеи. Если этот объект, действие или идея не сразу понятны пользователям, значок превращается в конфетку для глаз — сбивающую с толку, разочаровывающую, привлекательную для глаз — и в визуальный шум, который мешает людям выполнять задачу.
Преимущества значков в графическом пользовательском интерфейсе (GUI) включают:
Значки - хорошие мишени: обычно их размер достаточно велик, чтобы к ним можно было легко прикоснуться в пользовательском интерфейсе, управляемом пальцами, но они также хорошо работают с курсором мыши (в отличие от слов, которые могут страдать от асимметрии чтения и нажатия на сенсорных экранах).
Тем не менее, они экономят место: значки могут быть достаточно компактными, Чтобы панели инструментов, палитры и т. Д. Могли Отображать Множество значков на относительно небольшом пространстве.
Значки быстро распознаются с первого взгляда (если они хорошо спроектированы) — особенно это касается стандартных значков, которые люди видели и использовали раньше.
Нет необходимости переводить значки для международных пользователей, при условии, что значки учитывают культурные различия (например, почтовые ящики выглядят по-разному в разных странах, тогда как конверты выглядят одинаково, поэтому конверт - это более международный значок для почтовой программы, чем почтовый ящик).
Значки могут быть визуально приятными и повышать эстетическую привлекательность дизайна.
Они поддерживают идею семейства продуктов или набора продуктов, когда одни и те же значки и стиль используются в нескольких местах.
Несмотря на эти потенциальные преимущества, значки часто вызывают проблемы с удобством использования, когда они разработаны без учета их многочисленных потенциальных недостатков.
“Универсальные” значки встречаются редко
Есть несколько значков, которые пользуются в основном всеобщим признанием пользователей. Такими примерами являются значки "Главная страница", "Печать" и увеличительное стекло для поиска. За исключением этих примеров, большинство значков остаются неоднозначными для пользователей из-за их связи с различными значениями в различных интерфейсах. Это отсутствие стандарта вредит принятию значка с течением времени, поскольку пользователи не могут полагаться на то, что он будет иметь одну и ту же функциональность каждый раз, когда он встречается.
3-строчный значок гамбургера - отличный пример значка, который стремится стать всемирно известным. В то время как большинство интерфейсов используют этот значок для обозначения главного меню навигации, некоторые используют тот же (или очень похожий значок) для обозначения списка.
Например, приложение для управления списками Buy Me a Pie использует 3-строчный значок для доступа к списку часто добавляемых элементов. Чтобы еще больше запутать ситуацию, значок помещен справа от текстового поля, которое обычно ассоциируется с кнопкой отправки. (Текстовое поле и значок списка имеют отдельные функциональные возможности: если вы думали, что ввод текста в поле ввода, а затем выбор значка меню приведет к сужению списка соответствующих элементов, вы ошибаетесь.)
Приложение Buy My a Pie (здесь, на Android) использует красочную версию 3-строчного значка гамбургера (обведен кружком), чтобы пользователи могли получить доступ к списку общих элементов, функциональность которого отличается от более распространенного значения меню навигации. Цвет слишком тонкий, чтобы пользователи поняли, что этот значок имеет другое значение.
Другие значки, которые часто неправильно понимаются пользователями, включают сердце и звезду. Эти значки часто используются для обозначения избранного, закладок, избранных элементов и оценок других пользователей. Мало того, что точная функциональность, связанная с этими значками, варьируется от сайта к сайту, но эти два значка конкурируют друг с другом. В результате эти значки и их точные значения трудно запомнить и точно интерпретировать.
Например, значок сердечка на сайте объявлений о каникулах Combadi позволяет пользователям отмечать, что им “нравится” поездка, но не сохраняет эту поездку в короткий список, чтобы упростить ссылки в будущем. (Пользователям в нашем недавнем исследовании юзабилити не понравилось, что любой может “полюбить” поездку, а не только тех, кто действительно ее купил.) Напротив, торговый сайт по дизайну интерьера Fab использует значок сердца, чтобы пользователь мог сохранить этот товар, чтобы его можно было легко найти позже.
Даже небольшая разница в значении и функциональности мешает пользователю понимать значок и полагаться на него, когда он встретится в будущем.
Буквально на прошлой неделе мы сообщили о нашем исследовании юзабилити веб-сайта, на главной панели навигации которого используется значок часов. В то время как сама графика была легко узнаваема как часы, значение значка было совершенно неясным, потому что это было нестандартное использование концепции часов или часов: значок часов используется для обозначения истории навигации и открывает ящик с самыми последними страницами, которые посетил пользователь. Ни один участник теста не нажал на этот значок.
Неясный значок = потраченная впустую функция.
Для значков нужна текстовая метка
Чтобы помочь преодолеть двусмысленность, с которой сталкиваются почти все значки, рядом со значком должна присутствовать текстовая метка, поясняющая его значение в данном конкретном контексте. (И даже если вы используете стандартный значок, часто безопаснее добавить ярлык, особенно если вы слегка изменили значок, чтобы он соответствовал вашим эстетическим предпочтениям или ограничениям.)
Ярлыки значков должны быть видны всегда, без какого-либо взаимодействия с пользователем. Для значков навигации метки особенно важны. Не полагайтесь на наведение курсора мыши для отображения текстовых меток: это не только увеличивает стоимость взаимодействия, но и плохо переводится на сенсорных устройствах.
Веб-сайт Usability.gov использует значки навигации для методов, шаблонов и документов, а также руководства на каждой странице сайта. Если бы я попросил каждого человека, читающего эту статью, прислать мне значок, представляющий методы, я уверен, что получил бы самые разнообразные дизайны.
Как мы заявляли несколько лет назад в рамках наших рекомендаций по дизайну юзабилити главной страницы, “если вы обнаружите, что вам нужно подумать над созданием значка для навигации, скорее всего, он не будет легко узнаваемым или интуитивно понятным для пользователей.” В то время как мобильная версия сайта признает, что текстовые надписи должны сопровождать значки, чтобы придать им некоторый смысл, настольная версия скрывает эти надписи до тех пор, пока любопытный пользователь не решит навести на них курсор.
Размещение этих элементов навигации в левой части страницы, чтобы они оставались доступными для пользователей при прокрутке, указывает на то, что организация считает их важными и полезными. Однако удаление из этих значков текстовых меток делает их совершенно бессмысленными и контрпродуктивными для цели обеспечения легкого доступа к контенту.
Относительный размер помогает заметности
В целом значки, как правило, более заметны на мобильных телефонах по сравнению с настольными веб-сайтами и приложениями. Легко предположить, что, поскольку значок (например, гамбургер) подходит для мобильного дизайна, он будет хорошо переноситься на рабочий стол. Увы, это не так! На мобильных экранах меньше элементов, которые конкурируют за внимание пользователей (просто потому, что экран меньше и может вместить меньше информации). Напротив, экраны на рабочем столе больше и обычно содержат много контента; пользователи могут легко пропустить что-то из этого, в зависимости от того, какая часть экрана привлекает их внимание. Если единственные элементы, которые в данный момент видны на телефоне, состоят из логотипа, заголовка, одного изображения и значка меню, у этого значка меню гораздо больше шансов быть замеченным пользователем, чем у того же значка, представленного в верхнем углу сайта на рабочем столе, полного привлекательного контента.
Также учитывайте относительный размер значка по сравнению с другими визуальными элементами, представленными на экране. В типичном заголовке мобильного веб-сайта значок меню с гамбургерами занимает примерно 20-25% доступной ширины экрана. Когда этот дизайн масштабируется на более крупном устройстве, размер значка обычно остается примерно таким же. В результате на настольных компьютерах (и больших планшетах, особенно в альбомной ориентации) значок будет меньше и менее заметен по сравнению с другими элементами на экране. Этой проблемы можно избежать на больших экранах (где обычно достаточно места), просто сделав навигацию видимой, а не сворачивая ее под иконкой.
Поступая таким образом, вы не только улучшите доступность опций меню, но и сможете избежать многих проблем с удобством использования, возникающих из-за скрытия глобальной навигации.
Советы по дизайну с помощью значков
Если вы решите включить значки в свой интерфейс, сначала проведите исследование! Ознакомьтесь с иконками, используемыми вашими конкурентами, а также со значками, обычно используемыми на платформах, на которые вы ориентируетесь, поскольку они будут наиболее узнаваемыми для ваших пользователей.
Если вам необходимо создать новые значки, постарайтесь сделать так, чтобы их было легко распознать и запомнить, следуя этим рекомендациям:
Дизайн должен быть простым и схематичным. Для ускорения распознавания уменьшите количество графических деталей, сосредоточив внимание на основных характеристиках объекта, а не на создании реалистичного изображения. (Сложные детали трудно различить при меньших размерах.)
Используйте правило 5 секунд: если вам требуется более 5 секунд, чтобы придумать подходящий значок для чего-либо, маловероятно, что значок может эффективно передать это значение.
Проверьте значки на узнаваемость: спросите людей, что, по их мнению, должны обозначать значки.
Проверьте значки на запоминаемость: спросите повторяющуюся группу пользователей, могут ли они вспомнить значение значка после того, как им рассказали, что он представлял пару недель назад.
И всегда добавляйте видимую текстовую метку. Как однажды сказал Брюс Тогнаццини, “слово стоит тысячи картинок”.
Last updated
