Как подобрать иконки для сайта, модуля или программы?

Категория: Технические советы

– Автор: Игорь (Администратор)

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

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

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

И далее я покажу почему.

Как подобрать иконки - советы и ошибки

Итак, давайте рассмотрим наиболее распространенные советы и ошибки при подборе иконок

1. Что бы вы не создавали, общий стиль назначения иконок стоит сохранять. В данном случае речь не идет о полном строгом соблюдении стандартов или о нечто подобном. Суть в другом. Когда пользователь использует какой-либо программный продукт, то он так или иначе привыкает к общей стилистике, включая кнопкам и их значкам.

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

Другой пример. Возьмем иконку дискеты, которая чаще всего используется для кнопок "Сохранить". Если вместо нее, к примеру, использовать иконку в виде галочки, то это легко приведет к тому, что первое время многие будут считать, что данная кнопка не сохраняет, а запускает проверку данных или нечто подобное.

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

Именно поэтому, необходимо всегда при подборе иконок смотреть на общий стиль других элементов управления.

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

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

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

3. Старайтесь ограничиваться необходимым минимумом иконок. Суть проста, в интерфейсе с 10 часто повторяющимися иконками гораздо легче разобраться, чем в интерфейсе с 255 иконками, пусть даже первый интерфейс и будет выглядеть более упрощенным. Это происходит потому, что человеку приходится держать в голове одновременно существенно меньше информации. Кроме того, всегда важно понимать, что для пользователей каждая добавленная иконка - это еще и необходимость понять с чем ее ассоциировать.

Представьте себе, что у вас есть три вкладки, позволяющие редактировать три разных типа документов. Вы решили, что круто бы каждую иконку стилизовать под соответствующий тип документа. Все выглядит просто шикарно. Однако, ваш продукт разросся. Теперь, у вас 20 типов документов. Но, раз они еще на разных вкладках, то проблемы в основном касаются только необходимости рисовать соответствующие иконки (хотя и здесь у пользователей могут возникнуть проблемы). Прошло еще немного времени и вам понадобились вкладки, где представляются по 3-8 типов документов в виде списка. Попробуйте представить себе этот список. Чаще всего это будет нечто подобное пестрой елки в сочельник.

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

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

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