Блог: статьи

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

Егор ГилёвАвтор: Егор Гилёв
6 ноября 2008

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Зачем нужны иконкиФотограф: Игнатьев Игорь

Связанные записи

Условия использования

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

Комментарии

Редко узнаю что-то новое про интерфейсы. И вот — тот самый редкий случай :-). Спасибо, познавательно. Это я про:

* понятность vs различимость
* разные роли иконки
* наглядное размытие картинки

Ответить Лондон как столица Парижа, 6 ноября 2008

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

Ответить alcantara, 7 ноября 2008

Все правильно написано. Насчет руководства Эппл, они тоже были правы для своего времени. Тогда у программ было меньше функций, и вопрос экономии места был важнее.

Кстати насчет расфокусировки в глазах, я всегда когдо что-то делаю смотрю на это «размытым зрением», это очень эффективно и помогает как раз в дизайне иконок =) Я делаю это тогда, когда другие прищуриваются… Но мой метод лучше. У меня есть две глубины блура: закрыть один глаз и перенести фокус ближе объекта – сильный блур, и одним же глазом фокус убрать в даль… блур слабее… Еще можно с открытыми глазами делать самый слабый блур, просто расслабляя глазной нерв… фокус сам уходит дальше, но изображение не двоится… А плюс прищуривания только в минус сатурейшене…

Ответить Евгений, 8 ноября 2008

Есть хорошее подробное исследование на эту тему: http://www.boxesandarrows.com/view/icon_analysis
Там помимо прочего показывается, что blur — не совсем тот фильтр, который нужный эффект имитирует.

Ответить http://softwaremaniacs.org/about/, 11 ноября 2008

Иван, я blur использовал, собственно, только для иллюстрации тезиса «узнать иконку бывает легче, чем прочитать надпись». По-хорошему, конечно, в статье на Boxes and Arrows эта тема намного глубже проработана.

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

Ответить yegor, 18 ноября 2008

В дополнение цитата Брюса Тогназзини (http://www.asktog.com/columns/006intuitvsfamiliar.html):

«When designing icons, for example, I always strive for instant recognition–familiar–but I’m usually content if I can achieve memorable.»

(«Работая над пиктограммой, я всегда стараюсь добиться её мгновенного распознавания пользователем, но обычно я удовлетворяюсь, если у меня получается создать её запоминающейся»).

Ответить juniorman.ya.ru, 14 ноября 2008

По-моему, эта фраза полностью раскрывает смысл. Если трудно сделать иконку легко распознаваемой, сделайте ее запоминающейся и легко отличимой от других.

Ответить Александр Субботин, 24 июня 2009

Подскажите, пожалуйста, где можно взглянуть на современные руководства по разработке иконок для Mac OS / Или может кто-то знает о руководстве верстки страниц на сайте Apple ? Заранее благодарю за подобные нямки

Ответить thargon, 16 апреля 2010

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

Он правда не супер толковый и они сами ему не очень следуют.

Ответить Дмитрий Жуков, 19 апреля 2010

Благодарю покорно! То что нужно! Огромное спасибо

Ответить thargon, 19 апреля 2010

Напишите комментарий

Вы можете использовать ваш twitter или facebook. Для этого вам нужно будет авторизоваться на одном из этих сайтов, после чего вы сможете оставлять комментарии.

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

Авторизуйтесь при помощи аккаунта Турбомилк. Вы также можете зарегистрироваться на нашем сайте.

Закрыть