Назначение иконок

Назначение иконки состоит в том, чтобы посредством графики объяснить пользователю, что произойдёт в результате его взаимодействия с элементом интерфейса, обозначенным этой иконкой. Например, если человек кликает по иконке с изображением принтера, то страница должна быть распечатана. Смысл в том, чтобы одной маленькой картинкой заменить несколько длинных предложений с пояснительным текстом. Иконка – это логическое развитие кнопки с текстом. Поэтому идеальная иконка не должна сопровождаться подписью, она должна пониматься безошибочно без дополнительных пояснений.

Иконка — это логическое развитие кнопки с текстом. Идеальная иконка должна быть понятна без дополнительного поясняющего текста.

Уяснение смысла иконок

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

Как бы ни была хороша иконка, всегда найдётся тот, кто поймёт её смысл неверно.

Проблема №1 Выбор неверных ассоциаций

Для того чтобы создать понятную иконку, дизайнер должен подобрать такое изображение, которое будет вызывать у пользователя ассоциации, максимально соответствующие смыслу этого изображения. Лучше всего если это будут прямые ассоциации, как в случае с принтером (принтер → печать). Однако далеко не всегда удаётся подобрать прямые ассоциации.

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

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

Весьма распространенная и не самая понятная иконка загрузки.

Проблема №2 Чрезмерное упрощение

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

На этой фотографии вы видите кнопки «вызов» и «сброс вызова». Эти кнопки представляют собой упрощённое изображение обычного телефона в момент разговора и по его завершении. В данном случае изображения на кнопках ещё более упрощены. Они в меньшей степени напоминают трубку телефона, а у кнопки «сброс вызова» отсутствует нижний блок. Тем не менее, за счёт использования общепринятых цветов можно легко догадаться, какая кнопка за что отвечает. На этой фотографии приведён пример чрезмерного упрощения. Данные кнопки ни формой, ни цветом не объясняют своего назначения. Именно такого чрезмерного упрощения следует избегать.

Проблема №3 Моральное устаревание иконок

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

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

Вывод

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

http://shelkovnikov.pro