О пиктограммах

Сейчас в графическом дизайне пиктограммы встречаются намного чаще, чем, скажем, лет 10 назад. Мобильные приложения вполне естественно переняли принципы дизайна интерфейсов десктопных приложений. Затем, в следствие их популярности различные элементы и решения стали заимствоваться смежными областями дизайна, порой совершенно не к месту, скорее только потому, что это какая-то фича в тренде. Иногда пиктограмм очень много, почти как иероглифов в пирамидах. Если приложения используют пиктограммы не только с декоративной целью, но и из-за дефицита свободного пространства, то и сайты, особенно лендинг-пейджи, и принты уже откровенно злоупотребляют иконками нагрузив их декоративной функцией (возможно для компенсации неинтересного контента) . Попробуем разобраться где и почему пиктограмма нужна, а где это будет моветоном, насколько она должна быть понятной и почему иконки современных интерфейсов выглядят так, как они выглядят. Как правило, в защиту пиктограмм говорит тот факт, что ее смысл очевиден и понятен для носителей разных языков. Отсюда причина частого спора о том понятен или непонятен всем пользователям какой-то символ. В общем-то этот спор занятие довольно бесполезное и отчасти повторение исторического соревнования культур при создании письменности. Иероглифы VS Алфавит. При относительно небольшом лексиконе, очевидным был факт изображения слов описывающих вещи в виде этих самих вещей. Но чем мудрёней становились понятия, тем сложнее было придумать очевидный графический образ. В итоге все сошлось к тому, что смысл не всегда очевиден, но есть логика понимания, какие-то правила считывания. И даже те же древние египтяне и современные китайцы в конце концов стали использовать иероглифы для фонетической записи слов используя их не только как символы-существительные, прилагательные и глаголы, но и слоги и просто отдельные частицы слов.

Рис.1 — Слева китайский иероглиф обозначающий человек и имеющий визуальное сходство с физическим объектом. В центре иероглиф день с менее очевидной формой. Справа вчера, тоже само по себе не понятно, но хотя-бы заметна логика построения: к понятию день добавили приставку что-то типа английского yester.Всем понятные иконки уже проиграли однажды битву совершенно непонятным , но более оперативным буквам. Абсолютно понимаемые пиктограммы создать сложно (а именно как-то так зачастую ставится задача дизайнеру). Но можно намного проще создать легко запоминаемые и, как следствие, понимаемые символы. Однако даже для легкого понимания требуются какие-то минимальные усилия либо индивида (его логика, эрудиция, кругозор, культура) либо общества, которое своим примером снабжает этого индивида знанием о смысле изображения. Намного эффективней использовать знаки, которые просто объяснить и легко запомнить, чем прилагать невероятные усилия для создания абсолютно всеми понимаемого изображения. А еще лучше создавать знаки, которые уже базируются на какой-то информации, на культурных единицах уже имеющихся у того, для кого эти знаки предназначены. То есть, пиктограмма должна быть понятна для минимально подготовленной целевой аудитории. Чем шире аудитория тем более общий и доступный знак требуется. В статьях о сражениях Википедия помечает погибших военачальников крестом. Для христианской культуры этот знак понятен, однако для читателей из других стран он не используется. И даже более того, для различных языковых версий предлагаются разные варианты этого самого креста. Для примера можете посмотреть статью о Марафонской битве на разных языках. Целевая аудитория слишком широка, общий знак создать не удалось, пришлось локализировать.

Рис.2 — Варианты крестов: слева для англоязычной аудитории, справа для читателей из Испании и России.Насколько очевиден этот знак (рис.3 слева) для человека не умеющего водить и не разбирающимся в правилах дорожного движения? Но для водителя или человека знающего смыл известен, это - Обгон запрещён.

Рис. 3 — Знаки Обгон запрещёнДогадаться если и можно, но не сразу. Можно конечно, поломать голову предлагая более наглядные иллюстрации данного правила. Но это бесполезная трата времени. Истинная цель использования пиктограмм не для того чтобы незнающий понял, а чтобы знающий заметил скорее. Знак считывается быстрее, чем слово, хоть слова и понятней. Вы сели за руль не для того чтобы отгадывать смысл знаков, а чтобы быстро их идентифицировать. И пусть этот же знак в Индии (Рис. 3 - справа) лучше иллюстрирует смысл, но быстрее вы заметите черную и красную машинки, а не запрещающий знак со стрелочками. Однако это не значит, что знак не должен отождествляться с правилом. Общность между изображением и смыслом делается для быстрого запоминания. Допустим вы не знали ранее смысла этого знака с двумя машинами и не смогли сами догадаться. Я сообщил его вам. Образ в общем-то ассоциативный. Одна машина и другая. Красный запрещает. Мнемоническая цепочка выстроилась. Теперь вам кажется что все очевидно и знак вы уже не забудете.

Пиктограммы часто используются для маркировки различных изделий. Цель этого - чтобы было достаточно беглого взгляда для какой-то условной сортировки по важному параметру, без вчитывания в текст перечисляющий эти параметры. Тут пиктограммы часто совсем не говорят сами за себя. Например на сетевом адаптере любого вашего устройства вы найдете множество значков не совсем понятных неспециалисту. Пиктограммы на бирках одежды хоть и изображают как стирать и гладить, но все-таки требуют немного разобраться что к чему и адресованы тем, кто это будет делать и для кого важно знать свойства этой самой одежды. Если изображение утюга говорит нам о том, что изделие можно гладить, то зачеркнутый треугольник скорее всего не говорит ни о чем (рис. 4). Для хозяйки которой важен вид вещей этот знак сообщает, что отбеливать эту вещь ни в коем случае нельзя. И она, зная его смысл, будет его хорошо замечать.

Рис.4 — Маркировка одежды. Слева - можно гладить. Справа - нельзя отбеливать.

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

Рис.5 - Знак обозначающий нетоксичный материал упаковки слева и знак капрала либо сержанта в различных армиях.В интерфейсах применение пиктограмм очень похожее. Задача чтобы пользователь быстро находил нужный элемент не вчитываясь в слова. Кстати, даже в текстовых интерфейсах (например продукты Adobe имеют довольно много меню с выпадающими списками) мы не вчитываемся каждый раз в смысл фразы той или иной опции а помним по первым буквам или общим очертаниям, приблизительно по порядку и т.д. Суть в в том, что хотим ли мы передать очень точный смысл со всеми нюансами или же передать быструю информацию пользователю. Конечно же если надо объяснить все нюансы для исключения недопонимания мы используем слова, подкрепляя их графикой но не пиктограммами. Общение эмодзи, стикерами и смайлами может быть забавным и передающим смысл в дружеской шуточной болтовне. Но попробуйте объяснить работу сложной роботизированной системы пиктограммами и зайдете в тупик. Пользователя надо обучать. Для серьезных задач типа облачных систем управления промышленными объектами все равно создаются инструкции с описанием знаков. В интерфейсах стремятся делать все как можно очевидней и даже существует поговорка, что если интерфейс надо объяснять, то он плох . Спорный вопрос, объяснять может и не надо, а ненавязчиво обучать необходимо. Такова природа человека, что пищу свою (и пищу для ума в том числе) добывать он в современном мире уже не обязан, в вот хотя бы прожевать и усвоить должен сам. Различные подсказки в роде тех, что "кликните по этому значку", ненавязчивая анимация предлагающая пробовать как работает инструмент, всплывающие тултипы по наведении. Все это помогает новичку быстро освоиться. Пользователю достаточно раз навести на незнакомый значок, чтобы почитать что он значит, увидеть картинку, проассоциировать с действием и запомнить. Кроме быстрой передачи информации роль пиктограммы в интерфейсе еще и экономить место. Кстати, ставшие чуть ли не стандартом пиктограммы меню (гамбургер) и дополнительных опций (многоточие) ведь буквально несколько лет назад вызывали оживленные споры и гамбургер назывался кнопкой, ненавидимой дизайнерами и малопонятной пользователям. Прошло не так много времени и эти публикации сменились статьями "о самой популярной кнопке" , сама же она осталась какой и была изначально, новых еще менее искушеных пользователей лишь добавилось, и никаких проблем с пониманием! Случилось то, о чем я упоминал выше, люди не родились со знанием об этой кнопке, ее значение было ими растолковано обществом либо быстро приобретено на собственным опыте. От того что пользователь, не зная что это такое, один раз попробовал нажать ничего страшного не случилось, а смысл он сразу понял. И не надо придумывать более очевидный образ. Так как этот значок используется в продуктах с миллионной аудиторией, то он стал чем-то вроде стандарта. И вряд-ли каждый пользователь знает, что своим видом эта кнопка как-бы изображает абстрактные 3 строчки меню, но попробовав однажды или увидев как этим пользуются другие навсегда наверняка запомнил что означает этот гамбургер. К слову, иногда случается так, что всеми понимаемая и привычная пиктограмма уже давно утратила те ассоциации, которые были изначально. Классический пример — это иконка дискеты для сохранения. Пару десятков лет дискеты использовались для хранения файлов. Современному пользователю возрастной категории до 20 лет этот символ ни о чем не говорит. Но он очень быстро узнал какой функционал за ним стоит и даже не задумывается что значит образ. В фотошопе иконки изображают реальные инструменты дизайнеров, фотографов и ретушеров докомпьютерной эпохи. Большинство современных профессионалов уже не использовали эти инструменты и многие даже не знают, что такие вообще существовали, и что дизайнеры без компьютеров могли создавать макеты не хуже, чем с помощью современных цифровых технологий.И даже пиктограмма трубки телефона фактически устарела. Но эти символы устоялись и закрепились в памяти общества. Технический прогресс движется стремительно по экспоненте и мы просто не успеваем привыкнуть к образу предметов. То ли дело 20-й век. В течение десятков лет в обиходе были кассетные магнитофоны, лучевые телевизоры, телефоны с дисковым набором. Дизайн их хоть и менялся, но в целом форма была очень похожей. Эти образы навсегда запечатлелись в памяти не одного поколения, такие пиктограммы обладают какой-то харизмой, в них заключена целая эпоха. Их можно сравнить с лингвистической ситуацией, когда имя собственное становится нарицательным, как всем известный случай со словом аспирин которое изначально было названием торговой марки компании Bayer. Обратите внимание при просмотре какого-то детективного или шпионского фильма. Если нам показывают как кто-то за кем-то ведет прослушку, то в кадре мы видим катушечный магнитофон, респектабельно вращающий бобины. При том, что в те времена, о которых идет речь в фильме уже имелись куда более совершенные устройства. Потому что это сильный художественный образ. В последнее время альтернативой стало лишь изображение звуковой волны на мониторе. Дизайнеры пытались осовременивать иконки телефонов. Не успели они использовать изображение смартфона с кнопками, как этот образ перестал иметь прототип и ассоциативный ряд. Поэтому нет особого смысла пытаться изобразить в пиктографике современный вид устройства. Сейчас слишком быстро все меняется. И никакой гаджет не успеет произвести своим видом такое впечатление на три поколения людей, как это сделала дискета. Youtube уже максимально осовременил свою айдентику и пиктографику, но все равно в основе мы видим теплый лучевой и пузатый телевизор. Да и само название произошло от tube - означающее трубу кинескопа. Если быть более точным, то на самом деле почти все пиктограммы - это идеограммы. То есть они изображают какой-то смысл с предметом или понятием ассоциирующийся, а не сам предмет буквально.Пиктограммы можно подписывать. В веб-интерфейсах это рекомендовалось для большей видимости активной области по которой можно кликнуть (рис 6). Это верно, но не критично. Развивая тему можно упомянуть также, что нажимать всегда удобней на четко обозначенную область, чем просто на значок. Однако здесь вступает в игру эстетический фактор. Далеко не всегда приятен глазу интерфейс состоящий из кнопок. Баланс красивое-удобное всегда требует усилий и чем-то иногда жертвуют. Например iOS старых версий предлагала пользователю четко ограниченные кнопки. Последние версии предлагают элементы интерфейса-пиктограммы без визуальных границ, только смысловой значок.

Рис.6 — В иконку без подписи пользователь будет более тщательно целиться, неосознанно воспринимая границы изображения за границы активной области.

Рис.7 — Кнопки справа нажимать удобней, видна область, можно даже тапнуть или кликнуть где-то довольно далеко от центра и быть уверенным в попадании. Но те, что слева более концептуальны. Впрочем, как показывает опыт последних лет скрытая активная область элементов вполне неплохо работает там, где нет скученности информации. Плюс облегчает в целом визуальное восприятие. Клавиатуры в мобильных интерфейсах без границ активных областей работают даже лучше. А вот в одном мессенждере кнопка "отправить" не имеет визуальной границы и так близко расположена к полю ввода сообщения, что порой у пользователя случается ситуация, в которой он не знает, попадет ли он в поле для редактуры сообщения или отправит его.

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

Рис.8 — Примеры того как совместно работают надпись и пиктограмма. Словами передается точный смысл, а пиктограмма способствует быстрому нахождению нужной опции.Кроме того в таком случае не требуется искать какой-то очень точный образ для иконки. Пиктограммы на геймпаде Sony Playstation. Они просто визуально разные и хорошо отличимы глазом. Хотя дизайнер, спустя годы, выдавал версию с обоснованием, но это скорее всего легенды.

Рис.9 — Геймпад для Сони Плейстейшн. Запомнить комбинацию быстрее, чем с помощью буквенных маркировок.

Иконки часто используются для акцентирования внимания. И это верное решение, но в разумных пределах. Как я писал в первых строках не надо превращать интерфейс в древнеегипетское творчество. До начала эпохи скевоморфизма и первый период его царствования, на стоках и в свободном доступе иконок было не так уж много. Некоторые 3д-дизайнеры или векторные иллюстраторы бывало специализировались исключительно на создании иконок под конкретный проект и процесс был трудоемким и уникальным. Когда человечество удовлетворило свое стремление оцифровать окружающий мир и наигралось со стеклянными и металлическими кнопками, бликами и отражениями, пиктограммы приняли свой традиционный минималистичный вид, популяризированный плоским дизайном. Технически создавать такие иконки стало проще, поисковый запрос на тему выдает массу вариантов. Отсюда засилье иконок в современном дизайне. С одной стороны тренд, с другой соблазн без особых усилий этому тренду следовать. Например, если где-то пишут адрес или номер телефона, то тут же снабжают его пиктограммой локации и телефонной трубки соответственно, чаще всего лишь по причине а почему бы и нет. Иногда кажется, дай волю и иконка будет предварять каждое слово. Фактически пиктограммы превращаются в какие-то декоративные элементы а сайты в усыпальницы фараонов со всей своей пафосной бессмысленностью. Но в отличие от пирамид, эти сайты вряд-ли продержатся несколько тысяч лет и станут культурной ценностью.Если вы размещаете пиктограммы только для красоты, то хорошо подумайте а стоит ли? Возможно такими действиями вы лишь удешевляете вид вашего дизайна. Ведь всем ясно, что это не авторская работа а стоковые изображение по копеечной цене, а то и полученные бесплатно. Если пиктограмма не улучшает восприятие, то она не нужна. Использование пиктограмм обуславливается даже не модой, а тем, что их просто много и они дешевые.

Рис.10 — Пиктограммы не используются в меню, так как категорий слишком много, предпочтение отдано сортировке по алфавиту.Говоря о моде, стоит затронуть тему художественного исполнения пиктограмм в интерфейсах. Сейчас это преимущественно условные изображения без объема, часто выполненные в тонких линиях. Кто-то скажет, что это просто веяние моды. Но на самом деле такой вид обусловлен прежде всего техническими возможностями. Проще говоря, сейчас делают так, потому что это стало возможным, а не потому что у какого-то художника-первооткрывателя случилось озарение. И по большому счету, поговорка, что "новое это хорошо забытое старое" как нельзя кстати.Появление пиктограмм в интерфейсах фактически и было появление самого графического интерфейса. Нарисованные попиксельно графические элементы имели грубую точечную структуру. Разрешающая способность экранов не позволяла сделать детальные изображения с плавными контурами. Размер пикселя был велик относительно всей иконки. В наше время изображения стилизованные под графику той эпохи называют пиксель-артом либо как угодно с приставкой восьмибиный.

Рис. 11 - Графический интерфейс первых Макинтошей. Если отбросить видимую глазу пиксельную структуру, то такой дизайн более близок современному, чем многое, что было создано в течение более чем 30 лет с момента появления этого интерфейса.То, что интерфейс древнего Мака был монохромный сыграло даже на руку дизайнерам. В тесных рамках проще находить оптимальное решение, чем в безграничных возможностях. По мере роста производительности компьютеров, львиная доля которой потреблялась графикой, дизайн иконок развивался и усложнялся.

Рис. 12 - Иконки Windows 3. Уже цветные, с имитацией тенейНа рисунке 12 мы видим уже раскрашенные иконки Windows 3 но со все еще режущей глаз пиксельной структурой. Сейчас пиксельную структуру мы чаще всего уже не видим, так как даже настольные мониторы могут иметь плотность точек выше чем 72 на дюйм, таким образом современный пиксель в 1.5-4 раза меньше и иногда даже практически не различим глазом. Впрочем и пиксельная картинка в 80-х не была на самом деле такой резкой.Так вышло, что другой недостаток - размытость пикселей из-за свечения люменофора лучевых мониторов немного компенсировал эту резкость. Поэтому изображение иконок не вызывало такой боли при взгляде на них, как возможно вы чувствуете сейчас.Плотность пикселей на дюйм очень долгое время и даже вплоть до наших дней не менялась, так как устройством вывода были мониторы, сперва лучевые, затем жидкокристаллические. Со временем значительно увеличивалось количество отображаемых цветов, что не могло не отобразиться на виде иконок. А также развивались художественные методы и инструменты. На рис 14 изображены иконки Windows 98 и MacOs9. Они по прежнему имеют грубоватую пиксельную структуру, но за счет возможности использовать больше цветов уже получается градиентная заливка, правда видимыми ступеньками. В качестве смешения цветов видим как используется диффузия (на желтой папке пиксель за пикселем сделан эффект затемнения книзу)

Рис 13 - Иконки Windows 98 и MacOs9Революционной стала возможность плавно смешивать цвета и сглаживать пиксельные края ( antialiasing). После математической обработки изображения появилась возможность оперировать такими понятиями как дробные доли пикселя. Технически это представлялось (и представляется до сих пор) как плавный переход от одного цвета к другому на несколько пикселей. Визуально же кажется, что это 1 пиксель но со смягченными краями. Как работает сглаживание пикселей можно увидеть на рис 14. Достойного сглаживания шрифтов, кстати, довольно долго так и не было. В то время, как сглаживание изображений использовалось еще в 90е. Так как лучевые мониторы в силу размытости пикселей как бы сглаживали контуры букв и лишь после окончательного повсеместного использования жидкокристаллических мониторов проблема снова встала остро и была окончательно решена. Теперь мы всегда и везде видим сглаженный шрифт.

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

Как же сглаживание повлияло на иконки? Приблизительно также как выпуск Айфона и Айпада на разработку приложений. MacOS 10, Windows XP, Windows 7 - дизайн иконок этих систем уже не пиксельно нарисованные иконки, а детально созданные с фотографической точностью или смоделированные в 3D изображения смасштабированные с применением сглаживания. Фактически это был старт эпохи скевоморфизма в дизайне, затянувшейся почти на десятилетие. За счет плавных переходов цветов и теней появилась возможность изображать блики, отражения, а, стало быть, имитацию поверхностей реальных материалов. Иконки тех времен просто соревновались в сложности. Сделанные из стекла, алюминия, объемные, сияющие. Думаю еще не забылись стеклянные баллоны смс-чата первых айфонов. Человечество долго мучилось пикселями и, что называется, наконец-то дорвалось до безграничных графических возможностей. Поскольку такой дизайн совпал с началом создания сайтов с контентом генерируемым пользователем, которые называли веб2.0 (в будущем соцсети и блоги), то и к дизайну такому приставка "веб два ноль" и приклеилась.

Рис 15- Скевоморфные иконки предыдущих версий MacOs

Со временем стиль себя изжил, дизайн имитирующий физические свойства отвязался от "веб 2.0" проектов и перерос в повсеместно используемый скевоморфизм. Но, насытившись, и дизайнеры, и пользователи устремились к контрастной простоте в виде плоских и лаконичных знаков. Но опять же, не просто так, а дождавшись подходящей технологии. Те простые иконки мобильных интерфейсов что мы имеем сейчас стали возможными только благодаря большой плотности точек на дюйм мобильных устройств (также как и "трендовые" тонкие шрифты). Дело в том что как я говорил ранее, механизм сглаживания использует 2-4 соседних пикселя для имитации отображения "однопиксельного" изображения. И при отображении на экране пиктограмм с толщиной линии 1 пиксель происходит математическая погрешность и линии могут быть выглядеть немного разорванными и неравномерными. Это заметно глазу, если это устройство с исторически традиционным dpi 72 или 96, когда каждый пиксель различим. На мобильных устройствах все, что мы видим минимум в 2 раза мельче и погрешности глазом совершенно неразличимы. Отсюда уверенность дизайнеров в прекрасном отображении иконок выполненных в тонких линиях, которые концептуально напоминают все те же значки первых Макинтошей.В общем у всякой моды есть объяснения и рациональный фундамент, не стоит необдуманно просто пытаться слепо следовать ей. Например если ваш проект - это веб-интерфейс десктоп проекта промышленного облачного сервиса, а вы поддавшись общей тенденции делаете для него векторные иконки в тонких линиях, то можете в итоге получить ситуацию, что у конечного потребителя такие иконки будут выглядеть довольно побитыми и невыразительными, не смотря на то, что теоретически у вас все верно. Что касается художественных образов и стилистики исполнения, в пиктографике есть то, что можно назвать какой-то основой - это монохромное минималистичное, но характерное изображение объекта которое всегда будет достойно выглядеть. Вы найдете эти изображение на протяжении всей эпохи активного использования пиктографики в графическом дизайне. То есть как минимум с середины 20-го века, периодически украшенные модными веяниями, но сохраняющие суть - как можно проще и быстрей передать смысл либо удешевить и ускорить производство знаков. Влияние времени и настроения неизбежно, но ни пиксель-арта, ни кнопок из красного дерева мы уже так массово не увидим. Возможно в будущем нас ждет какой-то ренессанс скевоморфизма. Отчасти он уже немного возвращался в виде длинных теней и намека на объем элементов флэт-дизайна. Буквально щепотка его была добавлена гуглом в своей материал дизайн базирующийся на плоском дизайне.

Просматривая пиктограммы, иконки, знаки которые были 30, 50, 100 лет назад всегда можно найти какое-то повторение того, что уже было. В развитии дизайна всегда присутствует некая цикличность декад. Спустя десятилетия мы видим возвращение например музыкальных или модных предпочтений прошлых лет, но уже на базе новых технологий.

Рис. 16 - Айдентика Олимпиады в Мексике 1968 года. Еще немного и можно перепутать с экраном IOS

При создании образа иконки надо хорошо подумать кто является целевой аудиторией и какой уровень ее подготовки. Кому доверить обучение пользователя: обществу, рекламе, интерфейсу или предложить пользователю приобрести свой собственный опыт. Пытаться делать пиктограммы которые расскажут пользователю все о системе чревато тем, о чем предупреждает один из известных законов Мерфи "сделай понятное дураку и этим будут пользоваться только дураки". Энциклопедическое описание понятия пиктограммы использует слово "узкоспециализированное изображение". Чтобы исключить недопонимание, пиктограмму всегда можно подписать. Не стоит размещать иконки в дизайне только для украшательства. Такой дизайн все равно выглядит, как бижутерия.

Если пиктограмма совершенно не функциональна то она не нужна. Под функциональностью может быть помощь в быстром поиске нужного, привлечение внимания, форматирование и структурирование информации. Мобильные интерфейсы в силу того, что имеют довольно мало места с физической точки зрения для пользователя (диагонали экранов 5-10 дюймов) как бы намекают на использование пиктограмм, а вот веб и другие направления графического дизайна такой необходимостью вовсе не обременены, поэтому и злоупотреблять этим не стоит. В случаях когда пиктограмма выполняет роль иллюстрации, лучше и делать полноценную иллюстрацию, более детальную, чем лаконичный значок, например как это традиционно делает DropBox (Рис. 17)

Рис. 17 Пример иллюстрации с сайта Dropbox