Зачем нужны иконки

[web-des]

Вы не поверите, но в 85-м году компания Apple в своем руководстве для разработчиков прямо призывала всегда, когда это возможно, стараться заменять надписи пиктограммами. Якобы пиктограммы понятнее начинающему пользователю, чем слова. Конечно, это полная чепуха. Словами намного проще высказать почти любую идею.

Если только вы не проектируете интерфейс графического редактора В этом случае, как говорится, лучше один раз увидеть, чем сто раз прочитать:


Нижние 6 иконок прямо изображают результат применения соответствующих инструментов.

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

Пример из жизни: иконка «Формирующий документ» для юридического софта. Обозначает документ, в котором написано, что нужно сменить другой документ на новую редакцию, сделав такие-то и такие-то изменения. Здорово, не правда ли? Даже словами это сложно выразить в одном предложении. Еще сложнее понять с первого раза. Возможно, в понимании этой концепции могла бы помочь визуальная схема, примерно вот такая:


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

Если мы признаем, что в большинстве случаев словами донести суть легче, чем картинкой, для чего все таки нужны нам эти самые иконки? Быть может, для экономии места? В самом деле, иконки в тулбаре чаще всего имеют размер 16×16 пикселей. Надписи обычно намного больше. Однако лично я не хотел бы верить, что, рисуя иконки, я всего лишь помогаю разместить 100 непонятных и ненужных команд на том же пространстве экрана, где без моей помощи поместилось бы всего 10. К тому же, давайте взглянем на современные интерфейсы: MS Office 2007, Windows Explorer:


Мы видим, что почти каждая иконка сопровождается надписью. Стало быть, об экономии места речи не идет.

Так зачем же, к примеру, интерфейс MS Outlook буквально усыпан иконками?


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


О ужас! Мы больше не можем прочитать ни одну надпись. Зато, обратите внимание, иконки в большинстве своем остались вполне отличимы друг от друга. Что это за черный крестик? Черный крестик он и есть черный крестик — удаляет письма. Красный флаг, цветные квадратики на иконке «категории» — все это по-прежнему можно увидеть, так что опытный пользователь Outlook не заблудится.

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


Кроме того, картинки лучше запоминаются. В одном эксперименте испытуемым показали 2500 слайдов. Потом этим людям показывали пары слайдов и спрашивали, который из двух они уже видели, и они давали верный ответ почти во всех случаях. И даже если им показывали 32 слайда сразу, почти все испытуемые могли сразу выбрать тот единственный слайд, который им показывали раньше. О чем это говорит? Люди хорошо запоминают картинки. Иконка может с успехом работать визуальным «якорем» какой-то функции в голове у пользователя.

Разобравшись, зачем иконки нужны, мы можем легко ответить на вопрос, что в иконочном дизайне важно, а что — не очень. Наверное, вы уже догадались, что самое главное для иконки — это различимость. Не зря мой коллега Денис Кортунов в своей статье «10 ошибок в дизайне иконок» поставил недостаточную различимость на первое место. Неразличимые иконки просто не работают, занимают свое место на экране зря: их нельзя быстро найти на экране и они не могут служить визуальным «якорем». В то же время такая характеристика, как «понятность», как бы это крамольно не звучало, обычно совсем не важна.

Более того, погоня за «понятностью» в ущерб различимости может быть только вредна. Одна из самых глупых целей, которые может поставить перед собой дизайнер иконок: чтобы иконка без текстовой подписи была понятна начинающему пользователю. Мы всегда стараемся разубедить клиентов, которые считают такую цель важной и достижимой. Надеюсь, вас мне удалось в этом убедить. Так же, как слушателей моего доклада на фестивале веб-разработчиков 404, с содержанием которого вы только что ознакомились. Спасибо за внимание!


Фотограф: Игнатьев Игорь
Автор: Егор Гилёв
Источник