Значки и текст для часто используемых действий

Question

В настоящее время мы пытаемся повысить удобство использования нашего веб-приложения для внутренней сети. Одна из наших целей - очистить определенные страницы с большими сетками. Для этого мы начали помещать часто используемые действия (такие как «Удалить», «Сбросить в ноль», «Пометить как завершенные» и т. Д.) В сетках как функции.

Моя первоначальная идея состояла в том, чтобы найти и использовать значки (то есть Delete = большой красный x, Reset = стрелка, изгибающаяся вокруг себя, помечать галочкой как Complete и т. Д.) Для представления этих задач. Некоторые из моих коллег соглашаются со мной; говорят, что значки делают инструмент более профессиональным. Другие, однако, говорят, что значки затеняют их предназначенную функцию, и более подходящим будет простой текст, такой как Удалить .

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

Answer 1

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

По словам Джефа Раскина Гуманный интерфейс:

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

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

и

Мэйхью [1] приводит ряд исследований по использованию икон. К сожалению, большинство исследований не сравнивали ярлыки с иконками. Но из этих и других исследований мы можем сделать вывод, что значки наиболее эффективны, когда их не более дюжины и когда одновременно видны не более дюжины. Кроме того, важно, чтобы они

• визуально различимы
• Хорошо представьте подходящую концепцию
• Представлены в достаточно большом размере, обычно больше, чем текстовая метка

[1] Мейхью, Дебора. Принципы и руководящие указания в разработке пользовательского интерфейса программного обеспечения (Энглвудские скалы, Нью-Джерси: Прентис-Холл, 1992).

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

Answer 2

Я большой поклонник икон. Черт, текстовая область, в которую я сейчас набираю этот ответ, содержит только значки. Вы должны быть идиотом, чтобы не знать, что большой темный B означает жирный шрифт ... Я думаю, если ваша иконка говорит сама за себя (например, большой красный X для удаления и т. Д.), То это точно путь. Это также облегчает пользователю поиск правильного действия.

Answer 3

Я бы использовал значки, видимые в приложениях Windows, таких как Microsoft Word и Excel. Большинство пользователей знакомы с ними и их значением / функциональностью.

Также; Юзабилити продолжается "профессиональный взгляд". Мне кажется, что ваше приложение должно быть функциональным, а не дизайнерским шедевром. Поэтому ваша главная задача состоит в том, чтобы ваш интерфейс как можно точнее передавал свои функциональные возможности, поэтому снова подключитесь к знаниям пользователей; Скорее всего, ваши пользователи регулярно используют Word и Excel.

Чтобы завершить вещи; используйте свойства alt и title для элементов изображения:

<img 
 src="..."
 alt="Click this button to delete X"
 title="Click this button to delete X" />

Answer 4

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

Answer 5

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

Answer 6

Значки экономят место (а с помощью всплывающей подсказки могут быть весьма полезны новичкам), но смешивание значков и текста не будет хорошей идеей, требующей усилий пользователя для «переключения». Почему бы вместо этого не поместить «редкие» действия в раздел страницы, который обычно «закрывается» и открывается только при нажатии? В конце концов, это экономит еще больше места и беспорядка.

Answer 7

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

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